feat: "Need Help?" link near request access (#4173) (#4174)

* feat: "Need Help?" link near request access (#4173) * chore: updated findable (#4173) --------- Co-authored-by: Fran McDade <[email protected]>
DataBiosphere · Sep 27, 2024 · e4c559b · e4c559b
1 parent 62cea6d
commit e4c559b
Show file tree

Hide file tree

Showing 6 changed files with 1,366 additions and 1,285 deletions.
diff --git a/...Page/components/BackPageHero/components/BackPageHeroActions/backPageHeroActions.styles.ts b/...Page/components/BackPageHero/components/BackPageHeroActions/backPageHeroActions.styles.ts
@@ -0,0 +1,26 @@
+import { BackPageHeroActions } from "@databiosphere/findable-ui/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles";
+import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import styled from "@emotion/styled";
+
+export const StyledBackPageHeroActions = styled(BackPageHeroActions)`
+  display: contents;
+
+  .MuiButton-root,
+  .MuiLink-root {
+    grid-column: 1 / -1;
+  }
+
+  .MuiButton-root {
+    padding-bottom: 8px;
+    padding-top: 8px;
+    width: fit-content;
+  }
+
+  ${mediaTabletUp} {
+    display: flex;
+
+    .MuiLink-root {
+      margin: auto 0;
+    }
+  }
+`;
diff --git a/...s/BackPage/components/BackPageHero/components/BackPageHeroActions/backPageHeroActions.tsx b/...s/BackPage/components/BackPageHero/components/BackPageHeroActions/backPageHeroActions.tsx
@@ -0,0 +1,39 @@
+import {
+  CallToActionButton,
+  CallToActionButtonProps,
+} from "@databiosphere/findable-ui/lib/components/common/Button/components/CallToActionButton/callToActionButton";
+import {
+  Link,
+  LinkProps,
+} from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { useConfig } from "@databiosphere/findable-ui/lib/hooks/useConfig";
+import { TEXT_BODY_500 } from "@databiosphere/findable-ui/lib/theme/common/typography";
+import { SiteConfig } from "../../../../../../../../../site-config/common/entities";
+import { StyledBackPageHeroActions } from "./backPageHeroActions.styles";
+
+export interface BackPageHeroActionsProps {
+  callToActionProps: CallToActionButtonProps;
+  linkProps?: Omit<LinkProps, "url"> & { getURL: (origin?: string) => string };
+}
+
+export const BackPageHeroActions = ({
+  callToActionProps,
+  linkProps,
+}: BackPageHeroActionsProps): JSX.Element => {
+  const { config } = useConfig() as { config: SiteConfig };
+  const { getURL, label, ...otherProps } = linkProps || {};
+  const linkUrl = getURL?.(config.portalURL);
+  return (
+    <StyledBackPageHeroActions>
+      {linkUrl && (
+        <Link
+          TypographyProps={{ variant: TEXT_BODY_500 }}
+          {...otherProps}
+          label={label}
+          url={linkUrl}
+        />
+      )}
+      <CallToActionButton {...callToActionProps} />
+    </StyledBackPageHeroActions>
+  );
+};
diff --git a/explorer/app/components/index.tsx b/explorer/app/components/index.tsx
@@ -5,6 +5,7 @@ export { SessionTimeout } from "@databiosphere/findable-ui/lib/components/common
 export { SystemIndexing } from "@databiosphere/findable-ui/lib/components/common/Banner/components/SystemIndexing/systemIndexing";
 export { SystemStatus } from "@databiosphere/findable-ui/lib/components/common/Banner/components/SystemStatus/systemStatus";
 export { Breadcrumbs } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs";
+export { CallToActionButton } from "@databiosphere/findable-ui/lib/components/common/Button/components/CallToActionButton/callToActionButton";
 export { HelpIconButton } from "@databiosphere/findable-ui/lib/components/common/Button/components/HelpIconButton/helpIconButton";
 export { ButtonGroup } from "@databiosphere/findable-ui/lib/components/common/ButtonGroup/buttonGroup";
 export {
@@ -95,6 +96,7 @@ export { ManifestDownloadEntity as AnVILManifestDownloadEntity } from "./Export/
 export { BioNetworkCell } from "./Index/components/BioNetworkCell/bioNetworkCell";
 export { ConsentCodesCell } from "./Index/components/ConsentCodesCell/consentCodesCell";
 export { CopyCell } from "./Index/components/CopyCell/copyCell";
+export { BackPageHeroActions } from "./Layout/components/BackPage/components/BackPageHero/components/BackPageHeroActions/backPageHeroActions";
 export { ANVILBranding } from "./Layout/components/Footer/components/Branding/components/ANVILBranding/anvilBranding";
 export { HCABranding } from "./Layout/components/Footer/components/Branding/components/HCABranding/hcaBranding";
 export { ANVILExplorer } from "./Layout/components/Header/components/Content/components/Logo/components/LogoExplorer/components/ANVILExplorer/ANVILExplorer";

diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts
@@ -8,7 +8,6 @@ import {
 } from "@databiosphere/findable-ui/lib/common/entities";
 import { stringifyValues } from "@databiosphere/findable-ui/lib/common/utils";
 import { Breadcrumb } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs";
-import { CallToAction } from "@databiosphere/findable-ui/lib/components/common/Button/components/CallToActionButton/callToActionButton";
 import {
   Key,
   KeyValueFn,
@@ -1213,8 +1212,8 @@ export const buildHero = (
   viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   return {
+    actions: getProjectCallToAction(projectsResponse),
     breadcrumbs: getProjectBreadcrumbs(projectsResponse, viewContext),
-    callToAction: getProjectCallToAction(projectsResponse),
     subTitle: getProjectAggregateLastModifiedDate(projectsResponse),
     title: processEntityValue(projectsResponse.projects, "projectTitle"),
   };
@@ -1231,8 +1230,8 @@ export const buildMAHero = (
   viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   return {
+    actions: getProjectCallToAction(projectsResponse),
     breadcrumbs: getProjectBreadcrumbs(projectsResponse, viewContext),
-    callToAction: getProjectCallToAction(projectsResponse),
     title: processEntityValue(projectsResponse.projects, "projectTitle"),
   };
 };
@@ -2128,23 +2127,32 @@ export function getProjectBreadcrumbs(
 }
 
 /**
- * Returns the callToAction prop for the Hero component from the given projects response.
+ * Returns the actions prop BackPageHeroActions 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.
+ * @returns model to be used as props for the BackPageHeroActions component.
  */
 function getProjectCallToAction(
   projectsResponse: ProjectsResponse
-): CallToAction | undefined {
+): ReactElement | null {
   const isReady = isResponseReady(projectsResponse);
   const isAccessGranted = isProjectAccessible(projectsResponse);
   if (!isReady || isAccessGranted) {
-    return;
+    return null;
   }
-  return {
-    label: "Request Access",
-    target: ANCHOR_TARGET.BLANK,
-    url: "https://duos.org/datalibrary/HCA",
-  };
+  return C.BackPageHeroActions({
+    callToActionProps: {
+      callToAction: {
+        label: "Request Access",
+        target: ANCHOR_TARGET.BLANK,
+        url: "https://duos.org/datalibrary/HCA",
+      },
+    },
+    linkProps: {
+      getURL: (origin?: string): string =>
+        `${origin}/guides/requesting-access-to-controlled-access-data`,
+      label: "Need Help?",
+    },
+  });
 }
 
 /**