@centreon/ui 26.10.4 → 26.10.5

package/package.json

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

package/src/components/SortableEntriesList/Row.tsx

@@ -0,0 +1,117 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { IconButton } from '../Button';
+import { Tooltip } from '../Tooltip';
+import type { RenderRowParams, RowParams, SortableRowAction } from './models';
+import { labelDelete, labelDragToReorder } from './translatedLabels';
+
+type RowButtonProps = ComponentPropsWithRef<typeof IconButton> & {
+  label: string;
+};
+
+// 30px buttons at a 32px pitch. The icon size is set here because the Tooltip
+// overrides IconButton's own small-size class, and consumer icons may be any size.
+const RowButton = ({
+  className = '',
+  label,
+  ...buttonProps
+}: RowButtonProps): JSX.Element => (
+  <Tooltip label={label}>
+    <IconButton
+      {...buttonProps}
+      aria-label={label}
+      className={`[&_.MuiSvgIcon-root]:text-xl ${className}`}
+      size="small"
+      variant="ghost"
+    />
+  </Tooltip>
+);
+
+interface Props<T> {
+  actions: Array<SortableRowAction>;
+  className?: string;
+  draggable: boolean;
+  id: string;
+  onDelete: (id: string) => void;
+  onUpdate: (id: string, update: (value: T) => T) => void;
+  renderRow: (params: RenderRowParams<T>) => ReactNode;
+  rowParams: RowParams<T>;
+}
+
+export const Row = <T,>({
+  actions,
+  className = '',
+  draggable,
+  id,
+  onDelete,
+  onUpdate,
+  renderRow,
+  rowParams
+}: Props<T>): JSX.Element => {
+  const { t } = useTranslation();
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({ disabled: !draggable, id });
+
+  const setValue = (value: T): void => onUpdate(id, () => value);
+  const setField = <K extends keyof T>(field: K, fieldValue: T[K]): void =>
+    onUpdate(
+      id,
+      (value) => ({ ...(value as object), [field]: fieldValue }) as T
+    );
+
+  return (
+    <li
+      className={`relative flex w-full items-center gap-2 ${isDragging ? 'z-1 opacity-70' : ''} ${className}`}
+      data-entry-id={id}
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+    >
+      <div className="min-w-0 flex-1" data-row-fields>
+        {renderRow({ ...rowParams, setField, setValue })}
+      </div>
+      <div className="flex flex-none items-center gap-0.5">
+        {actions.map(({ icon, id: actionId, isDisabled, label, onClick }) => (
+          <RowButton
+            data-testid={actionId}
+            disabled={isDisabled}
+            icon={icon}
+            key={actionId}
+            label={t(label)}
+            onClick={onClick}
+          />
+        ))}
+        <RowButton
+          className="text-error-main"
+          data-testid="delete-row"
+          icon={<DeleteIcon />}
+          label={t(labelDelete)}
+          onClick={(): void => onDelete(id)}
+        />
+        {draggable && (
+          <RowButton
+            {...attributes}
+            {...listeners}
+            className="cursor-grab touch-none active:cursor-grabbing"
+            data-testid="drag-handle"
+            icon={<DragIndicatorIcon />}
+            label={t(labelDragToReorder)}
+            ref={setActivatorNodeRef}
+          />
+        )}
+      </div>
+    </li>
+  );
+};

package/src/components/SortableEntriesList/SortableEntriesList.cypress.spec.tsx

@@ -0,0 +1,506 @@
+import EditIcon from '@mui/icons-material/Edit';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+
+import { useState } from 'react';
+
+import { TestQueryProvider } from '../..';
+import buildListingEndpoint from '../../api/buildListingEndpoint';
+import type { SelectEntry } from '../../InputField/Select';
+import SingleConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Single';
+import TextField from '../../InputField/Text';
+import type { RenderRowParams, RowParams, SortableRowAction } from './models';
+import { type Props, SortableEntriesList } from './SortableEntriesList';
+
+type Stub = ReturnType<typeof cy.stub>;
+
+const ControlledList = <T,>({
+  initialValues,
+  onChangeSpy,
+  ...props
+}: Omit<Props<T>, 'values' | 'onChange'> & {
+  initialValues: Array<T>;
+  onChangeSpy: Stub;
+}): JSX.Element => {
+  const [values, setValues] = useState(initialValues);
+
+  return (
+    <SortableEntriesList<T>
+      {...props}
+      onChange={(nextValues): void => {
+        onChangeSpy(nextValues);
+        setValues(nextValues);
+      }}
+      values={values}
+    />
+  );
+};
+
+const getLastValues = <T,>(onChange: Stub): Array<T> =>
+  onChange.lastCall.args[0];
+
+const getRows = (): Cypress.Chainable => cy.findAllByRole('listitem');
+
+const endpoint = '/configuration/hosts/templates';
+
+const options: Array<SelectEntry> = [
+  { id: 1, name: 'generic-active-host' },
+  { id: 2, name: 'generic-passive-host' },
+  { id: 3, name: 'linux-server-standard' }
+];
+
+type TemplateRow = SelectEntry | null;
+
+const renderTemplateRow = ({
+  setValue,
+  value,
+  values
+}: RenderRowParams<TemplateRow>): JSX.Element => {
+  const selectedElsewhere = values
+    .map((template) => template?.id)
+    .filter((id) => id !== value?.id);
+
+  return (
+    <SingleConnectedAutocompleteField
+      baseEndpoint=""
+      field="name"
+      fullWidth
+      getEndpoint={(parameters): string =>
+        buildListingEndpoint({ baseEndpoint: endpoint, parameters })
+      }
+      getOptionDisabled={(option: SelectEntry): boolean =>
+        selectedElsewhere.includes(option.id)
+      }
+      label="Template"
+      onChange={(_event, template): void => setValue(template as TemplateRow)}
+      value={value}
+    />
+  );
+};
+
+const initializeTemplates = ({
+  draggable = true,
+  templates = [options[0], options[1]]
+}: {
+  draggable?: boolean;
+  templates?: Array<TemplateRow>;
+} = {}): { onChange: Stub; onEdit: Stub } => {
+  const onChange = cy.stub();
+  const onEdit = cy.stub();
+
+  cy.intercept('GET', `**${endpoint}**`, {
+    body: {
+      meta: { limit: 10, page: 1, total: options.length },
+      result: options
+    },
+    statusCode: 200
+  }).as('getTemplates');
+
+  cy.mount({
+    Component: (
+      <TestQueryProvider>
+        <div className="p-4">
+          <ControlledList<TemplateRow>
+            actions={({
+              index,
+              value
+            }: RowParams<TemplateRow>): Array<SortableRowAction> => [
+              {
+                icon: <EditIcon />,
+                id: 'edit-template',
+                label: 'Edit template',
+                onClick: () => onEdit(value, index)
+              }
+            ]}
+            createValue={(): TemplateRow => null}
+            draggable={draggable}
+            initialValues={templates}
+            label="Templates"
+            onChangeSpy={onChange}
+            renderRow={renderTemplateRow}
+          />
+        </div>
+      </TestQueryProvider>
+    )
+  });
+
+  return { onChange, onEdit };
+};
+
+describe('SortableEntriesList - single input rows', () => {
+  it('displays one row per value with its value, its actions, a delete button and a trailing drag handle', () => {
+    initializeTemplates();
+
+    cy.findByRole('list', { name: 'Templates' }).should('exist');
+    getRows().should('have.length', 2);
+    cy.get('[data-testid="Template"]')
+      .eq(0)
+      .should('have.value', options[0].name);
+    cy.get('[data-testid="Template"]')
+      .eq(1)
+      .should('have.value', options[1].name);
+    cy.findAllByTestId('edit-template').should('have.length', 2);
+    cy.findAllByTestId('delete-row').should('have.length', 2);
+
+    getRows()
+      .eq(0)
+      .find('button')
+      .last()
+      .should('have.attr', 'data-testid', 'drag-handle');
+
+    cy.makeSnapshot();
+  });
+
+  it('reports the plain values, without any internal id, when an option is selected', () => {
+    const { onChange } = initializeTemplates();
+
+    cy.get('[data-testid="Template"]').eq(1).click();
+    cy.wait('@getTemplates');
+    cy.findByRole('option', { name: options[2].name }).click();
+
+    cy.get('[data-testid="Template"]')
+      .eq(1)
+      .should('have.value', options[2].name);
+    cy.wrap(onChange).should(() => {
+      expect(getLastValues(onChange)).to.deep.equal([options[0], options[2]]);
+    });
+  });
+
+  it('lets a row disable the options already selected in sibling rows', () => {
+    initializeTemplates();
+
+    cy.get('[data-testid="Template"]').eq(1).click();
+    cy.wait('@getTemplates');
+
+    cy.findByRole('option', { name: options[0].name }).should(
+      'have.attr',
+      'aria-disabled',
+      'true'
+    );
+    cy.findByRole('option', { name: options[2].name }).should(
+      'not.have.attr',
+      'aria-disabled',
+      'true'
+    );
+  });
+
+  it('appends a row built with createValue and focuses its first input', () => {
+    const { onChange } = initializeTemplates();
+
+    cy.findByTestId('Add').click();
+
+    getRows().should('have.length', 3);
+    cy.get('[data-testid="Template"]').eq(2).should('have.value', '');
+    cy.focused().should('have.attr', 'data-testid', 'Template');
+    cy.focused()
+      .closest('li')
+      .should(($row) => {
+        expect($row.index()).to.equal(2);
+      });
+    cy.wrap(onChange).should(() => {
+      expect(getLastValues(onChange)).to.deep.equal([
+        options[0],
+        options[1],
+        null
+      ]);
+    });
+  });
+
+  it('removes a row and moves the focus to the delete button of the row taking its place', () => {
+    const { onChange } = initializeTemplates({
+      templates: [options[0], options[1], options[2]]
+    });
+
+    cy.findAllByTestId('delete-row').eq(0).click();
+
+    getRows().should('have.length', 2);
+    cy.wrap(onChange).should(() => {
+      expect(getLastValues(onChange)).to.deep.equal([options[1], options[2]]);
+    });
+    cy.focused()
+      .should('have.attr', 'data-testid', 'delete-row')
+      .closest('li')
+      .find('[data-testid="Template"]')
+      .should('have.value', options[1].name);
+  });
+
+  it('moves the focus to the previous row when the last row is removed, then to the add button when the list becomes empty', () => {
+    initializeTemplates();
+
+    cy.findAllByTestId('delete-row').eq(1).click();
+    cy.focused()
+      .closest('li')
+      .find('[data-testid="Template"]')
+      .should('have.value', options[0].name);
+
+    cy.findAllByTestId('delete-row').eq(0).click();
+    getRows().should('not.exist');
+    cy.focused().should('have.attr', 'data-testid', 'Add');
+  });
+
+  it('reorders the rows with the keyboard through the drag handle', () => {
+    const { onChange } = initializeTemplates();
+
+    cy.moveSortableElement({
+      direction: 'down',
+      element: cy.findAllByTestId('drag-handle').eq(0)
+    });
+
+    cy.get('[data-testid="Template"]')
+      .eq(0)
+      .should('have.value', options[1].name);
+    cy.get('[data-testid="Template"]')
+      .eq(1)
+      .should('have.value', options[0].name);
+    cy.wrap(onChange).should(() => {
+      expect(getLastValues(onChange)).to.deep.equal([options[1], options[0]]);
+    });
+  });
+
+  it('passes the up-to-date row value and index to the actions after a reorder', () => {
+    const { onEdit } = initializeTemplates();
+
+    cy.moveSortableElement({
+      direction: 'down',
+      element: cy.findAllByTestId('drag-handle').eq(0)
+    });
+    cy.get('[data-testid="Template"]')
+      .eq(0)
+      .should('have.value', options[1].name);
+
+    cy.findAllByTestId('edit-template').eq(1).click();
+    cy.wrap(onEdit).should('have.been.calledWith', options[0], 1);
+  });
+
+  it('hides the drag handle when the list is not draggable', () => {
+    initializeTemplates({ draggable: false });
+
+    cy.findAllByTestId('delete-row').should('have.length', 2);
+    cy.findByTestId('drag-handle').should('not.exist');
+  });
+
+  it('lets the inputs take the remaining width and keeps the row buttons at a 32px pitch', () => {
+    initializeTemplates();
+
+    cy.get('[data-row-fields]')
+      .eq(0)
+      .next()
+      .find('button')
+      .should('have.length', 3)
+      .then(($buttons) => {
+        const lefts = $buttons
+          .toArray()
+          .map((button) => button.getBoundingClientRect().left);
+
+        lefts.slice(1).forEach((left, index) => {
+          expect(left - lefts[index]).to.equal(32);
+        });
+      });
+
+    cy.get('[data-row-fields]')
+      .eq(0)
+      .invoke('outerWidth')
+      .should('be.greaterThan', 500);
+  });
+});
+
+interface MacroRow {
+  isPassword: boolean;
+  name: string;
+  origin: 'direct' | 'fromTpl';
+  value: string;
+}
+
+const macros: Array<MacroRow> = [
+  { isPassword: false, name: 'MACRO_A', origin: 'direct', value: 'a' },
+  { isPassword: true, name: 'MACRO_B', origin: 'fromTpl', value: 'b' }
+];
+
+const emptyMacro: MacroRow = {
+  isPassword: false,
+  name: '',
+  origin: 'direct',
+  value: ''
+};
+
+const renderMacroRow = ({
+  setField,
+  value: macro
+}: RenderRowParams<MacroRow>): JSX.Element => (
+  <div className="flex gap-2">
+    <TextField
+      dataTestId="macro-name"
+      label="Name"
+      onChange={(event): void => setField('name', event.target.value)}
+      value={macro.name}
+    />
+    <TextField
+      dataTestId="macro-value"
+      label="Value"
+      onChange={(event): void => setField('value', event.target.value)}
+      type={macro.isPassword ? 'password' : 'text'}
+      value={macro.value}
+    />
+  </div>
+);
+
+const MacrosList = ({
+  copyOnChange,
+  onChangeSpy
+}: {
+  copyOnChange: boolean;
+  onChangeSpy: Stub;
+}): JSX.Element => {
+  const [values, setValues] = useState(macros);
+
+  const change = (nextValues: Array<MacroRow>): void => {
+    onChangeSpy(nextValues);
+    // Simulates a parent that stores a copy (new array and objects), like a
+    // form library that clones its state.
+    setValues(
+      copyOnChange ? nextValues.map((macro) => ({ ...macro })) : nextValues
+    );
+  };
+
+  return (
+    <>
+      <button
+        data-testid="reset"
+        onClick={(): void => setValues([emptyMacro])}
+        type="button"
+      >
+        Reset
+      </button>
+      <SortableEntriesList<MacroRow>
+        actions={({ index, value }) => [
+          {
+            icon: <VisibilityIcon />,
+            id: 'toggle-password',
+            label: 'Toggle password',
+            onClick: () =>
+              change(
+                values.map((macro, macroIndex) =>
+                  macroIndex === index
+                    ? { ...macro, isPassword: !value.isPassword }
+                    : macro
+                )
+              )
+          }
+        ]}
+        createValue={(): MacroRow => emptyMacro}
+        getRowClassName={({ value }) => `origin-${value.origin}`}
+        onChange={change}
+        renderRow={renderMacroRow}
+        values={values}
+      />
+    </>
+  );
+};
+
+const initializeMacros = ({
+  copyOnChange = false
+}: {
+  copyOnChange?: boolean;
+} = {}): { onChange: Stub } => {
+  const onChange = cy.stub();
+
+  cy.mount({
+    Component: <MacrosList copyOnChange={copyOnChange} onChangeSpy={onChange} />
+  });
+
+  return { onChange };
+};
+
+describe('SortableEntriesList - multiple input rows', () => {
+  it('renders every input of every row', () => {
+    initializeMacros();
+
+    cy.get('input[data-testid="macro-name"]').should('have.length', 2);
+    cy.get('input[data-testid="macro-value"]').should('have.length', 2);
+    cy.get('input[data-testid="macro-value"]')
+      .eq(1)
+      .should('have.attr', 'type', 'password');
+  });
+
+  it('keeps the focus in the edited input while typing and reports a structured value', () => {
+    const { onChange } = initializeMacros();
+
+    cy.get('input[data-testid="macro-name"]').eq(0).clear();
+    cy.get('input[data-testid="macro-name"]').eq(0).type('HOST_IP');
+    cy.focused().should('have.value', 'HOST_IP');
+
+    cy.get('input[data-testid="macro-value"]').eq(0).clear();
+    cy.get('input[data-testid="macro-value"]').eq(0).type('10.0.0.1');
+    cy.focused().should('have.value', '10.0.0.1');
+
+    cy.wrap(onChange).should(() => {
+      expect(getLastValues(onChange)).to.deep.equal([
+        {
+          isPassword: false,
+          name: 'HOST_IP',
+          origin: 'direct',
+          value: '10.0.0.1'
+        },
+        macros[1]
+      ]);
+    });
+  });
+
+  it('keeps the focus when a new row is typed into right after being added', () => {
+    const { onChange } = initializeMacros();
+
+    cy.findByTestId('Add').click();
+    cy.focused().should('have.attr', 'data-testid', 'macro-name').type('NEW');
+    cy.get('input[data-testid="macro-value"]').eq(2).type('value');
+
+    cy.wrap(onChange).should(() => {
+      expect(getLastValues<MacroRow>(onChange)[2]).to.deep.equal({
+        ...emptyMacro,
+        name: 'NEW',
+        value: 'value'
+      });
+    });
+  });
+
+  it('keeps the rows and the focus stable when the parent stores a copy of the values', () => {
+    const { onChange } = initializeMacros({ copyOnChange: true });
+
+    cy.get('input[data-testid="macro-name"]').eq(1).clear();
+    cy.get('input[data-testid="macro-name"]').eq(1).type('RENAMED');
+    cy.focused().should('have.value', 'RENAMED');
+
+    cy.findByTestId('Add').click();
+    cy.focused().should('have.attr', 'data-testid', 'macro-name').type('NEW');
+
+    cy.wrap(onChange).should(() => {
+      expect(
+        getLastValues<MacroRow>(onChange).map(({ name }) => name)
+      ).to.deep.equal(['MACRO_A', 'RENAMED', 'NEW']);
+    });
+  });
+
+  it('renders the new values when the parent replaces them', () => {
+    initializeMacros();
+
+    cy.findByTestId('reset').click();
+
+    getRows().should('have.length', 1);
+    cy.get('input[data-testid="macro-name"]').should('have.value', '');
+  });
+
+  it('lets a row action change its own row', () => {
+    initializeMacros();
+
+    cy.findAllByTestId('toggle-password').eq(0).click();
+
+    cy.get('input[data-testid="macro-value"]')
+      .eq(0)
+      .should('have.attr', 'type', 'password');
+  });
+
+  it('applies the class returned by getRowClassName to each row', () => {
+    initializeMacros();
+
+    getRows().eq(0).should('have.class', 'origin-direct');
+    getRows().eq(1).should('have.class', 'origin-fromTpl');
+  });
+});

package/src/components/SortableEntriesList/SortableEntriesList.stories.tsx

@@ -0,0 +1,252 @@
+import EditIcon from '@mui/icons-material/Edit';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import buildListingEndpoint from '../../api/buildListingEndpoint';
+import type { Listing } from '../../api/models';
+import type { SelectEntry } from '../../InputField/Select';
+import type { GetEndpointParams } from '../../InputField/Select/Autocomplete/Connected';
+import SingleConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Single';
+import TextField from '../../InputField/Text';
+import type { RenderRowParams } from './models';
+import {
+  SortableEntriesList,
+  type Props as SortableEntriesListProps
+} from './SortableEntriesList';
+
+const meta: Meta<typeof SortableEntriesList> = {
+  component: SortableEntriesList
+};
+
+export default meta;
+type Story = StoryObj<typeof SortableEntriesList>;
+
+const ValuesPreview = ({ values }: { values: Array<unknown> }): JSX.Element => (
+  <pre className="mt-4 rounded bg-background-default p-2 text-text-primary text-xs">
+    {JSON.stringify(values, null, 2)}
+  </pre>
+);
+
+// Templates: one connected autocomplete per row, order matters (inheritance)
+
+type TemplateRow = SelectEntry | null;
+
+const hostTemplateOptions: Array<SelectEntry> = [
+  { id: 1, name: 'generic-active-host' },
+  { id: 2, name: 'generic-passive-host' },
+  { id: 3, name: 'generic-host-custom' },
+  { id: 4, name: 'linux-server-standard' },
+  { id: 5, name: 'windows-server-standard' }
+];
+
+const templatesEndpoint = '/configuration/hosts/templates';
+
+const getTemplatesEndpoint = (parameters: GetEndpointParams): string =>
+  buildListingEndpoint({ baseEndpoint: templatesEndpoint, parameters });
+
+const templatesMockData = [
+  {
+    delay: 300,
+    method: 'GET',
+    response: (): Listing<SelectEntry> => ({
+      meta: { limit: 10, page: 1, total: hostTemplateOptions.length },
+      result: hostTemplateOptions
+    }),
+    status: 200,
+    url: `${templatesEndpoint}?page=`
+  }
+];
+
+const createTemplateRow = (): TemplateRow => null;
+
+const renderTemplateRow = ({
+  setValue,
+  value,
+  values
+}: RenderRowParams<TemplateRow>): JSX.Element => {
+  // A template already chosen in another row cannot be chosen twice.
+  const selectedElsewhere = values
+    .map((template) => template?.id)
+    .filter((id) => id !== value?.id);
+
+  return (
+    <SingleConnectedAutocompleteField
+      baseEndpoint=""
+      field="name"
+      fullWidth
+      getEndpoint={getTemplatesEndpoint}
+      getOptionDisabled={(option: SelectEntry): boolean =>
+        selectedElsewhere.includes(option.id)
+      }
+      label="Select a template"
+      onChange={(_event, template): void => setValue(template as TemplateRow)}
+      value={value}
+    />
+  );
+};
+
+type TemplatesListArgs = Partial<
+  Pick<SortableEntriesListProps<TemplateRow>, 'addLabel' | 'draggable'>
+>;
+
+const TemplatesList = (args: TemplatesListArgs): JSX.Element => {
+  const [templates, setTemplates] = useState<Array<TemplateRow>>([
+    hostTemplateOptions[0],
+    hostTemplateOptions[3]
+  ]);
+
+  return (
+    <div className="w-[640px]">
+      <SortableEntriesList<TemplateRow>
+        actions={({ value }) => [
+          {
+            icon: <EditIcon />,
+            id: 'edit-template',
+            isDisabled: !value,
+            label: 'Edit template',
+            onClick: () => undefined
+          },
+          {
+            icon: <InfoOutlinedIcon />,
+            id: 'template-info',
+            isDisabled: !value,
+            label: 'Template information',
+            onClick: () => undefined
+          }
+        ]}
+        addLabel="Add new entry"
+        createValue={createTemplateRow}
+        label="Templates"
+        onChange={setTemplates}
+        renderRow={renderTemplateRow}
+        values={templates}
+        {...args}
+      />
+      <ValuesPreview values={templates} />
+    </div>
+  );
+};
+
+export const Templates: Story = {
+  args: { draggable: true },
+  argTypes: {
+    addLabel: { control: 'text' },
+    draggable: { control: 'boolean' }
+  },
+  parameters: { mockData: templatesMockData },
+  render: (args) => <TemplatesList {...(args as TemplatesListArgs)} />
+};
+
+// Custom macros: several inputs per row, row styled from its own value
+
+interface MacroRow {
+  isPassword: boolean;
+  name: string;
+  origin: 'direct' | 'fromCommand' | 'fromTpl';
+  value: string;
+}
+
+const createMacroRow = (): MacroRow => ({
+  isPassword: false,
+  name: '',
+  origin: 'direct',
+  value: ''
+});
+
+const macroRowClassName: Record<MacroRow['origin'], string> = {
+  direct: 'rounded p-1',
+  fromCommand: 'rounded bg-teal-50 p-1 dark:bg-teal-950',
+  fromTpl: 'rounded bg-purple-50 p-1 dark:bg-purple-950'
+};
+
+const renderMacroRow = ({
+  setField,
+  value: macro
+}: RenderRowParams<MacroRow>): JSX.Element => (
+  <div className="grid grid-cols-2 gap-2">
+    <TextField
+      dataTestId="macro-name"
+      fullWidth
+      label="Name"
+      onChange={(event): void => setField('name', event.target.value)}
+      value={macro.name}
+    />
+    <TextField
+      dataTestId="macro-value"
+      fullWidth
+      label="Value"
+      onChange={(event): void => setField('value', event.target.value)}
+      type={macro.isPassword ? 'password' : 'text'}
+      value={macro.value}
+    />
+  </div>
+);
+
+const initialMacros: Array<MacroRow> = [
+  { isPassword: false, name: 'HOST_IP', origin: 'direct', value: '10.0.0.1' },
+  {
+    isPassword: true,
+    name: 'API_TOKEN',
+    origin: 'fromTpl',
+    value: 'secret-token'
+  },
+  { isPassword: false, name: 'PORT', origin: 'fromCommand', value: '443' }
+];
+
+const MacrosList = ({
+  draggable,
+  initialValues = initialMacros
+}: {
+  draggable: boolean;
+  initialValues?: Array<MacroRow>;
+}): JSX.Element => {
+  const [macros, setMacros] = useState(initialValues);
+
+  const toggleIsPassword = (index: number): void =>
+    setMacros((current) =>
+      current.map((macro, macroIndex) =>
+        macroIndex === index
+          ? { ...macro, isPassword: !macro.isPassword }
+          : macro
+      )
+    );
+
+  return (
+    <div className="w-[640px]">
+      <SortableEntriesList<MacroRow>
+        actions={({ index, value }) => [
+          {
+            icon: value.isPassword ? <VisibilityOffIcon /> : <VisibilityIcon />,
+            id: 'toggle-password',
+            label: value.isPassword ? 'Show value' : 'Hide value',
+            onClick: () => toggleIsPassword(index)
+          }
+        ]}
+        createValue={createMacroRow}
+        draggable={draggable}
+        getRowClassName={({ value }) => macroRowClassName[value.origin]}
+        label="Custom macros"
+        onChange={setMacros}
+        renderRow={renderMacroRow}
+        values={macros}
+      />
+      <ValuesPreview values={macros} />
+    </div>
+  );
+};
+
+export const CustomMacros: Story = {
+  render: () => <MacrosList draggable />
+};
+
+export const NonDraggable: Story = {
+  render: () => <MacrosList draggable={false} />
+};
+
+export const Empty: Story = {
+  render: () => <MacrosList draggable initialValues={[]} />
+};

package/src/components/SortableEntriesList/SortableEntriesList.tsx

@@ -0,0 +1,164 @@
+import {
+  type Announcements,
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  type Modifier,
+  PointerSensor,
+  type UniqueIdentifier,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from '@dnd-kit/sortable';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ItemComposition } from '../ItemComposition';
+import type { RenderRowParams, RowParams, SortableRowAction } from './models';
+import { Row } from './Row';
+import {
+  labelAdd,
+  labelRowDragCancelled,
+  labelRowDragInstructions,
+  labelRowDropped,
+  labelRowMovedOver,
+  labelRowPickedUp
+} from './translatedLabels';
+import { useSortableEntries } from './useSortableEntries';
+
+export interface Props<T> {
+  /** Extra per-row buttons, rendered before the delete button. */
+  actions?: (params: RowParams<T>) => Array<SortableRowAction>;
+  addLabel?: string;
+  /** Initial value of a row added with the add button. */
+  createValue: () => T;
+  /** Shows the drag handle (last in the row) and enables reordering. */
+  draggable?: boolean;
+  getRowClassName?: (params: RowParams<T>) => string | undefined;
+  /** Accessible name of the list. */
+  label?: string;
+  onChange: (values: Array<T>) => void;
+  /** Renders the inputs of one row. `values` gives access to sibling rows. */
+  renderRow: (params: RenderRowParams<T>) => ReactNode;
+  values: Array<T>;
+}
+
+const restrictToVerticalAxis: Modifier = ({ transform }) => ({
+  ...transform,
+  x: 0
+});
+
+export const SortableEntriesList = <T,>({
+  actions,
+  addLabel,
+  createValue,
+  draggable = true,
+  getRowClassName,
+  label,
+  onChange,
+  renderRow,
+  values
+}: Props<T>): JSX.Element => {
+  const { t } = useTranslation();
+  const translatedAddLabel = addLabel || t(labelAdd);
+
+  const {
+    addEntry,
+    containerRef,
+    entries,
+    removeEntry,
+    reorderEntries,
+    updateEntry
+  } = useSortableEntries({
+    addLabel: translatedAddLabel,
+    createValue,
+    onChange,
+    values
+  });
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+
+  const entryIds = entries.map(({ id }) => id);
+
+  const getPosition = (id: UniqueIdentifier): number =>
+    entryIds.indexOf(id as string) + 1;
+
+  const announceMove =
+    (moveLabel: string) =>
+    ({ active, over }: Pick<DragEndEvent, 'active' | 'over'>) =>
+      over
+        ? t(moveLabel, {
+            newPosition: getPosition(over.id),
+            position: getPosition(active.id)
+          })
+        : undefined;
+
+  const announcements: Announcements = {
+    onDragCancel: ({ active }) =>
+      t(labelRowDragCancelled, { position: getPosition(active.id) }),
+    onDragEnd: announceMove(labelRowDropped),
+    onDragOver: announceMove(labelRowMovedOver),
+    onDragStart: ({ active }) =>
+      t(labelRowPickedUp, { position: getPosition(active.id) })
+  };
+
+  return (
+    <div ref={containerRef}>
+      <ItemComposition labelAdd={translatedAddLabel} onAddItem={addEntry}>
+        {[
+          <DndContext
+            accessibility={{
+              announcements,
+              screenReaderInstructions: {
+                draggable: t(labelRowDragInstructions)
+              }
+            }}
+            collisionDetection={closestCenter}
+            key="sortable-entries"
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={reorderEntries}
+            sensors={sensors}
+          >
+            <SortableContext
+              items={entryIds}
+              strategy={verticalListSortingStrategy}
+            >
+              <ul
+                aria-label={label}
+                className="m-0 flex w-full list-none flex-col gap-2 p-0"
+              >
+                {entries.map(({ id, value }, index) => {
+                  const rowParams = { index, value, values };
+
+                  return (
+                    <Row<T>
+                      actions={actions?.(rowParams) ?? []}
+                      className={getRowClassName?.(rowParams)}
+                      draggable={draggable}
+                      id={id}
+                      key={id}
+                      onDelete={removeEntry}
+                      onUpdate={updateEntry}
+                      renderRow={renderRow}
+                      rowParams={rowParams}
+                    />
+                  );
+                })}
+              </ul>
+            </SortableContext>
+          </DndContext>
+        ]}
+      </ItemComposition>
+    </div>
+  );
+};

package/src/components/SortableEntriesList/index.ts

@@ -0,0 +1,3 @@
+export type { RenderRowParams, RowParams, SortableRowAction } from './models';
+export type { Props as SortableEntriesListProps } from './SortableEntriesList';
+export { SortableEntriesList } from './SortableEntriesList';

package/src/components/SortableEntriesList/models.ts

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react';
+
+export interface SortableRowAction {
+  icon: ReactElement;
+  id: string;
+  isDisabled?: boolean;
+  label: string;
+  onClick: () => void;
+}
+
+export interface RowParams<T> {
+  index: number;
+  value: T;
+  values: ReadonlyArray<T>;
+}
+
+export interface RenderRowParams<T> extends RowParams<T> {
+  setField: <K extends keyof T>(field: K, fieldValue: T[K]) => void;
+  setValue: (value: T) => void;
+}

package/src/components/SortableEntriesList/translatedLabels.ts

@@ -0,0 +1,12 @@
+export const labelAdd = 'Add';
+export const labelDelete = 'Delete';
+export const labelDragToReorder = 'Drag to reorder';
+export const labelRowDragInstructions =
+  'To pick up a row, press space or enter. Use the arrow keys to move it, then press space or enter to drop it, or escape to cancel.';
+export const labelRowPickedUp = 'Picked up row {{position}}';
+export const labelRowMovedOver =
+  'Row {{position}} moved to position {{newPosition}}';
+export const labelRowDropped =
+  'Row {{position}} dropped at position {{newPosition}}';
+export const labelRowDragCancelled =
+  'Reordering cancelled, row {{position}} returned to its original position';

package/src/components/SortableEntriesList/useSortableEntries.ts

@@ -0,0 +1,140 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import {
+  type RefObject,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from 'react';
+
+// A value paired with the stable key used for React keys, drag & drop and focus
+// management. Consumers only ever see plain values.
+interface Entry<T> {
+  id: string;
+  value: T;
+}
+
+const generateEntryId = (): string =>
+  `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+
+const focusableSelector =
+  'input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const getRowSelector = (id: string): string =>
+  `[data-entry-id="${CSS.escape(id)}"]`;
+
+interface Params<T> {
+  addLabel: string;
+  createValue: () => T;
+  onChange: (values: Array<T>) => void;
+  values: Array<T>;
+}
+
+interface Result<T> {
+  addEntry: () => void;
+  containerRef: RefObject<HTMLDivElement | null>;
+  entries: Array<Entry<T>>;
+  removeEntry: (id: string) => void;
+  reorderEntries: (event: DragEndEvent) => void;
+  updateEntry: (id: string, update: (value: T) => T) => void;
+}
+
+export const useSortableEntries = <T>({
+  addLabel,
+  createValue,
+  onChange,
+  values
+}: Params<T>): Result<T> => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Latest entries, updated as soon as a change is emitted so that several
+  // changes fired before the parent re-renders compose instead of overwriting
+  // each other.
+  const latestEntriesRef = useRef<Array<Entry<T>>>([]);
+  const pendingFocusSelectorRef = useRef<string | null>(null);
+
+  // Ids are kept by position: after a change emitted here, the latest entries
+  // are exactly the emitted ones, so every row keeps its id (and its DOM node)
+  // even when the parent stores a copy of the values.
+  const entries = useMemo(
+    () =>
+      values.map((value, index) => ({
+        id: latestEntriesRef.current[index]?.id ?? generateEntryId(),
+        value
+      })),
+    [values]
+  );
+
+  useLayoutEffect(() => {
+    latestEntriesRef.current = entries;
+  }, [entries]);
+
+  useEffect(() => {
+    const selector = pendingFocusSelectorRef.current;
+
+    if (!selector) {
+      return;
+    }
+
+    pendingFocusSelectorRef.current = null;
+    containerRef.current?.querySelector<HTMLElement>(selector)?.focus();
+  }, [entries]);
+
+  const commit = (nextEntries: Array<Entry<T>>): void => {
+    latestEntriesRef.current = nextEntries;
+    onChange(nextEntries.map(({ value }) => value));
+  };
+
+  const updateEntry = (id: string, update: (value: T) => T): void =>
+    commit(
+      latestEntriesRef.current.map((entry) =>
+        entry.id === id ? { ...entry, value: update(entry.value) } : entry
+      )
+    );
+
+  const addEntry = (): void => {
+    const entry = { id: generateEntryId(), value: createValue() };
+
+    pendingFocusSelectorRef.current = `${getRowSelector(entry.id)} [data-row-fields] :is(${focusableSelector})`;
+    commit([...latestEntriesRef.current, entry]);
+  };
+
+  const removeEntry = (id: string): void => {
+    const currentEntries = latestEntriesRef.current;
+    const index = currentEntries.findIndex((entry) => entry.id === id);
+    // Keep keyboard users in place: focus the row that takes the removed one's
+    // position, else the previous row, else the add button.
+    const nextFocusedEntry =
+      currentEntries[index + 1] ?? currentEntries[index - 1];
+
+    pendingFocusSelectorRef.current = nextFocusedEntry
+      ? `${getRowSelector(nextFocusedEntry.id)} [data-testid="delete-row"]`
+      : `button[aria-label="${CSS.escape(addLabel)}"]`;
+    commit(currentEntries.filter((entry) => entry.id !== id));
+  };
+
+  const reorderEntries = ({ active, over }: DragEndEvent): void => {
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const currentEntries = latestEntriesRef.current;
+
+    commit(
+      arrayMove(
+        currentEntries,
+        currentEntries.findIndex(({ id }) => id === active.id),
+        currentEntries.findIndex(({ id }) => id === over.id)
+      )
+    );
+  };
+
+  return {
+    addEntry,
+    containerRef,
+    entries,
+    removeEntry,
+    reorderEntries,
+    updateEntry
+  };
+};

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './Layout';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './SortableEntriesList';
 export * from './Tabs';
 export * from './Tooltip';
 export type { ZoomState } from './Zoom/models';