@centreon/ui 23.10.1-MON-20802-fe-implement-new-visualization.4 → 23.10.1-MON-20803-RS-add-basic-filter.1

package/src/RichTextEditor/plugins/FloatingLinkEditorPlugin.tsx

@@ -11,7 +11,7 @@ import { mergeRegister } from '@lexical/utils';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import { useTranslation } from 'react-i18next';
-import { dec, equals, gt, isNil, replace } from 'ramda';
+import { equals, isNil } from 'ramda';
 
 import { Popper, IconButton, Paper, Link, Box } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
@@ -56,7 +56,6 @@ const FloatingLinkEditor = ({
     x: 0,
     y: 0
   });
-  const [editedUrl, setEditedUrl] = useState('');
 
   const [editMode, setEditMode] = useAtom(editLinkModeAtom);
   const [linkUrl, setLinkUrl] = useAtom(linkValueAtom);
@@ -66,10 +65,9 @@ const FloatingLinkEditor = ({
   const acceptOrCancelNewLinkValue = useCallback(
     (event): void => {
       const { value } = event.target;
-
-      event.preventDefault();
-
       if (event.key === 'Enter') {
+        event.preventDefault();
+
         if (value !== '') {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
             target: openLinkInNewTab ? '_blank' : undefined,
@@ -77,36 +75,14 @@ const FloatingLinkEditor = ({
           });
         }
         setEditMode(false);
-      }
-
-      if (event.key === 'Escape') {
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
         setEditMode(false);
       }
     },
     [setEditMode, setLinkUrl]
   );
 
-  const enterInEditMode = useCallback(() => {
-    setEditedUrl(linkUrl);
-    setEditMode(true);
-  }, [linkUrl]);
-
-  const changeValue = useCallback((event): void => {
-    const { value } = event.target;
-
-    const matched = value.match(/https?:\/\//g);
-
-    if (gt(matched.length, 1)) {
-      setEditedUrl(
-        replace(matched.join(''), matched[dec(matched.length)], value)
-      );
-
-      return;
-    }
-
-    setEditedUrl(value);
-  }, []);
-
   useEffect(() => {
     const isPositioned =
       rangeRect && (!equals(rangeRect.x, 0) || !equals(rangeRect.y, 0));
@@ -150,9 +126,9 @@ const FloatingLinkEditor = ({
           <InputField
             autoFocus
             dataTestId="InputLinkField"
+            defaultValue={linkUrl}
             label={t(labelInputLink)}
             size="small"
-            value={editedUrl}
             onBlur={(event): void => {
               const { value } = event.target;
 
@@ -163,8 +139,7 @@ const FloatingLinkEditor = ({
               }
               setEditMode(false);
             }}
-            onChange={changeValue}
-            onKeyUp={acceptOrCancelNewLinkValue}
+            onKeyDown={acceptOrCancelNewLinkValue}
           />
         ) : (
           <Box component="span" sx={{ margin: '10px' }}>
@@ -181,7 +156,7 @@ const FloatingLinkEditor = ({
               aria-label={labelEditLink}
               size="small"
               sx={{ marginLeft: '5px' }}
-              onClick={enterInEditMode}
+              onClick={(): void => setEditMode(true)}
             >
               <EditIcon fontSize="small" />
             </IconButton>

package/src/RichTextEditor/plugins/ToolbarPlugin/index.tsx

@@ -8,8 +8,7 @@ import MacrosButton from './MacrosButton';
 import BlockButtons from './BlockButtons';
 
 interface Props {
-  disabled: boolean;
-  displayBlockButtons: boolean;
+  disabled?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
 }
@@ -34,20 +33,15 @@ export const useStyles = makeStyles()((theme) => ({
 const ToolbarPlugin = ({
   editable,
   displayMacrosButton,
-  disabled,
-  displayBlockButtons
+  disabled
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
 
   return editable ? (
     <div className={classes.container}>
       <UndoRedoButtons disabled={disabled} />
-      {displayBlockButtons && (
-        <>
-          <Divider flexItem orientation="vertical" />
-          <BlockButtons disabled={disabled} />
-        </>
-      )}
+      <Divider flexItem orientation="vertical" />
+      <BlockButtons disabled={disabled} />
       <Divider flexItem orientation="vertical" />
       <FormatButtons disabled={disabled} />
       {displayMacrosButton && (

package/src/ThemeProvider/index.tsx

@@ -48,7 +48,8 @@ const getInputBaseRootStyle = ({
 
   if (equals(size, 'compact')) {
     return {
-      padding: '0px 0px 0px 8px'
+      padding: '8px 8px',
+      paddingRight: '0px'
     };
   }
   if (equals(size, 'small')) {
@@ -74,6 +75,7 @@ const getInputBaseRootStyle = ({
 const getInputBaseInputStyle = ({ size }: InputBaseProps): CSSInterpolation => {
   if (equals(size, 'compact')) {
     return {
+      fontSize: 'x-small',
       minHeight: '32px'
     };
   }
@@ -121,7 +123,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     MuiChip: {
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
-          backgroundColor: !ownerState.color && theme.palette.divider,
           ...(equals(ownerState.size, 'medium') && {
             borderRadius: theme.spacing(1.25),
             fontSize: theme.typography.body2.fontSize,
@@ -188,10 +189,7 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiInputBase: {
       styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-          ...getInputBaseInputStyle(ownerState),
-          backgroundColor: theme.palette.background.paper
-        })
+        root: ({ ownerState }) => getInputBaseInputStyle(ownerState)
       }
     },
     MuiList: {

package/src/api/buildListingEndpoint/getSearchQueryParameterValue.ts

@@ -21,7 +21,7 @@ import {
   GetConditionsSearchQueryParameterValueState
 } from './models';
 
-const getFoundFields = ({
+export const getFoundFields = ({
   value,
   fields
 }: RegexSearchParameter): Array<SearchMatch> => {
@@ -108,7 +108,7 @@ const getConditionsSearchQueryParameterValue = (
   };
 };
 
-const getSearchQueryParameterValue = (
+export const getSearchQueryParameterValue = (
   search: SearchParameter | undefined
 ): SearchQueryParameterValue => {
   if (search === undefined) {
@@ -134,5 +134,3 @@ const getSearchQueryParameterValue = (
 
   return { $and: result };
 };
-
-export default getSearchQueryParameterValue;

package/src/api/buildListingEndpoint/index.ts

@@ -1,7 +1,7 @@
 import toRawQueryParameters from '../../queryParameters';
 import { QueryParameter } from '../../queryParameters/models';
 
-import getSearchQueryParameterValue from './getSearchQueryParameterValue';
+import { getSearchQueryParameterValue } from './getSearchQueryParameterValue';
 import { Parameters, BuildListingEndpointParameters } from './models';
 
 const getQueryParameters = ({

package/src/api/useFetchQuery/index.ts

@@ -90,6 +90,14 @@ const useFetchQuery = <T extends object>({
     }
   };
 
+  useEffect(() => {
+    return (): void => {
+      queryClient.cancelQueries(getQueryKey());
+    };
+  }, []);
+
+  manageError();
+
   const prefetchQuery = ({ endpointParams, queryKey }): void => {
     queryClient.prefetchQuery(
       queryKey,
@@ -154,16 +162,6 @@ const useFetchQuery = <T extends object>({
 
   const errorData = queryData.data as ResponseError | undefined;
 
-  useEffect(() => {
-    return (): void => {
-      queryClient.cancelQueries(getQueryKey());
-    };
-  }, []);
-
-  useEffect(() => {
-    manageError();
-  }, [queryData.data]);
-
   return {
     ...omit(['data'], queryData),
     data,

package/src/components/Modal/Modal.styles.ts

@@ -48,12 +48,10 @@ const useStyles = makeStyles<{
     }
   },
   modalActions: {
-    bottom: 0,
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(2),
-    justifyContent: 'flex-end',
-    position: 'sticky'
+    justifyContent: 'flex-end'
   },
   modalBody: {
     '& > p': {

package/src/components/index.ts

@@ -10,4 +10,3 @@ export * from './List';
 export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
-export * from './Inputs';

package/src/index.ts

@@ -75,7 +75,10 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export {
+  getSearchQueryParameterValue,
+  getFoundFields
+} from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,

package/src/utils/index.ts

@@ -19,4 +19,3 @@ export * from './docsURL';
 export * from './useInfiniteScrollListing';
 export * from './useLicenseExpirationWarning';
 export * from './useRefreshInterval';
-export * from './centreonBaseURL';

package/src/utils/useDebounce.ts

@@ -1,4 +1,4 @@
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
 interface Props {
   functionToDebounce: (...args) => void;
@@ -12,6 +12,11 @@ export const useDebounce = ({
   memoProps = []
 }: Props): ((...args) => void) => {
   const timeoutRef = useRef<number | null>(null);
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = functionToDebounce;
+  }, [functionToDebounce]);
 
   return useCallback((...args): void => {
     if (timeoutRef.current) {
@@ -19,7 +24,7 @@ export const useDebounce = ({
     }
 
     timeoutRef.current = setTimeout(() => {
-      functionToDebounce(...args);
+      ref.current?.(...args);
     }, wait);
   }, memoProps);
 };

package/src/components/Inputs/Switch/Switch.stories.tsx

@@ -1,22 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import Switch from './Switch';
-
-const meta: Meta<typeof Switch> = {
-  component: Switch
-};
-
-export default meta;
-type Story = StoryObj<typeof Switch>;
-
-export const notChecked: Story = {
-  args: {
-    checked: false
-  }
-};
-
-export const checked: Story = {
-  args: {
-    checked: true
-  }
-};

package/src/components/Inputs/Switch/Switch.styles.ts

@@ -1,13 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useSwitchStyles = makeStyles()((theme) => ({
-  switch: {
-    '& .MuiSwitch-thumb': {
-      backgroundColor: theme.palette.common.white
-    },
-    '& span[data-checked="true"] + .MuiSwitch-track': {
-      backgroundColor: theme.palette.success.main,
-      opacity: 1
-    }
-  }
-}));

package/src/components/Inputs/Switch/Switch.tsx

@@ -1,18 +0,0 @@
-import { SwitchProps, Switch as MuiSwitch } from '@mui/material';
-
-import { useSwitchStyles } from './Switch.styles';
-
-const Switch = ({ checked, ...props }: SwitchProps): JSX.Element => {
-  const { classes } = useSwitchStyles();
-
-  return (
-    <MuiSwitch
-      checked={checked}
-      className={classes.switch}
-      data-checked={checked}
-      {...props}
-    />
-  );
-};
-
-export default Switch;

package/src/components/Inputs/index.ts

@@ -1 +0,0 @@
-export { default as Switch } from './Switch/Switch';

package/src/utils/centreonBaseURL.ts

@@ -1,4 +0,0 @@
-export const centreonBaseURL =
-  (
-    document.getElementsByTagName('base')[0]?.getAttribute('href') as string
-  )?.slice(0, -1) || '';