@centreon/ui 23.10.30-MON-19324-dashboard-section-navigation.3 → 23.10.30

package/src/components/DataTable/DataTable.styles.ts

@@ -16,11 +16,6 @@ const useStyles = makeStyles()((theme) => ({
       width: '100%'
     },
     display: 'flex'
-  },
-  dataTableScrollContainer: {
-    // FIXME the global -webkit-scrollbar styles are not optimal for this component in grid variant
-    height: '100%',
-    overflowY: 'auto'
   }
 }));
 

package/src/components/DataTable/DataTable.tsx

@@ -20,14 +20,12 @@ const DataTable = ({
   const { classes } = useStyles();
 
   return (
-    <div className={classes.dataTableScrollContainer}>
-      <div
-        className={classes.dataTable}
-        data-is-empty={isEmpty}
-        data-variant={variant}
-      >
-        {children}
-      </div>
+    <div
+      className={classes.dataTable}
+      data-is-empty={isEmpty}
+      data-variant={variant}
+    >
+      {children}
     </div>
   );
 };

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -27,10 +27,7 @@ const DataTableEmptyState = ({
   const { t } = useTranslation();
 
   return (
-    <div
-      className={classes.dataTableEmptyState}
-      data-testid="data-table-empty-state"
-    >
+    <div className={classes.dataTableEmptyState}>
       <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
       <div className={classes.actions}>
         <Button

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -10,13 +10,10 @@ const useStyles = makeStyles()((theme) => ({
       justifyContent: 'space-between'
     },
     '& .MuiCardActions-root': {
-      '& > span': {
-        display: 'flex',
-        gap: theme.spacing(1)
-      },
       display: 'flex',
+      flexDirection: 'row-reverse',
+      gap: theme.spacing(1),
 
-      justifyContent: 'space-between',
       opacity: 0
     },
     '&:hover .MuiCardActions-root': {

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -7,11 +7,7 @@ import {
   CardContent as MuiCardContent,
   Typography as MuiTypography
 } from '@mui/material';
-import {
-  Delete as DeleteIcon,
-  Settings as SettingsIcon,
-  Share as ShareIcon
-} from '@mui/icons-material';
+import { Delete as DeleteIcon, Edit as EditIcon } from '@mui/icons-material';
 
 import { IconButton } from '../../Button';
 
@@ -24,7 +20,6 @@ export interface DataTableItemProps {
   onClick?: () => void;
   onDelete?: () => void;
   onEdit?: () => void;
-  onEditAccessRights?: () => void;
   title: string;
 }
 
@@ -37,8 +32,7 @@ const DataTableItem = forwardRef(
       hasActions = false,
       onClick,
       onEdit,
-      onDelete,
-      onEditAccessRights
+      onDelete
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -63,34 +57,22 @@ const DataTableItem = forwardRef(
         </ActionArea>
         {hasActions && (
           <MuiCardActions>
-            <span>
-              <IconButton
-                aria-label="delete"
-                data-testid="delete"
-                icon={<DeleteIcon />}
-                size="small"
-                variant="ghost"
-                onClick={() => onDelete?.()}
-              />
-            </span>
-            <span>
-              <IconButton
-                aria-label="edit access rights"
-                data-testid="edit-access-rights"
-                icon={<ShareIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEditAccessRights?.()}
-              />
-              <IconButton
-                aria-label="edit"
-                data-testid="edit"
-                icon={<SettingsIcon />}
-                size="small"
-                variant="primary"
-                onClick={() => onEdit?.()}
-              />
-            </span>
+            <IconButton
+              aria-label="edit"
+              data-testid="edit"
+              icon={<EditIcon />}
+              size="small"
+              variant="primary"
+              onClick={() => onEdit?.()}
+            />
+            <IconButton
+              aria-label="delete"
+              data-testid="delete"
+              icon={<DeleteIcon />}
+              size="small"
+              variant="ghost"
+              onClick={() => onDelete?.()}
+            />
           </MuiCardActions>
         )}
       </MuiCard>

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

@@ -0,0 +1,27 @@
+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.styles.ts

@@ -0,0 +1,27 @@
+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',
+    marginBottom: theme.spacing(2.5),
+
+    nav: {
+      display: 'flex',
+      gap: theme.spacing(1),
+      justifyContent: 'flex-end'
+    },
+
+    padding: theme.spacing(0, 0, 1.5, 0)
+  }
+}));
+
+export { useStyles };

package/src/components/Header/Header.tsx

@@ -0,0 +1,23 @@
+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/components/Header/index.ts

@@ -1 +1 @@
-export * from './PageHeader';
+export * from './Header';

package/src/components/Modal/index.ts

@@ -8,5 +8,3 @@ export const Modal = Object.assign(ModalRoot, {
   Body: ModalBody,
   Header: ModalHeader
 });
-
-export type { ModalActionsLabels } from './ModalActions';

package/src/components/index.ts

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

package/src/index.ts

@@ -140,6 +140,8 @@ 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/layout/TiledListingPage/TiledListingActions.tsx

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,21 @@
+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

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

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,10 +64,7 @@ const meta: Meta = {
     },
     title: 'Dashboards overview'
   },
-  parameters: {
-    layout: 'fullscreen'
-  },
-  title: 'screens/Dashboards overview'
+  title: 'screens/Dashboards'
 };
 
 export default meta;
@@ -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/src/utils/index.ts

@@ -14,4 +14,4 @@ export * from './useMemoComponent';
 export * from './useThemeMode';
 export * from './useViewportIntersection';
 export * from './panelSize';
-export * from './sanitizedHTML';
+export { default as sanitizedHTML } from './sanitizedHTML';

package/src/utils/sanitizedHTML.ts

@@ -15,4 +15,4 @@ const sanitizedHTML = ({
   return ReactHtmlParser(sanitizedContent);
 };
 
-export { sanitizedHTML };
+export default sanitizedHTML;

package/test/setupTests.js

@@ -1,8 +1,5 @@
 /* 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/base/tokens/README.md

@@ -1,3 +0,0 @@
-`// TODO`
-
-- [ ] integrate design tokens with MUI ThemeProvider

package/src/base/tokens/source/$metadata.json

@@ -1,5 +0,0 @@
-{
-  "tokenSetOrder": [
-    "base"
-  ]
-}