@databiosphere/findable-ui 21.2.0 → 21.4.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "21.2.0"
+  ".": "21.4.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [21.4.0](https://github.com/DataBiosphere/findable-ui/compare/v21.3.0...v21.4.0) (2025-02-28)
+
+
+### Features
+
+* added check login required for export/download [#283](https://github.com/DataBiosphere/findable-ui/issues/283) ([#324](https://github.com/DataBiosphere/findable-ui/issues/324)) ([badb6ab](https://github.com/DataBiosphere/findable-ui/commit/badb6abe9319625a7fdabfe290434a05115cc2a9))
+* use anchor tags for all header and footer links ([#297](https://github.com/DataBiosphere/findable-ui/issues/297)) ([#322](https://github.com/DataBiosphere/findable-ui/issues/322)) ([95effbf](https://github.com/DataBiosphere/findable-ui/commit/95effbfcdb65d71d10141c287b34043086c261e5))
+
+## [21.3.0](https://github.com/DataBiosphere/findable-ui/compare/v21.2.0...v21.3.0) (2025-02-14)
+
+
+### Features
+
+* add data dictionary tooltip support [#4131](https://github.com/DataBiosphere/findable-ui/issues/4131) ([#320](https://github.com/DataBiosphere/findable-ui/issues/320)) ([849e5cf](https://github.com/DataBiosphere/findable-ui/commit/849e5cf5898f71be210436863c9b10baf85a8427))
+
 ## [21.2.0](https://github.com/DataBiosphere/findable-ui/compare/v21.1.1...v21.2.0) (2025-02-12)
 
 

package/lib/common/entities.d.ts

@@ -1,3 +1,11 @@
+/**
+ * Model of a value of a metadata class.
+ */
+export interface Attribute {
+    description: string;
+    key: string;
+    label: string;
+}
 /**
  * Filterable metadata keys.
  */
@@ -10,10 +18,34 @@ export interface CategoryTag {
     onRemove: () => void;
     superseded: boolean;
 }
+/**
+ * Model of a metadata class, to be specified manually or built from LinkML schema.
+ */
+export interface Class {
+    attributes: Attribute[];
+    description: string;
+    key: string;
+    label: string;
+    name: string;
+}
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
 export type CategoryValueKey = unknown;
+/**
+ * Model of a metadata dictionary containing a set of classes and their definitions.
+ */
+export interface DataDictionary {
+    classes: Class[];
+}
+/**
+ * Label and description values from a data dictionary that are added to a site
+ * config value.
+ */
+export interface DataDictionaryAnnotation {
+    description: string;
+    label: string;
+}
 /**
  * Set of selected category values.
  */
@@ -63,6 +95,7 @@ export interface SelectCategoryValueView {
  * View model of category, for multiselect categories.
  */
 export interface SelectCategoryView {
+    annotation?: DataDictionaryAnnotation;
     isDisabled?: boolean;
     key: CategoryKey;
     label: string;

package/lib/components/DataDictionary/common/utils.d.ts

@@ -0,0 +1,38 @@
+import { DataDictionaryAnnotation } from "../../../common/entities";
+import { SiteConfig } from "../../../config/entities";
+/**
+ * Annotate each entity column configuration with data dictionary values. Specifically,
+ * look up label and description for each column key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateColumnConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;
+/**
+ * Annotate filter and colummn configuration with data dictionary values. Note this
+ * functionality mutates the site config. A possible future improvement would be to
+ * create either a specific "raw"  or "annotated" type to indicate clearly the point
+ * at which the config has been annotated.
+ * @param siteConfig - The site configuration to annotate.
+ */
+export declare function annotateSiteConfig(siteConfig: SiteConfig): void;
+/**
+ * Annotate entity configuration with data dictionary values. Specifically, look
+ * up label and description for each entity key.
+ * @param siteConfig - The site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateEntityConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;
+/**
+ * Annotate top-level (app-wide) category config with data dictionary values.
+ * Specifically, look up label and description for each filter key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateDefaultCategoryConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;
+/**
+ * Annotate entity-specific category config with data dictionary values. Specifically,
+ * look up label and description for each category key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export declare function annotateEntityCategoryConfig(siteConfig: SiteConfig, annotationsByKey: Record<string, DataDictionaryAnnotation>): void;

package/lib/components/DataDictionary/common/utils.js

@@ -0,0 +1,122 @@
+/**
+ * Annotate each entity column configuration with data dictionary values. Specifically,
+ * look up label and description for each column key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateColumnConfig(siteConfig, annotationsByKey) {
+    // Annotate every column in every entity.
+    siteConfig.entities.forEach((entity) => {
+        entity.list.columns.forEach((columnConfig) => {
+            // Find the annotation for the column key.
+            const annotation = annotationsByKey[columnConfig.id];
+            if (!annotation) {
+                return;
+            }
+            if (!columnConfig.meta) {
+                columnConfig.meta = {};
+            }
+            columnConfig.meta.annotation = annotation;
+        });
+    });
+}
+/**
+ * Annotate filter and colummn configuration with data dictionary values. Note this
+ * functionality mutates the site config. A possible future improvement would be to
+ * create either a specific "raw"  or "annotated" type to indicate clearly the point
+ * at which the config has been annotated.
+ * @param siteConfig - The site configuration to annotate.
+ */
+export function annotateSiteConfig(siteConfig) {
+    // Build and map data dictionary annotations by key.
+    const { dataDictionary } = siteConfig;
+    if (!dataDictionary) {
+        return;
+    }
+    const annotationsByKey = keyAnnotationsByKey(dataDictionary);
+    // Annotate elements of site config.
+    annotateEntityConfig(siteConfig, annotationsByKey);
+    annotateDefaultCategoryConfig(siteConfig, annotationsByKey);
+    annotateEntityCategoryConfig(siteConfig, annotationsByKey);
+    annotateColumnConfig(siteConfig, annotationsByKey);
+}
+/**
+ * Annotate entity configuration with data dictionary values. Specifically, look
+ * up label and description for each entity key.
+ * @param siteConfig - The site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateEntityConfig(siteConfig, annotationsByKey) {
+    // Annotate every entity.
+    siteConfig.entities.forEach((entityConfig) => {
+        // Check entity for a data dictionary key.
+        const { key } = entityConfig;
+        if (!key) {
+            return;
+        }
+        // Find corresponding annotation for the key and set on entity config.
+        entityConfig.annotation = annotationsByKey[key];
+    });
+}
+/**
+ * Annotate top-level (app-wide) category config with data dictionary values.
+ * Specifically, look up label and description for each filter key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateDefaultCategoryConfig(siteConfig, annotationsByKey) {
+    const { categoryGroupConfig } = siteConfig;
+    if (categoryGroupConfig) {
+        annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey);
+    }
+}
+/**
+ * Annotate entity-specific category config with data dictionary values. Specifically,
+ * look up label and description for each category key.
+ * @param siteConfig - Site configuration to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+export function annotateEntityCategoryConfig(siteConfig, annotationsByKey) {
+    // Annotate every category in every entity.
+    siteConfig.entities.forEach((entityConfig) => {
+        const { categoryGroupConfig } = entityConfig;
+        if (categoryGroupConfig) {
+            annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey);
+        }
+    });
+}
+/**
+ * Annonate category group configuration with data dictionary values.
+ * @param categoryGroupConfig - Category group to annotate.
+ * @param annotationsByKey - Data dictionary annotations keyed by key.
+ */
+function annotateCategoryGroupConfig(categoryGroupConfig, annotationsByKey) {
+    categoryGroupConfig.categoryGroups.forEach((categoryGroup) => {
+        categoryGroup.categoryConfigs.forEach((categorConfig) => {
+            categorConfig.annotation = annotationsByKey[categorConfig.key];
+        });
+    });
+}
+/**
+ * Transform a data dictionary into a key-annotation map. Build annotations for both
+ * classes and attributes and add to map.
+ * @param dataDictionary - Data dictionary to transform into a key-annotation map.
+ * @returns Key-annotation map.
+ */
+function keyAnnotationsByKey(dataDictionary) {
+    return dataDictionary.classes.reduce((acc, cls) => {
+        // Add class to map.
+        acc[cls.key] = {
+            description: cls.description,
+            label: cls.label,
+        };
+        // Add each class attribute to the map.
+        cls.attributes.forEach((attribute) => {
+            acc[attribute.key] = {
+                description: attribute.description,
+                label: attribute.label,
+            };
+        });
+        return acc;
+    }, {});
+}

package/lib/components/Export/components/ExportForm/components/ExportButton/exportButton.js

@@ -2,12 +2,17 @@ import { Tooltip } from "@mui/material";
 import React from "react";
 import { useDownloadStatus } from "../../../../../../hooks/useDownloadStatus";
 import { useFileManifestState } from "../../../../../../hooks/useFileManifestState";
+import { useLoginGuard } from "../../../../../../providers/loginGuard/hook";
 import { ButtonPrimary } from "../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
 export const ExportButton = ({ Button = ButtonPrimary, children, onClick, }) => {
     const downloadStatus = useDownloadStatus();
     const { fileManifestState: { isLoading }, } = useFileManifestState();
+    // Prompt user for login before export, if required.
+    const { requireLogin } = useLoginGuard();
     return (React.createElement(Tooltip, { arrow: true, title: isLoading ? null : downloadStatus.message },
         React.createElement("span", null,
-            React.createElement(Button, { disabled: isLoading || downloadStatus.disabled || downloadStatus.isLoading, onClick: onClick },
+            React.createElement(Button, { disabled: isLoading || downloadStatus.disabled || downloadStatus.isLoading, onClick: () => {
+                    requireLogin(onClick);
+                } },
                 React.createElement("span", null, children)))));
 };

package/lib/components/Export/components/ManifestDownload/components/ManifestDownloadEntity/components/FileManifestDownload/fileManifestDownload.js

@@ -3,6 +3,7 @@ import copy from "copy-to-clipboard";
 import React, { useRef } from "react";
 import { useDownloadStatus } from "../../../../../../../../hooks/useDownloadStatus";
 import { useFileManifestDownload } from "../../../../../../../../hooks/useFileManifest/useFileManifestDownload";
+import { useLoginGuard } from "../../../../../../../../providers/loginGuard/hook";
 import { ButtonGroup } from "../../../../../../../common/ButtonGroup/buttonGroup";
 import { ButtonGroupButton } from "../../../../../../../common/ButtonGroup/components/ButtonGroupButton/buttonGroupButton";
 import { ContentCopyIconSmall, DownloadIconSmall, } from "../../../../../../../common/CustomIcon/common/constants";
@@ -16,6 +17,8 @@ export const FileManifestDownload = ({ filters, }) => {
     const { fileName, isIdle, isLoading, manifestURL } = useFileManifestDownload(filters, disabled);
     const isInProgress = (isIdle || isLoading) && !disabled;
     const isReady = Boolean(manifestURL) || disabled;
+    // Prompt user for login before download and copy, if required.
+    const { requireLogin } = useLoginGuard();
     // Copies file manifest.
     const copyManifestURL = (url) => {
         if (!url)
@@ -39,8 +42,8 @@ export const FileManifestDownload = ({ filters, }) => {
                                 React.createElement(Tooltip, { arrow: true, title: message },
                                     React.createElement("span", null,
                                         React.createElement(ButtonGroup, { Buttons: [
-                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: downloadManifestURL }),
-                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => copyManifestURL(manifestURL) }),
+                                                React.createElement(ButtonGroupButton, { key: "download", action: "Download file manifest", disabled: disabled, label: React.createElement(DownloadIconSmall, null), onClick: () => requireLogin(downloadManifestURL) }),
+                                                React.createElement(ButtonGroupButton, { key: "copy", action: "Copy file manifest", disabled: disabled, label: React.createElement(ContentCopyIconSmall, null), onClick: () => requireLogin(() => copyManifestURL(manifestURL)) }),
                                             ] })))),
                             React.createElement(TableCell, null, fileName))) : (React.createElement(TableCell, null, "The manifest is not available for this project.")))))))));
 };

package/lib/components/Filter/components/Filter/filter.js

@@ -48,7 +48,7 @@ export const Filter = ({ categorySection, categoryView, closeAncestor, isFilterD
         trackFilterOpened?.({ category: categoryView.key });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(FilterLabel, { count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
+        React.createElement(FilterLabel, { annotation: categoryView.annotation, count: categoryView.values.length, disabled: categoryView.isDisabled, isOpen: isOpen, label: categoryView.label, onClick: onOpenFilter }),
         React.createElement(FilterPopover, { anchorPosition: anchorPosition, anchorReference: "anchorPosition", marginThreshold: 0, onClose: onCloseFilters, open: isOpen, slotProps: slotProps, TransitionComponent: TransitionComponent, transitionDuration: TransitionDuration },
             isOpen && isFilterDrawer && (React.createElement(IconButton, { Icon: CloseRounded, onClick: onCloseFilters, size: "medium" })),
             React.createElement(FilterMenu, { categorySection: categorySection, categoryKey: categoryView.key, categoryLabel: categoryView.label, isFilterDrawer: isFilterDrawer, onFilter: onFilter, onCloseFilter: onCloseFilter, values: categoryView.values })),

package/lib/components/Filter/components/FilterLabel/filterLabel.d.ts

@@ -1,9 +1,11 @@
 import { MouseEvent } from "react";
+import { DataDictionaryAnnotation } from "../../../../common/entities";
 export interface FilterLabelProps {
+    annotation?: DataDictionaryAnnotation;
     count?: number;
     disabled?: boolean;
     isOpen: boolean;
     label: string;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const FilterLabel: ({ count, disabled, isOpen, label, onClick, }: FilterLabelProps) => JSX.Element;
+export declare const FilterLabel: ({ annotation, count, disabled, isOpen, label, onClick, }: FilterLabelProps) => JSX.Element;

package/lib/components/Filter/components/FilterLabel/filterLabel.js

@@ -1,7 +1,9 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 import React from "react";
+import { Tooltip } from "../../../DataDictionary/components/Tooltip/tooltip";
 import { FilterLabel as Label } from "./filterLabel.styles";
-export const FilterLabel = ({ count, disabled = false, isOpen, label, onClick, }) => {
+export const FilterLabel = ({ annotation, count, disabled = false, isOpen, label, onClick, }) => {
     const filterLabel = count ? `${label}\xa0(${count})` : label; // When the count is present, a non-breaking space is used to prevent it from being on its own line
-    return (React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel));
+    return (React.createElement(Tooltip, { description: annotation?.description, title: annotation?.label },
+        React.createElement(Label, { color: "inherit", disabled: disabled, endIcon: React.createElement(ArrowDropDownRoundedIcon, { fontSize: "small" }), fullWidth: true, isOpen: isOpen, onClick: onClick }, filterLabel)));
 };

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.js

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import { useFileLocation } from "../../../../hooks/useFileLocation";
+import { useLoginGuard } from "../../../../providers/loginGuard/hook";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
@@ -11,6 +12,8 @@ export const AzulFileDownload = ({ entityName, relatedEntityId, relatedEntityNam
     const { fileUrl, isLoading, run } = useFileLocation(url);
     const downloadRef = useRef(null);
     const [isRequestPending, setIsRequestPending] = useState(false);
+    // Prompt user for login before download, if required.
+    const { requireLogin } = useLoginGuard();
     // Initiates file download when file location request is successful.
     useEffect(() => {
         if (!fileUrl)
@@ -22,11 +25,13 @@ export const AzulFileDownload = ({ entityName, relatedEntityId, relatedEntityNam
         downloadEl.click();
         setIsRequestPending(false);
     }, [fileUrl]);
+    // Initiates file download when download button is clicked.
+    const handleDownloadClick = () => {
+        setIsRequestPending(true);
+        trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
+        run();
+    };
     return (React.createElement(Fragment, null,
-        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => {
-                setIsRequestPending(true);
-                trackFileDownloaded(entityName, relatedEntityId, relatedEntityName);
-                run();
-            }, size: "medium" })),
+        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => requireLogin(handleDownloadClick), size: "medium" })),
         React.createElement(Box, { component: "a", "data-testid": AZUL_FILE_DOWNLOAD_TEST_ID, download: true, ref: downloadRef, sx: { display: "none" } })));
 };

package/lib/components/Index/components/Tabs/common/utils.js

@@ -4,9 +4,10 @@
  * @returns tabs list.
  */
 export function getEntityListTabs(entities) {
-    return entities.reduce((acc, { label, listView: { enableTab = true } = {}, route, tabIcon: icon, tabIconPosition: iconPosition, }) => {
+    return entities.reduce((acc, { annotation, label, listView: { enableTab = true } = {}, route, tabIcon: icon, tabIconPosition: iconPosition, }) => {
         if (enableTab) {
             acc.push({
+                annotation,
                 icon,
                 iconPosition,
                 label,

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -26,7 +26,7 @@ export const NavigationMenu = ({ closeAncestor, isSelected = false, isSubMenu =
             } },
             React.createElement(MPaper, { variant: "menu" },
                 React.createElement(MClickAwayListener, { onClickAway: onClose },
-                    React.createElement(MMenuList, null,
+                    React.createElement(MMenuList, { component: "div" },
                         React.createElement(NavigationMenuItems, { closeMenu: () => {
                                 onClose();
                                 closeAncestor?.();

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenuItems/navigationMenuItems.js

@@ -1,5 +1,5 @@
-import { Divider, ListItemIcon, ListItemText, MenuItem as MMenuItem, } from "@mui/material";
-import { useRouter } from "next/router";
+import { Divider, ListItemIcon, ListItemText, Link as MLink, MenuItem as MMenuItem, } from "@mui/material";
+import Link from "next/link";
 import React, { Fragment } from "react";
 import { TEXT_BODY_400, TEXT_BODY_500, TEXT_BODY_SMALL_400_2_LINES, TEXT_UPPERCASE_500, } from "../../../../../../../../../../theme/common/typography";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../../../Links/common/entities";
@@ -8,23 +8,22 @@ import { isNavigationLinkSelected } from "../../common/utils";
 import { NavigationMenu } from "../NavigationMenu/navigationMenu";
 import { POPPER_PROPS } from "./common/constants";
 export const NavigationMenuItems = ({ closeMenu, menuItems, pathname, }) => {
-    const router = useRouter();
-    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
-        React.createElement(MMenuItem, { disabled: !url, onClick: () => {
-                closeMenu();
-                isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, selected: isNavigationLinkSelected(pathname, selectedPatterns) },
-            icon && React.createElement(ListItemIcon, null, icon),
-            React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
-                    variant: url
-                        ? description
-                            ? TEXT_BODY_500
-                            : TEXT_BODY_400
-                        : TEXT_UPPERCASE_500,
-                }, secondary: description, secondaryTypographyProps: {
-                    variant: TEXT_BODY_SMALL_400_2_LINES,
-                } })),
-        divider && React.createElement(Divider, null))))));
+    return (React.createElement(React.Fragment, null, menuItems.map(({ description, divider, icon, label, menuItems: nestedMenuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => {
+        const isClientSide = isClientSideNavigation(url);
+        return nestedMenuItems ? (React.createElement(NavigationMenu, { key: i, closeAncestor: closeMenu, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), isSubMenu: true, menuItems: nestedMenuItems, menuLabel: label, pathname: pathname, popperProps: POPPER_PROPS })) : (React.createElement(Fragment, { key: i },
+            React.createElement(MMenuItem, { component: isClientSide ? Link : MLink, disabled: !url, href: url, onClick: () => closeMenu(), rel: isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, selected: isNavigationLinkSelected(pathname, selectedPatterns), target: target },
+                icon && React.createElement(ListItemIcon, null, icon),
+                React.createElement(ListItemText, { primary: label, primaryTypographyProps: {
+                        variant: url
+                            ? description
+                                ? TEXT_BODY_500
+                                : TEXT_BODY_400
+                            : TEXT_UPPERCASE_500,
+                    }, secondary: description, secondaryTypographyProps: {
+                        variant: TEXT_BODY_SMALL_400_2_LINES,
+                    } })),
+            divider && React.createElement(Divider, null)));
+    })));
 };

package/lib/components/Layout/components/Header/components/Content/components/Navigation/constants.d.ts

@@ -0,0 +1 @@
+export declare const NAVIGATION_TEST_ID = "navigation";

package/lib/components/Layout/components/Header/components/Content/components/Navigation/constants.js

@@ -0,0 +1 @@
+export const NAVIGATION_TEST_ID = "navigation";

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.d.ts

@@ -1,6 +1,7 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { BreakpointKey } from "../../../../../../../../hooks/useBreakpointHelper";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
+import { TestIdProps } from "../../../../../../../types";
 import { SelectedMatch } from "../../../../common/entities";
 import { HeaderProps } from "../../../../header";
 import { MenuItem } from "./components/NavigationMenuItems/navigationMenuItems";
@@ -15,7 +16,7 @@ export interface NavLinkItem {
     url: string;
     visible?: Partial<Record<BreakpointKey, boolean>>;
 }
-export interface NavigationProps {
+export interface NavigationProps extends TestIdProps {
     className?: string;
     closeAncestor?: () => void;
     headerProps?: HeaderProps;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.js

@@ -1,5 +1,5 @@
-import { Button, Divider } from "@mui/material";
-import { useRouter } from "next/router";
+import { Button, Divider, Link as MLink } from "@mui/material";
+import Link from "next/link";
 import React, { forwardRef, Fragment } from "react";
 import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "../../../../../../../Links/common/entities";
 import { isClientSideNavigation } from "../../../../../../../Links/common/utils";
@@ -8,19 +8,18 @@ import { NavigationButtonLabel } from "./components/NavigationButtonLabel/naviga
 import { NavigationDrawer } from "./components/NavigationDrawer/navigationDrawer";
 import { NavigationMenu } from "./components/NavigationMenu/navigationMenu";
 import { Navigation as Links } from "./navigation.styles";
-export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, }, ref) {
-    const router = useRouter();
-    return (React.createElement(Links, { ref: ref, className: className, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => menuItems ? (React.createElement(Fragment, { key: i },
-        isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
-        divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
-        React.createElement(Button, { disabled: !url, onClick: () => {
-                closeAncestor?.();
-                isClientSideNavigation(url)
-                    ? router.push(url)
-                    : window.open(url, target, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER);
-            }, variant: isNavigationLinkSelected(pathname, selectedPatterns)
-                ? "activeNav"
-                : "nav" },
-            React.createElement(NavigationButtonLabel, { label: label })),
-        divider && React.createElement(Divider, null))))));
+export const Navigation = forwardRef(function Navigation({ className, closeAncestor, headerProps, isMenuIn = false, links, pathname, style, testId, }, ref) {
+    return (React.createElement(Links, { ref: ref, className: className, "data-testid": testId, isMenuIn: isMenuIn, style: style }, links.map(({ divider, label, menuItems, selectedPatterns, target = ANCHOR_TARGET.SELF, url, }, i) => {
+        const isClientSide = isClientSideNavigation(url);
+        return menuItems ? (React.createElement(Fragment, { key: i },
+            isMenuIn ? (React.createElement(NavigationDrawer, { closeAncestor: closeAncestor, headerProps: headerProps, isMenuIn: isMenuIn, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })) : (React.createElement(NavigationMenu, { closeAncestor: closeAncestor, isSelected: isNavigationLinkSelected(pathname, selectedPatterns), menuItems: menuItems, menuLabel: label, pathname: pathname })),
+            divider && React.createElement(Divider, null))) : (React.createElement(Fragment, { key: i },
+            React.createElement(Button, { component: isClientSide ? Link : MLink, disabled: !url, href: url, onClick: () => closeAncestor?.(), rel: isClientSide
+                    ? REL_ATTRIBUTE.NO_OPENER
+                    : REL_ATTRIBUTE.NO_OPENER_NO_REFERRER, target: target, variant: isNavigationLinkSelected(pathname, selectedPatterns)
+                    ? "activeNav"
+                    : "nav" },
+                React.createElement(NavigationButtonLabel, { label: label })),
+            divider && React.createElement(Divider, null)));
+    })));
 });

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

@@ -7,6 +7,7 @@ import { Actions } from "./components/Content/components/Actions/actions";
 import { Authentication, renderButton as renderAuthenticationButton, renderIconButton as renderAuthenticationIconButton, } from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
 import { renderButton as renderSearchButton, renderIconButton as renderSearchIconButton, Search, } from "./components/Content/components/Actions/components/Search/search";
+import { NAVIGATION_TEST_ID } from "./components/Content/components/Navigation/constants";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -38,7 +39,7 @@ export const Header = ({ ...headerProps }) => {
                     isIn.isSloganIn && React.createElement(Slogan, { slogan: slogan }),
                     isIn.isLeftNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsL })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isCenterGroupIn },
-                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsC })))),
+                React.createElement(Center, null, isIn.isCenterNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, testId: NAVIGATION_TEST_ID, links: navItemsC })))),
             React.createElement(Fade, { ...FADE_TRANSITION_PROPS, in: isIn.isRightGroupIn },
                 React.createElement(Right, null,
                     isIn.isRightNavigationIn && (React.createElement(DXNavigation, { ...navigationProps, links: navItemsR })),

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

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

package/lib/components/Login/components/Buttons/buttons.d.ts

@@ -0,0 +1,2 @@
+import { Props } from "./types";
+export declare const Buttons: <P>({ className, handleLogin, providers, ...props }: Props<P>) => JSX.Element[];

package/lib/components/Login/components/Buttons/buttons.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Button } from "../Button/button";
+export const Buttons = ({ className, handleLogin, providers = [], ...props /* Mui ButtonProps */ }) => {
+    return providers?.map((provider) => (React.createElement(Button, { key: provider.id, className: className, endIcon: "icon" in provider && provider.icon, onClick: () => handleLogin(provider.id), ...props }, provider.name)));
+};

package/lib/components/Login/components/Buttons/types.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "@mui/material";
+import { ClientSafeProvider } from "next-auth/react";
+import { OAuthProvider } from "../../../../config/entities";
+import { BaseComponentProps } from "../../../../theme/common/entities";
+export interface Props<P> extends BaseComponentProps, ButtonProps {
+    handleLogin: (providerId: string) => void;
+    providers?: ClientSafeProvider[] | OAuthProvider<P>[];
+}

package/lib/components/Login/components/Buttons/types.js

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

package/lib/components/Login/components/Section/components/Consent/consent.d.ts

@@ -0,0 +1,3 @@
+import { BaseComponentProps } from "../../../../../types";
+import { ConsentProps } from "./types";
+export declare const Consent: ({ children, className, handleConsent, isDisabled, isError, ...props }: BaseComponentProps & ConsentProps) => JSX.Element | null;

package/lib/components/Login/components/Section/components/Consent/consent.js

@@ -0,0 +1,14 @@
+import { Checkbox, Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedErrorIcon } from "../../../../../common/CustomIcon/components/UncheckedErrorIcon/uncheckedErrorIcon";
+import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { StyledGrid2 } from "./consent.styles";
+export const Consent = ({ children, className, handleConsent, isDisabled, isError, ...props /* Mui Grid2Props */ }) => {
+    if (isDisabled)
+        return null;
+    return (React.createElement(StyledGrid2, { className: className, ...props },
+        React.createElement(Checkbox, { checkedIcon: React.createElement(CheckedIcon, null), icon: isError ? React.createElement(UncheckedErrorIcon, null) : React.createElement(UncheckedIcon, null), onChange: handleConsent }),
+        React.createElement(Typography, { variant: TEXT_BODY_400 }, children)));
+};

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledGrid2: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, ("fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "color" | "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") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.styles.js

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Grid2 } from "@mui/material";
+export const StyledGrid2 = styled(Grid2) `
+  align-items: center;
+  align-self: flex-start;
+  display: flex;
+  gap: 12px;
+
+  .MuiTypography-text-body-400 {
+    .MuiLink-root {
+      color: inherit;
+    }
+  }
+`;