@centreon/ui 24.4.45-develop.0 → 24.4.46

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}

package/src/utils/index.ts

@@ -21,3 +21,4 @@ export * from './useRefreshInterval';
 export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
+export * from './useFullscreen';

package/src/utils/useFullscreen/Fullscreen.cypress.spec.tsx

@@ -0,0 +1,109 @@
+import { Provider, createStore } from 'jotai';
+import { BrowserRouter } from 'react-router-dom';
+
+import { Button } from '@mui/material';
+
+import { useFullscreen } from './useFullscreen';
+import { router, useFullscreenListener } from './useFullscreenListener';
+
+const labelEnterFullscreen = 'Enter fullscreen';
+const labelExitFullscreen = 'Exit fullscreen';
+
+const ChildComponent = (): JSX.Element => {
+  const { toggleFullscreen, fullscreenEnabled, isFullscreenActivated } =
+    useFullscreen();
+
+  return (
+    <div
+      data-fullscreenActivated={isFullscreenActivated}
+      data-fullscreenEnabled={fullscreenEnabled}
+      id="test"
+    >
+      <Button onClick={() => toggleFullscreen(document.body)}>
+        {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
+      </Button>
+    </div>
+  );
+};
+
+const TestComponent = (): JSX.Element => {
+  useFullscreenListener();
+
+  return <ChildComponent />;
+};
+
+const initialize = (): void => {
+  const store = createStore();
+
+  const queryParameters = new Map();
+
+  cy.stub(router, 'useSearchParams', () => queryParameters);
+
+  cy.mount({
+    Component: (
+      <BrowserRouter>
+        <Provider store={store}>
+          <TestComponent />
+        </Provider>
+      </BrowserRouter>
+    )
+  });
+};
+
+describe('Fullscreen', () => {
+  it('enters fullscreen mode when the button is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelEnterFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelExitFullscreen).realClick();
+  });
+
+  it('exits fullscreen mode when the button is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelEnterFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.contains(labelExitFullscreen).realClick();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+  });
+
+  it('toggles fullscreen mode when the corresponding shortcut is clicked', () => {
+    initialize();
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.get('#test').realPress(['Alt', 'F']);
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'true')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+
+    cy.get('#test').realPress(['Alt', 'F']);
+
+    cy.get('#test')
+      .should('have.attr', 'data-fullscreenActivated', 'false')
+      .should('have.attr', 'data-fullscreenEnabled', 'true');
+  });
+});

package/src/utils/useFullscreen/atoms.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isFullscreenActivatedAtom = atom(false);

package/src/utils/useFullscreen/index.ts

@@ -0,0 +1,2 @@
+export * from './useFullscreen';
+export * from './useFullscreenListener';

package/src/utils/useFullscreen/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelCannotEnterInFullscreen = 'Cannot enter fullscreen mode';

package/src/utils/useFullscreen/useFullscreen.ts

@@ -0,0 +1,73 @@
+import { useTranslation } from 'react-i18next';
+import { useAtom } from 'jotai';
+
+import { useSnackbar } from '../..';
+
+import { labelCannotEnterInFullscreen } from './translatedLabels';
+import { isFullscreenActivatedAtom } from './atoms';
+
+interface UseFullscreenState {
+  enterInFullscreen: (element: HTMLElement | null) => void;
+  exitFullscreen: () => void;
+  fullscreenEnabled: boolean;
+  isFullscreenActivated: boolean;
+  resetVariables: () => void;
+  toggleFullscreen: (element: HTMLElement | null) => void;
+}
+
+export const useFullscreen = (): UseFullscreenState => {
+  const { t } = useTranslation();
+
+  const { showErrorMessage } = useSnackbar();
+
+  const [isFullscreenActivated, setIsFullscreenActivated] = useAtom(
+    isFullscreenActivatedAtom
+  );
+
+  const resetVariables = (): void => {
+    setIsFullscreenActivated(false);
+  };
+
+  const enterInFullscreen = (element: HTMLElement | null): void => {
+    if (!document.fullscreenEnabled) {
+      return;
+    }
+
+    if (!element) {
+      showErrorMessage(t(labelCannotEnterInFullscreen));
+    }
+
+    element
+      ?.requestFullscreen({ navigationUI: 'show' })
+      .then(() => {
+        setIsFullscreenActivated(true);
+      })
+      .catch(() => {
+        showErrorMessage(t(labelCannotEnterInFullscreen));
+        setIsFullscreenActivated(false);
+      });
+  };
+
+  const exitFullscreen = (): void => {
+    document.exitFullscreen().then(resetVariables);
+  };
+
+  const toggleFullscreen = (element: HTMLElement | null): void => {
+    if (isFullscreenActivated) {
+      exitFullscreen();
+
+      return;
+    }
+
+    enterInFullscreen(element);
+  };
+
+  return {
+    enterInFullscreen,
+    exitFullscreen,
+    fullscreenEnabled: document.fullscreenEnabled,
+    isFullscreenActivated,
+    resetVariables,
+    toggleFullscreen
+  };
+};

package/src/utils/useFullscreen/useFullscreenListener.ts

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+
+import { equals } from 'ramda';
+import { useSearchParams } from 'react-router-dom';
+
+import { useDeepCompare } from '../useMemoComponent';
+
+import { useFullscreen } from './useFullscreen';
+
+export const router = {
+  useSearchParams
+};
+
+export const useFullscreenListener = (): boolean => {
+  const { toggleFullscreen, resetVariables, isFullscreenActivated } =
+    useFullscreen();
+
+  const toggle = (event: KeyboardEvent): void => {
+    if (!event.altKey || !equals(event.code, 'KeyF')) {
+      return;
+    }
+
+    toggleFullscreen(document.querySelector('body'));
+  };
+
+  const changeFullscreen = (): void => {
+    if (document.fullscreenElement) {
+      return;
+    }
+
+    resetVariables();
+  };
+
+  useEffect(
+    () => {
+      document.addEventListener('fullscreenchange', changeFullscreen);
+
+      return () => {
+        document.removeEventListener('fullscreenchange', changeFullscreen);
+      };
+    },
+    useDeepCompare([document.fullscreenElement])
+  );
+
+  useEffect(() => {
+    window.addEventListener('keypress', toggle);
+
+    return () => {
+      window.removeEventListener('keypress', toggle);
+    };
+  }, [isFullscreenActivated]);
+
+  return isFullscreenActivated;
+};