@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-sync-dev-2404.0

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

@@ -1,5 +1,7 @@
 import { Box } from '@mui/material';
+import Delete from '@mui/icons-material/Delete';
 
+import { IconButton } from '../..';
 import { ColumnType } from '../../Listing/models';
 
 import { DataTable } from '.';
@@ -12,29 +14,27 @@ const data = Array(5)
     title: `Entity ${idx}`
   }));
 
-const initializeDataTableGrid = ({
-  hasActions,
-  hasCardAction,
-  canDelete
-}): void => {
+const CardActions = (): JSX.Element => {
+  return (
+    <IconButton ariaLabel="Delete" title="Delete" onClick={cy.stub()}>
+      <Delete fontSize="small" />
+    </IconButton>
+  );
+};
+
+const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
   cy.viewport(1200, 590);
   cy.mount({
     Component: (
       <DataTable variant="grid">
         {data.map(({ title, description }) => (
           <DataTable.Item
+            Actions={<CardActions />}
             description={description}
             hasActions={hasActions}
             hasCardAction={hasCardAction}
             key={title}
-            labelsDelete={{
-              cancel: 'Cancel',
-              confirm: {
-                label: 'Delete'
-              }
-            }}
             title={title}
-            onDelete={canDelete ? cy.stub() : undefined}
           />
         ))}
       </DataTable>
@@ -94,7 +94,6 @@ const initializeDataTableListing = (): void => {
 describe('DataTable: Grid', () => {
   it('displays items with title and description only', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: false,
       hasCardAction: false
     });
@@ -109,32 +108,17 @@ describe('DataTable: Grid', () => {
 
   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.findAllByLabelText('Delete').should('have.length', 5);
 
     cy.makeSnapshot();
   });
 
   it('displays items with card action only', () => {
     initializeDataTableGrid({
-      canDelete: false,
       hasActions: false,
       hasCardAction: true
     });
@@ -146,15 +130,12 @@ describe('DataTable: Grid', () => {
 
   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.findAllByLabelText('Delete').should('have.length', 5);
 
     cy.makeSnapshot();
   });

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

@@ -7,32 +7,15 @@ import {
   CardContent as MuiCardContent,
   Typography as MuiTypography
 } from '@mui/material';
-import {
-  Delete as DeleteIcon,
-  Settings as SettingsIcon,
-  Share as ShareIcon
-} from '@mui/icons-material';
-
-import { IconButton } from '../../Button';
-import { ConfirmationTooltip } from '../../Tooltip/ConfirmationTooltip';
 
 import { useStyles } from './DataTableItem.styles';
 
 export interface DataTableItemProps {
+  Actions?: JSX.Element;
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
-  labelsDelete?: {
-    cancel: string;
-    confirm: {
-      label: string;
-      secondaryLabel?: string;
-    };
-  };
   onClick?: () => void;
-  onDelete?: () => void;
-  onEdit?: () => void;
-  onEditAccessRights?: () => void;
   title: string;
 }
 
@@ -44,10 +27,7 @@ const DataTableItem = forwardRef(
       hasCardAction = false,
       hasActions = false,
       onClick,
-      onEdit,
-      onDelete,
-      onEditAccessRights,
-      labelsDelete
+      Actions
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -75,44 +55,8 @@ const DataTableItem = forwardRef(
         </ActionArea>
         {hasActions && (
           <MuiCardActions>
-            <span>
-              {onDelete && labelsDelete && (
-                <ConfirmationTooltip
-                  confirmVariant="error"
-                  labels={labelsDelete}
-                  onConfirm={onDelete}
-                >
-                  {(openTooltip) => (
-                    <IconButton
-                      aria-label="delete"
-                      data-testid="delete"
-                      icon={<DeleteIcon />}
-                      size="small"
-                      variant="ghost"
-                      onClick={openTooltip}
-                    />
-                  )}
-                </ConfirmationTooltip>
-              )}
-            </span>
-            <span>
-              <IconButton
-                aria-label="edit access rights"
-                data-testid="edit-access-rights"
-                icon={<ShareIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEditAccessRights?.()}
-              />
-              <IconButton
-                aria-label="edit"
-                data-testid="edit"
-                icon={<SettingsIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEdit?.()}
-              />
-            </span>
+            <span />
+            <span>{Actions}</span>
           </MuiCardActions>
         )}
       </MuiCard>

package/src/components/Form/{AccessRightsV2 → AccessRights}/AccessRights.cypress.spec.tsx

@@ -116,15 +116,15 @@ describe('Access rights', () => {
   it('displays a removed chip when the corresponding icon is clicked', () => {
     initialize({});
 
-    cy.findByTestId(`remove-Leah McGlynn`).should(
+    cy.findByTestId(`remove-Kathy Schmitt`).should(
       'have.attr',
       'data-removed',
       'false'
     );
 
-    cy.findByTestId(`remove-Leah McGlynn`).click();
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
 
-    cy.findByTestId(`remove-Leah McGlynn`).should(
+    cy.findByTestId(`remove-Kathy Schmitt`).should(
       'have.attr',
       'data-removed',
       'true'
@@ -137,18 +137,18 @@ describe('Access rights', () => {
   it('restores the contact when the contact is removed and the corresponding icon is clicked', () => {
     initialize({});
 
-    cy.findByTestId(`remove-Leah McGlynn`).click();
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
 
-    cy.findByTestId(`remove-Leah McGlynn`).should(
+    cy.findByTestId(`remove-Kathy Schmitt`).should(
       'have.attr',
       'data-removed',
       'true'
     );
     cy.contains(labels.list.removed).should('be.visible');
 
-    cy.findByTestId(`remove-Leah McGlynn`).click();
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
 
-    cy.findByTestId(`remove-Leah McGlynn`).should(
+    cy.findByTestId(`remove-Kathy Schmitt`).should(
       'have.attr',
       'data-removed',
       'false'
@@ -161,9 +161,9 @@ describe('Access rights', () => {
   it('submits the new acces rights list without the removed contact', () => {
     const { save } = initialize({});
 
-    cy.findByTestId(`remove-Leah McGlynn`).click();
+    cy.findByTestId(`remove-Kathy Schmitt`).click();
 
-    cy.findByTestId(`remove-Leah McGlynn`).should(
+    cy.findByTestId(`remove-Kathy Schmitt`).should(
       'have.attr',
       'data-removed',
       'true'
@@ -183,7 +183,7 @@ describe('Access rights', () => {
   it('submits the new acces rights list with the updated contact', () => {
     const { save } = initialize({});
 
-    cy.findByTestId(`role-Leah McGlynn`).parent().click();
+    cy.findByTestId(`role-Kathy Schmitt`).parent().click();
 
     cy.get('li[data-value="editor"]').click();
     cy.contains(labels.list.updated).should('be.visible');
@@ -201,7 +201,7 @@ describe('Access rights', () => {
   it('removes the updated chip when the contact role is updated and its initial role is assigned back', () => {
     initialize({});
 
-    cy.findByTestId(`role-Leah McGlynn`).parent().click();
+    cy.findByTestId(`role-Kathy Schmitt`).parent().click();
 
     cy.get('li[data-value="editor"]').click();
     cy.contains(labels.list.updated).should('be.visible');
@@ -291,10 +291,10 @@ describe('Access rights', () => {
 
     cy.contains('Entity Group 10').should('be.visible');
 
-    cy.findByTestId(`role-Leah McGlynn`).parent().click();
+    cy.findByTestId(`role-Kathy Schmitt`).parent().click();
     cy.get('li[data-value="editor"]').click();
 
-    cy.findByTestId('remove-Jody Blanda').click();
+    cy.findByTestId('remove-Linda Schultz').click();
 
     cy.contains('1 added | 1 updated | 1 removed').should('be.visible');
 
@@ -347,4 +347,27 @@ describe('Access rights', () => {
 
     cy.makeSnapshot();
   });
+
+  it('resets the role to "viewer" when the "editor" role is selected and a contact with "viewer" right is selected', () => {
+    initialize({});
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add_role').parent().click();
+    cy.get('li[data-value="editor"]').click();
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 11').click();
+
+    cy.findByTestId('add_role').should('have.value', 'viewer');
+
+    cy.makeSnapshot();
+  });
 });

package/src/components/Form/{AccessRightsV2 → 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';
@@ -7,14 +7,17 @@ import { ContactType, Labels } from '../models';
 import { contactTypeAtom } from '../atoms';
 import { Subtitle } from '../../../..';
 
+import { useContactSwitchStyles } from './ShareInput.styles';
+
 interface Props {
   labels: Labels['add'];
 }
 
 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);
@@ -23,7 +26,12 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
   return (
     <>
       <Subtitle>{t(labels.title)}</Subtitle>
-      <RadioGroup row defaultValue={ContactType.Contact} onChange={change}>
+      <RadioGroup
+        row
+        className={classes.inputs}
+        value={contactType}
+        onChange={change}
+      >
         <FormControlLabel
           control={<Radio />}
           label={labels.contact}

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ShareInput.styles.ts

@@ -7,3 +7,11 @@ export const useShareInputStyles = makeStyles()((theme) => ({
     gridTemplateColumns: `1fr min-content min-content`
   }
 }));
+
+export const useContactSwitchStyles = makeStyles()((theme) => ({
+  inputs: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/Form/{AccessRightsV2 → 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/{AccessRightsV2 → AccessRights}/ShareInput/useShareInput.tsx

@@ -40,6 +40,10 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
+    if (equals('editor', entry.most_permissive_role)) {
+      return;
+    }
+    setSelectedRole('viewer');
   };
 
   const add = (): void => {

package/src/components/Form/{AccessRightsV2 → AccessRights}/models.ts

@@ -2,6 +2,7 @@ export interface AccessRightInitialValues {
   email?: string;
   id: number | string;
   isContactGroup: boolean;
+  most_permissive_role?: 'editor' | 'viewer';
   name: string;
   role: string;
 }

package/src/components/Form/{AccessRightsV2 → AccessRights}/storiesData.ts

@@ -88,6 +88,7 @@ const buildEntities = (from, isGroup): Array<SelectEntry> => {
     .map((_, index) => ({
       email: isGroup ? undefined : faker.internet.email(),
       id: 1000 + index,
+      most_permissive_role: index % 3 === 0 ? 'editor' : 'viewer',
       name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
     }));
 };
@@ -139,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/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,4 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
-export * from './AccessRights';
-export { default as AccessRightsV2 } from './AccessRightsV2/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;