@centreon/ui 23.10.37 → 23.10.39

package/src/Listing/index.tsx

@@ -26,42 +26,34 @@ import {
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from 'tss-react/mui';
 
-import {
-  Box,
-  LinearProgress,
-  Table,
-  TableBody,
-  TableRow,
-  useTheme
-} from '@mui/material';
+import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
-import useKeyObserver from '../utils/useKeyObserver';
-import useMemoComponent from '../utils/useMemoComponent';
+import { useKeyObserver, useMemoComponent } from '../utils';
 
 import ListingActionBar from './ActionBar';
 import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import getCumulativeOffset from './getCumulativeOffset';
-import ListingHeader, { headerHeight } from './Header/index';
 import {
   Column,
   ColumnConfiguration,
   PredefinedRowSelection,
   RowColorCondition,
   RowId,
-  SortOrder,
-  TableStyleAtom as TableStyle
+  SortOrder
 } from './models';
-import ListingRow from './Row';
-import ListingLoadingSkeleton from './Skeleton';
+import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
 import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
+import { loadingIndicatorHeight, useStyles } from './Listing.styles';
+import { EmptyResult } from './EmptyResult/EmptyResult';
+import { SkeletonLoader } from './Row/SkeletonLoaderRows';
+import { ListingHeader } from './Header';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -78,88 +70,6 @@ const getVisibleColumns = ({
   ) as Array<Column>;
 };
 
-const loadingIndicatorHeight = 3;
-
-interface StylesProps {
-  checkable: boolean;
-  currentVisibleColumns: Array<Column>;
-  dataStyle: TableStyle;
-  getGridTemplateColumn: string;
-  rows: Array<unknown>;
-  viewMode: ListingVariant;
-}
-
-const useStyles = makeStyles<StylesProps>()(
-  (
-    theme,
-    { dataStyle, getGridTemplateColumn, rows, checkable, currentVisibleColumns }
-  ) => ({
-    actionBar: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    checkbox: {
-      justifyContent: 'start'
-    },
-    container: {
-      background: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      width: '100%'
-    },
-    emptyDataCell: {
-      flexDirection: 'column',
-      gridColumn: `auto / span ${
-        checkable
-          ? currentVisibleColumns.length + 1
-          : currentVisibleColumns.length
-      }`,
-      justifyContent: 'center'
-    },
-    emptyDataRow: {
-      display: 'contents'
-    },
-    loadingIndicator: {
-      height: loadingIndicatorHeight,
-      width: '100%'
-    },
-    table: {
-      '.listingHeader > div > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-      '.listingHeader div div': {
-        backgroundColor: theme.palette.background.listingHeader,
-        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
-        height: dataStyle.header.height,
-        padding: 0
-      },
-      alignItems: 'center',
-      display: 'grid',
-      gridTemplateColumns: getGridTemplateColumn,
-      gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
-        rows?.length
-      }, ${dataStyle.body.height}px)`,
-      position: 'relative'
-    },
-    tableBody: {
-      '.MuiTableRow-root > div:first-of-type': {
-        paddingLeft: theme.spacing(1.5)
-      },
-
-      display: 'contents',
-      'div:first-of-type': {
-        gridColumnStart: 1
-      },
-      position: 'relative'
-    },
-    tableWrapper: {
-      borderBottom: 'none',
-      overflow: 'auto'
-    }
-  })
-);
-
 interface CustomStyle {
   customStyleViewerModeContainer?: string;
   customStyleViewerModeIcon?: string;
@@ -196,7 +106,7 @@ export interface Props<TRow> {
   onRowClick?: (row: TRow) => void;
   onSelectColumns?: (selectedColumnIds: Array<string>) => void;
   onSelectRows?: (rows: Array<TRow>) => void;
-  onSort?: (sortParams) => void;
+  onSort?: (sortParams: { sortField: string; sortOrder: SortOrder }) => void;
   paginated?: boolean;
   predefinedRowsSelection?: Array<PredefinedRowSelection>;
   rowColorConditions?: Array<RowColorCondition>;
@@ -262,11 +172,10 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
-  const { classes } = useStyles({
-    checkable,
-    currentVisibleColumns,
+  const { classes, theme } = useStyles({
     dataStyle,
     getGridTemplateColumn,
+    limit,
     rows,
     viewMode
   });
@@ -283,8 +192,6 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
-  const theme = useTheme();
-
   useResizeObserver({
     onResize: () => {
       setTableTopOffset(getCumulativeOffset(containerRef.current));
@@ -490,9 +397,9 @@ const Listing = <TRow extends { id: RowId }>({
 
     return `calc(100vh - ${tableTopOffset}px - ${
       actionBarRef.current?.offsetHeight
-    }px - ${headerHeight}px - ${loadingIndicatorHeight}px - ${theme.spacing(
-      1
-    )})`;
+    }px - ${
+      dataStyle.header.height
+    }px - ${loadingIndicatorHeight}px - ${theme.spacing(1)})`;
   };
 
   const changeLimit = (updatedLimit: string): void => {
@@ -646,7 +553,6 @@ const Listing = <TRow extends { id: RowId }>({
 
                     {visibleColumns.map((column) => (
                       <DataCell
-                        areColumnsEditable={areColumnsEditable}
                         column={column}
                         disableRowCondition={disableRowCondition}
                         getHighlightRowCondition={getHighlightRowCondition}
@@ -661,26 +567,13 @@ const Listing = <TRow extends { id: RowId }>({
                   </ListingRow>
                 );
               })}
-              {rows.length < 1 && (
-                <TableRow
-                  className={classes.emptyDataRow}
-                  component="div"
-                  tabIndex={-1}
-                >
-                  <Cell
-                    align="center"
-                    className={classes.emptyDataCell}
-                    disableRowCondition={(): boolean => false}
-                    isRowHovered={false}
-                  >
-                    {loading ? (
-                      <ListingLoadingSkeleton />
-                    ) : (
-                      t(labelNoResultFound)
-                    )}
-                  </Cell>
-                </TableRow>
-              )}
+
+              {rows.length < 1 &&
+                (loading ? (
+                  <SkeletonLoader rows={limit} />
+                ) : (
+                  <EmptyResult label={t(labelNoResultFound)} />
+                ))}
             </TableBody>
           </Table>
         </Box>

package/src/Listing/useStyleTable.ts

@@ -50,7 +50,7 @@ const useStyleTable = ({
   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
       ?.map(({ width, shortLabel }) => {

package/src/ListingPage/index.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { Box } from '@mui/material';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 import WithPanel from '../Panel/WithPanel';
 
 import FilterSkeleton from './FilterSkeleton';

package/src/Logo/CentreonLogo.tsx

@@ -6,8 +6,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Image, ImageVariant } from '..';
 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 CentreonLogoLight from '../@assets/brand/centreon-logo-one-line-light.svg';
+import CentreonLogoDark from '../@assets/brand/centreon-logo-one-line-dark.svg';
 
 import { labelCentreonLogo } from './translatedLabels';
 

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/Panel/Memoized.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from 'react';
 
-import useMemoComponent from '../utils/useMemoComponent';
+import { useMemoComponent } from '../utils';
 
 import Panel, { Props } from '.';
 

package/src/Panel/Section/index.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '../../testRenderer';
+import { render, fireEvent } from '../../../test/testRenderer';
 
 import SectionPanel from '.';
 

package/src/Panel/Section/index.tsx

@@ -6,7 +6,7 @@ import ForwardIcon from '@mui/icons-material/ArrowForwardIos';
 
 import Panel from '..';
 import ContentWithCircularLoading from '../../ContentWithCircularProgress';
-import useMemoComponent from '../../utils/useMemoComponent';
+import { useMemoComponent } from '../../utils';
 
 import ExpandableSection from './ExpandableSection';
 

package/src/Panel/index.tsx

@@ -33,7 +33,7 @@ const useStyles = makeStyles<StylesProps>()(
       height: '100%'
     },
     container: {
-      backgroundColor: theme.palette.background.default,
+      backgroundColor: theme.palette.background.panel,
       borderTopRightRadius: 0,
       display: 'grid',
       gridTemplate: 'auto auto 1fr / 1fr',
@@ -85,6 +85,7 @@ export interface Tab {
 }
 
 export interface Props {
+  className?: string;
   header: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
@@ -111,11 +112,12 @@ const Panel = React.forwardRef(
       width = 550,
       minWidth = 550,
       headerBackgroundColor,
-      onResize
+      onResize,
+      className
     }: Props,
     ref
   ): JSX.Element => {
-    const { classes } = useStyles({
+    const { classes, cx } = useStyles({
       hasTabs: !isEmpty(tabs),
       headerBackgroundColor,
       width
@@ -179,7 +181,7 @@ const Panel = React.forwardRef(
           exit: 50
         }}
       >
-        <Paper className={classes.container} elevation={2}>
+        <Paper className={cx(classes.container, className)} elevation={2}>
           {!isNil(onResize) && (
             <div className={classes.dragger} role="none" onMouseDown={resize} />
           )}

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,17 +9,20 @@ import { Typography } from '@mui/material';
 
 interface StyleProps {
   editable: boolean;
+  error?: string;
   minInputHeight: number;
 }
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable }) => ({
+  (theme, { minInputHeight, editable, error }) => ({
     container: {
       '& p': {
         margin: 0
       },
       backgroundColor: theme.palette.background.paper,
-      border: '1px solid transparent',
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : '1px solid transparent',
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(0.5, 1)
     },
@@ -31,7 +34,9 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: `1px solid ${theme.palette.primary.main}`
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : `1px solid ${theme.palette.primary.main}`
     },
     placeholder: {
       color: theme.palette.grey[500],
@@ -41,13 +46,16 @@ const useStyles = makeStyles<StyleProps>()(
 );
 
 interface Props {
+  className?: string;
   editable: boolean;
   editorState?: string;
+  error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;
+  onBlur?: (e: string) => void;
   placeholder: string;
   resetEditorToInitialStateCondition?: () => boolean;
 }
@@ -61,9 +69,12 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState
+  initialEditorState,
+  error,
+  onBlur,
+  className
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, minInputHeight });
+  const { classes, cx } = useStyles({ editable, error, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
@@ -119,9 +130,18 @@ const ContentEditable = ({
 
   const isTextEmpty = isEmpty(root);
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
   return (
     <div
-      className={cx(classes.container, isFocused && classes.inputFocused)}
+      className={cx(
+        classes.container,
+        className,
+        isFocused && classes.inputFocused
+      )}
       id={namespace}
     >
       {editable && isTextEmpty && (
@@ -139,7 +159,7 @@ const ContentEditable = ({
         contentEditable={isEditable}
         data-testid={namespace}
         ref={ref}
-        onBlur={(): void => setFocused(false)}
+        onBlur={handleBlur}
         onFocus={(): void => setFocused(true)}
       />
     </div>

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -0,0 +1,204 @@
+import RichTextEditor from './RichTextEditor';
+
+interface CheckElementStyleOnRichTextEditorProps {
+  check: boolean;
+  element: HTMLElement;
+}
+
+const mockInititalStateToEditor =
+  '{"root": {"children": [{"children": [{"detail": 0,"format": 0,"mode": "normal","style": "","text": "test Cypress","type": "text","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "paragraph","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "root","version": 1}}';
+
+const checkElementStyleOnRichTextEditor = ({
+  element,
+  check
+}: CheckElementStyleOnRichTextEditorProps): void => {
+  cy.wrap(element).should('be.visible');
+
+  if (check) {
+    cy.wrap(element)
+      .contains('strong', 'cypress test')
+      .should('have.css', 'font-style')
+      .and('match', /italic/);
+
+    cy.wrap(element)
+      .contains('strong', 'cypress test')
+      .should('have.css', 'text-decoration')
+      .and('match', /underline line-through/);
+  } else {
+    cy.wrap(element)
+      .contains('p', 'cypress test')
+      .invoke('css', 'font-style')
+      .and('not.match', /italic/);
+
+    cy.wrap(element)
+      .contains('p', 'cypress test')
+      .invoke('css', 'text-decoration')
+      .and('not.match', /underline line-through/);
+  }
+};
+
+describe('Rich Text Editor', () => {
+  describe('Editable Rich Text Editor', () => {
+    beforeEach(() => {
+      cy.mount({ Component: <RichTextEditor editable /> });
+    });
+
+    it('displays all elements when RichTextEditor is called with required props', () => {
+      cy.findByLabelText('Undo').should('be.visible');
+      cy.findByLabelText('Redo').should('be.visible');
+      cy.findByLabelText('bold').should('be.visible');
+      cy.findByLabelText('italic').should('be.visible');
+      cy.findByLabelText('underline').should('be.visible');
+      cy.findByLabelText('strikethrough').should('be.visible');
+      cy.findByLabelText('link').should('be.visible');
+      cy.findByLabelText('RichTextEditor')
+        .should('be.visible')
+        .and('have.value', '');
+
+      cy.get('#RichTextEditor').contains('Type here...');
+    });
+
+    it('displays changes with undo redo buttons', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.text',
+        'cypress test'
+      );
+
+      cy.findByLabelText('Undo').click();
+
+      cy.get('[data-testid="RichTextEditor"]').should('have.text', '');
+
+      cy.findByLabelText('Redo').click();
+
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.text',
+        'cypress test'
+      );
+    });
+
+    it('displays changes with bold, italic, underline and strikethrough buttons', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#bold').click();
+      cy.get('#italic').click();
+      cy.get('#underline').click();
+      cy.get('#strikethrough').click();
+
+      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
+        checkElementStyleOnRichTextEditor({ check: true, element });
+      });
+
+      cy.get('#bold').click();
+      cy.get('#italic').click();
+      cy.get('#underline').click();
+      cy.get('#strikethrough').click();
+
+      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
+        checkElementStyleOnRichTextEditor({ check: false, element });
+      });
+    });
+
+    it('adds link with an url when link button is clicked', () => {
+      cy.get('[data-testid="RichTextEditor"]').type('cypress');
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#link').click();
+
+      cy.findByLabelText('Saved link').should('have.text', 'https://');
+
+      cy.findByLabelText('Edit link').click();
+      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
+
+      cy.findByText('cypress')
+        .parent()
+        .then((element: HTMLElement) => {
+          cy.wrap(element)
+            .should('have.attr', 'href')
+            .and('match', /^https:\/\/www.centreon.com/);
+
+          cy.wrap(element)
+            .should('have.attr', 'rel')
+            .and('match', /^noopener/);
+
+          cy.wrap(element)
+            .should('have.attr', 'target')
+            .and('match', /_blank/);
+        });
+
+      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
+
+      cy.get('#link').click({ force: true });
+
+      cy.findByText('cypress')
+        .parent()
+        .then((element: HTMLElement) => {
+          cy.wrap(element)
+            .contains('p', 'cypress')
+            .should('not.have.attr', 'href');
+
+          cy.wrap(element).should('not.have.attr', 'rel');
+
+          cy.wrap(element).should('not.have.attr', 'target');
+        });
+    });
+  });
+
+  describe('Disabled Rich Text Editor', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable={false}
+            initialEditorState={mockInititalStateToEditor}
+          />
+        )
+      });
+    });
+
+    it('displays editor when editable props is false and an initialState exist', () => {
+      cy.get('[data-testid="RichTextEditor"]')
+        .invoke('attr', 'contenteditable')
+        .should('eq', 'false');
+      cy.findByLabelText('Undo').should('not.exist');
+      cy.findByLabelText('Redo').should('not.exist');
+      cy.findByLabelText('bold').should('not.exist');
+      cy.findByLabelText('italic').should('not.exist');
+      cy.findByLabelText('underline').should('not.exist');
+      cy.findByLabelText('strikethrough').should('not.exist');
+      cy.findByLabelText('link').should('not.exist');
+    });
+  });
+
+  describe('Custom style editable rich text editor ', () => {
+    beforeEach(() => {
+      cy.mount({
+        Component: (
+          <RichTextEditor
+            editable
+            minInputHeight={200}
+            namespace="CypressComponentTest"
+            placeholder="Type Cypress test..."
+          />
+        )
+      });
+    });
+    it('displays editor with custom namespace', () => {
+      cy.get('#CypressComponentTest > p').should('be.exist');
+      cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
+    });
+
+    it('displays editor with custom placeholder', () => {
+      cy.get('#CypressComponentTest > p').contains('Type Cypress test...');
+    });
+
+    it('displays editor with custom minimum input height', () => {
+      cy.get('[data-testid="CypressComponentTest"]').should(
+        'have.css',
+        'min-height',
+        '200px'
+      );
+    });
+  });
+});