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

package/src/layout/TiledListingPage/TiledListingPage.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useTiledListPageStyles = makeStyles()((theme) => ({
+  listPage: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    padding: theme.spacing(1.5)
+  }
+}));
+
+export const useTiledListingActionsStyles = makeStyles()((theme) => ({
+  actions: {
+    paddingBottom: theme.spacing(2.5)
+  }
+}));

package/src/layout/TiledListingPage/TiledListingPage.tsx

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

package/src/layout/TiledListingPage/index.ts

@@ -0,0 +1,4 @@
+export * from './TiledListingPage';
+export * from './TiledListingActions';
+export * from './TiledListingList';
+export * from './TiledListingContent';

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

@@ -11,11 +11,16 @@ import {
   DashboardForm,
   DashboardFormProps,
   DataTable,
-  Modal,
-  PageHeader,
-  PageLayout
+  Header,
+  Modal
 } from '../../components';
 import { Default as DashboardFormDefaultStory } from '../../components/Form/Dashboard/DashboardForm.stories';
+import {
+  TiledListingActions,
+  TiledListingContent,
+  TiledListingList,
+  TiledListingPage
+} from '../../layout/TiledListingPage';
 
 const meta: Meta = {
   args: {
@@ -59,9 +64,6 @@ const meta: Meta = {
     },
     title: 'Dashboards overview'
   },
-  parameters: {
-    layout: 'fullscreen'
-  },
   title: 'screens/Dashboards'
 };
 
@@ -132,16 +134,10 @@ const DefaultView = (args): JSX.Element => {
   };
 
   return (
-    <PageLayout>
-      <PageLayout.Header>
-        <PageHeader>
-          <PageHeader.Main>
-            <PageHeader.Title title={title} />
-          </PageHeader.Main>
-        </PageHeader>
-      </PageLayout.Header>
-      <PageLayout.Body>
-        <PageLayout.Actions>
+    <TiledListingPage>
+      <Header title={title} />
+      <TiledListingList>
+        <TiledListingActions>
           {dataDashboards.length !== 0 && (
             <Button
               aria-label="add"
@@ -154,105 +150,101 @@ const DefaultView = (args): JSX.Element => {
               {actions.create.label}
             </Button>
           )}
-        </PageLayout.Actions>
-
-        <DataTable isEmpty={dataDashboards.length === 0}>
-          {dataDashboards.length === 0 ? (
-            <DataTable.EmptyState
-              labels={list.emptyState.labels}
-              onCreate={() =>
+        </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={() =>
                 setDialogState({
                   item: null,
-                  open: true,
-                  variant: 'create'
+                  open: false,
+                  variant: dialogState.variant
                 })
               }
+              onSubmit={(values) =>
+                dialogState.variant === 'create'
+                  ? createDashboard(values)
+                  : updateDashboard(values)
+              }
             />
-          ) : (
-            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.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.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>
+        </Modal>
+      </TiledListingList>
+    </TiledListingPage>
   );
 };
 

package/test/setupTests.js

@@ -1,45 +1,42 @@
 /* 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(),
@@ -48,42 +45,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();

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

@@ -1,83 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  ArrowDropDown as ArrowDropDownIcon,
-  Menu as MenuIcon,
-  Settings as SettingsIcon,
-  StarOutline as StarOutlineIcon
-} from '@mui/icons-material';
-
-import { Button, IconButton } from '../../Button';
-
-import { PageHeader } from './index';
-
-type PageHeaderComponent = typeof PageHeader & typeof PageHeader.Title;
-
-const meta: Meta<typeof PageHeader> = {
-  component: PageHeader
-};
-
-export default meta;
-type Story = StoryObj<PageHeaderComponent>;
-
-export const Default: Story = {
-  args: {
-    title: 'Page header'
-  },
-  render: (args) => (
-    <PageHeader>
-      <PageHeader.Main>
-        <PageHeader.Title {...args} />
-      </PageHeader.Main>
-      <PageHeader.Actions>
-        <Button
-          icon={<SettingsIcon />}
-          iconVariant="start"
-          size="small"
-          variant="ghost"
-        >
-          Manage
-        </Button>
-      </PageHeader.Actions>
-    </PageHeader>
-  )
-};
-
-export const WithDescription: Story = {
-  args: {
-    description:
-      'Eu aliquip quis in minim laboris occaecat quis nostrud occaecat. Cupidatat consectetur non Lorem eiusmod ut cupidatat dolor enim cillum ex enim irure velit. ',
-    title: 'Nulla ex dolore tempor magna ex'
-  },
-  render: Default.render
-};
-
-export const WithMenu: Story = {
-  args: {
-    ...WithDescription.args,
-    actions: (
-      <IconButton icon={<StarOutlineIcon />} size="small" variant="ghost" />
-    )
-  },
-  render: (args) => (
-    <PageHeader>
-      <PageHeader.Main>
-        <PageHeader.Menu>
-          <MenuIcon />
-          <ArrowDropDownIcon data-size="small" />
-        </PageHeader.Menu>
-        <PageHeader.Title {...args} />
-      </PageHeader.Main>
-      <PageHeader.Actions>
-        <Button
-          icon={<SettingsIcon />}
-          iconVariant="start"
-          size="small"
-          variant="ghost"
-        >
-          Manage
-        </Button>
-      </PageHeader.Actions>
-    </PageHeader>
-  )
-};

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -1,105 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  header: {
-    alignItems: 'flex-start',
-    borderBottom: `1px solid ${theme.palette.primary.main}`,
-    display: 'flex',
-    flexDirection: 'row',
-    h1: {
-      font: 'normal normal 600 24px/24px Roboto',
-      letterSpacing: '0.18px',
-      margin: theme.spacing(0, 0, 1.5, 0)
-    },
-    justifyContent: 'space-between',
-
-    nav: {
-      display: 'flex',
-      gap: theme.spacing(1),
-      justifyContent: 'flex-end'
-    },
-
-    padding: theme.spacing(0, 0, 1.5, 0)
-  },
-  pageHeader: {
-    alignItems: 'flex-start',
-    borderBottom: `1px solid ${theme.palette.header.page.border}`,
-    display: 'flex',
-    gap: theme.spacing(4),
-    paddingBottom: theme.spacing(2)
-  },
-  pageHeaderActions: {
-    '& > button': {
-      '&:hover': {
-        backgroundColor: theme.palette.header.page.action.background.active,
-        color: theme.palette.header.page.action.color.active
-      },
-      backgroundColor: theme.palette.header.page.action.background.default,
-
-      color: theme.palette.header.page.action.color.default
-    },
-    display: 'flex',
-
-    gap: theme.spacing(2)
-  },
-  pageHeaderMain: {
-    display: 'flex',
-    flexGrow: 1,
-    gap: theme.spacing(1.5)
-  },
-  pageHeaderMenu: {
-    // TEMP
-    '& [data-size="small"]': {
-      height: '20px',
-      marginTop: theme.spacing(0.25),
-      width: '20px'
-    },
-    alignItems: 'top',
-    display: 'flex',
-    opacity: 0.5,
-    padding: theme.spacing(0.25, 0)
-  },
-  pageHeaderTitle: {
-    '& > *': {
-      display: 'grid'
-    },
-    '& > span': {
-      display: 'flex',
-      flexDirection: 'row',
-
-      gap: theme.spacing(2)
-    },
-    display: 'flex',
-
-    flexDirection: 'column',
-
-    gap: theme.spacing(1),
-
-    h1: {
-      color: theme.palette.header.page.title,
-      font: 'normal normal 700 24px/100% Roboto',
-      letterSpacing: '0.15px',
-      margin: theme.spacing(0)
-    }
-  },
-  pageHeaderTitleActions: {
-    '& > button': {
-      opacity: 0.2,
-      padding: 0
-    },
-    alignItems: 'bottom',
-    display: 'flex',
-    gap: theme.spacing(1)
-  },
-  pageHeaderTitleDescription: {
-    color: theme.palette.header.page.description,
-    font: 'normal normal 400 12px/16px Roboto',
-    letterSpacing: '0.15px',
-    maxWidth: '560px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
-  }
-}));
-
-export { useStyles };

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

@@ -1,15 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageHeader.styles';
-
-type PageHeaderProps = {
-  children?: ReactNode;
-};
-
-const PageHeader = ({ children }: PageHeaderProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <section className={classes.pageHeader}>{children}</section>;
-};
-
-export { PageHeader };

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

@@ -1,17 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageHeader.styles';
-
-type PageHeaderActionsProps = {
-  children?: ReactNode;
-};
-
-const PageHeaderActions = ({
-  children
-}: PageHeaderActionsProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <header className={classes.pageHeaderActions}>{children}</header>;
-};
-
-export { PageHeaderActions };

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

@@ -1,15 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageHeader.styles';
-
-type PageHeaderMainProps = {
-  children?: ReactNode;
-};
-
-const PageHeaderMain = ({ children }: PageHeaderMainProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <div className={classes.pageHeaderMain}>{children}</div>;
-};
-
-export { PageHeaderMain };

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

@@ -1,15 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { useStyles } from './PageHeader.styles';
-
-type PageHeaderMenuProps = {
-  children?: ReactNode;
-};
-
-const PageHeaderMenu = ({ children }: PageHeaderMenuProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return <nav className={classes.pageHeaderMenu}>{children}</nav>;
-};
-
-export { PageHeaderMenu };

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

@@ -1,44 +0,0 @@
-import React, { ReactElement, ReactNode } from 'react';
-
-import { Typography as MuiTypography } from '@mui/material';
-
-import { TextOverflowTooltip } from '../../Tooltip/TextOverflowTooltip';
-
-import { useStyles } from './PageHeader.styles';
-
-type PageHeaderTitleProps = {
-  actions?: ReactNode;
-  description?: string;
-  title: string;
-};
-
-const PageHeaderTitle = ({
-  actions,
-  title,
-  description
-}: PageHeaderTitleProps): ReactElement => {
-  const { classes } = useStyles();
-
-  return (
-    <div className={classes.pageHeaderTitle}>
-      <span>
-        <MuiTypography variant="h1">{title}</MuiTypography>
-        {actions && (
-          <div className={classes.pageHeaderTitleActions}>{actions}</div>
-        )}
-      </span>
-      {description && (
-        <TextOverflowTooltip label={description}>
-          <MuiTypography
-            className={classes.pageHeaderTitleDescription}
-            variant="body2"
-          >
-            {description}
-          </MuiTypography>
-        </TextOverflowTooltip>
-      )}
-    </div>
-  );
-};
-
-export { PageHeaderTitle };