@databiosphere/findable-ui 19.0.0 → 20.0.0

package/lib/hooks/useAuthentication/useTokenClient.js

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-import { useAuthenticationConfig } from "../useAuthenticationConfig";
-/**
- * Initializes the token client, sets token from token client callback.
- * @returns initialized token client.
- */
-export const useTokenClient = () => {
-    const [token, setToken] = useState();
-    const [tokenClient, setTokenClient] = useState();
-    const authenticationConfig = useAuthenticationConfig();
-    const { googleGISAuthConfig: { clientId, scope } = {} } = authenticationConfig;
-    // Initializes token client - (authorization client id must be configured).
-    useEffect(() => {
-        if (clientId) {
-            setTokenClient(google.accounts.oauth2.initTokenClient({
-                callback: (tokenResponse) => {
-                    const access_token = tokenResponse.access_token;
-                    setToken(access_token);
-                },
-                client_id: clientId,
-                scope,
-            }));
-        }
-    }, [clientId, scope]);
-    return {
-        token,
-        tokenClient,
-    };
-};

package/lib/hooks/useAuthenticationConfig.d.ts

@@ -1,6 +0,0 @@
-import { AuthenticationConfig } from "../config/entities";
-/**
- * Hook to get the authentication config
- * @returns @see AuthenticationConfig used in the current config.
- */
-export declare const useAuthenticationConfig: () => AuthenticationConfig;

package/lib/hooks/useAuthenticationConfig.js

@@ -1,14 +0,0 @@
-import { useConfig } from "./useConfig";
-/**
- * Hook to get the authentication config
- * @returns @see AuthenticationConfig used in the current config.
- */
-export const useAuthenticationConfig = () => {
-    const { config } = useConfig();
-    if (!config.authentication) {
-        return {
-            title: "",
-        };
-    }
-    return config.authentication;
-};

package/lib/providers/authentication.d.ts

@@ -1,51 +0,0 @@
-import React, { ReactNode } from "react";
-import { AUTHENTICATION_STATUS, LoginStatus } from "../hooks/useAuthentication/common/entities";
-import { UserProfile } from "../hooks/useAuthentication/useFetchGoogleProfile";
-import { TerraNIHResponse } from "../hooks/useAuthentication/useFetchTerraNIHProfile";
-import { TerraResponse } from "../hooks/useAuthentication/useFetchTerraProfile";
-import { TerraTermsOfServiceResponse } from "../hooks/useAuthentication/useFetchTerraTermsOfService";
-export declare const ROUTE_LOGIN = "/login";
-type AuthenticateUserFn = () => void;
-type RequestAuthenticationFn = () => void;
-/**
- * Model of authentication context.
- */
-export interface AuthContextProps {
-    authenticateUser: AuthenticateUserFn;
-    authenticationStatus: AUTHENTICATION_STATUS;
-    isAuthenticated: boolean;
-    isEnabled: boolean;
-    requestAuthentication: RequestAuthenticationFn;
-    terraNIHProfileLoginStatus: LoginStatus<TerraNIHResponse>;
-    terraProfileLoginStatus: LoginStatus<TerraResponse>;
-    terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>;
-    token?: string;
-    userProfile?: UserProfile;
-}
-/**
- * Auth context for storing and using auth-related state.
- */
-export declare const AuthContext: React.Context<AuthContextProps>;
-interface Props {
-    children: ReactNode | ReactNode[];
-    sessionTimeout?: number;
-}
-/**
- * Auth provider for consuming components to subscribe to changes in auth-related state.
- * @param props - Component inputs.
- * @param props.children - Set of children components that can possibly consume the query provider.
- * @param props.sessionTimeout - If provided, will set the value for a session timeout (in milliseconds).
- * @returns Provider element to be used by consumers to both update authentication state and subscribe to changes in authentication state.
- */
-export declare function AuthProvider({ children, sessionTimeout }: Props): JSX.Element;
-/**
- * Token is released for the following conditions:
- * - Terra endpoint is configured and the terms of service response is successful, or
- * - Terra endpoint is not configured and the user profile response is successful.
- * @param userProfileLoginStatus - User profile login status.
- * @param terraProfileLoginStatus - Terra profile login status.
- * @param terraTOSLoginStatus - Terra terms of service login status.
- * @returns true if the token should be released.
- */
-export declare function shouldReleaseToken(userProfileLoginStatus: LoginStatus<UserProfile>, terraProfileLoginStatus: LoginStatus<TerraResponse>, terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>): boolean;
-export {};

package/lib/providers/authentication.js

@@ -1,110 +0,0 @@
-import Router, { useRouter } from "next/router";
-import React, { createContext, useCallback } from "react";
-import { useIdleTimer } from "react-idle-timer";
-import { LOGIN_STATUS_NOT_STARTED } from "../hooks/useAuthentication/common/constants";
-import { AUTHENTICATION_STATUS, } from "../hooks/useAuthentication/common/entities";
-import { useAuthenticationComplete } from "../hooks/useAuthentication/useAuthenticationComplete";
-import { useAuthenticationStatus } from "../hooks/useAuthentication/useAuthenticationStatus";
-import { useFetchGoogleProfile, } from "../hooks/useAuthentication/useFetchGoogleProfile";
-import { useFetchTerraNIHProfile, } from "../hooks/useAuthentication/useFetchTerraNIHProfile";
-import { useFetchTerraProfile, } from "../hooks/useAuthentication/useFetchTerraProfile";
-import { useFetchTerraTermsOfService, } from "../hooks/useAuthentication/useFetchTerraTermsOfService";
-import { useTokenClient } from "../hooks/useAuthentication/useTokenClient";
-import { useConfig } from "../hooks/useConfig";
-import { INACTIVITY_PARAM } from "../hooks/useSessionTimeout";
-// Template constants
-export const ROUTE_LOGIN = "/login";
-/**
- * Auth context for storing and using auth-related state.
- */
-export const AuthContext = createContext({
-    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
-    authenticateUser: () => { },
-    authenticationStatus: AUTHENTICATION_STATUS.INCOMPLETE,
-    isAuthenticated: false,
-    isEnabled: false,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
-    requestAuthentication: () => { },
-    terraNIHProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,
-    terraProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,
-    terraTOSLoginStatus: LOGIN_STATUS_NOT_STARTED,
-    token: undefined,
-    userProfile: undefined,
-});
-/**
- * Auth provider for consuming components to subscribe to changes in auth-related state.
- * @param props - Component inputs.
- * @param props.children - Set of children components that can possibly consume the query provider.
- * @param props.sessionTimeout - If provided, will set the value for a session timeout (in milliseconds).
- * @returns Provider element to be used by consumers to both update authentication state and subscribe to changes in authentication state.
- */
-export function AuthProvider({ children, sessionTimeout }) {
-    const { config } = useConfig();
-    const { authentication, redirectRootToPath } = config;
-    const { basePath } = useRouter();
-    const { token, tokenClient } = useTokenClient();
-    const terraNIHProfileLoginStatus = useFetchTerraNIHProfile(token);
-    const terraProfileLoginStatus = useFetchTerraProfile(token);
-    const terraTOSLoginStatus = useFetchTerraTermsOfService(token);
-    const userProfileLoginStatus = useFetchGoogleProfile(token);
-    const isEnabled = Boolean(authentication);
-    const isAuthenticated = userProfileLoginStatus.isSuccess;
-    const releaseToken = shouldReleaseToken(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus);
-    const authenticationStatus = useAuthenticationStatus(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus, terraNIHProfileLoginStatus);
-    // Handle completion of authentication process.
-    useAuthenticationComplete(authenticationStatus);
-    /**
-     * If sessionTimeout is set and user is authenticated, the app will reload and redirect to
-     * origin, including base path, root path, and query param.
-     */
-    useIdleTimer({
-        onIdle: () => isAuthenticated &&
-            sessionTimeout &&
-            (window.location.href =
-                window.location.origin +
-                    basePath +
-                    redirectRootToPath +
-                    "?" +
-                    `${INACTIVITY_PARAM}=true`),
-        timeout: sessionTimeout,
-    });
-    /**
-     * Requests access token and authenticates user.
-     */
-    const authenticateUser = useCallback(() => {
-        tokenClient.requestAccessToken();
-    }, [tokenClient]);
-    /**
-     * Navigates to login page.
-     */
-    const requestAuthentication = useCallback(() => {
-        Router.push(ROUTE_LOGIN);
-    }, []);
-    return (React.createElement(AuthContext.Provider, { value: {
-            authenticateUser,
-            authenticationStatus,
-            isAuthenticated,
-            isEnabled,
-            requestAuthentication,
-            terraNIHProfileLoginStatus,
-            terraProfileLoginStatus,
-            terraTOSLoginStatus,
-            token: releaseToken ? token : undefined,
-            userProfile: userProfileLoginStatus.response,
-        } }, children));
-}
-/**
- * Token is released for the following conditions:
- * - Terra endpoint is configured and the terms of service response is successful, or
- * - Terra endpoint is not configured and the user profile response is successful.
- * @param userProfileLoginStatus - User profile login status.
- * @param terraProfileLoginStatus - Terra profile login status.
- * @param terraTOSLoginStatus - Terra terms of service login status.
- * @returns true if the token should be released.
- */
-export function shouldReleaseToken(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus) {
-    if (terraProfileLoginStatus.isSupported) {
-        return terraTOSLoginStatus.isSuccess;
-    }
-    return userProfileLoginStatus.isSuccess;
-}

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.tsx

@@ -1,35 +0,0 @@
-import { Meta, StoryFn } from "@storybook/react";
-import React from "react";
-import { AuthenticationMenu } from "./authenticationMenu";
-
-export default {
-  argTypes: {
-    onLogout: {
-      description: "Callback to be called when 'Logout' button is clicked",
-    },
-    userProfile: {
-      description: "User profile with name and avatar",
-    },
-  },
-  component: AuthenticationMenu,
-  title: "Components/Navigation/AuthenticationMenu",
-} as Meta<typeof AuthenticationMenu>;
-
-const AuthenticationMenuTemplate: StoryFn<typeof AuthenticationMenu> = (
-  args
-) => <AuthenticationMenu {...args} />;
-
-export const AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
-AuthenticationMenuStory.args = {
-  userProfile: {
-    email: "john@smith.com",
-    email_verified: true,
-    family_name: "Smith",
-    given_name: "John",
-    hd: "",
-    locale: "",
-    name: "john_smith",
-    picture: "https://i.pravatar.cc/200",
-    sub: "",
-  },
-};

package/src/components/Login/login.stories.tsx

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { HelpIconButton } from "../common/Button/components/HelpIconButton/helpIconButton";
-import { Login } from "./login";
-
-export default {
-  argTypes: {
-    isGoogle: { control: "boolean" },
-    termsOfService: { control: "object" },
-    text: { control: "object" },
-    title: { control: "text" },
-    warning: { control: "object" },
-  },
-  component: Login,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Components/Login",
-} as Meta<typeof Login>;
-
-type Story = StoryObj<typeof Login>;
-
-export const LoginStory: Story = {
-  args: {
-    isGoogle: true,
-    termsOfService: (
-      <p>I have read and agree to privacy notice and terms of use</p>
-    ),
-    text: (
-      <p>
-        Please sign in to your Data Explorer account{" "}
-        <HelpIconButton url="https://www.google.com/" />
-      </p>
-    ),
-    title: "Sign in to your account",
-    warning: (
-      <div>
-        <p>WARNING NOTICE</p>
-        <p>This is a warning notice.</p>
-      </div>
-    ),
-  },
-};

package/src/components/common/Button/components/LoginButton/loginButton.styles.ts

@@ -1,13 +0,0 @@
-import styled from "@emotion/styled";
-import { ButtonSecondary } from "../ButtonSecondary/buttonSecondary";
-
-export const LoginButton = styled(ButtonSecondary)`
-  .MuiButton-endIcon {
-    margin-right: -6px;
-  }
-`;
-
-export const LoginButtonText = styled.span`
-  flex: 1;
-  text-align: left;
-`;

package/src/components/common/Button/components/LoginButton/loginButton.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { ButtonProps } from "../../button";
-import { LoginButton as Button, LoginButtonText } from "./loginButton.styles";
-
-export type LoginButtonProps = Exclude<ButtonProps, "StartIcon">;
-
-export const LoginButton = ({
-  children,
-  ...props
-}: LoginButtonProps): JSX.Element => {
-  return (
-    <Button fullWidth={true} {...props}>
-      <LoginButtonText>{children}</LoginButtonText>
-    </Button>
-  );
-};

package/src/hooks/useAuthentication/useAuthentication.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { AuthContext, AuthContextProps } from "../../providers/authentication";
-
-/**
- * Returns authentication context.
- * @returns authentication context.
- */
-export const useAuthentication = (): AuthContextProps => {
-  return useContext(AuthContext);
-};

package/src/hooks/useAuthentication/useAuthenticationComplete.ts

@@ -1,66 +0,0 @@
-import Router, { useRouter } from "next/router";
-import { useEffect, useMemo, useRef } from "react";
-import { escapeRegExp } from "../../common/utils";
-import { ROUTE_LOGIN } from "../../providers/authentication";
-import { INACTIVITY_PARAM } from "../useSessionTimeout";
-import { AUTHENTICATION_STATUS } from "./common/entities";
-
-/**
- * Handles the completion of the authentication process.
- * @param authenticationStatus - Authentication status.
- */
-export const useAuthenticationComplete = (
-  authenticationStatus: AUTHENTICATION_STATUS
-): void => {
-  const { asPath } = useRouter();
-  const routeHistoryRef = useRef<string>(initRouteHistory(asPath));
-
-  // Maintain a history of routes that have been visited prior to authentication.
-  routeHistoryRef.current = useMemo(
-    () => updateRouteHistory(routeHistoryRef.current, asPath),
-    [asPath]
-  );
-
-  // Redirect to the previous route after authentication is completed.
-  useEffect(() => {
-    if (authenticationStatus === AUTHENTICATION_STATUS.COMPLETED) {
-      Router.push(routeHistoryRef.current);
-    }
-  }, [authenticationStatus]);
-};
-
-/**
- * Initializes route history with the current path.
- * Returns base path if current path is the login route.
- * @param path - current browser path.
- * @returns path to be used as the initial route history.
- */
-function initRouteHistory(path: string): string {
-  return path === ROUTE_LOGIN ? "/" : removeInactivityTimeoutQueryParam(path);
-}
-
-/**
- * Removes the inactivity timeout query parameter from the path.
- * the inactivity timeout parameter is used to indicate that the session has timed out; remove the parameter to
- * clear the session timeout banner after the user logs in again.
- * @param path - Path.
- * @returns path without the inactivity timeout query parameter.
- */
-function removeInactivityTimeoutQueryParam(path: string): string {
-  const regex = new RegExp(`\\?${escapeRegExp(INACTIVITY_PARAM)}(?:$|[=&].*)`);
-  return path.replace(regex, "");
-}
-
-/**
- * Updates route history with the current path, unless the current path is the LoginView page.
- * @param prevPath - route history path.
- * @param path - current browser path.
- * @returns updated path to be used as the route history.
- */
-function updateRouteHistory(prevPath: string, path: string): string {
-  let currentPath = prevPath;
-  if (path !== ROUTE_LOGIN) {
-    currentPath = path;
-  }
-  return removeInactivityTimeoutQueryParam(currentPath);
-}

package/src/hooks/useAuthentication/useAuthenticationStatus.ts

@@ -1,49 +0,0 @@
-import {
-  AUTHENTICATION_STATUS,
-  LoginResponse,
-  LoginStatus,
-  REQUEST_STATUS,
-} from "./common/entities";
-import { GoogleResponse } from "./useFetchGoogleProfile";
-import { TerraNIHResponse } from "./useFetchTerraNIHProfile";
-import { TerraResponse } from "./useFetchTerraProfile";
-import { TerraTermsOfServiceResponse } from "./useFetchTerraTermsOfService";
-
-/**
- * Handles the status of the authentication process.
- * @param userProfileLoginStatus - User profile login status.
- * @param terraProfileLoginStatus - Terra profile login status.
- * @param terraTOSLoginStatus - Terra terms of service login status.
- * @param terraNIHProfileLoginStatus - Terra NIH profile login status.
- * @returns authentication status.
- */
-export const useAuthenticationStatus = (
-  userProfileLoginStatus: LoginStatus<GoogleResponse>,
-  terraProfileLoginStatus: LoginStatus<TerraResponse>,
-  terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>,
-  terraNIHProfileLoginStatus: LoginStatus<TerraNIHResponse>
-): AUTHENTICATION_STATUS => {
-  return getAuthenticationStatus([
-    terraNIHProfileLoginStatus,
-    terraProfileLoginStatus,
-    terraTOSLoginStatus,
-    userProfileLoginStatus,
-  ]);
-};
-
-/**
- * Returns the authentication status ("INCOMPLETE" or "COMPLETE").
- * @param loginStatuses - Login statuses.
- * @returns authentication status.
- */
-export function getAuthenticationStatus(
-  loginStatuses: LoginStatus<LoginResponse>[]
-): AUTHENTICATION_STATUS {
-  for (const loginStatus of loginStatuses) {
-    if (!loginStatus.isSupported) continue;
-    if (loginStatus.requestStatus === REQUEST_STATUS.NOT_STARTED) {
-      return AUTHENTICATION_STATUS.INCOMPLETE;
-    }
-  }
-  return AUTHENTICATION_STATUS.COMPLETED;
-}

package/src/hooks/useAuthentication/useFetchGoogleProfile.ts

@@ -1,68 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useAuthenticationConfig } from "../useAuthenticationConfig";
-import {
-  LOGIN_STATUS_FAILED,
-  LOGIN_STATUS_NOT_STARTED,
-} from "./common/constants";
-import { LoginStatus, REQUEST_STATUS } from "./common/entities";
-import { getAuthenticationRequestOptions } from "./common/utils";
-
-export type UserProfile = GoogleResponse;
-
-export interface GoogleResponse {
-  email: string;
-  email_verified: boolean;
-  family_name: string;
-  given_name: string;
-  hd: string;
-  locale: string;
-  name: string;
-  picture: string;
-  sub: string;
-}
-
-type Status = LoginStatus<GoogleResponse>;
-
-/**
- * Returns user profile login status from configured endpoint.
- * @param token - Token.
- * @returns google profile login status.
- */
-export const useFetchGoogleProfile = (token?: string): Status => {
-  const authenticationConfig = useAuthenticationConfig();
-  const { googleGISAuthConfig: { googleProfileEndpoint: endpoint } = {} } =
-    authenticationConfig;
-  const [loginStatus, setLoginStatus] = useState<Status>(
-    LOGIN_STATUS_NOT_STARTED as Status
-  );
-
-  // Fetch google user profile.
-  const fetchEndpointData = useCallback(
-    (endpoint: string, accessToken: string): void => {
-      fetch(endpoint, getAuthenticationRequestOptions(accessToken))
-        .then((response) => response.json())
-        .then((profile: GoogleResponse) => {
-          setLoginStatus((prevStatus) => ({
-            ...prevStatus,
-            isSuccess: true,
-            requestStatus: REQUEST_STATUS.COMPLETED,
-            response: profile,
-          }));
-        })
-        .catch((err) => {
-          console.log(err); // TODO handle error.
-          setLoginStatus(LOGIN_STATUS_FAILED as Status);
-        });
-    },
-    []
-  );
-
-  // Fetches user profile.
-  useEffect(() => {
-    if (!token) return;
-    if (!endpoint) return;
-    fetchEndpointData(endpoint, token);
-  }, [endpoint, fetchEndpointData, token]);
-
-  return loginStatus;
-};

package/src/hooks/useAuthentication/useTokenClient.ts

@@ -1,54 +0,0 @@
-import { useEffect, useState } from "react";
-import { useAuthenticationConfig } from "../useAuthenticationConfig";
-
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO see https://github.com/clevercanary/data-browser/issues/544.
-declare const google: any;
-
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any -- TODO see https://github.com/clevercanary/data-browser/issues/544.
-type TokenClient = any;
-
-interface TokenResponse {
-  access_token: string;
-  expires_in: number;
-  refresh_token?: string;
-  scope?: string;
-  token_type: string;
-}
-
-export interface UseTokenClient {
-  token: string | undefined;
-  tokenClient: TokenClient | undefined;
-}
-
-/**
- * Initializes the token client, sets token from token client callback.
- * @returns initialized token client.
- */
-export const useTokenClient = (): UseTokenClient => {
-  const [token, setToken] = useState<string>();
-  const [tokenClient, setTokenClient] = useState<TokenClient>();
-  const authenticationConfig = useAuthenticationConfig();
-  const { googleGISAuthConfig: { clientId, scope } = {} } =
-    authenticationConfig;
-
-  // Initializes token client - (authorization client id must be configured).
-  useEffect(() => {
-    if (clientId) {
-      setTokenClient(
-        google.accounts.oauth2.initTokenClient({
-          callback: (tokenResponse: TokenResponse) => {
-            const access_token = tokenResponse.access_token;
-            setToken(access_token);
-          },
-          client_id: clientId,
-          scope,
-        })
-      );
-    }
-  }, [clientId, scope]);
-
-  return {
-    token,
-    tokenClient,
-  };
-};

package/src/hooks/useAuthenticationConfig.ts

@@ -1,18 +0,0 @@
-import { AuthenticationConfig } from "../config/entities";
-import { useConfig } from "./useConfig";
-
-/**
- * Hook to get the authentication config
- * @returns @see AuthenticationConfig used in the current config.
- */
-export const useAuthenticationConfig = (): AuthenticationConfig => {
-  const { config } = useConfig();
-
-  if (!config.authentication) {
-    return {
-      title: "",
-    };
-  }
-
-  return config.authentication;
-};