chore: update findable-ui to v14.0.0 (#4235) (#4255)

* chore: update findable-ui to v14.0.0 (#4235)

* fix: anvil catalog consortium description anchor style (#4235)

---------

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

Author: frano-m

app/components/Detail/components/Consortium/components/ConsortiumDescription/components/ConsortiumDescriptionFallback/consortiumDescriptionFallback.tsx

@@ -2,7 +2,6 @@ import {
   MdxMarkdown,
   MDXSerializeResult,
 } from "../../../../../common/MDXMarkdown/mdxMarkdown";
-import { ConsortiumDescriptionFallback } from "./components/ConsortiumDescriptionFallback/consortiumDescriptionFallback";
 import { SectionText } from "./consortiumDescription.styles";
 
 interface ConsortiumDescriptionProps {
@@ -14,10 +13,7 @@ export const ConsortiumDescription = ({
 }: ConsortiumDescriptionProps): JSX.Element => {
   return (
     <SectionText component="div">
-      <MdxMarkdown
-        fallback={<ConsortiumDescriptionFallback />}
-        source={source}
-      />
+      <MdxMarkdown fallback="None" source={source} />
     </SectionText>
   );
 };

app/components/Detail/components/Consortium/components/ConsortiumDescription/consortiumDescription.tsx

@@ -1,11 +1,14 @@
-import { Alert as DXAlert } from "@databiosphere/findable-ui/lib/components/common/Alert/alert";
 import {
   sectionMargin,
   sectionMarginSm,
 } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles";
-import { textBody500 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
+import {
+  textBody4002Lines,
+  textBody500,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
 import { TABLET } from "@databiosphere/findable-ui/lib/theme/common/breakpoints";
 import styled from "@emotion/styled";
+import { Alert } from "@mui/material";
 
 export const SectionTitle = styled("h4")`
   ${textBody500}
@@ -15,7 +18,11 @@ export const SectionTitle = styled("h4")`
   }
 `;
 
-export const Alert = styled(DXAlert)`
+export const StyledAlert = styled(Alert)`
+  .MuiAlert-message {
+    ${textBody4002Lines};
+  }
+
   ${sectionMargin}
   ${({ theme }) => theme.breakpoints.up(TABLET)} {
     ${sectionMarginSm}

app/components/Detail/components/GeneratedMatricesTables/generatedMatricesTables.styles.ts

@@ -1,11 +1,12 @@
+import { ALERT_PROPS } from "@databiosphere/findable-ui/lib/components/common/Alert/constants";
 import { GridPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { Table } from "@databiosphere/findable-ui/lib/components/Detail/components/Table/table";
 import { Divider } from "@mui/material";
 import { ColumnDef } from "@tanstack/react-table";
 import { Fragment } from "react";
 import { GenusSpecies } from "../../../../viewModelBuilders/azul/hca-dcp/common/projectMatrixMapper/constants";
 import { ProjectMatrixTableView } from "../../../../viewModelBuilders/azul/hca-dcp/common/projectMatrixMapper/entities";
-import { Alert, SectionTitle } from "./generatedMatricesTables.styles";
+import { SectionTitle, StyledAlert } from "./generatedMatricesTables.styles";
 
 interface GeneratedMatricesTablesProps<T extends object> {
   columns: ColumnDef<T>[];
@@ -42,9 +43,9 @@ export const GeneratedMatricesTables = <T extends object>({
           }
         )
       ) : (
-        <Alert icon={false} severity="info" variant="neutral">
+        <StyledAlert {...ALERT_PROPS.FILLED_SMOKE} icon={false}>
           There are currently no DCP generated matrices for this project.
-        </Alert>
+        </StyledAlert>
       )}
     </>
   );

app/components/Detail/components/GeneratedMatricesTables/generatedMatricesTables.tsx

@@ -2,6 +2,7 @@ import { TypographyWordBreak } from "@databiosphere/findable-ui/lib/components/c
 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 { useRouter } from "next/router";
 import { SiteConfig } from "../../../../../../../site-config/common/entities";
 
 /**
@@ -14,12 +15,14 @@ export const Link = ({
 }): JSX.Element => {
   const { children, href, ...linkProps } = props;
   const { config } = useConfig();
+  const { asPath } = useRouter();
   const { browserURL, portalURL = "{portalURL}" } = config as SiteConfig;
   return (
     <DXLink
       label={<TypographyWordBreak>{children}</TypographyWordBreak>}
       url={encodeURI(
         replaceParameters(decodeURI(href), {
+          asPath,
           browserURL,
           portalURL,
         })

app/components/Layout/components/Content/components/Link/link.tsx

@@ -12,20 +12,18 @@ import styled from "@emotion/styled";
 const muiAlert = (props: ThemeProps) => css`
   .MuiAlert-root {
     margin: 24px 0;
-
-    &.MuiAlert-standardWarning {
-      margin: 16px 0;
-    }
+    padding: 24px;
 
     &:last-child {
       margin-bottom: 0;
     }
 
-    .MuiAlert-message {
-      ${textBodyLarge4002Lines(props)};
+    .MuiAlert-icon {
+      padding: 4px 0;
     }
 
-    .MuiAlert-message:first-of-type {
+    .MuiAlert-message {
+      ${textBodyLarge4002Lines(props)};
       gap: 16px;
 
       .MuiAlertTitle-root {
@@ -42,14 +40,6 @@ const muiBreadcrumbs = () => css`
     .MuiBreadcrumbs-li {
       margin: 0;
 
-      .MuiLink-root {
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
       .MuiTypography-root {
         margin: 0;
       }
@@ -58,15 +48,6 @@ const muiBreadcrumbs = () => css`
 `;
 
 export const Content = styled.div`
-  a {
-    color: inherit;
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
   h1 {
     ${textHeadingLarge};
     margin: 0 0 16px;

app/components/Layout/components/Content/content.styles.ts

@@ -1,20 +1,14 @@
+import { Banner } from "@databiosphere/findable-ui/lib/components/common/Banner/banner";
 import { useSessionTimeout } from "@databiosphere/findable-ui/lib/hooks/useSessionTimeout";
 import { useSystemStatus } from "@databiosphere/findable-ui/lib/hooks/useSystemStatus";
-import { ElementType, Fragment } from "react";
-import { SessionTimeout } from "./components/SessionTimeout/sessionTimeout";
-import { SystemIndexing as SystemIndexingBanner } from "./components/SystemIndexing/systemIndexing";
-import { SystemStatus as SystemStatusBanner } from "./components/SystemStatus/systemStatus";
+import { Fragment, ReactNode } from "react";
 
 interface AnnouncementsProps {
-  GeneralAnnouncement?: ElementType;
-  SystemIndexing?: ElementType;
-  SystemStatus?: ElementType;
+  generalAnnouncement: ReactNode;
 }
 
 export const Announcements = ({
-  GeneralAnnouncement,
-  SystemIndexing = SystemIndexingBanner,
-  SystemStatus = SystemStatusBanner,
+  generalAnnouncement,
 }: AnnouncementsProps): JSX.Element => {
   const sessionTimeout = useSessionTimeout();
   const systemStatus = useSystemStatus();
@@ -25,13 +19,22 @@ export const Announcements = ({
   return (
     <Fragment>
       {isSessionTimeout ? (
-        <SessionTimeout onClose={clearSessionTimeout} />
+        <Banner onClose={clearSessionTimeout}>
+          For your security, you have been logged out due to 15 minutes of
+          inactivity.
+        </Banner>
       ) : isSystemUnavailable ? (
-        <SystemStatus />
+        <Banner>
+          One or more of the system components are currently unavailable.
+          Functionality may be degraded.
+        </Banner>
       ) : isSystemIndexing ? (
-        <SystemIndexing />
+        <Banner>
+          Data indexing in progress. Downloads and exports are disabled as
+          search results may be incomplete.
+        </Banner>
       ) : (
-        GeneralAnnouncement && <GeneralAnnouncement />
+        generalAnnouncement
       )}
     </Fragment>
   );

app/components/common/Banner/components/Announcements/announcements.tsx

@@ -0,0 +1,4 @@
+<Banner {...props}>
+  Welcome to our BETA release. Please see the [Beta
+  Announcement](/beta-announcement) to learn more.
+</Banner>

app/components/common/Banner/components/Announcements/components/BetaAnnouncement/betaAnnouncement.styles.ts

@@ -0,0 +1,4 @@
+<Alert component={props.component} severity={props.severity}>
+  For datasets with a 'Required' access status, {props.entityName} are not
+  listed.
+</Alert>

app/components/common/Banner/components/Announcements/components/BetaAnnouncement/betaAnnouncement.tsx

@@ -0,0 +1,7 @@
+<Alert component={props.component} severity={props.severity} size={props.size}>
+  <AlertTitle>
+    Files from datasets with access "required" will be excluded from this
+    export.
+  </AlertTitle>
+  {props.content}
+</Alert>

app/components/common/Banner/components/Announcements/components/SessionTimeout/sessionTimeout.tsx

@@ -0,0 +1,4 @@
+<Alert {...props}>
+  Access to data explorer is limited for unauthorized users. To view all
+  available data please [sign in](/login).
+</Alert>

app/components/common/Banner/components/Announcements/components/SystemIndexing/systemIndexing.tsx

@@ -1,10 +1,13 @@
 export { Section } from "../../MDXMarkdown/components/Section/mdxSection.styles";
+export { default as Alert } from "../common/alert.mdx";
 export { default as ExportToTerraStart } from "../common/exportToTerraStart.mdx";
 export { default as ExportToTerraSuccess } from "../common/exportToTerraSuccess.mdx";
-export { default as BetaAnnouncement } from "./betaAnnouncement.mdx";
+export { default as AlertBetaAnnouncement } from "./alertBetaAnnouncement.mdx";
+export { default as AlertEntityListWarning } from "./alertEntityListWarning.mdx";
+export { default as AlertExportWarning } from "./alertExportWarning.mdx";
+export { default as AlertExportWarningContent } from "./alertExportWarningContent.mdx";
+export { default as AlertLoginReminder } from "./alertLoginReminder.mdx";
 export { default as DataReleasePolicy } from "./dataReleasePolicy.mdx";
-export { default as ExportWarning } from "./exportWarning.mdx";
-export { default as LoginReminder } from "./loginReminder.mdx";
 export { default as LoginTermsOfService } from "./loginTermsOfService.mdx";
 export { default as LoginText } from "./loginText.mdx";
 export { default as LoginWarning } from "./loginWarning.mdx";

app/components/common/Banner/components/Announcements/components/SystemStatus/systemStatus.tsx

@@ -0,0 +1,3 @@
+<Alert component={props.component} severity={props.severity}>
+  {props.content}
+</Alert>

app/components/common/MDXContent/anvil-cmg/alertBetaAnnouncement.mdx

@@ -0,0 +1,7 @@
+<Alert {...props}>
+  <AlertTitle>Please note</AlertTitle>
+
+Data normalization and batch correction may differ between projects and processing methods.
+For details see [Matrix Normalization and Batch Correction]({portalURL}/guides/consumer-vignettes/matrices#matrix-normalization-and-batch-correction).
+
+</Alert>

app/components/common/MDXContent/anvil-cmg/alertEntityListWarning.mdx

@@ -0,0 +1,7 @@
+<Alert component={props.component} severity={props.severity} size={props.size}>
+  <AlertTitle>
+    Files from projects with access "required" will be excluded from this
+    export.
+  </AlertTitle>
+  {props.content}
+</Alert>

app/components/common/MDXContent/anvil-cmg/alertExportWarning.mdx

@@ -0,0 +1,4 @@
+<Alert {...props}>
+  Access to data explorer is limited for unauthorized users. To view all
+  available data please [sign in](/login).
+</Alert>

app/components/common/MDXContent/anvil-cmg/exportWarning.mdx app/components/common/MDXContent/anvil-cmg/alertExportWarningContent.mdx

@@ -1,7 +1,11 @@
 export { Section } from "../../MDXMarkdown/components/Section/mdxSection.styles";
+export { default as Alert } from "../common/alert.mdx";
 export { default as ExportToTerra } from "../common/exportToTerraStart.mdx";
 export { default as ExportToTerraSuccess } from "../common/exportToTerraSuccess.mdx";
-export { default as BatchCorrectionWarning } from "./batchCorrectionWarning.mdx";
+export { default as AlertBatchCorrectionWarning } from "./alertBatchCorrectionWarning.mdx";
+export { default as AlertExportWarning } from "./alertExportWarning.mdx";
+export { default as AlertExportWarningContent } from "./alertExportWarningContent.mdx";
+export { default as AlertLoginReminder } from "./alertLoginReminder.mdx";
 export { default as ContributorGeneratedMatrices } from "./contributorGeneratedMatrices.mdx";
 export { default as DataReleasePolicy } from "./dataReleasePolicy.mdx";
 export { default as DCPGeneratedMatrices } from "./dcpGeneratedMatrices.mdx";
@@ -10,8 +14,6 @@ export { default as DownloadCurlCommandStart } from "./downloadCurlCommandStart.
 export { default as DownloadCurlCommandSuccess } from "./downloadCurlCommandSuccess.mdx";
 export { default as ExportToTerraStart } from "./exportToTerraStart.mdx";
 export { default as ExportToTerraSuccessWithWarning } from "./exportToTerraSuccessWithWarning.mdx";
-export { default as ExportWarning } from "./exportWarning.mdx";
-export { default as LoginReminder } from "./loginReminder.mdx";
 export { default as LoginTermsOfService } from "./loginTermsOfService.mdx";
 export { default as LoginText } from "./loginText.mdx";
 export { default as ManifestDownloadStart } from "./manifestDownloadStart.mdx";