@centreon/ui 24.11.14 → 24.11.21

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/DataListing.tsx

@@ -0,0 +1,6 @@
+import { Listing, ListingProps } from '../..';
+import { RowId } from '../../Listing/models';
+
+export const DataListing = <TRow extends { id: RowId }>(
+  props: ListingProps<TRow>
+): JSX.Element => <Listing<TRow> {...props} />;

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

@@ -0,0 +1,175 @@
+import Delete from '@mui/icons-material/Delete';
+import { Box } from '@mui/material';
+
+import { IconButton } from '../..';
+import { ColumnType } from '../../Listing/models';
+
+import { DataTable } from '.';
+
+const data = Array(5)
+  .fill(0)
+  .map((_, idx) => ({
+    description: `Description ${idx}`,
+    id: idx,
+    title: `Entity ${idx}`
+  }));
+
+const CardActions = (): JSX.Element => {
+  return (
+    <IconButton ariaLabel="Delete" title="Delete" onClick={cy.stub()}>
+      <Delete fontSize="small" />
+    </IconButton>
+  );
+};
+
+const initializeDataTableGrid = ({ hasActions, hasCardAction }): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable variant="grid">
+        {data.map(({ title, description }) => (
+          <DataTable.Item
+            Actions={<CardActions />}
+            description={description}
+            hasActions={hasActions}
+            hasCardAction={hasCardAction}
+            key={title}
+            title={title}
+          />
+        ))}
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableEmpty = (canCreate = false): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <DataTable isEmpty variant="grid">
+        <DataTable.EmptyState
+          canCreate={canCreate}
+          labels={{
+            actions: {
+              create: 'Create'
+            },
+            title: 'Welcome',
+            description: 'Description'
+          }}
+          onCreate={cy.stub()}
+        />
+      </DataTable>
+    )
+  });
+};
+
+const initializeDataTableListing = (): void => {
+  cy.viewport(1200, 590);
+  cy.mount({
+    Component: (
+      <Box sx={{ height: '100vh' }}>
+        <DataTable variant="listing">
+          <DataTable.Listing
+            columns={[
+              {
+                getFormattedString: (row) => row.title,
+                id: 'title',
+                label: 'Title',
+                type: ColumnType.string
+              },
+              {
+                getFormattedString: (row) => row.description,
+                id: 'description',
+                label: 'Description',
+                type: ColumnType.string
+              }
+            ]}
+            rows={data}
+          />
+        </DataTable>
+      </Box>
+    )
+  });
+};
+
+describe('DataTable: Grid', () => {
+  it('displays items with title and description only', () => {
+    initializeDataTableGrid({
+      hasActions: false,
+      hasCardAction: false
+    });
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with actions', () => {
+    initializeDataTableGrid({
+      hasActions: true,
+      hasCardAction: false
+    });
+
+    cy.findAllByLabelText('Delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action only', () => {
+    initializeDataTableGrid({
+      hasActions: false,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+
+  it('displays items with card action and bottom actions', () => {
+    initializeDataTableGrid({
+      hasActions: true,
+      hasCardAction: true
+    });
+
+    cy.findAllByLabelText('view').should('have.length', 5);
+    cy.findAllByLabelText('Delete').should('have.length', 5);
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Empty', () => {
+  it('displays the title', () => {
+    initializeDataTableEmpty();
+
+    cy.contains('Welcome').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title and the action button', () => {
+    initializeDataTableEmpty(true);
+
+    cy.contains('Welcome').should('be.visible');
+    cy.contains('Create').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('DataTable: Listing', () => {
+  it('displays the listing', () => {
+    initializeDataTableListing();
+
+    data.forEach(({ title, description }) => {
+      cy.contains(title).should('be.visible');
+      cy.contains(description).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+});

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

@@ -0,0 +1,111 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Box } from '@mui/material';
+
+import { ColumnType } from '../../Listing/models';
+
+import { DataTable } from './index';
+
+const meta: Meta<typeof DataTable> = {
+  component: DataTable
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        {[...Array(5)].map((_, i) => (
+          <DataTable.Item
+            description={`Item description ${i}`}
+            key={`k-${
+              // biome-ignore lint/suspicious/noArrayIndexKey:
+              i
+            }`}
+            title={`Item ${i}`}
+          />
+        ))}
+      </>
+    )
+  }
+};
+
+export const AsEmptyState: Story = {
+  args: {
+    children: (
+      <DataTable.EmptyState
+        labels={{
+          actions: {
+            create: 'Create item'
+          },
+          title: 'No items found'
+        }}
+      />
+    ),
+    isEmpty: true
+  }
+};
+
+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) => (
+    <div style={{ height: '400px' }}>
+      <DataTable {...args} />
+    </div>
+  )
+};
+
+const ListingTemplate = (args): JSX.Element => (
+  <Box sx={{ height: '80vh' }}>
+    <DataTable {...args} />
+  </Box>
+);
+
+export const listing: Story = {
+  args: {
+    children: (
+      <DataTable.Listing
+        columns={[
+          {
+            getFormattedString: (row) => row.title,
+            id: 'title',
+            label: 'Title',
+            type: ColumnType.string
+          },
+          {
+            getFormattedString: (row) => row.description,
+            id: 'description',
+            label: 'Description',
+            type: ColumnType.string
+          }
+        ]}
+        rows={[...Array(5)].map((_, i) => ({
+          description: `Item description ${i}`,
+          id: i,
+          title: `Item ${i}`
+        }))}
+      />
+    ),
+    variant: 'listing'
+  },
+  render: ListingTemplate
+};