feat: implement accept cookies banner for hca data explorer (#3801)

explorer/app/components/common/Button/components/ButtonOutline/buttonOutline.tsx

@@ -0,0 +1,7 @@
+import { ButtonProps as DXButtonProps } from "@clevercanary/data-explorer-ui/lib/components/common/Button/button";
+import { ButtonOutline as DXButtonOutline } from "@clevercanary/data-explorer-ui/lib/components/common/Button/components/ButtonOutline/buttonOutline";
+import React from "react";
+
+export const ButtonOutline = ({ ...props }: DXButtonProps): JSX.Element => {
+  return <DXButtonOutline {...props} />;
+};

explorer/app/components/index.tsx

@@ -1,5 +1,6 @@
 export { Alert } from "@clevercanary/data-explorer-ui/lib/components/common/Alert/alert";
 export { FluidAlert } from "@clevercanary/data-explorer-ui/lib/components/common/Alert/alert.styles";
+export { CookieBanner } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/CookieBanner/cookieBanner";
 export { SessionTimeout } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/SessionTimeout/sessionTimeout";
 export { SystemIndexing } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/SystemIndexing/systemIndexing";
 export { SystemStatus } from "@clevercanary/data-explorer-ui/lib/components/common/Banner/components/SystemStatus/systemStatus";
@@ -72,6 +73,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 { ButtonOutline } from "./common/Button/components/ButtonOutline/buttonOutline";
 export { MdxMarkdown } from "./common/MDXMarkdown/mdxMarkdown";
 export { RenderComponents } from "./common/RenderComponents/renderComponents";
 export { AccessibilityBadge } from "./Detail/components/AccessibilityBadge/accessibilityBadge";

explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts

@@ -305,6 +305,28 @@ export const buildContributors = (
   };
 };
 
+/**
+ * Build props for CookieBanner component.
+ * @returns model to be used as props for the CookieBanner component.
+ */
+export const buildCookieBanner = (): React.ComponentProps<
+  typeof C.CookieBanner
+> => {
+  return {
+    localStorageKey: "privacy-accepted",
+    message:
+      "This website uses cookies for security and analytics purposes. By using this site, you agree to these uses.",
+    secondaryAction: C.ButtonOutline({
+      children: "Learn More",
+      onClick: () =>
+        window.open(
+          "https://data.humancellatlas.org/privacy",
+          ANCHOR_TARGET.BLANK
+        ),
+    }),
+  };
+};
+
 /**
  * Build props for project data curators component from the given projects response.
  * @param projectsResponse - Response model return from projects API.

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

@@ -4,6 +4,7 @@ import {
   FloatingConfig,
 } from "@clevercanary/data-explorer-ui/lib/config/entities";
 import * as C from "app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders";
 
 const ZENDESK_FIELD_ID: Record<REQUEST_FIELD_ID, number> = {
   DESCRIPTION: 360007369412,
@@ -17,6 +18,10 @@ const ZENDESK_UPLOAD_URL = "https://support.terra.bio/api/v2/uploads";
 
 export const floating: FloatingConfig = {
   components: [
+    {
+      component: C.CookieBanner,
+      viewBuilder: V.buildCookieBanner,
+    } as ComponentConfig<typeof C.CookieBanner>,
     {
       component: C.SupportRequest,
       props: {