feat: merged announcements (#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.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/index.tsx

@@ -76,7 +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 { Banner } from "./common/Banner/banner.styles";
+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/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,19 +2,14 @@ import {
   ComponentConfig,
   ComponentsConfig,
 } from "@clevercanary/data-explorer-ui/lib/config/entities";
-import * as C from "app/components";
-import * as MDX from "../../../../app/components/common/MDXContent/anvil-cmg";
+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>,
-  {
-    children: [
-      {
-        component: MDX.BetaAnnouncement,
-      } as ComponentConfig<typeof MDX.BetaAnnouncement>,
-    ],
-    component: C.Banner,
-  } as ComponentConfig<typeof C.Banner>,
+    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,
@@ -170,6 +179,10 @@ export function makeConfig(
       apiPath: "index/summary",
       components: summary,
     },
+    systemStatus: {
+      apiPath: `${dataUrl}${APIEndpoints.INDEX_STATUS}`,
+      bindResponse: <SystemStatusBindResponseFn>bindSystemStatusResponse,
+    },
     themeOptions: {
       palette: {
         primary: {
@@ -181,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";