@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,12 +1,14 @@
 import { FormControlLabel, Switch, Typography } from '@mui/material';
-import { Meta, StoryObj } from '@storybook/react';
+
+import type { Meta, StoryObj } from '@storybook/react';
 import { atom, useAtom, useSetAtom } from 'jotai';
-import { http, HttpResponse } from 'msw';
+import { HttpResponse, http } from 'msw';
 import { identity, isNil, prop } from 'ramda';
-import { ChangeEvent, useEffect } from 'react';
-import { CrudPage } from '.';
+import { type ChangeEvent, useEffect } from 'react';
+
 import { SnackbarProvider } from '../../';
-import { Column, ColumnType } from '../../Listing/models';
+import { type Column, ColumnType } from '../../Listing/models';
+import { CrudPage } from '.';
 import '../../ThemeProvider/tailwindcss.css';
 
 interface Item {
@@ -25,19 +27,19 @@ const generateItems = (count: number) =>
   Array(count)
     .fill(0)
     .map((_, idx) => ({
+      description: `Description ${idx}`,
       id: idx,
       name: `Item ${idx}`,
-      description: `Description ${idx}`,
       subItems: [{ id: 1, name: 'SubItem' }]
     }));
 
 const mockedListing = {
-  result: generateItems(30),
   meta: {
+    limit: 30,
     page: 1,
-    total: 60,
-    limit: 30
-  }
+    total: 60
+  },
+  result: generateItems(30)
 };
 
 const filtersAtom = atom<Filters>({
@@ -63,32 +65,32 @@ const getSearchParameters = ({ filters }) => ({
 });
 
 const labels = {
-  title: 'Items',
-  welcome: {
-    title: 'Welcome to the items page',
-    description: 'This page handles item'
-  },
   actions: {
     create: 'Create item'
   },
   listing: {
     search: 'Search'
+  },
+  title: 'Items',
+  welcome: {
+    description: 'This page handles item',
+    title: 'Welcome to the items page'
   }
 };
 
 const columns: Array<Column> = [
   {
-    type: ColumnType.string,
+    displaySubItemsCaret: true,
+    getFormattedString: prop('name'),
     id: 'name',
     label: 'Name',
-    getFormattedString: prop('name'),
-    displaySubItemsCaret: true
+    type: ColumnType.string
   },
   {
-    type: ColumnType.string,
+    getFormattedString: prop('description'),
     id: 'description',
     label: 'Description',
-    getFormattedString: prop('description')
+    type: ColumnType.string
   }
 ];
 
@@ -126,17 +128,35 @@ const Filters = () => {
 
 const args = {
   baseEndpoint: '/listing',
-  filtersAtom,
-  getSearchParameters,
-  labels,
   columns,
+  deleteItem: {
+    deleteEndpoint: (item) =>
+      !isNil(item?.parent)
+        ? `/delete/${item?.parent?.id}/subItems/${item?.id}`
+        : `/delete/${item?.id}`,
+    labels: {
+      cancel: 'Cancel',
+      confirm: 'Delete',
+      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>
+        ),
+      successMessage: (item) =>
+        !isNil(item?.parent) ? 'Sub item deleted' : 'Item deleted',
+      title: (item) =>
+        !isNil(item?.parent) ? 'Delete sub item' : 'Delete item'
+    }
+  },
   filters: <Filters />,
+  filtersAtom,
   form: {
-    getItem: {
-      baseEndpoint: (id) => `/item/${id}`,
-      adapter: identity,
-      itemQueryKey: 'item'
-    },
     Form: ({ initialValues }) => {
       const [askBeforeCloseForm, setAskBeforeCloseFormModal] = useAtom(
         CrudPage.askBeforeCloseFormModalAtom
@@ -150,7 +170,7 @@ const args = {
 
         setOpenFormModal(null);
         setAskBeforeCloseFormModal(false);
-      }, [askBeforeCloseForm]);
+      }, [askBeforeCloseForm, setAskBeforeCloseFormModal, setOpenFormModal]);
 
       return (
         <Typography>
@@ -160,44 +180,26 @@ const args = {
         </Typography>
       );
     },
+    getItem: {
+      adapter: identity,
+      baseEndpoint: (id) => `/item/${id}`,
+      itemQueryKey: 'item'
+    },
     labels: {
       add: {
-        title: 'Add item',
         cancel: 'Cancel',
-        confirm: 'Add'
+        confirm: 'Add',
+        title: 'Add item'
       },
       update: {
-        title: 'Update item',
         cancel: 'Cancel',
-        confirm: 'Update'
+        confirm: 'Update',
+        title: 'Update item'
       }
     }
   },
-  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>
-        )
-    }
-  }
+  getSearchParameters,
+  labels
 };
 
 const meta: Meta<typeof CrudPage<Item, Filters, Item, Item>> = {
@@ -211,9 +213,9 @@ const meta: Meta<typeof CrudPage<Item, Filters, Item, Item>> = {
         }),
         http.get('**/item**', () => {
           return HttpResponse.json({
+            description: 'Description 0',
             id: 0,
             name: 'Item 0',
-            description: 'Description 0',
             subItems: [{ id: 1, name: 'SubItem' }]
           });
         }),
@@ -246,12 +248,12 @@ export const Default: Story = {
       handlers: [
         http.get('**/listing**', () => {
           return HttpResponse.json({
-            result: [],
             meta: {
+              limit: 30,
               page: 1,
-              total: 60,
-              limit: 30
-            }
+              total: 60
+            },
+            result: []
           });
         })
       ]
@@ -272,8 +274,8 @@ export const WithSubItem: Story = {
       canCheckSubItems: false,
       enable: true,
       getRowProperty: () => 'subItems',
-      labelExpand: 'Expand',
-      labelCollapse: 'Collapse'
+      labelCollapse: 'Collapse',
+      labelExpand: 'Expand'
     }
   }
 };

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -1,20 +1,21 @@
 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 DeleteModal from './DeleteModal';
+import AddModal from './Form/AddModal';
+import UpdateModal from './Form/UpdateModal';
 import { useGetItems } from './hooks/useGetItems';
+import Listing from './Listing';
 import type { CrudPageRootProps } from './models';
 
 export const CrudPageRoot = <
@@ -41,11 +42,11 @@ export const CrudPageRoot = <
     TData,
     TFilters
   >({
-    queryKeyName,
-    filtersAtom,
+    baseEndpoint,
     decoder,
+    filtersAtom,
     getSearchParameters,
-    baseEndpoint
+    queryKeyName
   });
 
   const setOpenFormModal = useSetAtom(openFormModalAtom);
@@ -73,7 +74,7 @@ export const CrudPageRoot = <
     previousFormLabelButtonsRef.current = form.labels;
   }
 
-  const add = useCallback(() => setOpenFormModal('add'), []);
+  const add = useCallback(() => setOpenFormModal('add'), [setOpenFormModal]);
 
   if (isLoading && !hasItems) {
     return <PageSkeleton displayHeaderAndNavigation={false} />;
@@ -89,7 +90,7 @@ export const CrudPageRoot = <
         </PageHeader>
       </PageLayout.Header>
       <PageLayout.Body>
-        <>
+        <div className="h-full w-full">
           <DataTable
             isEmpty={isDataEmpty}
             variant={isDataEmpty ? 'grid' : 'listing'}
@@ -99,45 +100,45 @@ export const CrudPageRoot = <
                 aria-label="create"
                 buttonCreateTestId="create-crudpage"
                 labels={{
-                  title: labels.welcome.title,
+                  actions: labels?.actions,
                   description: labels.welcome.description,
-                  actions: labels?.actions
+                  title: labels.welcome.title
                 }}
                 onCreate={add}
               />
             ) : (
               <Listing
-                total={total}
-                isLoading={isLoading}
-                rows={items}
                 columns={columns}
-                subItems={subItems}
+                filters={filters}
+                isLoading={isLoading}
                 labels={{
                   add: labels.actions.create,
                   search: labels.listing.search
                 }}
-                filters={filters}
+                rows={items}
+                subItems={subItems}
+                total={total}
               />
             )}
           </DataTable>
           <DeleteModal<TData>
-            listingQueryKey={queryKeyName}
             deleteEndpoint={deleteItem.deleteEndpoint}
             labels={deleteItem.labels}
+            listingQueryKey={queryKeyName}
             modalSize={deleteItem.modalSize}
           />
           <AddModal
-            title={form.labels.add.title}
             Form={form.Form}
             modalSize={form.modalSize}
+            title={form.labels.add.title}
           />
           <UpdateModal<TItem, TItemForm>
-            title={form.labels.update.title}
             Form={form.Form}
             modalSize={form.modalSize}
+            title={form.labels.update.title}
             {...form.getItem}
           />
-        </>
+        </div>
       </PageLayout.Body>
     </PageLayout>
   );

package/src/components/CrudPage/DeleteModal.tsx

@@ -1,11 +1,13 @@
 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 type { DeleteItem, ItemToDelete } from './models';
 import { isAFunction } from './utils';
 
 const DeleteModal = <TData extends { id: number; name: string }>({
@@ -30,18 +32,18 @@ const DeleteModal = <TData extends { id: number; name: string }>({
 
   const close = useCallback(() => {
     setItemToDelete(null);
-  }, []);
+  }, [setItemToDelete]);
 
   const confirm = useCallback(() => {
     deleteItem(itemToDeleteRef.current).then(close);
-  }, [itemToDeleteRef.current]);
+  }, [close, deleteItem]);
 
   if (isOpen) {
     itemToDeleteRef.current = itemToDelete;
   }
 
   return (
-    <Modal open={isOpen} onClose={close} size={modalSize}>
+    <Modal onClose={close} open={isOpen} size={modalSize}>
       <Modal.Header>
         {isAFunction(labels.title)
           ? labels.title(itemToDeleteRef.current as TData)
@@ -63,10 +65,10 @@ const DeleteModal = <TData extends { id: number; name: string }>({
         }}
       >
         {isMutating && <CircularProgress size={20} />}
-        <Button variant="ghost" onClick={close} disabled={isMutating}>
+        <Button disabled={isMutating} onClick={close} variant="ghost">
           {labels.cancel}
         </Button>
-        <Button isDanger onClick={confirm} disabled={isMutating}>
+        <Button disabled={isMutating} isDanger onClick={confirm}>
           {labels.confirm}
         </Button>
       </Box>

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

@@ -1,6 +1,7 @@
 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';
@@ -17,18 +18,16 @@ const AddModal = ({ title, Form, modalSize = 'medium' }): JSX.Element => {
 
   const openAskBeforeClose = useCallback(
     () => setAskBeforeCloseFormModal(true),
-    []
+    [setAskBeforeCloseFormModal]
   );
 
   return (
-    <>
-      <Modal open={isModalOpen} onClose={openAskBeforeClose} size={modalSize}>
-        <Modal.Header>{title}</Modal.Header>
-        <Modal.Body>
-          <Form Buttons={Buttons} />
-        </Modal.Body>
-      </Modal>
-    </>
+    <Modal onClose={openAskBeforeClose} open={isModalOpen} size={modalSize}>
+      <Modal.Header>{title}</Modal.Header>
+      <Modal.Body>
+        <Form Buttons={Buttons} />
+      </Modal.Body>
+    </Modal>
   );
 };
 

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

@@ -1,10 +1,13 @@
-import { UnsavedChangesDialog } from '@centreon/ui';
 import SaveIcon from '@mui/icons-material/Save';
 import { Box, CircularProgress } from '@mui/material';
+
+import { UnsavedChangesDialog } from '@centreon/ui';
+
 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,
@@ -39,7 +42,7 @@ const Buttons = (): JSX.Element => {
   const discard = useCallback(() => {
     setAskBeforeCloseFormModal(false);
     setOpenFormModal(null);
-  }, []);
+  }, [setAskBeforeCloseFormModal, setOpenFormModal]);
 
   const close = useCallback(() => {
     if (dirty) {
@@ -48,16 +51,16 @@ const Buttons = (): JSX.Element => {
     }
     setOpenFormModal(null);
     setAskBeforeCloseFormModal(false);
-  }, [dirty]);
+  }, [dirty, setAskBeforeCloseFormModal, setOpenFormModal]);
 
   const submitAndClose = useCallback(() => {
     submitForm();
     setAskBeforeCloseFormModal(false);
-  }, []);
+  }, [setAskBeforeCloseFormModal, submitForm]);
 
   const closeAskBeforeCloseModal = useCallback(() => {
     setAskBeforeCloseFormModal(false);
-  }, []);
+  }, [setAskBeforeCloseFormModal]);
 
   useEffect(() => {
     if (!askBeforeCloseForm || dirty) {
@@ -65,31 +68,31 @@ const Buttons = (): JSX.Element => {
     }
 
     close();
-  }, [askBeforeCloseForm, dirty]);
+  }, [askBeforeCloseForm, dirty, close]);
 
   return (
     <>
       <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
         {isSubmitting && <CircularProgress size={24} />}
-        <Button variant="ghost" onClick={close}>
+        <Button onClick={close} variant="ghost">
           {cancelLabel}
         </Button>
         <Button
           disabled={isSubmitDisabled}
-          iconVariant="start"
           icon={<SaveIcon />}
+          iconVariant="start"
           onClick={submitForm}
         >
           {confirmLabel}
         </Button>
       </Box>
       <UnsavedChangesDialog
+        closeDialog={closeAskBeforeCloseModal}
+        dialogOpened={askBeforeCloseForm && dirty}
+        discardChanges={discard}
         isSubmitting={isSubmitting}
         isValidForm={isValid}
         saveChanges={submitAndClose}
-        closeDialog={closeAskBeforeCloseModal}
-        discardChanges={discard}
-        dialogOpened={askBeforeCloseForm && dirty}
       />
     </>
   );

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

@@ -1,10 +1,11 @@
 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 type { Form as FormModel, GetItem } from '../models';
 import Buttons from './Buttons';
 
 const UpdateModal = <TItem extends { id: number; name: string }, TItemForm>({
@@ -24,11 +25,11 @@ const UpdateModal = <TItem extends { id: number; name: string }, TItemForm>({
   const openFormModal = useAtomValue(openFormModalAtom);
 
   const { initialValues, isLoading } = useGetItem({
-    id: openFormModal,
-    decoder,
+    adapter,
     baseEndpoint,
-    itemQueryKey,
-    adapter
+    decoder,
+    id: openFormModal,
+    itemQueryKey
   });
 
   const isModalOpen = useMemo(
@@ -38,22 +39,20 @@ const UpdateModal = <TItem extends { id: number; name: string }, TItemForm>({
 
   const openAskBeforeClose = useCallback(
     () => setAskBeforeCloseFormModal(true),
-    []
+    [setAskBeforeCloseFormModal]
   );
 
   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>
-    </>
+    <Modal onClose={openAskBeforeClose} open={isModalOpen} size={modalSize}>
+      <Modal.Header>{title}</Modal.Header>
+      <Modal.Body>
+        <Form
+          Buttons={Buttons}
+          initialValues={initialValues}
+          isLoading={isLoading}
+        />
+      </Modal.Body>
+    </Modal>
   );
 };
 

package/src/components/CrudPage/Listing.tsx

@@ -1,8 +1,8 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+
 import { ColumnType } from '../../../';
 import { MemoizedListing } from '../../Listing';
 import Actions from './Actions/Actions';
-import ColumnActions from './Columns/Actions';
 import {
   changeSortAtom,
   limitAtom,
@@ -10,7 +10,8 @@ import {
   sortFieldAtom,
   sortOrderAtom
 } from './atoms';
-import { ListingProps } from './models';
+import ColumnActions from './Columns/Actions';
+import type { ListingProps } from './models';
 
 const Listing = <TData extends { id: number; name: string }>({
   rows,
@@ -33,29 +34,29 @@ const Listing = <TData extends { id: number; name: string }>({
   const changeSort = useSetAtom(changeSortAtom);
 
   const listingColumns = columns.concat({
-    type: ColumnType.component,
+    Component: ColumnActions,
+    clickable: true,
     id: 'actions',
     label: '',
-    Component: ColumnActions,
-    width: 'min-content',
-    clickable: true
+    type: ColumnType.component,
+    width: 'min-content'
   });
 
   return (
     <MemoizedListing
-      actions={<Actions labels={labels} filters={filters} />}
+      actions={<Actions filters={filters} labels={labels} />}
       columns={listingColumns}
-      subItems={subItems}
-      loading={isLoading}
-      rows={rows}
       currentPage={page}
-      onPaginate={setPage}
       limit={limit}
+      loading={isLoading}
       onLimitChange={setLimit}
-      totalRows={total}
+      onPaginate={setPage}
+      onSort={changeSort}
+      rows={rows}
       sortField={sortField}
       sortOrder={sortOrder}
-      onSort={changeSort}
+      subItems={subItems}
+      totalRows={total}
     />
   );
 };

package/src/components/CrudPage/atoms.ts

@@ -1,5 +1,6 @@
 import { atom } from 'jotai';
-import { ItemToDelete } from './models';
+
+import type { ItemToDelete } from './models';
 
 export const pageAtom = atom(0);
 export const limitAtom = atom(10);

package/src/components/CrudPage/hooks/useDeleteItem.ts

@@ -1,12 +1,14 @@
 import {
   Method,
-  ResponseError,
+  type ResponseError,
   useMutationQuery,
   useSnackbar
 } from '@centreon/ui';
+
 import { useQueryClient } from '@tanstack/react-query';
-import { ReactElement } from 'react';
-import { ItemToDelete } from '../models';
+import type { ReactElement } from 'react';
+
+import type { ItemToDelete } from '../models';
 import { isAFunction } from '../utils';
 
 interface UseDeleteItem {
@@ -47,7 +49,7 @@ export const useDeleteItem = ({
     mutateAsync({ _meta: item });
 
   return {
-    isMutating,
-    deleteItem
+    deleteItem,
+    isMutating
   };
 };