@centreon/ui 26.12.11 → 26.12.13

package/package.json

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

package/src/Form/Inputs/IconSelector.browser.test.tsx

@@ -0,0 +1,232 @@
+import { Typography } from '@mui/material';
+
+import { rs } from '@rstest/core';
+import { interceptAPIRequest, Method, waitForRequest } from '@test-setup/api';
+import { render } from '@test-setup/render';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { type FormikValues, useFormikContext } from 'formik';
+import i18next from 'i18next';
+import { path } from 'ramda';
+import { initReactI18next } from 'react-i18next';
+import { type AnyObjectSchema, object } from 'yup';
+
+import buildListingEndpoint from '../../api/buildListingEndpoint';
+import TestQueryProvider from '../../api/TestQueryProvider';
+import type { GetEndpointParams } from '../../InputField/Select/Autocomplete/Connected';
+import { Form } from '../Form';
+import { InputType } from './models';
+
+const label = 'Icon';
+const labelRequired = 'Required';
+const iconsEndpoint = '/configuration/icons';
+
+const getIconUrl = (color: string): string =>
+  `data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="${color}"/></svg>`
+  )}`;
+
+const icons = [
+  { id: 1, name: 'blue', url: getIconUrl('blue') },
+  { id: 2, name: 'green', url: getIconUrl('green') }
+];
+
+const getEndpoint = (parameters: GetEndpointParams): string =>
+  buildListingEndpoint({ baseEndpoint: iconsEndpoint, parameters });
+
+interface InitializeProps {
+  dataTestId?: string;
+  disabled?: boolean;
+  fieldName?: string;
+  initialValues?: FormikValues;
+  validationSchema?: AnyObjectSchema;
+}
+
+const ValueDisplay = ({ fieldName }: { fieldName: string }): JSX.Element => {
+  const { values } = useFormikContext<FormikValues>();
+
+  return (
+    <Typography data-testid="value">
+      {JSON.stringify(path(fieldName.split('.'), values) ?? null)}
+    </Typography>
+  );
+};
+
+const initialize = ({
+  dataTestId,
+  disabled = false,
+  fieldName = 'icon',
+  initialValues = { icon: null },
+  validationSchema = object()
+}: InitializeProps = {}): void => {
+  interceptAPIRequest({
+    alias: 'getIcons',
+    method: Method.GET,
+    path: `./api/latest${iconsEndpoint}**`,
+    response: { meta: { limit: 10, page: 1, total: 2 }, result: icons }
+  });
+
+  render(
+    <TestQueryProvider>
+      <div className="w-100">
+        <Form
+          initialValues={initialValues}
+          inputs={[
+            {
+              dataTestId,
+              fieldName,
+              getDisabled: () => disabled,
+              group: '',
+              iconSelector: { getEndpoint },
+              label,
+              type: InputType.IconSelector
+            },
+            {
+              custom: {
+                Component: () => <ValueDisplay fieldName={fieldName} />
+              },
+              fieldName: 'value',
+              group: '',
+              label: 'value',
+              type: InputType.Custom
+            }
+          ]}
+          submit={rs.fn()}
+          validationSchema={validationSchema}
+        />
+      </div>
+    </TestQueryProvider>
+  );
+};
+
+const getPreview = (name: string): HTMLElement | null =>
+  document.querySelector(`img[alt="${name}"]:not([role="presentation"] img)`);
+
+describe('Icon selector', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+
+    i18next.use(initReactI18next).init({ lng: 'en', resources: {} });
+  });
+
+  it('lists the images of the endpoint, each with its thumbnail', async () => {
+    initialize();
+
+    await userEvent.click(await screen.findByRole('combobox', { name: label }));
+    await waitForRequest('@getIcons');
+
+    const list = await screen.findByRole('listbox');
+
+    await waitFor(() => {
+      expect(within(list).getAllByRole('option')).toHaveLength(2);
+    });
+    icons.forEach(({ name, url }) => {
+      const thumbnail = within(list).getByAltText(name);
+
+      expect(thumbnail).toHaveAttribute('src', url);
+      expect(thumbnail).toHaveAttribute('width', '20');
+    });
+  });
+
+  it('stores the picked image in the field and shows it beside the picker', async () => {
+    initialize();
+
+    await userEvent.click(await screen.findByRole('combobox', { name: label }));
+    await waitForRequest('@getIcons');
+    await userEvent.click(await screen.findByText('green'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('value')).toHaveTextContent(
+        JSON.stringify(icons[1])
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('combobox', { name: label })).toHaveValue(
+        'green'
+      );
+    });
+    await waitFor(() => {
+      expect(getPreview('green')).toHaveAttribute('src', icons[1].url);
+    });
+  });
+
+  it('shows the initial image and removes it once the field is cleared', async () => {
+    initialize({ initialValues: { icon: icons[0] } });
+
+    expect(await screen.findByRole('combobox', { name: label })).toHaveValue(
+      'blue'
+    );
+    await waitFor(() => {
+      expect(getPreview('blue')).toBeInTheDocument();
+    });
+
+    await userEvent.hover(screen.getByRole('combobox', { name: label }));
+    await userEvent.click(await screen.findByTitle('Clear'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('value')).toHaveTextContent('null');
+    });
+    await waitFor(() => {
+      expect(getPreview('blue')).not.toBeInTheDocument();
+    });
+  });
+
+  it('shows the field error once the field is cleared', async () => {
+    initialize({
+      initialValues: { icon: icons[0] },
+      validationSchema: object({
+        icon: object().nullable().required(labelRequired)
+      })
+    });
+
+    expect(await screen.findByRole('combobox', { name: label })).toHaveValue(
+      'blue'
+    );
+    expect(screen.queryByText(labelRequired)).not.toBeInTheDocument();
+
+    await userEvent.hover(screen.getByRole('combobox', { name: label }));
+    await userEvent.click(await screen.findByTitle('Clear'));
+
+    expect(await screen.findByText(labelRequired)).toBeVisible();
+  });
+
+  it('reads and writes a nested field', async () => {
+    initialize({
+      fieldName: 'extendedInfos.icon',
+      initialValues: { extendedInfos: { icon: icons[0] } }
+    });
+
+    expect(await screen.findByRole('combobox', { name: label })).toHaveValue(
+      'blue'
+    );
+
+    await userEvent.click(screen.getByRole('combobox', { name: label }));
+    await waitForRequest('@getIcons');
+    await userEvent.click(await screen.findByText('green'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('value')).toHaveTextContent(
+        JSON.stringify(icons[1])
+      );
+    });
+  });
+
+  it('uses the label as test id by default', async () => {
+    initialize();
+
+    expect(await screen.findByTestId(label)).toBeVisible();
+  });
+
+  it('uses the given test id instead of the label', async () => {
+    initialize({ dataTestId: 'icon-selector' });
+
+    expect(await screen.findByTestId('icon-selector')).toBeVisible();
+    expect(screen.queryByTestId(label)).not.toBeInTheDocument();
+  });
+
+  it('is disabled when getDisabled says so', async () => {
+    initialize({ disabled: true, initialValues: { icon: icons[0] } });
+
+    expect(await screen.findByRole('combobox', { name: label })).toBeDisabled();
+  });
+});

package/src/Form/Inputs/IconSelector.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
+import { object } from 'yup';
+
+import buildListingEndpoint from '../../api/buildListingEndpoint';
+import type { GetEndpointParams } from '../../InputField/Select/Autocomplete/Connected';
+import { Form } from '../Form';
+import { InputType } from './models';
+
+const getIconUrl = (color: string): string =>
+  `data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="${color}"/></svg>`
+  )}`;
+
+const icons = [
+  { id: 1, name: 'blue', url: getIconUrl('#1976d2') },
+  { id: 2, name: 'green', url: getIconUrl('#2e7d32') },
+  { id: 3, name: 'red', url: getIconUrl('#d32f2f') }
+];
+
+const iconsEndpoint = '/icons';
+
+const getEndpoint = (parameters: GetEndpointParams): string =>
+  buildListingEndpoint({ baseEndpoint: iconsEndpoint, parameters });
+
+interface Args {
+  disabled: boolean;
+  icon: (typeof icons)[number] | null;
+}
+
+const IconSelectorForm = ({ disabled, icon }: Args): JSX.Element => (
+  <div className="w-100">
+    <Form
+      initialValues={{ icon }}
+      inputs={[
+        {
+          fieldName: 'icon',
+          getDisabled: () => disabled,
+          group: '',
+          iconSelector: { getEndpoint },
+          label: 'Icon',
+          type: InputType.IconSelector
+        }
+      ]}
+      submit={() => undefined}
+      validationSchema={object()}
+    />
+  </div>
+);
+
+const meta: Meta<typeof IconSelectorForm> = {
+  args: { disabled: false, icon: null },
+  component: IconSelectorForm,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '`InputType.IconSelector`: picks an image from the listing returned by `iconSelector.getEndpoint`, showing each option with its thumbnail and the picked image beside the field. The field (`fieldName`, a dotted path for a nested value) holds the picked `{ id, name, url }`, or null.'
+      }
+    },
+    msw: {
+      handlers: [
+        http.get(`**${iconsEndpoint}**`, () =>
+          HttpResponse.json({
+            meta: { limit: 10, page: 1, total: icons.length },
+            result: icons
+          })
+        )
+      ]
+    }
+  },
+  title: 'Form/Inputs/IconSelector'
+};
+
+export default meta;
+type Story = StoryObj<typeof IconSelectorForm>;
+
+export const Empty: Story = {};
+
+export const WithIcon: Story = { args: { icon: icons[1] } };
+
+export const Disabled: Story = { args: { disabled: true, icon: icons[2] } };

package/src/Form/Inputs/IconSelector.tsx

@@ -0,0 +1,78 @@
+import { type FormikValues, useFormikContext } from 'formik';
+import { isNil, path, split } from 'ramda';
+import { useTranslation } from 'react-i18next';
+
+import Image, { ImageVariant } from '../../Image/Image';
+import SingleConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Single';
+import LoadingSkeleton from '../../LoadingSkeleton';
+import type { InputPropsWithoutGroup } from './models';
+
+interface Icon {
+  id: number;
+  name: string;
+  url: string;
+}
+
+const previewSize = 25;
+
+// A picker of the images listed by `iconSelector.getEndpoint`, each option
+// with its thumbnail, and the picked image beside it. The field holds the
+// picked `{ id, name, url }`, or null.
+const IconSelector = ({
+  dataTestId,
+  fieldName,
+  getDisabled,
+  iconSelector,
+  label
+}: InputPropsWithoutGroup): JSX.Element | null => {
+  const { t } = useTranslation();
+
+  const { errors, setFieldTouched, setFieldValue, touched, values } =
+    useFormikContext<FormikValues>();
+
+  const fieldPath = split('.', fieldName);
+  const icon = (path(fieldPath, values) as Icon | null | undefined) ?? null;
+  const error = path(fieldPath, touched)
+    ? (path(fieldPath, errors) as string | undefined)
+    : undefined;
+
+  const changeIcon = (_: unknown, value: unknown): void => {
+    setFieldTouched(fieldName, true, false);
+    setFieldValue(fieldName, value);
+  };
+
+  if (isNil(iconSelector)) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <SingleConnectedAutocompleteField
+        dataTestId={dataTestId}
+        disableClearable={false}
+        disabled={getDisabled?.(values) ?? false}
+        displayOptionThumbnail
+        error={error}
+        field="name"
+        fullWidth
+        getEndpoint={iconSelector.getEndpoint}
+        id={fieldName}
+        label={t(label)}
+        onChange={changeIcon}
+        value={icon}
+      />
+      {icon && (
+        <Image
+          alt={icon.name}
+          fallback={<LoadingSkeleton />}
+          height={previewSize}
+          imagePath={icon.url}
+          variant={ImageVariant.Contain}
+          width={previewSize}
+        />
+      )}
+    </div>
+  );
+};
+
+export default IconSelector;

package/src/Form/Inputs/LoadingSkeleton.tsx

@@ -51,6 +51,10 @@ const getSkeleton = cond<Array<InputType>, JSX.Element>([
   [
     equals(InputType.Custom) as (b: InputType) => boolean,
     always(<LoadingSkeleton height={52} />)
+  ],
+  [
+    equals(InputType.IconSelector) as (b: InputType) => boolean,
+    always(<LoadingSkeleton height={52} />)
   ]
 ]);
 

package/src/Form/Inputs/index.tsx

@@ -38,6 +38,7 @@ import ExclusiveCheckboxGroup from './ExclusiveCheckboxGroup';
 import FieldsTable from './FieldsTable/FieldsTable';
 import File from './File';
 import Grid from './Grid';
+import IconSelector from './IconSelector';
 import List from './List/List';
 import LoadingSkeleton from './LoadingSkeleton';
 import {
@@ -93,6 +94,10 @@ export const getInput = cond<
     equals(InputType.SegmentedButtons) as (b: InputType) => boolean,
     always(SegmentedButtons)
   ],
+  [
+    equals(InputType.IconSelector) as (b: InputType) => boolean,
+    always(IconSelector)
+  ],
   [equals(InputType.List) as (b: InputType) => boolean, always(List)],
   [equals(InputType.File) as (b: InputType) => boolean, always(File)],
   [equals(InputType.Text) as (b: InputType) => boolean, always(TextInput)],

package/src/Form/Inputs/models.ts

@@ -5,6 +5,7 @@ import type { JsonDecoder } from 'ts.data.json';
 
 import type { ConditionsSearchParameter } from '../../api/buildListingEndpoint/models';
 import type { SelectEntry } from '../../InputField/Select';
+import type { GetEndpointParams } from '../../InputField/Select/Autocomplete/Connected';
 import type { QueryParameter } from '../../queryParameters/models';
 
 export interface ChangeArgs {
@@ -52,7 +53,8 @@ export enum InputType {
   File = 14,
   Divider = 15,
   ExclusiveCheckboxGroup = 16,
-  SegmentedButtons = 17
+  SegmentedButtons = 17,
+  IconSelector = 18
 }
 
 interface FieldsTableGetRequiredProps {
@@ -155,6 +157,10 @@ export interface InputProps {
   };
   group: string;
   hideInput?: (values: FormikValues) => boolean;
+  // `InputType.IconSelector`: the listing of the images to pick from.
+  iconSelector?: {
+    getEndpoint: (parameters: GetEndpointParams) => string;
+  };
   inputClassName?: string;
   label: string;
   list?: {

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