@centreon/ui 26.10.4 → 26.10.6

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

@@ -0,0 +1,325 @@
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+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' | 'maxVisibleRows'
+  >
+>;
+
+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, maxVisibleRows: 10 },
+  argTypes: {
+    addLabel: { control: 'text' },
+    draggable: { control: 'boolean' },
+    maxVisibleRows: { control: 'number' }
+  },
+  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 @max-[600px]:grid-cols-1">
+    <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 buildMacros = (count: number): Array<MacroRow> =>
+  Array.from({ length: count }, (_, index) => ({
+    isPassword: false,
+    name: `MACRO_${index + 1}`,
+    origin: 'direct',
+    value: `value ${index + 1}`
+  }));
+
+const MacrosList = ({
+  draggable,
+  initialValues = initialMacros,
+  maxVisibleRows
+}: {
+  draggable: boolean;
+  initialValues?: Array<MacroRow>;
+  maxVisibleRows?: number;
+}): 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 (
+    <>
+      <SortableEntriesList<MacroRow>
+        actions={({ index, value }) => [
+          {
+            icon: value.isPassword ? <VisibilityOffIcon /> : <VisibilityIcon />,
+            id: 'toggle-password',
+            label: value.isPassword ? 'Show value' : 'Hide value',
+            onClick: () => toggleIsPassword(index)
+          },
+          {
+            icon: <DescriptionOutlinedIcon />,
+            id: 'macro-description',
+            label: 'Description',
+            onClick: () => undefined
+          }
+        ]}
+        createValue={createMacroRow}
+        draggable={draggable}
+        getRowClassName={({ value }) => macroRowClassName[value.origin]}
+        label="Custom macros"
+        maxVisibleRows={maxVisibleRows}
+        onChange={setMacros}
+        renderRow={renderMacroRow}
+        values={macros}
+      />
+      <ValuesPreview values={macros} />
+    </>
+  );
+};
+
+export const CustomMacros: Story = {
+  render: () => (
+    <div className="w-[640px]">
+      <MacrosList draggable />
+    </div>
+  )
+};
+
+export const NonDraggable: Story = {
+  render: () => (
+    <div className="w-[640px]">
+      <MacrosList draggable={false} />
+    </div>
+  )
+};
+
+export const Empty: Story = {
+  render: () => (
+    <div className="w-[640px]">
+      <MacrosList draggable initialValues={[]} />
+    </div>
+  )
+};
+
+// Capped list in a resizable container: drag the bottom-right corner or use the
+// presets to check the row layout against the list width, not the viewport.
+const panelWidths = [1400, 900, 720, 560];
+
+const ScrollableMacrosList = (): JSX.Element => {
+  const [width, setWidth] = useState(panelWidths[0]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        {panelWidths.map((panelWidth) => (
+          <button
+            className="rounded border px-2 py-1"
+            key={panelWidth}
+            onClick={(): void => setWidth(panelWidth)}
+            type="button"
+          >
+            {panelWidth}px
+          </button>
+        ))}
+      </div>
+      <div
+        className="max-w-full resize-x overflow-auto border border-dashed p-2"
+        style={{ width }}
+      >
+        <MacrosList
+          draggable
+          initialValues={buildMacros(15)}
+          maxVisibleRows={10}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const ScrollableAndResizable: Story = {
+  render: () => <ScrollableMacrosList />
+};

package/src/components/SortableEntriesList/SortableEntriesList.tsx

@@ -0,0 +1,199 @@
+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 { useMaxVisibleRows } from './useMaxVisibleRows';
+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;
+  /**
+   * Caps the list to this many rows, the next one half visible, and scrolls
+   * the rest. The add button stays outside the scroll area.
+   */
+  maxVisibleRows?: number;
+  onChange: (values: Array<T>) => void;
+  /**
+   * Renders the inputs of one row. `values` gives access to sibling rows. The
+   * list is a CSS container, so the row layout can adapt to the list width
+   * with container query classes (e.g. `@max-[600px]:grid-cols-1`).
+   */
+  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,
+  maxVisibleRows,
+  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 {
+    hasHiddenRowsBelow,
+    listRef,
+    maxHeight,
+    scrollRef,
+    updateHiddenRowsBelow
+  } = useMaxVisibleRows(maxVisibleRows);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+      // Instant scroll keeps each key press based on up-to-date positions in a
+      // capped list.
+      scrollBehavior: 'auto'
+    })
+  );
+
+  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 className="@container w-full" 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}
+            >
+              <div
+                className={
+                  maxVisibleRows
+                    ? `relative w-full overflow-y-auto pt-2 [scrollbar-gutter:stable] [scrollbar-width:thin] ${hasHiddenRowsBelow ? '[mask-image:linear-gradient(to_bottom,#000_calc(100%-2rem),transparent)]' : ''}`
+                    : 'w-full'
+                }
+                data-testid="sortable-entries-scroll"
+                onScroll={updateHiddenRowsBelow}
+                ref={scrollRef}
+                style={{ maxHeight }}
+              >
+                <ul
+                  aria-label={label}
+                  className="m-0 flex w-full list-none flex-col gap-2 p-0"
+                  ref={listRef}
+                >
+                  {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>
+              </div>
+            </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/useMaxVisibleRows.ts

@@ -0,0 +1,77 @@
+import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
+
+interface Result {
+  hasHiddenRowsBelow: boolean;
+  listRef: RefObject<HTMLUListElement | null>;
+  maxHeight?: number;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  updateHiddenRowsBelow: () => void;
+}
+
+// Caps the list height to `maxVisibleRows` rows, measured from the rendered
+// rows so it stays right whatever the row height (content, container width).
+export const useMaxVisibleRows = (maxVisibleRows?: number): Result => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const [maxHeight, setMaxHeight] = useState<number>();
+  const [hasHiddenRowsBelow, setHasHiddenRowsBelow] = useState(false);
+
+  const updateHiddenRowsBelow = (): void => {
+    const container = scrollRef.current;
+
+    setHasHiddenRowsBelow(
+      !!container &&
+        container.scrollHeight - container.scrollTop - container.clientHeight >
+          1
+    );
+  };
+
+  useLayoutEffect(() => {
+    const list = listRef.current;
+
+    if (!maxVisibleRows || !list) {
+      setMaxHeight(undefined);
+
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(() => {
+      const cutOffRow = list.children[maxVisibleRows] as
+        | HTMLElement
+        | undefined;
+
+      // Half of the first row past the cap stays visible, so the cut reads as
+      // a deliberate hint that the list scrolls.
+      setMaxHeight(
+        cutOffRow
+          ? Math.round(cutOffRow.offsetTop + cutOffRow.offsetHeight / 2)
+          : undefined
+      );
+      updateHiddenRowsBelow();
+    });
+
+    observer.observe(list);
+
+    return () => observer.disconnect();
+  }, [maxVisibleRows]);
+
+  useLayoutEffect(() => {
+    // The cap can apply after a row was added and focused (e.g. the 11th row
+    // of a list capped to 10): bring the focused row back into view.
+    const focusedRow = document.activeElement?.closest('li');
+
+    if (focusedRow && scrollRef.current?.contains(focusedRow)) {
+      focusedRow.scrollIntoView({ block: 'nearest' });
+    }
+
+    updateHiddenRowsBelow();
+  }, [maxHeight]);
+
+  return {
+    hasHiddenRowsBelow,
+    listRef,
+    maxHeight,
+    scrollRef,
+    updateHiddenRowsBelow
+  };
+};