feat: add "request access" button to managed access project detail pa…

…ges (#3933)
DataBiosphere · Mar 12, 2024 · 9c1764d · 9c1764d
1 parent 4d8f54c
commit 9c1764d
Show file tree

Hide file tree

Showing 29 changed files with 135 additions and 120 deletions.
diff --git a/explorer/app/components/common/MDXContent/hca-dcp/loginTermsOfService.mdx b/explorer/app/components/common/MDXContent/hca-dcp/loginTermsOfService.mdx
@@ -1,10 +1,7 @@
 import { Link } from "@clevercanary/data-explorer-ui/lib/components/Links/components/Link/link";
 
 <span>
-  I have read and agree to{" "}
-  <Link
-    label="privacy notice"
-    url="https://data.humancellatlas.dev.clevercanary.com/privacy"
-  />{" "}
-  and terms of service
+  <span>I have read and agree to </span>
+  <Link label="privacy notice" url={`${props.portalURL}/privacy`} />
+  <span> and terms of service</span>
 </span>
diff --git a/explorer/app/components/common/MDXContent/hca-dcp/loginText.mdx b/explorer/app/components/common/MDXContent/hca-dcp/loginText.mdx
@@ -1,6 +1,6 @@
 import { HelpIconButton } from "@clevercanary/data-explorer-ui/lib/components/common/Button/components/HelpIconButton/helpIconButton";
 
 <span>
-  <span>Please sign in to your Data Explorer account</span>{" "}
-  <HelpIconButton url="https://data.humancellatlas.org/help" />
+  <span>Please sign in to your Data Explorer account </span>
+  <HelpIconButton url={`${props.portalURL}/help`} />
 </span>
diff --git a/explorer/app/components/index.tsx b/explorer/app/components/index.tsx
@@ -33,6 +33,7 @@ export { Stack } from "@clevercanary/data-explorer-ui/lib/components/common/Stac
 export { StaticImage } from "@clevercanary/data-explorer-ui/lib/components/common/StaticImage/staticImage";
 export { StatusBadge } from "@clevercanary/data-explorer-ui/lib/components/common/StatusBadge/statusBadge";
 export { TagWarning } from "@clevercanary/data-explorer-ui/lib/components/common/Tag/tag.styles";
+export { TypographyWordBreak } from "@clevercanary/data-explorer-ui/lib/components/common/Typography/TypographyWordBreak/TypographyWordBreak";
 export { ConditionalComponent } from "@clevercanary/data-explorer-ui/lib/components/ComponentCreator/components/ConditionalComponent/conditionalComponent";
 export { DetailViewTable } from "@clevercanary/data-explorer-ui/lib/components/Detail/components/DetailViewTable/detailViewTable";
 export { DownloadCurlCommandForm } from "@clevercanary/data-explorer-ui/lib/components/Export/components/DownloadCurlCommand/components/DownloadCurlCommandForm/downloadCurlCommandForm";

diff --git a/explorer/app/content/anvil-cmg/guides.mdx b/explorer/app/content/anvil-cmg/guides.mdx
@@ -1,7 +1,3 @@
----
-layoutStyle: "DEFAULT"
----
-
 <Breadcrumbs
   breadcrumbs={[
     { path: "/", text: "AnVIL Data Explorer" },

diff --git a/explorer/app/content/anvil-cmg/privacy.mdx b/explorer/app/content/anvil-cmg/privacy.mdx
@@ -1,7 +1,3 @@
----
-layoutStyle: "DEFAULT"
----
-
 <Breadcrumbs
   breadcrumbs={[
     { path: "/", text: "AnVIL Data Explorer" },

diff --git a/explorer/app/content/anvil-cmg/terms-of-service.mdx b/explorer/app/content/anvil-cmg/terms-of-service.mdx
@@ -1,7 +1,3 @@
----
-layoutStyle: "DEFAULT"
----
-
 <Breadcrumbs
   breadcrumbs={[
     { path: "/", text: "AnVIL Data Explorer" },

diff --git a/explorer/app/content/common/contentPages.ts b/explorer/app/content/common/contentPages.ts
@@ -1,3 +1,4 @@
+import { LAYOUT_STYLE_NO_CONTRAST_LIGHT } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/common/constants";
 import fs from "fs";
 import matter from "gray-matter";
 import { GetStaticPropsContext, GetStaticPropsResult } from "next";
@@ -24,7 +25,6 @@ export async function getContentStaticProps(
   ) {
     return {
       props: {
-        frontmatter: null,
         mdxSource: null,
         pageTitle,
         slug: null,
@@ -33,7 +33,7 @@ export async function getContentStaticProps(
   }
   const markdownPathname = getMarkdownPathname(contentPathname, slug);
   const markdownWithMeta = fs.readFileSync(markdownPathname, "utf-8");
-  const { content, data: frontmatter } = matter(markdownWithMeta);
+  const { content } = matter(markdownWithMeta);
   const mdxSource = await serialize(content, {
     mdxOptions: {
       development: false, // See https://github.com/hashicorp/next-mdx-remote/issues/307#issuecomment-1363415249 and https://github.com/hashicorp/next-mdx-remote/issues/307#issuecomment-1378362096.
@@ -44,7 +44,7 @@ export async function getContentStaticProps(
   });
   return {
     props: {
-      frontmatter,
+      layoutStyle: LAYOUT_STYLE_NO_CONTRAST_LIGHT,
       mdxSource,
       pageTitle,
       slug,

diff --git a/explorer/app/content/common/entities.ts b/explorer/app/content/common/entities.ts
@@ -1,13 +1,9 @@
-import { LayoutStyle } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/contentLayout";
+import { LayoutStyle } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/common/entities";
 import { MDXRemoteSerializeResult } from "next-mdx-remote";
 
 export interface ContentProps {
-  frontmatter: Frontmatter | null;
+  layoutStyle?: LayoutStyle;
   mdxSource: MDXRemoteSerializeResult | null;
   pageTitle: string;
   slug: string[] | null;
 }
-
-export interface Frontmatter {
-  layoutStyle?: LayoutStyle;
-}
diff --git a/explorer/app/content/lungmap/apis.mdx b/explorer/app/content/lungmap/apis.mdx
@@ -1,7 +1,3 @@
----
-layoutStyle: "DEFAULT"
----
-
 <Breadcrumbs
   breadcrumbs={[
     { path: "/", text: "LungMAP Data Explorer" },

diff --git a/explorer/app/content/lungmap/metadata.mdx b/explorer/app/content/lungmap/metadata.mdx
@@ -1,7 +1,3 @@
----
-layoutStyle: "DEFAULT"
----
-
 <Breadcrumbs
   breadcrumbs={[
     { path: "/", text: "LungMAP Data Explorer" },

diff --git a/explorer/app/content/lungmap/privacy.mdx b/explorer/app/content/lungmap/privacy.mdx
@@ -1,7 +1,3 @@
----
-layoutStyle: "DEFAULT"
----
-
 <Breadcrumbs
   breadcrumbs={[
     { path: "/", text: "LungMAP Data Explorer" },

diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/dataSummaryMapper/dataSummaryMapper.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/dataSummaryMapper/dataSummaryMapper.ts
@@ -15,6 +15,7 @@ import {
   processEntityValue,
 } from "../../../../../apis/azul/common/utils";
 import { ProjectsResponse } from "../../../../../apis/azul/hca-dcp/common/responses";
+import * as C from "../../../../../components/index";
 import {
   getEstimatedCellCount,
   getProjectFileFormats,
@@ -151,7 +152,10 @@ export function mapProjectDataSummary(
     projectsResponse.protocols,
     HCA_DCP_CATEGORY_KEY.WORKFLOW
   );
-  details.set(DATA_SUMMARY.PROJECT_SHORTNAME, projectShortname);
+  details.set(
+    DATA_SUMMARY.PROJECT_SHORTNAME,
+    C.TypographyWordBreak({ children: projectShortname })
+  );
   details.set(
     DATA_SUMMARY.GENUS_SPECIES,
     NTagCell({

diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts
@@ -7,6 +7,7 @@ import {
   SelectedFilter,
 } from "@clevercanary/data-explorer-ui/lib/common/entities";
 import { Breadcrumb } from "@clevercanary/data-explorer-ui/lib/components/common/Breadcrumbs/breadcrumbs";
+import { CallToAction } from "@clevercanary/data-explorer-ui/lib/components/common/Button/components/CallToActionButton/callToActionButton";
 import {
   Key,
   KeyValueFn,
@@ -905,6 +906,7 @@ export const buildHero = (
 ): React.ComponentProps<typeof C.BackPageHero> => {
   return {
     breadcrumbs: getProjectBreadcrumbs(projectsResponse, viewContext),
+    callToAction: getProjectCallToAction(projectsResponse),
     title: processEntityValue(projectsResponse.projects, "projectTitle"),
   };
 };
@@ -1748,6 +1750,26 @@ export function getProjectBreadcrumbs(
   return breadcrumbs;
 }
 
+/**
+ * Returns the callToAction prop for the Hero component from the given projects response.
+ * @param projectsResponse - Response model return from projects API.
+ * @returns model to be used as props for the CallToActionButton component.
+ */
+function getProjectCallToAction(
+  projectsResponse: ProjectsResponse
+): CallToAction | undefined {
+  const isReady = isResponseReady(projectsResponse);
+  const isAccessGranted = isProjectAccessible(projectsResponse);
+  if (!isReady || isAccessGranted) {
+    return;
+  }
+  return {
+    label: "Request Access",
+    target: ANCHOR_TARGET.BLANK,
+    url: "https://duos.org/datalibrary/HCA",
+  };
+}
+
 /**
  * Returns project file formats from the projects API response.
  * @param projectsResponse - Response returned from projects API response.

diff --git a/explorer/package-lock.json b/explorer/package-lock.json
diff --git a/explorer/package.json b/explorer/package.json
@@ -36,7 +36,7 @@
     "get-cellxgene-projects-hca": "esrun ./site-config/hca-dcp/dev/scripts/get-cellxgene-projects.ts"
   },
   "dependencies": {
-    "@clevercanary/data-explorer-ui": "68.0.0",
+    "@clevercanary/data-explorer-ui": "70.0.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mdx-js/loader": "^3.0.1",

diff --git a/explorer/pages/[entityListType]/[...params].tsx b/explorer/pages/[entityListType]/[...params].tsx
@@ -129,7 +129,7 @@ export const getStaticPaths: GetStaticPaths<PageUrl> = async () => {
           undefined
         );
 
-        const data = await fetchAllEntities(path);
+        const data = await fetchAllEntities(path, undefined);
         const tabs = entityConfig.detail?.tabs.map((tab) => tab.route) ?? [];
 
         // process all hits

diff --git a/explorer/pages/[entityListType]/index.tsx b/explorer/pages/[entityListType]/index.tsx
@@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps<
   }
 
   // Entities are client-side fetched from a local database seeded from a configured TSV.
-  props.data = await fetchAllEntities(entityListType);
+  props.data = await fetchAllEntities(entityListType, undefined);
 
   return {
     props,

diff --git a/explorer/pages/apis/index.tsx b/explorer/pages/apis/index.tsx
@@ -1,4 +1,4 @@
-import { LAYOUT_STYLE } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/contentLayout";
+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";
@@ -14,10 +14,9 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const Page = ({
-  frontmatter,
+  layoutStyle,
   mdxSource,
 }: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element => {
-  const { layoutStyle } = frontmatter || {};
   if (!mdxSource) return <NotFoundPage />;
   return (
     <ContentView
@@ -26,9 +25,11 @@ const Page = ({
           <MDXRemote {...mdxSource} components={MDX_COMPONENTS} />
         </ContentTheme>
       }
-      layoutStyle={layoutStyle ?? LAYOUT_STYLE.CONTRAST}
+      layoutStyle={layoutStyle ?? undefined}
     />
   );
 };
 
+Page.Main = Main;
+
 export default Page;
diff --git a/explorer/pages/guides/index.tsx b/explorer/pages/guides/index.tsx
@@ -1,4 +1,4 @@
-import { LAYOUT_STYLE } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/contentLayout";
+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";
@@ -14,10 +14,9 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const Page = ({
-  frontmatter,
+  layoutStyle,
   mdxSource,
 }: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element => {
-  const { layoutStyle } = frontmatter || {};
   if (!mdxSource) return <NotFoundPage />;
   return (
     <ContentView
@@ -26,9 +25,11 @@ const Page = ({
           <MDXRemote {...mdxSource} components={MDX_COMPONENTS} />
         </ContentTheme>
       }
-      layoutStyle={layoutStyle ?? LAYOUT_STYLE.CONTRAST}
+      layoutStyle={layoutStyle ?? undefined}
     />
   );
 };
 
+Page.Main = Main;
+
 export default Page;
diff --git a/explorer/pages/metadata/index.tsx b/explorer/pages/metadata/index.tsx
@@ -1,4 +1,4 @@
-import { LAYOUT_STYLE } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/contentLayout";
+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";
@@ -14,10 +14,9 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const Page = ({
-  frontmatter,
+  layoutStyle,
   mdxSource,
 }: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element => {
-  const { layoutStyle } = frontmatter || {};
   if (!mdxSource) return <NotFoundPage />;
   return (
     <ContentView
@@ -30,9 +29,11 @@ const Page = ({
           />
         </ContentTheme>
       }
-      layoutStyle={layoutStyle ?? LAYOUT_STYLE.CONTRAST}
+      layoutStyle={layoutStyle ?? undefined}
     />
   );
 };
 
+Page.Main = Main;
+
 export default Page;
diff --git a/explorer/pages/privacy/index.tsx b/explorer/pages/privacy/index.tsx
@@ -1,4 +1,4 @@
-import { LAYOUT_STYLE } from "@clevercanary/data-explorer-ui/lib/components/Layout/components/ContentLayout/contentLayout";
+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";
@@ -14,10 +14,9 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const Page = ({
-  frontmatter,
+  layoutStyle,
   mdxSource,
 }: InferGetStaticPropsType<typeof getStaticProps>): JSX.Element => {
-  const { layoutStyle } = frontmatter || {};
   if (!mdxSource) return <NotFoundPage />;
   return (
     <ContentView
@@ -26,9 +25,11 @@ const Page = ({
           <MDXRemote {...mdxSource} components={MDX_COMPONENTS} />
         </ContentTheme>
       }
-      layoutStyle={layoutStyle ?? LAYOUT_STYLE.CONTRAST}
+      layoutStyle={layoutStyle ?? undefined}
     />
   );
 };
 
+Page.Main = Main;
+
 export default Page;