@centreon/ui 24.11.2 → 24.11.4

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/ThemeProvider/palettes.ts

@@ -157,7 +157,7 @@ declare module '@mui/material/Badge' {
 
 export const lightPalette: PaletteOptions = {
   action: {
-    acknowledged: '#67532C',
+    acknowledged: '#745F35',
     acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
@@ -167,7 +167,7 @@ export const lightPalette: PaletteOptions = {
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
+    inDowntime: '#512980',
     inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
@@ -297,7 +297,7 @@ export const lightPalette: PaletteOptions = {
 
 export const darkPalette: PaletteOptions = {
   action: {
-    acknowledged: '#67532C',
+    acknowledged: '#DFD2B9',
     acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
@@ -307,7 +307,7 @@ export const darkPalette: PaletteOptions = {
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
+    inDowntime: '#E5D8F3',
     inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5

package/src/api/customFetch.ts

@@ -55,10 +55,13 @@ export const customFetch = <T>({
       ? `${baseEndpoint}${endpoint}`
       : endpoint;
 
+  const isFormData = payload instanceof FormData;
+
   const options = isMutation
     ? {
         ...defaultOptions,
-        body: payload instanceof FormData ? payload : JSON.stringify(payload)
+        body: isFormData ? payload : JSON.stringify(payload),
+        headers: isFormData ? undefined : headers
       }
     : defaultOptions;
 

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;