feat: add beta tag to explorer with link to beta announcement (#3938)

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

@@ -0,0 +1,38 @@
+import { useSessionTimeout } from "@clevercanary/data-explorer-ui/lib/hooks/useSessionTimeout";
+import { useSystemStatus } from "@clevercanary/data-explorer-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";
+
+interface AnnouncementsProps {
+  GeneralAnnouncement?: ElementType;
+  SystemIndexing?: ElementType;
+  SystemStatus?: ElementType;
+}
+
+export const Announcements = ({
+  GeneralAnnouncement,
+  SystemIndexing = SystemIndexingBanner,
+  SystemStatus = SystemStatusBanner,
+}: AnnouncementsProps): JSX.Element => {
+  const sessionTimeout = useSessionTimeout();
+  const systemStatus = useSystemStatus();
+  const { clearSessionTimeout, isSessionTimeout } = sessionTimeout;
+  const { indexing, loading, ok } = systemStatus;
+  const isSystemUnavailable = !loading && !ok;
+  const isSystemIndexing = !loading && ok && indexing;
+  return (
+    <Fragment>
+      {isSessionTimeout ? (
+        <SessionTimeout onClose={clearSessionTimeout} />
+      ) : isSystemUnavailable ? (
+        <SystemStatus />
+      ) : isSystemIndexing ? (
+        <SystemIndexing />
+      ) : (
+        GeneralAnnouncement && <GeneralAnnouncement />
+      )}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,20 @@
+import { BannerPrimary as DXBannerPrimary } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/BannerPrimary/bannerPrimary";
+import styled from "@emotion/styled";
+
+export const Banner = styled(DXBannerPrimary)`
+  .MuiAlert-message {
+    p {
+      font: inherit;
+    }
+
+    a,
+    .MuiLink-root {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { BetaAnnouncement as GeneralAnnouncement } from "../../../../../MDXContent/anvil-cmg";
+import { Banner } from "./betaAnnouncement.styles";
+
+export const BetaAnnouncement = ({ ...props }): JSX.Element => {
+  return (
+    <Banner {...props}>
+      <GeneralAnnouncement />
+    </Banner>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { Banner } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/SessionTimeout/sessionTimeout.styles";
+import React from "react";
+
+export const SessionTimeout = ({ ...props }): JSX.Element => {
+  return (
+    <Banner {...props}>
+      For your security, you have been logged out due to 15 minutes of
+      inactivity.
+    </Banner>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { BannerPrimary } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/BannerPrimary/bannerPrimary";
+import React from "react";
+
+export const SystemIndexing = ({ ...props }): JSX.Element => {
+  return (
+    <BannerPrimary {...props}>
+      Data indexing in progress. Downloads and exports are disabled as search
+      results may be incomplete.
+    </BannerPrimary>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { BannerPrimary } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/BannerPrimary/bannerPrimary";
+import React from "react";
+
+export const SystemStatus = ({ ...props }): JSX.Element => {
+  return (
+    <BannerPrimary {...props}>
+      One or more of the system components are currently unavailable.
+      Functionality may be degraded.
+    </BannerPrimary>
+  );
+};

explorer/app/components/common/MDXContent/anvil-cmg/betaAnnouncement.mdx

@@ -0,0 +1 @@
+Welcome to our BETA release. Please see the [Beta Announcement](/beta-announcement) to learn more.

explorer/app/components/common/MDXContent/anvil-cmg/index.tsx

@@ -2,6 +2,7 @@ export { RenderComponent } from "@clevercanary/data-explorer-ui/lib/components/C
 export { Section } from "../../MDXMarkdown/components/Section/mdxSection.styles";
 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 DataReleasePolicy } from "./dataReleasePolicy.mdx";
 export { default as ExportWarning } from "./exportWarning.mdx";
 export { default as LoginReminder } from "./loginReminder.mdx";

explorer/app/components/index.tsx

@@ -76,6 +76,7 @@ export { Publications } from "@clevercanary/data-explorer-ui/lib/components/Proj
 export { SupplementaryLinks } from "@clevercanary/data-explorer-ui/lib/components/Project/components/SupplementaryLinks/supplementaryLinks";
 export { SupportRequest } from "@clevercanary/data-explorer-ui/lib/components/Support/components/SupportRequest/supportRequest";
 export { ExportMethodView } from "@clevercanary/data-explorer-ui/lib/views/ExportMethodView/exportMethodView";
+export { Announcements } from "./common/Banner/components/Announcements/announcements";
 export { ButtonOutline } from "./common/Button/components/ButtonOutline/buttonOutline";
 export { MdxMarkdown } from "./common/MDXMarkdown/mdxMarkdown";
 export { RenderComponents } from "./common/RenderComponents/renderComponents";

explorer/app/content/anvil-cmg/beta-announcement.mdx

@@ -0,0 +1,24 @@
+<Breadcrumbs
+  breadcrumbs={[
+    { path: "/", text: "AnVIL Data Explorer" },
+    { path: "", text: "General Announcement" },
+  ]}
+/>
+
+# General Announcement
+
+AnVIL is pleased to announce the public beta release of the AnVIL Data Explorer for Terra on Google Cloud Platform. The AnVIL Data Explorer is accessible at [https://explore.anvilproject.org/](https://explore.anvilproject.org).
+
+We are actively looking for your feedback! Please provide feedback via [https://help.anvilproject.org/](https://help.anvilproject.org).
+
+The AnVIL Data Explorer enables faceted searches of open and managed access datasets hosted in AnVIL, making it easier for researchers to find and custom-build cohorts. Documentation for using the AnVIL Data Explorer can be found [here](/guides).
+
+The AnVIL team is actively indexing more datasets, so the available datasets should grow every few weeks.
+
+At the time of this writing, known limitations of the AnVIL Data Explorer are:
+
+- Currently supports Terra on Google Cloud Platform. Support for Terra on Microsoft Azure is coming later this year.
+- Incomplete dataset descriptions and other supporting information. This information is limited and should be growing, which will increase the usefulness of the AnVIL Data Explorer.
+- Limited support for metadata export. This will evolve over time, but currently, some metadata is not handed off to Terra on GCP. We expect this to improve after the release.
+
+Currently, the General Availability release is targeted for around the middle of 2024. The timing will depend on the feedback and the nature of any issues discovered during this beta period.

explorer/mdx-components.tsx

@@ -0,0 +1,9 @@
+import { MDXComponents } from "mdx/types";
+import * as C from "./app/components";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+    a: ({ children, href }) => C.Link({ label: children, url: href ?? "" }),
+  };
+}

explorer/pages/beta-announcement/index.tsx

@@ -0,0 +1,35 @@
+import { Main } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/components/Main/main";
+import { ContentView } from "@clevercanary/data-explorer-ui/lib/views/ContentView/contentView";
+import { GetStaticProps, InferGetStaticPropsType } from "next";
+import { MDXRemote } from "next-mdx-remote";
+import { ContentTheme } from "../../app/components/common/Content/components/ContentTheme/contentTheme";
+import { MDX_COMPONENTS } from "../../app/content/common/constants";
+import { getContentStaticProps } from "../../app/content/common/contentPages";
+import NotFoundPage from "../404";
+
+const slug = ["beta-announcement"];
+
+export const getStaticProps: GetStaticProps = async () => {
+  return getContentStaticProps({ params: { slug } }, "Beta Announcement");
+};
+
+const Page = ({
+  layoutStyle,
+  mdxSource,
+}: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element => {
+  if (!mdxSource) return <NotFoundPage />;
+  return (
+    <ContentView
+      content={
+        <ContentTheme>
+          <MDXRemote {...mdxSource} components={MDX_COMPONENTS} />
+        </ContentTheme>
+      }
+      layoutStyle={layoutStyle ?? undefined}
+    />
+  );
+};
+
+Page.Main = Main;
+
+export default Page;

explorer/site-config/anvil-cmg/cc-dev/config.ts

@@ -5,12 +5,12 @@ import { authenticationConfig } from "./authentication/authentication";
 const config: SiteConfig = {
   ...makeConfig(
     "https://anvilproject.dev.clevercanary.com",
-    "https://anvilproject.dev.clevercanary.com"
+    "https://anvilproject.dev.clevercanary.com",
+    "https://service.anvil.gi.ucsc.edu"
   ),
   exportToTerraUrl: "https://bvdp-saturn-dev.appspot.com/",
 };
 
-config.dataSource.url = "https://service.anvil.gi.ucsc.edu/";
 config.authentication = authenticationConfig;
 
 export default config;

explorer/site-config/anvil-cmg/dev/announcements/announcements.ts

@@ -2,10 +2,14 @@ import {
   ComponentConfig,
   ComponentsConfig,
 } from "@clevercanary/data-explorer-ui/lib/config/entities";
-import * as C from "app/components";
+import * as C from "../../../../app/components";
+import { BetaAnnouncement } from "../../../../app/components/common/Banner/components/Announcements/components/BetaAnnouncement/betaAnnouncement";
 
 export const announcements: ComponentsConfig = [
   {
-    component: C.SessionTimeout,
-  } as ComponentConfig<typeof C.SessionTimeout>,
+    component: C.Announcements,
+    props: {
+      GeneralAnnouncement: BetaAnnouncement,
+    },
+  } as ComponentConfig<typeof C.Announcements>,
 ];

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

@@ -1,7 +1,12 @@
+import { APIEndpoints } from "@clevercanary/data-explorer-ui/lib/apis/azul/common/entities";
 import { ELEMENT_ALIGNMENT } from "@clevercanary/data-explorer-ui/lib/common/entities";
-import { SiteConfig } from "@clevercanary/data-explorer-ui/lib/config/entities";
+import {
+  SiteConfig,
+  SystemStatusBindResponseFn,
+} from "@clevercanary/data-explorer-ui/lib/config/entities";
 import { CATALOG_DEFAULT } from "../../../app/apis/azul/anvil-cmg/common/constants";
 import * as C from "../../../app/components/index";
+import { bindSystemStatusResponse } from "../../../app/viewModelBuilders/azul/common/systemStatusMapper/systemStatusMapper";
 import { ANVIL_CMG_CATEGORY_KEY, ANVIL_CMG_CATEGORY_LABEL } from "../category";
 import { announcements } from "./announcements/announcements";
 import { authenticationConfig } from "./authentication/authentication";
@@ -17,10 +22,14 @@ import { floating } from "./layout/floating";
 
 // Template constants
 const APP_TITLE = "AnVIL Data Explorer";
+const DATA_URL = "https://service.anvil.gi.ucsc.edu";
+const BROWSER_URL = "https://explore.anvil.gi.ucsc.edu";
+const PORTAL_URL = "https://anvilproject.dev.clevercanary.com";
 
 export function makeConfig(
   browserUrl: string,
   portalUrl: string,
+  dataUrl: string,
   catalog: string = CATALOG_DEFAULT
 ): SiteConfig {
   return {
@@ -104,7 +113,7 @@ export function makeConfig(
       defaultParams: {
         catalog,
       },
-      url: "https://service.anvil.gi.ucsc.edu/",
+      url: `${dataUrl}/`,
     },
     entities: [
       datasetsEntityConfig,
@@ -141,6 +150,10 @@ export function makeConfig(
             flatten: true,
             label: "Help & Documentation",
             menuItems: [
+              {
+                label: "Beta Announcement",
+                url: "/beta-announcement",
+              },
               {
                 label: "Guides",
                 url: "/guides",
@@ -166,6 +179,10 @@ export function makeConfig(
       apiPath: "index/summary",
       components: summary,
     },
+    systemStatus: {
+      apiPath: `${dataUrl}${APIEndpoints.INDEX_STATUS}`,
+      bindResponse: <SystemStatusBindResponseFn>bindSystemStatusResponse,
+    },
     themeOptions: {
       palette: {
         primary: {
@@ -177,9 +194,6 @@ export function makeConfig(
   };
 }
 
-const config: SiteConfig = makeConfig(
-  "https://explore.anvil.gi.ucsc.edu",
-  "https://anvilproject.dev.clevercanary.com"
-);
+const config: SiteConfig = makeConfig(BROWSER_URL, PORTAL_URL, DATA_URL);
 
 export default config;

explorer/site-config/anvil-cmg/prod/config.ts

@@ -10,12 +10,12 @@ const config: SiteConfig = {
   ...makeConfig(
     "https://explore.anvilproject.org",
     "https://anvilproject.org",
+    "https://service.explore.anvilproject.org",
     "anvil4"
   ),
   exportToTerraUrl: "https://anvil.terra.bio/",
 };
 
-config.dataSource.url = "https://service.explore.anvilproject.org/";
 config.authentication = authenticationConfig;
 
 const filesEntityConfig = config.entities.find(

explorer/site-config/hca-dcp/dev/config.ts

@@ -11,7 +11,7 @@ import {
   TEXT_HEADING_XLARGE,
 } from "@clevercanary/data-explorer-ui/lib/theme/common/typography";
 import * as C from "../../../app/components/index";
-import { bindSystemStatusResponse } from "../../../app/viewModelBuilders/azul/hca-dcp/common/systemStatusMapper/systemStatusMapper";
+import { bindSystemStatusResponse } from "../../../app/viewModelBuilders/azul/common/systemStatusMapper/systemStatusMapper";
 import { SiteConfig } from "../../common/entities";
 import { HCA_DCP_CATEGORY_KEY, HCA_DCP_CATEGORY_LABEL } from "../category";
 import { announcements } from "./announcements/announcements";