@centreon/ui 24.4.39 → 24.4.40

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

@@ -10,9 +10,6 @@ const useStyles = makeStyles()((theme) => ({
       gridGap: theme.spacing(2.5),
       gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
     },
-    '&[data-variant="listing"]': {
-      height: '100%'
-    },
     '&[data-variant][data-is-empty="true"]': {
       display: 'flex',
       justifyContent: 'center',

package/src/components/DataTable/DataTable.tsx

@@ -1,11 +1,11 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './DataTable.styles';
 
 type DataTableProps = {
-  children?: ReactNode | Array<ReactNode>;
+  children: ReactNode | Array<ReactNode>;
   isEmpty?: boolean;
-  variant: 'grid' | 'listing';
+  variant?: 'grid';
 };
 
 /** *

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

@@ -1,18 +1,13 @@
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
-  actions: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
   dataTableItem: {
     '& .MuiCardActionArea-root': {
       alignItems: 'flex-start',
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
-      justifyContent: 'flex-start'
+      justifyContent: 'space-between'
     },
     '& .MuiCardActions-root': {
       '& > span': {
@@ -20,13 +15,13 @@ const useStyles = makeStyles()((theme) => ({
         gap: theme.spacing(1)
       },
       display: 'flex',
+
       justifyContent: 'space-between'
     },
     borderRadius: theme.shape.borderRadius,
     display: 'flex',
     flexDirection: 'column',
     height: '186px',
-    justifyContent: 'space-between',
     p: {
       color: theme.palette.text.secondary,
       letterSpacing: '0',

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

@@ -22,7 +22,7 @@ export interface DataTableItemProps {
   description?: string;
   hasActions?: boolean;
   hasCardAction?: boolean;
-  labelsDelete?: {
+  labelsDelete: {
     cancel: string;
     confirm: {
       label: string;
@@ -76,20 +76,20 @@ const DataTableItem = forwardRef(
         {hasActions && (
           <MuiCardActions>
             <span>
-              {onDelete && labelsDelete && (
+              {onDelete && (
                 <ConfirmationTooltip
                   confirmVariant="error"
                   labels={labelsDelete}
                   onConfirm={onDelete}
                 >
-                  {({ toggleTooltip }) => (
+                  {(openTooltip) => (
                     <IconButton
                       aria-label="delete"
                       data-testid="delete"
                       icon={<DeleteIcon />}
                       size="small"
                       variant="ghost"
-                      onClick={toggleTooltip}
+                      onClick={openTooltip}
                     />
                   )}
                 </ConfirmationTooltip>

package/src/components/DataTable/index.ts

@@ -2,11 +2,9 @@ import { DataTable as DataTableRoot } from './DataTable';
 import { DataTableItem } from './Item/DataTableItem';
 import { DataTableItemSkeleton } from './Item/DataTableItemSkeleton';
 import { DataTableEmptyState } from './EmptyState/DataTableEmptyState';
-import { DataListing } from './DataListing';
 
 export const DataTable = Object.assign(DataTableRoot, {
   EmptyState: DataTableEmptyState,
   Item: DataTableItem,
-  ItemSkeleton: DataTableItemSkeleton,
-  Listing: DataListing
+  ItemSkeleton: DataTableItemSkeleton
 });

package/src/components/Form/Dashboard/DashboardForm.tsx

@@ -1,8 +1,7 @@
 import { ReactElement, useCallback, useMemo } from 'react';
 
-import { string, number, object } from 'yup';
+import * as Yup from 'yup';
 import { useTranslation } from 'react-i18next';
-import { equals } from 'ramda';
 
 import { InputType } from '../../../Form/Inputs/models';
 import { Form, FormProps } from '../../../Form';
@@ -85,8 +84,8 @@ const DashboardForm = ({
         }
       ],
       submit: (values, bag) => onSubmit?.(values, bag),
-      validationSchema: object({
-        description: string()
+      validationSchema: Yup.object().shape({
+        description: Yup.string()
           .label(labels?.entity?.description || '')
           .max(
             180,
@@ -94,19 +93,17 @@ const DashboardForm = ({
               `${p.label} ${t(labelMustBeMost)} ${p.max} ${t(labelCharacters)}`
           )
           .nullable(),
-        globalRefreshInterval: object({
-          interval: number().when('type', ([type], schema) => {
-            if (equals(type, 'manual')) {
-              schema
-                .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
-                .required(t(labelRequired) as string);
-            }
-
-            return schema.nullable();
+        globalRefreshInterval: Yup.object().shape({
+          interval: Yup.number().when('type', {
+            is: 'global',
+            otherwise: Yup.number().nullable(),
+            then: Yup.number()
+              .min(1, ({ min }) => t(labelMustBeAtLeast, { min }))
+              .required(t(labelRequired) as string)
           }),
-          type: string()
+          type: Yup.string()
         }),
-        name: string()
+        name: Yup.string()
           .label(labels?.entity?.name)
           .min(3, ({ min, label }) => t(labelMustBeAtLeast, { label, min }))
           .max(50, ({ max, label }) => t(labelMustBeMost, { label, max }))

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -14,7 +14,7 @@ export const PageLayout = ({
   const { classes } = useStyles();
 
   return (
-    <section className={classes.pageLayout} data-variant={variant} id="page">
+    <section className={classes.pageLayout} data-variant={variant}>
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -17,7 +17,6 @@ export const PageLayoutActions = ({
     <section
       className={classes.pageLayoutActions}
       data-row-reverse={rowReverse}
-      id="actions"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,7 +17,6 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
-      id="page-body"
     >
       {children}
     </section>

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -11,9 +11,5 @@ export const PageLayoutHeader = ({
 }: PageLayoutHeaderProps): JSX.Element => {
   const { classes } = useStyles();
 
-  return (
-    <header className={classes.pageLayoutHeader} id="header">
-      {children}
-    </header>
-  );
+  return <header className={classes.pageLayoutHeader}>{children}</header>;
 };

package/src/components/Layout/PageLayout/index.ts

@@ -2,11 +2,9 @@ import { PageLayout as PageLayoutRoot } from './PageLayout';
 import { PageLayoutHeader } from './PageLayoutHeader';
 import { PageLayoutBody } from './PageLayoutBody';
 import { PageLayoutActions } from './PageLayoutActions';
-import { PageQuickAccess } from './PageQuickAccess';
 
 export const PageLayout = Object.assign(PageLayoutRoot, {
   Actions: PageLayoutActions,
   Body: PageLayoutBody,
-  Header: PageLayoutHeader,
-  QuickAccess: PageQuickAccess
+  Header: PageLayoutHeader
 });

package/src/components/Modal/Modal.styles.ts

@@ -57,7 +57,7 @@ const useStyles = makeStyles<{
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    right: theme.spacing(2.5)
+    right: theme.spacing(2)
   },
   modalBody: {
     '& > p': {

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

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof ConfirmationTooltip>;
 
 export const Default: Story = {
   args: {
-    children: ({ toggleTooltip }) => (
+    children: (toggleTooltip) => (
       <IconButton icon={<SaveIcon />} onClick={toggleTooltip} />
     ),
     labels: {
@@ -30,7 +30,7 @@ export const Default: Story = {
 
 export const WithConfirmVariant: Story = {
   args: {
-    children: ({ toggleTooltip }) => (
+    children: (toggleTooltip) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',
@@ -46,7 +46,7 @@ export const WithConfirmVariant: Story = {
 
 export const WithSecondaryLabel: Story = {
   args: {
-    children: ({ toggleTooltip }) => (
+    children: (toggleTooltip) => (
       <IconButton icon={<DeleteIcon color="error" />} onClick={toggleTooltip} />
     ),
     confirmVariant: 'error',

package/src/components/Tooltip/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -49,7 +49,7 @@ export const ConfirmationTooltip = ({
   return (
     <ClickAwayListener onClickAway={close}>
       <div>
-        {children({ isOpen, toggleTooltip: isOpen ? close : open })}
+        {children(isOpen ? close : open)}
         <Popper
           anchorEl={anchorElement}
           className={classes.popper}

package/src/components/Tooltip/ConfirmationTooltip/models.ts

@@ -11,7 +11,7 @@ interface Labels {
 }
 
 export interface Props {
-  children: ({ toggleTooltip, isOpen }) => ReactElement;
+  children: (toggleTooltip) => ReactElement;
   confirmVariant?: ActionVariants;
   labels: Labels;
   onConfirm: () => void;

package/src/index.ts

@@ -163,8 +163,8 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
-export { default as DateTimePickerInput } from './TimePeriods/DateTimePickerInput';
 export * from './ParentSize';
-export { default as Subtitle } from './Typography/Subtitle';
+
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export { default as Subtitle } from './Typography/Subtitle';

package/src/queryParameters/url/index.ts

@@ -1,4 +1,4 @@
-import { fromPairs, startsWith } from 'ramda';
+import { fromPairs } from 'ramda';
 
 import { QueryParameter } from '../models';
 
@@ -25,10 +25,6 @@ const getUrlQueryParameters = <
 
   const entries = [...urlParams.entries()].map<[string, string]>(
     ([key, value]) => {
-      if (startsWith('/', value)) {
-        return [key, value];
-      }
-
       return [key, JSON.parse(value)];
     }
   );

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

@@ -0,0 +1,108 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import React, { ReactElement } from 'react';
+
+import { Meta } from '@storybook/react';
+
+import {
+  Add as AddIcon,
+  Settings as SettingsIcon,
+  Share as ShareIcon
+} from '@mui/icons-material';
+
+import {
+  Button,
+  IconButton,
+  Menu,
+  PageHeader,
+  PageLayout
+} from '../../components';
+
+const meta: Meta = {
+  args: {
+    actions: {}
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards detail'
+};
+
+export default meta;
+
+const DefaultView = (args): ReactElement => {
+  const { data } = args;
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Menu>
+              <Menu>
+                <Menu.Button />
+                <Menu.Items>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <Button
+                      icon={<AddIcon />}
+                      iconVariant="start"
+                      variant="ghost"
+                    >
+                      Add item
+                    </Button>
+                  </Menu.Item>
+                </Menu.Items>
+              </Menu>
+            </PageHeader.Menu>
+            <PageHeader.Title
+              description={data.dashboard.description}
+              title={data.dashboard.name}
+            />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          <IconButton
+            aria-label="edit"
+            data-testid="edit"
+            icon={<SettingsIcon />}
+            size="small"
+            variant="ghost"
+          />
+          <IconButton
+            aria-label="share"
+            data-testid="share"
+            icon={<ShareIcon />}
+            size="small"
+            variant="ghost"
+          />
+        </PageLayout.Actions>
+      </PageLayout.Body>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboard: {
+        description:
+          'Description et culpa sit commodo ea enim excepteur elit. Velit irure velit tempor culpa commodo eu adipisicing eu proident ullamco.',
+        id: 1,
+        name: 'Dashboard 1'
+      }
+    }
+  },
+  render: DefaultView
+};
+
+export const AsEditLayoutState = {
+  args: {
+    ...Default.args
+  },
+  render: DefaultView
+};

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

@@ -0,0 +1,281 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import { useEffect } from 'react';
+
+import { Meta } from '@storybook/react';
+import { atom, useAtom } from 'jotai';
+
+import { Add as AddIcon } from '@mui/icons-material';
+
+import {
+  Button,
+  DashboardForm,
+  DashboardFormProps,
+  DataTable,
+  Modal,
+  PageHeader,
+  PageLayout
+} from '../../components';
+import { Default as DashboardFormDefaultStory } from '../../components/Form/Dashboard/DashboardForm.stories';
+
+const meta: Meta = {
+  args: {
+    actions: {
+      create: {
+        label: 'Create a dashboard'
+      }
+    },
+    deleteConfirmation: {
+      labels: {
+        actions: {
+          cancel: 'Cancel',
+          confirm: 'Delete'
+        },
+        description: (name) => (
+          <>
+            Are you sure you want to delete <strong>{name}</strong> ?
+          </>
+        ),
+        title: 'Delete dashboard'
+      }
+    },
+    form: {
+      labels: {
+        ...DashboardFormDefaultStory.args!.labels,
+        title: {
+          create: 'Create dashboard',
+          update: 'Update dashboard'
+        }
+      }
+    },
+    list: {
+      emptyState: {
+        labels: {
+          actions: {
+            create: 'Create dashboard'
+          },
+          title: 'No dashboards found'
+        }
+      }
+    },
+    title: 'Dashboards overview'
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards overview'
+};
+
+export default meta;
+
+interface dashboardItem {
+  description: string;
+  id: number;
+  name: string;
+}
+
+const dialogStateAtom = atom<{
+  item: dashboardItem | null;
+  open: boolean;
+  variant: DashboardFormProps['variant'];
+}>({
+  item: null,
+  open: false,
+  variant: 'create'
+});
+
+const deleteDialogStateAtom = atom<{
+  item: dashboardItem | null;
+  open: boolean;
+}>({
+  item: null,
+  open: false
+});
+
+const dataDashboardsAtom = atom<Array<dashboardItem>>([]);
+
+const DefaultView = (args): JSX.Element => {
+  const { data, title, actions, list, form, deleteConfirmation } = args;
+  const [dialogState, setDialogState] = useAtom(dialogStateAtom);
+  const [deleteDialogState, setDeleteDialogState] = useAtom(
+    deleteDialogStateAtom
+  );
+  const [dataDashboards, setDataDashboards] = useAtom(dataDashboardsAtom);
+
+  useEffect(() => {
+    setDataDashboards(data.dashboards);
+  }, [data.dashboards]);
+
+  const createDashboard = (d): void => {
+    const dashboard = { ...d };
+    dashboard.id = dataDashboards.length
+      ? Math.max(...dataDashboards.map((db) => db.id)) + 1
+      : 0;
+    setDataDashboards((prev) =>
+      [...prev, dashboard].sort((a, b) => a.name.localeCompare(b.name))
+    );
+    setDialogState({ item: null, open: false, variant: 'create' });
+  };
+
+  const updateDashboard = (d): void => {
+    setDataDashboards((prev) =>
+      prev
+        .map((dashboard) => (dashboard.id === d.id ? d : dashboard))
+        .sort((a, b) => a.name.localeCompare(b.name))
+    );
+    setDialogState({ item: null, open: false, variant: 'update' });
+  };
+
+  const deleteDashboard = (id): void => {
+    setDataDashboards((prev) =>
+      prev.filter((dashboard) => dashboard.id !== id)
+    );
+  };
+
+  return (
+    <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"
+              icon={<AddIcon />}
+              iconVariant="start"
+              onClick={() =>
+                setDialogState({ item: null, open: true, variant: 'create' })
+              }
+            >
+              {actions.create.label}
+            </Button>
+          )}
+        </PageLayout.Actions>
+
+        <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>
+      </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>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboards: [
+        { description: 'Dashboard 1 description', id: 1, name: 'Dashboard 1' },
+        { description: 'Dashboard 2 description', id: 2, name: 'Dashboard 2' },
+        { description: 'Dashboard 3 description', id: 3, name: 'Dashboard 3' },
+        { description: 'Dashboard 4 description', id: 4, name: 'Dashboard 4' },
+        { description: 'Dashboard 5 description', id: 5, name: 'Dashboard 5' }
+      ]
+    }
+  },
+  render: DefaultView
+};
+
+export const AsInitialState = {
+  args: {
+    data: {
+      dashboards: []
+    }
+  },
+  render: DefaultView
+};