feat: add optional version information to footer (#258) (#265)

Co-authored-by: Fran McDade <[email protected]>

src/components/Layout/components/Footer/components/VersionInfo/components/Tooltip/components/Title/constants.ts

@@ -0,0 +1,5 @@
+import { LinkOwnProps } from "@mui/material";
+
+export const LINK_PROPS: Partial<LinkOwnProps> = {
+  color: "inherit",
+};

src/components/Layout/components/Footer/components/VersionInfo/components/Tooltip/components/Title/title.tsx

@@ -0,0 +1,53 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import { useConfig } from "../../../../../../../../../../hooks/useConfig";
+import { TEXT_BODY_SMALL_400_2_LINES } from "../../../../../../../../../../theme/common/typography";
+import { Link } from "../../../../../../../../../Links/components/Link/link";
+import { VersionInfoProps } from "../../../../types";
+import { getGitHash, getVersion } from "../../../../utils";
+import { LINK_PROPS } from "./constants";
+import { getCommitUrl, getReleaseUrl } from "./utils";
+
+export const Title = ({
+  versionInfo,
+}: Pick<VersionInfoProps, "versionInfo">): JSX.Element | null => {
+  const {
+    config: { gitHubUrl },
+  } = useConfig();
+  if (!versionInfo) return null;
+  const { buildDate, catalog, gitHash, version } = versionInfo;
+  return (
+    <Typography component="div" variant={TEXT_BODY_SMALL_400_2_LINES}>
+      {buildDate && (
+        <div>
+          <span>Build Date: </span>
+          <span>{buildDate}</span>
+        </div>
+      )}
+      <div>
+        <span>Version: </span>
+        <Link
+          {...LINK_PROPS}
+          label={getVersion(version)}
+          url={getReleaseUrl(gitHubUrl, versionInfo)}
+        />
+      </div>
+      {gitHash && (
+        <div>
+          <span>Git Commit: </span>
+          <Link
+            {...LINK_PROPS}
+            label={getGitHash(gitHash)}
+            url={getCommitUrl(gitHubUrl, versionInfo)}
+          />
+        </div>
+      )}
+      {catalog && (
+        <div>
+          <span>Catalog: </span>
+          <span>{catalog}</span>
+        </div>
+      )}
+    </Typography>
+  );
+};

src/components/Layout/components/Footer/components/VersionInfo/components/Tooltip/components/Title/utils.ts

@@ -0,0 +1,31 @@
+import { VersionInfo } from "../../../../types";
+
+/**
+ * Returns GitHub commit URL for the given git hash.
+ * @param gitHubRepoUrl - GitHub repository URL.
+ * @param versionInfo - Version info.
+ * @returns GitHub commit URL.
+ */
+export function getCommitUrl(
+  gitHubRepoUrl?: string,
+  versionInfo?: VersionInfo
+): string {
+  if (!gitHubRepoUrl || !versionInfo) return "";
+  if (!versionInfo.gitHash) return "";
+  return `${gitHubRepoUrl}/commit/${versionInfo.gitHash}`;
+}
+
+/**
+ * Returns GitHub release URL for the given release version.
+ * @param gitHubRepoUrl - GitHub repository URL.
+ * @param versionInfo - Version info.
+ * @returns GitHub release URL.
+ */
+export function getReleaseUrl(
+  gitHubRepoUrl?: string,
+  versionInfo?: VersionInfo
+): string {
+  if (!gitHubRepoUrl || !versionInfo) return "";
+  if (!versionInfo.version) return "";
+  return `${gitHubRepoUrl}/releases/tag/${versionInfo.version}`;
+}

src/components/Layout/components/Footer/components/VersionInfo/constants.ts

@@ -0,0 +1,30 @@
+import { ChipProps, TooltipProps } from "@mui/material";
+import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../../../styles/common/mui/chip";
+
+export const CHIP_PROPS: Partial<ChipProps> = {
+  color: MUI_CHIP_PROPS.COLOR.DEFAULT,
+  size: MUI_CHIP_PROPS.SIZE.SMALL,
+};
+
+export const TOOLTIP_PROPS: Partial<TooltipProps> = {
+  arrow: true,
+  slotProps: {
+    popper: {
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, -4],
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: { padding: 8 },
+        },
+      ],
+    },
+    tooltip: {
+      sx: { maxWidth: "none" },
+    },
+  },
+};

src/components/Layout/components/Footer/components/VersionInfo/types.ts

@@ -0,0 +1,14 @@
+import { ChipProps, TooltipProps } from "@mui/material";
+
+export interface VersionInfo {
+  buildDate?: string;
+  catalog?: string;
+  gitHash?: string;
+  version?: string;
+}
+
+export interface VersionInfoProps {
+  chipProps?: Partial<ChipProps>;
+  tooltipProps?: Partial<TooltipProps>;
+  versionInfo?: VersionInfo;
+}

src/components/Layout/components/Footer/components/VersionInfo/utils.ts

@@ -0,0 +1,32 @@
+import { VersionInfo } from "./types";
+
+/**
+ * Returns displayable shortened version of Git hash.
+ * @param gitHash - Git hash.
+ * @returns displayable shortened version of Git hash.
+ */
+export function getGitHash(gitHash?: string): string | undefined {
+  return gitHash?.substring(0, 7);
+}
+
+/**
+ * Returns Chip label based on version info.
+ * @param versionInfo - Version info.
+ * @returns Chip label.
+ */
+export function getLabel(versionInfo?: VersionInfo): string | undefined {
+  if (!versionInfo) return;
+  const { catalog, gitHash, version } = versionInfo;
+  return [getVersion(version), getGitHash(gitHash), catalog]
+    .filter(Boolean)
+    .join("-");
+}
+
+/**
+ * Returns displayable version, or "Unversioned" if version is not provided.
+ * @param version - Version info.
+ * @returns Version.
+ */
+export function getVersion(version?: string): string {
+  return version || "Unversioned";
+}

src/components/Layout/components/Footer/components/VersionInfo/versionInfo.styles.ts

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { inkLight } from "../../../../../../styles/common/mixins/colors";
+
+export const StyledChip = styled(Chip)`
+  border-radius: 4px;
+  .MuiChip-label {
+    color: ${inkLight};
+  }
+`;

src/components/Layout/components/Footer/components/VersionInfo/versionInfo.tsx

@@ -0,0 +1,31 @@
+import { Tooltip } from "@mui/material";
+import React from "react";
+import { BaseComponentProps } from "../../../../../types";
+import { Title } from "./components/Tooltip/components/Title/title";
+import { CHIP_PROPS, TOOLTIP_PROPS } from "./constants";
+import { VersionInfoProps } from "./types";
+
+import { getLabel } from "./utils";
+import { StyledChip } from "./versionInfo.styles";
+
+export const VersionInfo = ({
+  chipProps,
+  className,
+  tooltipProps,
+  versionInfo,
+}: BaseComponentProps & VersionInfoProps): JSX.Element | null => {
+  return (
+    <Tooltip
+      {...TOOLTIP_PROPS}
+      title={<Title versionInfo={versionInfo} />}
+      {...tooltipProps}
+    >
+      <StyledChip
+        {...CHIP_PROPS}
+        className={className}
+        label={getLabel(versionInfo)}
+        {...chipProps}
+      />
+    </Tooltip>
+  );
+};

src/components/Layout/components/Footer/footer.tsx

@@ -6,17 +6,19 @@ import { NavLinkItem } from "../Header/components/Content/components/Navigation/
 import { AppBar, Link, Links, Socials } from "./footer.styles";
 
 export interface FooterProps {
-  Branding: ReactNode;
+  Branding?: ReactNode;
   className?: string;
   navLinks?: NavLinkItem[];
   socials?: Social[];
+  versionInfo?: ReactNode;
 }
 
 export const Footer = ({
   Branding,
   className,
   navLinks,
   socials,
+  versionInfo,
 }: FooterProps): JSX.Element => {
   return (
     <AppBar
@@ -27,7 +29,7 @@ export const Footer = ({
     >
       <Toolbar variant="dense">
         {Branding}
-        {(navLinks || socials) && (
+        {(navLinks || socials || versionInfo) && (
           <Links>
             {navLinks &&
               navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (
@@ -39,6 +41,7 @@ export const Footer = ({
                 />
               ))}
             {socials && <Socials buttonSize="small" socials={socials} />}
+            {versionInfo}
           </Links>
         )}
       </Toolbar>

src/components/Support/components/SupportRequest/components/Dialog/dialog.styles.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Fab as MFab, Popover as MPopover } from "@mui/material";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { smokeMain } from "../../../../../../styles/common/mixins/colors";
 import { shadows02 } from "../../../../../../styles/common/mixins/shadows";
 import { tabletUp } from "../../../../../../theme/common/breakpoints";
@@ -15,6 +16,10 @@ export const Fab = styled(MFab)<Props>`
   position: fixed;
   right: 16px;
   z-index: ${({ open }) => (open ? 1350 : 1050)}; // Above backdrop component.
+
+  ${mediaTabletUp} {
+    bottom: 72px;
+  }
 `;
 
 export const Popover = styled(MPopover)`

src/components/Support/components/ViewSupport/viewSupport.styles.ts

@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
 import {
   primaryDark,
   primaryMain,
@@ -27,4 +28,8 @@ export const Fab = styled("a")`
   &:hover {
     background-color: ${primaryDark};
   }
+
+  ${mediaTabletUp} {
+    bottom: 72px;
+  }
 `;

src/config/entities.ts

@@ -360,6 +360,7 @@ export interface SiteConfig {
   explorerTitle: HeroTitle;
   export?: ExportConfig;
   exportToTerraUrl?: string; // TODO(cc) revist location; possibly nest inside "export"?
+  gitHubUrl?: string;
   layout: {
     floating?: FloatingConfig;
     footer: FooterProps;

src/styles/common/mui/chip.ts

@@ -0,0 +1,36 @@
+import { ChipProps } from "@mui/material";
+
+type ChipPropsOptions = {
+  COLOR: typeof COLOR;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const COLOR: Record<string, ChipProps["color"]> = {
+  DEFAULT: "default",
+  ERROR: "error",
+  INFO: "info",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const SIZE: Record<string, ChipProps["size"]> = {
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const VARIANT: Record<string, ChipProps["variant"]> = {
+  FILLED: "filled",
+  FILTER_TAG: "filterTag",
+  N_TAG: "ntag",
+  OUTLINED: "outlined",
+  STATUS: "status",
+};
+
+export const CHIP_PROPS: ChipPropsOptions = {
+  COLOR,
+  SIZE,
+  VARIANT,
+};

src/theme/common/components.ts

@@ -1,5 +1,6 @@
 import { Components, Theme } from "@mui/material";
 import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
   alpha32,
@@ -417,8 +418,23 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
         color: "inherit",
         margin: "0 -2px 0 0",
       },
+      label: {
+        ...theme.typography[TEXT_BODY_SMALL_400],
+      },
     },
     variants: [
+      {
+        props: { size: CHIP_PROPS.SIZE.SMALL },
+        style: {
+          height: 20,
+        },
+      },
+      {
+        props: { size: CHIP_PROPS.SIZE.MEDIUM },
+        style: {
+          height: 24,
+        },
+      },
       {
         props: { color: "default" },
         style: {