@databiosphere/findable-ui 21.2.0 → 21.4.0

package/src/components/DataDictionary/common/utils.ts

@@ -0,0 +1,160 @@
+import {
+  Attribute,
+  Class,
+  DataDictionary,
+  DataDictionaryAnnotation,
+} from "../../../common/entities";
+import { CategoryGroupConfig, SiteConfig } from "../../../config/entities";
+
+/**
+ * Annotate each entity column configuration with data dictionary values. Specifically,
+ * look up label and description for each column key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateColumnConfig(
+  siteConfig: SiteConfig,
+  annotationsByKey: Record<string, DataDictionaryAnnotation>
+): void {
+  // Annotate every column in every entity.
+  siteConfig.entities.forEach((entity) => {
+    entity.list.columns.forEach((columnConfig) => {
+      // Find the annotation for the column key.
+      const annotation = annotationsByKey[columnConfig.id];
+      if (!annotation) {
+        return;
+      }
+
+      if (!columnConfig.meta) {
+        columnConfig.meta = {};
+      }
+      columnConfig.meta.annotation = annotation;
+    });
+  });
+}
+
+/**
+ * Annotate filter and colummn configuration with data dictionary values. Note this
+ * functionality mutates the site config. A possible future improvement would be to
+ * create either a specific "raw"  or "annotated" type to indicate clearly the point
+ * at which the config has been annotated.
+ * @param siteConfig - The site configuration to annotate.
+ */
+export function annotateSiteConfig(siteConfig: SiteConfig): void {
+  // Build and map data dictionary annotations by key.
+  const { dataDictionary } = siteConfig;
+  if (!dataDictionary) {
+    return;
+  }
+  const annotationsByKey = keyAnnotationsByKey(dataDictionary);
+
+  // Annotate elements of site config.
+  annotateEntityConfig(siteConfig, annotationsByKey);
+  annotateDefaultCategoryConfig(siteConfig, annotationsByKey);
+  annotateEntityCategoryConfig(siteConfig, annotationsByKey);
+  annotateColumnConfig(siteConfig, annotationsByKey);
+}
+
+/**
+ * Annotate entity configuration with data dictionary values. Specifically, look
+ * up label and description for each entity key.
+ * @param siteConfig - The site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateEntityConfig(
+  siteConfig: SiteConfig,
+  annotationsByKey: Record<string, DataDictionaryAnnotation>
+): void {
+  // Annotate every entity.
+  siteConfig.entities.forEach((entityConfig) => {
+    // Check entity for a data dictionary key.
+    const { key } = entityConfig;
+    if (!key) {
+      return;
+    }
+
+    // Find corresponding annotation for the key and set on entity config.
+    entityConfig.annotation = annotationsByKey[key];
+  });
+}
+
+/**
+ * Annotate top-level (app-wide) category config with data dictionary values.
+ * Specifically, look up label and description for each filter key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateDefaultCategoryConfig(
+  siteConfig: SiteConfig,
+  annotationsByKey: Record<string, DataDictionaryAnnotation>
+): void {
+  const { categoryGroupConfig } = siteConfig;
+  if (categoryGroupConfig) {
+    annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey);
+  }
+}
+
+/**
+ * Annotate entity-specific category config with data dictionary values. Specifically,
+ * look up label and description for each category key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateEntityCategoryConfig(
+  siteConfig: SiteConfig,
+  annotationsByKey: Record<string, DataDictionaryAnnotation>
+): void {
+  // Annotate every category in every entity.
+  siteConfig.entities.forEach((entityConfig) => {
+    const { categoryGroupConfig } = entityConfig;
+    if (categoryGroupConfig) {
+      annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey);
+    }
+  });
+}
+
+/**
+ * Annonate category group configuration with data dictionary values.
+ * @param categoryGroupConfig - Category group to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+function annotateCategoryGroupConfig(
+  categoryGroupConfig: CategoryGroupConfig,
+  annotationsByKey: Record<string, DataDictionaryAnnotation>
+): void {
+  categoryGroupConfig.categoryGroups.forEach((categoryGroup) => {
+    categoryGroup.categoryConfigs.forEach((categorConfig) => {
+      categorConfig.annotation = annotationsByKey[categorConfig.key];
+    });
+  });
+}
+
+/**
+ * Transform a data dictionary into a key-annotation map. Build annotations for both
+ * classes and attributes and add to map.
+ * @param dataDictionary - Data dictionary to transform into a key-annotation map.
+ * @returns Key-annotation map.
+ */
+function keyAnnotationsByKey(
+  dataDictionary: DataDictionary
+): Record<string, DataDictionaryAnnotation> {
+  return dataDictionary.classes.reduce(
+    (acc: Record<string, DataDictionaryAnnotation>, cls: Class) => {
+      // Add class to map.
+      acc[cls.key] = {
+        description: cls.description,
+        label: cls.label,
+      };
+
+      // Add each class attribute to the map.
+      cls.attributes.forEach((attribute: Attribute) => {
+        acc[attribute.key] = {
+          description: attribute.description,
+          label: attribute.label,
+        };
+      });
+      return acc;
+    },
+    {} as Record<string, DataDictionaryAnnotation>
+  );
+}

package/src/components/Export/components/ExportForm/components/ExportButton/exportButton.tsx

@@ -2,6 +2,7 @@ import { Tooltip } from "@mui/material";
 import React, { ElementType, ReactNode } from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
 import { useFileManifestState } from "../../../../../../hooks/useFileManifestState";
+import { useLoginGuard } from "../../../../../../providers/loginGuard/hook";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 
 export interface ExportButtonProps {
@@ -19,6 +20,10 @@ export const ExportButton = ({
   const {
     fileManifestState: { isLoading },
   } = useFileManifestState();
+
+  // Prompt user for login before export, if required.
+  const { requireLogin } = useLoginGuard();
+
   return (
     <Tooltip arrow title={isLoading ? null : downloadStatus.message}>
       <span>
@@ -26,7 +31,9 @@ export const ExportButton = ({
           disabled={
             isLoading || downloadStatus.disabled || downloadStatus.isLoading
           }
-          onClick={onClick}
+          onClick={() => {
+            requireLogin(onClick);
+          }}
         >
           <span>{children}</span>
         </Button>

package/src/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.tsx

@@ -10,6 +10,7 @@ import React, { useRef } from "react";
 import { Filters } from "../../../../../../../../common/entities";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
+import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
 import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import {
@@ -46,6 +47,9 @@ export const FileManifestDownload = ({
   const isInProgress = (isIdle || isLoading) && !disabled;
   const isReady = Boolean(manifestURL) || disabled;
 
+  // Prompt user for login before download and copy, if required.
+  const { requireLogin } = useLoginGuard();
+
   // Copies file manifest.
   const copyManifestURL = (url?: string): void => {
     if (!url) return;
@@ -89,15 +93,19 @@ export const FileManifestDownload = ({
                                 action="Download file manifest"
                                 disabled={disabled}
                                 label={<DownloadIconSmall />}
-                                onClick={downloadManifestURL}
+                                onClick={() =>
+                                  requireLogin(downloadManifestURL)
+                                }
                               />,
                               <ButtonGroupButton
                                 key="copy"
                                 action="Copy file manifest"
                                 disabled={disabled}
                                 label={<ContentCopyIconSmall />}
-                                onClick={(): void =>
-                                  copyManifestURL(manifestURL)
+                                onClick={() =>
+                                  requireLogin((): void =>
+                                    copyManifestURL(manifestURL)
+                                  )
                                 }
                               />,
                             ]}

package/src/components/Filter/components/Filter/filter.tsx

@@ -77,6 +77,7 @@ export const Filter = ({
   return (
     <>
       <FilterLabel
+        annotation={categoryView.annotation}
         count={categoryView.values.length}
         disabled={categoryView.isDisabled}
         isOpen={isOpen}

package/src/components/Filter/components/FilterLabel/filterLabel.tsx

@@ -1,8 +1,11 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import React, { MouseEvent } from "react";
+import { DataDictionaryAnnotation } from "../../../../common/entities";
+import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { FilterLabel as Label } from "./filterLabel.styles";
 
 export interface FilterLabelProps {
+  annotation?: DataDictionaryAnnotation;
   count?: number;
   disabled?: boolean;
   isOpen: boolean;
@@ -11,6 +14,7 @@ export interface FilterLabelProps {
 }
 
 export const FilterLabel = ({
+  annotation,
   count,
   disabled = false,
   isOpen,
@@ -19,15 +23,17 @@ export const FilterLabel = ({
 }: FilterLabelProps): JSX.Element => {
   const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
   return (
-    <Label
-      color="inherit"
-      disabled={disabled}
-      endIcon={<ArrowDropDownRoundedIcon fontSize="small" />}
-      fullWidth
-      isOpen={isOpen}
-      onClick={onClick}
-    >
-      {filterLabel}
-    </Label>
+    <Tooltip description={annotation?.description} title={annotation?.label}>
+      <Label
+        color="inherit"
+        disabled={disabled}
+        endIcon={<ArrowDropDownRoundedIcon fontSize="small" />}
+        fullWidth
+        isOpen={isOpen}
+        onClick={onClick}
+      >
+        {filterLabel}
+      </Label>
+    </Tooltip>
   );
 };

package/src/components/Index/components/AzulFileDownload/azulFileDownload.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useFileLocation } from "../../../../hooks/useFileLocation";
+import { useLoginGuard } from "../../../../providers/loginGuard/hook";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -29,6 +30,9 @@ export const AzulFileDownload = ({
   const downloadRef = useRef<HTMLAnchorElement>(null);
   const [isRequestPending, setIsRequestPending] = useState(false);
 
+  // Prompt user for login before download, if required.
+  const { requireLogin } = useLoginGuard();
+
   // Initiates file download when file location request is successful.
   useEffect(() => {
     if (!fileUrl) return;
@@ -39,6 +43,13 @@ export const AzulFileDownload = ({
     setIsRequestPending(false);
   }, [fileUrl]);
 
+  // Initiates file download when download button is clicked.
+  const handleDownloadClick = (): void => {
+    setIsRequestPending(true);
+    trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
+    run();
+  };
+
   return (
     <Fragment>
       {isRequestPending ? (
@@ -54,11 +65,7 @@ export const AzulFileDownload = ({
           data-testid={AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID}
           disabled={!url}
           Icon={isLoading ? LoadingIcon : DownloadIcon}
-          onClick={(): void => {
-            setIsRequestPending(true);
-            trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-            run();
-          }}
+          onClick={() => requireLogin(handleDownloadClick)}
           size="medium"
         />
       )}

package/src/components/Index/components/Tabs/common/utils.ts

@@ -11,6 +11,7 @@ export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
     (
       acc: Tab[],
       {
+        annotation,
         label,
         listView: { enableTab = true } = {},
         route,
@@ -20,6 +21,7 @@ export function getEntityListTabs(entities: EntityConfig[]): Tab[] {
     ) => {
       if (enableTab) {
         acc.push({
+          annotation,
           icon,
           iconPosition,
           label,

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.tsx

@@ -78,7 +78,7 @@ export const NavigationMenu = ({
           >
             <MPaper variant="menu">
               <MClickAwayListener onClickAway={onClose}>
-                <MMenuList>
+                <MMenuList component="div">
                   <NavigationMenuItems
                     closeMenu={(): void => {
                       onClose();

package/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.tsx

@@ -2,9 +2,10 @@ import {
   Divider,
   ListItemIcon,
   ListItemText,
+  Link as MLink,
   MenuItem as MMenuItem,
 } from "@mui/material";
-import { useRouter } from "next/router";
+import Link from "next/link";
 import React, { Fragment, ReactNode } from "react";
 import {
   TEXT_BODY_400,
@@ -38,7 +39,6 @@ export const NavigationMenuItems = ({
   menuItems,
   pathname,
 }: NavLinkMenuProps): JSX.Element => {
-  const router = useRouter();
   return (
     <>
       {menuItems.map(
@@ -54,8 +54,9 @@ export const NavigationMenuItems = ({
             url,
           },
           i
-        ) =>
-          nestedMenuItems ? (
+        ) => {
+          const isClientSide = isClientSideNavigation(url);
+          return nestedMenuItems ? (
             <NavigationMenu
               key={i}
               closeAncestor={closeMenu}
@@ -69,18 +70,17 @@ export const NavigationMenuItems = ({
           ) : (
             <Fragment key={i}>
               <MMenuItem
+                component={isClientSide ? Link : MLink}
                 disabled={!url}
-                onClick={(): void => {
-                  closeMenu();
-                  isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(
-                        url,
-                        target,
-                        REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-                      );
-                }}
+                href={url}
+                onClick={(): void => closeMenu()}
+                rel={
+                  isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                }
                 selected={isNavigationLinkSelected(pathname, selectedPatterns)}
+                target={target}
               >
                 {icon && <ListItemIcon>{icon}</ListItemIcon>}
                 <ListItemText
@@ -100,7 +100,8 @@ export const NavigationMenuItems = ({
               </MMenuItem>
               {divider && <Divider />}
             </Fragment>
-          )
+          );
+        }
       )}
     </>
   );

package/src/components/Layout/components/Header/components/Content/components/Navigation/constants.ts

@@ -0,0 +1 @@
+export const NAVIGATION_TEST_ID = "navigation";

package/src/components/Layout/components/Header/components/Content/components/Navigation/navigation.tsx

@@ -1,5 +1,5 @@
-import { Button, Divider } from "@mui/material";
-import { useRouter } from "next/router";
+import { Button, Divider, Link as MLink } from "@mui/material";
+import Link from "next/link";
 import React, { CSSProperties, forwardRef, Fragment, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import {
@@ -7,6 +7,7 @@ import {
   REL_ATTRIBUTE,
 } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
+import { TestIdProps } from "../../../../../../../types";
 import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { isNavigationLinkSelected } from "./common/utils";
@@ -28,7 +29,7 @@ export interface NavLinkItem {
   visible?: Partial<Record<BreakpointKey, boolean>>;
 }
 
-export interface NavigationProps {
+export interface NavigationProps extends TestIdProps {
   className?: string;
   closeAncestor?: () => void;
   headerProps?: HeaderProps;
@@ -48,12 +49,18 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
       links,
       pathname,
       style,
+      testId,
     }: NavigationProps,
     ref
   ): JSX.Element {
-    const router = useRouter();
     return (
-      <Links ref={ref} className={className} isMenuIn={isMenuIn} style={style}>
+      <Links
+        ref={ref}
+        className={className}
+        data-testid={testId}
+        isMenuIn={isMenuIn}
+        style={style}
+      >
         {links.map(
           (
             {
@@ -65,8 +72,9 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
               url,
             },
             i
-          ) =>
-            menuItems ? (
+          ) => {
+            const isClientSide = isClientSideNavigation(url);
+            return menuItems ? (
               <Fragment key={i}>
                 {isMenuIn ? (
                   <NavigationDrawer
@@ -98,17 +106,16 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
             ) : (
               <Fragment key={i}>
                 <Button
+                  component={isClientSide ? Link : MLink}
                   disabled={!url}
-                  onClick={(): void => {
-                    closeAncestor?.();
-                    isClientSideNavigation(url)
-                      ? router.push(url)
-                      : window.open(
-                          url,
-                          target,
-                          REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
-                        );
-                  }}
+                  href={url}
+                  onClick={(): void => closeAncestor?.()}
+                  rel={
+                    isClientSide
+                      ? REL_ATTRIBUTE.NO_OPENER
+                      : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER
+                  }
+                  target={target}
                   variant={
                     isNavigationLinkSelected(pathname, selectedPatterns)
                       ? "activeNav"
@@ -119,7 +126,8 @@ export const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
                 </Button>
                 {divider && <Divider />}
               </Fragment>
-            )
+            );
+          }
         )}
       </Links>
     );

package/src/components/Layout/components/Header/header.tsx

@@ -21,6 +21,7 @@ import {
   renderIconButton as renderSearchIconButton,
   Search,
 } from "./components/Content/components/Actions/components/Search/search";
+import { NAVIGATION_TEST_ID } from "./components/Content/components/Navigation/constants";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -92,7 +93,11 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
           <Center>
             {/* Center navigation */}
             {isIn.isCenterNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsC} />
+              <DXNavigation
+                {...navigationProps}
+                testId={NAVIGATION_TEST_ID}
+                links={navItemsC}
+              />
             )}
           </Center>
         </Fade>

package/src/components/Login/components/Button/types.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material/Button/Button";
+import { ButtonProps } from "@mui/material";
 import { BaseComponentProps } from "../../../../theme/common/entities";
 
 export type Props = BaseComponentProps & ButtonProps;

package/src/components/Login/components/Buttons/buttons.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button } from "../Button/button";
+import { Props } from "./types";
+
+export const Buttons = <P,>({
+  className,
+  handleLogin,
+  providers = [],
+  ...props /* Mui ButtonProps */
+}: Props<P>): JSX.Element[] => {
+  return providers?.map((provider) => (
+    <Button
+      key={provider.id}
+      className={className}
+      endIcon={"icon" in provider && provider.icon}
+      onClick={() => handleLogin(provider.id)}
+      {...props}
+    >
+      {provider.name}
+    </Button>
+  ));
+};

package/src/components/Login/components/Buttons/types.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "@mui/material";
+import { ClientSafeProvider } from "next-auth/react";
+import { OAuthProvider } from "../../../../config/entities";
+import { BaseComponentProps } from "../../../../theme/common/entities";
+
+export interface Props<P> extends BaseComponentProps, ButtonProps {
+  handleLogin: (providerId: string) => void;
+  providers?: ClientSafeProvider[] | OAuthProvider<P>[];
+}

package/src/components/Login/components/Section/components/Consent/consent.styles.ts

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Grid2 } from "@mui/material";
+
+export const StyledGrid2 = styled(Grid2)`
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  gap: 12px;
+
+  .MuiTypography-text-body-400 {
+    .MuiLink-root {
+      color: inherit;
+    }
+  }
+`;

package/src/components/Login/components/Section/components/Consent/consent.tsx

@@ -0,0 +1,30 @@
+import { Checkbox, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { BaseComponentProps } from "../../../../../types";
+import { StyledGrid2 } from "./consent.styles";
+import { ConsentProps } from "./types";
+
+export const Consent = ({
+  children,
+  className,
+  handleConsent,
+  isDisabled,
+  isError,
+  ...props /* Mui Grid2Props */
+}: BaseComponentProps & ConsentProps): JSX.Element | null => {
+  if (isDisabled) return null;
+  return (
+    <StyledGrid2 className={className} {...props}>
+      <Checkbox
+        checkedIcon={<CheckedIcon />}
+        icon={isError ? <UncheckedErrorIcon /> : <UncheckedIcon />}
+        onChange={handleConsent}
+      />
+      <Typography variant={TEXT_BODY_400}>{children}</Typography>
+    </StyledGrid2>
+  );
+};

package/src/components/Login/components/Section/components/Consent/types.ts

@@ -0,0 +1,10 @@
+import { Grid2Props } from "@mui/material";
+import { ReactNode } from "react";
+import { UseUserConsent } from "../../../../hooks/useUserConsent/types";
+
+export interface ConsentProps
+  extends Grid2Props,
+    Pick<UseUserConsent, "handleConsent">,
+    Pick<UseUserConsent["state"], "isDisabled" | "isError"> {
+  children: ReactNode;
+}