@centreon/ui 24.4.59 → 24.4.61

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

@@ -1,108 +0,0 @@
-/* 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

@@ -1,281 +0,0 @@
-/* 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/useDateTimePickerAdapter.ts

@@ -1,309 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import { useCallback } from 'react';
-
-import dayjs from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { equals, isNil, not } from 'ramda';
-
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
-import { useLocaleDateTimeFormat } from '@centreon/ui';
-import { userAtom } from '@centreon/ui-context';
-
-interface GetDestinationAndConfiguredTimezoneOffsetProps {
-  endTimezone?: string;
-  startTimezone?: string;
-}
-
-interface UseDateTimePickerAdapterProps {
-  Adapter;
-  desktopPickerMediaQuery: string;
-}
-
-enum DSTState {
-  SUMMER,
-  WINTER,
-  NODST
-}
-
-interface ToTimezonedDateProps {
-  date: Date;
-  timeZone?: string;
-}
-
-interface GetDSTStateProps {
-  date: dayjs.Dayjs;
-  timezoneToUse?: string;
-}
-
-export const useDateTimePickerAdapter = (): UseDateTimePickerAdapterProps => {
-  const { timezone, locale } = useAtomValue(userAtom);
-  const { format } = useLocaleDateTimeFormat();
-
-  const desktopPickerMediaQuery =
-    '@media (pointer: fine) or (min-width: 1024px)';
-
-  const toTimezonedDate = ({
-    date,
-    timeZone = undefined
-  }: ToTimezonedDateProps): Date => {
-    if (isNil(timeZone)) {
-      return new Date(date.toLocaleString('en-US'));
-    }
-
-    return new Date(date.toLocaleString('en-US', { timeZone }));
-  };
-
-  const getDestinationAndConfiguredTimezoneOffset = ({
-    startTimezone = undefined,
-    endTimezone = timezone
-  }: GetDestinationAndConfiguredTimezoneOffsetProps): number => {
-    const now = new Date();
-    const currentTimezoneDate = toTimezonedDate({
-      date: now,
-      timeZone: startTimezone
-    });
-    const destinationTimezoneDate = toTimezonedDate({
-      date: now,
-      timeZone: endTimezone
-    });
-
-    return Math.floor(
-      (currentTimezoneDate.getTime() - destinationTimezoneDate.getTime()) /
-        60 /
-        60 /
-        1000
-    );
-  };
-
-  const getDSTState = useCallback(
-    ({ date, timezoneToUse }: GetDSTStateProps): DSTState => {
-      const hasNoTimezone = isNil(timezoneToUse);
-      const currentYear = toTimezonedDate({
-        date: new Date(),
-        timeZone: timezoneToUse
-      }).getFullYear();
-
-      const january = hasNoTimezone
-        ? dayjs(new Date(currentYear, 0, 1)).utcOffset()
-        : dayjs(new Date(currentYear, 0, 1)).tz(timezoneToUse).utcOffset();
-      const july = hasNoTimezone
-        ? dayjs(new Date(currentYear, 6, 1)).utcOffset()
-        : dayjs(new Date(currentYear, 6, 1)).tz(timezoneToUse).utcOffset();
-
-      if (equals(january, july)) {
-        return DSTState.NODST;
-      }
-
-      return july === date.tz().utcOffset() ? DSTState.SUMMER : DSTState.WINTER;
-    },
-    [timezone]
-  );
-
-  const getDSTStateForCurrentTimezone = useCallback(
-    (date: dayjs.Dayjs): DSTState => {
-      return getDSTState({ date });
-    },
-    []
-  );
-
-  interface Chunk {
-    array: Array<unknown>;
-    size: number;
-  }
-  class Adapter extends AdapterDayjs {
-    public formatByString = (value, formatKey: string): string => {
-      return format({
-        date: value.tz(timezone).toDate(),
-        formatString: formatKey
-      });
-    };
-
-    public format = (date: dayjs.Dayjs, formatKey: string): string => {
-      return this.formatByString(
-        date.tz(timezone, true),
-        this.formats[formatKey]
-      );
-    };
-
-    public startOfWeek = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      if (date.tz(timezone).isUTC()) {
-        return date.tz(timezone).startOf('week').utc();
-      }
-
-      return date.tz(timezone).startOf('week');
-    };
-
-    public setMinutes = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
-      return date.minute(count);
-    };
-
-    public setHours = (date: dayjs.Dayjs, count: number): dayjs.Dayjs => {
-      return date.hour(count);
-    };
-
-    public isSameDay = (date: dayjs.Dayjs, comparing: dayjs.Dayjs): boolean => {
-      const isSameYearAndMonth = this.isSameYear(date, comparing)
-        ? this.isSameMonth(date, comparing)
-        : false;
-
-      return (
-        isSameYearAndMonth &&
-        date.tz(timezone).isSame(comparing.tz(timezone), 'day')
-      );
-    };
-
-    public startOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).startOf('day') as dayjs.Dayjs;
-    };
-
-    public endOfDay = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).endOf('day') as dayjs.Dayjs;
-    };
-
-    public startOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      if (date.tz(timezone).isUTC()) {
-        return date.tz(timezone).utc();
-      }
-
-      return date.tz(timezone);
-    };
-
-    public endOfMonth = (date: dayjs.Dayjs): dayjs.Dayjs => {
-      return date.tz(timezone).endOf('month') as dayjs.Dayjs;
-    };
-
-    public isSameMonth = (
-      date: dayjs.Dayjs,
-      comparing: dayjs.Dayjs
-    ): boolean => {
-      return date.tz(timezone).isSame(comparing.tz(timezone), 'month');
-    };
-
-    public getMonth = (date: dayjs.Dayjs): number => {
-      return date.tz(timezone).month();
-    };
-
-    public isAfter = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
-      return date.isAfter(value.endOf('month'));
-    };
-
-    public isBefore = (date: dayjs.Dayjs, value: dayjs.Dayjs): boolean => {
-      return date.isBefore(value.startOf('month'));
-    };
-
-    public getDaysInMonth = (date: dayjs.Dayjs): number => {
-      return date.tz(timezone).daysInMonth();
-    };
-
-    public getWeekdays = (): Array<string> => {
-      const start = dayjs().locale(locale).tz(timezone).startOf('week');
-
-      return [0, 1, 2, 3, 4, 5, 6].map((diff) =>
-        this.formatByString(start.add(diff, 'day'), 'dd')
-      );
-    };
-
-    public getChunkFromArray = ({ array, size }: Chunk): Array<unknown> => {
-      if (!array.length) {
-        return [];
-      }
-      const head = array.slice(0, size);
-      const tail = array.slice(size);
-
-      return [head, ...this.getChunkFromArray({ array: tail, size })];
-    };
-
-    public getWeekArray = (date: dayjs.Dayjs): Array<Array<dayjs.Dayjs>> => {
-      const isMorning = equals(dayjs().tz(timezone).format('a'), 'am');
-      const startOfWeek = date.tz(timezone).startOf('month').startOf('week');
-      const endOfWeek = date.tz(timezone).endOf('month').endOf('week');
-      const start = startOfWeek.startOf('day');
-      const end = endOfWeek.endOf('day');
-      const customStart = isMorning
-        ? startOfWeek.startOf('day')
-        : startOfWeek.startOf('day');
-      const customEnd = isMorning
-        ? endOfWeek.startOf('day')
-        : endOfWeek.startOf('day');
-      const currentStart = start.isUTC()
-        ? start.tz(timezone, true)
-        : customStart;
-      const currentEnd = end.isUTC() ? end.tz(timezone, true) : customEnd;
-      const numberOfDaysInCurrentMonth = currentEnd.diff(
-        currentStart,
-        'd',
-        true
-      );
-      const daysOfMonthWithTimezone = [
-        ...Array(Math.round(numberOfDaysInCurrentMonth)).keys()
-      ].reduce(
-        (acc, _, currentIndex) => {
-          if (acc[currentIndex].isUTC()) {
-            const newCurrent = acc[currentIndex]
-              .utc()
-              .add(1, 'day')
-              .tz(timezone, true);
-
-            return [...acc, newCurrent];
-          }
-          const newCurrent = acc[currentIndex].add(1, 'day');
-
-          return [...acc, newCurrent];
-        },
-        [currentStart]
-      );
-      const weeksArray = this.getChunkFromArray({
-        array: daysOfMonthWithTimezone,
-        size: 7
-      });
-
-      return weeksArray as Array<Array<dayjs.Dayjs>>;
-    };
-
-    public mergeDateAndTime = (
-      date: dayjs.Dayjs,
-      time: dayjs.Dayjs
-    ): dayjs.Dayjs => {
-      const dateWithTimezone = date.tz(timezone).startOf('day');
-      const timeWithTimezone = time.tz(timezone);
-      const dateDSTState = getDSTState({
-        date: dateWithTimezone,
-        timezoneToUse: timezone
-      });
-      const dateDSTStateWithCurrentTimezone =
-        getDSTStateForCurrentTimezone(date);
-
-      if (equals(dateDSTStateWithCurrentTimezone, DSTState.WINTER)) {
-        return dateWithTimezone
-          .add(
-            timeWithTimezone.hour() -
-              getDestinationAndConfiguredTimezoneOffset({
-                endTimezone: 'UTC',
-                startTimezone: dayjs.tz.guess()
-              }),
-            'hour'
-          )
-          .add(timeWithTimezone.minute(), 'minute')
-          .add(timeWithTimezone.second(), 'second');
-      }
-
-      if (not(equals(dateDSTState, DSTState.SUMMER))) {
-        return dateWithTimezone
-          .add(timeWithTimezone.hour(), 'hour')
-          .add(timeWithTimezone.minute(), 'minute')
-          .add(timeWithTimezone.second(), 'second');
-      }
-
-      return dateWithTimezone
-        .hour(timeWithTimezone.hour())
-        .minute(timeWithTimezone.minute())
-        .second(timeWithTimezone.second());
-    };
-  }
-
-  return {
-    Adapter,
-    desktopPickerMediaQuery
-  };
-};