@centreon/ui 24.4.4 → 24.4.6

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';

package/src/utils/useDateTimePickerAdapter.ts

@@ -0,0 +1,309 @@
+/* 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
+  };
+};

package/src/utils/useInfiniteScrollListing.ts

@@ -5,42 +5,33 @@ import { PrimitiveAtom, useAtom } from 'jotai';
 import { JsonDecoder } from 'ts.data.json';
 
 import {
-  QueryParameter,
   buildListingEndpoint,
   useFetchQuery,
   useIntersectionObserver
 } from '@centreon/ui';
 
 import type { Listing } from '../api/models';
-import { Parameters } from '../api/buildListingEndpoint/models';
+
+const limit = 100;
 
 interface UseInfiniteScrollListing<T> {
   elementRef: (node) => void;
   elements: Array<T>;
   isLoading: boolean;
-  total?: number;
 }
 
 interface UseInfiniteScrollListingProps<T> {
-  customQueryParameters?: Array<QueryParameter>;
-  decoder?: JsonDecoder.Decoder<Listing<T>>;
+  decoder: JsonDecoder.Decoder<Listing<T>>;
   endpoint: string;
-  limit?: number;
   pageAtom: PrimitiveAtom<number>;
-  parameters?: Parameters;
   queryKeyName: string;
-  suspense?: boolean;
 }
 
 export const useInfiniteScrollListing = <T>({
   queryKeyName,
   endpoint,
   decoder,
-  pageAtom,
-  suspense = true,
-  parameters,
-  customQueryParameters,
-  limit = 100
+  pageAtom
 }: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
   const [maxPage, setMaxPage] = useState(1);
 
@@ -55,15 +46,14 @@ export const useInfiniteScrollListing = <T>({
     getEndpoint: (params) =>
       buildListingEndpoint({
         baseEndpoint: endpoint,
-        customQueryParameters,
-        parameters: { limit, page: params?.page || page, ...parameters }
+        parameters: { limit, page: params?.page || page }
       }),
     getQueryKey: () => [queryKeyName, page],
     isPaginated: true,
     queryOptions: {
       refetchOnMount: false,
       refetchOnWindowFocus: false,
-      suspense: suspense && equals(page, 1)
+      suspense: equals(page, 1)
     }
   });
 
@@ -108,14 +98,9 @@ export const useInfiniteScrollListing = <T>({
     });
   }, [data]);
 
-  useEffect(() => {
-    return () => setPage(1);
-  }, []);
-
   return {
     elementRef,
     elements: elements.current || [],
-    isLoading,
-    total: data?.meta.total
+    isLoading
   };
 };