@centreon/ui 26.12.11 → 26.12.12

package/package.json

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

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');
+    });
+  });
 });