@centreon/ui 24.11.2 → 24.11.4

package/src/components/CrudPage/Listing.tsx

@@ -0,0 +1,63 @@
+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,
+  pageAtom,
+  sortFieldAtom,
+  sortOrderAtom
+} from './atoms';
+import { ListingProps } from './models';
+
+const Listing = <TData extends { id: number; name: string }>({
+  rows,
+  total,
+  isLoading,
+  columns,
+  subItems,
+  labels,
+  filters
+}: ListingProps<TData> & {
+  labels: {
+    search: string;
+    add: string;
+  };
+}): JSX.Element => {
+  const [page, setPage] = useAtom(pageAtom);
+  const [limit, setLimit] = useAtom(limitAtom);
+  const sortOrder = useAtomValue(sortOrderAtom);
+  const sortField = useAtomValue(sortFieldAtom);
+  const changeSort = useSetAtom(changeSortAtom);
+
+  const listingColumns = columns.concat({
+    type: ColumnType.component,
+    id: 'actions',
+    label: '',
+    Component: ColumnActions,
+    width: 'min-content',
+    clickable: true
+  });
+
+  return (
+    <MemoizedListing
+      actions={<Actions labels={labels} filters={filters} />}
+      columns={listingColumns}
+      subItems={subItems}
+      loading={isLoading}
+      rows={rows}
+      currentPage={page}
+      onPaginate={setPage}
+      limit={limit}
+      onLimitChange={setLimit}
+      totalRows={total}
+      sortField={sortField}
+      sortOrder={sortOrder}
+      onSort={changeSort}
+    />
+  );
+};
+
+export default Listing;

package/src/components/CrudPage/atoms.ts

@@ -0,0 +1,30 @@
+import { atom } from 'jotai';
+import { ItemToDelete } from './models';
+
+export const pageAtom = atom(0);
+export const limitAtom = atom(10);
+export const searchAtom = atom('');
+export const sortOrderAtom = atom('asc');
+export const sortFieldAtom = atom('name');
+export const openFormModalAtom = atom<number | 'add' | null>(null);
+export const itemToDeleteAtom = atom<ItemToDelete | null>(null);
+export const canDeleteSubItemsAtom = atom<boolean | undefined>(true);
+export const formLabelButtonsAtom = atom({
+  add: {
+    cancel: 'Cancel',
+    confirm: 'Save'
+  },
+  update: {
+    cancel: 'Cancel',
+    confirm: 'Save'
+  }
+});
+export const askBeforeCloseFormModalAtom = atom(false);
+
+export const changeSortAtom = atom(
+  null,
+  (_get, set, { sortOrder, sortField }) => {
+    set(sortOrderAtom, sortOrder);
+    set(sortFieldAtom, sortField);
+  }
+);

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

@@ -0,0 +1,53 @@
+import {
+  Method,
+  ResponseError,
+  useMutationQuery,
+  useSnackbar
+} from '@centreon/ui';
+import { useQueryClient } from '@tanstack/react-query';
+import { ReactElement } from 'react';
+import { ItemToDelete } from '../models';
+import { isAFunction } from '../utils';
+
+interface UseDeleteItem {
+  isMutating: boolean;
+  deleteItem: (item: ItemToDelete) => Promise<object | ResponseError>;
+}
+
+interface UseDeleteItemProps {
+  deleteEndpoint: (item: ItemToDelete) => string;
+  listingQueryKey: string;
+  successMessage:
+    | ((item: ItemToDelete) => string | ReactElement)
+    | string
+    | ReactElement;
+}
+
+export const useDeleteItem = ({
+  deleteEndpoint,
+  listingQueryKey,
+  successMessage
+}: UseDeleteItemProps): UseDeleteItem => {
+  const queryClient = useQueryClient();
+
+  const { showSuccessMessage } = useSnackbar();
+
+  const { mutateAsync, isMutating } = useMutationQuery<object, ItemToDelete>({
+    getEndpoint: (_meta) => deleteEndpoint(_meta),
+    method: Method.DELETE,
+    onSuccess: (_data, { _meta }) => {
+      queryClient.invalidateQueries({ queryKey: [listingQueryKey] });
+      showSuccessMessage(
+        isAFunction(successMessage) ? successMessage(_meta) : successMessage
+      );
+    }
+  });
+
+  const deleteItem = (item: ItemToDelete): Promise<object | ResponseError> =>
+    mutateAsync({ _meta: item });
+
+  return {
+    isMutating,
+    deleteItem
+  };
+};

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

@@ -0,0 +1,36 @@
+import { equals, isNotNil } from 'ramda';
+import { useFetchQuery } from '../../..';
+import { GetItem } from '../models';
+
+interface UseGetItem<TItemForm> {
+  initialValues?: TItemForm;
+  isLoading: boolean;
+}
+
+export const useGetItem = <
+  TItem extends { id: number; name: string },
+  TItemForm
+>({
+  id,
+  decoder,
+  baseEndpoint,
+  itemQueryKey,
+  adapter
+}: GetItem<TItem, TItemForm> & {
+  id: number | 'add' | null;
+}): UseGetItem<TItemForm> => {
+  const { data, isLoading } = useFetchQuery<TItem>({
+    getEndpoint: () => baseEndpoint(id),
+    getQueryKey: () => [itemQueryKey, id],
+    decoder,
+    queryOptions: {
+      enabled: isNotNil(id) && !equals('add', id),
+      suspense: false
+    }
+  });
+
+  return {
+    initialValues: data ? adapter(data) : undefined,
+    isLoading
+  };
+};

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

@@ -0,0 +1,67 @@
+import { useAtomValue } from 'jotai';
+import { isEmpty } from 'ramda';
+import { ListingModel, buildListingEndpoint } from '../../..';
+import useFetchQuery from '../../../api/useFetchQuery';
+import {
+  limitAtom,
+  pageAtom,
+  searchAtom,
+  sortFieldAtom,
+  sortOrderAtom
+} from '../atoms';
+import { UseGetItemsProps, UseGetItemsState } from '../models';
+import { useListingQueryKey } from './useListingQueryKey';
+
+export const useGetItems = <TData, TFilters>({
+  queryKeyName,
+  filtersAtom,
+  decoder,
+  getSearchParameters,
+  baseEndpoint
+}: UseGetItemsProps<TData, TFilters>): UseGetItemsState<TData> => {
+  const queryKey = useListingQueryKey({ queryKeyName, filtersAtom });
+
+  const page = useAtomValue(pageAtom);
+  const limit = useAtomValue(limitAtom);
+  const search = useAtomValue(searchAtom);
+  const sortOrder = useAtomValue(sortOrderAtom);
+  const sortField = useAtomValue(sortFieldAtom);
+  const filters = useAtomValue(filtersAtom);
+
+  const { data, isLoading } = useFetchQuery<ListingModel<TData>>({
+    decoder,
+    getQueryKey: () => queryKey,
+    getEndpoint: () =>
+      buildListingEndpoint({
+        baseEndpoint,
+        parameters: {
+          page: page + 1,
+          limit,
+          sort: {
+            [sortField]: sortOrder
+          },
+          search: {
+            regex: {
+              fields: ['name'],
+              value: search
+            },
+            ...getSearchParameters({ filters, search })
+          }
+        }
+      }),
+    queryOptions: {
+      suspense: false
+    }
+  });
+
+  const items = data?.result || [];
+  const hasItems = !!data;
+
+  return {
+    items,
+    isDataEmpty: isEmpty(items),
+    hasItems,
+    isLoading,
+    total: data?.meta.total || 0
+  };
+};

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

@@ -0,0 +1,31 @@
+import { useAtomValue } from 'jotai';
+import {
+  limitAtom,
+  pageAtom,
+  searchAtom,
+  sortFieldAtom,
+  sortOrderAtom
+} from '../atoms';
+import { UseListingQueryKeyProps } from '../models';
+
+export const useListingQueryKey = <TFilter>({
+  filtersAtom,
+  queryKeyName
+}: UseListingQueryKeyProps<TFilter>): Array<string | number> => {
+  const page = useAtomValue(pageAtom);
+  const limit = useAtomValue(limitAtom);
+  const search = useAtomValue(searchAtom);
+  const sortOrder = useAtomValue(sortOrderAtom);
+  const sortField = useAtomValue(sortFieldAtom);
+  const filters = useAtomValue(filtersAtom);
+
+  return [
+    queryKeyName,
+    limit,
+    page,
+    search,
+    sortField,
+    sortOrder,
+    JSON.stringify(filters)
+  ];
+};

package/src/components/CrudPage/index.tsx

@@ -0,0 +1,7 @@
+import { CrudPageRoot } from './CrudPageRoot';
+import { askBeforeCloseFormModalAtom, openFormModalAtom } from './atoms';
+
+export const CrudPage = Object.assign(CrudPageRoot, {
+  openFormModalAtom,
+  askBeforeCloseFormModalAtom
+});

package/src/components/CrudPage/models.ts

@@ -0,0 +1,118 @@
+import { PrimitiveAtom } from 'jotai';
+import { ReactElement } from 'react';
+import { JsonDecoder } from 'ts.data.json';
+import { Column, ListingModel, SearchParameter } from '../../..';
+import { ListingSubItems } from '../../Listing/models';
+
+interface CrudPageRootLabels {
+  title: string;
+  welcome: {
+    title: string;
+    description?: string;
+  };
+  actions: {
+    create: string;
+  };
+  listing: {
+    search: string;
+  };
+}
+
+export interface UseListingQueryKeyProps<TFilters> {
+  queryKeyName: string;
+  filtersAtom: PrimitiveAtom<TFilters>;
+}
+
+export interface UseGetItemsProps<TData, TFilters> {
+  queryKeyName: string;
+  filtersAtom: PrimitiveAtom<TFilters>;
+  decoder?: JsonDecoder.Decoder<ListingModel<TData>>;
+  baseEndpoint: string;
+  getSearchParameters: ({
+    search,
+    filters
+  }: { search: string; filters: TFilters }) => SearchParameter;
+}
+
+export interface UseGetItemsState<TData> {
+  items: Array<TData>;
+  hasItems: boolean;
+  isDataEmpty: boolean;
+  isLoading: boolean;
+  total: number;
+}
+
+export interface DeleteItem {
+  deleteEndpoint: (item: ItemToDelete) => string;
+  modalSize?: 'small' | 'medium' | 'large' | 'xlarge';
+  labels: {
+    successMessage:
+      | ((item: ItemToDelete) => string | ReactElement)
+      | string
+      | ReactElement;
+    title:
+      | ((item: ItemToDelete) => string | ReactElement)
+      | string
+      | ReactElement;
+    description:
+      | ((item: ItemToDelete) => string | ReactElement)
+      | string
+      | ReactElement;
+    cancel: string;
+    confirm: string;
+  };
+}
+
+export interface GetItem<TItem, TItemForm> {
+  baseEndpoint: (id: number) => string;
+  decoder?: JsonDecoder.Decoder<TItem>;
+  adapter: (item: TItem) => TItemForm;
+  itemQueryKey: string;
+}
+
+export interface Form<TItem, TItemForm> {
+  Form: (props: {
+    Buttons: () => JSX.Element;
+    initialValues?: TItemForm;
+    isLoading?: boolean;
+  }) => JSX.Element;
+  getItem: GetItem<TItem, TItemForm>;
+  modalSize?: 'small' | 'medium' | 'large' | 'xlarge';
+  labels: {
+    add: {
+      title: string;
+      cancel: string;
+      confirm: string;
+    };
+    update: {
+      title: string;
+      cancel: string;
+      confirm: string;
+    };
+  };
+}
+
+export interface ListingProps<TData> {
+  rows: Array<TData>;
+  total: number;
+  isLoading: boolean;
+  columns: Array<Column>;
+  subItems?: ListingSubItems & {
+    canDeleteSubItems?: boolean;
+  };
+  filters: JSX.Element;
+}
+
+export interface ItemToDelete {
+  id: number;
+  name: string;
+  parent?: { id: number; name: string };
+}
+
+export interface CrudPageRootProps<TData, TFilters, TItem, TItemForm>
+  extends UseGetItemsProps<TData, TFilters>,
+    Omit<ListingProps<TData>, 'rows' | 'total' | 'isLoading'> {
+  form: Form<TItem, TItemForm>;
+  labels: CrudPageRootLabels;
+  deleteItem: DeleteItem;
+}

package/src/components/CrudPage/utils.ts

@@ -0,0 +1,4 @@
+import { equals, type } from 'ramda';
+
+export const isAFunction = (property): boolean =>
+  equals('Function', type(property));

package/src/components/DataTable/DataTable.cypress.spec.tsx

@@ -53,7 +53,8 @@ const initializeDataTableEmpty = (canCreate = false): void => {
             actions: {
               create: 'Create'
             },
-            title: 'Welcome'
+            title: 'Welcome',
+            description: 'Description'
           }}
           onCreate={cy.stub()}
         />

package/src/components/DataTable/DataTable.stories.tsx

@@ -48,6 +48,23 @@ export const AsEmptyState: Story = {
   }
 };
 
+export const AsEmptyStateWithDescription: Story = {
+  args: {
+    children: (
+      <DataTable.EmptyState
+        labels={{
+          actions: {
+            create: 'Create item'
+          },
+          title: 'No items found',
+          description: 'Description'
+        }}
+      />
+    ),
+    isEmpty: true
+  }
+};
+
 export const withFixedHeightContainer: Story = {
   args: { ...Default.args },
   render: (args) => (

package/src/components/DataTable/DataTable.styles.ts

@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
       },
       display: 'grid',
       gridGap: theme.spacing(2.5),
-      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
+      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(53)})`
     },
     '&[data-variant="listing"]': {
       height: '100%'

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -10,7 +10,6 @@ const useStyles = makeStyles()((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(4),
-
     h2: {
       color: theme.palette.text.primary,
       font: 'normal normal 600 34px/36px Roboto',
@@ -20,6 +19,9 @@ const useStyles = makeStyles()((theme) => ({
     justifyContent: 'center',
     minHeight: '30vh',
     width: '100%'
+  },
+  description: {
+    maxWidth: '65%'
   }
 }));
 

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -16,6 +16,7 @@ type ListEmptyStateProps = {
       create: string;
     };
     title: string;
+    description?: string;
   };
   onCreate?: () => void;
 };
@@ -34,6 +35,11 @@ const DataTableEmptyState = ({
       data-testid="data-table-empty-state"
     >
       <MuiTypography variant="h2">{t(labels.title)}</MuiTypography>
+      {labels.description && (
+        <MuiTypography className={classes.description}>
+          {t(labels.description)}
+        </MuiTypography>
+      )}
       <div className={classes.actions}>
         {canCreate && (
           <Button

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -6,6 +6,16 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
+  cardActions: {
+    backgroundColor: theme.palette.background.paper,
+    bottom: 0,
+    position: 'absolute',
+    width: '100%'
+  },
+  cardContent: {
+    padding: theme.spacing(2),
+    zIndex: 1
+  },
   dataTableItem: {
     '& .MuiCardActionArea-root': {
       alignItems: 'flex-start',
@@ -22,16 +32,32 @@ const useStyles = makeStyles()((theme) => ({
       display: 'flex',
       justifyContent: 'space-between'
     },
+    '&:hover img[alt*="thumbnail"]': {
+      transform: 'scale(1.1)',
+      transformOrigin: 'center'
+    },
     borderRadius: theme.shape.borderRadius,
     display: 'flex',
     flexDirection: 'column',
-    height: '186px',
+    height: '250px',
     justifyContent: 'space-between',
     p: {
       color: theme.palette.text.secondary,
       letterSpacing: '0',
       margin: '0'
-    }
+    },
+    position: 'relative'
+  },
+  description: {
+    maxHeight: '42px',
+    overflow: 'hidden'
+  },
+  thumbnail: {
+    height: theme.spacing(10.25),
+    objectFit: 'cover',
+    objectPosition: 'top',
+    transition: 'transform 150ms ease-out',
+    width: '100%'
   }
 }));
 

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -16,6 +16,7 @@ export interface DataTableItemProps {
   hasActions?: boolean;
   hasCardAction?: boolean;
   onClick?: () => void;
+  thumbnail?: string | null;
   title: string;
 }
 
@@ -27,7 +28,8 @@ const DataTableItem = forwardRef(
       hasCardAction = false,
       hasActions = false,
       onClick,
-      Actions
+      Actions,
+      thumbnail
     }: DataTableItemProps,
     ref
   ): ReactElement => {
@@ -46,15 +48,28 @@ const DataTableItem = forwardRef(
         variant="outlined"
       >
         <ActionArea aria-label="view" onClick={() => onClick?.()}>
-          <MuiCardContent>
+          {thumbnail && (
+            <img
+              alt={`thumbnail-${title}-${description}`}
+              className={classes.thumbnail}
+              data-testId={`thumbnail-${title}-${description}`}
+              loading="lazy"
+              src={thumbnail}
+            />
+          )}
+          <MuiCardContent className={classes.cardContent}>
             <MuiTypography fontWeight={500} variant="h5">
               {title}
             </MuiTypography>
-            {description && <MuiTypography>{description}</MuiTypography>}
+            {description && (
+              <MuiTypography className={classes.description}>
+                {description}
+              </MuiTypography>
+            )}
           </MuiCardContent>
         </ActionArea>
         {hasActions && (
-          <MuiCardActions>
+          <MuiCardActions className={classes.cardActions}>
             <span />
             <span>{Actions}</span>
           </MuiCardActions>

package/src/components/Layout/AreaIndicator.tsx

@@ -25,7 +25,7 @@ const AreaIndicator = ({
       data-depth={depth}
       style={{ height, width }}
     >
-      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      {/* biome-ignore lint/a11y: */}
       <label>{name}</label>
       {children}
     </div>

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -2,8 +2,10 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
   pageLayout: {
+    height: '100%',
     display: 'grid',
-    gridTemplateRows: 'min-content',
+    gridTemplateRows: 'auto 1fr',
+    height: '100%',
     overflow: 'hidden'
   },
   pageLayoutActions: {
@@ -22,8 +24,11 @@ export const useStyles = makeStyles()((theme) => ({
     '&[data-has-background="true"]': {
       backgroundColor: theme.palette.layout.body.background
     },
+    '&[data-has-actions="true"]': {
+      gridTemplateRows: 'min-content auto',
+    },
     display: 'grid',
-    gridTemplateRows: 'min-content',
+    gridTemplateRows: 'auto',
     overflow: 'hidden',
     padding: theme.spacing(1.5, 3, 5)
   },

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,6 +17,7 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
+      data-has-actions={!!children?.length}
       id="page-body"
     >
       {children}

package/src/components/Modal/Modal.styles.ts

@@ -45,7 +45,7 @@ const useStyles = makeStyles<{
       width: '400px'
     },
     '&[data-size="xlarge"] .MuiDialog-paper': {
-      maxWidth: '1400px',
+      maxWidth: '900px',
       width: 'calc(100% - 64px)'
     }
   },

package/src/components/Zoom/Zoom.tsx

@@ -3,10 +3,10 @@ import { Zoom as VisxZoom } from '@visx/zoom';
 import { ParentSize } from '../..';
 
 import ZoomContent from './ZoomContent';
-import { MinimapPosition } from './models';
+import type { MinimapPosition } from './models';
 
 export interface ZoomProps {
-  children: JSX.Element | (({ width, height }) => JSX.Element);
+  children: JSX.Element | (({ width, height, transformMatrix }) => JSX.Element);
   id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;