@centreon/ui 23.10.121 → 24.4.1-0

package/src/components/Form/AccessRights/useAccessRightsForm.tsx

@@ -1,282 +0,0 @@
-import { ReactElement, ReactNode, useEffect, useRef } from 'react';
-
-import {
-  atom,
-  createStore,
-  Provider,
-  useAtom,
-  useAtomValue,
-  useSetAtom,
-  useStore
-} from 'jotai';
-
-import {
-  ContactAccessRightResource,
-  ContactAccessRightStateResource,
-  ContactGroupResource,
-  ContactResource,
-  RoleResource
-} from './AccessRights.resource';
-import {
-  createInitialState,
-  sortOnAddedStateFirstAndContactName
-} from './useAccessRightsForm.utils';
-
-/** state */
-
-type loadingState = 'idle' | 'loading';
-
-const loadingStatusAtom = atom<loadingState>('idle');
-
-type formOptions = {
-  contacts: Array<ContactResource | ContactGroupResource>;
-  roles: Array<RoleResource>;
-};
-
-const formOptionsAtom = atom<formOptions>({
-  contacts: [],
-  roles: []
-});
-
-const contactAccessRightsAtom = atom<Array<ContactAccessRightStateResource>>(
-  []
-);
-
-type StateStats = {
-  added: number;
-  removed: number;
-  updated: number;
-};
-
-const contactAccessRightsStateAtom = atom<{
-  isDirty: boolean;
-  isLoading: boolean;
-  stats: StateStats;
-}>((get) => ({
-  isDirty: get(contactAccessRightsAtom).some(
-    ({ state }) => state !== 'unchanged'
-  ),
-  isLoading: get(loadingStatusAtom) === 'loading',
-  stats: {
-    added: get(contactAccessRightsAtom).filter(({ state }) => state === 'added')
-      .length,
-    removed: get(contactAccessRightsAtom).filter(
-      ({ state }) => state === 'removed'
-    ).length,
-    updated: get(contactAccessRightsAtom).filter(
-      ({ state }) => state === 'updated'
-    ).length
-  }
-}));
-
-type callbacks = {
-  onSubmit?: (values: Array<ContactAccessRightStateResource>) => void;
-};
-
-const callbacksAtom = atom<callbacks>({});
-
-/** provider */
-
-export type AccessRightsFormProviderProps = {
-  children: ReactNode;
-  initialValues?: Array<ContactAccessRightResource>;
-  loadingStatus?: loadingState;
-  onSubmit?: callbacks['onSubmit'];
-  options?: formOptions;
-};
-
-const AccessRightsFormProvider = ({
-  children,
-  initialValues,
-  options,
-  loadingStatus = 'idle',
-  onSubmit
-}: AccessRightsFormProviderProps): ReactElement => {
-  const store = useRef(createStore()).current;
-
-  const setLoadingStatus = useSetAtom(loadingStatusAtom, { store });
-  const setFormOptions = useSetAtom(formOptionsAtom, { store });
-  const setContactAccessRights = useSetAtom(contactAccessRightsAtom, { store });
-  const setCallbacks = useSetAtom(callbacksAtom, { store });
-
-  useEffect(() => {
-    setLoadingStatus(loadingStatus);
-  }, [loadingStatus]);
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    options && setFormOptions(options);
-  }, [options]);
-
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    onSubmit && setCallbacks({ onSubmit });
-  }, [onSubmit]);
-
-  useEffect(() => {
-    setContactAccessRights(
-      initialValues ? createInitialState(initialValues) : []
-    );
-  }, [initialValues]);
-
-  return <Provider store={store}>{children}</Provider>;
-};
-
-/** hook */
-
-type UseAccessRightsForm = {
-  addContactAccessRight: (
-    contactAccessRight: ContactAccessRightResource
-  ) => void;
-  contactAccessRights: Array<ContactAccessRightStateResource>;
-  isDirty: boolean;
-  isLoading: boolean;
-  options: formOptions;
-  removeContactAccessRight: (
-    contactAccessRight: ContactAccessRightResource,
-    restore?: boolean
-  ) => void;
-  stats: StateStats;
-  submit: () => void;
-  updateContactAccessRight: (
-    contactAccessRight: ContactAccessRightResource
-  ) => void;
-};
-
-const useAccessRightsForm = (): UseAccessRightsForm => {
-  const store = useStore();
-
-  const [contactAccessRights, setContactAccessRights] = useAtom(
-    contactAccessRightsAtom,
-    { store }
-  );
-  const { isLoading, isDirty, stats } = useAtomValue(
-    contactAccessRightsStateAtom,
-    { store }
-  );
-  const options = useAtomValue(formOptionsAtom, { store });
-  const callbacks = useAtomValue(callbacksAtom, { store });
-
-  const addContactAccessRight = (
-    contactAccessRight: ContactAccessRightResource
-  ): void =>
-    setContactAccessRights((prev) => {
-      const isContactAlreadyAdded = prev.some(
-        ({ contactAccessRight: c }) =>
-          c.contact?.id === contactAccessRight.contact?.id
-      );
-
-      return isContactAlreadyAdded
-        ? prev
-        : [
-            ...prev,
-            {
-              contactAccessRight,
-              state: 'added',
-              stateHistory: []
-            } as ContactAccessRightStateResource
-          ].sort(sortOnAddedStateFirstAndContactName);
-    });
-
-  const removeContactAccessRight = (
-    contactAccessRight: ContactAccessRightResource,
-    restore = false
-  ): void =>
-    setContactAccessRights((prev) => {
-      const contactAccessRightIndex = prev.findIndex(
-        ({ contactAccessRight: prevContactAccessRight }) =>
-          prevContactAccessRight.contact?.id === contactAccessRight.contact?.id
-      );
-
-      if (contactAccessRightIndex === -1) {
-        return prev;
-      }
-
-      const { stateHistory } = prev[contactAccessRightIndex];
-
-      if (restore) {
-        return [
-          ...prev.slice(0, contactAccessRightIndex),
-          {
-            ...prev[contactAccessRightIndex],
-            state: stateHistory[stateHistory.length - 1],
-            stateHistory: [...stateHistory, prev[contactAccessRightIndex].state]
-          } as ContactAccessRightStateResource,
-          ...prev.slice(contactAccessRightIndex + 1)
-        ];
-      }
-
-      if (
-        prev[contactAccessRightIndex].state === 'added' ||
-        stateHistory[0] === 'added'
-      ) {
-        return [
-          ...prev.slice(0, contactAccessRightIndex),
-          ...prev.slice(contactAccessRightIndex + 1)
-        ];
-      }
-
-      return [
-        ...prev.slice(0, contactAccessRightIndex),
-        {
-          ...prev[contactAccessRightIndex],
-          state: 'removed',
-          stateHistory: [...stateHistory, prev[contactAccessRightIndex].state]
-        } as ContactAccessRightStateResource,
-        ...prev.slice(contactAccessRightIndex + 1)
-      ];
-    });
-
-  const updateContactAccessRight = (
-    contactAccessRight: ContactAccessRightResource
-  ): void =>
-    setContactAccessRights((prev) => {
-      const contactAccessRightIndex = prev.findIndex(
-        ({ contactAccessRight: prevContactAccessRight }) =>
-          prevContactAccessRight.contact?.id === contactAccessRight.contact?.id
-      );
-
-      if (contactAccessRightIndex === -1) {
-        return prev;
-      }
-
-      const { stateHistory } = prev[contactAccessRightIndex];
-
-      const isAdded =
-        prev[contactAccessRightIndex].state === 'added' ||
-        stateHistory[0] === 'added';
-      const isUpdated =
-        prev[contactAccessRightIndex].state === 'updated' ||
-        stateHistory.findIndex((state) => state === 'updated') <
-          stateHistory.findIndex((state) => state === 'unchanged');
-
-      // eslint-disable-next-line no-nested-ternary
-      const state = isAdded ? 'added' : isUpdated ? 'unchanged' : 'updated';
-
-      return [
-        ...prev.slice(0, contactAccessRightIndex),
-        {
-          contactAccessRight,
-          state,
-          stateHistory: [...stateHistory, prev[contactAccessRightIndex].state]
-        } as ContactAccessRightStateResource,
-        ...prev.slice(contactAccessRightIndex + 1)
-      ];
-    });
-
-  const submit = (): void => callbacks.onSubmit?.(contactAccessRights);
-
-  return {
-    addContactAccessRight,
-    contactAccessRights,
-    isDirty,
-    isLoading,
-    options,
-    removeContactAccessRight,
-    stats,
-    submit,
-    updateContactAccessRight
-  };
-};
-
-export { AccessRightsFormProvider, useAccessRightsForm };

package/src/components/Form/AccessRights/useAccessRightsForm.utils.ts

@@ -1,41 +0,0 @@
-import { ContactAccessRightStateResource } from './AccessRights.resource';
-
-export const sortOnContactName = (
-  a: ContactAccessRightStateResource,
-  b: ContactAccessRightStateResource
-): number =>
-  a.contactAccessRight.contact?.name.localeCompare(
-    b.contactAccessRight.contact?.name ?? ''
-  ) || 0;
-
-export const sortOnAddedStateFirstAndContactName = (
-  a: ContactAccessRightStateResource,
-  b: ContactAccessRightStateResource
-): number => {
-  if (a.state === 'added' && b.state !== 'added') {
-    return -1;
-  }
-  if (a.state !== 'added' && b.state === 'added') {
-    return 1;
-  }
-
-  return (
-    a.contactAccessRight.contact?.name.localeCompare(
-      b.contactAccessRight.contact?.name ?? ''
-    ) || 0
-  );
-};
-
-export const createInitialState = (
-  values
-): Array<ContactAccessRightStateResource> =>
-  values
-    ?.map(
-      (contactAccessRight) =>
-        ({
-          contactAccessRight,
-          state: 'unchanged',
-          stateHistory: []
-        } as ContactAccessRightStateResource)
-    )
-    .sort(sortOnAddedStateFirstAndContactName);

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