@centreon/ui 24.4.1-MON-23368-containers.80 → 24.4.1-MON-34459-fullscreen-mode.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-23368-containers.80",
+  "version": "24.4.1-MON-34459-fullscreen-mode.3",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -48,11 +48,11 @@
     "test/*"
   ],
   "devDependencies": {
-    "@cypress/react": "^8.0.0",
-    "@cypress/webpack-dev-server": "^3.7.3",
+    "@cypress/react": "^7.0.2",
+    "@cypress/webpack-dev-server": "^3.2.3",
     "@faker-js/faker": "^8.0.2",
-    "@mdx-js/react": "^3.0.0",
-    "@simonsmith/cypress-image-snapshot": "^9.0.1",
+    "@mdx-js/react": "^2.1.4",
+    "@simonsmith/cypress-image-snapshot": "^6.1.0",
     "@storybook/addon-a11y": "^7.0.9",
     "@storybook/addon-docs": "^7.0.9",
     "@storybook/addon-essentials": "^7.0.9",
@@ -73,15 +73,16 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.11",
+    "@types/cypress": "^1.1.3",
+    "@types/jest": "^27.5.0",
     "@types/mocha": "^10.0.6",
-    "@types/ramda": "^0.29.9",
-    "@types/react": "^18.2.48",
-    "@types/testing-library__jest-dom": "^6.0.0",
+    "@types/ramda": "^0.29.6",
+    "@types/react": "^18.0.26",
+    "@types/testing-library__jest-dom": "^5.14.6",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.0",
-    "axios-mock-adapter": "^1.22.0",
-    "cypress": "^13.6.2",
+    "axios-mock-adapter": "^1.21.4",
+    "cypress": "^13.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
@@ -92,26 +93,27 @@
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "remark-gfm": "^3.0.1",
+    "sass": "^1.62.1",
     "speed-measure-vite-plugin": "^0.1.2",
-    "storybook": "^7.6.8",
+    "storybook": "^7.0.9",
     "storybook-addon-mock": "^4.0.0",
-    "storybook-dark-mode": "^3.0.3",
+    "storybook-dark-mode": "^3.0.0",
     "style-dictionary": "^3.8.0",
-    "ts-node": "^10.9.2",
+    "ts-node": "^10.9.1",
     "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-plugin-turbosnap": "^1.0.3"
+    "vite-plugin-turbosnap": "^1.0.2"
   },
   "dependencies": {
-    "@lexical/html": "^0.12.6",
-    "@lexical/link": "^0.12.6",
-    "@lexical/list": "^0.12.6",
-    "@lexical/react": "^0.12.6",
-    "@lexical/rich-text": "^0.12.6",
-    "@lexical/selection": "^0.12.6",
-    "@lexical/utils": "^0.12.6",
+    "@lexical/html": "^0.12.2",
+    "@lexical/link": "^0.12.2",
+    "@lexical/list": "^0.12.2",
+    "@lexical/react": "^0.12.2",
+    "@lexical/rich-text": "^0.12.2",
+    "@lexical/selection": "^0.12.2",
+    "@lexical/utils": "^0.12.2",
     "@react-spring/web": "^9.7.3",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
@@ -123,9 +125,9 @@
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
     "anylogger": "^1.0.11",
-    "d3-array": "3.2.4",
+    "d3-array": "3.2.0",
     "humanize-duration": "^3.27.3",
-    "lexical": "^0.12.6",
+    "lexical": "^0.12.2",
     "notistack": "^3.0.1",
     "numeral": "^2.0.6",
     "ramda": "0.29.1",

package/src/Form/Inputs/CheckboxGroup.tsx

@@ -46,10 +46,7 @@ const CheckboxGroup = ({
       return;
     }
 
-    setFieldValue(
-      fieldName,
-      value?.filter((elm) => !equals(elm, label))
-    );
+    setFieldValue(fieldName, value?.filter((elm) => !equals(elm, label)));
   };
 
   return useMemoComponent({

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/index.tsx

@@ -130,10 +130,11 @@ const WrapperThresholdLines = ({
 
   return (
     <g>
-      {filteredThresholdLines.map((element) =>
-        element?.map(({ Component, props, key }) => (
-          <Component {...props} id={key} key={key} />
-        ))
+      {filteredThresholdLines.map(
+        (element) =>
+          element?.map(({ Component, props, key }) => (
+            <Component {...props} id={key} key={key} />
+          ))
       )}
     </g>
   );

package/src/Graph/LineChart/InteractiveComponents/Annotations/Annotation/index.tsx

@@ -43,9 +43,8 @@ const Annotation = ({
 
   const setAnnotationHovered = useSetAtom(annotationHoveredAtom);
 
-  const content = `${truncate(event.content)} (${t(labelBy)} ${
-    event.contact?.name
-  })`;
+  const content = `${truncate(event.content)} (${t(labelBy)} ${event.contact
+    ?.name})`;
 
   return (
     <g>

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;
+};