@centreon/ui 24.4.1-MON-21276-Create-a-basic-token.0 → 24.4.1-MON-32982-migrate-playlists-front-code.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-21276-Create-a-basic-token.0",
+  "version": "24.4.1-MON-32982-migrate-playlists-front-code.3",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Save/Content.tsx

@@ -1,6 +1,7 @@
+import { useTranslation } from 'react-i18next';
+
 import CheckIcon from '@mui/icons-material/Check';
 import SaveIcon from '@mui/icons-material/Save';
-import { Typography, TypographyProps } from '@mui/material';
 
 interface Props {
   labelLoading: string;
@@ -10,42 +11,24 @@ interface Props {
   succeeded: boolean;
 }
 
-interface WrapperLabelProps {
-  label: string;
-}
-
-const WrapperLabel = ({
-  label,
-  ...rest
-}: WrapperLabelProps & TypographyProps): JSX.Element => {
-  return <Typography {...rest}>{label}</Typography>;
-};
-
 const Content = ({
   succeeded,
   labelSucceeded,
   labelSave,
   loading,
-  labelLoading,
-  ...rest
-}: Props & TypographyProps): JSX.Element | string | null => {
+  labelLoading
+}: Props): JSX.Element | string | null => {
+  const { t } = useTranslation();
+
   if (loading) {
-    return <WrapperLabel label={labelLoading} {...rest} />;
+    return t(labelLoading);
   }
 
   if (succeeded) {
-    return labelSucceeded ? (
-      <WrapperLabel label={labelSucceeded} {...rest} />
-    ) : (
-      <CheckIcon />
-    );
+    return labelSucceeded ? t(labelSucceeded) : <CheckIcon />;
   }
 
-  return labelSave ? (
-    <WrapperLabel label={labelSave} {...rest} />
-  ) : (
-    <SaveIcon />
-  );
+  return labelSave ? t(labelSave) : <SaveIcon />;
 };
 
 export default Content;

package/src/Button/Save/index.tsx

@@ -1,7 +1,7 @@
 import { any, isEmpty, isNil, not, or, pipe } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Theme, Tooltip, TypographyProps } from '@mui/material';
+import { Theme, Tooltip } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 
 import { getNormalizedId } from '../../utils';
@@ -18,12 +18,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
 interface Props extends Record<string, unknown> {
   className?: string;
   labelLoading?: string;
-  labelProps?: TypographyProps;
   labelSave?: string;
   labelSucceeded?: string;
   loading?: boolean;
   size?: 'small' | 'medium' | 'large';
-  startIcon?: boolean;
   succeeded?: boolean;
   tooltip?: string;
   tooltipLabel?: string;
@@ -47,8 +45,6 @@ const SaveButton = ({
   labelSave = '',
   size = 'small',
   className,
-  startIcon = true,
-  labelProps,
   ...rest
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -77,9 +73,7 @@ const SaveButton = ({
           loading={loading}
           loadingPosition={labelLoading ? 'start' : 'center'}
           size={size}
-          startIcon={
-            startIcon && <StartIcon startIconConfig={startIconConfig} />
-          }
+          startIcon={<StartIcon startIconConfig={startIconConfig} />}
           variant="contained"
           {...rest}
         >
@@ -88,8 +82,7 @@ const SaveButton = ({
             labelSave,
             labelSucceeded,
             loading,
-            succeeded,
-            ...labelProps
+            succeeded
           })}
         </LoadingButton>
       </div>

package/src/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 import { T, always, cond, equals } from 'ramda';
 
 import { SvgIconComponent } from '@mui/icons-material';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import Typography, { TypographyTypeMap } from '@mui/material/Typography';
 import { FormControlLabel, Checkbox as MuiCheckbox, Box } from '@mui/material';
 
 export type LabelPlacement = 'bottom' | 'top' | 'end' | 'start' | undefined;
@@ -56,7 +56,7 @@ interface Props {
   disabled?: boolean;
   label: string;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyProps;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
 }
 

package/src/Checkbox/CheckboxGroup/index.tsx

@@ -2,7 +2,7 @@ import { equals, includes } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
-import { TypographyProps } from '@mui/material/Typography';
+import { TypographyTypeMap } from '@mui/material/Typography';
 
 import Checkbox, { LabelPlacement } from '../Checkbox';
 
@@ -13,7 +13,7 @@ interface Props {
   disabled?: boolean;
   formGroupProps?: FormGroupProps;
   labelPlacement?: LabelPlacement;
-  labelProps?: TypographyProps;
+  labelProps?: TypographyTypeMap['props'];
   onChange?: (e) => void;
   options: Array<string>;
   values: Array<string>;

package/src/Dialog/index.tsx

@@ -43,7 +43,7 @@ export type Props = {
   dialogTitleClassName?: string;
   labelCancel?: string | null;
   labelConfirm?: string | null;
-  labelTitle?: ReactNode | null;
+  labelTitle?: string | null;
   onCancel?: () => void;
   onClose?: () => void;
   onConfirm: (event, value?) => void;

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/index.tsx

@@ -141,132 +141,126 @@ type Multiple = boolean;
 type DisableClearable = boolean;
 type FreeSolo = boolean;
 
-const AutocompleteField = React.forwardRef(
-  (
-    {
-      options,
-      label,
-      placeholder,
-      loading = false,
-      onTextChange = (): void => undefined,
-      endAdornment = undefined,
-      inputValue,
-      displayOptionThumbnail = false,
-      required = false,
-      error,
-      displayPopupIcon = true,
-      autoFocus = false,
-      hideInput = false,
-      dataTestId,
-      autoSize = false,
-      autoSizeDefaultWidth = 0,
-      autoSizeCustomPadding,
-      getOptionItemLabel = (option) => option.name,
-      ...autocompleteProps
-    }: Props,
-    ref?: React.ForwardedRef<HTMLDivElement>
-  ): JSX.Element => {
-    const { classes, cx } = useStyles({ hideInput });
-    const { t } = useTranslation();
-    const theme = useTheme();
+const AutocompleteField = ({
+  options,
+  label,
+  placeholder,
+  loading = false,
+  onTextChange = (): void => undefined,
+  endAdornment = undefined,
+  inputValue,
+  displayOptionThumbnail = false,
+  required = false,
+  error,
+  displayPopupIcon = true,
+  autoFocus = false,
+  hideInput = false,
+  dataTestId,
+  autoSize = false,
+  autoSizeDefaultWidth = 0,
+  autoSizeCustomPadding,
+  getOptionItemLabel = (option) => option.name,
+  ...autocompleteProps
+}: Props): JSX.Element => {
+  const { classes, cx } = useStyles({ hideInput });
+  const { t } = useTranslation();
+  const theme = useTheme();
 
-    const areSelectEntriesEqual = (option, value): boolean => {
-      const identifyingProps = ['id', 'name'];
+  const areSelectEntriesEqual = (option, value): boolean => {
+    const identifyingProps = ['id', 'name'];
 
-      return equals(
-        pick(identifyingProps, option),
-        pick(identifyingProps, value)
-      );
-    };
-
-    const renderInput = (params): JSX.Element => (
-      <TextField
-        {...params}
-        InputLabelProps={{
-          classes: {
-            marginDense: classes.inputLabel,
-            shrink: classes.inputLabelShrink
-          }
-        }}
-        InputProps={{
-          ...params.InputProps,
-          endAdornment: (
-            <>
-              {endAdornment && (
-                <InputAdornment position="end">{endAdornment}</InputAdornment>
-              )}
-              {params.InputProps.endAdornment}
-            </>
-          ),
-          style: {
-            background: 'transparent',
-            paddingRight: theme.spacing(5)
-          }
-        }}
-        autoFocus={autoFocus}
-        autoSize={autoSize}
-        autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
-        autoSizeDefaultWidth={autoSizeDefaultWidth}
-        classes={{
-          root: classes.textfield
-        }}
-        error={error}
-        externalValueForAutoSize={autocompleteProps?.value?.name}
-        inputProps={{
-          ...params.inputProps,
-          'aria-label': label,
-          'data-testid': dataTestId || label,
-          id: getNormalizedId(label || '')
-        }}
-        label={label}
-        placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
-        required={required}
-        value={inputValue || undefined}
-        onChange={onTextChange}
-      />
+    return equals(
+      pick(identifyingProps, option),
+      pick(identifyingProps, value)
     );
+  };
 
-    return (
-      <Autocomplete
-        disableClearable
-        classes={{
-          groupLabel: classes.inputLabel,
-          inputRoot: cx([
-            classes.input,
-            label ? classes.inputWithLabel : classes.inputWithoutLabel
-          ]),
-          popper: classes.popper,
-          root: classes.textfield
-        }}
-        forcePopupIcon={displayPopupIcon}
-        getOptionLabel={(option): string =>
-          (option as SelectEntry)?.name?.toString() || ''
+  const renderInput = (params): JSX.Element => (
+    <TextField
+      {...params}
+      InputLabelProps={{
+        classes: {
+          marginDense: classes.inputLabel,
+          shrink: classes.inputLabelShrink
+        }
+      }}
+      InputProps={{
+        ...params.InputProps,
+        endAdornment: (
+          <>
+            {endAdornment && (
+              <InputAdornment position="end">{endAdornment}</InputAdornment>
+            )}
+            {params.InputProps.endAdornment}
+          </>
+        ),
+        style: {
+          background: 'transparent',
+          paddingRight: theme.spacing(5)
         }
-        isOptionEqualToValue={areSelectEntriesEqual}
-        loading={loading}
-        loadingText={<LoadingIndicator />}
-        options={options}
-        ref={ref}
-        renderInput={renderInput}
-        renderOption={(props, option): JSX.Element => {
-          return (
-            <li
-              className={classes.options}
-              {...(props as React.HTMLAttributes<HTMLLIElement>)}
+      }}
+      autoFocus={autoFocus}
+      autoSize={autoSize}
+      autoSizeCustomPadding={7 + (autoSizeCustomPadding || 0)}
+      autoSizeDefaultWidth={autoSizeDefaultWidth}
+      classes={{
+        root: classes.textfield
+      }}
+      error={error}
+      externalValueForAutoSize={autocompleteProps?.value?.name}
+      inputProps={{
+        ...params.inputProps,
+        'aria-label': label,
+        'data-testid': dataTestId || label,
+        id: getNormalizedId(label || '')
+      }}
+      label={label}
+      placeholder={isNil(placeholder) ? t(searchLabel) : placeholder}
+      required={required}
+      value={inputValue || undefined}
+      onChange={onTextChange}
+    />
+  );
+
+  return (
+    <Autocomplete
+      disableClearable
+      classes={{
+        groupLabel: classes.inputLabel,
+        inputRoot: cx([
+          classes.input,
+          label ? classes.inputWithLabel : classes.inputWithoutLabel
+        ]),
+        popper: classes.popper,
+        root: classes.textfield
+      }}
+      forcePopupIcon={displayPopupIcon}
+      getOptionLabel={(option): string =>
+        (option as SelectEntry)?.name?.toString() || ''
+      }
+      isOptionEqualToValue={areSelectEntriesEqual}
+      loading={loading}
+      loadingText={<LoadingIndicator />}
+      options={options}
+      renderInput={renderInput}
+      renderOption={(props, option): JSX.Element => {
+        return (
+          <li
+            className={classes.options}
+            {...(props as React.HTMLAttributes<HTMLLIElement>)}
+          >
+            <Option
+              thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              <Option
-                thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
-              >
-                {getOptionItemLabel(option)}
-              </Option>
-            </li>
-          );
-        }}
-        size="small"
-        {...autocompleteProps}
-      />
-    );
-  }
-);
+              {getOptionItemLabel(option)}
+            </Option>
+          </li>
+        );
+      }}
+      size="small"
+      {...autocompleteProps}
+    />
+  );
+};
 
 export default AutocompleteField;

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/TimePeriods/DateTimePickerInput.tsx

@@ -4,11 +4,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import { useAtomValue } from 'jotai';
 import { equals } from 'ramda';
 
-import {
-  DateTimePicker,
-  DateTimePickerProps,
-  LocalizationProvider
-} from '@mui/x-date-pickers';
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
@@ -27,7 +23,6 @@ interface Props {
   disabled?: boolean;
   maxDate?: Date;
   minDate?: Date;
-  minDateTime?: Date;
   property: CustomTimePeriodProperty | string;
 }
 
@@ -35,13 +30,11 @@ const DateTimePickerInput = ({
   date,
   maxDate,
   minDate,
-  minDateTime,
   property,
   changeDate,
   disabled = false,
-  desktopMediaQuery,
-  ...rest
-}: Props & DateTimePickerProps<dayjs.Dayjs>): JSX.Element => {
+  desktopMediaQuery
+}: Props): JSX.Element => {
   const desktopPickerMediaQuery =
     '@media (min-width: 1024px) or (pointer: fine)';
 
@@ -74,10 +67,8 @@ const DateTimePickerInput = ({
         disabled={disabled}
         maxDate={maxDate && formatDate(maxDate)}
         minDate={minDate && formatDate(minDate)}
-        minDateTime={minDateTime && formatDate(minDateTime)}
         value={formatDate(date)}
         onChange={changeTime}
-        {...rest}
       />
     </LocalizationProvider>
   );

package/src/index.ts

@@ -165,5 +165,3 @@ export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePerio
 export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';
 export { default as Subtitle } from './Typography/Subtitle';
-export { default as TablePagination } from './Listing/ActionBar/Pagination';
-export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';