@centreon/ui 24.4.1-MON-30966.1 → 24.4.1-MON-33898.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-30966.1",
+  "version": "24.4.1-MON-33898.9",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Button/Icon/index.stories.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import AccessibilityIcon from '@mui/icons-material/Accessibility';
 import { Theme } from '@mui/material';
 
-import IconButton from '.';
+import { IconButton } from '.';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   root: {

package/src/Button/Icon/index.tsx

@@ -38,7 +38,7 @@ type Props = {
     | 'top-start';
 } & IconButtonProps;
 
-const IconButton = ({
+export const IconButton = ({
   title = '',
   ariaLabel,
   className,

package/src/InputField/Select/IconPopover/index.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mui/material';
 import IconReset from '@mui/icons-material/RotateLeft';
 
-import IconButton from '../../../Button/Icon';
+import { IconButton } from '../../..';
 import Option from '../Option';
 import { SelectEntry } from '..';
 

package/src/Listing/ActionBar/index.tsx

@@ -9,10 +9,9 @@ import Divider from '@mui/material/Divider';
 
 import { userAtom, ListingVariant } from '@centreon/ui-context';
 
-import { ListingProps } from '../..';
+import { ListingProps, IconButton } from '../..';
 import { labelOf, labelRowsPerPage } from '../translatedLabels';
 import { useMemoComponent } from '../../utils';
-import IconButton from '../../Button/Icon/index';
 
 import StyledPagination from './Pagination';
 import PaginationActions from './PaginationActions';

package/src/Listing/index.tsx

@@ -93,9 +93,11 @@ export interface Props<TRow> {
   columnConfiguration?: ColumnConfiguration;
   columns: Array<Column>;
   currentPage?: number;
+  customListingComponent?: JSX.Element;
   customPaginationClassName?: string;
   disableRowCheckCondition?: (row) => boolean;
   disableRowCondition?: (row) => boolean;
+  displayCustomListing?: boolean;
   getHighlightRowCondition?: (row: TRow) => boolean;
   getId?: (row: TRow) => RowId;
   headerMemoProps?: Array<unknown>;
@@ -138,6 +140,8 @@ const defaultColumnConfiguration = {
 export const performanceRowsLimit = 60;
 
 const Listing = <TRow extends { id: RowId }>({
+  customListingComponent,
+  displayCustomListing,
   limit = 10,
   visualizationActions,
   columns,
@@ -494,6 +498,7 @@ const Listing = <TRow extends { id: RowId }>({
             onSelectColumns={onSelectColumns}
           />
         </div>
+
         <ParentSize
           parentSizeStyles={{
             height: '100%',
@@ -509,132 +514,141 @@ const Listing = <TRow extends { id: RowId }>({
                 height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
               }}
             >
-              <Table
-                stickyHeader
-                className={classes.table}
-                component="div"
-                role={undefined}
-                size="small"
-              >
-                <ListingHeader
-                  areColumnsEditable={areColumnsEditable}
-                  checkable={checkable}
-                  columnConfiguration={columnConfiguration}
-                  columns={columns}
-                  listingVariant={listingVariant}
-                  memoProps={headerMemoProps}
-                  predefinedRowsSelection={predefinedRowsSelection}
-                  rowCount={limit - emptyRows}
-                  selectedRowCount={selectedRows.length}
-                  sortField={sortField}
-                  sortOrder={sortOrder}
-                  onSelectAllClick={selectAllRows}
-                  onSelectColumns={onSelectColumns}
-                  onSelectRowsWithCondition={onSelectRowsWithCondition}
-                  onSort={onSort}
-                />
-
-                <TableBody
-                  className={classes.tableBody}
+              {displayCustomListing ? (
+                customListingComponent
+              ) : (
+                <Table
+                  stickyHeader
+                  className={classes.table}
                   component="div"
-                  onMouseLeave={clearHoveredRow}
+                  role={undefined}
+                  size="small"
                 >
-                  {rowsToDisplay.map((row, index) => {
-                    const isRowSelected = isSelected(row);
-                    const isRowHovered = equals(hoveredRowId, getId(row));
-                    const isSubItem = allSubItemIds.includes(row.id);
-
-                    return (
-                      <ListingRow
-                        checkable={
-                          checkable && (!isSubItem || subItems.canCheckSubItems)
-                        }
-                        columnConfiguration={columnConfiguration}
-                        columnIds={columns.map(prop('id'))}
-                        disableRowCondition={disableRowCondition}
-                        isHovered={isRowHovered}
-                        isSelected={isRowSelected}
-                        isShiftKeyDown={isShiftKeyDown}
-                        key={
-                          gte(limit, performanceRowsLimit)
-                            ? `row_${index}`
-                            : getId(row)
-                        }
-                        lastSelectionIndex={lastSelectionIndex}
-                        limit={limit}
-                        listingVariant={listingVariant}
-                        row={row}
-                        rowColorConditions={rowColorConditions}
-                        shiftKeyDownRowPivot={shiftKeyDownRowPivot}
-                        subItemsPivots={subItemsPivots}
-                        tabIndex={-1}
-                        visibleColumns={visibleColumns}
-                        onClick={(): void => {
-                          onRowClick(row);
-                        }}
-                        onFocus={(): void => hoverRow(row)}
-                        onMouseOver={(): void => hoverRow(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)}`
-                                }}
+                  <ListingHeader
+                    areColumnsEditable={areColumnsEditable}
+                    checkable={checkable}
+                    columnConfiguration={columnConfiguration}
+                    columns={columns}
+                    listingVariant={listingVariant}
+                    memoProps={headerMemoProps}
+                    predefinedRowsSelection={predefinedRowsSelection}
+                    rowCount={limit - emptyRows}
+                    selectedRowCount={selectedRows.length}
+                    sortField={sortField}
+                    sortOrder={sortOrder}
+                    onSelectAllClick={selectAllRows}
+                    onSelectColumns={onSelectColumns}
+                    onSelectRowsWithCondition={onSelectRowsWithCondition}
+                    onSort={onSort}
+                  />
+
+                  <TableBody
+                    className={classes.tableBody}
+                    component="div"
+                    onMouseLeave={clearHoveredRow}
+                  >
+                    {rowsToDisplay.map((row, index) => {
+                      const isRowSelected = isSelected(row);
+                      const isRowHovered = equals(hoveredRowId, getId(row));
+                      const isSubItem = allSubItemIds.includes(row.id);
+
+                      return (
+                        <ListingRow
+                          checkable={
+                            checkable &&
+                            (!isSubItem || subItems.canCheckSubItems)
+                          }
+                          columnConfiguration={columnConfiguration}
+                          columnIds={columns.map(prop('id'))}
+                          disableRowCondition={disableRowCondition}
+                          isHovered={isRowHovered}
+                          isSelected={isRowSelected}
+                          isShiftKeyDown={isShiftKeyDown}
+                          key={
+                            gte(limit, performanceRowsLimit)
+                              ? `row_${index}`
+                              : getId(row)
+                          }
+                          lastSelectionIndex={lastSelectionIndex}
+                          limit={limit}
+                          listingVariant={listingVariant}
+                          row={row}
+                          rowColorConditions={rowColorConditions}
+                          shiftKeyDownRowPivot={shiftKeyDownRowPivot}
+                          subItemsPivots={subItemsPivots}
+                          tabIndex={-1}
+                          visibleColumns={visibleColumns}
+                          onClick={(): void => {
+                            onRowClick(row);
+                          }}
+                          onFocus={(): void => hoverRow(row)}
+                          onMouseOver={(): void => hoverRow(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>
-                          ) : (
-                            <Cell
-                              align="left"
+                            ))}
+
+                          {visibleColumns.map((column) => (
+                            <DataCell
+                              column={column}
                               disableRowCondition={disableRowCondition}
+                              getHighlightRowCondition={
+                                getHighlightRowCondition
+                              }
                               isRowHovered={isRowHovered}
+                              isRowSelected={isRowSelected}
+                              key={`${getId(row)}-${column.id}`}
+                              labelCollapse={subItems.labelCollapse}
+                              labelExpand={subItems.labelExpand}
+                              listingVariant={listingVariant}
                               row={row}
                               rowColorConditions={rowColorConditions}
+                              subItemsRowProperty={subItems?.getRowProperty(
+                                row
+                              )}
                             />
                           ))}
-
-                        {visibleColumns.map((column) => (
-                          <DataCell
-                            column={column}
-                            disableRowCondition={disableRowCondition}
-                            getHighlightRowCondition={getHighlightRowCondition}
-                            isRowHovered={isRowHovered}
-                            isRowSelected={isRowSelected}
-                            key={`${getId(row)}-${column.id}`}
-                            labelCollapse={subItems.labelCollapse}
-                            labelExpand={subItems.labelExpand}
-                            listingVariant={listingVariant}
-                            row={row}
-                            rowColorConditions={rowColorConditions}
-                            subItemsRowProperty={subItems?.getRowProperty(row)}
-                          />
-                        ))}
-                      </ListingRow>
-                    );
-                  })}
-
-                  {rows.length < 1 &&
-                    (loading ? (
-                      <SkeletonLoader rows={limit} />
-                    ) : (
-                      <EmptyResult label={t(labelNoResultFound)} />
-                    ))}
-                </TableBody>
-              </Table>
+                        </ListingRow>
+                      );
+                    })}
+
+                    {rows.length < 1 &&
+                      (loading ? (
+                        <SkeletonLoader rows={limit} />
+                      ) : (
+                        <EmptyResult label={t(labelNoResultFound)} />
+                      ))}
+                  </TableBody>
+                </Table>
+              )}
             </Box>
           )}
         </ParentSize>

package/src/Panel/index.tsx

@@ -9,7 +9,7 @@ import { makeStyles } from 'tss-react/mui';
 import { Paper, Slide, Divider, AppBar, Tabs } from '@mui/material';
 import IconClose from '@mui/icons-material/Clear';
 
-import IconButton from '../Button/Icon';
+import { IconButton } from '..';
 
 import { minTabHeight } from './Tab';
 

package/src/components/Form/{AccessRightsV2 → AccessRights}/AccessRights.cypress.spec.tsx

@@ -347,4 +347,27 @@ describe('Access rights', () => {
 
     cy.makeSnapshot();
   });
+
+  it('resets the role to "viewer" when the "editor" role is selected and a contact with "viewer" right is selected', () => {
+    initialize({});
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 10').click();
+
+    cy.findByTestId('add_role').parent().click();
+    cy.get('li[data-value="editor"]').click();
+
+    cy.findByLabelText(labels.add.autocompleteContact).click();
+
+    cy.waitForRequest('@getContacts');
+
+    cy.contains('Entity 11').click();
+
+    cy.findByTestId('add_role').should('have.value', 'viewer');
+
+    cy.makeSnapshot();
+  });
 });

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ContactSwitch.tsx

@@ -7,11 +7,14 @@ import { ContactType, Labels } from '../models';
 import { contactTypeAtom } from '../atoms';
 import { Subtitle } from '../../../..';
 
+import { useContactSwitchStyles } from './ShareInput.styles';
+
 interface Props {
   labels: Labels['add'];
 }
 
 const ContactSwitch = ({ labels }: Props): JSX.Element => {
+  const { classes } = useContactSwitchStyles();
   const { t } = useTranslation();
 
   const setContactType = useSetAtom(contactTypeAtom);
@@ -23,7 +26,12 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
   return (
     <>
       <Subtitle>{t(labels.title)}</Subtitle>
-      <RadioGroup row defaultValue={ContactType.Contact} onChange={change}>
+      <RadioGroup
+        row
+        className={classes.inputs}
+        defaultValue={ContactType.Contact}
+        onChange={change}
+      >
         <FormControlLabel
           control={<Radio />}
           label={labels.contact}

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/ShareInput.styles.ts

@@ -7,3 +7,11 @@ export const useShareInputStyles = makeStyles()((theme) => ({
     gridTemplateColumns: `1fr min-content min-content`
   }
 }));
+
+export const useContactSwitchStyles = makeStyles()((theme) => ({
+  inputs: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/Form/{AccessRightsV2 → AccessRights}/ShareInput/useShareInput.tsx

@@ -40,6 +40,10 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
+    if (equals('editor', entry.most_permissive_role)) {
+      return;
+    }
+    setSelectedRole('viewer');
   };
 
   const add = (): void => {

package/src/components/Form/{AccessRightsV2 → AccessRights}/models.ts

@@ -2,6 +2,7 @@ export interface AccessRightInitialValues {
   email?: string;
   id: number | string;
   isContactGroup: boolean;
+  most_permissive_role?: 'editor' | 'viewer';
   name: string;
   role: string;
 }

package/src/components/Form/{AccessRightsV2 → AccessRights}/storiesData.ts

@@ -88,6 +88,7 @@ const buildEntities = (from, isGroup): Array<SelectEntry> => {
     .map((_, index) => ({
       email: isGroup ? undefined : faker.internet.email(),
       id: 1000 + index,
+      most_permissive_role: index % 3 === 0 ? 'editor' : 'viewer',
       name: `Entity ${isGroup ? 'Group' : ''} ${from + index}`
     }));
 };

package/src/components/Form/index.ts

@@ -1,4 +1,4 @@
 export * from './Form.models';
 export * from './Dashboard';
-export * from './AccessRights';
-export { default as AccessRightsV2 } from './AccessRightsV2/AccessRights';
+export { default as AccessRights } from './AccessRights/AccessRights';
+export { default as AccessRightsV2 } from './AccessRights/AccessRights';

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

@@ -1,45 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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 };