@centreon/ui 23.10.121 → 24.4.0

package/src/Module/LicensedModule/LicenseCheck/index.tsx

@@ -1,10 +1,7 @@
-import * as React from 'react';
-
-import { isNil } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FallbackPage } from '../../../FallbackPage/FallbackPage';
-import { PageSkeleton, useFetchQuery } from '../../..';
+import { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
 import { getModuleLicenseCheckEndpoint } from '../api';
 
 import { licenseDecoder } from './decoder';
@@ -17,17 +14,27 @@ import {
 
 export interface LicenseCheckProps {
   children: React.ReactElement;
+  isFederatedComponent?: boolean;
   moduleName: string;
 }
 
 interface ContentProps {
   children: React.ReactElement;
+  isFederatedComponent?: boolean;
   isValid: boolean;
 }
 
-const Content = ({ children, isValid }: ContentProps): JSX.Element => {
+const Content = ({
+  children,
+  isValid,
+  isFederatedComponent
+}: ContentProps): JSX.Element | null => {
   const { t } = useTranslation();
 
+  if (isFederatedComponent && !isValid) {
+    return null;
+  }
+
   return isValid ? (
     children
   ) : (
@@ -40,10 +47,11 @@ const Content = ({ children, isValid }: ContentProps): JSX.Element => {
 };
 
 const LicenseCheck = ({
+  isFederatedComponent,
   children,
   moduleName
 }: LicenseCheckProps): JSX.Element | null => {
-  const { isError, data } = useFetchQuery<License>({
+  const { isError, data, isLoading } = useFetchQuery<License>({
     decoder: licenseDecoder,
     getEndpoint: () => getModuleLicenseCheckEndpoint(moduleName),
     getQueryKey: () => ['license', moduleName]
@@ -55,10 +63,17 @@ const LicenseCheck = ({
 
   const isValid = data?.success;
 
-  return isNil(isValid) ? (
-    <PageSkeleton />
+  const skeleton = isFederatedComponent ? <MenuSkeleton /> : <PageSkeleton />;
+
+  return isLoading ? (
+    skeleton
   ) : (
-    <Content isValid={isValid as boolean}>{children}</Content>
+    <Content
+      isFederatedComponent={isFederatedComponent}
+      isValid={isValid as boolean}
+    >
+      {children}
+    </Content>
   );
 };
 

package/src/Module/LicensedModule/index.tsx

@@ -5,13 +5,19 @@ import LicenseCheck, { LicenseCheckProps } from './LicenseCheck';
 type Props = ModuleProps & LicenseCheckProps;
 
 const LicensedModule = ({
+  isFederatedComponent,
   moduleName,
   children,
   ...props
 }: Props): JSX.Element => {
   return (
     <Module {...props}>
-      <LicenseCheck moduleName={moduleName}>{children}</LicenseCheck>
+      <LicenseCheck
+        isFederatedComponent={isFederatedComponent}
+        moduleName={moduleName}
+      >
+        {children}
+      </LicenseCheck>
     </Module>
   );
 };

package/src/Module/Module.cypress.spec.tsx

@@ -0,0 +1,129 @@
+import { createStore } from 'jotai';
+
+import { Method } from '..';
+
+import LicensedModule from './LicensedModule';
+
+import Module from '.';
+
+const initializeModule = (): void => {
+  cy.mount({
+    Component: (
+      <Module seedName="seed" store={createStore()}>
+        <p>Module</p>
+      </Module>
+    )
+  });
+};
+
+const initializeModuleWithValidLicense = (
+  isFederatedComponent = false
+): void => {
+  cy.interceptAPIRequest({
+    alias: 'getValidLicense',
+    method: Method.GET,
+    path: './api/internal.php?object=centreon_license_manager&action=licenseValid&productName=valid',
+    response: {
+      success: true
+    }
+  });
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <LicensedModule
+          isFederatedComponent={isFederatedComponent}
+          moduleName="valid"
+          seedName="seed"
+          store={createStore()}
+        >
+          <p>Module</p>
+        </LicensedModule>
+      </div>
+    )
+  });
+};
+
+const initializeModuleWithInvalidLicense = (
+  isFederatedComponent = false
+): void => {
+  cy.interceptAPIRequest({
+    alias: 'getInvalidLicense',
+    method: Method.GET,
+    path: './api/internal.php?object=centreon_license_manager&action=licenseValid&productName=invalid',
+    response: {
+      success: false
+    }
+  });
+
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh' }}>
+        <LicensedModule
+          isFederatedComponent={isFederatedComponent}
+          moduleName="invalid"
+          seedName="seed"
+          store={createStore()}
+        >
+          <p>Module</p>
+        </LicensedModule>
+      </div>
+    )
+  });
+};
+
+describe('Module', () => {
+  beforeEach(() => {
+    initializeModule();
+  });
+
+  it('displays the content of the module', () => {
+    cy.contains('Module').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('Valid license module', () => {
+  it('displays the content of the page when the license is valid license', () => {
+    initializeModuleWithValidLicense();
+    cy.waitForRequest('@getValidLicense');
+
+    cy.contains('Module').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the content of the component when the license is valid license', () => {
+    initializeModuleWithValidLicense(true);
+
+    cy.contains('Module').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('Invalid license module', () => {
+  it('displays the content of the page when the license is invalid license', () => {
+    initializeModuleWithInvalidLicense();
+    cy.waitForRequest('@getInvalidLicense');
+
+    cy.contains('Module').should('not.exist');
+
+    cy.contains('Oops').should('be.visible');
+    cy.contains('License invalid or expired').should('be.visible');
+    cy.contains('Please contact your administrator.').should('be.visible');
+    cy.get('img[alt="License invalid or expired !"]').should('be.visible');
+    cy.get('img[alt="Centreon Logo"]').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the content of the module when the license is invalid license', () => {
+    initializeModuleWithInvalidLicense(true);
+
+    cy.contains('Module').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Module/index.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { createGenerateClassName, StylesProvider } from '@mui/styles';
@@ -9,7 +7,7 @@ import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars: number;
+  maxSnackbars?: number;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -17,7 +15,7 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars,
+  maxSnackbars = 3,
   store
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({

package/src/Panel/index.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
 
-import IconButton from '../Button/Icon';
+import { IconButton } from '..';
 
 import { minTabHeight } from './Tab';
 

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,14 +6,16 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType,
-  useTheme
+  type PopperPlacementType
 } from '@mui/material';
-import { PopperProps } from '@mui/material/Popper';
+import type { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
+  popover: {
+    zIndex: theme.zIndex.tooltip
+  },
   popoverIconButton: {
     padding: 0,
     width: '100%'
@@ -52,7 +54,6 @@ const PopoverMenu = ({
   getPopoverData,
   popperProps
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
   const isOpen = Boolean(anchorEl);
@@ -79,7 +80,7 @@ const PopoverMenu = ({
   };
 
   useEffect(() => {
-    if (!canOpen) {
+    if (!canOpen && isOpen) {
       close();
     }
   }, [canOpen]);
@@ -105,9 +106,9 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
+            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
-            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
             {...popperProps}