@databiosphere/findable-ui 19.0.0 → 21.0.0

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/AcceptTerraTOS/acceptTerraTOS.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
-import { LoginStatus } from "../../../../../../../../../../hooks/useAuthentication/common/entities";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
-import { TerraResponse } from "../../../../../../../../../../hooks/useAuthentication/useFetchTerraProfile";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
+import { useTerraProfile } from "../../../../../../../../../../providers/authentication/terra/hook";
+import { LoginStatus } from "../../../../../../../../../../providers/authentication/terra/hooks/common/entities";
+import { TerraResponse } from "../../../../../../../../../../providers/authentication/terra/hooks/useFetchTerraProfile";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import {
   ANCHOR_TARGET,
@@ -23,7 +23,7 @@ export const AcceptTerraTOS = ({
 }: AcceptTerraTOSProps): JSX.Element | null => {
   const { config } = useConfig();
   const { exportToTerraUrl } = config;
-  const { terraProfileLoginStatus } = useAuthentication();
+  const { terraProfileLoginStatus } = useTerraProfile();
   const isTOSAccepted = isTermsOfServiceAccepted(terraProfileLoginStatus);
 
   const onOpenTerra = (): void => {

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
   expireTimeInSeconds,
   useAuthenticationNIHExpiry,
-} from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
+} from "../../../../../../../../hooks/authentication/terra/useAuthenticationNIHExpiry";
 import { Alert } from "../../../../../../../common/Alert/alert";
 import { ALERT_PROPS } from "../../../../../../../common/Alert/constants";
 import { FluidPaper } from "../../../../../../../common/Paper/paper.styles";

package/src/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.tsx

@@ -4,7 +4,9 @@ import {
   ONBOARDING_STEP,
   OnboardingStatus,
   useAuthenticationForm,
-} from "../../../../../../hooks/useAuthentication/useAuthenticationForm";
+} from "../../../../../../hooks/authentication/terra/useAuthenticationForm";
+import { useAuth } from "../../../../../../providers/authentication/auth/hook";
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
 import {
   FluidPaper,
@@ -17,11 +19,12 @@ import { CreateTerraAccount } from "./components/FormStep/components/CreateTerra
 import { Section, SectionContent } from "./terraSetUpForm.styles";
 
 export const TerraSetUpForm = (): JSX.Element | null => {
-  const { isComplete, isReady, onboardingStatusByStep } =
-    useAuthenticationForm();
-
-  if (!isReady) return null;
-
+  const {
+    authState: { isAuthenticated, status },
+  } = useAuth();
+  const { isComplete, onboardingStatusByStep } = useAuthenticationForm();
+  if (!isAuthenticated) return null;
+  if (status === AUTH_STATUS.PENDING) return null;
   return isComplete ? null : (
     <FluidPaper>
       <GridPaper>

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx

@@ -3,10 +3,13 @@ import {
   ButtonProps as MButtonProps,
   IconButton as MIconButton,
   IconButtonProps as MIconButtonProps,
+  Skeleton,
 } from "@mui/material";
-import { useRouter } from "next/router";
-import React, { ElementType, useCallback } from "react";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+import Router from "next/router";
+import React, { ElementType } from "react";
+import { useProfile } from "../../../../../../../../../../hooks/authentication/profile/useProfile";
+import { ROUTE } from "../../../../../../../../../../routes/constants";
+import { isNavigationLinkSelected } from "../../../Navigation/common/utils";
 import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
 import { StyledButton } from "./components/Button/button.styles";
 
@@ -21,39 +24,38 @@ export const Authentication = ({
   Button,
   closeMenu,
 }: AuthenticationProps): JSX.Element | null => {
-  const { isAuthenticated, requestAuthentication, userProfile } =
-    useAuthentication();
-  const router = useRouter();
-  const onLogout = useCallback((): void => {
-    location.href = router.basePath;
-  }, [router]);
-
+  const { isLoading, profile } = useProfile();
   if (!authenticationEnabled) return null;
-
+  if (isLoading) return <Skeleton height={32} variant="circular" width={32} />;
+  if (profile) return <AuthenticationMenu profile={profile} />;
   return (
-    <>
-      {isAuthenticated && userProfile ? (
-        <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
-      ) : (
-        <Button
-          onClick={(): void => {
-            requestAuthentication();
-            closeMenu();
-          }}
-        />
-      )}
-    </>
+    <Button
+      onClick={async (): Promise<void> => {
+        await Router.push(ROUTE.LOGIN);
+        closeMenu();
+      }}
+    />
   );
 };
 
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export function renderButton(props: MButtonProps): JSX.Element {
+export function renderButton(
+  props: MButtonProps,
+  pathname: string
+): JSX.Element {
   return (
-    <StyledButton startIcon={<LoginRoundedIcon />} variant="nav" {...props}>
+    <StyledButton
+      startIcon={<LoginRoundedIcon />}
+      variant={
+        isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav"
+      }
+      {...props}
+    >
       Sign in
     </StyledButton>
   );

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import {
-  Avatar as MAvatar,
+  Avatar,
   IconButton as MIconButton,
   Menu as MMenu,
   MenuItem,
@@ -33,7 +33,7 @@ export const UserNames = styled(Typography)`
   max-width: 200px;
 `;
 
-export const Avatar = styled(MAvatar)`
+export const StyledAvatar = styled(Avatar)`
   height: 32px;
   width: 32px;
 `;

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

@@ -1,69 +1,45 @@
 import { MenuItem } from "@mui/material";
-import React, { MouseEvent, useState } from "react";
-import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
+import React, { Fragment } from "react";
+import { useAuth } from "../../../../../../../../../../../../providers/authentication/auth/hook";
+import { UserProfile } from "../../../../../../../../../../../../providers/authentication/authentication/types";
+import { useMenu } from "../../../../../../../../../../../common/Menu/hooks/useMenu";
 import {
-  Avatar,
   AuthenticationMenu as Menu,
+  StyledAvatar,
   UserIcon,
   UserNames,
   UserSummary,
 } from "./authenticationMenu.styles";
+import { MENU_PROPS } from "./constants";
 
 export interface AuthenticationMenuProps {
-  onLogout: () => void;
-  userProfile: UserProfile;
+  profile: UserProfile;
 }
 
 export const AuthenticationMenu = ({
-  onLogout,
-  userProfile,
+  profile,
 }: AuthenticationMenuProps): JSX.Element => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
-  const open = Boolean(anchorEl);
-
-  const onOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const onCloseMenu = (): void => {
-    setAnchorEl(null);
-  };
-
+  const { service: { requestLogout } = {} } = useAuth();
+  const { anchorEl, onClose, onOpen, open } = useMenu<HTMLElement>();
   return (
-    <>
-      <UserIcon onClick={onOpenMenu}>
-        <Avatar
-          alt={`${userProfile.given_name} ${userProfile.family_name}`}
-          src={userProfile.picture}
-        />
+    <Fragment>
+      <UserIcon onClick={onOpen}>
+        <StyledAvatar alt={profile.name} src={profile.image} />
       </UserIcon>
-      <Menu
-        anchorEl={anchorEl}
-        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
-        autoFocus={false}
-        onClose={onCloseMenu}
-        open={open}
-        slotProps={{ paper: { variant: "menu" } }}
-        transformOrigin={{
-          horizontal: "right",
-          vertical: "top",
-        }}
-      >
+      <Menu {...MENU_PROPS} anchorEl={anchorEl} onClose={onClose} open={open}>
         <UserSummary>
           You are signed in as:
-          <UserNames noWrap>
-            {userProfile.given_name} {userProfile.family_name}
-          </UserNames>
+          <UserNames noWrap>{profile.name}</UserNames>
         </UserSummary>
         <MenuItem
           onClick={(): void => {
-            onCloseMenu();
-            onLogout();
+            requestLogout?.();
+            onClose();
           }}
         >
           Logout
         </MenuItem>
       </Menu>
-    </>
+    </Fragment>
   );
 };

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/constants.ts

@@ -0,0 +1,19 @@
+import { MenuProps } from "@mui/material";
+import { VARIANT } from "../../../../../../../../../../../../styles/common/mui/paper";
+import {
+  POPOVER_ORIGIN_HORIZONTAL,
+  POPOVER_ORIGIN_VERTICAL,
+} from "../../../../../../../../../../../../styles/common/mui/popover";
+
+export const MENU_PROPS: Partial<MenuProps> = {
+  anchorOrigin: {
+    horizontal: POPOVER_ORIGIN_HORIZONTAL.RIGHT,
+    vertical: POPOVER_ORIGIN_VERTICAL.BOTTOM,
+  },
+  autoFocus: false,
+  slotProps: { paper: { variant: VARIANT.MENU } },
+  transformOrigin: {
+    horizontal: POPOVER_ORIGIN_HORIZONTAL.RIGHT,
+    vertical: POPOVER_ORIGIN_VERTICAL.TOP,
+  },
+};

package/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts

@@ -1,7 +1,8 @@
 import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
+import { Button } from "@mui/material";
 
-export const StyledButton = styled(MButton)`
+export const StyledButton = styled(Button)`
+  &.MuiButton-activeNav,
   &.MuiButton-nav {
     padding: 6px 12px;
   }

package/src/components/Layout/components/Header/header.tsx

@@ -129,7 +129,7 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
                   Button={({ ...props }): JSX.Element =>
                     isIn.isMenuIn
                       ? renderAuthenticationIconButton(props)
-                      : renderAuthenticationButton(props)
+                      : renderAuthenticationButton(props, pathname)
                   }
                   authenticationEnabled={authenticationEnabled}
                   closeMenu={onClose}

package/src/components/Login/components/Button/button.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+
+export const StyledButton = styled(Button)`
+  &.MuiButton-root {
+    justify-content: space-between;
+
+    .MuiButton-endIcon {
+      margin: -6px;
+    }
+  }
+`;

package/src/components/Login/components/Button/button.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledButton } from "./button.styles";
+import { BUTTON_PROPS } from "./constants";
+import { Props } from "./types";
+
+export const Button = ({ className, ...props }: Props): JSX.Element => {
+  return <StyledButton className={className} {...BUTTON_PROPS} {...props} />;
+};

package/src/components/Login/components/Button/constants.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "@mui/material";
+import { COLOR, VARIANT } from "../../../../styles/common/mui/button";
+
+export const BUTTON_PROPS: Partial<ButtonProps> = {
+  color: COLOR.SECONDARY,
+  fullWidth: true,
+  variant: VARIANT.CONTAINED,
+};

package/src/components/Login/components/Button/types.ts

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

package/src/components/Login/login.tsx

@@ -1,13 +1,13 @@
 import { Checkbox, Typography } from "@mui/material";
-import React, { ChangeEvent, ReactNode, useState } from "react";
-import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
-import { LoginButton } from "../common/Button/components/LoginButton/loginButton";
+import React, { ChangeEvent, useCallback, useState } from "react";
+import { useAuth } from "../../providers/authentication/auth/hook";
+import { ProviderId } from "../../providers/authentication/common/types";
 import { CheckedIcon } from "../common/CustomIcon/components/CheckedIcon/checkedIcon";
-import { GoogleIcon } from "../common/CustomIcon/components/GoogleIcon/googleIcon";
 import { UncheckedErrorIcon } from "../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
 import { UncheckedIcon } from "../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { RoundedPaper } from "../common/Paper/paper.styles";
 import { SectionContent } from "../common/Section/section.styles";
+import { Button } from "./components/Button/button";
 import {
   LoginAgreement,
   LoginSection,
@@ -17,35 +17,31 @@ import {
   LoginWrapper,
   TermsOfService,
 } from "./login.styles";
+import { Props } from "./types";
 
-export interface LoginProps {
-  isGoogle?: boolean;
-  termsOfService?: ReactNode;
-  text?: ReactNode;
-  title: string;
-  warning?: ReactNode;
-}
-
-export const Login = ({
-  isGoogle = false,
+export const Login = <P,>({
+  providers = [],
   termsOfService,
   text,
   title,
   warning,
-}: LoginProps): JSX.Element => {
-  const { authenticateUser } = useAuthentication();
+}: Props<P>): JSX.Element => {
+  const { service: { requestLogin } = {} } = useAuth();
   const [isError, setIsError] = useState<boolean>(false);
   const [isInAgreement, setIsInAgreement] = useState<boolean>(!termsOfService);
 
   // Authenticates the user, if the user has agreed to the terms of service.
   // If the terms of service are not accepted, set the terms of service error state to true.
-  const onAuthenticateUser = (): void => {
-    if (!isInAgreement) {
-      setIsError(true);
-      return;
-    }
-    authenticateUser();
-  };
+  const onLogin = useCallback(
+    (providerId: ProviderId): void => {
+      if (!isInAgreement) {
+        setIsError(true);
+        return;
+      }
+      requestLogin?.(providerId);
+    },
+    [isInAgreement, requestLogin]
+  );
 
   // Callback fired when the checkbox value is changed.
   // Clears the terms of service error state and sets state isInAgreement with checkbox selected value.
@@ -75,11 +71,15 @@ export const Login = ({
                 <TermsOfService>{termsOfService}</TermsOfService>
               </LoginAgreement>
             )}
-            {isGoogle && (
-              <LoginButton EndIcon={GoogleIcon} onClick={onAuthenticateUser}>
-                Google
-              </LoginButton>
-            )}
+            {providers?.map((provider) => (
+              <Button
+                key={provider.id}
+                endIcon={"icon" in provider && provider.icon}
+                onClick={() => onLogin(provider.id)}
+              >
+                {provider.name}
+              </Button>
+            ))}
           </LoginSectionActions>
         </LoginSection>
       </RoundedPaper>

package/src/components/Login/types.ts

@@ -0,0 +1,11 @@
+import { ClientSafeProvider } from "next-auth/react";
+import { ReactNode } from "react";
+import { OAuthProvider } from "../../config/entities";
+
+export interface Props<P> {
+  providers?: ClientSafeProvider[] | OAuthProvider<P>[];
+  termsOfService?: ReactNode;
+  text?: ReactNode;
+  title: string;
+  warning?: ReactNode;
+}

package/src/components/Table/common/columnDef.ts

@@ -1,7 +1,9 @@
 import { ColumnDef, RowData } from "@tanstack/react-table";
 import { TABLE_CELL_PROPS } from "../../../styles/common/mui/tableCell";
-import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
 import { RowPositionCell } from "../components/TableCell/components/RowPositionCell/rowPositionCell";
+import { RowSelectionCell } from "../components/TableCell/components/RowSelectionCell/rowSelectionCell";
+import { HeadSelectionCell } from "../components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
 export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   ROW_POSITION: {
@@ -10,9 +12,23 @@ export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
     enableHiding: false,
     enableSorting: false,
     header: "",
-    id: ACCESSOR_KEYS.ROW_POSITION,
+    id: COLUMN_IDENTIFIER.ROW_POSITION,
     meta: {
       align: TABLE_CELL_PROPS.ALIGN.RIGHT,
+      columnPinned: false,
+      header: "",
+      width: "max-content",
+    },
+  },
+  ROW_SELECTION: {
+    cell: RowSelectionCell,
+    enableGrouping: false,
+    enableHiding: false,
+    enableSorting: false,
+    header: HeadSelectionCell,
+    id: COLUMN_IDENTIFIER.ROW_SELECTION,
+    meta: {
+      columnPinned: false,
       header: "",
       width: "max-content",
     },

package/src/components/Table/common/columnIdentifier.ts

@@ -0,0 +1,4 @@
+export const COLUMN_IDENTIFIER = {
+  ROW_POSITION: "rowPosition",
+  ROW_SELECTION: "rowSelection",
+};

package/src/components/Table/common/typeGuards.ts

@@ -0,0 +1,12 @@
+import { Column, RowData } from "@tanstack/react-table";
+
+/**
+ * Type guard to check if a column's header is a string.
+ * @param column - Column.
+ * @returns true if the column has a string header.
+ */
+export function isStringHeaderColumn<T extends RowData>(
+  column: Column<T>
+): column is Column<T> & { columnDef: { header: string } } {
+  return typeof column.columnDef.header === "string";
+}