@centreon/ui 24.4.48 → 24.4.49

package/src/components/DataTable/DataTable.cypress.spec.tsx

@@ -0,0 +1,193 @@
+import { Box } from '@mui/material';
+
+import { ColumnType } from '../../Listing/models';
+
+import { DataTable } from '.';
+
+const data = Array(5)
+  .fill(0)
+  .map((_, idx) => ({
+    description: `Description ${idx}`,
+    id: idx,
+    title: `Entity ${idx}`
+  }));
+
+const initializeDataTableGrid = ({
+  hasActions,
+  hasCardAction,
+  canDelete
+}): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable variant="grid">
+        {data.map(({ title, description }) => (
+          <DataTable.Item
+            description={description}
+            hasActions={hasActions}
+            hasCardAction={hasCardAction}
+            key={title}
+            labelsDelete={{
+              cancel: 'Cancel',
+              confirm: {
+                label: 'Delete'
+              }
+            }}
+            title={title}
+            onDelete={canDelete ? cy.stub() : undefined}
+          />
+        ))}
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableEmpty = (canCreate = false): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable isEmpty variant="grid">
+        <DataTable.EmptyState
+          canCreate={canCreate}
+          labels={{
+            actions: {
+              create: 'Create'
+            },
+            title: 'Welcome'
+          }}
+          onCreate={cy.stub()}
+        />
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableListing = (): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <Box sx={{ height: '100vh' }}>
+        <DataTable variant="listing">
+          <DataTable.Listing
+            columns={[
+              {
+                getFormattedString: (row) => row.title,
+                id: 'title',
+                label: 'Title',
+                type: ColumnType.string
+              },
+              {
+                getFormattedString: (row) => row.description,
+                id: 'description',
+                label: 'Description',
+                type: ColumnType.string
+              }
+            ]}
+            rows={data}
+          />
+        </DataTable>
+      </Box>
+    )
+  });
+};
+
+describe('DataTable: Grid', () => {
+  it('displays items with title and description only', () => {
+    initializeDataTableGrid({
+      canDelete: false,
+      hasActions: false,
+      hasCardAction: false
+    });
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with actions', () => {
+    initializeDataTableGrid({
+      canDelete: false,
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('edit access rights').should('have.length', 5);
+    cy.findAllByLabelText('edit').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with delete action', () => {
+    initializeDataTableGrid({
+      canDelete: true,
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action only', () => {
+    initializeDataTableGrid({
+      canDelete: false,
+      hasActions: false,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action and bottom actions', () => {
+    initializeDataTableGrid({
+      canDelete: true,
+      hasActions: true,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+    cy.findAllByLabelText('delete').should('have.length', 5);
+    cy.findAllByLabelText('edit access rights').should('have.length', 5);
+    cy.findAllByLabelText('edit').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Empty', () => {
+  it('displays the title', () => {
+    initializeDataTableEmpty();
+
+    cy.contains('Welcome').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title and the action button', () => {
+    initializeDataTableEmpty(true);
+
+    cy.contains('Welcome').should('be.visible');
+    cy.contains('Create').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Listing', () => {
+  it('displays the listing', () => {
+    initializeDataTableListing();
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { Box } from '@mui/material';
+
+import { ColumnType } from '../../Listing/models';
+
 import { DataTable } from './index';
 
 const meta: Meta<typeof DataTable> = {
@@ -49,3 +53,39 @@ export const withFixedHeightContainer: Story = {
     </div>
   )
 };
+
+const ListingTemplate = (args): JSX.Element => (
+  <Box sx={{ height: '80vh' }}>
+    <DataTable {...args} />
+  </Box>
+);
+
+export const listing: Story = {
+  args: {
+    children: (
+      <DataTable.Listing
+        columns={[
+          {
+            getFormattedString: (row) => row.title,
+            id: 'title',
+            label: 'Title',
+            type: ColumnType.string
+          },
+          {
+            getFormattedString: (row) => row.description,
+            id: 'description',
+            label: 'Description',
+            type: ColumnType.string
+          }
+        ]}
+        rows={[...Array(5)].map((_, i) => ({
+          description: `Item description ${i}`,
+          id: i,
+          title: `Item ${i}`
+        }))}
+      />
+    ),
+    variant: 'listing'
+  },
+  render: ListingTemplate
+};

package/src/components/DataTable/DataTable.styles.ts

@@ -10,6 +10,9 @@ const useStyles = makeStyles()((theme) => ({
       gridGap: theme.spacing(2.5),
       gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
     },
+    '&[data-variant="listing"]': {
+      height: '100%'
+    },
     '&[data-variant][data-is-empty="true"]': {
       display: 'flex',
       justifyContent: 'center',

package/src/components/DataTable/DataTable.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './DataTable.styles';
 
 type DataTableProps = {
-  children: ReactNode | Array<ReactNode>;
+  children?: ReactNode | Array<ReactNode>;
   isEmpty?: boolean;
-  variant?: 'grid';
+  variant: 'grid' | 'listing';
 };
 
 /** *

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -1,13 +1,18 @@
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
+  actions: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
   dataTableItem: {
     '& .MuiCardActionArea-root': {
       alignItems: 'flex-start',
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
-      justifyContent: 'space-between'
+      justifyContent: 'flex-start'
     },
     '& .MuiCardActions-root': {
       '& > span': {
@@ -15,13 +20,13 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1)
       },
       display: 'flex',
-
       justifyContent: 'space-between'
     },
     borderRadius: theme.shape.borderRadius,
     display: 'flex',
     flexDirection: 'column',
     height: '186px',
+    justifyContent: 'space-between',
     p: {
       color: theme.palette.text.secondary,
       letterSpacing: '0',

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -22,7 +22,7 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
-  labelsDelete: {
+  labelsDelete?: {
     cancel: string;
     confirm: {
       label: string;
@@ -76,20 +76,20 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              {onDelete && (
+              {onDelete && labelsDelete && (
                 <ConfirmationTooltip
                   confirmVariant="error"
                   labels={labelsDelete}
                   onConfirm={onDelete}
                 >
-                  {(openTooltip) => (
+                  {({ toggleTooltip }) => (
                     <IconButton
                       aria-label="delete"
                       data-testid="delete"
                       icon={<DeleteIcon />}
                       size="small"
                       variant="ghost"
-                      onClick={openTooltip}
+                      onClick={toggleTooltip}
                     />
                   )}
                 </ConfirmationTooltip>

package/src/components/DataTable/index.ts

@@ -2,9 +2,11 @@ import { DataTable as DataTableRoot } from './DataTable';
 import { DataTableItem } from './Item/DataTableItem';
 import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
 import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
+import { DataListing } from './DataListing';
 
 export const DataTable = Object.assign(DataTableRoot, {
   EmptyState: DataTableEmptyState,
   Item: DataTableItem,
-  ItemSkeleton: DataTableItemSkeleton
+  ItemSkeleton: DataTableItemSkeleton,
+  Listing: DataListing
 });

package/src/components/Form/AccessRights/ShareInput/ContactSwitch.tsx

@@ -1,4 +1,4 @@
-import { useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
@@ -17,7 +17,7 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
   const { classes } = useContactSwitchStyles();
   const { t } = useTranslation();
 
-  const setContactType = useSetAtom(contactTypeAtom);
+  const [contactType, setContactType] = useAtom(contactTypeAtom);
 
   const change = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setContactType(event.target.value as ContactType);
@@ -29,7 +29,7 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
       <RadioGroup
         row
         className={classes.inputs}
-        defaultValue={ContactType.Contact}
+        value={contactType}
         onChange={change}
       >
         <FormControlLabel

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -52,6 +52,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               ? t(labels.autocompleteContactGroup)
               : t(labels.autocompleteContact)
           )}
+          queryKey={isContactGroup ? labels.contactGroup : labels.contact}
           renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,7 +1,8 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import * as Yup from 'yup';
+import { string, number, object } from 'yup';
 import { useTranslation } from 'react-i18next';
+import { equals } from 'ramda';
 
 import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
@@ -84,8 +85,8 @@ const DashboardForm = ({
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
-      validationSchema: Yup.object().shape({
-        description: Yup.string()
+      validationSchema: object({
+        description: string()
           .label(labels?.entity?.description || '')
           .max(
             180,
@@ -93,17 +94,19 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
-        globalRefreshInterval: Yup.object().shape({
-          interval: Yup.number().when('type', {
-            is: 'global',
-            otherwise: Yup.number().nullable(),
-            then: Yup.number()
-              .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
-              .required(t(labelRequired) as string)
+        globalRefreshInterval: object({
+          interval: number().when('type', ([type], schema) => {
+            if (equals(type, 'manual')) {
+              schema
+                .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+                .required(t(labelRequired) as string);
+            }
+
+            return schema.nullable();
           }),
-          type: Yup.string()
+          type: string()
         }),
-        name: Yup.string()
+        name: string()
           .label(labels?.entity?.name)
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
           .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))

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();
+  });
+});

package/src/components/Modal/Modal.styles.ts

@@ -57,7 +57,7 @@ const useStyles = makeStyles<{
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    right: theme.spacing(2)
+    right: theme.spacing(2.5)
   },
   modalBody: {
     '& > p': {

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof ConfirmationTooltip>;
 
 export const Default: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
     ),
     labels: {
@@ -30,7 +30,7 @@ export const Default: Story = {
 
 export const WithConfirmVariant: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',
@@ -46,7 +46,7 @@ export const WithConfirmVariant: Story = {
 
 export const WithSecondaryLabel: Story = {
   args: {
-    children: (toggleTooltip) => (
+    children: ({ toggleTooltip }) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -49,7 +49,7 @@ export const ConfirmationTooltip = ({
   return (
     <ClickAwayListener onClickAway={close}>
       <div>
-        {children(isOpen ? close : open)}
+        {children({ isOpen, toggleTooltip: isOpen ? close : open })}
         <Popper
           anchorEl={anchorElement}
           className={classes.popper}