@centreon/ui 24.4.5 → 24.4.7

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/Modal/Modal.styles.ts

@@ -24,9 +24,9 @@ const useStyles = makeStyles<{
     },
     '&[data-size="fullscreen"] .MuiDialog-paper': {
       bottom: props?.bottom ?? 0,
-      height: 'calc(100vh - 90px)',
       left: props?.left ?? 0,
       margin: 0,
+      maxHeight: 'unset',
       maxWidth: 'unset',
       position: 'absolute',
       right: props?.right ?? 0,
@@ -50,13 +50,11 @@ const useStyles = makeStyles<{
   },
   modalActions: {
     bottom: 0,
-    bottom: theme.spacing(2),
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
     justifyContent: 'flex-end',
-    position: 'fixed',
-    right: theme.spacing(2)
+    position: 'sticky'
   },
   modalBody: {
     '& > p': {

package/src/index.ts

@@ -162,5 +162,4 @@ 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';

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
+};

package/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './getNormalizedId';
 export * from './statuses';
 export * from './typedMemo';
 export * from './useCopyToClipboard';
+export * from './useDateTimePickerAdapter';
 export * from './useDebounce';
 export * from './useDeepCallback';
 export * from './useDeepMemo';