chore: upgrade findable package on anvil next (#2876) (#2881)

Co-authored-by: Fran McDade <[email protected]>
anvilproject · Dec 7, 2023 · 3ecdd02 · 3ecdd02
1 parent fc1c667
commit 3ecdd02
Show file tree

Hide file tree

Showing 16 changed files with 203 additions and 64 deletions.
diff --git a/content/home/tech-cloud.md b/content/home/tech-cloud.md
@@ -27,7 +27,7 @@ technologies:
   - title: "NCPI"
     actions:
       - label: "Learn More"
-        url: "/ncpi"
+        url: "https://www.ncpi-acc.org"
     text: "Interoperate  with other NIH data commons."
     thumbnail: _images/ncpi.png
   - title: "Bioconductor"

diff --git a/next/components/index.tsx b/next/components/index.tsx
@@ -1,12 +1,19 @@
 export { Breadcrumbs } from "@clevercanary/data-explorer-ui/lib/components/common/Breadcrumbs/breadcrumbs";
 export { Card } from "@clevercanary/data-explorer-ui/lib/components/common/Card/card";
+export { DiscourseIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/DiscourseIcon/discourseIcon";
+export { DownloadIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/DownloadIcon/downloadIcon";
+export { GitHubIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/GitHubIcon/gitHubIcon";
+export { LinkedInIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/LinkedInIcon/linkedInIcon";
+export { SlackIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/SlackIcon/slackIcon";
+export { XIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/XIcon/xIcon";
+export { YouTubeIcon } from "@clevercanary/data-explorer-ui/lib/components/common/CustomIcon/components/YouTubeIcon/youTubeIcon";
 export { Grid } from "@clevercanary/data-explorer-ui/lib/components/common/Grid/grid";
 export { StaticImage } from "@clevercanary/data-explorer-ui/lib/components/common/StaticImage/staticImage";
 export { AppLayout } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/AppLayout/appLayout.styles";
 export { Footer } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Footer/footer";
 export { Logo } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Header/components/Content/components/Logo/logo";
 export { Header } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Header/header";
-export { Main } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Main/main.styles";
+export { Main } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Main/main";
 export { NavBarHero } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Nav/components/NavBarHero/navBarHero";
 export { Nav } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Nav/nav";
 export { Link } from "@clevercanary/data-explorer-ui/lib/components/Links/components/Link/link";

diff --git a/next/package-lock.json b/next/package-lock.json
diff --git a/next/package.json b/next/package.json
@@ -15,7 +15,7 @@
     "update-ingestion-chart": "cd scripts && node update-ingestion-chart.mjs"
   },
   "dependencies": {
-    "@clevercanary/data-explorer-ui": "0.55.0",
+    "@clevercanary/data-explorer-ui": "62.0.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mdx-js/loader": "^2.3.0",

diff --git a/next/pages/_app.tsx b/next/pages/_app.tsx
@@ -1,4 +1,5 @@
 import "@clevercanary/data-explorer-ui";
+import { LayoutStateProvider } from "@clevercanary/data-explorer-ui/lib/providers/layoutState";
 import { createAppTheme } from "@clevercanary/data-explorer-ui/lib/theme/theme";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { CssBaseline } from "@mui/material";
@@ -33,13 +34,15 @@ function MyApp({ Component, pageProps }: AppProps): JSX.Element {
       <ThemeProvider theme={appTheme}>
         <Head />
         <CssBaseline />
-        <AppLayout>
-          <Header {...layout.header} />
-          <Main>
-            <Component {...pageProps} />
-          </Main>
-          <Footer {...layout.footer} />
-        </AppLayout>
+        <LayoutStateProvider>
+          <AppLayout>
+            <Header {...layout.header} />
+            <Main>
+              <Component {...pageProps} />
+            </Main>
+            <Footer {...layout.footer} />
+          </AppLayout>
+        </LayoutStateProvider>
       </ThemeProvider>
     </EmotionThemeProvider>
   );

diff --git a/next/site-config/anvil-portal/dev/config.ts b/next/site-config/anvil-portal/dev/config.ts
@@ -2,7 +2,7 @@ import { ELEMENT_ALIGNMENT } from "@clevercanary/data-explorer-ui/lib/common/ent
 import { ANCHOR_TARGET } from "@clevercanary/data-explorer-ui/lib/components/Links/common/entities";
 import * as C from "../../../components/index";
 import { SiteConfig } from "../../common/entities";
-import { socials } from "./constants";
+import { socialMedia } from "./socialMedia";
 
 const APP_TITLE = "AnVIL Portal";
 const EXPLORER_URL = "https://explore.anvilproject.dev.clevercanary.com";
@@ -35,7 +35,7 @@ const config: SiteConfig = {
           url: `${PORTAL_URL}/privacy`,
         },
       ],
-      socials,
+      socials: socialMedia.socials,
     },
     header: {
       Logo: C.Logo({
@@ -117,7 +117,7 @@ const config: SiteConfig = {
       searchEnabled: true,
       searchURL: `${PORTAL_URL}/search`,
       slogan: SLOGAN,
-      socials,
+      socialMedia: socialMedia,
     },
   },
   redirectRootToPath: "/",

diff --git a/next/site-config/anvil-portal/dev/constants.ts b/next/site-config/anvil-portal/dev/constants.ts
diff --git a/next/site-config/anvil-portal/dev/socialMedia.ts b/next/site-config/anvil-portal/dev/socialMedia.ts
@@ -0,0 +1,34 @@
+import { HEADER_NAVIGATION_LABEL } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Header/common/constants";
+import { SocialMedia } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/Header/common/entities";
+import * as C from "../../../components/index";
+
+export const socialMedia: SocialMedia = {
+  label: HEADER_NAVIGATION_LABEL.SOCIALS,
+  socials: [
+    {
+      Icon: C.DiscourseIcon,
+      label: "Discourse",
+      url: "https://help.anvilproject.org/",
+    },
+    {
+      Icon: C.XIcon,
+      label: "X",
+      url: "https://twitter.com/useAnVIL",
+    },
+    {
+      Icon: C.YouTubeIcon,
+      label: "YouTube",
+      url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw",
+    },
+    {
+      Icon: C.GitHubIcon,
+      label: "GitHub",
+      url: "https://github.com/anvilproject",
+    },
+    {
+      Icon: C.SlackIcon,
+      label: "Slack",
+      url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg",
+    },
+  ],
+};
diff --git a/src/components/common/custom-icon/components/discourse-icon/discourse-icon.tsx b/src/components/common/custom-icon/components/discourse-icon/discourse-icon.tsx
@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+/**
+ * Custom Discourse icon (socials).
+ */
+
+export const DiscourseIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M9.02808 2.7002C5.59683 2.7002 2.69995 5.48457 2.69995 8.91582C2.69995 9.0002 2.69995 15.3002 2.69995 15.3002H9.02808C12.4875 15.3002 15.3 12.4314 15.3 9.0002C15.3 5.59707 12.4875 2.7002 9.02808 2.7002ZM8.99995 12.6002C8.43745 12.6002 7.9312 12.4877 7.45308 12.2627L5.17495 12.8252L5.82183 10.7158C5.54058 10.2096 5.39995 9.64707 5.39995 9.0002C5.39995 7.03145 7.00308 5.4002 8.99995 5.4002C10.9687 5.4002 12.6 7.03145 12.6 9.0002C12.6 10.9971 10.9687 12.6002 8.99995 12.6002Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};
diff --git a/src/components/common/custom-icon/components/git-hub-icon/git-hub-icon.tsx b/src/components/common/custom-icon/components/git-hub-icon/git-hub-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+/**
+ * Custom GitHub icon (socials).
+ */
+
+export const GitHubIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M6.66565 13.1582C6.66565 13.2145 6.6094 13.2426 6.52502 13.2426C6.44065 13.2707 6.3844 13.2145 6.3844 13.1582C6.3844 13.102 6.44065 13.0457 6.52502 13.0457C6.6094 13.0457 6.66565 13.102 6.66565 13.1582ZM5.79377 13.0176C5.79377 13.0738 5.85002 13.1582 5.9344 13.1582C5.99065 13.1863 6.07502 13.1582 6.10315 13.102C6.10315 13.0457 6.07502 12.9895 5.99065 12.9613C5.90627 12.9332 5.8219 12.9613 5.79377 13.0176ZM7.0594 12.9895C6.97502 12.9895 6.91877 13.0457 6.91877 13.1301C6.91877 13.1863 7.00315 13.2145 7.08752 13.1863C7.1719 13.1582 7.22815 13.1301 7.20002 13.0738C7.20002 13.0176 7.11565 12.9613 7.0594 12.9895ZM8.88752 2.18945C5.00627 2.18945 2.02502 5.1707 2.02502 9.05195C2.02502 12.1738 3.96565 14.8457 6.77815 15.802C7.14377 15.8582 7.25627 15.6332 7.25627 15.4645C7.25627 15.2676 7.25627 14.3113 7.25627 13.7207C7.25627 13.7207 5.28752 14.1426 4.86565 12.877C4.86565 12.877 4.55627 12.0613 4.10627 11.8645C4.10627 11.8645 3.4594 11.4145 4.1344 11.4145C4.1344 11.4145 4.83752 11.4707 5.23127 12.1457C5.85002 13.2426 6.86252 12.9332 7.2844 12.7363C7.34065 12.2863 7.5094 11.977 7.7344 11.7801C6.1594 11.6113 4.55627 11.3863 4.55627 8.68633C4.55627 7.89883 4.78127 7.5332 5.23127 7.02695C5.1469 6.83008 4.9219 6.09883 5.31565 5.11445C5.87815 4.9457 7.25627 5.87383 7.25627 5.87383C7.81877 5.70508 8.4094 5.64883 9.00002 5.64883C9.61877 5.64883 10.2094 5.70508 10.7719 5.87383C10.7719 5.87383 12.1219 4.91758 12.7125 5.11445C13.1063 6.09883 12.8531 6.83008 12.7969 7.02695C13.2469 7.5332 13.5281 7.89883 13.5281 8.68633C13.5281 11.3863 11.8688 11.6113 10.2938 11.7801C10.5469 12.0051 10.7719 12.427 10.7719 13.102C10.7719 14.0301 10.7438 15.2113 10.7438 15.4363C10.7438 15.6332 10.8844 15.8582 11.25 15.7738C14.0625 14.8457 15.975 12.1738 15.975 9.05195C15.975 5.1707 12.7969 2.18945 8.88752 2.18945ZM4.75315 11.8926C4.6969 11.9207 4.72502 12.0051 4.75315 12.0613C4.8094 12.0895 4.86565 12.1176 4.9219 12.0895C4.95002 12.0613 4.95002 11.977 4.89377 11.9207C4.83752 11.8926 4.78127 11.8645 4.75315 11.8926ZM4.44377 11.6676C4.41565 11.7238 4.44377 11.752 4.50002 11.7801C4.55627 11.8082 4.61252 11.8082 4.64065 11.752C4.64065 11.7238 4.61252 11.6957 4.55627 11.6676C4.50002 11.6395 4.4719 11.6395 4.44377 11.6676ZM5.34377 12.6801C5.31565 12.7082 5.31565 12.7926 5.40002 12.8488C5.45627 12.9051 5.54065 12.9332 5.56877 12.877C5.5969 12.8488 5.5969 12.7645 5.54065 12.7082C5.4844 12.652 5.40002 12.6238 5.34377 12.6801ZM5.0344 12.2582C4.97815 12.2863 4.97815 12.3707 5.0344 12.427C5.09065 12.4832 5.1469 12.5113 5.20315 12.4832C5.23127 12.4551 5.23127 12.3707 5.20315 12.3145C5.1469 12.2582 5.09065 12.2301 5.0344 12.2582Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};
diff --git a/src/components/common/custom-icon/components/slack-icon/slack-icon.tsx b/src/components/common/custom-icon/components/slack-icon/slack-icon.tsx
@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+/**
+ * Custom Slack icon (socials).
+ */
+
+export const SlackIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M5.3437 10.6877C5.3437 11.3908 4.72495 12.0096 4.02183 12.0096C3.29058 12.0096 2.69995 11.3908 2.69995 10.6877C2.69995 9.95645 3.29058 9.36582 4.02183 9.36582H5.3437V10.6877ZM5.99058 10.6877C5.99058 9.95645 6.60933 9.36582 7.31245 9.36582C8.0437 9.36582 8.63433 9.95645 8.63433 10.6877V13.9783C8.63433 14.7096 8.0437 15.3002 7.31245 15.3002C6.60933 15.3002 5.99058 14.7096 5.99058 13.9783V10.6877ZM7.31245 5.37207C6.60933 5.37207 5.99058 4.75332 5.99058 4.0502C5.99058 3.31895 6.60933 2.7002 7.31245 2.7002C8.0437 2.7002 8.63433 3.31895 8.63433 4.0502V5.37207H7.31245ZM7.31245 6.01895C8.0437 6.01895 8.63433 6.60957 8.63433 7.34082C8.63433 8.07207 8.0437 8.6627 7.31245 8.6627H4.02183C3.29058 8.6627 2.69995 8.07207 2.69995 7.34082C2.69995 6.60957 3.29058 6.01895 4.02183 6.01895H7.31245ZM12.6281 7.34082C12.6281 6.60957 13.2468 6.01895 13.95 6.01895C14.6812 6.01895 15.3 6.60957 15.3 7.34082C15.3 8.07207 14.6812 8.6627 13.95 8.6627H12.6281V7.34082ZM11.9812 7.34082C11.9812 8.07207 11.3906 8.6627 10.6593 8.6627C9.92808 8.6627 9.33745 8.07207 9.33745 7.34082V4.0502C9.33745 3.31895 9.92808 2.7002 10.6593 2.7002C11.3906 2.7002 11.9812 3.31895 11.9812 4.0502V7.34082ZM10.6593 12.6564C11.3906 12.6564 11.9812 13.2752 11.9812 13.9783C11.9812 14.7096 11.3906 15.3002 10.6593 15.3002C9.92808 15.3002 9.33745 14.7096 9.33745 13.9783V12.6564H10.6593ZM10.6593 12.0096C9.92808 12.0096 9.33745 11.3908 9.33745 10.6877C9.33745 9.95645 9.92808 9.36582 10.6593 9.36582H13.95C14.6812 9.36582 15.3 9.95645 15.3 10.6877C15.3 11.3908 14.6812 12.0096 13.95 12.0096H10.6593Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};
diff --git a/src/components/common/custom-icon/components/x-icon/x-icon.tsx b/src/components/common/custom-icon/components/x-icon/x-icon.tsx
@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+/**
+ * Custom X icon (socials).
+ */
+
+export const XIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M10.1723 8.0327L14.7597 2.7002H13.6727L9.68942 7.33033L6.50801 2.7002H2.83862L7.64954 9.70178L2.83862 15.2937H3.92576L8.13217 10.4041L11.492 15.2937H15.1614L10.1721 8.0327H10.1723ZM8.68335 9.76347L8.1959 9.06627L4.31746 3.51857H5.98724L9.11718 7.99574L9.60463 8.69294L13.6732 14.5126H12.0034L8.68335 9.76373V9.76347Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};
diff --git a/src/components/common/custom-icon/components/you-tube-icon/you-tube-icon.tsx b/src/components/common/custom-icon/components/you-tube-icon/you-tube-icon.tsx
@@ -0,0 +1,21 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+/**
+ * Custom YouTube icon (socials).
+ */
+
+export const YouTubeIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M16.3547 5.31523C16.1859 4.64023 15.6515 4.10586 15.0047 3.93711C13.7953 3.59961 9.01405 3.59961 9.01405 3.59961C9.01405 3.59961 4.20468 3.59961 2.9953 3.93711C2.34843 4.10586 1.81405 4.64023 1.6453 5.31523C1.3078 6.49648 1.3078 9.02773 1.3078 9.02773C1.3078 9.02773 1.3078 11.5309 1.6453 12.7402C1.81405 13.4152 2.34843 13.9215 2.9953 14.0902C4.20468 14.3996 9.01405 14.3996 9.01405 14.3996C9.01405 14.3996 13.7953 14.3996 15.0047 14.0902C15.6515 13.9215 16.1859 13.4152 16.3547 12.7402C16.6922 11.5309 16.6922 9.02773 16.6922 9.02773C16.6922 9.02773 16.6922 6.49648 16.3547 5.31523ZM7.43905 11.3059V6.74961L11.4328 9.02773L7.43905 11.3059Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};
diff --git a/src/components/header/components/socials/socials.tsx b/src/components/header/components/socials/socials.tsx
@@ -1,12 +1,11 @@
 import { Box, IconButtonProps, SxProps, Theme } from "@mui/material";
-import React, { ElementType } from "react";
-import CustomIcon from "../../../common/custom-icon/custom-icon";
-import { IconName } from "../../../common/custom-icon/common/icon-svg-path-shapes";
+import React, { ElementType, ReactNode } from "react";
 import { IconButtonSocials } from "../../../common/icon-button/icon-button.styles";
 import { Target } from "../../../target/target.model";
 
 export interface Social {
-  type: IconName;
+  Icon: ElementType;
+  label: ReactNode;
   url: string;
 }
 
@@ -25,15 +24,15 @@ export default function Socials({
 }: Props): JSX.Element {
   return (
     <Box display="flex" sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      {socials.map(({ type, url }) => (
+      {socials.map(({ Icon, url }, i) => (
         <IconButtonElType
-          key={type}
+          key={i}
           href={url}
           rel="noopener"
           size={buttonSize}
           target={Target.BLANK}
         >
-          <CustomIcon fontSize="small" iconName={type} />
+          <Icon fontSize="small" />
         </IconButtonElType>
       ))}
     </Box>

diff --git a/src/config/anvil/config.ts b/src/config/anvil/config.ts
@@ -1,5 +1,12 @@
 import logoAnvil from "../../../images/logo-anvil.png";
-import { LabelIconMenuItem } from "../../components/header/components/nav-link-menu/components/label-icon-menu-item/label-icon-menu-item";
+import { DiscourseIcon } from "../../components/common/custom-icon/components/discourse-icon/discourse-icon";
+import { GitHubIcon } from "../../components/common/custom-icon/components/git-hub-icon/git-hub-icon";
+import { SlackIcon } from "../../components/common/custom-icon/components/slack-icon/slack-icon";
+import { XIcon } from "../../components/common/custom-icon/components/x-icon/x-icon";
+import { YouTubeIcon } from "../../components/common/custom-icon/components/you-tube-icon/you-tube-icon";
+import {
+LabelIconMenuItem
+} from "../../components/header/components/nav-link-menu/components/label-icon-menu-item/label-icon-menu-item";
 import { Target } from "../../components/target/target.model";
 import { getDatasetsEnvironmentUrl } from "../../utils/environment/environment.service";
 import { getExploreURL } from "../../utils/explore.service";
@@ -84,23 +91,28 @@ const config: SiteConfig = {
       slogan,
       socials: [
         {
-          type: "discourse",
+          Icon: DiscourseIcon,
+          label: "Discourse",
           url: "https://help.anvilproject.org/",
         },
         {
-          type: "twitter",
+          Icon: XIcon,
+          label: "X",
           url: "https://twitter.com/useAnVIL",
         },
         {
-          type: "youtube",
+          Icon: YouTubeIcon,
+          label: "YouTube",
           url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw",
         },
         {
-          type: "github",
+          Icon: GitHubIcon,
+          label: "GitHub",
           url: "https://github.com/anvilproject",
         },
         {
-          type: "slack",
+          Icon: SlackIcon,
+          label: "Slack",
           url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg",
         },
       ],