@centreon/ui 24.4.1-MON-34459-fullscreen-mode.0 → 24.4.1-MON-develop-dashboard.1

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/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,4 +21,3 @@ export * from './useRefreshInterval';
 export * from './centreonBaseURL';
 export * from './usePluralizedTranslation';
 export * from './useResizeObserver';
-export * from './useFullscreen';

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

@@ -1,109 +0,0 @@
-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

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

package/src/utils/useFullscreen/index.ts

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

package/src/utils/useFullscreen/translatedLabels.ts

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

package/src/utils/useFullscreen/useFullscreen.ts

@@ -1,73 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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;
-};