[frontend] Filters components refacto to tsx (#13845)

opencti-platform/opencti-front/src/private/components/common/lists/ListFiltersWithoutLocalStorage.jsx → opencti-platform/opencti-front/src/private/components/common/lists/ListFiltersWithoutLocalStorage.tsx

@@ -4,22 +4,18 @@ import { FilterListOutlined } from '@mui/icons-material';
 import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import { RayEndArrow, RayStartArrow } from 'mdi-material-ui';
-import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import React, { ReactElement } from 'react';
 import { useFormatter } from '../../../../components/i18n';
 
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles(() => ({
-  filters: {
-    float: 'left',
-    margin: '-3px 0 0 -5px',
-  },
-  container: {
-    width: 600,
-    padding: 20,
-  },
-}));
+interface ListFiltersWithoutLocalStorageProps {
+  handleOpenFilters: (event: React.SyntheticEvent) => void;
+  handleCloseFilters: () => void;
+  open: boolean;
+  anchorEl: Element | null;
+  filterElement: ReactElement;
+  variant?: string;
+  type?: string;
+}
 
 const ListFiltersWithoutLocalStorage = ({
   handleOpenFilters,
@@ -29,23 +25,24 @@ const ListFiltersWithoutLocalStorage = ({
   filterElement,
   variant,
   type,
-}) => {
+}: ListFiltersWithoutLocalStorageProps) => {
   const { t_i18n } = useFormatter();
-  const classes = useStyles();
   let icon = <FilterListOutlined fontSize="medium" />;
   let tooltip = t_i18n('Filters');
-  // let color = 'primary';
   if (type === 'from') {
     icon = <RayStartArrow fontSize="medium" />;
     tooltip = t_i18n('Dynamic source filters');
-    // color = 'warning';
   } else if (type === 'to') {
     icon = <RayEndArrow fontSize="medium" />;
     tooltip = t_i18n('Dynamic target filters');
-    // color = 'success';
   }
   return (
-    <div className={classes.filters}>
+    <div
+      style={{
+        float: 'left',
+        margin: '-3px 0 0 -5px',
+      }}
+    >
       {variant === 'text' ? (
         <Tooltip title={tooltip}>
           <Button
@@ -68,7 +65,12 @@ const ListFiltersWithoutLocalStorage = ({
         </Tooltip>
       )}
       <Popover
-        classes={{ paper: classes.container }}
+        sx={{
+          '& .MuiPaper-root': {
+            width: 600,
+            padding: 20,
+          },
+        }}
         open={open}
         anchorEl={anchorEl}
         onClose={handleCloseFilters}

opencti-platform/opencti-front/src/private/components/common/lists/SearchScopeElement.jsx → opencti-platform/opencti-front/src/private/components/common/lists/SearchScopeElement.tsx

@@ -1,36 +1,33 @@
 import InputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@common/button/IconButton';
 import { PaletteOutlined } from '@mui/icons-material';
-import Popover from '@mui/material/Popover';
+import Popover, { PopoverProps } from '@mui/material/Popover';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import Checkbox from '@mui/material/Checkbox';
 import ListItemText from '@mui/material/ListItemText';
 import React, { useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import { useFormatter } from '../../../../components/i18n';
 import useAttributes from '../../../../utils/hooks/useAttributes';
 import { displayEntityTypeForTranslation } from '../../../../utils/String';
 
-// Deprecated - https://mui.com/system/styles/basics/
-// Do not use it for new code.
-const useStyles = makeStyles({
-  container2: {
-    width: 300,
-    padding: 0,
-  },
-});
+interface SearchScopeElementProps {
+  name: string;
+  disabled?: boolean;
+  searchScope: Record<string, string[]>;
+  setSearchScope: React.Dispatch<React.SetStateAction<Record<string, string[]>>>;
+  availableRelationFilterTypes?: Record<string, string[]>;
+}
 
 const SearchScopeElement = ({
   name,
   disabled = false,
   searchScope,
   setSearchScope,
   availableRelationFilterTypes,
-}) => {
+}: SearchScopeElementProps) => {
   const { t_i18n } = useFormatter();
-  const classes = useStyles();
-  const [anchorElSearchScope, setAnchorElSearchScope] = useState();
+  const [anchorElSearchScope, setAnchorElSearchScope] = useState<PopoverProps['anchorEl']>();
   const { stixCoreObjectTypes: entityTypes } = useAttributes();
   if (name === 'contextEntityId') {
     entityTypes.push('User');
@@ -48,9 +45,9 @@ const SearchScopeElement = ({
       };
     })
     .sort((a, b) => a.label.localeCompare(b.label));
-  const handleOpenSearchScope = (event) => setAnchorElSearchScope(event.currentTarget);
+  const handleOpenSearchScope = (event: React.SyntheticEvent) => setAnchorElSearchScope(event.currentTarget);
   const handleCloseSearchScope = () => setAnchorElSearchScope(undefined);
-  const handleToggleSearchScope = (key, value) => {
+  const handleToggleSearchScope = (key: string, value: string) => {
     setSearchScope((c) => ({
       ...c,
       [key]: (searchScope[key] || []).includes(value)
@@ -59,18 +56,22 @@ const SearchScopeElement = ({
     }));
   };
 
-  let color = searchScope[name] && searchScope[name].length > 0
+  const color = searchScope[name] && searchScope[name].length > 0
     ? 'secondary'
     : 'primary';
-  if (disabled) color = undefined;
 
   return (
     <InputAdornment position="end" style={{ position: 'absolute', right: 5 }}>
-      <IconButton disabled={disabled} onClick={handleOpenSearchScope} size="small" edge="end">
-        <PaletteOutlined fontSize="small" color={color} />
+      <IconButton disabled={disabled} onClick={handleOpenSearchScope} size="small">
+        <PaletteOutlined fontSize="small" color={disabled ? undefined : color} />
       </IconButton>
       <Popover
-        classes={{ paper: classes.container2 }}
+        sx={{
+          '& .MuiPaper-root': {
+            width: 300,
+            padding: 0,
+          },
+        }}
         open={Boolean(anchorElSearchScope)}
         anchorEl={anchorElSearchScope}
         onClose={() => handleCloseSearchScope()}