@databiosphere/findable-ui 21.2.0 → 21.4.0

package/lib/components/Login/components/Section/components/Consent/types.d.ts

@@ -0,0 +1,6 @@
+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;
+}

package/lib/components/Login/components/Section/components/Consent/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Login/components/Section/components/Warning/warning.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from "@mui/material";
+import { BaseComponentProps } from "../../../../../types";
+export declare const Warning: ({ children, className, ...props }: BaseComponentProps & TypographyProps) => JSX.Element | null;

package/lib/components/Login/components/Section/components/Warning/warning.js

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

package/lib/components/Login/hooks/useUserConsent/types.d.ts

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

package/lib/components/Login/hooks/useUserConsent/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Login/hooks/useUserConsent/useUserConsent.d.ts

@@ -0,0 +1,2 @@
+import { UseUserConsent } from "./types";
+export declare const useUserConsent: () => UseUserConsent;

package/lib/components/Login/hooks/useUserConsent/useUserConsent.js

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

package/lib/components/Login/hooks/useUserLogin/types.d.ts

@@ -0,0 +1,6 @@
+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/lib/components/Login/hooks/useUserLogin/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Login/hooks/useUserLogin/useUserLogin.d.ts

@@ -0,0 +1,2 @@
+import { UseUserLogin } from "./types";
+export declare const useUserLogin: () => UseUserLogin;

package/lib/components/Login/hooks/useUserLogin/useUserLogin.js

@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { useAuth } from "../../../../providers/authentication/auth/hook";
+import { useUserConsent } from "../useUserConsent/useUserConsent";
+export const 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) => {
+        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/lib/components/Table/components/TableHead/tableHead.js

@@ -2,6 +2,7 @@ import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
 import { TableHead as MTableHead, TableRow as MTableRow, TableCell, TableSortLabel, } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
 import React, { Fragment } from "react";
+import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableCellAlign, getTableCellPadding, } from "../TableCell/common/utils";
 import { handleToggleSorting } from "../TableFeatures/RowSorting/utils";
@@ -11,6 +12,8 @@ export const TableHead = ({ rowDirection, tableInstance, }) => {
         tableInstance.getHeaderGroups().map((headerGroup) => (React.createElement(MTableHead, { key: headerGroup.id },
             React.createElement(MTableRow, null, headerGroup.headers.map(({ column, getContext, id }) => {
                 const { columnDef, getIsGrouped, getIsSorted } = column;
-                return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext()))));
+                const annotation = columnDef.meta?.annotation;
+                return getIsGrouped() ? null : (React.createElement(TableCell, { key: id, align: getTableCellAlign(column), padding: getTableCellPadding(id) },
+                    React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label }, shouldSortColumn(tableInstance, column) ? (React.createElement(TableSortLabel, { IconComponent: SouthRoundedIcon, active: Boolean(getIsSorted()), direction: getIsSorted() || undefined, disabled: isSortDisabled(tableInstance), onClick: (mouseEvent) => handleToggleSorting(mouseEvent, tableInstance, column) }, flexRender(columnDef.header, getContext()))) : (flexRender(columnDef.header, getContext())))));
             })))))));
 };

package/lib/components/common/CustomIcon/components/CloseIcon/closeIcon.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const CloseIcon: ({ fontSize, viewBox, ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/CustomIcon/components/CloseIcon/closeIcon.js

@@ -0,0 +1,6 @@
+import { SvgIcon } 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". */ }) => {
+    return (React.createElement(SvgIcon, { fontSize: fontSize, viewBox: viewBox, ...props },
+        React.createElement("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" })));
+};

package/lib/components/common/LoginDialog/constants.d.ts

@@ -0,0 +1,6 @@
+import { DialogContentTextProps, DialogProps, DialogTitleProps, IconButtonProps, IconProps } from "@mui/material";
+export declare const DIALOG_CONTENT_TEXT_PROPS: DialogContentTextProps;
+export declare const DIALOG_PROPS: Partial<DialogProps>;
+export declare const DIALOG_TITLE_PROPS: DialogTitleProps;
+export declare const ICON_BUTTON_PROPS: IconButtonProps;
+export declare const ICON_PROPS: Pick<IconProps, "fontSize">;

package/lib/components/common/LoginDialog/constants.js

@@ -0,0 +1,21 @@
+import { FONT_SIZE } from "../../../styles/common/mui/icon";
+import { COLOR, VARIANT } from "../../../styles/common/mui/typography";
+export const DIALOG_CONTENT_TEXT_PROPS = {
+    color: COLOR.INK_LIGHT,
+    component: "div",
+    variant: VARIANT.TEXT_BODY_400,
+};
+export const DIALOG_PROPS = {
+    PaperProps: { elevation: 0 },
+};
+export const DIALOG_TITLE_PROPS = {
+    variant: VARIANT.TEXT_HEADING_SMALL,
+};
+export const ICON_BUTTON_PROPS = {
+    color: "inkLight",
+    edge: "end",
+    size: "xsmall",
+};
+export const ICON_PROPS = {
+    fontSize: FONT_SIZE.SMALL,
+};

package/lib/components/common/LoginDialog/loginDialog.d.ts

@@ -0,0 +1,2 @@
+import { LoginDialogProps } from "./types";
+export declare const LoginDialog: ({ onClose, open, }: LoginDialogProps) => JSX.Element | null;

package/lib/components/common/LoginDialog/loginDialog.js

@@ -0,0 +1,27 @@
+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";
+export const LoginDialog = ({ onClose, open, }) => {
+    const authConfig = useAuthenticationConfig();
+    const { consentState, handleConsent, handleLogin } = useUserLogin();
+    if (!authConfig)
+        return null;
+    return (React.createElement(StyledDialog, { ...DIALOG_PROPS, onClose: onClose, open: open },
+        React.createElement(DialogTitle, { ...DIALOG_TITLE_PROPS },
+            React.createElement("div", null, "Sign In Required"),
+            React.createElement(IconButton, { ...ICON_BUTTON_PROPS, onClick: onClose },
+                React.createElement(CloseIcon, { ...ICON_PROPS }))),
+        React.createElement(DialogContent, null,
+            React.createElement(DialogContentText, { ...DIALOG_CONTENT_TEXT_PROPS }, "Please sign in to proceed with this action."),
+            React.createElement(Consent, { handleConsent: handleConsent, ...consentState }, authConfig.termsOfService)),
+        React.createElement(DialogActions, { disableSpacing: true },
+            React.createElement(Buttons, { handleLogin: handleLogin, providers: authConfig.providers })),
+        React.createElement(Warning, null, authConfig.warning)));
+};

package/lib/components/common/LoginDialog/loginDialog.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledDialog: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/LoginDialog/loginDialog.styles.js

@@ -0,0 +1,50 @@
+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/lib/components/common/LoginDialog/types.d.ts

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

package/lib/components/common/LoginDialog/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/common/Tabs/tabs.d.ts

@@ -1,9 +1,11 @@
 import { TabProps as MTabProps, TabsProps as MTabsProps } from "@mui/material";
 import { ReactNode } from "react";
+import { DataDictionaryAnnotation } from "../../../common/entities";
 export type TabsValue = MTabsProps["value"];
 export type TabValue = MTabProps["value"];
 export type OnTabChangeFn = (tabValue: TabValue) => void;
 export interface Tab {
+    annotation?: DataDictionaryAnnotation;
     count?: string;
     icon?: MTabProps["icon"];
     iconPosition?: MTabProps["iconPosition"];

package/lib/components/common/Tabs/tabs.js

@@ -1,6 +1,19 @@
 import { Tabs as MTabs, } from "@mui/material";
 import React from "react";
+import { Tooltip } from "../../DataDictionary/components/Tooltip/tooltip";
 import { Tab, TabScrollFuzz } from "./tabs.styles";
 export const Tabs = ({ className, onTabChange, tabs, value, }) => {
-    return (React.createElement(MTabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: TabScrollFuzz, value: value }, tabs.map(({ count, icon, iconPosition = "start", label, value: tabValue }, t) => (React.createElement(Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: count ? `${label} (${count})` : label, value: tabValue })))));
+    return (React.createElement(MTabs, { allowScrollButtonsMobile: true, className: className, onChange: (_, tabValue) => onTabChange(tabValue), ScrollButtonComponent: TabScrollFuzz, value: value }, tabs.map(({ annotation, count, icon, iconPosition = "start", label, value: tabValue, }, t) => (React.createElement(Tab, { icon: icon, iconPosition: icon ? iconPosition : undefined, key: `${label}${t}`, label: buildTabLabel(label, count, annotation), value: tabValue })))));
 };
+/**
+ * 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, count, annotation) {
+    return (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
+        React.createElement("span", null, count ? `${label} (${count})` : label)));
+}

package/lib/config/entities.d.ts

@@ -1,7 +1,7 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, 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";
@@ -70,6 +70,7 @@ export interface CategoryGroup {
  * Model of category configured in site config.
  */
 export interface CategoryConfig {
+    annotation?: DataDictionaryAnnotation;
     key: string;
     label: string;
     mapSelectCategoryValue?: (selectCategoryValue: SelectCategoryValueView) => SelectCategoryValueView;
@@ -127,6 +128,7 @@ export type EntityPath = string;
  * the detail and the list page configuration.
  */
 export interface EntityConfig<T = any, I = any> extends TabConfig {
+    annotation?: DataDictionaryAnnotation;
     apiPath?: EntityPath;
     categoryGroupConfig?: CategoryGroupConfig;
     detail: BackPageConfig;
@@ -137,6 +139,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
     hideTabs?: boolean;
+    key?: string;
     list: ListConfig<T>;
     listView?: ListViewConfig;
     options?: Options;
@@ -295,10 +298,12 @@ export interface SiteConfig {
     categoryGroupConfig?: CategoryGroupConfig;
     contentDir?: string;
     contentThemeOptionsFn?: ThemeOptionsFn;
+    dataDictionary?: DataDictionary;
     dataSource: DataSourceConfig;
     entities: EntityConfig[];
     explorerTitle: HeroTitle;
     export?: ExportConfig;
+    exportsRequireAuth?: boolean;
     exportToTerraUrl?: string;
     gitHubUrl?: string;
     layout: {

package/lib/hooks/useCategoryFilter.js

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

package/lib/providers/config.js

@@ -1,4 +1,5 @@
-import React, { createContext } from "react";
+import React, { createContext, useState } from "react";
+import { annotateSiteConfig } from "../components/DataDictionary/common/utils";
 import { getDefaultConfig, getDefaultEntityConfig, getEntityConfig, } from "../config/utils";
 export const ConfigContext = createContext({
     config: getDefaultConfig(),
@@ -7,7 +8,13 @@ export const ConfigContext = createContext({
     entityListType: "",
 });
 export function ConfigProvider({ children, config, entityListType = "", }) {
-    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/lib/providers/loginGuard/common/types.d.ts

@@ -0,0 +1,18 @@
+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/lib/providers/loginGuard/common/types.js

@@ -0,0 +1 @@
+export {};

package/lib/providers/loginGuard/context.d.ts

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

package/lib/providers/loginGuard/context.js

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

package/lib/providers/loginGuard/hook.d.ts

@@ -0,0 +1,9 @@
+import { LoginGuardContextProps } from "./common/types";
+/**
+ * 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 declare function useLoginGuard(): LoginGuardContextProps;

package/lib/providers/loginGuard/hook.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+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() {
+    return useContext(LoginGuardContext);
+}

package/lib/providers/loginGuard/provider.d.ts

@@ -0,0 +1,11 @@
+import { LoginGuardProviderProps } from "./common/types";
+/**
+ * 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 declare function LoginGuardProvider({ children, }: LoginGuardProviderProps): JSX.Element;

package/lib/providers/loginGuard/provider.js

@@ -0,0 +1,55 @@
+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 { 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, }) {
+    // Dialog open state.
+    const [open, setOpen] = useState(false);
+    // Use ref to store the callback without triggering re-render.
+    const callbackRef = useRef(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) => {
+        if (authConfig && exportsRequireAuth && !isAuthenticated) {
+            callbackRef.current = cb;
+            setOpen(true);
+        }
+        else {
+            cb?.();
+        }
+    }, [authConfig, exportsRequireAuth, isAuthenticated]);
+    return (React.createElement(LoginGuardContext.Provider, { value: { requireLogin } },
+        children,
+        React.createElement(LoginDialog, { open: open, onClose: onClose })));
+}

package/lib/styles/common/mui/typography.d.ts

@@ -1,2 +1,3 @@
 import { TypographyOwnProps } from "@mui/material";
+export declare const COLOR: Record<string, TypographyOwnProps["color"]>;
 export declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;

package/lib/styles/common/mui/typography.js

@@ -1,3 +1,10 @@
+export const COLOR = {
+    INHERIT: "inherit",
+    INK_LIGHT: "ink.light",
+    INK_MAIN: "ink.main",
+};
 export const VARIANT = {
     INHERIT: "inherit",
+    TEXT_BODY_400: "text-body-400",
+    TEXT_HEADING_SMALL: "text-heading-small",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "21.2.0",
+  "version": "21.4.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/entities.ts

@@ -1,3 +1,12 @@
+/**
+ * Model of a value of a metadata class.
+ */
+export interface Attribute {
+  description: string;
+  key: string;
+  label: string;
+}
+
 /**
  * Filterable metadata keys.
  */
@@ -12,11 +21,38 @@ export interface CategoryTag {
   superseded: boolean;
 }
 
+/**
+ * Model of a metadata class, to be specified manually or built from LinkML schema.
+ */
+export interface Class {
+  attributes: Attribute[];
+  description: string;
+  key: string;
+  label: string;
+  name: string;
+}
+
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
 export type CategoryValueKey = unknown;
 
+/**
+ * Model of a metadata dictionary containing a set of classes and their definitions.
+ */
+export interface DataDictionary {
+  classes: Class[];
+}
+
+/**
+ * Label and description values from a data dictionary that are added to a site
+ * config value.
+ */
+export interface DataDictionaryAnnotation {
+  description: string;
+  label: string;
+}
+
 /**
  * Set of selected category values.
  */
@@ -72,6 +108,7 @@ export interface SelectCategoryValueView {
  * View model of category, for multiselect categories.
  */
 export interface SelectCategoryView {
+  annotation?: DataDictionaryAnnotation;
   isDisabled?: boolean;
   key: CategoryKey;
   label: string;