@centreon/ui 24.11.14 → 24.11.21

package/src/Listing/models.ts

@@ -15,10 +15,12 @@ export interface ComponentColumnProps {
 
 export interface Column {
   Component?: (props: ComponentColumnProps) => JSX.Element | null;
+  align?: 'start' | 'end' | 'center';
   clickable?: boolean;
   compact?: boolean;
   disablePadding?: boolean;
   disabled?: boolean;
+  displaySubItemsCaret?: boolean;
   getColSpan?: (isSelected) => number | undefined;
   getFormattedString?: (row) => string | null;
   getHiddenCondition?: (isSelected) => boolean;
@@ -74,3 +76,11 @@ export interface TableStyleAtom {
     width: number;
   };
 }
+
+export interface ListingSubItems {
+  canCheckSubItems: boolean;
+  enable: boolean;
+  getRowProperty: (row?) => string;
+  labelCollapse: string;
+  labelExpand: string;
+}

package/src/Listing/tableAtoms.ts

@@ -32,14 +32,19 @@ export const tableStyleAtom = atom<TableStyleAtom>({
   }
 });
 
-export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
-  const tableStyle = get(tableStyleAtom);
-
-  const isExtendedMode = equals(viewMode, ListingVariant.extended);
+export const tableStyleDerivedAtom = atom(
+  null,
+  (get, set, { listingVariant }) => {
+    const tableStyle = get(tableStyleAtom);
+
+    const isExtendedMode = equals(listingVariant, ListingVariant.extended);
+
+    set(tableStyleAtom, {
+      ...tableStyle,
+      body: isExtendedMode ? extendedTableBody : compactTableBody,
+      header: isExtendedMode ? extendedTableHeader : compactTableHeader
+    });
+  }
+);
 
-  set(tableStyleAtom, {
-    ...tableStyle,
-    body: isExtendedMode ? extendedTableBody : compactTableBody,
-    header: isExtendedMode ? extendedTableHeader : compactTableHeader
-  });
-});
+export const subItemsPivotsAtom = atom<Array<number | string>>([]);

package/src/Listing/useResizeObserver.ts

@@ -1,4 +1,4 @@
-import { useEffect, RefObject } from 'react';
+import { RefObject, useEffect } from 'react';
 
 import ResizeObserver from 'resize-observer-polyfill';
 

package/src/Listing/useStyleTable.ts

@@ -14,7 +14,7 @@ import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 interface TableStyle {
   checkable?: boolean;
   currentVisibleColumns?: Array<Column>;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 interface TableStyleState {
@@ -27,32 +27,33 @@ const isCompactMode = equals<ListingVariant | undefined>(
 );
 
 interface GetTextStyleProps {
+  listingVariant?: ListingVariant;
   theme: Theme;
-  viewMode?: ListingVariant;
 }
 
 export const getTextStyleByViewMode = ({
-  viewMode,
+  listingVariant,
   theme
 }: GetTextStyleProps): CSSObject =>
   pick(
     ['color', 'fontSize', 'lineHeight'],
-    theme.typography[isCompactMode(viewMode) ? 'body2' : 'body1']
+    theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
   );
 
 const useStyleTable = ({
   checkable,
   currentVisibleColumns,
-  viewMode
+  listingVariant
 }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
   const updateStyleTable = useSetAtom(tableStyleDerivedAtom);
 
   const getGridTemplateColumn = (): string => {
-    const checkbox = checkable ? '50px ' : '';
+    const checkbox = checkable ? 'fit-content(1rem) ' : ''; // SelectAction (checkbox) cell adjusts to content
 
     const columnTemplate = currentVisibleColumns
+      ?.filter((column) => column)
       ?.map(({ width, shortLabel }) => {
         if (!isNil(shortLabel)) {
           return 'min-content';
@@ -69,10 +70,10 @@ const useStyleTable = ({
   };
 
   useEffect(() => {
-    if (viewMode) {
-      updateStyleTable({ viewMode });
+    if (listingVariant) {
+      updateStyleTable({ listingVariant });
     }
-  }, [viewMode]);
+  }, [listingVariant]);
 
   return {
     dataStyle,

package/src/ListingPage/Filter.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
-
 import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
+import { ReactElement, forwardRef } from 'react';
 import { useMemoComponent } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -14,24 +13,22 @@ const useStyles = makeStyles()((theme) => ({
 }));
 
 export interface FilterProps {
-  content?: React.ReactElement;
+  content?: ReactElement;
 }
 
-const Filter = React.forwardRef(
-  ({ content }: FilterProps, ref): JSX.Element => {
-    const { classes } = useStyles();
-
-    return (
-      <Box
-        className={classes.content}
-        component="div"
-        ref={ref as React.RefObject<HTMLDivElement>}
-      >
-        {content}
-      </Box>
-    );
-  }
-);
+const Filter = forwardRef(({ content }: FilterProps, ref): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <Box
+      className={classes.content}
+      component="div"
+      ref={ref as React.RefObject<HTMLDivElement>}
+    >
+      {content}
+    </Box>
+  );
+});
 
 interface MemoizedFilterProps extends FilterProps {
   memoProps?: Array<unknown>;

package/src/ListingPage/index.stories.tsx

@@ -14,7 +14,7 @@ import Panel from '../Panel';
 
 import Filter from './Filter';
 
-import ListingPage from '.';
+import ListingPage, { ListingPageProps } from '.';
 
 export default { title: 'Listing Page' };
 
@@ -59,6 +59,9 @@ const useStyles = makeStyles()((theme) => ({
     gridGap: theme.spacing(2),
     gridTemplateColumns: 'auto auto 1fr'
   },
+  page: {
+    height: '100vh'
+  },
   title: {
     alignItems: 'center',
     gridArea: 'title',
@@ -251,8 +254,18 @@ const DetailsPanelWithTabs = (): JSX.Element => (
   />
 );
 
+const Template = (args: ListingPageProps): JSX.Element => {
+  const { classes } = useStyles();
+
+  return (
+    <div className={classes.page}>
+      <ListingPage {...args} />
+    </div>
+  );
+};
+
 export const normal = (): JSX.Element => (
-  <ListingPage
+  <Template
     filter={<FilterWithContent />}
     listing={listing}
     panelOpen={false}
@@ -260,7 +273,7 @@ export const normal = (): JSX.Element => (
 );
 
 export const withOpenPanel = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -269,7 +282,7 @@ export const withOpenPanel = (): JSX.Element => (
 );
 
 export const withOpenPanelAndTabs = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -278,7 +291,7 @@ export const withOpenPanelAndTabs = (): JSX.Element => (
 );
 
 export const withFilterDetailsAndOpenPanel = (): JSX.Element => (
-  <ListingPage
+  <Template
     panelOpen
     filter={<FilterWithContent />}
     listing={listing}
@@ -290,7 +303,7 @@ export const withFixedPanel = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <ListingPage
+    <Template
       panelFixed
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={listing}
@@ -304,7 +317,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
   const [open, setOpen] = useState(true);
 
   return (
-    <ListingPage
+    <Template
       filter={<FilterWithOpenButton onOpen={(): void => setOpen(true)} />}
       listing={
         <Listing
@@ -326,7 +339,7 @@ export const withResponsivePaginationTable = (): JSX.Element => {
 };
 
 export const withALongContent = (): JSX.Element => (
-  <ListingPage
+  <Template
     filter={<FilterWithContent />}
     listing={
       <div>

package/src/ListingPage/index.tsx

@@ -1,11 +1,12 @@
-import { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useRef } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { ParentSize } from '..';
 import WithPanel from '../Panel/WithPanel';
+import { useMemoComponent } from '../utils';
 
 import FilterSkeleton from './FilterSkeleton';
 import ListingSkeleton from './ListingSkeleton';
@@ -30,7 +31,7 @@ const useStyles = makeStyles()((theme) => {
   };
 });
 
-interface Props {
+export interface ListingPageProps {
   filter: JSX.Element;
   fullHeight?: boolean;
   listing: JSX.Element;
@@ -52,32 +53,10 @@ const ListingPage = ({
   listingScrollOffset = 16,
   fullHeight = false,
   memoListingProps = []
-}: Props): JSX.Element => {
+}: ListingPageProps): JSX.Element => {
   const { classes, cx } = useStyles();
-  const [listingHeight, setListingHeight] = useState(0);
-  const listingRef = useRef<HTMLDivElement | null>(null);
   const filtersRef = useRef<HTMLDivElement | null>(null);
 
-  const resize = (): void => {
-    setListingHeight(window.innerHeight);
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', resize);
-
-    setListingHeight(window.innerHeight);
-
-    return () => {
-      window.removeEventListener('resize', resize);
-    };
-  }, []);
-
-  const listingContainerHeight =
-    listingHeight -
-    (filtersRef.current?.getBoundingClientRect().height || 0) -
-    (filtersRef.current?.getBoundingClientRect().top || 0) -
-    listingScrollOffset;
-
   const memoListingComponent = useMemoComponent({
     Component: listing,
     memoProps: [...memoListingProps]
@@ -90,18 +69,21 @@ const ListingPage = ({
       </div>
 
       <WithPanel fixed={panelFixed} open={panelOpen} panel={panel}>
-        <Box
-          className={classes.listing}
-          ref={listingRef}
-          sx={{
-            ...(fullHeight && { height: '100%' }),
-            maxHeight: listingContainerHeight
-          }}
-        >
-          <Suspense fallback={<ListingSkeleton />}>
-            {memoListingComponent}
-          </Suspense>
-        </Box>
+        <ParentSize>
+          {({ height }) => (
+            <Box
+              className={classes.listing}
+              sx={{
+                height: `calc(${height}px - ${listingScrollOffset}px)`,
+                ...(fullHeight && { height: '100%' })
+              }}
+            >
+              <Suspense fallback={<ListingSkeleton />}>
+                {memoListingComponent}
+              </Suspense>
+            </Box>
+          )}
+        </ParentSize>
       </WithPanel>
     </div>
   );

package/src/Logo/CentreonLogo.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import { Image, ImageVariant } from '..';
+import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
+import CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
 import LoadingSkeleton from '../LoadingSkeleton';
 import { useThemeMode } from '../utils/useThemeMode';
-import CentreonLogoLight from '../../assets/centreon-logo-one-line-light.svg';
-import CentreonLogoDark from '../../assets/centreon-logo-one-line-dark.svg';
 
 import { labelCentreonLogo } from './translatedLabels';
 

package/src/MenuSkeleton/index.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { SkeletonProps, useTheme, alpha } from '@mui/material';
+import { SkeletonProps, alpha, useTheme } from '@mui/material';
 
 import LoadingSkeleton from '../LoadingSkeleton';
 

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

@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import withMock from 'storybook-addon-mock';
 import { makeStyles } from 'tss-react/mui';
 
 import { Alert, Container } from '@mui/material';
@@ -20,7 +19,6 @@ export default {
     moduleName: { control: 'text' }
   },
   component: LicenseCheck,
-  decorators: [withMock],
   title: 'LicenseCheck'
 } as ComponentMeta<typeof LicenseCheck>;
 

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 { MenuSkeleton, PageSkeleton, useFetchQuery } from '../../..';
 import { FallbackPage } from '../../../FallbackPage/FallbackPage';
-import { 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,15 +1,15 @@
-import * as React from 'react';
-
+import { QueryClient } from '@tanstack/react-query';
 import { Provider as JotaiProvider, createStore } from 'jotai';
 
-import { createGenerateClassName, StylesProvider } from '@mui/styles';
+import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
-import { ThemeProvider, QueryProvider } from '..';
+import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
 export interface ModuleProps {
   children: React.ReactElement;
-  maxSnackbars: number;
+  maxSnackbars?: number;
+  queryClient?: QueryClient;
   seedName: string;
   store: ReturnType<typeof createStore>;
 }
@@ -17,15 +17,16 @@ export interface ModuleProps {
 const Module = ({
   children,
   seedName,
-  maxSnackbars,
-  store
+  maxSnackbars = 3,
+  store,
+  queryClient
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
   });
 
   return (
-    <QueryProvider>
+    <QueryProvider queryClient={queryClient}>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
           <ThemeProvider>

package/src/MultiSelectEntries/index.tsx

@@ -2,8 +2,8 @@
 
 import { Ref } from 'react';
 
-import { makeStyles } from 'tss-react/mui';
 import { CxArg } from 'tss-react';
+import { makeStyles } from 'tss-react/mui';
 
 import IconCreate from '@mui/icons-material/Create';
 import { Box, Chip, FormHelperText, Grid, Typography } from '@mui/material';
@@ -134,8 +134,6 @@ const MultiSelectEntries = ({
         [classes.container]: true
       } as CxArg)}
       ref={hoverRef as Ref<HTMLDivElement>}
-      role="button"
-      tabIndex={0}
       onClick={onClick}
       onKeyDown={onClick}
     >

package/src/MultiSelectEntries/useHover.ts

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, Ref } from 'react';
+import { Ref, useEffect, useRef, useState } from 'react';
 
 const useHover = (): Array<Ref<Node> | boolean> => {
   const [value, setValue] = useState<boolean>(false);