@centreon/ui 24.4.59 → 24.4.61

package/src/api/useMutationQuery/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
-import { includes } from 'ramda';
+import { includes, omit } from 'ramda';
 
 import { CatchErrorProps, customFetch, ResponseError } from '../customFetch';
 import useSnackbar from '../../Snackbar/useSnackbar';
@@ -22,6 +22,11 @@ export enum Method {
   PUT = 'PUT'
 }
 
+interface Variables<TMeta, T> {
+  _meta?: TMeta;
+  payload?: T;
+}
+
 export type UseMutationQueryProps<T, TMeta> = {
   baseEndpoint?: string;
   catchError?: (props: CatchErrorProps) => void;
@@ -31,14 +36,39 @@ export type UseMutationQueryProps<T, TMeta> = {
   getEndpoint: (_meta: TMeta) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
-} & Omit<UseMutationOptions<T & { _meta?: TMeta }>, 'mutationFn'>;
+  onError?: (
+    error: ResponseError,
+    variables: Variables<TMeta, T>,
+    context: unknown
+  ) => unknown;
+  onMutate?: (variables: Variables<TMeta, T>) => Promise<unknown> | unknown;
+  onSuccess?: (
+    data: ResponseError | T,
+    variables: Variables<TMeta, T>,
+    context: unknown
+  ) => unknown;
+} & Omit<
+  UseMutationOptions<{ _meta?: TMeta; payload: T }>,
+  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
+>;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = {
+export type UseMutationQueryState<T, TMeta> = Omit<
+  UseMutationResult<T | ResponseError>,
+  'isError' | 'mutate' | 'mutateAsync'
+> & {
   isError: boolean;
   isMutating: boolean;
-} & UseMutationResult<T | ResponseError>;
+  mutate: (variables: Variables<TMeta, T>) => ResponseError | T;
+  mutateAsync: (
+    variables: Variables<TMeta, T>,
+    rest?: Pick<
+      UseMutationQueryProps<T, TMeta>,
+      'onError' | 'onMutate' | 'onSettled' | 'onSuccess'
+    >
+  ) => Promise<ResponseError | T>;
+};
 
 const useMutationQuery = <T extends object, TMeta>({
   getEndpoint,
@@ -51,17 +81,20 @@ const useMutationQuery = <T extends object, TMeta>({
   onMutate,
   onError,
   onSuccess,
+  onSettled,
   baseEndpoint
-}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T> => {
+}: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<
     T | ResponseError,
     ResponseError,
-    T & { _meta: TMeta }
-  >(
-    (_payload: T & { _meta: TMeta }): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
+    Variables<TMeta, T>
+  >({
+    mutationFn: (
+      variables: Variables<TMeta, T>
+    ): Promise<T | ResponseError> => {
+      const { _meta, payload } = variables || {};
 
       return customFetch<T>({
         baseEndpoint,
@@ -78,19 +111,18 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    {
-      onError,
-      onMutate,
-      onSuccess: (data, variables, context) => {
-        if (data?.isError) {
-          onError?.(data, variables, context);
-
-          return;
-        }
-        onSuccess?.(data, variables, context);
+    onError,
+    onMutate,
+    onSettled,
+    onSuccess: (data, variables, context) => {
+      if (data?.isError) {
+        onError?.(data, variables, context);
+
+        return;
       }
+      onSuccess?.(data, variables, context);
     }
-  );
+  });
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -107,14 +139,17 @@ const useMutationQuery = <T extends object, TMeta>({
     }
   };
 
-  useEffect(() => {
-    manageError();
-  }, useDeepCompare([queryData.data]));
+  useEffect(
+    () => {
+      manageError();
+    },
+    useDeepCompare([queryData.data])
+  );
 
   return {
-    ...queryData,
+    ...omit(['isError'], queryData),
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
-    isMutating: queryData.isLoading
+    isMutating: queryData.isPending
   };
 };
 

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/DataTable/DataListing.tsx

@@ -0,0 +1,6 @@
+import { RowId } from '../../Listing/models';
+import { Listing, ListingProps } from '../..';
+
+export const DataListing = <TRow extends { id: RowId }>(
+  props: ListingProps<TRow>
+): JSX.Element => <Listing<TRow> {...props} />;

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

@@ -0,0 +1,174 @@
+import { Box } from '@mui/material';
+import Delete from '@mui/icons-material/Delete';
+
+import { IconButton } from '../..';
+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 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}
+            title={title}
+          />
+        ))}
+      </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({
+      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({
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('Delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action only', () => {
+    initializeDataTableGrid({
+      hasActions: false,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action and bottom actions', () => {
+    initializeDataTableGrid({
+      hasActions: true,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+    cy.findAllByLabelText('Delete').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

@@ -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 && (
-                <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/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/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');
 

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}