@centreon/ui 26.12.3 → 26.12.5

package/package.json

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

package/src/Form/Form.tsx

@@ -4,7 +4,7 @@ import {
   type FormikSharedConfig,
   type FormikValues
 } from 'formik';
-import type { ComponentType } from 'react';
+import { type ComponentType, useRef } from 'react';
 import type { Schema } from 'yup';
 
 import { useStyles } from './Form.styles';
@@ -55,6 +55,7 @@ const Form = <T extends object>({
   ...formikSharedConfig
 }: FormProps<T>): JSX.Element => {
   const { cx, classes } = useStyles();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   if (isLoading) {
     return (
@@ -79,8 +80,8 @@ const Form = <T extends object>({
       validationSchema={validationSchema}
       {...formikSharedConfig}
     >
-      <div>
-        <FormSection groups={groups} />
+      <div ref={containerRef}>
+        <FormSection containerRef={containerRef} groups={groups} />
         {children}
         <div className={cx(className, classes.form)}>
           <Inputs

package/src/Form/Section/FormSection.browser.test.tsx

@@ -0,0 +1,174 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { object } from 'yup';
+
+import { Form } from '../Form';
+import { InputType } from '../Inputs/models';
+
+const sectionNames = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'];
+
+const SectionContent = (): JSX.Element => <div style={{ height: 400 }} />;
+
+const groups = sectionNames.map((name, index) => ({
+  name,
+  order: index + 1
+}));
+
+const inputs = sectionNames.map((name) => ({
+  custom: { Component: SectionContent },
+  fieldName: name,
+  group: name,
+  label: name,
+  type: InputType.Custom
+}));
+
+const FormInScrollArea = ({ testId }: { testId: string }): JSX.Element => (
+  <div
+    data-testid={testId}
+    style={{ height: 300, overflowY: 'auto', position: 'relative' }}
+  >
+    <Form
+      groups={groups}
+      initialValues={{}}
+      inputs={inputs}
+      submit={rs.fn()}
+      validationSchema={object()}
+    />
+  </div>
+);
+
+const getScrollArea = (testId = 'scroll-area'): HTMLElement =>
+  screen.getByTestId(testId);
+
+const getTab = (name: string, testId = 'scroll-area'): HTMLElement =>
+  within(getScrollArea(testId)).getByRole('tab', { name });
+
+const getSelectedTabs = (testId = 'scroll-area'): Array<string> =>
+  within(getScrollArea(testId))
+    .getAllByRole('tab')
+    .filter((tab) => tab.getAttribute('aria-selected') === 'true')
+    .map((tab) => tab.getAttribute('aria-label') as string);
+
+const scrollToSection = (name: string, testId = 'scroll-area'): void => {
+  const scrollArea = getScrollArea(testId);
+  const anchor = within(scrollArea).getByTestId(`${name}-header`);
+
+  scrollArea.scrollTop +=
+    anchor.getBoundingClientRect().top -
+    scrollArea.getBoundingClientRect().top -
+    48;
+};
+
+describe('Form section navigation', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('activates the first tab when the form is displayed', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+
+    expect(await screen.findByRole('tab', { name: 'Alpha' })).toBeVisible();
+    expect(getSelectedTabs()).toStrictEqual(['Alpha']);
+  });
+
+  it('activates the tab of the section in view when the form is scrolled down then up', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    scrollToSection('Charlie');
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Charlie']);
+    });
+
+    scrollToSection('Bravo');
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Bravo']);
+    });
+  });
+
+  it('activates the last tab when the form is scrolled to the bottom', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    const scrollArea = getScrollArea();
+    scrollArea.scrollTop = scrollArea.scrollHeight;
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Echo']);
+    });
+  });
+
+  it('scrolls to the section and keeps its tab active all along when a tab is clicked', async () => {
+    render(<FormInScrollArea testId="scroll-area" />);
+    await screen.findByRole('tab', { name: 'Alpha' });
+
+    const tablist = within(getScrollArea()).getByRole('tablist');
+    const selectedWhileScrolling = new Set<string>();
+    const observer = new MutationObserver(() => {
+      for (const tab of getSelectedTabs()) {
+        selectedWhileScrolling.add(tab);
+      }
+    });
+    observer.observe(tablist, {
+      attributeFilter: ['aria-selected'],
+      attributes: true,
+      subtree: true
+    });
+
+    await userEvent.click(getTab('Delta'));
+
+    await waitFor(() => {
+      expect(getScrollArea().scrollTop).toBeGreaterThan(0);
+    });
+    await waitFor(() => {
+      expect(
+        within(getScrollArea())
+          .getByTestId('Delta-header')
+          .getBoundingClientRect().top -
+          getScrollArea().getBoundingClientRect().top
+      ).toBeLessThan(100);
+    });
+
+    // Reaching the section is not the end of the smooth scroll: keep observing
+    // until the scroll position stops moving.
+    let previousScrollTop = -1;
+    await waitFor(() => {
+      const { scrollTop } = getScrollArea();
+      const hasStopped = scrollTop === previousScrollTop;
+      previousScrollTop = scrollTop;
+
+      expect(hasStopped).toBe(true);
+    });
+    observer.disconnect();
+
+    await waitFor(() => {
+      expect(getSelectedTabs()).toStrictEqual(['Delta']);
+    });
+    expect([...selectedWhileScrolling]).toStrictEqual(['Delta']);
+  });
+
+  it('only scrolls its own form when two forms share the same group names', async () => {
+    render(
+      <>
+        <FormInScrollArea testId="first-form" />
+        <FormInScrollArea testId="second-form" />
+      </>
+    );
+    await waitFor(() => {
+      expect(screen.getAllByRole('tab', { name: 'Alpha' })).toHaveLength(2);
+    });
+
+    await userEvent.click(getTab('Charlie', 'second-form'));
+
+    await waitFor(() => {
+      expect(getScrollArea('second-form').scrollTop).toBeGreaterThan(0);
+    });
+
+    expect(getScrollArea('first-form').scrollTop).toBe(0);
+    expect(getSelectedTabs('first-form')).toStrictEqual(['Alpha']);
+  });
+});

package/src/Form/Section/FormSection.tsx

@@ -1,22 +1,35 @@
 import { Box, type TabsProps } from '@mui/material';
 
 import { isNil } from 'ramda';
-import { useMemo } from 'react';
+import { type RefObject, useMemo } from 'react';
 
 import { Tabs } from '../../components/Tabs';
 import type { Group } from '../Inputs/models';
-import { useNavigateToSection } from './navigateToSection';
 import { groupToTab } from './PanelTabs';
+import { useActiveSection } from './useActiveSection';
 
 export interface FormSectionProps extends TabsProps {
+  containerRef: RefObject<HTMLElement | null>;
   groups?: Array<Group>;
 }
 
-const FormSection = ({ groups }: FormSectionProps) => {
-  const navigateToSection = useNavigateToSection();
+const FormSection = ({ groups, containerRef }: FormSectionProps) => {
   const tabMemo = useMemo(() => groupToTab(groups), [groups]);
 
-  if (isNil(groups) || groups.length < 4) {
+  const hasTabs = !isNil(groups) && groups.length >= 4;
+
+  const sectionNames = useMemo(
+    () => tabMemo.map(({ value }) => value),
+    [tabMemo]
+  );
+
+  const { activeSection, goToSection } = useActiveSection({
+    containerRef,
+    isEnabled: hasTabs,
+    sectionNames
+  });
+
+  if (!hasTabs) {
     return null;
   }
 
@@ -24,8 +37,9 @@ const FormSection = ({ groups }: FormSectionProps) => {
     <Box className="sticky top-0 bg-background-paper z-100">
       <Tabs
         defaultTab={tabMemo[0].value}
-        onChange={navigateToSection}
+        onChange={goToSection}
         scrollButtons={false}
+        selectedTab={activeSection}
         tabs={tabMemo}
         variant="scrollable"
       />

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/components/Header/PageHeader/PageHeader.stories.tsx

@@ -51,6 +51,15 @@ export const WithDescription: Story = {
   render: Default.render
 };
 
+export const WithInlineDescription: Story = {
+  args: {
+    description: 'Configure the hosts monitored by your platform',
+    descriptionPosition: 'inline',
+    title: 'Hosts'
+  },
+  render: Default.render
+};
+
 export const WithMenu: Story = {
   args: {
     ...WithDescription.args,

package/src/components/Header/PageHeader/PageHeaderMain.tsx

@@ -7,9 +7,11 @@ type PageHeaderMainProps = {
 };
 
 const PageHeaderMain = ({ children }: PageHeaderMainProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
-  return <div className={classes.pageHeaderMain}>{children}</div>;
+  return (
+    <div className={cx(classes.pageHeaderMain, 'min-w-0')}>{children}</div>
+  );
 };
 
 export { PageHeaderMain };

package/src/components/Header/PageHeader/PageHeaderTitle.tsx

@@ -8,37 +8,80 @@ import { useStyles } from './PageHeader.styles';
 type PageHeaderTitleProps = {
   actions?: ReactNode;
   description?: string;
+  descriptionPosition?: 'below' | 'inline';
   title: string;
 };
 
 const PageHeaderTitle = ({
   actions,
   title,
-  description
+  description,
+  descriptionPosition = 'below'
 }: PageHeaderTitleProps): ReactElement => {
   const { classes } = useStyles();
 
+  const isInline = descriptionPosition === 'inline';
+
+  const descriptionElement = description && (
+    <TextOverflowTooltip label={description}>
+      <MuiTypography
+        aria-label="page header description"
+        className={classes.pageHeaderTitleDescription}
+        variant="body2"
+      >
+        {description}
+      </MuiTypography>
+    </TextOverflowTooltip>
+  );
+
+  // Inline, the title owns its typography: the `pageHeaderTitle` rules that
+  // style the `h1` of the stacked layout only apply to that layout.
+  const titleElement = isInline ? (
+    <MuiTypography
+      aria-label="page header title"
+      className="m-0 shrink-0 font-bold leading-none"
+      component="h1"
+      variant="h5"
+    >
+      {title}
+    </MuiTypography>
+  ) : (
+    <MuiTypography aria-label="page header title" variant="h1">
+      {title}
+    </MuiTypography>
+  );
+
+  const actionsElement = actions && (
+    <div className={classes.pageHeaderTitleActions}>{actions}</div>
+  );
+
+  if (isInline) {
+    return (
+      <div className="flex min-w-0 items-baseline gap-4 self-start">
+        {titleElement}
+        {description && (
+          <>
+            <span
+              aria-hidden
+              className="shrink-0 text-2xl font-light leading-none text-header-page-description"
+            >
+              |
+            </span>
+            <div className="min-w-0">{descriptionElement}</div>
+          </>
+        )}
+        {actionsElement}
+      </div>
+    );
+  }
+
   return (
     <div className={classes.pageHeaderTitle}>
       <span>
-        <MuiTypography aria-label="page header title" variant="h1">
-          {title}
-        </MuiTypography>
-        {actions && (
-          <div className={classes.pageHeaderTitleActions}>{actions}</div>
-        )}
+        {titleElement}
+        {actionsElement}
       </span>
-      {description && (
-        <TextOverflowTooltip label={description}>
-          <MuiTypography
-            aria-label="page header description"
-            className={classes.pageHeaderTitleDescription}
-            variant="body2"
-          >
-            {description}
-          </MuiTypography>
-        </TextOverflowTooltip>
-      )}
+      {descriptionElement}
     </div>
   );
 };

package/src/components/Tabs/Tabs.tsx

@@ -15,6 +15,7 @@ export interface TabI {
 type Props = {
   children?: Array<JSX.Element>;
   defaultTab: string;
+  selectedTab?: string;
   tabList?: TabsProps;
   variant?: 'standard' | 'scrollable' | 'fullWidth';
   scrollButtons?: boolean | 'auto';
@@ -25,6 +26,7 @@ type Props = {
 export const Tabs = ({
   children,
   defaultTab,
+  selectedTab: controlledTab,
   tabs,
   tabList,
   variant,
@@ -33,7 +35,11 @@ export const Tabs = ({
 }: Props): JSX.Element => {
   const { classes } = useTabsStyles();
 
-  const [selectedTab, setSelectedTab] = useState(defaultTab);
+  const [internalTab, setSelectedTab] = useState(defaultTab);
+
+  // The parent drives the tab when it passes one (e.g. a form following its
+  // scroll); otherwise the tab keeps its own state.
+  const selectedTab = controlledTab ?? internalTab;
 
   const changeTab = useCallback(
     (_: React.SyntheticEvent, newValue: string): void => {