@centreon/ui 23.10.39 → 23.10.41

package/src/Listing/index.tsx

@@ -18,14 +18,17 @@ import {
   map,
   not,
   pick,
+  pluck,
   prop,
   propEq,
+  reduce,
   reject,
   slice,
   subtract,
   uniqBy
 } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
 
 import { Box, LinearProgress, Table, TableBody } from '@mui/material';
 
@@ -50,10 +53,11 @@ import ListingRow from './Row/Row';
 import { labelNoResultFound } from './translatedLabels';
 import useResizeObserver from './useResizeObserver';
 import useStyleTable from './useStyleTable';
-import { loadingIndicatorHeight, useStyles } from './Listing.styles';
+import { loadingIndicatorHeight, useListingStyles } from './Listing.styles';
 import { EmptyResult } from './EmptyResult/EmptyResult';
 import { SkeletonLoader } from './Row/SkeletonLoaderRows';
 import { ListingHeader } from './Header';
+import { subItemsPivotsAtom } from './tableAtoms';
 
 const getVisibleColumns = ({
   columnConfiguration,
@@ -114,6 +118,13 @@ export interface Props<TRow> {
   selectedRows?: Array<TRow>;
   sortField?: string;
   sortOrder?: SortOrder;
+  subItems?: {
+    canCheckSubItems: boolean;
+    enable: boolean;
+    labelCollapse: string;
+    labelExpand: string;
+    rowProperty: string;
+  };
   totalRows?: number;
   viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
@@ -160,7 +171,14 @@ const Listing = <TRow extends { id: RowId }>({
   viewMode = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  subItems = {
+    canCheckSubItems: false,
+    enable: false,
+    labelCollapse: 'Collapse',
+    labelExpand: 'Expand',
+    rowProperty: ''
+  }
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -172,13 +190,6 @@ const Listing = <TRow extends { id: RowId }>({
     viewMode
   });
 
-  const { classes, theme } = useStyles({
-    dataStyle,
-    getGridTemplateColumn,
-    limit,
-    rows,
-    viewMode
-  });
   const { t } = useTranslation();
 
   const [tableTopOffset, setTableTopOffset] = React.useState(0);
@@ -192,6 +203,37 @@ const Listing = <TRow extends { id: RowId }>({
   const containerRef = React.useRef<HTMLDivElement>();
   const actionBarRef = React.useRef<HTMLDivElement>();
 
+  const subItemsPivots = useAtomValue(subItemsPivotsAtom);
+
+  const rowsToDisplay = React.useMemo(
+    () =>
+      subItems?.enable
+        ? reduce<TRow, Array<TRow>>(
+            (acc, row): Array<TRow> => {
+              if (
+                row[subItems.rowProperty] &&
+                subItemsPivots.includes(row.id)
+              ) {
+                return [...acc, row, ...row[subItems.rowProperty]];
+              }
+
+              return [...acc, row];
+            },
+            [],
+            rows
+          )
+        : rows,
+    [rows, subItemsPivots, subItems]
+  );
+
+  const { classes, theme } = useListingStyles({
+    dataStyle,
+    getGridTemplateColumn,
+    limit,
+    rows: rowsToDisplay,
+    viewMode
+  });
+
   useResizeObserver({
     onResize: () => {
       setTableTopOffset(getCumulativeOffset(containerRef.current));
@@ -422,6 +464,19 @@ const Listing = <TRow extends { id: RowId }>({
 
   const areColumnsEditable = not(isNil(onSelectColumns));
 
+  const allSubItemIds = React.useMemo(
+    () =>
+      reduce<TRow | number, Array<string | number>>(
+        (acc, row) => [
+          ...acc,
+          ...pluck('id', row[subItems?.rowProperty || ''] || [])
+        ],
+        [],
+        rows
+      ),
+    [rows, subItems]
+  );
+
   return (
     <>
       {loading && rows.length > 0 && (
@@ -495,14 +550,16 @@ const Listing = <TRow extends { id: RowId }>({
               component="div"
               onMouseLeave={clearHoveredRow}
             >
-              {rows.map((row, index) => {
+              {rowsToDisplay.map((row, index) => {
                 const isRowSelected = isSelected(row);
-
                 const isRowHovered = equals(hoveredRowId, getId(row));
+                const isSubItem = allSubItemIds.includes(row.id);
 
                 return (
                   <ListingRow
-                    checkable={checkable}
+                    checkable={
+                      checkable && (!isSubItem || subItems.canCheckSubItems)
+                    }
                     columnConfiguration={columnConfiguration}
                     columnIds={columns.map(prop('id'))}
                     disableRowCondition={disableRowCondition}
@@ -519,6 +576,7 @@ const Listing = <TRow extends { id: RowId }>({
                     row={row}
                     rowColorConditions={rowColorConditions}
                     shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                    subItemsPivots={subItemsPivots}
                     tabIndex={-1}
                     viewMode={viewMode}
                     visibleColumns={visibleColumns}
@@ -528,28 +586,37 @@ const Listing = <TRow extends { id: RowId }>({
                     onFocus={(): void => hoverRow(row)}
                     onMouseOver={(): void => hoverRow(row)}
                   >
-                    {checkable && (
-                      <Cell
-                        align="left"
-                        className={classes.checkbox}
-                        disableRowCondition={disableRowCondition}
-                        isRowHovered={isRowHovered}
-                        row={row}
-                        rowColorConditions={rowColorConditions}
-                        onClick={(event): void => selectRow(event, row)}
-                      >
-                        <Checkbox
-                          checked={isRowSelected}
-                          disabled={
-                            disableRowCheckCondition(row) ||
-                            disableRowCondition(row)
-                          }
-                          inputProps={{
-                            'aria-label': `Select row ${getId(row)}`
-                          }}
+                    {checkable &&
+                      (!isSubItem || subItems.canCheckSubItems ? (
+                        <Cell
+                          align="left"
+                          className={classes.checkbox}
+                          disableRowCondition={disableRowCondition}
+                          isRowHovered={isRowHovered}
+                          row={row}
+                          rowColorConditions={rowColorConditions}
+                          onClick={(event): void => selectRow(event, row)}
+                        >
+                          <Checkbox
+                            checked={isRowSelected}
+                            disabled={
+                              disableRowCheckCondition(row) ||
+                              disableRowCondition(row)
+                            }
+                            inputProps={{
+                              'aria-label': `Select row ${getId(row)}`
+                            }}
+                          />
+                        </Cell>
+                      ) : (
+                        <Cell
+                          align="left"
+                          disableRowCondition={disableRowCondition}
+                          isRowHovered={isRowHovered}
+                          row={row}
+                          rowColorConditions={rowColorConditions}
                         />
-                      </Cell>
-                    )}
+                      ))}
 
                     {visibleColumns.map((column) => (
                       <DataCell
@@ -559,8 +626,11 @@ const Listing = <TRow extends { id: RowId }>({
                         isRowHovered={isRowHovered}
                         isRowSelected={isRowSelected}
                         key={`${getId(row)}-${column.id}`}
+                        labelCollapse={subItems.labelCollapse}
+                        labelExpand={subItems.labelExpand}
                         row={row}
                         rowColorConditions={rowColorConditions}
+                        subItemsRowProperty={subItems?.rowProperty}
                         viewMode={viewMode}
                       />
                     ))}

package/src/Listing/models.ts

@@ -19,6 +19,7 @@ export interface Column {
   compact?: boolean;
   disablePadding?: boolean;
   disabled?: boolean;
+  displaySubItemsCaret?: boolean;
   getColSpan?: (isSelected) => number | undefined;
   getFormattedString?: (row) => string | null;
   getHiddenCondition?: (isSelected) => boolean;

package/src/Listing/tableAtoms.ts

@@ -43,3 +43,5 @@ export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
     header: isExtendedMode ? extendedTableHeader : compactTableHeader
   });
 });
+
+export const subItemsPivotsAtom = atom<Array<number | string>>([]);

package/src/Panel/index.tsx

@@ -86,7 +86,7 @@ export interface Tab {
 
 export interface Props {
   className?: string;
-  header: React.ReactElement;
+  header?: React.ReactElement;
   headerBackgroundColor?: string;
   labelClose?: string;
   minWidth?: number;

package/src/ThemeProvider/index.tsx

@@ -148,30 +148,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: ${theme.palette.background.default};
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          };
-          border-radius: ${theme.spacing(0.5)};
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${theme.palette.primary.main};
-        }
-        * {
-          scrollbar-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          } ${theme.palette.background.default};
-          scrollbar-width: thin;
-        }
         html {
           margin: 0;
           padding: 0;

package/src/ThemeProvider/palettes.ts

@@ -18,6 +18,7 @@ declare module '@mui/material/styles/createPalette' {
 declare module '@mui/material/styles' {
   interface Palette {
     background: TypeBackground;
+    chip: TypeChip;
     header: TypeHeader;
     layout: TypeLayout;
     menu: TypeMenu;
@@ -36,6 +37,7 @@ declare module '@mui/material/styles' {
     warning: string;
   }
   interface PaletteOptions {
+    chip: TypeChip;
     header: TypeHeader;
     layout: TypeLayout;
     menu: TypeMenu;
@@ -113,6 +115,16 @@ declare module '@mui/material/styles' {
       };
     };
   }
+
+  interface TypeChip {
+    color: {
+      error: string;
+      info: string;
+      neutral: string;
+      success: string;
+      warning: string;
+    };
+  }
 }
 
 declare module '@mui/material/Button' {
@@ -152,6 +164,15 @@ export const lightPalette: PaletteOptions = {
     paper: '#FFFFFF',
     tooltip: '#434E5B'
   },
+  chip: {
+    color: {
+      error: '#FF6666',
+      info: '#1588D1',
+      neutral: BaseTokens.colorGrey300,
+      success: '#88B922',
+      warning: '#FD9B27'
+    }
+  },
   divider: '#E3E3E3',
   error: {
     contrastText: '#000',
@@ -193,7 +214,7 @@ export const lightPalette: PaletteOptions = {
       background: {
         active: BaseTokens.colorBlue50,
         default: 'transparent',
-        hover: BaseTokens.colorGrey50
+        hover: BaseTokens.colorGrey100
       },
       color: {
         active: BaseTokens.colorBlue400,
@@ -208,7 +229,7 @@ export const lightPalette: PaletteOptions = {
       background: {
         active: BaseTokens.colorBlue50,
         default: 'transparent',
-        hover: BaseTokens.colorGrey50
+        hover: BaseTokens.colorGrey100
       },
       color: {
         active: BaseTokens.colorBlue400,
@@ -282,6 +303,15 @@ export const darkPalette: PaletteOptions = {
     paper: '#212121',
     tooltip: '#AAB4C0'
   },
+  chip: {
+    color: {
+      error: '#D60101',
+      info: '#1CA9F4',
+      neutral: BaseTokens.colorGrey700,
+      success: '#5F8118',
+      warning: '#C55400'
+    }
+  },
   divider: '#666666',
   error: {
     contrastText: '#fff',
@@ -321,9 +351,9 @@ export const darkPalette: PaletteOptions = {
     background: BaseTokens.colorGrey950,
     button: {
       background: {
-        active: BaseTokens.colorBlue950,
+        active: BaseTokens.colorBlue900,
         default: 'transparent',
-        hover: BaseTokens.colorGrey950
+        hover: BaseTokens.colorGrey900
       },
       color: {
         active: BaseTokens.colorBlue600,
@@ -336,9 +366,9 @@ export const darkPalette: PaletteOptions = {
     },
     item: {
       background: {
-        active: BaseTokens.colorBlue950,
+        active: BaseTokens.colorBlue900,
         default: 'transparent',
-        hover: BaseTokens.colorGrey950
+        hover: BaseTokens.colorGrey900
       },
       color: {
         active: BaseTokens.colorBlue400,

package/src/api/useMutationQuery/index.ts

@@ -26,7 +26,7 @@ export type UseMutationQueryProps<T> = {
   decoder?: JsonDecoder.Decoder<T>;
   defaultFailureMessage?: string;
   fetchHeaders?: HeadersInit;
-  getEndpoint: (payload) => string;
+  getEndpoint: (_meta?: Record<string, unknown> | unknown) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
 } & Omit<UseMutationOptions<T>, 'mutationFn'>;
@@ -45,17 +45,22 @@ const useMutationQuery = <T extends object>({
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method
+  method,
+  onMutate,
+  onError
 }: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
   const queryData = useMutation<T | ResponseError>(
-    (payload): Promise<T | ResponseError> =>
-      customFetch<T>({
+    // @ts-expect-error useMutation / useMutationQuery is not typed correctly
+    (_payload: Record<string, unknown> | null): Promise<T | ResponseError> => {
+      const { _meta, ...payload } = _payload || {};
+
+      return customFetch<T>({
         catchError,
         decoder,
         defaultFailureMessage,
-        endpoint: getEndpoint(payload),
+        endpoint: getEndpoint(_meta),
         headers: new Headers({
           'Content-Type': 'application/x-www-form-urlencoded',
           ...fetchHeaders
@@ -63,7 +68,12 @@ const useMutationQuery = <T extends object>({
         isMutation: true,
         method,
         payload
-      })
+      });
+    },
+    {
+      onError,
+      onMutate
+    }
   );
 
   const manageError = (): void => {

package/src/components/Form/AccessRights/AccessRights.resource.ts

@@ -0,0 +1,45 @@
+export type ContactAccessRightState =
+  | 'added'
+  | 'updated'
+  | 'removed'
+  | 'unchanged';
+
+export type ContactAccessRightStateResource = {
+  contactAccessRight: ContactAccessRightResource;
+  state: ContactAccessRightState;
+  stateHistory: Array<ContactAccessRightState>;
+};
+
+export type ContactAccessRightResource = {
+  contact: ContactResource | ContactGroupResource | null;
+  role: RoleResource['role'];
+};
+
+export type ContactResource = {
+  email?: string;
+  id?: number | string;
+  name: string;
+  type: 'contact';
+};
+
+export const isContactResource = (
+  resource: ContactResource | ContactGroupResource | null
+): resource is ContactResource => {
+  return resource?.type === 'contact';
+};
+
+export type ContactGroupResource = {
+  id?: number | string;
+  name: string;
+  type: 'contact_group';
+};
+
+export const isContactGroupResource = (
+  resource: ContactResource | ContactGroupResource | null
+): resource is ContactResource => {
+  return resource?.type === 'contact_group';
+};
+
+export type RoleResource = {
+  role: 'viewer' | 'editor' | string;
+};

package/src/components/Form/AccessRights/AccessRightsForm.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { AccessRightsForm } from './AccessRightsForm';
+import { Default as DefaultContactAccessRightsListStory } from './List/ContactAccessRightsList.stories';
+import { Default as DefaultContactAccessRightInputStory } from './Input/ContactAccessRightInput.stories';
+import { ContactAccessRightsListProps } from './List/ContactAccessRightsList';
+import { ContactAccessRightInputProps } from './Input/ContactAccessRightInput';
+import {
+  contactAccessRightsMock,
+  contactsAndGroupsMock
+} from './__fixtures__/contactAccessRight.mock';
+
+const meta: Meta<typeof AccessRightsForm> = {
+  component: AccessRightsForm
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessRightsForm>;
+
+export const Default: Story = {
+  args: {
+    initialValues: contactAccessRightsMock(12),
+    labels: {
+      actions: {
+        cancel: 'Cancel',
+        copyLink: 'Copy link',
+        copyLinkMessages: {
+          error: 'Unable to copy link',
+          success: 'Link copied'
+        },
+        submit: 'Update'
+      },
+      input: {
+        ...DefaultContactAccessRightInputStory.args?.labels
+      } as ContactAccessRightInputProps['labels'],
+      list: {
+        ...DefaultContactAccessRightsListStory.args?.labels
+      } as ContactAccessRightsListProps['labels'],
+      stats: {
+        added: 'added',
+        removed: 'removed',
+        updated: 'updated'
+      }
+    },
+    options: {
+      contacts: contactsAndGroupsMock(25),
+      roles: [{ role: 'viewer' }, { role: 'editor' }]
+    },
+    resourceLink: 'https://app.centreon.com/resource/1'
+  }
+};
+
+export const AsEmptyState: Story = {
+  args: {
+    labels: Default.args?.labels,
+    options: Default.args?.options,
+    resourceLink: Default.args?.resourceLink
+  }
+};

package/src/components/Form/AccessRights/AccessRightsForm.styles.ts

@@ -0,0 +1,21 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  accessRightsForm: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(6),
+
+    maxWidth: '520px',
+    paddingTop: theme.spacing(3),
+
+    width: '100%'
+  },
+  accessRightsFormList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1)
+  }
+}));
+
+export { useStyles };

package/src/components/Form/AccessRights/AccessRightsForm.tsx

@@ -0,0 +1,67 @@
+import { ReactElement } from 'react';
+
+import { useStyles } from './AccessRightsForm.styles';
+import {
+  AccessRightsFormProvider,
+  AccessRightsFormProviderProps
+} from './useAccessRightsForm';
+import {
+  ContactAccessRightInput,
+  ContactAccessRightInputProps
+} from './Input/ContactAccessRightInput';
+import {
+  ContactAccessRightsList,
+  ContactAccessRightsListProps
+} from './List/ContactAccessRightsList';
+import {
+  AccessRightsFormActions,
+  AccessRightsFormActionsProps
+} from './AccessRightsFormActions';
+import {
+  AccessRightsStats,
+  AccessRightsStatsProps
+} from './Stats/AccessRightsStats';
+
+export type AccessRightsFormProps = {
+  labels: AccessRightsFormLabels;
+  onCancel?: AccessRightsFormActionsProps['onCancel'];
+  resourceLink: string;
+} & Pick<
+  AccessRightsFormProviderProps,
+  'initialValues' | 'onSubmit' | 'options' | 'loadingStatus'
+>;
+
+export type AccessRightsFormLabels = {
+  actions: AccessRightsFormActionsProps['labels'];
+  input: ContactAccessRightInputProps['labels'];
+  list: ContactAccessRightsListProps['labels'];
+  stats: AccessRightsStatsProps['labels'];
+};
+
+const AccessRightsForm = ({
+  labels,
+  onCancel,
+  resourceLink,
+  ...providerProps
+}: AccessRightsFormProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <AccessRightsFormProvider {...providerProps}>
+      <div className={classes.accessRightsForm}>
+        <ContactAccessRightInput labels={labels.input} />
+        <span className={classes.accessRightsFormList}>
+          <ContactAccessRightsList labels={labels.list} />
+          <AccessRightsStats labels={labels.stats} />
+        </span>
+        <AccessRightsFormActions
+          labels={labels.actions}
+          resourceLink={resourceLink}
+          onCancel={onCancel}
+        />
+      </div>
+    </AccessRightsFormProvider>
+  );
+};
+
+export { AccessRightsForm };