@databiosphere/findable-ui 18.0.0 → 20.0.0

package/lib/providers/googleSignInAuthentication/provider.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { SessionController as DefaultSessionController } from "../../components/Authentication/components/SessionController/components/GoogleSessionController/SessionController";
+import { useAuthReducer } from "../../hooks/authentication/auth/useAuthReducer";
+import { useAuthenticationReducer } from "../../hooks/authentication/authentication/useAuthenticationReducer";
+import { useCredentialsReducer } from "../../hooks/authentication/credentials/useCredentialsReducer";
+import { useSessionActive } from "../../hooks/authentication/session/useSessionActive";
+import { useSessionCallbackUrl } from "../../hooks/authentication/session/useSessionCallbackUrl";
+import { useSessionIdleTimer } from "../../hooks/authentication/session/useSessionIdleTimer";
+import { useTokenReducer } from "../../hooks/authentication/token/useTokenReducer";
+import { AuthContext } from "../authentication/auth/context";
+import { AuthenticationContext } from "../authentication/authentication/context";
+import { CredentialsContext } from "../authentication/credentials/context";
+import { AUTH_STATE, AUTHENTICATION_STATE } from "./constants";
+import { useGoogleSignInService } from "./hooks/useGoogleSignInService";
+export function GoogleSignInAuthenticationProvider({ children, SessionController = DefaultSessionController, timeout, }) {
+    const authReducer = useAuthReducer(AUTH_STATE);
+    const authenticationReducer = useAuthenticationReducer(AUTHENTICATION_STATE);
+    const credentialsReducer = useCredentialsReducer();
+    const tokenReducer = useTokenReducer(); // Reducer, local to Google Sign-In process only.
+    const service = useGoogleSignInService({
+        authReducer,
+        authenticationReducer,
+        credentialsReducer,
+        tokenReducer,
+    });
+    const { callbackUrl } = useSessionCallbackUrl();
+    const { authDispatch, authState } = authReducer;
+    const { isAuthenticated } = authState;
+    const { authenticationState } = authenticationReducer;
+    useSessionActive(authState, authenticationState);
+    useSessionIdleTimer({
+        disabled: !isAuthenticated,
+        onIdle: () => service.requestLogout({ callbackUrl }),
+        timeout,
+    });
+    return (React.createElement(CredentialsContext.Provider, { value: credentialsReducer },
+        React.createElement(AuthenticationContext.Provider, { value: authenticationReducer },
+            React.createElement(AuthContext.Provider, { value: { authDispatch, authState, service } },
+                React.createElement(SessionController, { token: tokenReducer.tokenState.token }, children)))));
+}

package/lib/providers/googleSignInAuthentication/service/constants.d.ts

@@ -0,0 +1,4 @@
+import { OAuthProvider } from "../../../config/entities";
+import { GoogleProfile } from "../profile/types";
+export declare const GOOGLE_SIGN_IN_PROVIDER_ID = "google";
+export declare const GOOGLE_SIGN_IN_PROVIDER: Pick<OAuthProvider<GoogleProfile>, "icon" | "id" | "name" | "profile">;

package/lib/providers/googleSignInAuthentication/service/constants.js

@@ -0,0 +1,9 @@
+import { GoogleIcon } from "../../../components/common/CustomIcon/components/GoogleIcon/googleIcon";
+import { mapProfile } from "../profile/utils";
+export const GOOGLE_SIGN_IN_PROVIDER_ID = "google";
+export const GOOGLE_SIGN_IN_PROVIDER = {
+    icon: GoogleIcon({}),
+    id: GOOGLE_SIGN_IN_PROVIDER_ID,
+    name: "Google",
+    profile: mapProfile,
+};

package/lib/providers/googleSignInAuthentication/service/service.d.ts

@@ -0,0 +1,6 @@
+import { OAuthProvider } from "../../../config/entities";
+import { SessionDispatch } from "../common/types";
+export declare const service: {
+    login: (provider: OAuthProvider, dispatch: Pick<SessionDispatch, "authDispatch" | "authenticationDispatch" | "tokenDispatch">) => void;
+    logout: (dispatch: SessionDispatch) => void;
+};

package/lib/providers/googleSignInAuthentication/service/service.js

@@ -0,0 +1,43 @@
+import { requestAuth, resetState } from "../../authentication/auth/dispatch";
+import { requestAuthentication, resetState as resetAuthenticationState, updateAuthentication, } from "../../authentication/authentication/dispatch";
+import { AUTHENTICATION_STATUS } from "../../authentication/authentication/types";
+import { fetchProfile } from "../../authentication/authentication/utils";
+import { resetState as resetCredentialsState } from "../../authentication/credentials/dispatch";
+import { getAuthenticationRequestOptions } from "../../authentication/terra/hooks/common/utils";
+import { resetState as resetTokenState, updateToken, } from "../../authentication/token/dispatch";
+export const service = {
+    login: (provider, dispatch) => {
+        const client = google.accounts.oauth2.initTokenClient({
+            callback: (response) => {
+                const { id, profile, userinfo } = provider;
+                const { access_token: token } = response;
+                dispatch.authDispatch?.(requestAuth());
+                dispatch.authenticationDispatch?.(requestAuthentication());
+                dispatch.tokenDispatch?.(updateToken({ providerId: id, token }));
+                fetchProfile(userinfo, getAuthenticationRequestOptions(token), {
+                    onError: () => {
+                        dispatch.authDispatch?.(resetState());
+                        dispatch.authenticationDispatch?.(updateAuthentication({
+                            profile: undefined,
+                            status: AUTHENTICATION_STATUS.SETTLED,
+                        }));
+                        dispatch.tokenDispatch?.(resetTokenState());
+                    },
+                    onSuccess: (r) => dispatch.authenticationDispatch?.(updateAuthentication({
+                        profile: profile(r),
+                        status: AUTHENTICATION_STATUS.PENDING, // Authentication is pending until session controller is resolved.
+                    })),
+                });
+            },
+            client_id: provider.clientId,
+            scope: provider.authorization.params.scope,
+        });
+        client.requestAccessToken();
+    },
+    logout: (dispatch) => {
+        dispatch.authDispatch?.(resetState());
+        dispatch.authenticationDispatch?.(resetAuthenticationState());
+        dispatch.credentialsDispatch?.(resetCredentialsState());
+        dispatch.tokenDispatch?.(resetTokenState());
+    },
+};

package/lib/providers/googleSignInAuthentication/types.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, ReactNode } from "react";
+export interface GoogleSignInAuthenticationProviderProps {
+    children: ReactNode | ReactNode[];
+    SessionController?: ElementType;
+    timeout?: number;
+}

package/lib/providers/googleSignInAuthentication/types.js

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

package/lib/providers/nextAuthAuthentication/hooks/useNextAuthService.d.ts

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

package/lib/providers/nextAuthAuthentication/hooks/useNextAuthService.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { transformRoute } from "../../../hooks/authentication/session/useSessionActive";
+import { useRouteHistory } from "../../../hooks/useRouteHistory";
+import { service } from "../service/service";
+export const useNextAuthService = () => {
+    const { callbackUrl } = useRouteHistory(2);
+    const onLogin = useCallback((providerId) => {
+        service.login(providerId, { callbackUrl: callbackUrl(transformRoute) });
+    }, [callbackUrl]);
+    const onLogout = useCallback((options) => {
+        service.logout(options);
+    }, []);
+    return { requestLogin: onLogin, requestLogout: onLogout };
+};

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

@@ -0,0 +1,2 @@
+import { NextAuthAuthenticationProviderProps } from "./types";
+export declare function NextAuthAuthenticationProvider({ children, refetchInterval, session, timeout, }: NextAuthAuthenticationProviderProps): JSX.Element;

package/lib/providers/nextAuthAuthentication/provider.js

@@ -0,0 +1,30 @@
+import { SessionProvider } from "next-auth/react";
+import React from "react";
+import { SessionController } from "../../components/Authentication/components/SessionController/components/NextSessionController/SessionController";
+import { useAuthReducer } from "../../hooks/authentication/auth/useAuthReducer";
+import { useAuthenticationReducer } from "../../hooks/authentication/authentication/useAuthenticationReducer";
+import { useSessionCallbackUrl } from "../../hooks/authentication/session/useSessionCallbackUrl";
+import { useSessionIdleTimer } from "../../hooks/authentication/session/useSessionIdleTimer";
+import { AuthContext } from "../authentication/auth/context";
+import { AuthenticationContext } from "../authentication/authentication/context";
+import { useNextAuthService } from "./hooks/useNextAuthService";
+export function NextAuthAuthenticationProvider({ children, refetchInterval = 0, session, timeout, }) {
+    const authReducer = useAuthReducer();
+    const authenticationReducer = useAuthenticationReducer();
+    const service = useNextAuthService();
+    const { authDispatch, authState } = authReducer;
+    const { isAuthenticated } = authState;
+    const { callbackUrl } = useSessionCallbackUrl();
+    useSessionIdleTimer({
+        crossTab: true,
+        disabled: !isAuthenticated,
+        onIdle: () => {
+            service.requestLogout({ callbackUrl, redirect: true });
+        },
+        timeout,
+    });
+    return (React.createElement(SessionProvider, { session: session, refetchInterval: refetchInterval / 1000 },
+        React.createElement(AuthenticationContext.Provider, { value: authenticationReducer },
+            React.createElement(AuthContext.Provider, { value: { authDispatch, authState, service } },
+                React.createElement(SessionController, null, children)))));
+}

package/lib/providers/nextAuthAuthentication/service/service.d.ts

@@ -0,0 +1,6 @@
+import { SignInOptions, SignOutParams } from "next-auth/react";
+import { ProviderId } from "../../authentication/common/types";
+export declare const service: {
+    login: (providerId: ProviderId, options?: SignInOptions) => void;
+    logout: (options?: SignOutParams<boolean>) => void;
+};

package/lib/providers/nextAuthAuthentication/service/service.js

@@ -0,0 +1,12 @@
+import { signIn, signOut } from "next-auth/react";
+export const service = {
+    login: (providerId, options) => {
+        signIn(providerId, options).catch((e) => console.error(e));
+    },
+    logout: (options) => {
+        signOut({
+            callbackUrl: options?.callbackUrl,
+            redirect: options?.redirect || false,
+        }).catch((e) => console.error(e));
+    },
+};

package/lib/providers/nextAuthAuthentication/types.d.ts

@@ -0,0 +1,8 @@
+import { Session } from "next-auth";
+import { ReactNode } from "react";
+export interface NextAuthAuthenticationProviderProps {
+    children: ReactNode | ReactNode[];
+    refetchInterval?: number;
+    session?: Session | null;
+    timeout?: number;
+}

package/lib/providers/nextAuthAuthentication/types.js

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

package/lib/routes/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ROUTE: {
+    LOGIN: string;
+};

package/lib/routes/constants.js

@@ -0,0 +1,3 @@
+export const ROUTE = {
+    LOGIN: "/login",
+};

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

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

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

@@ -0,0 +1,17 @@
+export const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    INHERIT: "inherit",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+export const VARIANT = {
+    ACTIVE_NAV: "activeNav",
+    BACK_NAV: "backNav",
+    CONTAINED: "contained",
+    NAV: "nav",
+    OUTLINED: "outlined",
+    TEXT: "text",
+};

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

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

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

@@ -0,0 +1,9 @@
+export const VARIANT = {
+    ELEVATION: "elevation",
+    FOOTER: "footer",
+    MENU: "menu",
+    OUTLINED: "outlined",
+    PANEL: "panel",
+    SEARCH_BAR: "searchbar",
+    TABLE: "table",
+};

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

@@ -0,0 +1,3 @@
+import { PopoverOrigin } from "@mui/material";
+export declare const POPOVER_ORIGIN_HORIZONTAL: Record<string, PopoverOrigin["horizontal"]>;
+export declare const POPOVER_ORIGIN_VERTICAL: Record<string, PopoverOrigin["vertical"]>;

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

@@ -0,0 +1,10 @@
+export const POPOVER_ORIGIN_HORIZONTAL = {
+    CENTER: "center",
+    LEFT: "left",
+    RIGHT: "right",
+};
+export const POPOVER_ORIGIN_VERTICAL = {
+    BOTTOM: "bottom",
+    CENTER: "center",
+    TOP: "top",
+};

package/lib/theme/common/entities.d.ts

@@ -0,0 +1,6 @@
+export interface BaseComponentProps {
+    className?: string;
+}
+export interface TrackingComponentProps {
+    trackingId?: string;
+}

package/lib/theme/common/entities.js

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

package/lib/views/ExploreView/exploreView.js

@@ -152,7 +152,7 @@ function renderComponent(componentsConfig, response) {
 function renderList(exploreState, entityConfig, entityListType) {
     const { listItems, loading, tabValue } = exploreState;
     const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig, defaultSort, tableOptions } = list;
+    const { columns: columnsConfig } = list;
     if (!exploreState || !tabValue) {
         return React.createElement(React.Fragment, null); //TODO: return the loading UI component
     }
@@ -161,7 +161,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading, tableOptions: tableOptions }));
+    return (React.createElement(TableCreator, { columns: columnsConfig, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/lib/views/LoginView/loginView.d.ts

@@ -1 +1,5 @@
-export declare const LoginView: () => JSX.Element;
+import { ClientSafeProvider } from "next-auth/react";
+export interface LoginViewProps {
+    providers?: ClientSafeProvider[];
+}
+export declare const LoginView: ({ providers, }: LoginViewProps) => JSX.Element | null;

package/lib/views/LoginView/loginView.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { Login } from "../../components/Login/login";
-import { useAuthenticationConfig } from "../../hooks/useAuthenticationConfig";
-export const LoginView = () => {
-    const { googleGISAuthConfig, termsOfService, text, title, warning } = useAuthenticationConfig();
-    return (React.createElement(Login, { isGoogle: !!googleGISAuthConfig, termsOfService: termsOfService, text: text, title: title, warning: warning }));
+import { useAuthenticationConfig } from "../../hooks/authentication/config/useAuthenticationConfig";
+export const LoginView = ({ providers, }) => {
+    const authConfig = useAuthenticationConfig();
+    if (!authConfig)
+        return null;
+    return (React.createElement(Login, { providers: providers || authConfig.providers, termsOfService: authConfig.termsOfService, text: authConfig.text, title: authConfig.title, warning: authConfig.warning }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "18.0.0",
+  "version": "20.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -75,11 +75,12 @@
     "isomorphic-dompurify": "0.24.0",
     "ky": "^1.7.2",
     "next": "^14.1.0",
+    "next-auth": "^4.24.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-gtm-module": "2.0.11",
-    "react-idle-timer": "^5.6.2",
+    "react-idle-timer": "^5.7.2",
     "react-window": "1.8.9",
     "uuid": "8.3.2",
     "validate.js": "^0.13.1"

package/src/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.tsx

@@ -0,0 +1,38 @@
+import React, { Fragment, useEffect } from "react";
+import { authComplete } from "../../../../../../providers/authentication/auth/dispatch";
+import { useAuth } from "../../../../../../providers/authentication/auth/hook";
+import { authenticationComplete } from "../../../../../../providers/authentication/authentication/dispatch";
+import { useAuthentication } from "../../../../../../providers/authentication/authentication/hook";
+import { updateCredentials } from "../../../../../../providers/authentication/credentials/dispatch";
+import { useCredentials } from "../../../../../../providers/authentication/credentials/hook";
+import { SessionControllerProps } from "./types";
+
+export function SessionController({
+  children,
+  token,
+}: SessionControllerProps): JSX.Element {
+  const { authDispatch } = useAuth();
+  const {
+    authenticationDispatch,
+    authenticationState: { profile },
+  } = useAuthentication();
+  const { credentialsDispatch } = useCredentials();
+
+  useEffect(() => {
+    // Dispatch only when profile is available:
+    // - Login errors are managed by the login service.
+    // - Logout operations handle resetting credentials, authentication and auth state.
+    if (!profile) return;
+    credentialsDispatch?.(updateCredentials(token)); // Release credentials.
+    authenticationDispatch?.(authenticationComplete()); // Authentication `status` is "SETTLED".
+    authDispatch?.(authComplete({ isAuthenticated: true })); // Auth `status` is "SETTLED", and `isAuthenticated` is "true".
+  }, [
+    authDispatch,
+    authenticationDispatch,
+    credentialsDispatch,
+    profile,
+    token,
+  ]);
+
+  return <Fragment>{children}</Fragment>;
+}

package/src/components/Authentication/components/SessionController/components/GoogleSessionController/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { TokenState } from "../../../../../../providers/authentication/token/types";
+
+export interface SessionControllerProps {
+  children: ReactNode | ReactNode[];
+  token: TokenState["token"];
+}

package/src/components/Authentication/components/SessionController/components/NextSessionController/SessionController.tsx

@@ -0,0 +1,23 @@
+import { useSession } from "next-auth/react";
+import React, { Fragment, useEffect } from "react";
+import { updateAuthState } from "../../../../../../providers/authentication/auth/dispatch";
+import { useAuth } from "../../../../../../providers/authentication/auth/hook";
+import { updateAuthentication } from "../../../../../../providers/authentication/authentication/dispatch";
+import { useAuthentication } from "../../../../../../providers/authentication/authentication/hook";
+import { SessionControllerProps } from "./types";
+import { mapAuth, mapAuthentication } from "./utils";
+
+export function SessionController({
+  children,
+}: SessionControllerProps): JSX.Element {
+  const { authDispatch } = useAuth();
+  const { authenticationDispatch } = useAuthentication();
+  const session = useSession();
+
+  useEffect(() => {
+    authDispatch?.(updateAuthState(mapAuth(session)));
+    authenticationDispatch?.(updateAuthentication(mapAuthentication(session)));
+  }, [authDispatch, authenticationDispatch, session]);
+
+  return <Fragment>{children}</Fragment>;
+}

package/src/components/Authentication/components/SessionController/components/NextSessionController/constants.ts

@@ -0,0 +1,21 @@
+import { SessionContextValue } from "next-auth/react";
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS } from "../../../../../../providers/authentication/authentication/types";
+
+export const AUTH_STATUS_MAP: Record<
+  SessionContextValue["status"],
+  AUTH_STATUS
+> = {
+  authenticated: AUTH_STATUS.SETTLED,
+  loading: AUTH_STATUS.PENDING,
+  unauthenticated: AUTH_STATUS.SETTLED,
+};
+
+export const AUTHENTICATION_STATUS_MAP: Record<
+  SessionContextValue["status"],
+  AUTHENTICATION_STATUS
+> = {
+  authenticated: AUTHENTICATION_STATUS.SETTLED,
+  loading: AUTHENTICATION_STATUS.PENDING,
+  unauthenticated: AUTHENTICATION_STATUS.SETTLED,
+};

package/src/components/Authentication/components/SessionController/components/NextSessionController/types.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export interface SessionControllerProps {
+  children: ReactNode | ReactNode[];
+}

package/src/components/Authentication/components/SessionController/components/NextSessionController/utils.ts

@@ -0,0 +1,74 @@
+import { Session } from "next-auth";
+import { SessionContextValue } from "next-auth/react";
+import {
+  AUTH_STATUS,
+  UpdateAuthStatePayload,
+} from "../../../../../../providers/authentication/auth/types";
+import {
+  AUTHENTICATION_STATUS,
+  UpdateAuthenticationPayload,
+  UserProfile,
+} from "../../../../../../providers/authentication/authentication/types";
+import { AUTH_STATUS_MAP, AUTHENTICATION_STATUS_MAP } from "./constants";
+
+/**
+ * Returns the auth state from the session context.
+ * @param session - Session context value.
+ * @returns auth state.
+ */
+export function mapAuth(session: SessionContextValue): UpdateAuthStatePayload {
+  return {
+    isAuthenticated: session.status === "authenticated",
+    status: mapStatus(session.status, AUTH_STATUS_MAP, AUTH_STATUS.SETTLED),
+  };
+}
+
+/**
+ * Returns the authentication profile and status from the session context.
+ * @param session - Session context value.
+ * @returns authentication profile and status.
+ */
+export function mapAuthentication(
+  session: SessionContextValue
+): UpdateAuthenticationPayload {
+  return {
+    profile: mapProfile(session.data),
+    status: mapStatus(
+      session.status,
+      AUTHENTICATION_STATUS_MAP,
+      AUTHENTICATION_STATUS.SETTLED
+    ),
+  };
+}
+
+/**
+ * Maps the session data to a user profile.
+ * @param sessionData - Session data.
+ * @returns user profile.
+ */
+function mapProfile(sessionData: Session | null): UserProfile | undefined {
+  if (!sessionData) return;
+  const { user } = sessionData;
+  if (!user) return;
+  const { email, image, name } = user;
+  return {
+    email: email || "",
+    image: image || "",
+    name: name || "",
+  };
+}
+
+/**
+ * Returns the auth or authentication status <S> based on the session status.
+ * @param status - Session status.
+ * @param statusBySessionStatus - Map of session status to auth or authentication status.
+ * @param defaultStatus - Default auth or authentication status.
+ * @returns auth or authentication status.
+ */
+function mapStatus<S>(
+  status: SessionContextValue["status"],
+  statusBySessionStatus: Record<SessionContextValue["status"], S>,
+  defaultStatus: S
+): S {
+  return statusBySessionStatus[status] || defaultStatus;
+}

package/src/components/ComponentCreator/ComponentCreator.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { ComponentsConfig, ViewContext } from "../../config/entities";
-import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../hooks/useConfig";
 import { useExploreState } from "../../hooks/useExploreState";
 import { useFileManifestState } from "../../hooks/useFileManifestState";
 import { useSystemStatus } from "../../hooks/useSystemStatus";
+import { useAuth } from "../../providers/authentication/auth/hook";
 
 export interface ComponentCreatorProps<T> {
   components: ComponentsConfig;
@@ -27,7 +27,9 @@ export const ComponentCreator = <T,>({
   response,
   viewContext,
 }: ComponentCreatorProps<T>): JSX.Element => {
-  const { authenticationStatus, isAuthenticated } = useAuthentication();
+  const {
+    authState: { isAuthenticated },
+  } = useAuth();
   const { config, entityConfig } = useConfig();
   const { exploreState } = useExploreState();
   const { fileManifestState } = useFileManifestState();
@@ -53,7 +55,6 @@ export const ComponentCreator = <T,>({
           ? c.viewBuilder(response, {
               ...viewContext,
               authState: {
-                authenticationStatus,
                 isAuthenticated,
               },
               entityConfig,

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -3,6 +3,7 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -13,6 +14,7 @@ export const CollapsableRows = <T extends RowData>({
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {rows.map((row) => {

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
+import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -26,9 +26,9 @@ export const TableRows = <T extends RowData>({
       {rows.map((row) => {
         return (
           <TableRow
-            id={getRowId(row)}
-            isPreview={row.getIsPreview()}
             key={row.id}
+            isGrouped={row.getIsGrouped()}
+            isPreview={row.getIsPreview()}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
@@ -50,18 +50,3 @@ export const TableRows = <T extends RowData>({
     </Fragment>
   );
 };
-
-/**
- * Returns identifier for a row.
- * @param row - Row.
- * @returns row identifier.
- */
-function getRowId<T extends RowData>(row: Row<T>): string | undefined {
-  const { depth, getIsGrouped, id } = row;
-  if (getIsGrouped()) {
-    return `grouped-row-${id}`;
-  }
-  if (depth > 0) {
-    return `sub-row-${id}`;
-  }
-}