@databiosphere/findable-ui 21.3.0 → 21.4.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.3.0"
+  ".": "21.4.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [21.4.0](https://github.com/DataBiosphere/findable-ui/compare/v21.3.0...v21.4.0) (2025-02-28)
+
+
+### Features
+
+* added check login required for export/download [#283](https://github.com/DataBiosphere/findable-ui/issues/283) ([#324](https://github.com/DataBiosphere/findable-ui/issues/324)) ([badb6ab](https://github.com/DataBiosphere/findable-ui/commit/badb6abe9319625a7fdabfe290434a05115cc2a9))
+* use anchor tags for all header and footer links ([#297](https://github.com/DataBiosphere/findable-ui/issues/297)) ([#322](https://github.com/DataBiosphere/findable-ui/issues/322)) ([95effbf](https://github.com/DataBiosphere/findable-ui/commit/95effbfcdb65d71d10141c287b34043086c261e5))
+
 ## [21.3.0](https://github.com/DataBiosphere/findable-ui/compare/v21.2.0...v21.3.0) (2025-02-14)
 
 

package/lib/components/Export/components/ExportForm/components/ExportButton/exportButton.js

@@ -2,12 +2,17 @@ import { Tooltip } from "@mui/material";
 import React 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 const ExportButton = ({ Button = ButtonPrimary, children, onClick, }) => {
     const downloadStatus = useDownloadStatus();
     const { fileManifestState: { isLoading }, } = useFileManifestState();
+    // Prompt user for login before export, if required.
+    const { requireLogin } = useLoginGuard();
     return (React.createElement(Tooltip, { arrow: true, title: isLoading ? null : downloadStatus.message },
         React.createElement("span", null,
-            React.createElement(Button, { disabled: isLoading || downloadStatus.disabled || downloadStatus.isLoading, onClick: onClick },
+            React.createElement(Button, { disabled: isLoading || downloadStatus.disabled || downloadStatus.isLoading, onClick: () => {
+                    requireLogin(onClick);
+                } },
                 React.createElement("span", null, children)))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.js

@@ -3,6 +3,7 @@ import copy from "copy-to-clipboard";
 import React, { useRef } from "react";
 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 { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
@@ -16,6 +17,8 @@ export const FileManifestDownload = ({ filters, }) => {
     const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(filters, disabled);
     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) => {
         if (!url)
@@ -39,8 +42,8 @@ export const FileManifestDownload = ({ filters, }) => {
                                 React.createElement(Tooltip, { arrow: true, title: message },
                                     React.createElement("span", null,
                                         React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: downloadManifestURL }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => copyManifestURL(manifestURL) }),
+                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: () => requireLogin(downloadManifestURL) }),
+                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => requireLogin(() => copyManifestURL(manifestURL)) }),
                                             ] })))),
                             React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The manifest is not available for this project.")))))))));
 };

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.js

@@ -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";
@@ -11,6 +12,8 @@ export const AzulFileDownload = ({ entityName, relatedEntityId, relatedEntityNam
     const { fileUrl, isLoading, run } = useFileLocation(url);
     const downloadRef = useRef(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)
@@ -22,11 +25,13 @@ export const AzulFileDownload = ({ entityName, relatedEntityId, relatedEntityNam
         downloadEl.click();
         setIsRequestPending(false);
     }, [fileUrl]);
+    // Initiates file download when download button is clicked.
+    const handleDownloadClick = () => {
+        setIsRequestPending(true);
+        trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
+        run();
+    };
     return (React.createElement(Fragment, null,
-        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => {
-                setIsRequestPending(true);
-                trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-                run();
-            }, size: "medium" })),
+        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => requireLogin(handleDownloadClick), size: "medium" })),
         React.createElement(Box, { component: "a", "data-testid": AZUL_FILE_DOWNLOAD_TEST_ID, download: true, ref: downloadRef, sx: { display: "none" } })));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -26,7 +26,7 @@ export const NavigationMenu = ({ closeAncestor, isSelected = false, isSubMenu =
             } },
             React.createElement(MPaper, { variant: "menu" },
                 React.createElement(MClickAwayListener, { onClickAway: onClose },
-                    React.createElement(MMenuList, null,
+                    React.createElement(MMenuList, { component: "div" },
                         React.createElement(NavigationMenuItems, { closeMenu: () => {
                                 onClose();
                                 closeAncestor?.();

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -1,5 +1,5 @@
-import { Divider, ListItemIcon, ListItemText, MenuItem as MMenuItem, } from "@mui/material";
-import { useRouter } from "next/router";
+import { Divider, ListItemIcon, ListItemText, Link as MLink, MenuItem as MMenuItem, } from "@mui/material";
+import Link from "next/link";
 import React, { Fragment } from "react";
 import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, TEXT_UPPERCASE_500, } from "../../../../../../../../../../theme/common/typography";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
@@ -8,23 +8,22 @@ import { isNavigationLinkSelected } from "../../common/utils";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 import { POPPER_PROPS } from "./common/constants";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
-    const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
-        React.createElement(MMenuItem, { disabled: !url, onClick: () => {
-                closeMenu();
-                isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, selected: isNavigationLinkSelected(pathname, selectedPatterns) },
-            icon && React.createElement(ListItemIcon, null, icon),
-            React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
-                    variant: url
-                        ? description
-                            ? TEXT_BODY_500
-                            : TEXT_BODY_400
-                        : TEXT_UPPERCASE_500,
-                }, secondary: description, secondaryTypographyProps: {
-                    variant: TEXT_BODY_SMALL_400_2_LINES,
-                } })),
-        divider && React.createElement(Divider, null))))));
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => {
+        const isClientSide = isClientSideNavigation(url);
+        return nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
+            React.createElement(MMenuItem, { component: isClientSide ? Link : MLink, disabled: !url, href: url, onClick: () => closeMenu(), rel: isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, selected: isNavigationLinkSelected(pathname, selectedPatterns), target: target },
+                icon && React.createElement(ListItemIcon, null, icon),
+                React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
+                        variant: url
+                            ? description
+                                ? TEXT_BODY_500
+                                : TEXT_BODY_400
+                            : TEXT_UPPERCASE_500,
+                    }, secondary: description, secondaryTypographyProps: {
+                        variant: TEXT_BODY_SMALL_400_2_LINES,
+                    } })),
+            divider && React.createElement(Divider, null)));
+    })));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/constants.d.ts

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

package/lib/components/Layout/components/Header/components/Content/components/Navigation/constants.js

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

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { TestIdProps } from "../../../../../../../types";
 import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
@@ -15,7 +16,7 @@ export interface NavLinkItem {
     url: string;
     visible?: Partial<Record<BreakpointKey, boolean>>;
 }
-export interface NavigationProps {
+export interface NavigationProps extends TestIdProps {
     className?: string;
     closeAncestor?: () => void;
     headerProps?: HeaderProps;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.js

@@ -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, { forwardRef, Fragment } from "react";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
@@ -8,19 +8,18 @@ import { NavigationButtonLabel } from "./components/NavigationButtonLabel/naviga
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { Navigation as Links } from "./navigation.styles";
-export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, }, ref) {
-    const router = useRouter();
-    return (React.createElement(Links, { ref: ref, className: className, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => menuItems ? (React.createElement(Fragment, { key: i },
-        isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
-        divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
-        React.createElement(Button, { disabled: !url, onClick: () => {
-                closeAncestor?.();
-                isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, variant: isNavigationLinkSelected(pathname, selectedPatterns)
-                ? "activeNav"
-                : "nav" },
-            React.createElement(NavigationButtonLabel, { label: label })),
-        divider && React.createElement(Divider, null))))));
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, testId, }, ref) {
+    return (React.createElement(Links, { ref: ref, className: className, "data-testid": testId, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => {
+        const isClientSide = isClientSideNavigation(url);
+        return menuItems ? (React.createElement(Fragment, { key: i },
+            isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
+            divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
+            React.createElement(Button, { component: isClientSide ? Link : MLink, disabled: !url, href: url, onClick: () => closeAncestor?.(), rel: isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target, variant: isNavigationLinkSelected(pathname, selectedPatterns)
+                    ? "activeNav"
+                    : "nav" },
+                React.createElement(NavigationButtonLabel, { label: label })),
+            divider && React.createElement(Divider, null)));
+    })));
 });

package/lib/components/Layout/components/Header/header.js

@@ -7,6 +7,7 @@ import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication, renderButton as renderAuthenticationButton, renderIconButton as renderAuthenticationIconButton, } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { renderButton as renderSearchButton, 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";
@@ -38,7 +39,7 @@ export const Header = ({ ...headerProps }) => {
                     isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
                     isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsL })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
-                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsC })))),
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, testId: NAVIGATION_TEST_ID, links: navItemsC })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
                 React.createElement(Right, null,
                     isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsR })),

package/lib/components/Login/components/Button/types.d.ts

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

package/lib/components/Login/components/Buttons/buttons.d.ts

@@ -0,0 +1,2 @@
+import { Props } from "./types";
+export declare const Buttons: <P>({ className, handleLogin, providers, ...props }: Props<P>) => JSX.Element[];

package/lib/components/Login/components/Buttons/buttons.js

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

package/lib/components/Login/components/Buttons/types.d.ts

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

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

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

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from "../../../../../types";
+import { ConsentProps } from "./types";
+export declare const Consent: ({ children, className, handleConsent, isDisabled, isError, ...props }: BaseComponentProps & ConsentProps) => JSX.Element | null;

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

@@ -0,0 +1,14 @@
+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 { StyledGrid2 } from "./consent.styles";
+export const Consent = ({ children, className, handleConsent, isDisabled, isError, ...props /* Mui Grid2Props */ }) => {
+    if (isDisabled)
+        return null;
+    return (React.createElement(StyledGrid2, { className: className, ...props },
+        React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleConsent }),
+        React.createElement(Typography, { variant: TEXT_BODY_400 }, children)));
+};

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledGrid2: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, ("fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.styles.js

@@ -0,0 +1,14 @@
+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/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/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/config/entities.d.ts

@@ -303,6 +303,7 @@ export interface SiteConfig {
     entities: EntityConfig[];
     explorerTitle: HeroTitle;
     export?: ExportConfig;
+    exportsRequireAuth?: boolean;
     exportToTerraUrl?: string;
     gitHubUrl?: string;
     layout: {