@centreon/ui 23.10.1 → 23.10.3-0

package/src/Listing/Header/{index.tsx → ListingHeader.tsx}

@@ -2,64 +2,22 @@ import * as React from 'react';
 
 import { closestCenter, DraggableSyntheticListeners } from '@dnd-kit/core';
 import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
-import { equals, find, isEmpty, map, not, pick, propEq } from 'ramda';
-import { makeStyles } from 'tss-react/mui';
+import { equals, find, map, pick, propEq } from 'ramda';
 
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import {
-  TableCell,
-  TableCellBaseProps,
-  TableHead,
-  TableRow
-} from '@mui/material';
+import { TableHead, TableRow } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
 import { getVisibleColumns, Props as ListingProps } from '..';
-import PopoverMenu from '../../PopoverMenu';
 import SortableItems from '../../SortableItems';
-import Checkbox from '../Checkbox';
-import { Column, PredefinedRowSelection } from '../models';
-import { labelPredefinedRowsSelectionMenu } from '../translatedLabels';
-
-import PredefinedSelectionList from './PredefinedSelectionList';
-import SortableHeaderCellContent from './SortableCell/Content';
+import { Column } from '../models';
 
-const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    '&.Mui-checked': {
-      color: theme.palette.common.white
-    },
-    '&.MuiCheckbox-indeterminate': {
-      color: theme.palette.common.white
-    },
-    color: theme.palette.common.white
-  },
-  checkboxHeaderCell: {
-    alignItems: 'center',
-    backgroundColor: theme.palette.background.listingHeader,
-    borderBottom: 'none',
-    display: 'flex',
-    justifyContent: 'start',
-    lineHeight: 'inherit',
-    minWidth: theme.spacing(51 / 8),
-    padding: 0
-  },
-  headerLabelDragging: {
-    cursor: 'grabbing'
-  },
-  predefinedRowsMenu: {
-    color: theme.palette.common.white,
-    width: theme.spacing(2)
-  },
-  root: {
-    height: '100%',
-    padding: theme.spacing(0, 1)
-  },
-  row: {
-    display: 'contents'
-  }
-}));
+import ListingHeaderCell from './Cell/ListingHeaderCell';
+import { useStyles } from './ListingHeader.styles';
+import {
+  SelectActionListingHeaderCell,
+  SelectActionListingHeaderCellProps
+} from './Cell/SelectActionListingHeaderCell';
 
 type Props = Pick<
   ListingProps<unknown>,
@@ -74,13 +32,9 @@ type Props = Pick<
 > & {
   areColumnsEditable: boolean;
   memoProps: Array<unknown>;
-  onSelectAllClick: (event) => void;
-  onSelectRowsWithCondition: (condition) => void;
-  predefinedRowsSelection: Array<PredefinedRowSelection>;
   rowCount: number;
-  selectedRowCount: number;
   viewMode?: ListingVariant;
-};
+} & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
   attributes;
@@ -93,21 +47,21 @@ interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
 }
 
 const ListingHeader = ({
-  onSelectAllClick,
   sortOrder,
   sortField,
-  selectedRowCount,
   rowCount,
   columns,
   columnConfiguration,
   onSort,
   onSelectColumns,
   checkable,
-  predefinedRowsSelection,
-  onSelectRowsWithCondition,
   memoProps,
   areColumnsEditable,
-  viewMode
+  viewMode,
+  onSelectAllClick,
+  selectedRowCount,
+  predefinedRowsSelection,
+  onSelectRowsWithCondition
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
@@ -131,7 +85,7 @@ const ListingHeader = ({
       id
     }: ContentProps): JSX.Element => {
       return (
-        <SortableHeaderCellContent
+        <ListingHeaderCell
           areColumnsEditable={areColumnsEditable}
           column={getColumnById(id)}
           columnConfiguration={columnConfiguration}
@@ -151,45 +105,17 @@ const ListingHeader = ({
     [columnConfiguration, columns, sortField, sortOrder]
   );
 
-  const hasRows = not(equals(rowCount, 0));
-
   return (
     <TableHead className={cx(classes.row, 'listingHeader')} component="div">
       <TableRow className={classes.row} component="div">
         {checkable && (
-          <TableCell
-            className={classes.checkboxHeaderCell}
-            component={
-              'div' as unknown as React.ElementType<TableCellBaseProps>
-            }
-          >
-            <Checkbox
-              checked={hasRows && selectedRowCount === rowCount}
-              className={classes.checkbox}
-              indeterminate={
-                hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
-              }
-              inputProps={{ 'aria-label': 'Select all' }}
-              onChange={onSelectAllClick}
-            />
-            {not(isEmpty(predefinedRowsSelection)) ? (
-              <PopoverMenu
-                className={classes.predefinedRowsMenu}
-                icon={<ArrowDropDownIcon />}
-                title={labelPredefinedRowsSelectionMenu}
-              >
-                {({ close }): JSX.Element => (
-                  <PredefinedSelectionList
-                    close={close}
-                    predefinedRowsSelection={predefinedRowsSelection}
-                    onSelectRowsWithCondition={onSelectRowsWithCondition}
-                  />
-                )}
-              </PopoverMenu>
-            ) : (
-              <div className={classes.predefinedRowsMenu} />
-            )}
-          </TableCell>
+          <SelectActionListingHeaderCell
+            predefinedRowsSelection={predefinedRowsSelection}
+            rowCount={rowCount}
+            selectedRowCount={selectedRowCount}
+            onSelectAllClick={onSelectAllClick}
+            onSelectRowsWithCondition={onSelectRowsWithCondition}
+          />
         )}
         <SortableItems
           updateSortableItemsOnItemsChange
@@ -214,6 +140,7 @@ const columnMemoProps = [
   'label',
   'rowMemoProps',
   'sortField',
+  'sortOrder',
   'sortable',
   'type'
 ];
@@ -236,4 +163,4 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.viewMode, nextProps.viewMode)
 );
 
-export default MemoizedListingHeader;
+export { MemoizedListingHeader as ListingHeader };

package/src/Listing/Header/_internals/DraggableIconButton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { SvgIcon, IconButton as MuiIconButton } from '@mui/material';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { labelDragHandle } from '../../translatedLabels';
+
+interface DraggableIconButtonProps {
+  className?: string;
+  columnLabel?: string;
+}
+
+const DraggableIconButton = ({
+  columnLabel,
+  className,
+  ...props
+}: DraggableIconButtonProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <MuiIconButton
+      className={className}
+      {...props}
+      aria-label={`${columnLabel} ${t(labelDragHandle)}`}
+    >
+      <SvgIcon fontSize="small">
+        <DragIndicatorIcon />
+      </SvgIcon>
+    </MuiIconButton>
+  );
+};
+
+export { DraggableIconButton };

package/src/Listing/Header/{PredefinedSelectionList.tsx → _internals/PredefinedSelectionList.tsx}

@@ -1,6 +1,6 @@
 import { List, ListItem, ListItemText } from '@mui/material';
 
-import { PredefinedRowSelection } from '../models';
+import { PredefinedRowSelection } from '../../models';
 
 interface Props {
   close: () => void;

package/src/Listing/Header/index.ts

@@ -0,0 +1 @@
+export * from './ListingHeader';

package/src/Listing/Listing.styles.ts

@@ -37,7 +37,6 @@ const useStyles = makeStyles<StylesProps>()(
     table: {
       '.listingHeader': {
         backgroundColor: theme.palette.background.listingHeader,
-        boxShadow: `-1px 0px 0px 0px ${theme.palette.background.listingHeader}`,
         padding: theme.spacing(0, 1)
       },
       '.listingHeader > div > div': {
@@ -46,7 +45,7 @@ const useStyles = makeStyles<StylesProps>()(
       },
       '.listingHeader > div > div:first-of-type': {
         height: '100%',
-        paddingLeft: theme.spacing(1.5)
+        padding: theme.spacing(0, 0.5, 0, 1.5)
       },
       alignItems: 'center',
       display: 'grid',

package/src/Listing/index.stories.tsx

@@ -12,7 +12,7 @@ import { ListingVariant } from '@centreon/ui-context';
 
 import { ListingProps } from '..';
 
-import { Column, ColumnType } from './models';
+import { Column, ColumnType, SortOrder } from './models';
 
 import Listing from '.';
 
@@ -153,7 +153,7 @@ const Story = ({
         limit={listing.length}
         predefinedRowsSelection={predefinedRowsSelection}
         rowColorConditions={rowColorConditions}
-        rows={listing}
+        rows={props.rows ?? listing}
         selectedRows={selected}
         totalRows={listing.length}
         viewerModeConfiguration={viewerModeConfiguration}
@@ -214,12 +214,14 @@ const editableColumns = [
     getFormattedString: ({ name }): string => name,
     id: 'name',
     label: 'Name',
+    sortable: true,
     type: ColumnType.string
   },
   {
     getFormattedString: ({ description }): string => description,
     id: 'description',
     label: 'Description',
+    sortable: true,
     type: ColumnType.string
   },
   {
@@ -247,6 +249,26 @@ const ListingWithEditableColumns = (): JSX.Element => {
     setSelectedColumnIds(defaultColumnIds);
   };
 
+  const [sortedRows, setSortedRows] = useState(listing);
+  const [sortParams, setSortParams] = useState({
+    sortField: editableColumns[0].id,
+    sortOrder: 'desc'
+  });
+
+  const onSort = (params: {
+    sortField: string;
+    sortOrder: SortOrder;
+  }): void => {
+    const rows = [...sortedRows];
+    rows.sort((a, b) =>
+      params.sortOrder === 'desc'
+        ? a[params.sortField]?.localeCompare(b[params.sortField])
+        : b[params.sortField]?.localeCompare(a[params.sortField])
+    );
+    setSortedRows(rows);
+    setSortParams(params);
+  };
+
   return (
     <Story
       columnConfiguration={{
@@ -254,13 +276,17 @@ const ListingWithEditableColumns = (): JSX.Element => {
         sortable: true
       }}
       columns={editableColumns}
+      rows={sortedRows}
+      sortField={sortParams.sortField}
+      sortOrder={sortParams.sortOrder as SortOrder}
       onResetColumns={resetColumns}
       onSelectColumns={setSelectedColumnIds}
+      onSort={onSort}
     />
   );
 };
 
-export const withEditableColumns = (): JSX.Element => (
+export const withEditableAndSortableColumns = (): JSX.Element => (
   <ListingWithEditableColumns />
 );
 

package/src/Listing/index.test.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { prop } from 'ramda';
 
-import { render, fireEvent, within } from '../testRenderer';
+import { render, fireEvent, within } from '../../test/testRenderer';
 
 import { ColumnType } from './models';
 import { labelAddColumns } from './translatedLabels';

package/src/Listing/index.tsx

@@ -27,7 +27,7 @@ import {
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { Box, LinearProgress, Table, TableBody, useTheme } from '@mui/material';
+import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
 import { ListingVariant } from '@centreon/ui-context';
 
@@ -39,7 +39,6 @@ import Cell from './Cell';
 import DataCell from './Cell/DataCell';
 import Checkbox from './Checkbox';
 import getCumulativeOffset from './getCumulativeOffset';
-import ListingHeader from './Header/index';
 import {
   Column,
   ColumnConfiguration,
@@ -55,6 +54,7 @@ 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,
@@ -107,7 +107,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>;
@@ -173,7 +173,7 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
-  const { classes } = useStyles({
+  const { classes, theme } = useStyles({
     dataStyle,
     getGridTemplateColumn,
     limit,
@@ -193,8 +193,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));
@@ -556,7 +554,6 @@ const Listing = <TRow extends { id: RowId }>({
 
                     {visibleColumns.map((column) => (
                       <DataCell
-                        areColumnsEditable={areColumnsEditable}
                         column={column}
                         disableRowCondition={disableRowCondition}
                         getHighlightRowCondition={getHighlightRowCondition}

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

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

package/src/ThemeProvider/index.tsx

@@ -17,6 +17,10 @@ import { autocompleteClasses } from '@mui/material/Autocomplete';
 import { ThemeOptions } from '@mui/material/styles/createTheme';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
+import RobotoLightWoff2 from '@centreon/ui/fonts/roboto-light-webfont.woff2';
+import RobotoRegularWoff2 from '@centreon/ui/fonts/roboto-regular-webfont.woff2';
+import RobotoMediumWoff2 from '@centreon/ui/fonts/roboto-medium-webfont.woff2';
+import RobotoBoldWoff2 from '@centreon/ui/fonts/roboto-bold-webfont.woff2';
 
 import { getPalette } from './palettes';
 
@@ -180,6 +184,30 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 300;
+          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 400;
+          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 500;
+          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
+        }
+        @font-face {
+          font-family: 'Roboto';
+          font-style: normal;
+          font-weight: 600;
+          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
+        }
       `
     },
     MuiInputBase: {
@@ -253,7 +281,8 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     caption: {
       fontSize: '0.625rem'
-    }
+    },
+    fontFamily: 'Roboto, Arial'
   }
 });
 

package/src/WallpaperPage/index.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 
-import image from '../../assets/not-authorized-template-background-light.svg';
+import image from '../@assets/images/not-authorized-template-background-light.svg';
 
 import WallpaperPage from '.';
 

package/src/Wizard/ActionsBar.test.tsx

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

package/src/Wizard/index.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
   screen,
   RenderResult
-} from '../testRenderer';
+} from '../../test/testRenderer';
 
 import { StepComponentProps } from './models';
 

package/.storybook/main.js

@@ -1,82 +0,0 @@
-const { equals } = require("ramda");
-
-const excludeNodeModulesExceptCentreonUi =
-  /node_modules(\\|\/)(?!(centreon-frontend(\\|\/)packages(\\|\/)(ui-context|centreon-ui)))/;
-  
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  features: {
-    previewMdx2: true,
-  },
-  stories: ['../src/*.stories.mdx', '../src/**/*.stories.@(jsx|tsx)'],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  },
-  addons: [
-    'storybook-addon-mock/register',
-    'storybook-dark-mode',
-    '@storybook/addon-controls', 
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-      },
-    },
-  ],
-  webpackFinal: (config) => {
-    delete config.resolve.alias['emotion-theming'];
-    delete config.resolve.alias['@emotion/styled'];
-    delete config.resolve.alias['@emotion/core'];
-
-    const configWithoutEmotionAliases = {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        extensions: ['.js', '.ts', '.tsx'],
-      },
-      module: {
-        ...config.module,
-        rules: [
-          {
-            test: /\.tsx?$/,
-            exclude: /node_modules(\\|\/)(?!(@centreon))/,
-            use: {
-              loader: 'swc-loader',
-              options: {
-                jsc: {
-                  transform: {
-                    react: {
-                      runtime: 'automatic',
-                    },
-                  },
-                  parser: {
-                    syntax: 'typescript',
-                  },
-                },
-                parseMap: true,
-              },
-            }
-          },
-          {
-            exclude: excludeNodeModulesExceptCentreonUi,
-            test: /\.(bmp|png|jpg|jpeg|gif|svg)$/,
-            use: [
-              {
-                loader: 'url-loader',
-                options: {
-                  limit: 10000,
-                  name: '[name].[hash:8].[ext]',
-                },
-              },
-            ],
-          },
-          ...(config.module.rules.filter(({ type }) => !equals(type, 'asset/resource'))),
-        ],
-      },
-    }
-
-    return configWithoutEmotionAliases;
-  }
-};

package/.storybook/preview.tsx

@@ -1,21 +0,0 @@
-import { addDecorator } from '@storybook/react';
-
-import { useDarkMode } from 'storybook-dark-mode';
-
-import { ThemeMode } from '@centreon/ui-context';
-
-import StoryBookThemeProvider from '../src/StoryBookThemeProvider';
-import QueryProvider from '../src/api/QueryProvider';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-
-
-const withThemeProvider = (story): JSX.Element => (
-  <StoryBookThemeProvider themeMode={useDarkMode() ? ThemeMode.dark :  ThemeMode.light}>
-    <QueryProvider>
-      {story()}
-      <ReactQueryDevtools />
-    </QueryProvider>
-  </StoryBookThemeProvider>
-);
-
-addDecorator(withThemeProvider);

package/cypress/support/commands.ts

@@ -1,19 +0,0 @@
-import { mount } from 'cypress/react18';
-import '@testing-library/cypress/add-commands';
-
-Cypress.Commands.add('mount', ({ Component, options }: MountProps) => {
-    return mount(Component, options);
-  });
-  
-  interface MountProps {
-    Component: JSX.Element;
-    options?: object;
-  }
-
-declare global {
-    namespace Cypress {
-      interface Chainable {
-        mount: ({ Component, options = {} }: MountProps) => Cypress.Chainable;
-      }
-    }
-  }

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

package/cypress/support/component.tsx

@@ -1,5 +0,0 @@
-import './commands';
-
-import enableVisualTesting from '@centreon/js-config/cypress/component/enableVisualTesting';
-
-enableVisualTesting();