@centreon/ui 24.10.5 → 24.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.10.5",
+  "version": "24.10.7",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -18,6 +18,7 @@
     "cypress:run": "cypress run --component --browser=chrome",
     "tokens:transform": "TS_NODE_PROJECT=tsconfig.node.json ts-node style-dictionary.transform.ts"
   },
+  "type": "module",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -53,8 +54,6 @@
     "@cypress/webpack-dev-server": "^3.10.1",
     "@faker-js/faker": "^8.4.1",
     "@mdx-js/react": "^3.0.1",
-    "@modern-js/prod-server": "^2.58.1",
-    "@modern-js/storybook": "^2.58.1",
     "@simonsmith/cypress-image-snapshot": "^9.1.0",
     "@storybook/addon-a11y": "^8.2.9",
     "@storybook/addon-docs": "^8.2.9",

package/src/Dashboard/DashboardLayout.stories.tsx

@@ -95,7 +95,7 @@ export const normal = DashboardTemplate.bind({});
 
 export const withManyPanels = DashboardTemplate.bind({});
 withManyPanels.args = {
-  layout: generateLayout(1000)
+  layout: generateLayout(100)
 };
 
 export const withItemHeader = DashboardTemplate.bind({});

package/src/InputField/Text/index.tsx

@@ -77,7 +77,7 @@ const OptionalLabelInputAdornment = ({
 type SizeVariant = 'large' | 'medium' | 'small' | 'compact';
 
 export type TextProps = {
-  EndAdornment?: React.FC;
+  EndAdornment?: React.FC | JSX.Element;
   StartAdornment?: React.FC;
   ariaLabel?: string;
   autoSize?: boolean;

package/src/Listing/index.tsx

@@ -148,7 +148,13 @@ const defaultColumnConfiguration = {
 
 export const performanceRowsLimit = 60;
 
-const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
+const Listing = <
+  TRow extends {
+    id: RowId;
+    internalListingParentId?: RowId;
+    internalListingParentRow: TRow;
+  }
+>({
   customListingComponent,
   displayCustomListing,
   limit = 10,
@@ -248,7 +254,8 @@ const Listing = <TRow extends { id: RowId; internalListingParentId?: RowId }>({
                   row,
                   ...row[subItems.getRowProperty()].map((subRow) => ({
                     ...subRow,
-                    internalListingParentId: row.id
+                    internalListingParentId: row.id,
+                    internalListingParentRow: row
                   }))
                 ];
               }

package/src/Listing/models.ts

@@ -76,3 +76,11 @@ export interface TableStyleAtom {
     width: number;
   };
 }
+
+export interface ListingSubItems {
+  canCheckSubItems: boolean;
+  enable: boolean;
+  getRowProperty: (row?) => string;
+  labelCollapse: string;
+  labelExpand: string;
+}

package/src/MultiSelectEntries/index.tsx

@@ -134,8 +134,6 @@ const MultiSelectEntries = ({
         [classes.container]: true
       } as CxArg)}
       ref={hoverRef as Ref<HTMLDivElement>}
-      role="button"
-      tabIndex={0}
       onClick={onClick}
       onKeyDown={onClick}
     >

package/src/PopoverMenu/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@mui/material';
 import type { PopperProps } from '@mui/material/Popper';
 
+import { equals, type } from 'ramda';
 import { IconButton } from '..';
 
 const useStyles = makeStyles()((theme) => ({
@@ -29,8 +30,9 @@ interface PopoverData {
 
 interface Props {
   canOpen?: boolean;
-  children: (props?) => JSX.Element;
+  children: (props?) => JSX.Element | JSX.Element;
   className?: string;
+  tooltipClassName?: string;
   dataTestId?: string;
   getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
@@ -52,6 +54,7 @@ const PopoverMenu = ({
   className,
   dataTestId,
   getPopoverData,
+  tooltipClassName,
   popperProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
@@ -113,7 +116,11 @@ const PopoverMenu = ({
             onResizeCapture={(): undefined => undefined}
             {...popperProps}
           >
-            <Paper>{children({ close })}</Paper>
+            <Paper className={tooltipClassName}>
+              {equals(type(children), 'Function')
+                ? children({ close })
+                : children}
+            </Paper>
           </Popper>
         </ClickAwayListener>
       )}

package/src/SortableItems/index.tsx

@@ -185,6 +185,7 @@ const SortableItems = <T extends { [propertyToFilterItemsOn]: string }>({
     >
       <SortableContext items={sortableItemsIds} strategy={sortingStrategy}>
         <RootComponent>
+          {/* biome-ignore lint: */}
           <>
             {sortableItemsIds.map((sortableItemId, index) => {
               const item = getItemById(sortableItemId) as

package/src/ThemeProvider/index.tsx

@@ -261,7 +261,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
             {
               backgroundColor: theme.palette.background.default,
               border: 'none',
-              borderRadius: 0,
+              borderRadius: `${theme.shape.borderRadius}px`,
               boxShadow: theme.shadows[3]
             }
         })

package/src/components/CrudPage/Actions/Actions.styles.ts

@@ -0,0 +1,16 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useActionsStyles = makeStyles()((theme) => ({
+  search: {
+    maxWidth: theme.spacing(50)
+  },
+  clearButton: {
+    alignSelf: 'flex-start'
+  },
+  tooltipFilters: {
+    padding: theme.spacing(2, 3),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2)
+  }
+}));

package/src/components/CrudPage/Actions/Actions.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@mui/material';
+import AddButton from './AddButton';
+import Search from './Search';
+
+interface Props {
+  labels: {
+    search: string;
+    add: string;
+  };
+  filters: JSX.Element;
+}
+
+const Actions = ({ labels, filters }: Props): JSX.Element => {
+  return (
+    <Box
+      sx={{ display: 'grid', gridTemplateColumns: 'min-content auto', gap: 2 }}
+    >
+      <AddButton label={labels.add} />
+      <Search label={labels.search} filters={filters} />
+    </Box>
+  );
+};
+
+export default Actions;

package/src/components/CrudPage/Actions/AddButton.tsx

@@ -0,0 +1,23 @@
+import { Add } from '@mui/icons-material';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+import { Button } from '../../Button';
+import { openFormModalAtom } from '../atoms';
+
+interface Props {
+  label: string;
+}
+
+const AddButton = ({ label }: Props): JSX.Element => {
+  const setOpenFormModal = useSetAtom(openFormModalAtom);
+
+  const add = useCallback(() => setOpenFormModal('add'), []);
+
+  return (
+    <Button size="small" icon={<Add />} iconVariant="start" onClick={add}>
+      {label}
+    </Button>
+  );
+};
+
+export default AddButton;

package/src/components/CrudPage/Actions/Filters.tsx

@@ -0,0 +1,25 @@
+import { Tune } from '@mui/icons-material';
+import { isValidElement } from 'react';
+import PopoverMenu from '../../../PopoverMenu';
+import { useActionsStyles } from './Actions.styles';
+
+interface Props {
+  label: string;
+  filters: JSX.Element;
+}
+
+const Filters: React.FC<Props> = ({ label, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
+  return (
+    <PopoverMenu
+      title={label}
+      icon={<Tune />}
+      tooltipClassName={classes.tooltipFilters}
+    >
+      {isValidElement(filters) ? filters : <div />}
+    </PopoverMenu>
+  );
+};
+
+export default Filters;

package/src/components/CrudPage/Actions/Search.tsx

@@ -0,0 +1,31 @@
+import { SearchField } from '@centreon/ui';
+import { useActionsStyles } from './Actions.styles';
+import Filters from './Filters';
+import { useSearch } from './useSearch';
+
+interface Props {
+  label: string;
+  filters: JSX.Element;
+}
+
+const Search = ({ label, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
+  const { change } = useSearch();
+
+  return (
+    <SearchField
+      className={classes.search}
+      debounced
+      fullWidth
+      dataTestId={label}
+      placeholder={label}
+      onChange={change}
+      InputProps={{
+        endAdornment: <Filters label="filters" filters={filters} />
+      }}
+    />
+  );
+};
+
+export default Search;

package/src/components/CrudPage/Actions/useSearch.tsx

@@ -0,0 +1,24 @@
+import { useAtom } from 'jotai';
+import { ChangeEvent, useCallback, useRef } from 'react';
+import { searchAtom } from '../atoms';
+
+interface UseSearchState {
+  search: string;
+  change: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const useSearch = (): UseSearchState => {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const [search, setSearch] = useAtom(searchAtom);
+
+  const change = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => setSearch(event.target.value), 500);
+  }, []);
+
+  return { search, change };
+};

package/src/components/CrudPage/Columns/Actions.tsx

@@ -0,0 +1,88 @@
+import { EditOutlined } from '@mui/icons-material';
+import DeleteOutline from '@mui/icons-material/DeleteOutline';
+import { Box } from '@mui/material';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { isNil } from 'ramda';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../../Button';
+import {
+  canDeleteSubItemsAtom,
+  itemToDeleteAtom,
+  openFormModalAtom
+} from '../atoms';
+
+interface Props<TData> {
+  row: TData & {
+    internalListingParentId?: number;
+    internalListingParentRow: TData;
+  };
+}
+
+const labelDelete = 'Delete';
+const labelUpdate = 'Update';
+
+const Actions = <TData extends { id: number; name: string }>({
+  row
+}: Props<TData>): JSX.Element => {
+  const { t } = useTranslation();
+  const canDeleteSubItems = useAtomValue(canDeleteSubItemsAtom);
+  const setItemToDelete = useSetAtom(itemToDeleteAtom);
+  const setOpenFormModal = useSetAtom(openFormModalAtom);
+
+  const askBeforeDelete = (): void => {
+    setItemToDelete({
+      id: row.id,
+      name: row.name,
+      parent: isNil(row.internalListingParentRow)
+        ? undefined
+        : {
+            id: row.internalListingParentRow.id,
+            name: row.internalListingParentRow.name
+          }
+    });
+  };
+
+  const updateRow = useCallback(() => setOpenFormModal(row.id), [row.id]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 1,
+        width: '100%',
+        justifyContent: 'flex-end'
+      }}
+    >
+      {isNil(row.internalListingParentRow) && (
+        <IconButton
+          size="small"
+          icon={<EditOutlined fontSize="small" color="primary" />}
+          onClick={updateRow}
+          title={t(labelUpdate)}
+          data-testid={
+            row.internalListingParentRow
+              ? `edit-${row.internalListingParentRow.id}-${row.id}`
+              : `edit-${row.id}`
+          }
+        />
+      )}
+      {(canDeleteSubItems || isNil(row.internalListingParentRow)) && (
+        <IconButton
+          size="small"
+          icon={<DeleteOutline fontSize="small" color="error" />}
+          onClick={askBeforeDelete}
+          title={t(labelDelete)}
+          data-testid={
+            row.internalListingParentRow
+              ? `delete-${row.internalListingParentRow.id}-${row.id}`
+              : `delete-${row.id}`
+          }
+        />
+      )}
+    </Box>
+  );
+};
+
+export default Actions;