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

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,5 +1,8 @@
 /* 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';

package/src/components/Header/Header.stories.tsx

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Settings as SettingsIcon } from '@mui/icons-material';
-
-import { IconButton } from '../Button';
-
-import { Header } from './Header';
-
-const meta: Meta<typeof Header> = {
-  component: Header
-};
-
-export default meta;
-type Story = StoryObj<typeof Header>;
-
-export const Default: Story = {
-  args: {
-    title: 'Header'
-  }
-};
-
-export const WithNav: Story = {
-  args: {
-    nav: <IconButton icon={<SettingsIcon />} size="small" variant="ghost" />,
-    title: 'Header with nav'
-  }
-};

package/src/components/Header/Header.tsx

@@ -1,23 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { Typography as MuiTypography } from '@mui/material';
-
-import { useStyles } from './Header.styles';
-
-type HeaderProps = {
-  nav?: ReactNode;
-  title: string;
-};
-
-const Header = ({ title, nav }: HeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <header className={classes.header}>
-      <MuiTypography variant="h1">{title}</MuiTypography>
-      {nav && <nav>{nav}</nav>}
-    </header>
-  );
-};
-
-export { Header };

package/src/layout/TiledListingPage/TiledListingActions.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { useTiledListingActionsStyles } from './TiledListingPage.styles';
-
-interface TiledListingActionsProps {
-  children: Array<ReactNode> | ReactNode;
-}
-
-export const TiledListingActions = ({
-  children
-}: TiledListingActionsProps): JSX.Element => {
-  const { classes } = useTiledListingActionsStyles();
-
-  return <div className={classes.actions}>{children}</div>;
-};

package/src/layout/TiledListingPage/TiledListingContent.tsx

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-
-import Responsive from '../../Responsive';
-
-import { useTiledListingActionsStyles } from './TiledListingPage.styles';
-
-interface TiledListingContentProps {
-  children: ReactNode;
-}
-
-export const TiledListingContent = ({
-  children
-}: TiledListingContentProps): JSX.Element => {
-  const { classes } = useTiledListingActionsStyles();
-
-  return (
-    <Responsive>
-      <div className={classes.actions}>{children}</div>
-    </Responsive>
-  );
-};

package/src/layout/TiledListingPage/TiledListingList.tsx

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-
-interface TiledListingListProps {
-  children: Array<ReactNode>;
-}
-
-export const TiledListingList = ({
-  children
-}: TiledListingListProps): JSX.Element => {
-  return <div>{children}</div>;
-};