@centreon/ui 26.3.4 → 26.3.6

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

@@ -1,6 +1,7 @@
 import { equals, isNotNil } from 'ramda';
+
 import { useFetchQuery } from '../../..';
-import { GetItem } from '../models';
+import type { GetItem } from '../models';
 
 interface UseGetItem<TItemForm> {
   initialValues?: TItemForm;
@@ -20,9 +21,9 @@ export const useGetItem = <
   id: number | 'add' | null;
 }): UseGetItem<TItemForm> => {
   const { data, isLoading } = useFetchQuery<TItem>({
+    decoder,
     getEndpoint: () => baseEndpoint(id),
     getQueryKey: () => [itemQueryKey, id],
-    decoder,
     queryOptions: {
       enabled: isNotNil(id) && !equals('add', id),
       suspense: false

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

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

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

@@ -1,4 +1,5 @@
 import { useAtomValue } from 'jotai';
+
 import {
   limitAtom,
   pageAtom,
@@ -6,7 +7,7 @@ import {
   sortFieldAtom,
   sortOrderAtom
 } from '../atoms';
-import { UseListingQueryKeyProps } from '../models';
+import type { UseListingQueryKeyProps } from '../models';
 
 export const useListingQueryKey = <TFilter>({
   filtersAtom,

package/src/components/CrudPage/index.tsx

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

package/src/components/CrudPage/models.ts

@@ -1,8 +1,9 @@
-import { PrimitiveAtom } from 'jotai';
-import { ReactElement } from 'react';
-import { JsonDecoder } from 'ts.data.json';
-import { Column, ListingModel, SearchParameter } from '../../..';
-import { ListingSubItems } from '../../Listing/models';
+import type { PrimitiveAtom } from 'jotai';
+import type { ReactElement } from 'react';
+import type { JsonDecoder } from 'ts.data.json';
+
+import type { Column, ListingModel, SearchParameter } from '../../..';
+import type { ListingSubItems } from '../../Listing/models';
 
 interface CrudPageRootLabels {
   title: string;
@@ -31,7 +32,10 @@ export interface UseGetItemsProps<TData, TFilters> {
   getSearchParameters: ({
     search,
     filters
-  }: { search: string; filters: TFilters }) => SearchParameter;
+  }: {
+    search: string;
+    filters: TFilters;
+  }) => SearchParameter;
 }
 
 export interface UseGetItemsState<TData> {

package/src/components/DataTable/DataListing.tsx

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

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

@@ -3,7 +3,6 @@ import { Box } from '@mui/material';
 
 import { IconButton } from '../..';
 import { ColumnType } from '../../Listing/models';
-
 import { DataTable } from '.';
 
 const data = Array(5)
@@ -16,7 +15,7 @@ const data = Array(5)
 
 const CardActions = (): JSX.Element => {
   return (
-    <IconButton ariaLabel="Delete" title="Delete" onClick={cy.stub()}>
+    <IconButton ariaLabel="Delete" onClick={cy.stub()} title="Delete">
       <Delete fontSize="small" />
     </IconButton>
   );
@@ -53,8 +52,8 @@ const initializeDataTableEmpty = (canCreate = false): void => {
             actions: {
               create: 'Create'
             },
-            title: 'Welcome',
-            description: 'Description'
+            description: 'Description',
+            title: 'Welcome'
           }}
           onCreate={cy.stub()}
         />

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

@@ -1,9 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-
 import { Box } from '@mui/material';
 
-import { ColumnType } from '../../Listing/models';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import { ColumnType } from '../../Listing/models';
 import { DataTable } from './index';
 import '../../ThemeProvider/tailwindcss.css';
 
@@ -22,7 +21,7 @@ export const Default: Story = {
           <DataTable.Item
             description={`Item description ${i}`}
             key={`k-${
-              // biome-ignore lint/suspicious/noArrayIndexKey:
+              // biome-ignore lint/suspicious/noArrayIndexKey: need it
               i
             }`}
             title={`Item ${i}`}
@@ -57,8 +56,8 @@ export const AsEmptyStateWithDescription: Story = {
           actions: {
             create: 'Create item'
           },
-          title: 'No items found',
-          description: 'Description'
+          description: 'Description',
+          title: 'No items found'
         }}
       />
     ),

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

@@ -2,6 +2,11 @@ import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles()((theme) => ({
   dataTable: {
+    '&[data-variant][data-is-empty="true"]': {
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%'
+    },
     '&[data-variant="grid"]': {
       '& > *': {
         width: 'auto'
@@ -13,11 +18,6 @@ const useStyles = makeStyles()((theme) => ({
     '&[data-variant="listing"]': {
       height: '100%'
     },
-    '&[data-variant][data-is-empty="true"]': {
-      display: 'flex',
-      justifyContent: 'center',
-      width: '100%'
-    },
     display: 'flex'
   },
   dataTableScrollContainer: {

package/src/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './DataTable.styles';
 

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableEmptyState } from './DataTableEmptyState';
 import '../../../ThemeProvider/tailwindcss.css';

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

@@ -6,7 +6,6 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row'
   },
   dataTableEmptyState: {
-    marginTop: theme.spacing(3),
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
@@ -18,6 +17,7 @@ const useStyles = makeStyles()((theme) => ({
     },
     height: '100%',
     justifyContent: 'center',
+    marginTop: theme.spacing(3),
     minHeight: '30vh',
     width: '100%'
   },

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

@@ -1,12 +1,10 @@
-import { ReactElement } from 'react';
-
-import { useTranslation } from 'react-i18next';
-
 import { Add as AddIcon } from '@mui/icons-material';
 import { Typography as MuiTypography } from '@mui/material';
 
-import { Button } from '../../Button';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 
+import { Button } from '../../Button';
 import { useStyles } from './DataTableEmptyState.styles';
 
 type ListEmptyStateProps = {
@@ -46,10 +44,10 @@ const DataTableEmptyState = ({
         {canCreate && (
           <Button
             aria-label="create"
+            data-testid={buttonCreateTestId}
             icon={<AddIcon />}
             iconVariant="start"
             onClick={() => onCreate?.()}
-            data-testid={buttonCreateTestId}
           >
             {t(labels.actions?.create || '')}
           </Button>

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableItem } from './DataTableItem';
 import '../../../ThemeProvider/tailwindcss.css';

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

@@ -1,5 +1,3 @@
-import React, { forwardRef, ReactElement, RefObject, useMemo } from 'react';
-
 import {
   Card as MuiCard,
   CardActionArea as MuiCardActionArea,
@@ -8,6 +6,13 @@ import {
   Typography as MuiTypography
 } from '@mui/material';
 
+import React, {
+  forwardRef,
+  type ReactElement,
+  type RefObject,
+  useMemo
+} from 'react';
+
 import { useStyles } from './DataTableItem.styles';
 
 export interface DataTableItemProps {

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

@@ -1,7 +1,6 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 import { LoadingSkeleton } from '../../..';
-
 import { useStyles } from './DataTableItem.styles';
 
 const DataTableItemSkeleton = (): ReactElement => {

package/src/components/ExpandableContainer/ExpandableContainer.tsx

@@ -1,8 +1,10 @@
 import { OpenInFull } from '@mui/icons-material';
+
 import { useState } from 'react';
+
 import { Modal } from '../Modal';
 import { useStyles } from './expandableContainer.styles';
-import { Parameters } from './models';
+import type { Parameters } from './models';
 import { labelExpand, labelReduce } from './translatedLabels';
 
 interface Props {
@@ -20,19 +22,19 @@ const ExpandableContainer = ({ children }: Props) => {
   const currentMode = isExpanded ? labelExpand : labelReduce;
 
   const reducedChildrenData = {
-    toggleExpand,
+    Icon: OpenInFull,
     isExpanded: false,
+    key: currentMode,
     label: labelExpand,
-    Icon: OpenInFull,
-    key: currentMode
+    toggleExpand
   };
 
   const expandedChildrenData = {
-    toggleExpand,
+    Icon: OpenInFull,
     isExpanded,
+    key: currentMode,
     label: labelReduce,
-    Icon: OpenInFull,
-    key: currentMode
+    toggleExpand
   };
 
   return (
@@ -40,18 +42,18 @@ const ExpandableContainer = ({ children }: Props) => {
       {children(reducedChildrenData)}
       {isExpanded && (
         <Modal
-          open={isExpanded}
-          size="xlarge"
           classes={{
             paper: classes.papper
           }}
+          hasCloseButton={false}
+          open={isExpanded}
           PaperProps={{
             style: {
-              width: '90vw',
-              maxWidth: '90vw'
+              maxWidth: '90vw',
+              width: '90vw'
             }
           }}
-          hasCloseButton={false}
+          size="xlarge"
         >
           {children(expandedChildrenData)}
         </Modal>

package/src/components/ExpandableContainer/models.ts

@@ -1,5 +1,6 @@
-import { SvgIconComponent } from '@mui/icons-material';
-import { CSSProperties, ForwardedRef } from 'react';
+import type { SvgIconComponent } from '@mui/icons-material';
+
+import type { CSSProperties, ForwardedRef } from 'react';
 
 export interface Parameters {
   toggleExpand: () => void;

package/src/components/Form/AccessRights/AccessRights.cypress.spec.tsx

@@ -1,7 +1,6 @@
-import { Provider, createStore } from 'jotai';
+import { createStore, Provider } from 'jotai';
 
 import { Method, SnackbarProvider, TestQueryProvider } from '../../..';
-
 import { AccessRights } from './AccessRights';
 import {
   buildResult,
@@ -46,9 +45,9 @@ const initialize = ({
               initialValues={initialValues}
               labels={labels}
               loading={loading}
+              onChange={change}
               roles={roles}
               submit={save}
-              onChange={change}
             />
           </Provider>
         </TestQueryProvider>

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -1,8 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { http, HttpResponse } from 'msw';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HttpResponse, http } from 'msw';
 
 import { SnackbarProvider } from '../../..';
-
 import { AccessRights } from './AccessRights';
 import {
   accessRightsWithStates,

package/src/components/Form/AccessRights/AccessRights.tsx

@@ -1,13 +1,12 @@
-import { SelectEntry } from '../../..';
-
+import type { SelectEntry } from '../../..';
 import { useAccessRightsStyles } from './AccessRights.styles';
 import Actions from './Actions/Actions';
 import List from './List/List';
 import ListSkeleton from './List/ListSkeleton';
+import type { AccessRightInitialValues, Endpoints, Labels } from './models';
 import Provider from './Provider';
 import ShareInput from './ShareInput/ShareInput';
 import Stats from './Stats/Stats';
-import { AccessRightInitialValues, Endpoints, Labels } from './models';
 import { useAccessRightsChange } from './useAccessRightsChange';
 import { useAccessRightsInitValues } from './useAccessRightsInitValues';
 

package/src/components/Form/AccessRights/Actions/Actions.tsx

@@ -1,10 +1,9 @@
-import { useTranslation } from 'react-i18next';
-
 import { CircularProgress } from '@mui/material';
 
-import { Button } from '../../..';
-import { AccessRightInitialValues, Labels } from '../models';
+import { useTranslation } from 'react-i18next';
 
+import { Button } from '../../..';
+import type { AccessRightInitialValues, Labels } from '../models';
 import { useActionsStyles } from './Actions.styles';
 import { useActions } from './useActions';
 
@@ -41,8 +40,8 @@ const Actions = ({
       {cancel && (
         <Button
           aria-label={t(labels.cancel)}
-          variant="secondary"
           onClick={onCancel}
+          variant="secondary"
         >
           {t(labels.cancel)}
         </Button>
@@ -52,8 +51,8 @@ const Actions = ({
         disabled={isSubmitting || !dirty}
         icon={isSubmitting ? <CircularProgress size={24} /> : null}
         iconVariant={isSubmitting ? 'start' : 'none'}
-        variant="primary"
         onClick={save}
+        variant="primary"
       >
         {t(labels.save)}
       </Button>

package/src/components/Form/AccessRights/Actions/useActions.ts

@@ -2,7 +2,7 @@ import { useAtomValue } from 'jotai';
 import { equals } from 'ramda';
 
 import { initialValuesAtom, valuesAtom } from '../atoms';
-import { AccessRightInitialValues, Labels } from '../models';
+import type { AccessRightInitialValues, Labels } from '../models';
 import { formatValue, formatValueForSubmition } from '../utils';
 
 interface Props {

package/src/components/Form/AccessRights/List/Item.tsx

@@ -1,13 +1,12 @@
-import { useSetAtom } from 'jotai';
-
 import { Chip } from '@mui/material';
 
-import { SelectEntry } from '../../../..';
+import { useSetAtom } from 'jotai';
+
+import type { SelectEntry } from '../../../..';
 import { List } from '../../../List';
 import { updateContactRoleDerivedAtom } from '../atoms';
 import RoleSelectField from '../common/RoleSelectField';
-import { AccessRight, Labels } from '../models';
-
+import type { AccessRight, Labels } from '../models';
 import { useListStyles } from './List.styles';
 import RemoveAccessRight from './RemoveAccessRight';
 import StateChip from './StateChip';
@@ -56,10 +55,10 @@ const Item = ({
           {state && <StateChip {...state} />}
           <RoleSelectField
             disabled={isRemoved}
+            onChange={changeRole}
             roles={roles}
             testId={`role-${name}`}
             value={role}
-            onChange={changeRole}
           />
           <RemoveAccessRight index={index} isRemoved={isRemoved} name={name} />
         </>

package/src/components/Form/AccessRights/List/List.tsx

@@ -1,14 +1,13 @@
+import { Typography } from '@mui/material';
+
 import { useAtomValue } from 'jotai';
 import { isEmpty } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
-import { Typography } from '@mui/material';
-
-import { SelectEntry, Subtitle } from '../../../..';
+import { type SelectEntry, Subtitle } from '../../../..';
 import { List as UIList } from '../../../List';
 import { valuesAtom } from '../atoms';
-import { Labels } from '../models';
-
+import type { Labels } from '../models';
 import Item from './Item';
 import { useListStyles } from './List.styles';
 

package/src/components/Form/AccessRights/List/ListItemSkeleton.tsx

@@ -1,7 +1,6 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 import { List } from '../../../List';
-
 import { useListStyles } from './List.styles';
 
 const ListItemSkeleton = (): ReactElement => {

package/src/components/Form/AccessRights/List/ListSkeleton.tsx

@@ -1,7 +1,6 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 import { List } from '../../../List';
-
 import { useListStyles } from './List.styles';
 import ListItemSkeleton from './ListItemSkeleton';
 

package/src/components/Form/AccessRights/List/RemoveAccessRight.tsx

@@ -1,8 +1,8 @@
-import { useSetAtom } from 'jotai';
-
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import RotateLeftIcon from '@mui/icons-material/RotateLeft';
 
+import { useSetAtom } from 'jotai';
+
 import { IconButton } from '../../..';
 import { removeAccessRightDerivedAtom } from '../atoms';
 
@@ -29,8 +29,8 @@ const RemoveAccessRight = ({ index, isRemoved, name }: Props): JSX.Element => {
       data-removed={isRemoved}
       data-testid={`remove-${name}`}
       icon={icon}
-      size="small"
       onClick={isRemoved ? recover : remove}
+      size="small"
     />
   );
 };

package/src/components/Form/AccessRights/List/StateChip.tsx

@@ -1,7 +1,6 @@
 import { Chip } from '@mui/material';
 
-import { ItemState } from '../models';
-
+import type { ItemState } from '../models';
 import { useListStyles } from './List.styles';
 
 interface Props {

package/src/components/Form/AccessRights/List/useItem.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import { AccessRight, ItemState, Labels } from '../models';
+import { type AccessRight, ItemState, type Labels } from '../models';
 
 interface UseItemState {
   getState: () => { label: string; state: ItemState } | null;
@@ -54,7 +54,7 @@ export const useItem = ({
     }
 
     return null;
-  }, [isRemoved, isUpdated, isAdded]);
+  }, [isRemoved, isUpdated, isAdded, list.added, list.removed, list.updated]);
 
   return {
     getState,

package/src/components/Form/AccessRights/Provider.tsx

@@ -1,6 +1,5 @@
-import { ReactNode } from 'react';
-
-import { Provider as JotaiProvider, createStore } from 'jotai';
+import { createStore, Provider as JotaiProvider } from 'jotai';
+import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;

package/src/components/Form/AccessRights/ShareInput/ContactSwitch.tsx

@@ -1,12 +1,11 @@
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
+
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
-import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
-
 import { Subtitle } from '../../../..';
 import { contactTypeAtom } from '../atoms';
-import { ContactType, Labels } from '../models';
-
+import { ContactType, type Labels } from '../models';
 import { useContactSwitchStyles } from './ShareInput.styles';
 
 interface Props {
@@ -27,10 +26,10 @@ const ContactSwitch = ({ labels }: Props): JSX.Element => {
     <>
       <Subtitle>{t(labels.title)}</Subtitle>
       <RadioGroup
-        row
         className={classes.inputs}
-        value={contactType}
         onChange={change}
+        row
+        value={contactType}
       >
         <FormControlLabel
           control={<Radio />}