@centreon/ui 24.11.0 → 24.11.2

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

@@ -16,7 +16,6 @@ type ListEmptyStateProps = {
       create: string;
     };
     title: string;
-    description?: string;
   };
   onCreate?: () => void;
 };
@@ -35,11 +34,6 @@ 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/Layout/AreaIndicator.tsx

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

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

@@ -2,10 +2,8 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
   pageLayout: {
-    height: '100%',
     display: 'grid',
-    gridTemplateRows: 'auto 1fr',
-    height: '100%',
+    gridTemplateRows: 'min-content',
     overflow: 'hidden'
   },
   pageLayoutActions: {
@@ -24,11 +22,8 @@ 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: 'auto',
+    gridTemplateRows: 'min-content',
     overflow: 'hidden',
     padding: theme.spacing(1.5, 3, 5)
   },

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

@@ -17,7 +17,6 @@ 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: '900px',
+      maxWidth: '1400px',
       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 type { MinimapPosition } from './models';
+import { MinimapPosition } from './models';
 
 export interface ZoomProps {
-  children: JSX.Element | (({ width, height, transformMatrix }) => JSX.Element);
+  children: JSX.Element | (({ width, height }) => JSX.Element);
   id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;

package/src/components/Zoom/ZoomContent.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
-import type { ProvidedZoom } from '@visx/zoom/lib/types';
+import { ProvidedZoom } from '@visx/zoom/lib/types';
 
 import ZoomInIcon from '@mui/icons-material/Add';
 import ZoomOutIcon from '@mui/icons-material/Remove';
@@ -12,7 +12,7 @@ import { IconButton } from '../Button';
 import Minimap from './Minimap';
 import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import type { ChildrenProps, MinimapPosition, ZoomState } from './models';
+import { ChildrenProps, MinimapPosition, ZoomState } from './models';
 import { useZoom } from './useZoom';
 
 export interface Props {

package/src/components/index.ts

@@ -12,6 +12,5 @@ export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
 export { default as Zoom } from './Zoom/Zoom';
-export type { ZoomState } from './Zoom/models';
 export * from './Tabs';
 export { default as CopyCommand } from './CopyCommand/CopyCommand';

package/src/Form/Inputs/File.tsx

@@ -1,69 +0,0 @@
-import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
-import { Box, Typography } from '@mui/material';
-import { FormikValues, useFormikContext } from 'formik';
-import { path, split } from 'ramda';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import FileDropZone, { transformFileListToArray } from '../../FileDropZone';
-import { InputPropsWithoutGroup } from './models';
-
-const File = ({
-  fieldName,
-  file,
-  change,
-  dataTestId,
-  label
-}: InputPropsWithoutGroup): JSX.Element => {
-  const { t } = useTranslation();
-
-  const { values, setFieldValue, setFieldTouched } =
-    useFormikContext<FormikValues>();
-
-  const fieldNamePath = split('.', fieldName);
-
-  const files = useMemo(
-    () => path(fieldNamePath, values),
-    [values]
-  ) as FileList;
-
-  const filesArray = transformFileListToArray(files);
-
-  const changeFiles = (newFiles: FileList | null): void => {
-    if (change) {
-      change({ setFieldValue, setFieldTouched, value: newFiles });
-
-      return;
-    }
-
-    setFieldValue(fieldName, newFiles);
-  };
-
-  return (
-    <Box data-testid={dataTestId} aria-label={t(label)}>
-      <Typography variant="h6">{t(label)}</Typography>
-      <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
-        <FileDropZone
-          {...file}
-          accept={file?.accept || '*'}
-          files={files || null}
-          changeFiles={changeFiles}
-          resetFilesStatusAndUploadData={() => undefined}
-          label={label}
-        />
-        <Box sx={{ display: 'flex', gap: 1, flexDirection: 'column' }}>
-          {filesArray.map((file) => (
-            <Box
-              key={file.name}
-              sx={{ display: 'flex', gap: 1, flexDirection: 'row' }}
-            >
-              <DescriptionOutlinedIcon color="success" fontSize="small" />
-              <Typography>{file.name}</Typography>
-            </Box>
-          ))}
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default File;

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

@@ -1,16 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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;