@databiosphere/findable-ui 18.0.0 → 20.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "18.0.0"
+  ".": "20.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [20.0.0](https://github.com/DataBiosphere/findable-ui/compare/v19.0.0...v20.0.0) (2025-01-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove terra functionality from authprovider into its own provider ([#178](https://github.com/DataBiosphere/findable-ui/issues/178)) (#240)
+
+### Features
+
+* remove terra functionality from authprovider into its own provider ([#178](https://github.com/DataBiosphere/findable-ui/issues/178)) ([#240](https://github.com/DataBiosphere/findable-ui/issues/240)) ([18b0ea8](https://github.com/DataBiosphere/findable-ui/commit/18b0ea875b0096a76e968f8578769f62fbab8804))
+
+## [19.0.0](https://github.com/DataBiosphere/findable-ui/compare/v18.0.0...v19.0.0) (2025-01-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* implement group by list ([#302](https://github.com/DataBiosphere/findable-ui/issues/302)) (#303)
+
+### Features
+
+* implement group by list ([#302](https://github.com/DataBiosphere/findable-ui/issues/302)) ([#303](https://github.com/DataBiosphere/findable-ui/issues/303)) ([36e4330](https://github.com/DataBiosphere/findable-ui/commit/36e433053b1c2f17ddc75964c8e8eec35440b7bd))
+
 ## [18.0.0](https://github.com/DataBiosphere/findable-ui/compare/v17.0.0...v18.0.0) (2024-12-18)
 
 

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.d.ts

@@ -0,0 +1,2 @@
+import { SessionControllerProps } from "./types";
+export declare function SessionController({ children, token, }: SessionControllerProps): JSX.Element;

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/SessionController.js

@@ -0,0 +1,29 @@
+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";
+export function SessionController({ children, token, }) {
+    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 React.createElement(Fragment, null, children);
+}

package/lib/components/Authentication/components/SessionController/components/GoogleSessionController/types.d.ts

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

package/lib/components/Authentication/components/SessionController/components/NextSessionController/SessionController.d.ts

@@ -0,0 +1,2 @@
+import { SessionControllerProps } from "./types";
+export declare function SessionController({ children, }: SessionControllerProps): JSX.Element;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/SessionController.js

@@ -0,0 +1,17 @@
+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 { mapAuth, mapAuthentication } from "./utils";
+export function SessionController({ children, }) {
+    const { authDispatch } = useAuth();
+    const { authenticationDispatch } = useAuthentication();
+    const session = useSession();
+    useEffect(() => {
+        authDispatch?.(updateAuthState(mapAuth(session)));
+        authenticationDispatch?.(updateAuthentication(mapAuthentication(session)));
+    }, [authDispatch, authenticationDispatch, session]);
+    return React.createElement(Fragment, null, children);
+}

package/lib/components/Authentication/components/SessionController/components/NextSessionController/constants.d.ts

@@ -0,0 +1,5 @@
+import { SessionContextValue } from "next-auth/react";
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS } from "../../../../../../providers/authentication/authentication/types";
+export declare const AUTH_STATUS_MAP: Record<SessionContextValue["status"], AUTH_STATUS>;
+export declare const AUTHENTICATION_STATUS_MAP: Record<SessionContextValue["status"], AUTHENTICATION_STATUS>;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/constants.js

@@ -0,0 +1,12 @@
+import { AUTH_STATUS } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS } from "../../../../../../providers/authentication/authentication/types";
+export const AUTH_STATUS_MAP = {
+    authenticated: AUTH_STATUS.SETTLED,
+    loading: AUTH_STATUS.PENDING,
+    unauthenticated: AUTH_STATUS.SETTLED,
+};
+export const AUTHENTICATION_STATUS_MAP = {
+    authenticated: AUTHENTICATION_STATUS.SETTLED,
+    loading: AUTHENTICATION_STATUS.PENDING,
+    unauthenticated: AUTHENTICATION_STATUS.SETTLED,
+};

package/lib/components/Authentication/components/SessionController/components/NextSessionController/types.d.ts

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

package/lib/components/Authentication/components/SessionController/components/NextSessionController/types.js

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

package/lib/components/Authentication/components/SessionController/components/NextSessionController/utils.d.ts

@@ -0,0 +1,15 @@
+import { SessionContextValue } from "next-auth/react";
+import { UpdateAuthStatePayload } from "../../../../../../providers/authentication/auth/types";
+import { UpdateAuthenticationPayload } from "../../../../../../providers/authentication/authentication/types";
+/**
+ * Returns the auth state from the session context.
+ * @param session - Session context value.
+ * @returns auth state.
+ */
+export declare function mapAuth(session: SessionContextValue): UpdateAuthStatePayload;
+/**
+ * Returns the authentication profile and status from the session context.
+ * @param session - Session context value.
+ * @returns authentication profile and status.
+ */
+export declare function mapAuthentication(session: SessionContextValue): UpdateAuthenticationPayload;

package/lib/components/Authentication/components/SessionController/components/NextSessionController/utils.js

@@ -0,0 +1,53 @@
+import { AUTH_STATUS, } from "../../../../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS, } 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) {
+    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) {
+    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) {
+    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(status, statusBySessionStatus, defaultStatus) {
+    return statusBySessionStatus[status] || defaultStatus;
+}

package/lib/components/ComponentCreator/ComponentCreator.js

@@ -1,9 +1,9 @@
 import React from "react";
-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";
 /**
  * ComponentCreator uses React API to create components based on the component configs, instead of using JSX.
  * That way we can continue to create UI components without having to worry about if they should be able to transform model data into props.
@@ -15,7 +15,7 @@ import { useSystemStatus } from "../../hooks/useSystemStatus";
  * @returns A set of React components.
  */
 export const ComponentCreator = ({ components, response, viewContext, }) => {
-    const { authenticationStatus, isAuthenticated } = useAuthentication();
+    const { authState: { isAuthenticated }, } = useAuth();
     const { config, entityConfig } = useConfig();
     const { exploreState } = useExploreState();
     const { fileManifestState } = useFileManifestState();
@@ -30,7 +30,6 @@ export const ComponentCreator = ({ components, response, viewContext, }) => {
             ? c.viewBuilder(response, {
                 ...viewContext,
                 authState: {
-                    authenticationStatus,
                     isAuthenticated,
                 },
                 entityConfig,

package/lib/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -2,9 +2,11 @@ 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 const CollapsableRows = ({ tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
+    useCollapsableRows(tableInstance);
     return (React.createElement(Fragment, null, rows.map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.

package/lib/components/Detail/components/Table/components/TableRows/tableRows.js

@@ -9,7 +9,7 @@ export const TableRows = ({ tableInstance, tableView, }) => {
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
     return (React.createElement(Fragment, null, rows.map((row) => {
-        return (React.createElement(TableRow, { id: getRowId(row), isPreview: row.getIsPreview(), key: row.id }, row.getVisibleCells().map((cell) => {
+        return (React.createElement(TableRow, { 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.
             if (cell.getIsPlaceholder())
@@ -18,17 +18,3 @@ export const TableRows = ({ tableInstance, tableView, }) => {
         })));
     })));
 };
-/**
- * Returns identifier for a row.
- * @param row - Row.
- * @returns row identifier.
- */
-function getRowId(row) {
-    const { depth, getIsGrouped, id } = row;
-    if (getIsGrouped()) {
-        return `grouped-row-${id}`;
-    }
-    if (depth > 0) {
-        return `sub-row-${id}`;
-    }
-}

package/lib/components/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.js

@@ -1,5 +1,5 @@
 import { Checkbox, FormControlLabel, FormHelperText, FormLabel, TableBody, TableCell, TableHead, TableRow, } from "@mui/material";
-import React, { Fragment } from "react";
+import React from "react";
 import { formatCountSize } from "../../../../../../utils/formatCountSize";
 import { formatFileSize } from "../../../../../../utils/formatFileSize";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -33,15 +33,14 @@ export const ExportFileSummaryForm = ({ error, fileSummaryFacet, onClearError, o
                                     } }) })),
                         React.createElement(TableCell, null, "File Count"),
                         hasFileSize && React.createElement(TableCell, null, "File Size"))),
-                React.createElement(TableBody, null,
-                    React.createElement(TableRow, null, fileSummaryFacet.terms.map(({ count, name, selected, size = 0 }) => (React.createElement(Fragment, { key: name },
-                        React.createElement(TableCell, null,
-                            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: error ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: () => {
-                                        onClearError(error, ERROR.FILE_SUMMARY_ERROR);
-                                        onFilter(fileSummaryFacet.name, name, selected);
-                                    } }), key: name, label: name })),
-                        React.createElement(TableCell, null, formatCountSize(count)),
-                        hasFileSize && (React.createElement(TableCell, null, formatFileSize(size))))))))))));
+                React.createElement(TableBody, null, fileSummaryFacet.terms.map(({ count, name, selected, size = 0 }) => (React.createElement(TableRow, { key: name },
+                    React.createElement(TableCell, null,
+                        React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: selected, checkedIcon: React.createElement(CheckedIcon, null), icon: error ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: () => {
+                                    onClearError(error, ERROR.FILE_SUMMARY_ERROR);
+                                    onFilter(fileSummaryFacet.name, name, selected);
+                                } }), key: name, label: name })),
+                    React.createElement(TableCell, null, formatCountSize(count)),
+                    hasFileSize && React.createElement(TableCell, null, formatFileSize(size))))))))));
 };
 /**
  * Returns true if the file summary facet has file size.

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/FormStep/components/AcceptTerraTOS/acceptTerraTOS.js

@@ -1,13 +1,13 @@
 import React from "react";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../../../../../../../../../hooks/useConfig";
+import { useTerraProfile } from "../../../../../../../../../../providers/authentication/terra/hook";
 import { ButtonPrimary } from "../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
 import { FormStep } from "../../formStep";
 export const AcceptTerraTOS = ({ active, completed, step, }) => {
     const { config } = useConfig();
     const { exportToTerraUrl } = config;
-    const { terraProfileLoginStatus } = useAuthentication();
+    const { terraProfileLoginStatus } = useTerraProfile();
     const isTOSAccepted = isTermsOfServiceAccepted(terraProfileLoginStatus);
     const onOpenTerra = () => {
         if (exportToTerraUrl) {

package/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/components/NIHAccountExpiryWarning/nihAccountExpiryWarning.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { expireTimeInSeconds, useAuthenticationNIHExpiry, } from "../../../../../../../../hooks/useAuthentication/useAuthenticationNIHExpiry";
+import { expireTimeInSeconds, 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/lib/components/Export/components/ExportToTerra/components/TerraSetUpForm/terraSetUpForm.js

@@ -1,6 +1,8 @@
 import { Typography } from "@mui/material";
 import React from "react";
-import { ONBOARDING_STEP, useAuthenticationForm, } from "../../../../../../hooks/useAuthentication/useAuthenticationForm";
+import { ONBOARDING_STEP, 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, GridPaper, } from "../../../../../common/Paper/paper.styles";
 import { SectionTitle } from "../../../../../common/Section/components/SectionTitle/sectionTitle";
@@ -9,8 +11,11 @@ import { ConnectTerraToNIHAccount } from "./components/FormStep/components/Conne
 import { CreateTerraAccount } from "./components/FormStep/components/CreateTerraAccount/createTerraAccount";
 import { Section, SectionContent } from "./terraSetUpForm.styles";
 export const TerraSetUpForm = () => {
-    const { isComplete, isReady, onboardingStatusByStep } = useAuthenticationForm();
-    if (!isReady)
+    const { authState: { isAuthenticated, status }, } = useAuth();
+    const { isComplete, onboardingStatusByStep } = useAuthenticationForm();
+    if (!isAuthenticated)
+        return null;
+    if (status === AUTH_STATUS.PENDING)
         return null;
     return isComplete ? null : (React.createElement(FluidPaper, null,
         React.createElement(GridPaper, null,

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.d.ts

@@ -9,9 +9,10 @@ export declare const Authentication: ({ authenticationEnabled, Button, closeMenu
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export declare function renderButton(props: MButtonProps): JSX.Element;
+export declare function renderButton(props: MButtonProps, pathname: string): JSX.Element;
 /**
  * Renders authentication icon button.
  * @param props - Button props.

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.js

@@ -1,30 +1,33 @@
 import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { IconButton as MIconButton, } from "@mui/material";
-import { useRouter } from "next/router";
-import React, { useCallback } from "react";
-import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
+import { IconButton as MIconButton, Skeleton, } from "@mui/material";
+import Router from "next/router";
+import React 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";
 export const Authentication = ({ authenticationEnabled, Button, closeMenu, }) => {
-    const { isAuthenticated, requestAuthentication, userProfile } = useAuthentication();
-    const router = useRouter();
-    const onLogout = useCallback(() => {
-        location.href = router.basePath;
-    }, [router]);
+    const { isLoading, profile } = useProfile();
     if (!authenticationEnabled)
         return null;
-    return (React.createElement(React.Fragment, null, isAuthenticated && userProfile ? (React.createElement(AuthenticationMenu, { onLogout: onLogout, userProfile: userProfile })) : (React.createElement(Button, { onClick: () => {
-            requestAuthentication();
+    if (isLoading)
+        return React.createElement(Skeleton, { height: 32, variant: "circular", width: 32 });
+    if (profile)
+        return React.createElement(AuthenticationMenu, { profile: profile });
+    return (React.createElement(Button, { onClick: async () => {
+            await Router.push(ROUTE.LOGIN);
             closeMenu();
-        } }))));
+        } }));
 };
 /**
  * Renders authentication button.
  * @param props - Button props.
+ * @param pathname - Pathname.
  * @returns button.
  */
-export function renderButton(props) {
-    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav", ...props }, "Sign in"));
+export function renderButton(props, pathname) {
+    return (React.createElement(StyledButton, { startIcon: React.createElement(LoginRoundedIcon, null), variant: isNavigationLinkSelected(pathname, [ROUTE.LOGIN]) ? "activeNav" : "nav", ...props }, "Sign in"));
 }
 /**
  * Renders authentication icon button.

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.d.ts

@@ -1,6 +1,5 @@
-import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
+import { UserProfile } from "../../../../../../../../../../../../providers/authentication/authentication/types";
 export interface AuthenticationMenuProps {
-    onLogout: () => void;
-    userProfile: UserProfile;
+    profile: UserProfile;
 }
-export declare const AuthenticationMenu: ({ onLogout, userProfile, }: AuthenticationMenuProps) => JSX.Element;
+export declare const AuthenticationMenu: ({ profile, }: AuthenticationMenuProps) => JSX.Element;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.js

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

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

@@ -16,7 +16,7 @@ export declare const UserNames: import("@emotion/styled").StyledComponent<import
 }, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "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" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const Avatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & 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;
 }, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
     theme?: import("@emotion/react").Theme;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.js

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { Avatar as MAvatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
+import { Avatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
 export const AuthenticationMenu = styled(MMenu) `
   margin: 4px 0;
 `;
@@ -22,7 +22,7 @@ export const UserNames = styled(Typography) `
   font-weight: 500;
   max-width: 200px;
 `;
-export const Avatar = styled(MAvatar) `
+export const StyledAvatar = styled(Avatar) `
   height: 32px;
   width: 32px;
 `;

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

@@ -0,0 +1,2 @@
+import { MenuProps } from "@mui/material";
+export declare const MENU_PROPS: Partial<MenuProps>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/constants.js

@@ -0,0 +1,14 @@
+import { VARIANT } from "../../../../../../../../../../../../styles/common/mui/paper";
+import { POPOVER_ORIGIN_HORIZONTAL, POPOVER_ORIGIN_VERTICAL, } from "../../../../../../../../../../../../styles/common/mui/popover";
+export const MENU_PROPS = {
+    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/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.js

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

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

@@ -49,7 +49,7 @@ export const Header = ({ ...headerProps }) => {
                                 : renderSearchButton(props), closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
                         React.createElement(Authentication, { Button: ({ ...props }) => isIn.isMenuIn
                                 ? renderAuthenticationIconButton(props)
-                                : renderAuthenticationButton(props), authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+                                : renderAuthenticationButton(props, pathname), authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
                         actions,
                         React.createElement(Menu, { ...navigationProps, closeMenu: onClose, isMenuIn: isIn.isMenuIn, open: open, openMenu: onOpen }))))))));
 };

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -1,26 +1,27 @@
 import Link from "next/link";
-import React, { useCallback } from "react";
+import React from "react";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
 import { ExploreActionKind, } from "../../../../../../providers/exploreState";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../common/entities";
 const PARAM_FILTER = "filter";
+const PARAM_GROUPING = "grouping";
 const PARAM_SORTING = "sorting";
 export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TARGET.SELF, url, }) => {
     const { exploreDispatch, exploreState } = useExploreState();
     if (!isValidExploreURL(url, exploreState)) {
         throwError(url);
     }
-    const onNavigate = useCallback(() => {
-        const entityListType = getEntityListType(url.href);
-        const filters = getSelectedFilters(url.query);
-        const sorting = getSorting(url.query);
-        exploreDispatch({
-            payload: { entityListType, filters, sorting },
-            type: ExploreActionKind.UpdateEntityFilters,
-        });
-        onClick?.();
-    }, [exploreDispatch, onClick, url]);
-    return (React.createElement(Link, { className: className, href: url.href, onClick: onNavigate, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
+    const entityListType = getEntityListType(url.href);
+    const filters = getSelectedFilters(url.query);
+    const grouping = getGrouping(url.query);
+    const sorting = getSorting(url.query);
+    return (React.createElement(Link, { className: className, href: url.href, onClick: () => {
+            exploreDispatch({
+                payload: { entityListType, filters, grouping, sorting },
+                type: ExploreActionKind.UpdateEntityFilters,
+            });
+            onClick?.();
+        }, rel: REL_ATTRIBUTE.NO_OPENER, target: target }, label));
 };
 /**
  * Returns the entity list type "entityListType" inferred from the given href.
@@ -30,6 +31,16 @@ export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TAR
 function getEntityListType(href) {
     return href.substring(href.lastIndexOf("/") + 1);
 }
+/**
+ * Returns the grouping from the given query.
+ * @param query - Query.
+ * @returns grouping.
+ */
+function getGrouping(query) {
+    const decodedQuery = decodeURIComponent(query);
+    const parsedQuery = JSON.parse(decodedQuery);
+    return parsedQuery[PARAM_GROUPING];
+}
 /**
  * Returns the selected filters from the given query.
  * @param query - Query.

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

@@ -0,0 +1,2 @@
+import { Props } from "./types";
+export declare const Button: ({ className, ...props }: Props) => JSX.Element;