feat: update anvil catalog header to latest findable-ui version (#4120) (#4123)

* feat: update anvil catalog header to latest findable-ui version (#4120)

* feat: update anvil and hca and lungmap explorer header config (#4120)

* fix: visible constant (#4120)

* chore: updated findable-ui (#4120)

---------

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

Author: frano-m

explorer/package-lock.json

@@ -37,7 +37,7 @@
     "check-system-status:anvil-cmg": "esrun e2e/anvil/anvil-check-system-status.ts"
   },
   "dependencies": {
-    "@databiosphere/findable-ui": "9.1.0",
+    "@databiosphere/findable-ui": "10.2.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mdx-js/loader": "^3.0.1",

explorer/package.json

@@ -18,14 +18,16 @@ import { SystemStatusProvider } from "@databiosphere/findable-ui/lib/providers/s
 import { createAppTheme } from "@databiosphere/findable-ui/lib/theme/theme";
 import { DataExplorerError } from "@databiosphere/findable-ui/lib/types/error";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
-import { CssBaseline } from "@mui/material";
-import { ThemeProvider } from "@mui/material/styles";
+import { createTheme, CssBaseline, Theme, ThemeProvider } from "@mui/material";
+import { createBreakpoints } from "@mui/system";
+import { deepmerge } from "@mui/utils";
 import { config } from "app/config/config";
 import { FEATURES } from "app/shared/entities";
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
 import { useEffect } from "react";
 import TagManager from "react-gtm-module";
+import { BREAKPOINTS } from "../site-config/common/constants";
 
 const FEATURE_FLAGS = Object.values(FEATURES);
 const SESSION_TIMEOUT = 15 * 60 * 1000; // 15 minutes
@@ -71,7 +73,17 @@ function MyApp({ Component, pageProps }: AppPropsWithComponent): JSX.Element {
             <AuthProvider sessionTimeout={SESSION_TIMEOUT}>
               <LayoutStateProvider>
                 <AppLayout>
-                  <Header {...header} />
+                  <ThemeProvider
+                    theme={(theme: Theme): Theme =>
+                      createTheme(
+                        deepmerge(theme, {
+                          breakpoints: createBreakpoints(BREAKPOINTS),
+                        })
+                      )
+                    }
+                  >
+                    <Header {...header} />
+                  </ThemeProvider>
                   <ExploreStateProvider entityListType={entityListType}>
                     <FileManifestStateProvider>
                       <Main>

explorer/pages/_app.tsx

@@ -0,0 +1,23 @@
+export const EXPLORER_ROUTES = {
+  DATASETS: "/datasets",
+};
+
+export const PORTAL_ROUTES = {
+  CONSORTIA: "/consortia",
+  EVENTS: "/events",
+  FAQ: "/faq",
+  GUIDES: "/guides",
+  HELP: "/help",
+  LEARN: "/learn",
+  NEWS: "/news",
+  OVERVIEW: "/overview",
+  PRIVACY: "/privacy",
+  SEARCH: "/search",
+  TEAM: "/team",
+};
+
+export const ROUTES = {
+  CONSORTIA: "/consortia",
+  STUDIES: "/studies",
+  WORKSPACES: "/workspaces",
+};

explorer/site-config/anvil-catalog/dev/common/constants.ts

@@ -0,0 +1,43 @@
+import { NavLinkItem } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation";
+import {
+  Parameter,
+  replaceParameters,
+} from "@databiosphere/findable-ui/lib/utils/replaceParameters";
+import { VISIBLE } from "../../../common/constants";
+
+/**
+ * Returns configured menu item for the navigation.
+ * @param menuItem - Navigation menu item.
+ * @param parameter - Parameter.
+ * @returns menu item.
+ */
+export function buildNavigationItem(
+  menuItem: NavLinkItem,
+  parameter: Parameter
+): NavLinkItem {
+  return {
+    ...menuItem,
+    menuItems: buildMenuItems(menuItem.menuItems, parameter),
+    url: replaceParameters(menuItem.url, parameter),
+  };
+}
+
+/**
+ * Returns configured menu items for the menu item.
+ * @param menuItems - Menu items.
+ * @param parameter - Parameter.
+ * @param isSubMenu - Sub menu items.
+ * @returns menu items.
+ */
+function buildMenuItems(
+  menuItems: NavLinkItem[] | undefined,
+  parameter: Parameter,
+  isSubMenu = false
+): NavLinkItem[] | undefined {
+  return menuItems?.map(({ menuItems, url, visible, ...menuItem }) => ({
+    ...menuItem,
+    menuItems: buildMenuItems(menuItems, parameter, true),
+    url: replaceParameters(url, parameter),
+    visible: isSubMenu ? visible ?? VISIBLE.MD_DOWN : visible,
+  }));
+}

explorer/site-config/anvil-catalog/dev/common/utils.ts

@@ -1,21 +1,23 @@
-import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
 import * as C from "../../../app/components/index";
-import { socialMedia, SOCIALS } from "../../anvil/dev/socialMedia";
+import { socialMedia } from "../../anvil/dev/socialMedia";
 import { SiteConfig } from "../../common/entities";
 import {
   ANVIL_CATALOG_CATEGORY_KEY,
   ANVIL_CATALOG_CATEGORY_LABEL,
 } from "../category";
+import { PORTAL_ROUTES, ROUTES } from "./common/constants";
 import { exportConfig } from "./export/export";
 import { consortiaEntityConfig } from "./index/consortiaEntityConfig";
 import { studiesEntityConfig } from "./index/studiesEntityConfig";
 import { workspaceEntityConfig } from "./index/workspaceEntityConfig";
+import { buildNavigation as buildFooterNavigation } from "./layout/footer/navigation/navigation";
+import { buildNavigation } from "./layout/header/navigation/navigation";
 
 // Template constants
 const APP_TITLE = "AnVIL Dataset Catalog";
 const BROWSER_URL = "https://anvilproject.dev.clevercanary.com";
 const EXPLORER_URL = "https://explore.anvilproject.dev.clevercanary.com";
-const HOME_PAGE_PATH = "/consortia";
+const HOME_PAGE_PATH = ROUTES.CONSORTIA;
 const PORTAL_URL = "https://anvilproject.dev.clevercanary.com";
 const SLOGAN = "NHGRI Analysis Visualization and Informatics Lab-space";
 
@@ -87,16 +89,7 @@ export function makeConfig(
     layout: {
       footer: {
         Branding: C.ANVILBranding({ portalURL: undefined }),
-        navLinks: [
-          {
-            label: "Help",
-            url: `${portalUrl}/help`,
-          },
-          {
-            label: "Privacy",
-            url: `${portalUrl}/privacy`,
-          },
-        ],
+        navLinks: buildFooterNavigation(portalUrl),
         socials: socialMedia.socials,
       },
       header: {
@@ -107,106 +100,9 @@ export function makeConfig(
           link: portalUrl,
           src: "/images/logoAnvil.png",
         }),
-        navigation: [
-          undefined,
-          [
-            {
-              label: "Overview",
-              url: `${portalUrl}/overview`,
-            },
-            {
-              label: "Learn",
-              url: `${portalUrl}/learn`,
-            },
-            {
-              label: "Datasets",
-              menuItems: [
-                {
-                  description:
-                    "An open-access view of studies, workspaces, and consortia.",
-                  label: "Catalog",
-                  url: HOME_PAGE_PATH,
-                },
-                {
-                  description:
-                    "Build, download, and export cross-study cohorts of open and managed access data.",
-                  label: C.LabelIconMenuItem({
-                    iconFontSize: "small",
-                    label: "Explorer",
-                  }),
-                  target: ANCHOR_TARGET.BLANK,
-                  url: `${explorerUrl}/datasets`,
-                },
-              ],
-              url: "",
-            },
-            {
-              label: "Consortia",
-              url: `${portalUrl}/consortia`,
-            },
-            {
-              label: "More",
-              menuItems: [
-                {
-                  label: "News",
-                  url: `${portalUrl}/news`,
-                },
-                {
-                  label: "Events",
-                  url: `${portalUrl}/events`,
-                },
-                {
-                  label: "Team",
-                  url: `${portalUrl}/team`,
-                },
-                {
-                  label: "FAQ",
-                  url: `${portalUrl}/faq`,
-                },
-                {
-                  label: "Help",
-                  url: `${portalUrl}/help`,
-                },
-                {
-                  label: "Follow Us",
-                  menuItems: [
-                    {
-                      ...SOCIALS.DISCOURSE,
-                      icon: C.DiscourseIcon({ fontSize: "small" }),
-                      target: ANCHOR_TARGET.BLANK,
-                    },
-                    {
-                      ...SOCIALS.X,
-                      icon: C.XIcon({ fontSize: "small" }),
-                      target: ANCHOR_TARGET.BLANK,
-                    },
-                    {
-                      ...SOCIALS.YOUTUBE,
-                      icon: C.YouTubeIcon({ fontSize: "small" }),
-                      target: ANCHOR_TARGET.BLANK,
-                    },
-                    {
-                      ...SOCIALS.GITHUB,
-                      icon: C.GitHubIcon({ fontSize: "small" }),
-                      target: ANCHOR_TARGET.BLANK,
-                    },
-                    {
-                      ...SOCIALS.SLACK,
-                      icon: C.SlackIcon({ fontSize: "small" }),
-                      target: ANCHOR_TARGET.BLANK,
-                    },
-                  ],
-                  url: "",
-                  visible: { lg: false, sm: false, xs: false },
-                },
-              ],
-              url: "",
-            },
-          ],
-          undefined,
-        ],
+        navigation: buildNavigation(portalUrl, explorerUrl),
         searchEnabled: true,
-        searchURL: `${portalUrl}/search`,
+        searchURL: `${portalUrl}${PORTAL_ROUTES.SEARCH}`,
         slogan: SLOGAN,
         socialMedia,
       },

explorer/site-config/anvil-catalog/dev/config.ts

@@ -0,0 +1,20 @@
+import { NavLinkItem } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation";
+import { PORTAL_ROUTES } from "../../../common/constants";
+import { buildNavigationItem } from "../../../common/utils";
+import { HELP } from "../../header/navigation/navigationItem/help";
+import { PRIVACY } from "../../header/navigation/navigationItem/privacy";
+
+/**
+ * Returns configured footer navigation.
+ * @param portalUrl - Portal URL.
+ * @returns navigation.
+ */
+export function buildNavigation(portalUrl: string): NavLinkItem[] {
+  return [
+    buildNavigationItem(HELP, { help: PORTAL_ROUTES.HELP, portalUrl }),
+    buildNavigationItem(PRIVACY, {
+      portalUrl,
+      privacy: PORTAL_ROUTES.PRIVACY,
+    }),
+  ];
+}