@databiosphere/findable-ui 21.2.0 → 21.4.0

package/src/components/Login/components/Section/components/Warning/warning.tsx

@@ -0,0 +1,24 @@
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { COLOR } from "../../../../../../styles/common/mui/typography";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../theme/common/typography";
+import { BaseComponentProps } from "../../../../../types";
+
+export const Warning = ({
+  children,
+  className,
+  ...props /* Mui TypographyOwnProps */
+}: BaseComponentProps & TypographyProps): JSX.Element | null => {
+  if (!children) return null;
+  return (
+    <Typography
+      className={className}
+      color={COLOR.INK_LIGHT}
+      mt={6}
+      variant={TEXT_BODY_SMALL_400}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};

package/src/components/Login/hooks/useUserConsent/types.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from "react";
+
+export interface UseUserConsent {
+  handleConsent: (e: ChangeEvent<HTMLInputElement>) => void;
+  handleError: (error: boolean) => void;
+  state: {
+    isDisabled: boolean;
+    isError: boolean;
+    isValid: boolean;
+  };
+}

package/src/components/Login/hooks/useUserConsent/useUserConsent.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent, useCallback, useState } from "react";
+import { useAuthenticationConfig } from "../../../../hooks/authentication/config/useAuthenticationConfig";
+import { UseUserConsent } from "./types";
+
+export const useUserConsent = (): UseUserConsent => {
+  const authConfig = useAuthenticationConfig();
+  const [isDisabled] = useState<boolean>(Boolean(!authConfig?.termsOfService));
+  const [isError, setIsError] = useState<boolean>(false);
+  const [isValid, setIsValid] = useState<boolean>(false);
+
+  const handleError = useCallback((error: boolean) => {
+    setIsError(error);
+  }, []);
+
+  const handleConsent = useCallback(
+    (changeEvent: ChangeEvent<HTMLInputElement>): void => {
+      handleError(false);
+      setIsValid(changeEvent.target.checked);
+    },
+    [handleError]
+  );
+
+  return {
+    handleConsent,
+    handleError,
+    state: {
+      isDisabled,
+      isError,
+      isValid,
+    },
+  };
+};

package/src/components/Login/hooks/useUserLogin/types.ts

@@ -0,0 +1,8 @@
+import { ProviderId } from "../../../../providers/authentication/common/types";
+import { UseUserConsent } from "../useUserConsent/types";
+
+export interface UseUserLogin
+  extends Omit<UseUserConsent, "handleError" | "state"> {
+  consentState: Pick<UseUserConsent["state"], "isDisabled" | "isError">;
+  handleLogin: (providerId: ProviderId) => void;
+}

package/src/components/Login/hooks/useUserLogin/useUserLogin.ts

@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+import { useAuth } from "../../../../providers/authentication/auth/hook";
+import { ProviderId } from "../../../../providers/authentication/common/types";
+import { useUserConsent } from "../useUserConsent/useUserConsent";
+import { UseUserLogin } from "./types";
+
+export const useUserLogin = (): UseUserLogin => {
+  const { service: { requestLogin } = {} } = useAuth();
+  const { handleConsent, handleError, state: consentState } = useUserConsent();
+  const { isDisabled, isError, isValid } = consentState; // Consent state: { isValid } is an indicator of whether the user has accepted the login terms.
+
+  const handleLogin = useCallback(
+    (providerId: ProviderId): void => {
+      if (!isDisabled && !isValid) {
+        // If the user has not accepted terms, set error state to true.
+        handleError(true);
+        return;
+      }
+      requestLogin?.(providerId);
+    },
+    [handleError, isDisabled, isValid, requestLogin]
+  );
+
+  return {
+    consentState: { isDisabled, isError },
+    handleConsent,
+    handleLogin,
+  };
+};

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -7,6 +7,7 @@ import {
 } from "@mui/material";
 import { flexRender, RowData } from "@tanstack/react-table";
 import React, { Fragment } from "react";
+import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { ROW_DIRECTION } from "../../common/entities";
 import {
   getTableCellAlign,
@@ -28,27 +29,37 @@ export const TableHead = <T extends RowData>({
             <MTableRow>
               {headerGroup.headers.map(({ column, getContext, id }) => {
                 const { columnDef, getIsGrouped, getIsSorted } = column;
+                const annotation = columnDef.meta?.annotation;
                 return getIsGrouped() ? null : (
                   <TableCell
                     key={id}
                     align={getTableCellAlign(column)}
                     padding={getTableCellPadding(id)}
                   >
-                    {shouldSortColumn(tableInstance, column) ? (
-                      <TableSortLabel
-                        IconComponent={SouthRoundedIcon}
-                        active={Boolean(getIsSorted())}
-                        direction={getIsSorted() || undefined}
-                        disabled={isSortDisabled(tableInstance)}
-                        onClick={(mouseEvent) =>
-                          handleToggleSorting(mouseEvent, tableInstance, column)
-                        }
-                      >
-                        {flexRender(columnDef.header, getContext())}
-                      </TableSortLabel>
-                    ) : (
-                      flexRender(columnDef.header, getContext())
-                    )}
+                    <Tooltip
+                      description={annotation?.description}
+                      title={annotation?.label}
+                    >
+                      {shouldSortColumn(tableInstance, column) ? (
+                        <TableSortLabel
+                          IconComponent={SouthRoundedIcon}
+                          active={Boolean(getIsSorted())}
+                          direction={getIsSorted() || undefined}
+                          disabled={isSortDisabled(tableInstance)}
+                          onClick={(mouseEvent) =>
+                            handleToggleSorting(
+                              mouseEvent,
+                              tableInstance,
+                              column
+                            )
+                          }
+                        >
+                          {flexRender(columnDef.header, getContext())}
+                        </TableSortLabel>
+                      ) : (
+                        flexRender(columnDef.header, getContext())
+                      )}
+                    </Tooltip>
                   </TableCell>
                 );
               })}

package/src/components/common/CustomIcon/components/CloseIcon/closeIcon.tsx

@@ -0,0 +1,17 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+import React from "react";
+
+export const CloseIcon = ({
+  fontSize = "xsmall",
+  viewBox = "0 0 18 18",
+  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
+}: SvgIconProps): JSX.Element => {
+  return (
+    <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
+      <path
+        d="M8.99994 10.1061L5.38104 13.725C5.23104 13.875 5.04984 13.947 4.83744 13.941C4.62504 13.9344 4.44384 13.8561 4.29384 13.7061C4.14384 13.5561 4.06884 13.3719 4.06884 13.1535C4.06884 12.9345 4.14384 12.75 4.29384 12.6L7.89384 9.00005L4.27494 5.38115C4.12494 5.23115 4.05294 5.04695 4.05894 4.82855C4.06554 4.60955 4.14384 4.42505 4.29384 4.27505C4.44384 4.12505 4.62804 4.05005 4.84644 4.05005C5.06544 4.05005 5.24994 4.12505 5.39994 4.27505L8.99994 7.89395L12.6188 4.27505C12.7688 4.12505 12.953 4.05005 13.1714 4.05005C13.3904 4.05005 13.5749 4.12505 13.7249 4.27505C13.8749 4.42505 13.9499 4.60955 13.9499 4.82855C13.9499 5.04695 13.8749 5.23115 13.7249 5.38115L10.106 9.00005L13.7249 12.6189C13.8749 12.7689 13.9499 12.9501 13.9499 13.1625C13.9499 13.3749 13.8749 13.5561 13.7249 13.7061C13.5749 13.8561 13.3904 13.9311 13.1714 13.9311C12.953 13.9311 12.7688 13.8561 12.6188 13.7061L8.99994 10.1061Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

package/src/components/common/LoginDialog/constants.ts

@@ -0,0 +1,33 @@
+import {
+  DialogContentTextProps,
+  DialogProps,
+  DialogTitleProps,
+  IconButtonProps,
+  IconProps,
+} from "@mui/material";
+import { FONT_SIZE } from "../../../styles/common/mui/icon";
+import { COLOR, VARIANT } from "../../../styles/common/mui/typography";
+
+export const DIALOG_CONTENT_TEXT_PROPS: DialogContentTextProps = {
+  color: COLOR.INK_LIGHT,
+  component: "div",
+  variant: VARIANT.TEXT_BODY_400,
+};
+
+export const DIALOG_PROPS: Partial<DialogProps> = {
+  PaperProps: { elevation: 0 },
+};
+
+export const DIALOG_TITLE_PROPS: DialogTitleProps = {
+  variant: VARIANT.TEXT_HEADING_SMALL,
+};
+
+export const ICON_BUTTON_PROPS: IconButtonProps = {
+  color: "inkLight",
+  edge: "end",
+  size: "xsmall",
+};
+
+export const ICON_PROPS: Pick<IconProps, "fontSize"> = {
+  fontSize: FONT_SIZE.SMALL,
+};

package/src/components/common/LoginDialog/loginDialog.styles.ts

@@ -0,0 +1,51 @@
+import styled from "@emotion/styled";
+import { Dialog } from "@mui/material";
+import { inkMain } from "../../../styles/common/mixins/colors";
+import { alpha80 } from "../../../theme/common/palette";
+
+export const StyledDialog = styled(Dialog)`
+  &.MuiDialog-root {
+    .MuiBackdrop-root {
+      background-color: ${inkMain}${alpha80};
+    }
+
+    .MuiDialog-paper {
+      border-radius: 8px;
+      max-width: 400px;
+      padding: 32px;
+      position: relative; /* positions close icon */
+
+      .MuiDialogTitle-root,
+      .MuiDialogContent-root,
+      .MuiDialogActions-root {
+        padding: 0;
+      }
+
+      .MuiDialogTitle-root {
+        font-size: 20px;
+
+        .MuiIconButton-root {
+          position: absolute;
+          right: 12px;
+          top: 12px;
+        }
+      }
+
+      .MuiDialogContent-root {
+        .MuiDialogContentText-root {
+          margin: 8px 0;
+        }
+
+        .MuiGrid2-root {
+          margin: 24px 0;
+        }
+      }
+
+      .MuiDialogActions-root {
+        display: flex;
+        flex-direction: column;
+        gap: 16px 0;
+      }
+    }
+  }
+`;

package/src/components/common/LoginDialog/loginDialog.tsx

@@ -0,0 +1,56 @@
+import {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+import React from "react";
+import { useAuthenticationConfig } from "../../../hooks/authentication/config/useAuthenticationConfig";
+import { Buttons } from "../../Login/components/Buttons/buttons";
+import { Consent } from "../../Login/components/Section/components/Consent/consent";
+import { Warning } from "../../Login/components/Section/components/Warning/warning";
+import { useUserLogin } from "../../Login/hooks/useUserLogin/useUserLogin";
+import { CloseIcon } from "../CustomIcon/components/CloseIcon/closeIcon";
+import {
+  DIALOG_CONTENT_TEXT_PROPS,
+  DIALOG_PROPS,
+  DIALOG_TITLE_PROPS,
+  ICON_BUTTON_PROPS,
+  ICON_PROPS,
+} from "./constants";
+import { StyledDialog } from "./loginDialog.styles";
+import { LoginDialogProps } from "./types";
+
+export const LoginDialog = ({
+  onClose,
+  open,
+}: LoginDialogProps): JSX.Element | null => {
+  const authConfig = useAuthenticationConfig();
+  const { consentState, handleConsent, handleLogin } = useUserLogin();
+
+  if (!authConfig) return null;
+
+  return (
+    <StyledDialog {...DIALOG_PROPS} onClose={onClose} open={open}>
+      <DialogTitle {...DIALOG_TITLE_PROPS}>
+        <div>Sign In Required</div>
+        <IconButton {...ICON_BUTTON_PROPS} onClick={onClose}>
+          <CloseIcon {...ICON_PROPS} />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText {...DIALOG_CONTENT_TEXT_PROPS}>
+          Please sign in to proceed with this action.
+        </DialogContentText>
+        <Consent handleConsent={handleConsent} {...consentState}>
+          {authConfig.termsOfService}
+        </Consent>
+      </DialogContent>
+      <DialogActions disableSpacing>
+        <Buttons handleLogin={handleLogin} providers={authConfig.providers} />
+      </DialogActions>
+      <Warning>{authConfig.warning}</Warning>
+    </StyledDialog>
+  );
+};

package/src/components/common/LoginDialog/types.ts

@@ -0,0 +1,4 @@
+export interface LoginDialogProps {
+  onClose: () => void;
+  open: boolean;
+}

package/src/components/common/Tabs/tabs.tsx

@@ -3,7 +3,9 @@ import {
   Tabs as MTabs,
   TabsProps as MTabsProps,
 } from "@mui/material";
-import React, { ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
+import { DataDictionaryAnnotation } from "../../../common/entities";
+import { Tooltip } from "../../DataDictionary/components/Tooltip/tooltip";
 import { Tab, TabScrollFuzz } from "./tabs.styles";
 
 export type TabsValue = MTabsProps["value"]; // any
@@ -11,6 +13,7 @@ export type TabValue = MTabProps["value"]; // any
 export type OnTabChangeFn = (tabValue: TabValue) => void; // Function invoked when selected tab value changes.
 
 export interface Tab {
+  annotation?: DataDictionaryAnnotation;
   count?: string;
   icon?: MTabProps["icon"]; // element or string
   iconPosition?: MTabProps["iconPosition"]; // "bottom" or "end" or "start" or "top
@@ -41,14 +44,21 @@ export const Tabs = ({
     >
       {tabs.map(
         (
-          { count, icon, iconPosition = "start", label, value: tabValue },
+          {
+            annotation,
+            count,
+            icon,
+            iconPosition = "start",
+            label,
+            value: tabValue,
+          },
           t
         ) => (
           <Tab
             icon={icon}
             iconPosition={icon ? iconPosition : undefined}
             key={`${label}${t}`}
-            label={count ? `${label} (${count})` : label}
+            label={buildTabLabel(label, count, annotation)}
             value={tabValue}
           />
         )
@@ -56,3 +66,23 @@ export const Tabs = ({
     </MTabs>
   );
 };
+
+/**
+ * Build a tab value from a tab config. Specifically, display the tab label
+ * with a tooltip annotation if necessary.
+ * @param label - Tab display value.
+ * @param count - Optional count to display next to the tab label.
+ * @param annotation - Data dictionary annotation.
+ * @returns Tab label with optional count and tooltip.
+ */
+function buildTabLabel(
+  label: ReactNode,
+  count?: string,
+  annotation?: DataDictionaryAnnotation
+): ReactElement {
+  return (
+    <Tooltip description={annotation?.description} title={annotation?.label}>
+      <span>{count ? `${label} (${count})` : label}</span>
+    </Tooltip>
+  );
+}

package/src/config/entities.ts

@@ -10,7 +10,12 @@ import {
   TableOptions,
 } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
-import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
+import {
+  DataDictionary,
+  DataDictionaryAnnotation,
+  SelectCategoryValueView,
+  SelectedFilter,
+} from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
@@ -87,6 +92,7 @@ export interface CategoryGroup {
  * Model of category configured in site config.
  */
 export interface CategoryConfig {
+  annotation?: DataDictionaryAnnotation;
   key: string;
   label: string;
   mapSelectCategoryValue?: (
@@ -170,6 +176,7 @@ export type EntityPath = string;
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model is part of a generic array
 export interface EntityConfig<T = any, I = any> extends TabConfig {
+  annotation?: DataDictionaryAnnotation;
   apiPath?: EntityPath;
   categoryGroupConfig?: CategoryGroupConfig;
   detail: BackPageConfig;
@@ -180,6 +187,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
   getId?: GetIdFunction<T>;
   getTitle?: GetTitleFunction<T>;
   hideTabs?: boolean;
+  key?: string; // Optional data dictionary key
   list: ListConfig<T>;
   listView?: ListViewConfig;
   options?: Options;
@@ -366,10 +374,12 @@ export interface SiteConfig {
   categoryGroupConfig?: CategoryGroupConfig;
   contentDir?: string;
   contentThemeOptionsFn?: ThemeOptionsFn;
+  dataDictionary?: DataDictionary;
   dataSource: DataSourceConfig;
   entities: EntityConfig[];
   explorerTitle: HeroTitle;
   export?: ExportConfig;
+  exportsRequireAuth?: boolean;
   exportToTerraUrl?: string; // TODO(cc) revist location; possibly nest inside "export"?
   gitHubUrl?: string;
   layout: {

package/src/hooks/useCategoryFilter.ts

@@ -77,6 +77,7 @@ function buildCategoryView(
   const mapSelectCategoryValue =
     categoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
   return {
+    annotation: categoryConfig?.annotation,
     isDisabled: false,
     key: category.key,
     label: getCategoryLabel(category.key, categoryConfig),

package/src/providers/config.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, ReactNode } from "react";
+import React, { createContext, ReactNode, useState } from "react";
+import { annotateSiteConfig } from "../components/DataDictionary/common/utils";
 import { EntityConfig, SiteConfig } from "../config/entities";
 import {
   getDefaultConfig,
@@ -31,7 +32,14 @@ export function ConfigProvider({
   config,
   entityListType = "",
 }: ConfigProps): JSX.Element {
-  const { entities } = config;
+  // Annote config on init. Note config is mutated but using state here to
+  // ensure annotated config is calculated once and is used rather than the raw config.
+  const [annotatedConfig] = useState(() => {
+    annotateSiteConfig(config);
+    return config;
+  });
+
+  const { entities } = annotatedConfig;
   const defaultEntityListType = config.redirectRootToPath.slice(1);
   const entityName = entityListType || defaultEntityListType;
   const entityConfig = getEntityConfig(entities, entityName);

package/src/providers/loginGuard/common/types.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+/**
+ * A callback function to be stored and then executed upon successful login.
+ */
+export type LoginGuardCallback = () => void;
+
+/**
+ * The shape of the LoginGuard context, provides a function to trigger the
+ * login process.
+ */
+export interface LoginGuardContextProps {
+  requireLogin: (callback?: LoginGuardCallback) => void;
+}
+
+/**
+ * The properties for the LoginGuardProvider component.
+ */
+export interface LoginGuardProviderProps {
+  children: ReactNode;
+}

package/src/providers/loginGuard/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+import { LoginGuardCallback, LoginGuardContextProps } from "./common/types";
+
+/**
+ * LoginGuardContext provides a way to trigger a login process. Default value is to
+ * call the callback immediately, if specified.
+ */
+export const LoginGuardContext = createContext<LoginGuardContextProps>({
+  requireLogin: (callback?: LoginGuardCallback) => {
+    callback?.();
+  },
+});

package/src/providers/loginGuard/hook.ts

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { LoginGuardContextProps } from "./common/types";
+import { LoginGuardContext } from "./context";
+
+/**
+ * Custom hook to access the LoginGuard context. This hook returns an object
+ * containing the "requireLogin" function, which allows triggering the application's
+ * login process.
+ *
+ * @returns The current LoginGuard context value.
+ */
+export function useLoginGuard(): LoginGuardContextProps {
+  return useContext<LoginGuardContextProps>(LoginGuardContext);
+}

package/src/providers/loginGuard/provider.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { LoginDialog } from "../../components/common/LoginDialog/loginDialog";
+import { useAuthenticationConfig } from "../../hooks/authentication/config/useAuthenticationConfig";
+import { useConfig } from "../../hooks/useConfig";
+import { useAuth } from "../authentication/auth/hook";
+import { LoginGuardCallback, LoginGuardProviderProps } from "./common/types";
+import { LoginGuardContext } from "./context";
+
+/**
+ * LoginGuardProvider is responsible for intercepting actions that require user authentication.
+ * It provides a "requireLogin" function via context. When a protected action is triggered while the
+ * user is unauthenticated, the LoginDialog is displayed. Upon successful authentication, the saved
+ * callback is invoked.
+ *
+ * @param {LoginGuardProviderProps} props - The provider props that include children.
+ * @returns The provider component.
+ */
+export function LoginGuardProvider({
+  children,
+}: LoginGuardProviderProps): JSX.Element {
+  // Dialog open state.
+  const [open, setOpen] = useState(false);
+
+  // Use ref to store the callback without triggering re-render.
+  const callbackRef = useRef<LoginGuardCallback | undefined>(undefined);
+
+  // Determine if authentication is enabled.
+  const authConfig = useAuthenticationConfig();
+
+  // Determine if authentication is required for downloads and exports.
+  const {
+    config: { exportsRequireAuth },
+  } = useConfig();
+
+  // Get the user's authenticated state.
+  const {
+    authState: { isAuthenticated },
+  } = useAuth();
+
+  // If the user authenticates, close dialog then fire and clear callback.
+  useEffect(() => {
+    if (isAuthenticated) {
+      setOpen(false);
+      callbackRef.current?.();
+      // Clear callback after firing.
+      callbackRef.current = undefined;
+    }
+  }, [isAuthenticated]);
+
+  // Handler to close the dialog.
+  const onClose = useCallback(() => {
+    setOpen(false);
+    // Clear any stored callback.
+    callbackRef.current = undefined;
+  }, []);
+
+  // Block actions that require authentication, or fire callback if already authenticated.
+  const requireLogin = useCallback(
+    (cb?: LoginGuardCallback) => {
+      if (authConfig && exportsRequireAuth && !isAuthenticated) {
+        callbackRef.current = cb;
+        setOpen(true);
+      } else {
+        cb?.();
+      }
+    },
+    [authConfig, exportsRequireAuth, isAuthenticated]
+  );
+
+  return (
+    <LoginGuardContext.Provider value={{ requireLogin }}>
+      {children}
+      <LoginDialog open={open} onClose={onClose} />
+    </LoginGuardContext.Provider>
+  );
+}

package/src/styles/common/mui/typography.ts

@@ -1,5 +1,13 @@
 import { TypographyOwnProps } from "@mui/material";
 
+export const COLOR: Record<string, TypographyOwnProps["color"]> = {
+  INHERIT: "inherit",
+  INK_LIGHT: "ink.light",
+  INK_MAIN: "ink.main",
+};
+
 export const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   INHERIT: "inherit",
+  TEXT_BODY_400: "text-body-400",
+  TEXT_HEADING_SMALL: "text-heading-small",
 };