feat: add version info to footer (#3362) (#3393)

* feat: add version info to footer (#3362) * chore: findable-ui as a dependency (#3362) --------- Co-authored-by: Fran McDade <[email protected]>
anvilproject · Nov 20, 2024 · dda0e3d · dda0e3d
1 parent 1efd825
commit dda0e3d
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 75 deletions.
diff --git a/components/Search/hooks/useSearch.ts b/components/Search/hooks/useSearch.ts
@@ -1,8 +1,9 @@
 import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card";
+import { useConfig } from "@databiosphere/findable-ui/lib/hooks/useConfig";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
-import { useConfig } from "../../../hooks/useConfig";
+import { SiteConfig } from "../../../site-config/common/entities";
 import {
   OnSearchFn,
   SearchPagination,
@@ -33,9 +34,8 @@ export interface UseSearch {
  * @returns search results.
  */
 export const useSearch = (): UseSearch => {
-  const {
-    config: { portalURL },
-  } = useConfig();
+  const { config } = useConfig();
+  const { portalURL } = config as SiteConfig;
   const { asPath } = useRouter();
   const [requestURL, setRequestURL] = useState<string>();
   const { isIdle, isLoading, isSuccess, response } =

diff --git a/components/common/Link/link.tsx b/components/common/Link/link.tsx
@@ -1,8 +1,9 @@
 import { TypographyWordBreak } from "@databiosphere/findable-ui/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak";
 import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { useConfig } from "@databiosphere/findable-ui/lib/hooks/useConfig";
 import { replaceParameters } from "@databiosphere/findable-ui/lib/utils/replaceParameters";
 import { EMAIL_ADDRESSES, PATH_PARAMETERS } from "../../../common/constants";
-import { useConfig } from "../../../hooks/useConfig";
+import { SiteConfig } from "../../../site-config/common/entities";
 
 /**
  * Basic anchor link component, used by MDX for all anchor links.
@@ -13,9 +14,8 @@ export const Link = ({
   ...props /* Spread props to allow for anchor link specific props e.g. "href". */
 }): JSX.Element => {
   const { children, href, ...linkProps } = props;
-  const {
-    config: { browserURL, portalURL },
-  } = useConfig();
+  const { config } = useConfig();
+  const { browserURL, portalURL } = config as SiteConfig;
   return (
     <DXLink
       label={<TypographyWordBreak>{children}</TypographyWordBreak>}

diff --git a/hooks/useConfig.tsx b/hooks/useConfig.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "add-cser-materials": "esrun scripts/add-cser-materials.ts"
   },
   "dependencies": {
-    "@databiosphere/findable-ui": "15.0.0",
+    "@databiosphere/findable-ui": "15.0.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mdx-js/loader": "^3.0.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import "@databiosphere/findable-ui";
 import { Header as DXHeader } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/header";
+import { ConfigProvider } from "@databiosphere/findable-ui/lib/providers/config";
 import { LayoutStateProvider } from "@databiosphere/findable-ui/lib/providers/layoutState";
 import { createAppTheme } from "@databiosphere/findable-ui/lib/theme/theme";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
@@ -13,7 +14,6 @@ import TagManager from "react-gtm-module";
 import { AppLayout, Footer as DXFooter, Main as DXMain } from "../components";
 import { Head } from "../components/common/Head/head";
 import { config } from "../config/config";
-import { ConfigProvider } from "../providers/config";
 import { BREAKPOINTS } from "../site-config/common/constants";
 import { mergeAppTheme } from "../theme/theme";
 

diff --git a/providers/config.tsx b/providers/config.tsx
diff --git a/site-config/anvil-portal/dev/config.ts b/site-config/anvil-portal/dev/config.ts
@@ -15,10 +15,15 @@ import { socialMedia, SOCIALS } from "./socialMedia";
 
 const APP_TITLE = "AnVIL Portal";
 const EXPLORER_URL = "https://explore.anvilproject.dev.clevercanary.com";
+export const GIT_HUB_REPO_URL = "https://github.com/anvilproject/anvil-portal";
 const PORTAL_URL = "https://anvilproject.dev.clevercanary.com";
 const SLOGAN = "NHGRI Analysis Visualization and Informatics Lab-space";
 
-export function makeConfig(browserUrl: string, portalUrl: string): SiteConfig {
+export function makeConfig(
+  browserUrl: string,
+  portalUrl: string,
+  gitHubUrl: string
+): SiteConfig {
   return {
     analytics: {
       gtmAuth: "dn4W-jqWUyNBj6ON0Ic_wA", // GTM environment-specific
@@ -32,6 +37,7 @@ export function makeConfig(browserUrl: string, portalUrl: string): SiteConfig {
     },
     entities: [],
     explorerTitle: null,
+    gitHubUrl,
     layout: {
       footer: {
         Branding: C.ANVILBranding(),
@@ -46,6 +52,7 @@ export function makeConfig(browserUrl: string, portalUrl: string): SiteConfig {
           },
         ],
         socials: socialMedia.socials,
+        versionInfo: true,
       },
       header: {
         announcements,
@@ -194,6 +201,10 @@ export function makeConfig(browserUrl: string, portalUrl: string): SiteConfig {
   };
 }
 
-const config: SiteConfig = makeConfig(EXPLORER_URL, PORTAL_URL);
+const config: SiteConfig = makeConfig(
+  EXPLORER_URL,
+  PORTAL_URL,
+  GIT_HUB_REPO_URL
+);
 
 export default config;
diff --git a/site-config/anvil-portal/prod/config.ts b/site-config/anvil-portal/prod/config.ts
@@ -1,11 +1,11 @@
 import { SiteConfig } from "../../common/entities";
-import { makeConfig } from "../dev/config";
+import { GIT_HUB_REPO_URL, makeConfig } from "../dev/config";
 
 const EXPLORER_URL = "https://explore.anvilproject.org";
 const PORTAL_URL = "https://anvilproject.org";
 
 const config: SiteConfig = {
-  ...makeConfig(EXPLORER_URL, PORTAL_URL),
+  ...makeConfig(EXPLORER_URL, PORTAL_URL, GIT_HUB_REPO_URL),
   analytics: {
     gtmAuth: "IgbX8s-NCGg81Z0eWB6KAQ", // GTM environment-specific
     gtmId: "GTM-KMGCR8F",

diff --git a/views/HomeView/homeView.tsx b/views/HomeView/homeView.tsx
@@ -1,3 +1,4 @@
+import { useConfig } from "@databiosphere/findable-ui/lib/hooks/useConfig";
 import { SectionAnalysisPortals } from "../../components/Home/components/Section/components/SectionAnalysisPortals/sectionAnalysisPortals";
 import { SectionCloudEnvironment } from "../../components/Home/components/Section/components/SectionCloudEnvironment/sectionCloudEnvironment";
 import { SectionDatasets } from "../../components/Home/components/Section/components/SectionDatasets/sectionDatasets";
@@ -6,11 +7,11 @@ import { SectionPublications } from "../../components/Home/components/Section/co
 import { SectionUpdates } from "../../components/Home/components/Section/components/SectionUpdates/sectionUpdates";
 import { SectionWorkspaces } from "../../components/Home/components/Section/components/SectionWorkspaces/sectionWorkspaces";
 import { SectionDivider } from "../../components/Home/components/Section/section.styles";
-import { useConfig } from "../../hooks/useConfig";
+import { SiteConfig } from "../../site-config/common/entities";
 
 export const HomeView = (): JSX.Element => {
   const { config } = useConfig();
-  const portalURL = config.portalURL;
+  const portalURL = (config as SiteConfig).portalURL;
   return (
     <>
       <SectionHero />