@centreon/ui 24.11.14 → 24.11.21

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

@@ -0,0 +1,278 @@
+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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,60 @@
+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;