@centreon/ui 26.11.5 → 26.11.7

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';