@centreon/ui 26.10.8 → 26.10.10

package/src/Form/Section/navigateToSection.ts

@@ -1,9 +1,27 @@
-export const useNavigateToSection = () => {
-  return (sectionName: string) => {
-    const section = document.querySelector(
-      `[data-section-group-form-id="${sectionName}"]`
-    );
-
-    section?.scrollIntoView({ behavior: 'smooth' });
-  };
+export const sectionAnchorAttribute = 'data-section-group-form-id';
+
+export const getSectionAnchors = (container: HTMLElement): Array<HTMLElement> =>
+  Array.from(
+    container.querySelectorAll<HTMLElement>(`[${sectionAnchorAttribute}]`)
+  );
+
+interface NavigateToSectionProps {
+  container: HTMLElement | null;
+  sectionName: string;
+}
+
+// The lookup stays inside the form: two forms can share a group name.
+export const navigateToSection = ({
+  container,
+  sectionName
+}: NavigateToSectionProps): void => {
+  if (!container) {
+    return;
+  }
+
+  const section = getSectionAnchors(container).find(
+    (anchor) => anchor.getAttribute(sectionAnchorAttribute) === sectionName
+  );
+
+  section?.scrollIntoView({ behavior: 'smooth' });
 };

package/src/Form/Section/useActiveSection.ts

@@ -0,0 +1,213 @@
+import {
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+
+import {
+  getSectionAnchors,
+  navigateToSection,
+  sectionAnchorAttribute
+} from './navigateToSection';
+
+// Distance from the top of the scroll area under which a section is the one in
+// view: the pinned tab bar plus the scroll margin of the group titles.
+const sectionOffset = 64;
+// `scrollend` is missing from older browsers, and is not fired when the
+// clicked section is already in place.
+const scrollEndFallbackDelay = 1000;
+
+const getScrollParent = (element: HTMLElement | null): HTMLElement | null => {
+  let parent = element?.parentElement ?? null;
+
+  while (parent && parent !== document.body) {
+    // An ancestor that can scroll but has nothing to scroll (no height of its
+    // own) is not the one the user moves: keep looking further up.
+    if (
+      /(auto|scroll)/.test(getComputedStyle(parent).overflowY) &&
+      parent.scrollHeight > parent.clientHeight
+    ) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+
+  return null;
+};
+
+interface ComputeActiveSectionProps {
+  container: HTMLElement;
+  scrollParent: HTMLElement | null;
+  sectionNames: Array<string>;
+}
+
+const computeActiveSection = ({
+  container,
+  scrollParent,
+  sectionNames
+}: ComputeActiveSectionProps): string => {
+  const scrollingElement = scrollParent ?? document.documentElement;
+
+  // A tab can have no section in the form: only the sections displayed count.
+  const sections = getSectionAnchors(container)
+    .filter((anchor) =>
+      sectionNames.includes(anchor.getAttribute(sectionAnchorAttribute) || '')
+    )
+    .map((anchor) => ({
+      name: anchor.getAttribute(sectionAnchorAttribute) as string,
+      top: anchor.getBoundingClientRect().top
+    }));
+
+  if (!sections.length) {
+    return sectionNames[0];
+  }
+
+  const isScrolledToBottom =
+    scrollingElement.scrollTop > 0 &&
+    scrollingElement.scrollTop + scrollingElement.clientHeight >=
+      scrollingElement.scrollHeight - 1;
+
+  // The last sections can be too short to ever reach the top.
+  if (isScrolledToBottom) {
+    return (
+      [...sectionNames]
+        .reverse()
+        .find((name) => sections.some((section) => section.name === name)) ||
+      sectionNames[0]
+    );
+  }
+
+  const line =
+    (scrollParent ? scrollParent.getBoundingClientRect().top : 0) +
+    sectionOffset;
+
+  const passedSections = sections.filter(({ top }) => top <= line);
+
+  if (!passedSections.length) {
+    return sectionNames.find((name) =>
+      sections.some((section) => section.name === name)
+    ) as string;
+  }
+
+  return passedSections.reduce((closest, section) =>
+    section.top > closest.top ? section : closest
+  ).name;
+};
+
+interface UseActiveSectionProps {
+  containerRef: RefObject<HTMLElement | null>;
+  isEnabled: boolean;
+  sectionNames: Array<string>;
+}
+
+interface UseActiveSection {
+  activeSection: string;
+  goToSection: (sectionName: string) => void;
+}
+
+export const useActiveSection = ({
+  containerRef,
+  isEnabled,
+  sectionNames
+}: UseActiveSectionProps): UseActiveSection => {
+  const [activeSection, setActiveSection] = useState(sectionNames[0]);
+
+  const isScrollingToSection = useRef(false);
+  const scrollTargetRef = useRef<HTMLElement | Window | null>(null);
+  const fallbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );
+  const stopWaitingRef = useRef<(() => void) | undefined>(undefined);
+  const refreshActiveSectionRef = useRef<(() => void) | undefined>(undefined);
+
+  const sectionNamesKey = sectionNames.join('\n');
+
+  const stopWaitingForScrollEnd = useCallback((): void => {
+    stopWaitingRef.current?.();
+    stopWaitingRef.current = undefined;
+    clearTimeout(fallbackTimeoutRef.current);
+    isScrollingToSection.current = false;
+  }, []);
+
+  // The scroll events fired while waiting are ignored, and none fires when the
+  // clicked section is already in place: the position is read again once done.
+  const endScrollWait = useCallback((): void => {
+    stopWaitingForScrollEnd();
+    refreshActiveSectionRef.current?.();
+  }, [stopWaitingForScrollEnd]);
+
+  const goToSection = useCallback(
+    (sectionName: string): void => {
+      stopWaitingForScrollEnd();
+
+      // The clicked tab is the active one until the smooth scroll ends, so the
+      // highlight does not run through the sections in between.
+      setActiveSection(sectionName);
+      isScrollingToSection.current = true;
+
+      const target = scrollTargetRef.current;
+      target?.addEventListener('scrollend', endScrollWait, { once: true });
+      stopWaitingRef.current = () =>
+        target?.removeEventListener('scrollend', endScrollWait);
+      fallbackTimeoutRef.current = setTimeout(
+        endScrollWait,
+        scrollEndFallbackDelay
+      );
+
+      navigateToSection({ container: containerRef.current, sectionName });
+    },
+    [containerRef, endScrollWait, stopWaitingForScrollEnd]
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (!isEnabled || !container) {
+      return undefined;
+    }
+
+    const scrollParent = getScrollParent(container);
+    const scrollTarget = scrollParent ?? window;
+    scrollTargetRef.current = scrollTarget;
+
+    let animationFrame = 0;
+
+    const refresh = (): void => {
+      setActiveSection(
+        computeActiveSection({
+          container,
+          scrollParent,
+          sectionNames: sectionNamesKey.split('\n')
+        })
+      );
+    };
+
+    const update = (): void => {
+      if (isScrollingToSection.current) {
+        return;
+      }
+
+      refresh();
+    };
+
+    const onScroll = (): void => {
+      cancelAnimationFrame(animationFrame);
+      animationFrame = requestAnimationFrame(update);
+    };
+
+    refreshActiveSectionRef.current = refresh;
+    scrollTarget.addEventListener('scroll', onScroll, { passive: true });
+    update();
+
+    return () => {
+      scrollTarget.removeEventListener('scroll', onScroll);
+      cancelAnimationFrame(animationFrame);
+      refreshActiveSectionRef.current = undefined;
+      stopWaitingForScrollEnd();
+    };
+  }, [containerRef, isEnabled, sectionNamesKey, stopWaitingForScrollEnd]);
+
+  return { activeSection, goToSection };
+};

package/src/InputField/Number/Number.browser.test.tsx

@@ -0,0 +1,109 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import NumberField, { type NumberProps } from './Number';
+
+const initialize = (props: NumberProps): void => {
+  render(<NumberField {...props} />);
+};
+
+const getInput = (): HTMLInputElement =>
+  document.querySelector('input') as HTMLInputElement;
+
+const getFieldWidth = (): number =>
+  (
+    getInput().closest('.MuiTextField-root') as HTMLElement
+  ).getBoundingClientRect().width;
+
+describe('Number field', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the placeholder when the field has no default or fallback values', () => {
+    initialize({ dataTestId: 'test', onChange: rs.fn() });
+
+    expect(getInput()).toHaveValue(null);
+    expect(getInput()).toHaveAttribute('placeholder', '0');
+  });
+
+  it('displays the fallback value as placeholder when the field as no default value', () => {
+    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: rs.fn() });
+
+    expect(getInput()).toHaveValue(null);
+    expect(getInput()).toHaveAttribute('placeholder', '25');
+  });
+
+  it('displays the default value as placeholder when the field as default value', () => {
+    initialize({ dataTestId: 'test', defaultValue: 25, onChange: rs.fn() });
+
+    expect(getInput()).toHaveValue(25);
+    // The value only: no placeholder behind it.
+    expect(getInput()).not.toHaveAttribute('placeholder');
+  });
+
+  it('displays the fallback value when the field is cleared out', async () => {
+    const onChange = rs.fn();
+
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      fallbackValue: 10,
+      onChange
+    });
+
+    expect(getInput()).toHaveValue(25);
+    await userEvent.clear(getInput());
+    await waitFor(() => {
+      expect(getInput()).toHaveValue(null);
+    });
+    expect(getInput()).toHaveAttribute('placeholder', '10');
+    expect(onChange).toHaveBeenLastCalledWith(10);
+  });
+
+  it('displays the field using auto size', async () => {
+    initialize({
+      autoSize: true,
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: rs.fn()
+    });
+
+    expect(getInput()).toHaveValue(25);
+
+    await userEvent.type(getInput(), '0');
+
+    await waitFor(() => {
+      expect(getInput()).toHaveValue(250);
+    });
+    // A narrow field sized on its value, where a field without auto size has
+    // the 178px default width.
+    expect(getFieldWidth()).toBeLessThan(100);
+  });
+
+  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', async () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: rs.fn(),
+      textFieldSlotsAndSlotProps: {
+        slotProps: {
+          htmlInput: {
+            min: 2
+          }
+        }
+      }
+    });
+
+    expect(getInput()).toHaveValue(25);
+
+    await userEvent.clear(getInput());
+    await userEvent.type(getInput(), '-1');
+
+    await waitFor(() => {
+      expect(getInput()).toHaveValue(2);
+    });
+  });
+});

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.browser.test.tsx

@@ -0,0 +1,250 @@
+import {
+  Method,
+  MultiConnectedAutocompleteField,
+  type SelectEntry,
+  TestQueryProvider
+} from '@centreon/ui';
+
+import { interceptAPIRequest, 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 i18next from 'i18next';
+import { useState } from 'react';
+import { initReactI18next } from 'react-i18next';
+
+import { labelSelectAll, labelUnSelectAll } from '../../../../translatedLabels';
+import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
+
+const optionOne = 'My Option 1';
+
+// The option list and search result the endpoint mocks return.
+const listOptions = {
+  meta: { limit: 5, page: 1, total: 5 },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' },
+    { id: 2, name: 'My Option 3' },
+    { id: 3, name: 'My Option 4' },
+    { id: 4, name: 'My Option 5' }
+  ]
+};
+
+const searchedOption = {
+  meta: { limit: 1, page: 1, total: 1 },
+  result: [{ id: 0, name: 'My Option 1' }]
+};
+
+const optionNames = listOptions.result.map(({ name }) => name);
+
+// Passed down to the multi autocomplete, though the connected field's type
+// does not declare it.
+const multiAutocompleteProps: Record<string, unknown> = {
+  disableSelectAll: false
+};
+
+const Component = (): JSX.Element => {
+  const [values, setValues] = useState<Array<SelectEntry>>([]);
+
+  return (
+    <TestQueryProvider>
+      <div style={{ paddingTop: 20 }}>
+        <MultiConnectedAutocompleteField
+          {...multiAutocompleteProps}
+          field="host.name"
+          getEndpoint={getEndpoint}
+          label={label}
+          onChange={(_, item) => setValues(item as Array<SelectEntry>)}
+          placeholder={placeholder}
+          value={values}
+        />
+      </div>
+    </TestQueryProvider>
+  );
+};
+
+const getInput = (): HTMLInputElement =>
+  document.querySelector(
+    '[data-testid="Multi Connected Autocomplete"]'
+  ) as HTMLInputElement;
+
+// The last one: a closing list can still be in the page.
+const findListOptions = async (): Promise<HTMLElement> =>
+  (await screen.findAllByRole('presentation')).at(-1) as HTMLElement;
+
+const getOptionTexts = (listOptionsElement: HTMLElement): Array<string> =>
+  within(listOptionsElement)
+    .queryAllByText(/^My Option \d$/)
+    .map((option) => option.textContent ?? '');
+
+const getOptionCheckboxes = (listOptionsElement: HTMLElement) =>
+  within(listOptionsElement).getAllByRole('checkbox');
+
+describe('Multi connected autocomplete', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  beforeEach(() => {
+    i18next.use(initReactI18next).init({
+      lng: 'en',
+      resources: {}
+    });
+
+    interceptAPIRequest({
+      alias: 'getListOptions',
+      method: Method.GET,
+      path: `${baseEndpoint}**`,
+      response: listOptions
+    });
+
+    interceptAPIRequest({
+      alias: 'getSearchedOption',
+      method: Method.GET,
+      path: `${baseEndpoint}**`,
+      query: {
+        name: 'search',
+        value: JSON.stringify({
+          $and: [{ $and: [{ 'host.name': { $lk: `%${optionOne}%` } }] }]
+        })
+      },
+      response: searchedOption
+    });
+
+    render(<Component />);
+  });
+
+  it('displays and hides the list when the user double-clicks on the input', async () => {
+    expect((await screen.findAllByText(label))[0]).toBeVisible();
+
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    await waitForRequest('@getListOptions');
+
+    expect(input).toHaveAttribute('placeholder', placeholder);
+
+    const listOptionsElement = await findListOptions();
+
+    expect(listOptionsElement).toBeVisible();
+
+    // The list re-renders its options: compared by text, not by element.
+    await waitFor(() => {
+      expect(getOptionTexts(listOptionsElement)).toEqual(optionNames);
+    });
+
+    // The count of options, the select all button and the five options
+    // unchecked.
+    expect(
+      within(listOptionsElement).getByText('5 element(s) found')
+    ).toBeVisible();
+    expect(within(listOptionsElement).getByText(labelSelectAll)).toBeVisible();
+    getOptionCheckboxes(listOptionsElement).forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+
+    await userEvent.click(input);
+
+    await waitFor(() => {
+      expect(listOptionsElement).not.toBeInTheDocument();
+    });
+
+    // No option list, and nothing selected.
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('CancelIcon')).not.toBeInTheDocument();
+  });
+
+  it('displays all options on the list when the user searches for and selects an option', async () => {
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    await waitForRequest('@getListOptions');
+
+    const listOptionsElement = await findListOptions();
+
+    expect(listOptionsElement).toBeVisible();
+
+    await userEvent.type(input, optionOne);
+
+    await waitForRequest('@getSearchedOption');
+
+    await waitFor(() => {
+      expect(listOptionsElement.querySelectorAll('li')).toHaveLength(6);
+    });
+
+    await userEvent.click(document.querySelectorAll('[type="checkbox"]')[0]);
+
+    const inputContainer = input.parentElement as HTMLElement;
+
+    expect(await within(inputContainer).findByText(optionOne)).toBeVisible();
+    expect(within(inputContainer).getByTestId('CancelIcon')).toBeVisible();
+
+    await waitForRequest('@getListOptions');
+
+    await waitFor(() => {
+      expect(listOptionsElement.querySelectorAll('li')).toHaveLength(
+        listOptions.result.length + 1
+      );
+    });
+
+    // The list re-renders its options: compared by text, not by element.
+    await waitFor(() => {
+      expect(getOptionTexts(listOptionsElement)).toEqual(optionNames);
+    });
+  });
+
+  it('checks all options when Select all button is clicked', async () => {
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    expect(await screen.findByText('5 element(s) found')).toBeInTheDocument();
+
+    await waitForRequest('@getListOptions');
+
+    await userEvent.click(await screen.findByText(labelSelectAll));
+
+    expect(await screen.findByText(labelUnSelectAll)).toBeVisible();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('CancelIcon')).toHaveLength(5);
+    });
+
+    // A chip per option in the field, in order, and every option checked.
+    expect(
+      within(input.parentElement as HTMLElement)
+        .getAllByText(/^My Option \d$/)
+        .map((chip) => chip.textContent)
+    ).toEqual(optionNames);
+    getOptionCheckboxes(await findListOptions()).forEach((checkbox) => {
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  it('unchecks all options when unSelect all button is clicked', async () => {
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    expect(await screen.findByText('5 element(s) found')).toBeInTheDocument();
+
+    await waitForRequest('@getListOptions');
+
+    await userEvent.click(await screen.findByText(labelSelectAll));
+    await userEvent.click(await screen.findByText(labelUnSelectAll));
+
+    expect(await screen.findByText(labelSelectAll)).toBeVisible();
+
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('CancelIcon')).toHaveLength(0);
+    });
+
+    // The field is empty and every option unchecked.
+    expect(input).toHaveAttribute('placeholder', placeholder);
+    getOptionCheckboxes(await findListOptions()).forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+});

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -8,6 +8,8 @@ import {
   resetMocks,
   waitFor
 } from '../../../../../test/testRenderer';
+import fetchMock from 'jest-fetch-mock';
+
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import type {
   BuildListingEndpointParameters,
@@ -127,4 +129,39 @@ describe(SingleConnectedAutocompleteField, () => {
       );
     });
   });
+
+  it('leaves no request rejected unhandled when it is closed while its options load', async () => {
+    const unhandledRejections: Array<unknown> = [];
+    const onUnhandledRejection = (reason: unknown): void => {
+      unhandledRejections.push(reason);
+    };
+
+    process.on('unhandledRejection', onUnhandledRejection);
+
+    try {
+      // Options that never arrive: the request is still running at unmount,
+      // which cancels it.
+      fetchMock.mockResponse(() => new Promise(() => undefined));
+
+      const { getByLabelText, unmount } =
+        renderSingleConnectedAutocompleteField();
+
+      fireEvent.click(getByLabelText('Open'));
+
+      await waitFor(() => {
+        expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+      });
+
+      unmount();
+
+      // Unhandled rejections are reported once the microtask queue drains.
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      expect(unhandledRejections).toEqual([]);
+    } finally {
+      process.off('unhandledRejection', onUnhandledRejection);
+    }
+  });
 });