@centreon/ui 23.10.122 → 24.4.0

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/Form/Dashboard/index.ts

@@ -1,2 +1,3 @@
 export * from './DashboardForm';
 export * from './Dashboard.resource';
+export * from './DashboardDuplicationForm';

package/src/components/Form/FormActions.tsx

@@ -8,6 +8,7 @@ import { FormVariant } from './Form.models';
 import { useStyles } from './Form.styles';
 
 export type FormActionsProps = {
+  enableSubmitWhenNotDirty?: boolean;
   labels: FormActionsLabels;
   onCancel: () => void;
   variant: FormVariant;
@@ -21,12 +22,16 @@ export type FormActionsLabels = {
 const FormActions = <TResource extends object>({
   labels,
   onCancel,
-  variant
+  variant,
+  enableSubmitWhenNotDirty
 }: FormActionsProps): ReactElement => {
   const { classes } = useStyles();
   const { isSubmitting, dirty, isValid, submitForm } =
     useFormikContext<TResource>();
 
+  const isSubmitDisabled =
+    isSubmitting || (!dirty && !enableSubmitWhenNotDirty) || !isValid;
+
   return (
     <div className={classes.actions}>
       <Button
@@ -42,7 +47,7 @@ const FormActions = <TResource extends object>({
       <Button
         aria-label={labels.submit[variant]}
         data-testid="submit"
-        disabled={isSubmitting || !dirty || !isValid}
+        disabled={isSubmitDisabled}
         size="medium"
         type="submit"
         variant="primary"

package/src/components/Form/index.ts

@@ -1,3 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
-export * from './AccessRights';
+export { default as AccessRights } from './AccessRights/AccessRights';
+export { default as AccessRightsV2 } from './AccessRights/AccessRights';

package/src/components/ItemComposition/Item.tsx

@@ -7,7 +7,7 @@ import { IconButton } from '..';
 import { useItemStyles } from './ItemComposition.styles';
 
 type Props = {
-  children: Array<ReactElement>;
+  children: ReactElement | Array<ReactElement>;
   className?: string;
   deleteButtonHidden?: boolean;
   labelDelete: string;

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

@@ -0,0 +1,113 @@
+import { Props } from './ItemComposition';
+
+import { ItemComposition } from '.';
+
+const initialize = ({
+  deleteButtonHidden,
+  ...props
+}: Partial<Props> & {
+  deleteButtonHidden?: boolean;
+}): unknown => {
+  const addItem = cy.stub();
+  const deleteItem = cy.stub();
+
+  cy.mount({
+    Component: (
+      <ItemComposition {...props} labelAdd="Add" onAddItem={addItem}>
+        <ItemComposition.Item
+          deleteButtonHidden={deleteButtonHidden}
+          labelDelete="Delete"
+          onDeleteItem={deleteItem}
+        >
+          <div>Item 1</div>
+        </ItemComposition.Item>
+        <ItemComposition.Item
+          deleteButtonHidden={deleteButtonHidden}
+          labelDelete="Delete"
+          onDeleteItem={deleteItem}
+        >
+          <div>Item 2</div>
+        </ItemComposition.Item>
+      </ItemComposition>
+    )
+  });
+
+  return {
+    addItem,
+    deleteItem
+  };
+};
+
+describe('ItemComposition', () => {
+  it('displays the component', () => {
+    initialize({});
+
+    cy.contains('Item 1').should('be.visible');
+    cy.contains('Item 2').should('be.visible');
+    cy.findAllByTestId('Delete').should('have.length', 2);
+    cy.findByTestId('Add').should('be.enabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component with a secondary label', () => {
+    initialize({ secondaryLabel: 'Secondary label' });
+
+    cy.contains('Secondary label').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays add button as hidden when the prop is set to true', () => {
+    initialize({ addbuttonDisabled: true });
+
+    cy.findByTestId('Add').should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the add button when the prop is set to true', () => {
+    initialize({ addButtonHidden: true });
+
+    cy.findByTestId('Add').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the delete button when the prop is set to true', () => {
+    initialize({ deleteButtonHidden: true });
+
+    cy.findByTestId('Delete').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('calls the add function when the button is clicked', () => {
+    const { addItem } = initialize({});
+
+    cy.findByTestId('Add')
+      .click()
+      .then(() => {
+        expect(addItem).to.have.been.calledWith();
+      });
+  });
+
+  it('calls the delete function when the button is clicked', () => {
+    const { deleteItem } = initialize({});
+
+    cy.findAllByTestId('Delete')
+      .eq(1)
+      .click()
+      .then(() => {
+        expect(deleteItem).to.have.been.calledWith();
+      });
+  });
+
+  it('displays items as linked when the prop is set to true', () => {
+    initialize({ displayItemsAsLinked: true });
+
+    cy.get('[data-linked]').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -76,3 +76,17 @@ export const WithSelectInputs: Story = {
     onAddItem: stub
   }
 };
+
+export const WithLinkedItems: Story = {
+  args: {
+    children: [...Array(5)].map((_, i) => (
+      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+        <Typography>Item 1</Typography>
+        <Typography>Item 2</Typography>
+      </ItemComposition.Item>
+    )),
+    displayItemsAsLinked: true,
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -1,12 +1,45 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useItemCompositionStyles = makeStyles()((theme) => ({
+  buttonAndSecondaryLabel: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  },
   itemCompositionContainer: {
+    width: '100%'
+  },
+  itemCompositionItems: {
     alignItems: 'flex-start',
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2),
     width: '100%'
+  },
+  itemCompositionItemsAndLink: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    gap: theme.spacing(0.5),
+    width: '100%'
+  },
+  linkIcon: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(0.5, 0),
+    transform: `rotate3d(0, 0, 1, 90deg) translate3d(0, ${theme.spacing(
+      1.6
+    )}, 0)`
+  },
+  linkedItems: {
+    alignItems: 'center',
+    border: `1px solid ${theme.palette.divider}`,
+    borderRight: 'none',
+    display: 'flex',
+    margin: theme.spacing(2, 0, 2, 1),
+    minHeight: '100%',
+    position: 'relative',
+    width: theme.spacing(1)
   }
 }));
 
@@ -19,11 +52,11 @@ export const useItemStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   itemContent: {
-    display: 'flex',
-    flexDirection: 'row',
+    display: 'grid',
+    gridAutoFlow: 'column',
     width: '100%'
   },
   visibilityHiden: {
-    visibility: 'hidden'
+    display: 'none'
   }
 }));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,18 +1,24 @@
 import { ReactElement } from 'react';
 
+import { gt } from 'ramda';
+
 import AddIcon from '@mui/icons-material/Add';
+import LinkIcon from '@mui/icons-material/Link';
+import { Typography } from '@mui/material';
 
 import { Button } from '..';
 
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
-type Props = {
+export type Props = {
   IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
+  displayItemsAsLinked?: boolean;
   labelAdd: string;
   onAddItem: () => void;
+  secondaryLabel?: string;
 };
 
 export const ItemComposition = ({
@@ -21,27 +27,45 @@ export const ItemComposition = ({
   labelAdd,
   addbuttonDisabled,
   addButtonHidden,
-  IconAdd
+  IconAdd,
+  displayItemsAsLinked,
+  secondaryLabel
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
+  const hasMoreThanOneChildren = gt(children.length, 1);
+
   return (
     <div className={classes.itemCompositionContainer}>
-      {children}
-      {!addButtonHidden && (
-        <Button
-          aria-label={labelAdd}
-          data-testid={labelAdd}
-          disabled={addbuttonDisabled}
-          icon={IconAdd || <AddIcon />}
-          iconVariant="start"
-          size="small"
-          variant="ghost"
-          onClick={onAddItem}
-        >
-          {labelAdd}
-        </Button>
-      )}
+      <div className={classes.itemCompositionItemsAndLink}>
+        <div className={classes.itemCompositionItems}>{children}</div>
+        {displayItemsAsLinked && hasMoreThanOneChildren && (
+          <div data-linked className={classes.linkedItems}>
+            <LinkIcon className={classes.linkIcon} viewBox="0 0 24 24" />
+          </div>
+        )}
+      </div>
+      <div className={classes.buttonAndSecondaryLabel}>
+        {!addButtonHidden && (
+          <Button
+            aria-label={labelAdd}
+            data-testid={labelAdd}
+            disabled={addbuttonDisabled}
+            icon={IconAdd || <AddIcon />}
+            iconVariant="start"
+            size="small"
+            variant="ghost"
+            onClick={onAddItem}
+          >
+            {labelAdd}
+          </Button>
+        )}
+        {secondaryLabel && (
+          <Typography sx={{ color: 'text.secondary' }}>
+            {secondaryLabel}
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };

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/List/Item/ListItem.styles.ts

@@ -23,6 +23,12 @@ export const useStyles = makeStyles()((theme) => ({
     paddingBottom: theme.spacing(1),
     paddingTop: theme.spacing(1)
   },
+  secondary: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1)
+  },
   text: {
     '&, &.MuiListItemText-root': {
       '& .MuiListItemText-primary': {

package/src/components/List/Item/ListItem.tsx

@@ -1,10 +1,10 @@
 import { ForwardedRef, forwardRef, ReactElement, ReactNode } from 'react';
 
-import { ListItem as MuiListItem } from '@mui/material';
+import { ListItemProps, ListItem as MuiListItem } from '@mui/material';
 
 import { useStyles } from './ListItem.styles';
 
-type ListItemProps = {
+type Props = {
   action?: ReactElement;
   children: ReactNode | Array<ReactNode>;
   className?: string;
@@ -12,7 +12,7 @@ type ListItemProps = {
 
 export const ListItem = forwardRef(
   (
-    { action, children, className, ...attr }: ListItemProps,
+    { action, children, className, ...attr }: Props & ListItemProps,
     ref?: ForwardedRef<HTMLLIElement>
   ) => {
     const { classes, cx } = useStyles();
@@ -22,7 +22,9 @@ export const ListItem = forwardRef(
         disableGutters
         className={cx(classes.listItem, className)}
         ref={ref}
-        secondaryAction={action}
+        secondaryAction={
+          action && <div className={classes.secondary}>{action}</div>
+        }
         {...attr}
       >
         {children}

package/src/components/List/Item/Text.tsx

@@ -5,19 +5,21 @@ import { ListItemText as MuiListItemText } from '@mui/material';
 import { useStyles } from './ListItem.styles';
 
 type TextProps = {
+  className?: string;
   primaryText: ReactNode;
   secondaryText?: ReactNode;
 };
 
 export const Text = ({
   primaryText,
-  secondaryText
+  secondaryText,
+  className
 }: TextProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <MuiListItemText
-      className={classes.text}
+      className={cx(classes.text, className)}
       primary={primaryText}
       secondary={secondaryText}
     />