@centreon/ui 24.4.1-MON-25027-refactor-access-rights.2 → 24.4.1-MON-32982-migrate-playlists-front-code.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-25027-refactor-access-rights.2",
+  "version": "24.4.1-MON-32982-migrate-playlists-front-code.4",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
@@ -85,8 +85,6 @@
     "identity-obj-proxy": "^3.0.0",
     "jest-transform-stub": "^2.0.0",
     "mochawesome": "^7.1.3",
-    "msw": "1.3.2",
-    "msw-storybook-addon": "^1.10.0",
     "puppeteer": "^13.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -159,8 +157,5 @@
   "jest-junit": {
     "suiteName": "jest tests",
     "output": "./junit.xml"
-  },
-  "msw": {
-    "workerDirectory": "public"
   }
 }

package/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.2).
+ * Mock Service Worker (1.2.1).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
@@ -300,4 +300,4 @@ function sleep(timeMs) {
 async function respondWithMock(response) {
   await sleep(response.delay)
   return new Response(response.body, response)
-}
+}

package/src/FallbackPage/FallbackPage.tsx

@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
   logo: {
     alignSelf: 'flex-end',
     height: theme.spacing(11),
-    width: '22rem'
+    width: '239px'
   },
   message: {
     color: theme.palette.text.primary
@@ -66,9 +66,9 @@ export const FallbackPage: FC<FallbackPageProps> = typedMemo(
 
     return (
       <div className={classes.notAuthorizedContainer}>
-        <section className={classes.logo}>
+        <div className={classes.logo}>
           <CentreonLogo />
-        </section>
+        </div>
         <section className={classes.messageBlock}>
           <header>
             <Typography color="primary" fontWeight="bold" variant="h3">

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -33,7 +33,6 @@ import useFetchQuery from '../../../../api/useFetchQuery';
 export interface ConnectedAutoCompleteFieldProps<TData> {
   allowUniqOption?: boolean;
   baseEndpoint?: string;
-  changeIdValue: (item: TData) => number | string;
   conditionField?: keyof SelectEntry;
   field: string;
   getEndpoint: ({ search, page }) => string;
@@ -63,7 +62,6 @@ const ConnectedAutocompleteField = (
     queryKey,
     allowUniqOption,
     baseEndpoint,
-    changeIdValue,
     ...props
   }: ConnectedAutoCompleteFieldProps<TData> &
     Omit<AutocompleteFieldProps, 'options'>): JSX.Element => {
@@ -240,24 +238,17 @@ const ConnectedAutocompleteField = (
 
         const moreOptions = page > 1 ? options : [];
 
-        const formattedList = changeIdValue
-          ? newOptions.result.map((item) => ({
-              ...item,
-              id: changeIdValue(item)
-            }))
-          : newOptions.result;
-
         if (!isEmpty(labelKey) && !isNil(labelKey)) {
-          const list = formattedList.map((item) =>
+          const list = newOptions.result.map((item) =>
             renameKey({ key: labelKey, newKey: 'name', object: item })
           );
           setOptions(moreOptions.concat(list as Array<TData>));
 
           return;
         }
-        setOptions(moreOptions.concat(formattedList));
+        setOptions(moreOptions.concat(newOptions.result));
 
-        setOptions(moreOptions.concat(formattedList as Array<TData>));
+        setOptions(moreOptions.concat(newOptions.result as Array<TData>));
 
         const total = prop('total', newOptions.meta) || 1;
         const limit = prop('limit', newOptions.meta) || 1;

package/src/Listing/Cell/DataCell.tsx

@@ -107,7 +107,21 @@ const DataCell = ({
       const isCellHidden = getHiddenCondition?.(isRowSelected);
 
       if (isCellHidden) {
-        return null;
+        return (
+          <Cell
+            className={classes.cell}
+            isRowHighlighted={isRowHighlighted}
+            listingVariant={listingVariant}
+            onClick={(e): void => {
+              if (!clickable) {
+                return;
+              }
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            {...commonCellProps}
+          />
+        );
       }
 
       return (

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
   ) : (
@@ -41,9 +48,10 @@ const Content = ({ children, isValid }: ContentProps): JSX.Element => {
 
 const LicenseCheck = ({
   children,
-  moduleName
+  moduleName,
+  isFederatedComponent
 }: 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

@@ -7,11 +7,17 @@ type Props = ModuleProps & LicenseCheckProps;
 const LicensedModule = ({
   moduleName,
   children,
+  isFederatedComponent,
   ...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/components/Form/index.ts

@@ -1,4 +1,3 @@
 export * from './Form.models';
 export * from './Dashboard';
 export * from './AccessRights';
-export { default as AccessRightsV2 } from './AccessRightsV2/AccessRights';

package/src/components/List/Item/ListItem.styles.ts

@@ -23,12 +23,6 @@ export const useStyles = makeStyles()((theme) => ({
     paddingBottom: theme.spacing(1),
     paddingTop: theme.spacing(1)
   },
-  secondary: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    gap: theme.spacing(1)
-  },
   text: {
     '&, &.MuiListItemText-root': {
       '& .MuiListItemText-primary': {

package/src/components/List/Item/ListItem.tsx

@@ -22,9 +22,7 @@ export const ListItem = forwardRef(
         disableGutters
         className={cx(classes.listItem, className)}
         ref={ref}
-        secondaryAction={
-          action && <div className={classes.secondary}>{action}</div>
-        }
+        secondaryAction={action}
         {...attr}
       >
         {children}

package/src/components/List/Item/Text.tsx

@@ -5,21 +5,19 @@ import { ListItemText as MuiListItemText } from '@mui/material';
 import { useStyles } from './ListItem.styles';
 
 type TextProps = {
-  className?: string;
   primaryText: ReactNode;
   secondaryText?: ReactNode;
 };
 
 export const Text = ({
   primaryText,
-  secondaryText,
-  className
+  secondaryText
 }: TextProps): ReactElement => {
-  const { classes, cx } = useStyles();
+  const { classes } = useStyles();
 
   return (
     <MuiListItemText
-      className={cx(classes.text, className)}
+      className={classes.text}
       primary={primaryText}
       secondary={secondaryText}
     />