@centreon/ui 24.4.10 → 24.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.10",
+  "version": "24.4.12",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Icon/index.tsx

@@ -21,7 +21,7 @@ type Props = {
   ariaLabel?: string;
   className?: string;
   onClick: (event) => void;
-  title?: string;
+  title?: string | JSX.Element;
   tooltipClassName?: string;
   tooltipPlacement?:
     | 'bottom'

package/src/Listing/Listing.cypress.spec.tsx

@@ -77,9 +77,9 @@ const mountListing = (): void => {
           subItems={{
             canCheckSubItems: false,
             enable: true,
+            getRowProperty: () => 'subItems',
             labelCollapse: 'Collapse',
-            labelExpand: 'Expand',
-            rowProperty: 'subItems'
+            labelExpand: 'Expand'
           }}
           totalRows={10}
         />

package/src/Listing/index.stories.tsx

@@ -387,9 +387,9 @@ export const ListingWithSubItems = {
     subItems: {
       canCheckSubItems: false,
       enable: true,
+      getRowProperty: () => 'subItems',
       labelCollapse: 'Collapse',
-      labelExpand: 'Expand',
-      rowProperty: 'subItems'
+      labelExpand: 'Expand'
     },
     totalRows: 10
   },

package/src/Listing/index.tsx

@@ -121,9 +121,9 @@ export interface Props<TRow> {
   subItems?: {
     canCheckSubItems: boolean;
     enable: boolean;
+    getRowProperty: (row?) => string;
     labelCollapse: string;
     labelExpand: string;
-    rowProperty: string;
   };
   totalRows?: number;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -176,9 +176,9 @@ const Listing = <TRow extends { id: RowId }>({
   subItems = {
     canCheckSubItems: false,
     enable: false,
+    getRowProperty: () => '',
     labelCollapse: 'Collapse',
-    labelExpand: 'Expand',
-    rowProperty: ''
+    labelExpand: 'Expand'
   }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
@@ -211,10 +211,10 @@ const Listing = <TRow extends { id: RowId }>({
         ? reduce<TRow, Array<TRow>>(
             (acc, row): Array<TRow> => {
               if (
-                row[subItems.rowProperty] &&
+                row[subItems.getRowProperty()] &&
                 subItemsPivots.includes(row.id)
               ) {
-                return [...acc, row, ...row[subItems.rowProperty]];
+                return [...acc, row, ...row[subItems.getRowProperty()]];
               }
 
               return [...acc, row];
@@ -449,7 +449,7 @@ const Listing = <TRow extends { id: RowId }>({
       reduce<TRow | number, Array<string | number>>(
         (acc, row) => [
           ...acc,
-          ...pluck('id', row[subItems?.rowProperty || ''] || [])
+          ...pluck('id', row[subItems?.getRowProperty() || ''] || [])
         ],
         [],
         rows
@@ -620,7 +620,7 @@ const Listing = <TRow extends { id: RowId }>({
                             listingVariant={listingVariant}
                             row={row}
                             rowColorConditions={rowColorConditions}
-                            subItemsRowProperty={subItems?.rowProperty}
+                            subItemsRowProperty={subItems?.getRowProperty(row)}
                           />
                         ))}
                       </ListingRow>

package/src/ThemeProvider/index.tsx

@@ -147,6 +147,30 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
+        ::-webkit-scrollbar {
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+          background-color: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          };
+          border-radius: ${theme.spacing(0.5)};
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background-color: ${theme.palette.primary.main};
+        }
+        * {
+          scrollbar-color: ${
+            equals(mode, 'dark')
+              ? theme.palette.divider
+              : theme.palette.text.disabled
+          } ${theme.palette.background.default};
+          scrollbar-width: thin;
+        }
         html {
           margin: 0;
           padding: 0;

package/src/components/Button/Icon/IconButton.tsx

@@ -1,6 +1,9 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import { IconButton as MuiIconButton } from '@mui/material';
+import {
+  IconButton as MuiIconButton,
+  IconButtonProps as MuiIconButtonProps
+} from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
@@ -23,7 +26,8 @@ type IconButtonProps = {
   size?: 'small' | 'medium' | 'large';
   variant?: 'primary' | 'secondary' | 'ghost';
 } & AriaLabelingAttributes &
-  DataTestAttributes;
+  DataTestAttributes &
+  MuiIconButtonProps;
 
 /**
  * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -14,7 +14,7 @@ export const PageLayout = ({
   const { classes } = useStyles();
 
   return (
-    <section className={classes.pageLayout} data-variant={variant}>
+    <section className={classes.pageLayout} data-variant={variant} id="page">
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -17,6 +17,7 @@ export const PageLayoutActions = ({
     <section
       className={classes.pageLayoutActions}
       data-row-reverse={rowReverse}
+      id="actions"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,6 +17,7 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
+      id="page-body"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -11,5 +11,9 @@ export const PageLayoutHeader = ({
 }: PageLayoutHeaderProps): JSX.Element => {
   const { classes } = useStyles();
 
-  return <header className={classes.pageLayoutHeader}>{children}</header>;
+  return (
+    <header className={classes.pageLayoutHeader} id="header">
+      {children}
+    </header>
+  );
 };

package/src/components/Layout/PageLayout/PageQuickAccess.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from 'react-i18next';
+
+import AddIcon from '@mui/icons-material/Add';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+import { Button, Menu } from '../..';
+
+interface NamedEntity {
+  id: number | string;
+  name: string;
+}
+
+type Props = {
+  create: () => void;
+  elements: Array<NamedEntity>;
+  goBack: () => void;
+  isActive: (id: number | string) => boolean;
+  labels: {
+    create: string;
+    goBack: string;
+  };
+  navigateToElement: (id: number | string) => () => void;
+};
+
+export const PageQuickAccess = ({
+  elements,
+  isActive,
+  navigateToElement,
+  goBack,
+  create,
+  labels
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Menu>
+      <Menu.Button data-testid="quickaccess" />
+      <Menu.Items>
+        {elements &&
+          elements.map((element) => (
+            <Menu.Item
+              key={`${element.id}`}
+              onClick={navigateToElement(element.id)}
+              {...(isActive(element.id) && {
+                isActive: true,
+                isDisabled: true
+              })}
+            >
+              {element.name}
+            </Menu.Item>
+          ))}
+        <Menu.Divider key="divider" />
+        <Menu.Item key="create">
+          <>
+            <Button
+              icon={<ArrowBackIcon />}
+              iconVariant="start"
+              variant="ghost"
+              onClick={goBack}
+            >
+              {t(labels.goBack)}
+            </Button>
+            <Button
+              icon={<AddIcon />}
+              iconVariant="start"
+              variant="secondary"
+              onClick={create}
+            >
+              {t(labels.create)}
+            </Button>
+          </>
+        </Menu.Item>
+      </Menu.Items>
+    </Menu>
+  );
+};

package/src/components/Layout/PageLayout/index.ts

@@ -2,9 +2,11 @@ import { PageLayout as PageLayoutRoot } from './PageLayout';
 import { PageLayoutHeader } from './PageLayoutHeader';
 import { PageLayoutBody } from './PageLayoutBody';
 import { PageLayoutActions } from './PageLayoutActions';
+import { PageQuickAccess } from './PageQuickAccess';
 
 export const PageLayout = Object.assign(PageLayoutRoot, {
   Actions: PageLayoutActions,
   Body: PageLayoutBody,
-  Header: PageLayoutHeader
+  Header: PageLayoutHeader,
+  QuickAccess: PageQuickAccess
 });

package/src/components/Layout/PageLayout.cypress.spec.tsx

@@ -0,0 +1,66 @@
+import { T } from 'ramda';
+
+import { PageHeader } from '..';
+
+import { AreaIndicator } from './AreaIndicator';
+
+import { PageLayout } from '.';
+
+const initialize = (): void => {
+  cy.mount({
+    Component: (
+      <PageLayout>
+        <PageLayout.Header>
+          <PageHeader>
+            <PageHeader.Menu>
+              <PageLayout.QuickAccess
+                create={cy.stub()}
+                elements={[
+                  {
+                    id: 1,
+                    name: 'Entity'
+                  }
+                ]}
+                goBack={cy.stub()}
+                isActive={T}
+                labels={{
+                  create: 'Create',
+                  goBack: 'Go back'
+                }}
+                navigateToElement={cy.stub()}
+              />
+            </PageHeader.Menu>
+            <PageHeader.Main>
+              <PageHeader.Title description="Description" title="Title" />
+            </PageHeader.Main>
+            <PageHeader.Actions>Actions</PageHeader.Actions>
+          </PageHeader>
+        </PageLayout.Header>
+        <PageLayout.Body>
+          <PageLayout.Actions>
+            <AreaIndicator name="Body actions" />
+          </PageLayout.Actions>
+          <h1>Content</h1>
+        </PageLayout.Body>
+      </PageLayout>
+    )
+  });
+};
+
+describe('Page layout', () => {
+  beforeEach(initialize);
+
+  it('displays the page layout', () => {
+    cy.makeSnapshot();
+  });
+
+  it('opens the quick access poppin when the corresponding logo is displayed', () => {
+    cy.findByTestId('quickaccess').click();
+
+    cy.contains('Entity').should('be.visible');
+    cy.contains('Create').should('be.visible');
+    cy.contains('Go back').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});