@centreon/ui 26.12.10 → 26.12.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.12.10",
+  "version": "26.12.12",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Icon/PasswordIcon.tsx

@@ -0,0 +1,17 @@
+import type { SvgIconProps } from '@mui/material';
+
+import type { ReactElement } from 'react';
+
+import BaseIcon from './BaseIcon';
+
+// Material Symbols "password". MUI only ships the asterisk version.
+const icon = (
+  <path
+    d="M3 6C2.16667 6 1.45833 5.70833 0.875 5.125C0.291667 4.54167 0 3.83333 0 3C0 2.16667 0.291667 1.45833 0.875 0.875C1.45833 0.291667 2.16667 0 3 0C3.83333 0 4.54167 0.291667 5.125 0.875C5.70833 1.45833 6 2.16667 6 3C6 3.83333 5.70833 4.54167 5.125 5.125C4.54167 5.70833 3.83333 6 3 6ZM1 12V10H21V12H1ZM8.875 5.125C8.29167 4.54167 8 3.83333 8 3C8 2.16667 8.29167 1.45833 8.875 0.875C9.45833 0.291667 10.1667 0 11 0C11.8333 0 12.5417 0.291667 13.125 0.875C13.7083 1.45833 14 2.16667 14 3C14 3.83333 13.7083 4.54167 13.125 5.125C12.5417 5.70833 11.8333 6 11 6C10.1667 6 9.45833 5.70833 8.875 5.125ZM16.875 5.125C16.2917 4.54167 16 3.83333 16 3C16 2.16667 16.2917 1.45833 16.875 0.875C17.4583 0.291667 18.1667 0 19 0C19.8333 0 20.5417 0.291667 21.125 0.875C21.7083 1.45833 22 2.16667 22 3C22 3.83333 21.7083 4.54167 21.125 5.125C20.5417 5.70833 19.8333 6 19 6C18.1667 6 17.4583 5.70833 16.875 5.125Z"
+    transform="translate(1 6)"
+  />
+);
+
+export const PasswordIcon = (props: SvgIconProps): ReactElement => (
+  <BaseIcon {...props} dataTestId="PasswordIcon" Icon={icon} />
+);

package/src/Icon/PasswordOffIcon.tsx

@@ -0,0 +1,17 @@
+import type { SvgIconProps } from '@mui/material';
+
+import type { ReactElement } from 'react';
+
+import BaseIcon from './BaseIcon';
+
+// Material Symbols "password_off".
+const icon = (
+  <path
+    d="M3 10.2C2.16667 10.2 1.45833 9.90833 0.875 9.325C0.291667 8.74167 0 8.03333 0 7.2C0 6.36667 0.291667 5.65833 0.875 5.075C1.45833 4.49167 2.16667 4.2 3 4.2C3.83333 4.2 4.54167 4.49167 5.125 5.075C5.70833 5.65833 6 6.36667 6 7.2C6 8.03333 5.70833 8.74167 5.125 9.325C4.54167 9.90833 3.83333 10.2 3 10.2ZM16.875 9.325C16.2917 8.74167 16 8.03333 16 7.2C16 6.36667 16.2917 5.65833 16.875 5.075C17.4583 4.49167 18.1667 4.2 19 4.2C19.8333 4.2 20.5417 4.49167 21.125 5.075C21.7083 5.65833 22 6.36667 22 7.2C22 8.03333 21.7083 8.74167 21.125 9.325C20.5417 9.90833 19.8333 10.2 19 10.2C18.1667 10.2 17.4583 9.90833 16.875 9.325ZM13.5 8.85L9.35 4.7C9.58333 4.53333 9.84167 4.40833 10.125 4.325C10.4083 4.24167 10.7 4.2 11 4.2C11.8333 4.2 12.5417 4.49167 13.125 5.075C13.7083 5.65833 14 6.36667 14 7.2C14 7.5 13.9583 7.79167 13.875 8.075C13.7917 8.35833 13.6667 8.61667 13.5 8.85ZM18.8 19.8L15.2 16.2H1V14.2H13.2L0.4 1.4L1.8 0L20.2 18.4L18.8 19.8Z"
+    transform="translate(1 2.1)"
+  />
+);
+
+export const PasswordOffIcon = (props: SvgIconProps): ReactElement => (
+  <BaseIcon {...props} dataTestId="PasswordOffIcon" Icon={icon} />
+);

package/src/Icon/index.ts

@@ -7,6 +7,8 @@ export { HostGroupIcon } from './HostGroupIcon';
 export { HostIcon } from './HostIcon';
 export { InstallCommandIcon } from './InstallCommandIcon';
 export { MetaServiceIcon } from './MetaServiceIcon';
+export { PasswordIcon } from './PasswordIcon';
+export { PasswordOffIcon } from './PasswordOffIcon';
 export { RegexIcon } from './RegexIcon';
 export { ServiceGroupIcon } from './ServiceGroupIcon';
 export { ServiceIcon } from './ServiceIcon';

package/src/Listing/ActionBar/index.tsx

@@ -82,6 +82,26 @@ const useStyles = makeStyles<StyleProps>()(
   })
 );
 
+const defaultRowsPerPageOptions = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+
+// The page size can be any number (the platform setting is free), so it is
+// added to the options when missing, for the selector to show it. `Number`
+// because `onLimitChange` is typed `string | number`, so a consumer may store a
+// string limit.
+const getRowsPerPageOptions = (limit: number | string): Array<number> => {
+  const rowsPerPage = Number(limit);
+
+  if (
+    !Number.isInteger(rowsPerPage) ||
+    rowsPerPage <= 0 ||
+    defaultRowsPerPageOptions.includes(rowsPerPage)
+  ) {
+    return defaultRowsPerPageOptions;
+  }
+
+  return [...defaultRowsPerPageOptions, rowsPerPage].sort((a, b) => a - b);
+};
+
 type Props = Pick<
   ListingProps<unknown>,
   | 'actions'
@@ -287,7 +307,7 @@ const MemoListingActionBar = ({
               onRowsPerPageChange={changeRowPerPage}
               page={currentPage ?? 0}
               rowsPerPage={limit ?? 10}
-              rowsPerPageOptions={[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
+              rowsPerPageOptions={getRowsPerPageOptions(limit ?? 10)}
               SelectProps={{
                 id: labelRowsPerPage,
                 MenuProps: {

package/src/Listing/Listing.browser.test.tsx

@@ -473,4 +473,100 @@ describe('Listing', () => {
     });
     expect(onRowClick).not.toHaveBeenCalled();
   });
+
+  describe('Rows per page', () => {
+    const defaultOptions = [
+      '10',
+      '20',
+      '30',
+      '40',
+      '50',
+      '60',
+      '70',
+      '80',
+      '90',
+      '100'
+    ];
+
+    const openRowsPerPage = async (limit: number): Promise<HTMLElement> => {
+      render(
+        <Listing
+          columns={defaultColumn}
+          currentPage={0}
+          limit={limit}
+          rows={listingWithSubItems3Rows}
+          totalRows={3}
+        />
+      );
+
+      const rowsPerPage = within(
+        await screen.findByTestId('Listing Pagination')
+      ).getByRole('combobox');
+
+      expect(rowsPerPage).toHaveTextContent(new RegExp(`^${limit}$`));
+
+      await userEvent.click(rowsPerPage);
+
+      return screen.findByRole('listbox');
+    };
+
+    const getOptionLabels = (listbox: HTMLElement): Array<string | null> =>
+      within(listbox)
+        .getAllByRole('option')
+        .map((option) => option.textContent);
+
+    it.each([
+      {
+        limit: 25,
+        options: [
+          '10',
+          '20',
+          '25',
+          '30',
+          '40',
+          '50',
+          '60',
+          '70',
+          '80',
+          '90',
+          '100'
+        ]
+      },
+      {
+        limit: 150,
+        options: [
+          '10',
+          '20',
+          '30',
+          '40',
+          '50',
+          '60',
+          '70',
+          '80',
+          '90',
+          '100',
+          '150'
+        ]
+      }
+    ])(
+      'adds the page size $limit to the options when it is not one of them',
+      async ({ limit, options }) => {
+        const listbox = await openRowsPerPage(limit);
+
+        expect(getOptionLabels(listbox)).toEqual(options);
+        expect(
+          within(listbox).getByRole('option', { name: `${limit}` })
+        ).toHaveAttribute('aria-selected', 'true');
+      }
+    );
+
+    it('keeps the default options when the page size is one of them', async () => {
+      const listbox = await openRowsPerPage(30);
+
+      expect(getOptionLabels(listbox)).toEqual(defaultOptions);
+      expect(
+        within(listbox).getByRole('option', { name: '30' })
+      ).toHaveAttribute('aria-selected', 'true');
+    });
+  });
 });

package/src/components/SortableEntriesList/Row.tsx

@@ -1,4 +1,4 @@
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 
 import { useSortable } from '@dnd-kit/sortable';
@@ -96,7 +96,7 @@ export const Row = <T,>({
         <RowButton
           className="text-error-main"
           data-testid="delete-row"
-          icon={<DeleteIcon />}
+          icon={<DeleteOutlineIcon />}
           label={t(labelDelete)}
           onClick={(): void => onDelete(id)}
         />