@centreon/ui 24.4.45-develop.0 → 24.4.45

package/src/Listing/Listing.styles.ts

@@ -1,7 +1,5 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { ListingVariant } from '@centreon/ui-context';
-
 import { TableStyleAtom as TableStyle } from './models';
 
 const loadingIndicatorHeight = 3;
@@ -9,12 +7,12 @@ const loadingIndicatorHeight = 3;
 interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
-  listingVariant: ListingVariant;
+  isResponsive: string;
   rows: Array<unknown>;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(
-  (theme, { dataStyle, getGridTemplateColumn, rows }) => ({
+  (theme, { dataStyle, getGridTemplateColumn, rows, isResponsive }) => ({
     actionBar: {
       alignItems: 'center',
       display: 'flex'
@@ -56,7 +54,7 @@ const useListingStyles = makeStyles<StylesProps>()(
       gridTemplateColumns: getGridTemplateColumn,
       gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
         rows?.length || 1
-      }, ${dataStyle.body.height}px)`,
+      }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
       position: 'relative'
     },
     tableBody: {

package/src/Listing/index.stories.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 const ComponentColumn = ({ row, isSelected }): JSX.Element => (
-  <>
+  <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
     <span>
       {'I am '}
       <b>{`${isSelected ? 'selected' : 'not selected'}`}</b>
@@ -50,7 +50,7 @@ const ComponentColumn = ({ row, isSelected }): JSX.Element => (
       {'I am '}
       <b>{`${row.active ? 'active' : 'not active'}`}</b>
     </span>
-  </>
+  </div>
 );
 
 const ButtonColumn = ({ row }): JSX.Element => (
@@ -395,3 +395,26 @@ export const ListingWithSubItems = {
   },
   render: TemplateSubItems
 };
+
+export const ListingWithResponsive = {
+  args: {
+    checkable: true,
+    columns: [
+      ...defaultColumns,
+      {
+        Component: ComponentColumn,
+        id: '##',
+        label: 'Responsive',
+        type: ColumnType.component,
+        width: '140px'
+      }
+    ],
+    currentPage: 1,
+    isResponsive: true,
+    limit: 10,
+    loading: false,
+    rows: listingWithSubItems,
+    totalRows: 10
+  },
+  render: TemplateSubItems
+};

package/src/Listing/index.test.tsx

@@ -216,7 +216,7 @@ describe('Listing', () => {
       <Listing
         columnConfiguration={{
           selectedColumnIds: columns.map(prop('id')),
-          sortable: false
+          sortable: true
         }}
         columns={columns}
         rows={rows}

package/src/Listing/index.tsx

@@ -102,6 +102,7 @@ export interface Props<TRow> {
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
+  isResponsive?: boolean;
   limit?: number;
   listingVariant?: ListingVariant;
   loading?: boolean;
@@ -147,6 +148,7 @@ const Listing = <TRow extends { id: RowId }>({
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
+  isResponsive = false,
   onResetColumns,
   onSelectColumns,
   rows = [],
@@ -233,7 +235,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { classes } = useListingStyles({
     dataStyle,
     getGridTemplateColumn,
-    listingVariant,
+    isResponsive,
     rows: rowsToDisplay
   });
 

package/src/Listing/models.ts

@@ -15,6 +15,7 @@ export interface ComponentColumnProps {
 
 export interface Column {
   Component?: (props: ComponentColumnProps) => JSX.Element | null;
+  align?: 'start' | 'end' | 'center';
   clickable?: boolean;
   compact?: boolean;
   disablePadding?: boolean;

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

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

package/src/api/useMutationQuery/index.ts

@@ -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;
@@ -33,30 +38,36 @@ export type UseMutationQueryProps<T, TMeta> = {
   method: Method;
   onError?: (
     error: ResponseError,
-    variables: T & { _meta: TMeta },
+    variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
-  onMutate?: (variables: T & { _meta: TMeta }) => Promise<unknown> | unknown;
+  onMutate?: (variables: Variables<TMeta, T>) => Promise<unknown> | unknown;
   onSuccess?: (
     data: ResponseError | T,
-    variables: T & {
-      _meta: TMeta;
-    },
+    variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
 } & Omit<
-  UseMutationOptions<T & { _meta?: TMeta }>,
-  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess'
+  UseMutationOptions<{ _meta?: TMeta; payload: T }>,
+  'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
 >;
 
 const log = anylogger('API Request');
 
-export type UseMutationQueryState<T> = Omit<
+export type UseMutationQueryState<T, TMeta> = Omit<
   UseMutationResult<T | ResponseError>,
-  'isError'
+  'isError' | 'mutate' | 'mutateAsync'
 > & {
   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>;
 };
 
 const useMutationQuery = <T extends object, TMeta>({
@@ -72,18 +83,18 @@ const useMutationQuery = <T extends object, TMeta>({
   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 }
+    Variables<TMeta, T>
   >({
     mutationFn: (
-      _payload: T & { _meta: TMeta }
+      variables: Variables<TMeta, T>
     ): Promise<T | ResponseError> => {
-      const { _meta, ...payload } = _payload || {};
+      const { _meta, payload } = variables || {};
 
       return customFetch<T>({
         baseEndpoint,

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}