@databiosphere/findable-ui 21.3.0 → 21.4.0

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/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/config/entities.ts

@@ -379,6 +379,7 @@ export interface SiteConfig {
   entities: EntityConfig[];
   explorerTitle: HeroTitle;
   export?: ExportConfig;
+  exportsRequireAuth?: boolean;
   exportToTerraUrl?: string; // TODO(cc) revist location; possibly nest inside "export"?
   gitHubUrl?: string;
   layout: {

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",
 };

package/tests/provider.test.tsx

@@ -0,0 +1,191 @@
+import { jest } from "@jest/globals";
+import { act, render, screen } from "@testing-library/react";
+import React from "react";
+import { LoginGuardContext } from "../src/providers/loginGuard/context";
+
+jest.unstable_mockModule("../src/hooks/useConfig", () => ({
+  useConfig: jest.fn(),
+}));
+
+jest.unstable_mockModule("../src/providers/authentication/auth/hook", () => ({
+  useAuth: jest.fn(),
+}));
+
+jest.unstable_mockModule(
+  "../src/hooks/authentication/config/useAuthenticationConfig",
+  () => ({
+    useAuthenticationConfig: jest.fn(),
+  })
+);
+
+const TEST_ID_LOGIN_DIALOG = "login-dialog";
+const TEXT_DIALOG_CLOSED = "closed";
+const TEXT_DIALOG_OPEN = "open";
+jest.unstable_mockModule(
+  "../src/components/common/LoginDialog/loginDialog",
+  () => ({
+    LoginDialog: ({ open }: { open: boolean }): JSX.Element => (
+      <div data-testid={TEST_ID_LOGIN_DIALOG}>
+        {open ? TEXT_DIALOG_OPEN : TEXT_DIALOG_CLOSED}
+      </div>
+    ),
+  })
+);
+
+const { useConfig } = await import("../src/hooks/useConfig");
+const { useAuth } = await import("../src/providers/authentication/auth/hook");
+const { useAuthenticationConfig } = await import(
+  "../src/hooks/authentication/config/useAuthenticationConfig"
+);
+
+const { LoginGuardProvider } = await import(
+  "../src/providers/loginGuard/provider"
+);
+
+const TEXT_BUTTON_EXPORT = "export";
+
+describe("LoginGuardProvider", () => {
+  beforeEach(() => {
+    // Mock hooks used by login guard.
+    (useConfig as jest.Mock).mockReturnValue({
+      config: {
+        exportsRequireAuth: true,
+      },
+    });
+    (useAuth as jest.Mock).mockReturnValue({
+      authState: {
+        isAuthenticated: false,
+      },
+    });
+    (useAuthenticationConfig as jest.Mock).mockReturnValue({});
+  });
+
+  it("should render children and login dialog closed", () => {
+    render(
+      <LoginGuardProvider>
+        <div data-testid="child">child component</div>
+      </LoginGuardProvider>
+    );
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_CLOSED
+    );
+  });
+
+  it("calls callback immediately if user is authenticated", () => {
+    const callback = jest.fn();
+
+    // Simulate user authentication.
+    (useAuth as jest.Mock).mockReturnValue({
+      authState: { isAuthenticated: true },
+    });
+
+    render(
+      <LoginGuardProvider>
+        <LoginGuardContext.Consumer>
+          {({ requireLogin }) => (
+            <button onClick={() => requireLogin(callback)}>
+              {TEXT_BUTTON_EXPORT}
+            </button>
+          )}
+        </LoginGuardContext.Consumer>
+      </LoginGuardProvider>
+    );
+
+    // Click button requiring login.
+    act(() => {
+      screen.getByText(TEXT_BUTTON_EXPORT).click();
+    });
+
+    // User is authenticated; callback should be fired immediately.
+    expect(callback).toHaveBeenCalled();
+
+    // Login dialog should not be open.
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_CLOSED
+    );
+  });
+
+  it("calls callback immediately if exportsRequireAuth is false", () => {
+    const callback = jest.fn();
+
+    // Simulate exportsRequireAuth being false.
+    (useConfig as jest.Mock).mockReturnValue({
+      config: {
+        exportsRequireAuth: false,
+      },
+    });
+
+    render(
+      <LoginGuardProvider>
+        <LoginGuardContext.Consumer>
+          {({ requireLogin }) => (
+            <button onClick={() => requireLogin(callback)}>
+              {TEXT_BUTTON_EXPORT}
+            </button>
+          )}
+        </LoginGuardContext.Consumer>
+      </LoginGuardProvider>
+    );
+
+    // Click button requiring login.
+    act(() => {
+      screen.getByText(TEXT_BUTTON_EXPORT).click();
+    });
+
+    // exportsRequireAuth is false; callback should be fired immediately.
+    expect(callback).toHaveBeenCalled();
+
+    // Login dialog should not be open.
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_CLOSED
+    );
+  });
+
+  it("should call callback after user authenticates", async () => {
+    const callback = jest.fn();
+
+    const { rerender } = render(
+      <LoginGuardProvider>
+        <LoginGuardContext.Consumer>
+          {({ requireLogin }) => (
+            <button onClick={() => requireLogin(callback)}>
+              {TEXT_BUTTON_EXPORT}
+            </button>
+          )}
+        </LoginGuardContext.Consumer>
+      </LoginGuardProvider>
+    );
+
+    // Click button requiring login.
+    act(() => {
+      screen.getByText(TEXT_BUTTON_EXPORT).click();
+    });
+
+    // User is not authenticated; callback should not have been called.
+    expect(callback).not.toHaveBeenCalled();
+
+    // User is not authenticated; login dialog should be open.
+    expect(screen.getByTestId(TEST_ID_LOGIN_DIALOG).textContent).toBe(
+      TEXT_DIALOG_OPEN
+    );
+
+    // Simulate user authentication.
+    await act(async () => {
+      (useAuth as jest.Mock).mockReturnValue({
+        authState: { isAuthenticated: true },
+      });
+    });
+
+    // Rerender to trigger useEffect.
+    rerender(
+      <LoginGuardProvider>
+        <div />
+      </LoginGuardProvider>
+    );
+
+    // Callback should be called (in useEffect called on re-render).
+    expect(callback).toHaveBeenCalled();
+  });
+});