@centreon/ui 24.11.13 → 24.11.14

package/src/components/CrudPage/CrudPage.stories.tsx

@@ -1,278 +0,0 @@
-import { FormControlLabel, Switch, Typography } from '@mui/material';
-import { Meta, StoryObj } from '@storybook/react';
-import { atom, useAtom, useSetAtom } from 'jotai';
-import { http, HttpResponse } from 'msw';
-import { identity, isNil, prop } from 'ramda';
-import { ChangeEvent, useEffect } from 'react';
-import { CrudPage } from '.';
-import { SnackbarProvider } from '../../';
-import { Column, ColumnType } from '../../Listing/models';
-
-interface Item {
-  id: number;
-  name: string;
-  description: string;
-  subItems: Array<{ id: number; name: string }>;
-}
-
-interface Filters {
-  hasDescription: boolean;
-  isEven: boolean;
-}
-
-const generateItems = (count: number) =>
-  Array(count)
-    .fill(0)
-    .map((_, idx) => ({
-      id: idx,
-      name: `Item ${idx}`,
-      description: `Description ${idx}`,
-      subItems: [{ id: 1, name: 'SubItem' }]
-    }));
-
-const mockedListing = {
-  result: generateItems(30),
-  meta: {
-    page: 1,
-    total: 60,
-    limit: 30
-  }
-};
-
-const filtersAtom = atom<Filters>({
-  hasDescription: true,
-  isEven: false
-});
-
-const getSearchParameters = ({ filters }) => ({
-  conditions: [
-    {
-      field: 'hasDescription',
-      values: {
-        $in: filters.hasDescription
-      }
-    },
-    {
-      field: 'isEven',
-      values: {
-        $in: filters.isEven
-      }
-    }
-  ]
-});
-
-const labels = {
-  title: 'Items',
-  welcome: {
-    title: 'Welcome to the items page',
-    description: 'This page handles item'
-  },
-  actions: {
-    create: 'Create item'
-  },
-  listing: {
-    search: 'Search'
-  }
-};
-
-const columns: Array<Column> = [
-  {
-    type: ColumnType.string,
-    id: 'name',
-    label: 'Name',
-    getFormattedString: prop('name'),
-    displaySubItemsCaret: true
-  },
-  {
-    type: ColumnType.string,
-    id: 'description',
-    label: 'Description',
-    getFormattedString: prop('description')
-  }
-];
-
-const Filters = () => {
-  const [filters, setFilters] = useAtom(filtersAtom);
-
-  const change =
-    (property: string) => (event: ChangeEvent<HTMLInputElement>) => {
-      setFilters((current) => ({
-        ...current,
-        [property]: event.target.checked
-      }));
-    };
-
-  return (
-    <>
-      <FormControlLabel
-        control={
-          <Switch
-            checked={filters.hasDescription}
-            onChange={change('hasDescription')}
-          />
-        }
-        label="Has description"
-      />
-      <FormControlLabel
-        control={
-          <Switch checked={filters.isEven} onChange={change('isEven')} />
-        }
-        label="Is even"
-      />
-    </>
-  );
-};
-
-const args = {
-  baseEndpoint: '/listing',
-  filtersAtom,
-  getSearchParameters,
-  labels,
-  columns,
-  filters: <Filters />,
-  form: {
-    getItem: {
-      baseEndpoint: (id) => `/item/${id}`,
-      adapter: identity,
-      itemQueryKey: 'item'
-    },
-    Form: ({ initialValues }) => {
-      const [askBeforeCloseForm, setAskBeforeCloseFormModal] = useAtom(
-        CrudPage.askBeforeCloseFormModalAtom
-      );
-      const setOpenFormModal = useSetAtom(CrudPage.openFormModalAtom);
-
-      useEffect(() => {
-        if (!askBeforeCloseForm) {
-          return;
-        }
-
-        setOpenFormModal(null);
-        setAskBeforeCloseFormModal(false);
-      }, [askBeforeCloseForm]);
-
-      return (
-        <Typography>
-          This is a placeholder for the form
-          <br />
-          Initial values: {JSON.stringify(initialValues)}
-        </Typography>
-      );
-    },
-    labels: {
-      add: {
-        title: 'Add item',
-        cancel: 'Cancel',
-        confirm: 'Add'
-      },
-      update: {
-        title: 'Update item',
-        cancel: 'Cancel',
-        confirm: 'Update'
-      }
-    }
-  },
-  deleteItem: {
-    deleteEndpoint: (item) =>
-      !isNil(item?.parent)
-        ? `/delete/${item?.parent?.id}/subItems/${item?.id}`
-        : `/delete/${item?.id}`,
-    labels: {
-      successMessage: (item) =>
-        !isNil(item?.parent) ? 'Sub item deleted' : 'Item deleted',
-      confirm: 'Delete',
-      cancel: 'Cancel',
-      title: (item) =>
-        !isNil(item?.parent) ? 'Delete sub item' : 'Delete item',
-      description: (item) =>
-        !isNil(item?.parent) ? (
-          <Typography>
-            The sub item <strong>{item?.name}</strong> from the item{' '}
-            <strong>{item?.parent?.name}</strong> will be deleted
-          </Typography>
-        ) : (
-          <Typography>
-            The item <strong>{item?.name}</strong> will be deleted
-          </Typography>
-        )
-    }
-  }
-};
-
-const meta: Meta<typeof CrudPage<Item, Filters, Item, Item>> = {
-  args,
-  component: CrudPage<Item, Filters, Item, Item>,
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('**/listing**', () => {
-          return HttpResponse.json(mockedListing);
-        }),
-        http.get('**/item**', () => {
-          return HttpResponse.json({
-            id: 0,
-            name: 'Item 0',
-            description: 'Description 0',
-            subItems: [{ id: 1, name: 'SubItem' }]
-          });
-        }),
-        http.delete('**/delete**', () => {
-          return HttpResponse.json({});
-        })
-      ]
-    }
-  },
-  render: (args) => {
-    return (
-      <SnackbarProvider>
-        <div style={{ height: '90vh' }}>
-          <CrudPage<Item, Filters, Item, Item> {...args} />
-        </div>
-      </SnackbarProvider>
-    );
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof CrudPage<Item, Filters>>;
-
-export const Default: Story = {
-  args: {
-    queryKeyName: 'default'
-  },
-  parameters: {
-    msw: {
-      handlers: [
-        http.get('**/listing**', () => {
-          return HttpResponse.json({
-            result: [],
-            meta: {
-              page: 1,
-              total: 60,
-              limit: 30
-            }
-          });
-        })
-      ]
-    }
-  }
-};
-
-export const WithItems: Story = {
-  args: {
-    queryKeyName: 'withItems'
-  }
-};
-
-export const WithSubItem: Story = {
-  args: {
-    queryKeyName: 'subItems',
-    subItems: {
-      canCheckSubItems: false,
-      enable: true,
-      getRowProperty: () => 'subItems',
-      labelExpand: 'Expand',
-      labelCollapse: 'Collapse'
-    }
-  }
-};

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -1,142 +0,0 @@
-import { useSetAtom } from 'jotai';
-import { equals } from 'ramda';
-import { useCallback, useRef } from 'react';
-import PageSkeleton from '../../PageSkeleton';
-import { DataTable } from '../DataTable';
-import { PageHeader } from '../Header';
-import { PageLayout } from '../Layout';
-import DeleteModal from './DeleteModal';
-import AddModal from './Form/AddModal';
-import UpdateModal from './Form/UpdateModal';
-import Listing from './Listing';
-import {
-  canDeleteSubItemsAtom,
-  formLabelButtonsAtom,
-  openFormModalAtom
-} from './atoms';
-import { useGetItems } from './hooks/useGetItems';
-import type { CrudPageRootProps } from './models';
-
-export const CrudPageRoot = <
-  TData extends { id: number; name: string },
-  TFilters,
-  TItem extends { id: number; name: string },
-  TItemForm
->({
-  labels,
-  decoder,
-  queryKeyName,
-  filtersAtom,
-  getSearchParameters,
-  baseEndpoint,
-  columns,
-  subItems,
-  filters,
-  deleteItem,
-  form
-}: CrudPageRootProps<TData, TFilters, TItem, TItemForm>): JSX.Element => {
-  const previousCanDeleteSubItemRef = useRef<boolean | undefined>();
-  const previousFormLabelButtonsRef = useRef<unknown | null>(null);
-  const { isDataEmpty, hasItems, isLoading, items, total } = useGetItems<
-    TData,
-    TFilters
-  >({
-    queryKeyName,
-    filtersAtom,
-    decoder,
-    getSearchParameters,
-    baseEndpoint
-  });
-
-  const setOpenFormModal = useSetAtom(openFormModalAtom);
-  const setCanDeleteSubItem = useSetAtom(canDeleteSubItemsAtom);
-  const setFormLabelButton = useSetAtom(formLabelButtonsAtom);
-
-  if (
-    !equals(previousCanDeleteSubItemRef.current, subItems?.canDeleteSubItems)
-  ) {
-    setCanDeleteSubItem(subItems?.canDeleteSubItems ?? true);
-    previousCanDeleteSubItemRef.current = subItems?.canDeleteSubItems;
-  }
-
-  if (!equals(previousFormLabelButtonsRef.current, form.labels)) {
-    setFormLabelButton({
-      add: {
-        cancel: form.labels.add.cancel,
-        confirm: form.labels.add.confirm
-      },
-      update: {
-        cancel: form.labels.update.cancel,
-        confirm: form.labels.update.confirm
-      }
-    });
-    previousFormLabelButtonsRef.current = form.labels;
-  }
-
-  const add = useCallback(() => setOpenFormModal('add'), []);
-
-  if (isLoading && !hasItems) {
-    return <PageSkeleton displayHeaderAndNavigation={false} />;
-  }
-
-  return (
-    <PageLayout>
-      <PageLayout.Header>
-        <PageHeader>
-          <PageHeader.Title title={labels.title} />
-        </PageHeader>
-      </PageLayout.Header>
-      <PageLayout.Body>
-        <>
-          <DataTable
-            isEmpty={isDataEmpty}
-            variant={isDataEmpty ? 'grid' : 'listing'}
-          >
-            {isDataEmpty && !isLoading ? (
-              <DataTable.EmptyState
-                aria-label="create"
-                data-testid="create-agent-configuration"
-                labels={{
-                  title: labels.welcome.title,
-                  description: labels.welcome.description,
-                  actions: labels?.actions
-                }}
-                onCreate={add}
-              />
-            ) : (
-              <Listing
-                total={total}
-                isLoading={isLoading}
-                rows={items}
-                columns={columns}
-                subItems={subItems}
-                labels={{
-                  add: labels.actions.create,
-                  search: labels.listing.search
-                }}
-                filters={filters}
-              />
-            )}
-          </DataTable>
-          <DeleteModal<TData>
-            listingQueryKey={queryKeyName}
-            deleteEndpoint={deleteItem.deleteEndpoint}
-            labels={deleteItem.labels}
-            modalSize={deleteItem.modalSize}
-          />
-          <AddModal
-            title={form.labels.add.title}
-            Form={form.Form}
-            modalSize={form.modalSize}
-          />
-          <UpdateModal<TItem, TItemForm>
-            title={form.labels.update.title}
-            Form={form.Form}
-            modalSize={form.modalSize}
-            {...form.getItem}
-          />
-        </>
-      </PageLayout.Body>
-    </PageLayout>
-  );
-};

package/src/components/CrudPage/DeleteModal.tsx

@@ -1,77 +0,0 @@
-import { Box, CircularProgress, Typography } from '@mui/material';
-import { useAtom } from 'jotai';
-import { useCallback, useRef } from 'react';
-import { Button } from '../Button';
-import { Modal } from '../Modal';
-import { itemToDeleteAtom } from './atoms';
-import { useDeleteItem } from './hooks/useDeleteItem';
-import { DeleteItem, ItemToDelete } from './models';
-import { isAFunction } from './utils';
-
-const DeleteModal = <TData extends { id: number; name: string }>({
-  labels,
-  deleteEndpoint,
-  listingQueryKey,
-  modalSize = 'medium'
-}: DeleteItem & {
-  listingQueryKey: string;
-}): JSX.Element => {
-  const itemToDeleteRef = useRef<ItemToDelete | null>(null);
-
-  const [itemToDelete, setItemToDelete] = useAtom(itemToDeleteAtom);
-
-  const { isMutating, deleteItem } = useDeleteItem({
-    deleteEndpoint,
-    listingQueryKey,
-    successMessage: labels.successMessage
-  });
-
-  const isOpen = Boolean(itemToDelete);
-
-  const close = useCallback(() => {
-    setItemToDelete(null);
-  }, []);
-
-  const confirm = useCallback(() => {
-    deleteItem(itemToDeleteRef.current).then(close);
-  }, [itemToDeleteRef.current]);
-
-  if (isOpen) {
-    itemToDeleteRef.current = itemToDelete;
-  }
-
-  return (
-    <Modal open={isOpen} onClose={close} size={modalSize}>
-      <Modal.Header>
-        {isAFunction(labels.title)
-          ? labels.title(itemToDeleteRef.current as TData)
-          : labels.title}
-      </Modal.Header>
-      <Modal.Body>
-        <Typography>
-          {isAFunction(labels.description)
-            ? labels.description(itemToDeleteRef.current as TData)
-            : labels.description}
-        </Typography>
-      </Modal.Body>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          gap: 2,
-          justifyContent: 'flex-end'
-        }}
-      >
-        {isMutating && <CircularProgress size={20} />}
-        <Button variant="ghost" onClick={close} disabled={isMutating}>
-          {labels.cancel}
-        </Button>
-        <Button isDanger onClick={confirm} disabled={isMutating}>
-          {labels.confirm}
-        </Button>
-      </Box>
-    </Modal>
-  );
-};
-
-export default DeleteModal;

package/src/components/CrudPage/Form/AddModal.tsx

@@ -1,35 +0,0 @@
-import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNotNil } from 'ramda';
-import { useCallback, useMemo } from 'react';
-import { Modal } from '../../Modal';
-import { askBeforeCloseFormModalAtom, openFormModalAtom } from '../atoms';
-import Buttons from './Buttons';
-
-const AddModal = ({ title, Form, modalSize = 'medium' }): JSX.Element => {
-  const setAskBeforeCloseFormModal = useSetAtom(askBeforeCloseFormModalAtom);
-
-  const openFormModal = useAtomValue(openFormModalAtom);
-
-  const isModalOpen = useMemo(
-    () => isNotNil(openFormModal) && equals('add', openFormModal),
-    [openFormModal]
-  );
-
-  const openAskBeforeClose = useCallback(
-    () => setAskBeforeCloseFormModal(true),
-    []
-  );
-
-  return (
-    <>
-      <Modal open={isModalOpen} onClose={openAskBeforeClose} size={modalSize}>
-        <Modal.Header>{title}</Modal.Header>
-        <Modal.Body>
-          <Form Buttons={Buttons} />
-        </Modal.Body>
-      </Modal>
-    </>
-  );
-};
-
-export default AddModal;

package/src/components/CrudPage/Form/Buttons.tsx

@@ -1,98 +0,0 @@
-import { UnsavedChangesDialog } from '@centreon/ui';
-import SaveIcon from '@mui/icons-material/Save';
-import { Box, CircularProgress } from '@mui/material';
-import { useFormikContext } from 'formik';
-import { useAtom, useAtomValue } from 'jotai';
-import { equals } from 'ramda';
-import { useCallback, useEffect, useMemo } from 'react';
-import { Button } from '../../Button';
-import {
-  askBeforeCloseFormModalAtom,
-  formLabelButtonsAtom,
-  openFormModalAtom
-} from '../atoms';
-
-const Buttons = (): JSX.Element => {
-  const [askBeforeCloseForm, setAskBeforeCloseFormModal] = useAtom(
-    askBeforeCloseFormModalAtom
-  );
-  const [openFormModal, setOpenFormModal] = useAtom(openFormModalAtom);
-  const labels = useAtomValue(formLabelButtonsAtom);
-
-  const { isValid, dirty, isSubmitting, submitForm } = useFormikContext();
-
-  const isSubmitDisabled = useMemo(
-    () => !dirty || !isValid || isSubmitting,
-    [dirty, isValid, isSubmitting]
-  );
-  const cancelLabel = useMemo(
-    () =>
-      equals(openFormModal, 'add') ? labels.add.cancel : labels.update.cancel,
-    [labels, openFormModal]
-  );
-  const confirmLabel = useMemo(
-    () =>
-      equals(openFormModal, 'add') ? labels.add.confirm : labels.update.confirm,
-    [labels, openFormModal]
-  );
-
-  const discard = useCallback(() => {
-    setAskBeforeCloseFormModal(false);
-    setOpenFormModal(null);
-  }, []);
-
-  const close = useCallback(() => {
-    if (dirty) {
-      setAskBeforeCloseFormModal(true);
-      return;
-    }
-    setOpenFormModal(null);
-    setAskBeforeCloseFormModal(false);
-  }, [dirty]);
-
-  const submitAndClose = useCallback(() => {
-    submitForm();
-    setAskBeforeCloseFormModal(false);
-  }, []);
-
-  const closeAskBeforeCloseModal = useCallback(() => {
-    setAskBeforeCloseFormModal(false);
-  }, []);
-
-  useEffect(() => {
-    if (!askBeforeCloseForm || dirty) {
-      return;
-    }
-
-    close();
-  }, [askBeforeCloseForm, dirty]);
-
-  return (
-    <>
-      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
-        {isSubmitting && <CircularProgress size={24} />}
-        <Button variant="ghost" onClick={close}>
-          {cancelLabel}
-        </Button>
-        <Button
-          disabled={isSubmitDisabled}
-          iconVariant="start"
-          icon={<SaveIcon />}
-          onClick={submitForm}
-        >
-          {confirmLabel}
-        </Button>
-      </Box>
-      <UnsavedChangesDialog
-        isSubmitting={isSubmitting}
-        isValidForm={isValid}
-        saveChanges={submitAndClose}
-        closeDialog={closeAskBeforeCloseModal}
-        discardChanges={discard}
-        dialogOpened={askBeforeCloseForm && dirty}
-      />
-    </>
-  );
-};
-
-export default Buttons;

package/src/components/CrudPage/Form/UpdateModal.tsx

@@ -1,60 +0,0 @@
-import { useAtomValue, useSetAtom } from 'jotai';
-import { equals, isNotNil } from 'ramda';
-import { useCallback, useMemo } from 'react';
-import { Modal } from '../..';
-import { askBeforeCloseFormModalAtom, openFormModalAtom } from '../atoms';
-import { useGetItem } from '../hooks/useGetItem';
-import { Form as FormModel, GetItem } from '../models';
-import Buttons from './Buttons';
-
-const UpdateModal = <TItem extends { id: number; name: string }, TItemForm>({
-  decoder,
-  baseEndpoint,
-  itemQueryKey,
-  adapter,
-  Form,
-  title,
-  modalSize = 'medium'
-}: GetItem<TItem, TItemForm> &
-  Pick<FormModel<TItem, TItemForm>, 'Form' | 'modalSize'> & {
-    title: string;
-  }) => {
-  const setAskBeforeCloseFormModal = useSetAtom(askBeforeCloseFormModalAtom);
-
-  const openFormModal = useAtomValue(openFormModalAtom);
-
-  const { initialValues, isLoading } = useGetItem({
-    id: openFormModal,
-    decoder,
-    baseEndpoint,
-    itemQueryKey,
-    adapter
-  });
-
-  const isModalOpen = useMemo(
-    () => isNotNil(openFormModal) && !equals('add', openFormModal),
-    [openFormModal]
-  );
-
-  const openAskBeforeClose = useCallback(
-    () => setAskBeforeCloseFormModal(true),
-    []
-  );
-
-  return (
-    <>
-      <Modal open={isModalOpen} onClose={openAskBeforeClose} size={modalSize}>
-        <Modal.Header>{title}</Modal.Header>
-        <Modal.Body>
-          <Form
-            initialValues={initialValues}
-            Buttons={Buttons}
-            isLoading={isLoading}
-          />
-        </Modal.Body>
-      </Modal>
-    </>
-  );
-};
-
-export default UpdateModal;