@centreon/ui 24.4.59 → 24.4.61

package/src/components/Form/AccessRights/storiesData.ts

@@ -140,83 +140,83 @@ export const roles = [
 
 export const removedAccessRights = [
   {
-    email: 'Virgie14@yahoo.com',
+    email: 'Adrienne.Kassulke-Rutherford@gmail.com',
     id: 1,
     isContactGroup: false,
-    name: 'Jody Blanda',
+    name: 'Linda Schultz',
     role: 'editor'
   },
   {
-    email: 'Wyman29@yahoo.com',
+    email: 'Merle7@hotmail.com',
     id: 2,
     isContactGroup: false,
-    name: 'Susan Dooley',
+    name: 'Lewis Buckridge PhD',
     role: 'viewer'
   },
   {
-    email: 'Merle.Schamberger@hotmail.com',
+    email: 'Linda.Harris37@hotmail.com',
     id: 3,
     isContactGroup: false,
-    name: 'Lewis Buckridge PhD',
+    name: "Jodi O'Reilly",
     role: 'editor'
   },
   {
-    email: 'Rossie6@gmail.com',
+    email: 'Louvenia.Torphy@yahoo.com',
     id: 4,
     isContactGroup: false,
-    name: 'Bertha Hane',
+    name: 'Mildred Ratke-Stanton',
     role: 'viewer'
   },
   {
-    email: 'Monty_Nienow47@gmail.com',
+    email: 'Kelli.Russel4@hotmail.com',
     id: 5,
     isContactGroup: true,
-    name: 'Mildred Ratke-Stanton',
+    name: 'Rudolph Brown',
     role: 'editor'
   }
 ];
 
 export const updatedAccessRights = [
   {
-    email: 'Jovani.Willms74@gmail.com',
+    email: 'Kylie_Wintheiser54@hotmail.com',
     id: 0,
     isContactGroup: true,
-    name: 'Leah McGlynn',
+    name: 'Kathy Schmitt',
     role: 'editor'
   },
   {
-    email: 'Virgie14@yahoo.com',
+    email: 'Adrienne.Kassulke-Rutherford@gmail.com',
     id: 1,
     isContactGroup: false,
-    name: 'Jody Blanda',
+    name: 'Linda Schultz',
     role: 'editor'
   },
   {
-    email: 'Wyman29@yahoo.com',
+    email: 'Merle7@hotmail.com',
     id: 2,
     isContactGroup: false,
-    name: 'Susan Dooley',
+    name: 'Lewis Buckridge PhD',
     role: 'viewer'
   },
   {
-    email: 'Merle.Schamberger@hotmail.com',
+    email: 'Linda.Harris37@hotmail.com',
     id: 3,
     isContactGroup: false,
-    name: 'Lewis Buckridge PhD',
+    name: "Jodi O'Reilly",
     role: 'editor'
   },
   {
-    email: 'Rossie6@gmail.com',
+    email: 'Louvenia.Torphy@yahoo.com',
     id: 4,
     isContactGroup: false,
-    name: 'Bertha Hane',
+    name: 'Mildred Ratke-Stanton',
     role: 'viewer'
   },
   {
-    email: 'Monty_Nienow47@gmail.com',
+    email: 'Kelli.Russel4@hotmail.com',
     id: 5,
     isContactGroup: true,
-    name: 'Mildred Ratke-Stanton',
+    name: 'Rudolph Brown',
     role: 'editor'
   }
 ];

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

@@ -0,0 +1,85 @@
+import { ReactElement, useCallback, useMemo } from 'react';
+
+import { string, object } from 'yup';
+import { useTranslation } from 'react-i18next';
+
+import { InputType } from '../../../Form/Inputs/models';
+import { Form, FormProps } from '../../../Form';
+import { FormVariant } from '../Form.models';
+import { FormActions, FormActionsProps } from '../FormActions';
+
+import { useStyles } from './DashboardForm.styles';
+import {
+  labelMustBeAtLeast,
+  labelMustBeMost,
+  labelRequired
+} from './translatedLabels';
+import { DashboardResource } from './Dashboard.resource';
+
+type DashboardFormProps = {
+  labels: DashboardFormLabels;
+  name: string;
+  onSubmit?: FormProps<DashboardResource>['submit'];
+  variant?: FormVariant;
+} & Pick<FormActionsProps, 'onCancel'>;
+
+type DashboardFormLabels = {
+  actions: FormActionsProps['labels'];
+  entity: Required<DashboardResource>;
+};
+
+const DashboardDuplicationForm = ({
+  variant = 'create',
+  labels,
+  onSubmit,
+  onCancel,
+  name
+}: DashboardFormProps): ReactElement => {
+  const { classes } = useStyles();
+  const { t } = useTranslation();
+
+  const formProps = useMemo<FormProps<DashboardResource>>(
+    () => ({
+      initialValues: { name },
+      inputs: [
+        {
+          autoFocus: true,
+          fieldName: 'name',
+          group: 'main',
+          label: labels?.entity?.name,
+          required: true,
+          type: InputType.Text
+        }
+      ],
+      submit: (values, bag) => onSubmit?.(values, bag),
+      validationSchema: object({
+        name: string()
+          .label(labels?.entity?.name)
+          .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
+          .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))
+          .required(t(labelRequired) as string)
+      })
+    }),
+    [labels, onSubmit]
+  );
+
+  const Actions = useCallback(
+    () => (
+      <FormActions<DashboardResource>
+        enableSubmitWhenNotDirty
+        labels={labels?.actions}
+        variant={variant}
+        onCancel={onCancel}
+      />
+    ),
+    [labels, onCancel, variant]
+  );
+
+  return (
+    <div className={classes.dashboardForm}>
+      <Form<DashboardResource> {...formProps} Buttons={Actions} />
+    </div>
+  );
+};
+
+export { DashboardDuplicationForm };

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/ItemComposition/ItemComposition.styles.ts

@@ -52,8 +52,8 @@ export const useItemStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   itemContent: {
-    display: 'flex',
-    flexDirection: 'row',
+    display: 'grid',
+    gridAutoFlow: 'column',
     width: '100%'
   },
   visibilityHiden: {

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.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();

package/src/components/Modal/ConfirmationModal/ConfirmationModal.cypress.spec.tsx

@@ -0,0 +1,168 @@
+import { atom, createStore, useSetAtom, Provider } from 'jotai';
+
+import { Button } from '@mui/material';
+
+import { ConfirmationModal, ConfirmationModalProps } from './ConfirmationModal';
+
+const testAtom = atom<string | null>(null);
+
+const buttonLabel = 'Click to open modal';
+
+const TestComponent = (args: ConfirmationModalProps<string>): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>{buttonLabel}</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+const staticLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: 'Description',
+  title: 'Title'
+};
+
+const dynamicLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: (data) => `Description ${data}`,
+  title: (data) => `Hello ${data}`
+};
+
+const initialize = (
+  props: Pick<
+    ConfirmationModalProps<string>,
+    'labels' | 'disabled' | 'hasCloseButton' | 'isDanger'
+  >
+): { cancel; confirm } => {
+  const store = createStore();
+
+  const cancel = cy.stub();
+  const confirm = cy.stub();
+
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <TestComponent
+          {...props}
+          atom={testAtom}
+          onCancel={cancel}
+          onConfirm={confirm}
+        />
+      </Provider>
+    )
+  });
+
+  return {
+    cancel,
+    confirm
+  };
+};
+
+describe('Confirmation modal', () => {
+  it('displays the modal with static labels', () => {
+    initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+    cy.contains('Description').should('be.visible');
+    cy.findByLabelText('close').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the modal with dynamic labels', () => {
+    initialize({ labels: dynamicLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Hello John').should('be.visible');
+    cy.contains('Description John').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the confirm button as disabled when a prop is set', () => {
+    initialize({ disabled: true, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Confirm').should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the confirm button as danger when a prop is set', () => {
+    initialize({ isDanger: true, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Confirm').should('have.attr', 'data-is-danger', 'true');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the modal without the close button when a prop is set', () => {
+    initialize({ hasCloseButton: false, labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.findByLabelText('close').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('closes the modal when the close button is clicked', () => {
+    initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.findByLabelText('close').click();
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('closes the modal when the cancel button is clicked', () => {
+    const { cancel } = initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.contains('Cancel')
+      .click()
+      .then(() => {
+        expect(cancel).to.be.calledWith('John');
+      });
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+  it('closes the modal when the confirm button is clicked', () => {
+    const { confirm } = initialize({ labels: staticLabels });
+
+    cy.contains(buttonLabel).click();
+
+    cy.contains('Title').should('be.visible');
+
+    cy.contains('Confirm')
+      .click()
+      .then(() => {
+        expect(confirm).to.be.calledWith('John');
+      });
+
+    cy.contains('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});