@centreon/ui 23.10.24 → 23.10.25-feature-MON-19319.0

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.stories.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect, useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+// import { expect } from '@storybook/jest';
+import { TextOverflowTooltip } from './TextOverflowTooltip';
+
+const meta: Meta<typeof TextOverflowTooltip> = {
+  args: {},
+  component: TextOverflowTooltip,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof TextOverflowTooltip>;
+
+export const Default: Story = {
+  args: {
+    label:
+      'Qui deserunt pariatur quis. Duis nisi velit culpa labore ipsum reprehenderit sunt laborum anim sint quis magna consequat amet. Voluptate tempor nostrud eiusmod enim qui reprehenderit.'
+  },
+  render: ({ label, ...args }) => {
+    const [labelValue, setLabelValue] = useState(label);
+    useEffect(() => setLabelValue(label), [label]);
+
+    return (
+      <TextOverflowTooltip {...args} data-testid="tooltip" label={labelValue}>
+        <p
+          data-testid="paragraph"
+          style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '40vw'
+          }}
+        >
+          {labelValue}
+        </p>
+      </TextOverflowTooltip>
+    );
+  }
+};
+
+export const AsMultiLine: Story = {
+  args: {
+    ...Default.args
+  },
+  render: ({ label, ...args }) => {
+    const [labelValue, setLabelValue] = useState(label);
+    useEffect(() => setLabelValue(label), [label]);
+
+    return (
+      <TextOverflowTooltip {...args} label={labelValue}>
+        <p
+          style={{
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: '2',
+            display: '-webkit-box',
+            overflow: 'hidden',
+            width: '40vw'
+          }}
+        >
+          {labelValue}
+        </p>
+      </TextOverflowTooltip>
+    );
+  }
+};

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.styles.ts

@@ -0,0 +1,5 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(() => ({
+  textOverflowTooltip: {}
+}));

package/src/components/Tooltip/TextOverflowTooltip/TextOverflowTooltip.tsx

@@ -0,0 +1,115 @@
+import { ReactElement, useCallback, useEffect, useRef } from 'react';
+
+import { atom, useAtom } from 'jotai';
+
+import { Tooltip, TooltipProps } from '../Tooltip';
+import { useResizeObserver } from '../../../utils/useResizeObserver';
+
+import { useStyles } from './TextOverflowTooltip.styles';
+
+type TextOverflowTooltipProps = Omit<TooltipProps, 'followCursor' | 'hasCaret'>;
+
+/** @description
+ * This component is used to display a tooltip when the text is too long, and displays the full text on hover.
+ *
+ * It's up to the child component to define it's `width` / `max-width`, and ellipsis.
+ *
+ * For single lines use :
+ * ```
+ *  width: var(--width-of-the-text);
+ *  white-space: nowrap;
+ * ```
+ *
+ * For multi-lines use :
+ * ```
+ *  width: var(--width-of-the-text);
+ *  display: -webkit-box;
+ *  -webkit-box-orient: vertical;
+ *  -webkit-line-clamp: var(--max-lines-of-the-text);
+ * ```
+ */
+
+const TextOverflowTooltip = ({
+  children,
+  label,
+  position = 'bottom',
+  isOpen,
+  ...tooltipProps
+}: TextOverflowTooltipProps): ReactElement => {
+  const { classes } = useStyles();
+
+  const stateAtom = useRef(
+    atom<{
+      hasOverflow: boolean;
+      isOpen: boolean;
+    }>({ hasOverflow: false, isOpen: false })
+  ).current;
+
+  const [state, setState] = useAtom(stateAtom);
+
+  const onMouseEnter = useCallback(
+    () =>
+      state.hasOverflow &&
+      setState({
+        ...state,
+        isOpen: true
+      }),
+    [state.hasOverflow]
+  );
+
+  const onMouseLeave = useCallback(
+    () =>
+      state.hasOverflow &&
+      setState({
+        ...state,
+        isOpen: false
+      }),
+    [state.hasOverflow]
+  );
+
+  const elRef = useRef<HTMLDivElement>(null);
+
+  const onResize = (): void => {
+    const { firstElementChild: el } = elRef.current || {};
+    if (el instanceof HTMLElement) {
+      setState({
+        ...state,
+        hasOverflow:
+          el.scrollWidth > el.offsetWidth || el.scrollHeight > el.offsetHeight
+      });
+    }
+  };
+
+  useResizeObserver({
+    onResize,
+    ref: elRef
+  });
+
+  useEffect(() => {
+    if (isOpen) setState({ ...state, isOpen });
+    onResize();
+  }, [isOpen, label]);
+
+  return (
+    <Tooltip
+      followCursor
+      hasCaret={false}
+      isOpen={state.isOpen}
+      label={label}
+      position={position}
+      {...tooltipProps}
+    >
+      <div
+        className={classes.textOverflowTooltip}
+        data-has-overflow={state.hasOverflow}
+        ref={elRef}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+};
+
+export { TextOverflowTooltip };

package/src/components/Tooltip/TextOverflowTooltip/index.tsx

@@ -0,0 +1 @@
+export * from './TextOverflowTooltip';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Info as InfoIcon } from '@mui/icons-material';
+
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  argTypes: {
+    position: {
+      control: {
+        options: ['top', 'bottom', 'left', 'right']
+      }
+    }
+  },
+  component: Tooltip,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    children: <InfoIcon />,
+    label: 'Tooltip content'
+  }
+};
+
+export const WrappedContent: Story = {
+  args: {
+    children: <InfoIcon />,
+    followCursor: false,
+    hasCaret: true,
+    isOpen: true,
+    label:
+      'Qui deserunt pariatur quis. Duis nisi velit culpa labore ipsum reprehenderit sunt laborum anim sint quis magna consequat amet. Voluptate tempor nostrud eiusmod enim qui reprehenderit.',
+    position: 'right'
+  }
+};

package/src/components/Tooltip/Tooltip.styles.ts

@@ -0,0 +1,5 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(() => ({
+  tooltip: {}
+}));

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,46 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { Tooltip as MuiTooltip } from '@mui/material';
+
+import { AriaLabelingAttributes } from '../../@types/aria-attributes';
+import { DataTestAttributes } from '../../@types/data-attributes';
+
+import { useStyles } from './Tooltip.styles';
+
+export type TooltipProps = {
+  children: ReactElement;
+  followCursor?: boolean;
+  hasCaret?: boolean;
+  isOpen?: boolean;
+  label: ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+} & AriaLabelingAttributes &
+  DataTestAttributes;
+
+const Tooltip = ({
+  children,
+  label,
+  position = 'bottom',
+  followCursor = true,
+  isOpen,
+  hasCaret = false,
+  ...attr
+}: TooltipProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiTooltip
+      arrow={hasCaret}
+      className={classes.tooltip}
+      followCursor={followCursor}
+      open={isOpen}
+      placement={position}
+      title={label}
+      {...attr}
+    >
+      {children}
+    </MuiTooltip>
+  );
+};
+
+export { Tooltip };

package/src/components/Tooltip/index.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/src/components/index.ts

@@ -3,3 +3,5 @@ export * from './Modal';
 export * from './Form';
 export * from './Header';
 export * from './DataTable';
+export * from './Layout';
+export * from './Tooltip';

package/src/index.ts

@@ -140,8 +140,6 @@ export { default as ActionsList } from './ActionsList';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
 
-export * from './layout/TiledListingPage';
-
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';

package/src/screens/dashboard/DashboardsOverview.stories.tsx

@@ -11,16 +11,11 @@ import {
   DashboardForm,
   DashboardFormProps,
   DataTable,
-  Header,
-  Modal
+  Modal,
+  PageHeader,
+  PageLayout
 } from '../../components';
 import { Default as DashboardFormDefaultStory } from '../../components/Form/Dashboard/DashboardForm.stories';
-import {
-  TiledListingActions,
-  TiledListingContent,
-  TiledListingList,
-  TiledListingPage
-} from '../../layout/TiledListingPage';
 
 const meta: Meta = {
   args: {
@@ -64,6 +59,9 @@ const meta: Meta = {
     },
     title: 'Dashboards overview'
   },
+  parameters: {
+    layout: 'fullscreen'
+  },
   title: 'screens/Dashboards'
 };
 
@@ -134,10 +132,16 @@ const DefaultView = (args): JSX.Element => {
   };
 
   return (
-    <TiledListingPage>
-      <Header title={title} />
-      <TiledListingList>
-        <TiledListingActions>
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Title title={title} />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
           {dataDashboards.length !== 0 && (
             <Button
               aria-label="add"
@@ -150,101 +154,105 @@ const DefaultView = (args): JSX.Element => {
               {actions.create.label}
             </Button>
           )}
-        </TiledListingActions>
-        <TiledListingContent>
-          <DataTable isEmpty={dataDashboards.length === 0}>
-            {dataDashboards.length === 0 ? (
-              <DataTable.EmptyState
-                labels={list.emptyState.labels}
-                onCreate={() =>
-                  setDialogState({ item: null, open: true, variant: 'create' })
-                }
-              />
-            ) : (
-              dataDashboards.map((dashboard) => (
-                <DataTable.Item
-                  hasActions
-                  hasCardAction
-                  description={dashboard.description}
-                  key={dashboard.id}
-                  title={dashboard.name}
-                  onDelete={() =>
-                    setDeleteDialogState({ item: dashboard, open: true })
-                  }
-                  onEdit={() =>
-                    setDialogState({
-                      item: dashboard,
-                      open: true,
-                      variant: 'update'
-                    })
-                  }
-                />
-              ))
-            )}
-          </DataTable>
-        </TiledListingContent>
-        <Modal
-          open={dialogState.open}
-          onClose={() =>
-            setDialogState({
-              item: null,
-              open: false,
-              variant: dialogState.variant
-            })
-          }
-        >
-          <Modal.Header>
-            {form.labels.title[dialogState.variant ?? 'create']}
-          </Modal.Header>
-          <Modal.Body>
-            <DashboardForm
-              labels={DashboardFormDefaultStory!.args!.labels!}
-              resource={dialogState.item || undefined}
-              variant={dialogState.variant}
-              onCancel={() =>
+        </PageLayout.Actions>
+
+        <DataTable isEmpty={dataDashboards.length === 0}>
+          {dataDashboards.length === 0 ? (
+            <DataTable.EmptyState
+              labels={list.emptyState.labels}
+              onCreate={() =>
                 setDialogState({
                   item: null,
-                  open: false,
-                  variant: dialogState.variant
+                  open: true,
+                  variant: 'create'
                 })
               }
-              onSubmit={(values) =>
-                dialogState.variant === 'create'
-                  ? createDashboard(values)
-                  : updateDashboard(values)
-              }
             />
-          </Modal.Body>
-        </Modal>
-        <Modal
-          open={deleteDialogState.open}
-          onClose={() =>
-            setDeleteDialogState({
-              ...deleteDialogState,
-              open: false
-            })
-          }
-        >
-          <Modal.Header>{deleteConfirmation.labels.title}</Modal.Header>
-          <Modal.Body>
-            <p>
-              {deleteConfirmation.labels.description(
-                deleteDialogState.item?.name
-              )}
-            </p>
-          </Modal.Body>
-          <Modal.Actions
-            isDanger
-            labels={deleteConfirmation.labels.actions}
-            onCancel={() => setDeleteDialogState({ item: null, open: false })}
-            onConfirm={() => {
-              deleteDashboard(deleteDialogState.item?.id);
-              setDeleteDialogState({ item: null, open: false });
-            }}
+          ) : (
+            dataDashboards.map((dashboard) => (
+              <DataTable.Item
+                hasActions
+                hasCardAction
+                description={dashboard.description}
+                key={dashboard.id}
+                title={dashboard.name}
+                onDelete={() =>
+                  setDeleteDialogState({ item: dashboard, open: true })
+                }
+                onEdit={() =>
+                  setDialogState({
+                    item: dashboard,
+                    open: true,
+                    variant: 'update'
+                  })
+                }
+              />
+            ))
+          )}
+        </DataTable>
+      </PageLayout.Body>
+
+      <Modal
+        open={dialogState.open}
+        onClose={() =>
+          setDialogState({
+            item: null,
+            open: false,
+            variant: dialogState.variant
+          })
+        }
+      >
+        <Modal.Header>
+          {form.labels.title[dialogState.variant ?? 'create']}
+        </Modal.Header>
+        <Modal.Body>
+          <DashboardForm
+            labels={DashboardFormDefaultStory!.args!.labels!}
+            resource={dialogState.item || undefined}
+            variant={dialogState.variant}
+            onCancel={() =>
+              setDialogState({
+                item: null,
+                open: false,
+                variant: dialogState.variant
+              })
+            }
+            onSubmit={(values) =>
+              dialogState.variant === 'create'
+                ? createDashboard(values)
+                : updateDashboard(values)
+            }
           />
-        </Modal>
-      </TiledListingList>
-    </TiledListingPage>
+        </Modal.Body>
+      </Modal>
+      <Modal
+        open={deleteDialogState.open}
+        onClose={() =>
+          setDeleteDialogState({
+            ...deleteDialogState,
+            open: false
+          })
+        }
+      >
+        <Modal.Header>{deleteConfirmation.labels.title}</Modal.Header>
+        <Modal.Body>
+          <p>
+            {deleteConfirmation.labels.description(
+              deleteDialogState.item?.name
+            )}
+          </p>
+        </Modal.Body>
+        <Modal.Actions
+          isDanger
+          labels={deleteConfirmation.labels.actions}
+          onCancel={() => setDeleteDialogState({ item: null, open: false })}
+          onConfirm={() => {
+            deleteDashboard(deleteDialogState.item?.id);
+            setDeleteDialogState({ item: null, open: false });
+          }}
+        />
+      </Modal>
+    </PageLayout>
   );
 };
 

package/src/utils/useResizeObserver.ts

@@ -0,0 +1,6 @@
+// https://github.com/ZeeCoder/use-resize-observer
+import useResizeObserver from 'use-resize-observer';
+
+export * from 'use-resize-observer';
+
+export { useResizeObserver };

package/test/setupTests.js

@@ -1,42 +1,45 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable no-undef */
+// FIXME: testing library setup
+// import '@testing-library/jest-dom';
+// import '@testing-library/react';
 // import '@testing-library/jest-dom/extend-expect';
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import fetchMock from 'jest-fetch-mock';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import fetchMock from "jest-fetch-mock";
 
 const mockedMatchMedia = () => ({
   addListener: () => {},
   matches: false,
-  removeListener: () => {}
+  removeListener: () => {},
 });
 
 window.matchMedia = window.matchMedia || mockedMatchMedia;
 
 document.createRange = () => ({
   commonAncestorContainer: {
-    nodeName: 'BODY',
-    ownerDocument: document
+    nodeName: "BODY",
+    ownerDocument: document,
   },
   setEnd: () => {},
-  setStart: () => {}
+  setStart: () => {},
 });
 
 global.IntersectionObserver = class IntersectionObserver {
   observe() {
-    this.a = '';
+    this.a = "";
 
     return null;
   }
 
   disconnect() {
-    this.a = '';
+    this.a = "";
 
     return null;
   }
 };
 
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(window, "matchMedia", {
   value: jest.fn().mockImplementation((query) => ({
     addEventListener: jest.fn(),
     addListener: jest.fn(),
@@ -45,42 +48,42 @@ Object.defineProperty(window, 'matchMedia', {
     media: query,
     onchange: null,
     removeEventListener: jest.fn(),
-    removeListener: jest.fn()
+    removeListener: jest.fn(),
   })),
-  writable: true
+  writable: true,
 });
 
-Object.defineProperty(Image.prototype, 'onload', {
+Object.defineProperty(Image.prototype, "onload", {
   get() {
     return this._onload;
   },
   set(onload) {
     onloadRef = onload;
     this._onload = onload;
-  }
+  },
 });
-Object.defineProperty(Image.prototype, 'onerror', {
+Object.defineProperty(Image.prototype, "onerror", {
   get() {
     return this._onerror;
   },
   set(onerror) {
     onerrorRef = onerror;
     this._onerror = onerror;
-  }
+  },
 });
 
 i18n.use(initReactI18next).init({
-  fallbackLng: 'en',
+  fallbackLng: "en",
   keySeparator: false,
-  lng: 'en',
+  lng: "en",
   nsSeparator: false,
-  resources: {}
+  resources: {},
 });
 
 window.Image = () => ({
   onerror: () => {},
   onload: () => {},
-  src: null
+  src: null,
 });
 
 fetchMock.enableMocks();