@centreon/ui 24.4.57 → 24.4.59

package/src/api/useMutationQuery/index.test.ts

@@ -48,7 +48,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(false);
@@ -64,7 +64,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -85,7 +85,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(result.current?.isError).toEqual(true);
@@ -109,7 +109,7 @@ describe('useFetchQuery', () => {
       method: Method.POST
     });
 
-    result.current.mutate({ payload: user });
+    result.current.mutate(user);
 
     await waitFor(() => {
       expect(mockedShowErrorMessage).not.toHaveBeenCalled();

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

package/src/components/Button/Icon/IconButton.tsx

@@ -1,9 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react';
 
-import {
-  IconButton as MuiIconButton,
-  IconButtonProps as MuiIconButtonProps
-} from '@mui/material';
+import { IconButton as MuiIconButton } from '@mui/material';
 
 import { AriaLabelingAttributes } from '../../../@types/aria-attributes';
 import { DataTestAttributes } from '../../../@types/data-attributes';
@@ -26,8 +23,7 @@ type IconButtonProps = {
   size?: 'small' | 'medium' | 'large';
   variant?: 'primary' | 'secondary' | 'ghost';
 } & AriaLabelingAttributes &
-  DataTestAttributes &
-  MuiIconButtonProps;
+  DataTestAttributes;
 
 /**
  * @todo re-factor as `iconVariant: 'icon-only'` Button variant, and remove IconButton component (reason: code duplication)

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

@@ -1,9 +1,5 @@
 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> = {
@@ -53,39 +49,3 @@ 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,9 +10,6 @@ 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 { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './DataTable.styles';
 
 type DataTableProps = {
-  children?: ReactNode | Array<ReactNode>;
+  children: ReactNode | Array<ReactNode>;
   isEmpty?: boolean;
-  variant: 'grid' | 'listing';
+  variant?: 'grid';
 };
 
 /** *

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

@@ -1,18 +1,13 @@
 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: 'flex-start'
+      justifyContent: 'space-between'
     },
     '& .MuiCardActions-root': {
       '& > span': {
@@ -20,13 +15,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

@@ -14,6 +14,7 @@ import {
 } from '@mui/icons-material';
 
 import { IconButton } from '../../Button';
+import { ConfirmationTooltip } from '../../Tooltip/ConfirmationTooltip';
 
 import { useStyles } from './DataTableItem.styles';
 
@@ -21,6 +22,13 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
+  labelsDelete: {
+    cancel: string;
+    confirm: {
+      label: string;
+      secondaryLabel?: string;
+    };
+  };
   onClick?: () => void;
   onDelete?: () => void;
   onEdit?: () => void;
@@ -38,7 +46,8 @@ const DataTableItem = forwardRef(
       onClick,
       onEdit,
       onDelete,
-      onEditAccessRights
+      onEditAccessRights,
+      labelsDelete
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -67,14 +76,24 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              <IconButton
-                aria-label="delete"
-                data-testid="delete"
-                icon={<DeleteIcon />}
-                size="small"
-                variant="ghost"
-                onClick={onDelete}
-              />
+              {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

package/src/components/DataTable/index.ts

@@ -2,11 +2,9 @@ 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,
-  Listing: DataListing
+  ItemSkeleton: DataTableItemSkeleton
 });

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

@@ -1,4 +1,4 @@
-import { useAtom } from 'jotai';
+import { useSetAtom } 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 [contactType, setContactType] = useAtom(contactTypeAtom);
+  const setContactType = useSetAtom(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}
-        value={contactType}
+        defaultValue={ContactType.Contact}
         onChange={change}
       >
         <FormControlLabel

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

@@ -52,7 +52,6 @@ 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,8 +1,7 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import { string, number, object } from 'yup';
+import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
 
 import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
@@ -85,8 +84,8 @@ const DashboardForm = ({
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
-      validationSchema: object({
-        description: string()
+      validationSchema: Yup.object().shape({
+        description: Yup.string()
           .label(labels?.entity?.description || '')
           .max(
             180,
@@ -94,19 +93,17 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
-        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();
+        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)
           }),
-          type: string()
+          type: Yup.string()
         }),
-        name: string()
+        name: Yup.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} id="page">
+    <section className={classes.pageLayout} data-variant={variant}>
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -17,7 +17,6 @@ export const PageLayoutActions = ({
     <section
       className={classes.pageLayoutActions}
       data-row-reverse={rowReverse}
-      id="actions"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,7 +17,6 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
-      id="page-body"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -11,9 +11,5 @@ export const PageLayoutHeader = ({
 }: PageLayoutHeaderProps): JSX.Element => {
   const { classes } = useStyles();
 
-  return (
-    <header className={classes.pageLayoutHeader} id="header">
-      {children}
-    </header>
-  );
+  return <header className={classes.pageLayoutHeader}>{children}</header>;
 };

package/src/components/Layout/PageLayout/index.ts

@@ -2,11 +2,9 @@ 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,
-  QuickAccess: PageQuickAccess
+  Header: PageLayoutHeader
 });

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

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

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

@@ -28,7 +28,6 @@ const useStyles = makeStyles<{
       left: props?.left ?? 0,
       margin: 0,
       maxWidth: 'unset',
-      paddingBottom: theme.spacing(8),
       position: 'absolute',
       right: props?.right ?? 0,
       top: props?.top ?? 0,
@@ -51,18 +50,14 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     '&[data-fixed="true"]': {
-      background: theme.palette.background.paper,
-      position: 'fixed',
-      width: '100%'
+      position: 'fixed'
     },
-    bottom: 0,
+    bottom: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    padding: theme.spacing(1, 2.5, 2.5, 0),
-    right: 0,
-    zIndex: theme.zIndex.modal
+    right: theme.spacing(2)
   },
   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, toggleTooltip: isOpen ? close : open })}
+        {children(isOpen ? close : open)}
         <Popper
           anchorEl={anchorElement}
           className={classes.popper}

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -11,7 +11,7 @@ interface Labels {
 }
 
 export interface Props {
-  children: ({ toggleTooltip, isOpen }) => ReactElement;
+  children: (toggleTooltip) => ReactElement;
   confirmVariant?: ActionVariants;
   labels: Labels;
   onConfirm: () => void;

package/src/index.ts

@@ -163,8 +163,8 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';
-export { default as Subtitle } from './Typography/Subtitle';
+
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export { default as Subtitle } from './Typography/Subtitle';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { fromPairs } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,10 +25,6 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
-        return [key, value];
-      }
-
       return [key, JSON.parse(value)];
     }
   );