edition seems ok, need ts

ValentinBouzinFiligran · ValentinBouzinFiligran · commit d71e0d4ffe93 · 2025-04-22T17:17:03.000+02:00
diff --git a/opencti-platform/opencti-front/src/components/saved_filters/SavedFilterButton.tsx b/opencti-platform/opencti-front/src/components/saved_filters/SavedFilterButton.tsx
@@ -8,6 +8,7 @@ import { useDataTableContext } from 'src/components/dataGrid/components/DataTabl
 import { graphql } from 'react-relay';
 import useApiMutation from 'src/utils/hooks/useApiMutation';
 import { type SavedFiltersSelectionData } from 'src/components/saved_filters/SavedFilterSelection';
+import Badge from '@mui/material/Badge';
 
 const savedFilterButtonEditMutation = graphql`
   mutation SavedFilterButtonEditMutation($id: ID!, $filters: String!) {
@@ -21,10 +22,11 @@ const savedFilterButtonEditMutation = graphql`
 `;
 
 type SavedFilterButtonProps = {
-  currentSavedFilter: SavedFiltersSelectionData
+  currentSavedFilter?: SavedFiltersSelectionData
+  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData | undefined) => void;
 };
 
-const SavedFilterButton = ({ currentSavedFilter }: SavedFilterButtonProps) => {
+const SavedFilterButton = ({ currentSavedFilter, setCurrentSavedFilter }: SavedFilterButtonProps) => {
   const { t_i18n } = useFormatter();
 
   const [isSavedDialogOpen, setIsSavedDialogOpen] = useState<boolean>(false);
@@ -36,36 +38,49 @@ const SavedFilterButton = ({ currentSavedFilter }: SavedFilterButtonProps) => {
     },
   } = useDataTableContext();
 
+  const isEmptyFilters = !filters?.filters.length && !filters?.filterGroups.length;
+  const hasSameFilters = currentSavedFilter?.filters === JSON.stringify(filters);
+
   const [commit] = useApiMutation(
     savedFilterButtonEditMutation,
     undefined,
     { successMessage: 'edit ok' },
   );
 
   const handleEditSavedFilter = () => {
+    if (!currentSavedFilter) return;
     commit({
       variables: {
         id: currentSavedFilter.id,
         filters: JSON.stringify(filters),
       },
-      updater: (store, item) => {
-        console.log('item : ', item);
-        console.log('currentSavedFilter : ', currentSavedFilter);
-      } });
+      onCompleted: () => {
+        setCurrentSavedFilter({
+          ...currentSavedFilter,
+          filters: JSON.stringify(filters),
+        } as SavedFiltersSelectionData);
+      },
+    });
   };
 
   const handleOpenDialog = () => setIsSavedDialogOpen(true);
   const handleCloseDialog = () => setIsSavedDialogOpen(false);
 
   const handleSaveButtonClick = () => {
-    if (true) {
-      console.log('HERE SAVED EDIT');
+    if (!hasSameFilters && currentSavedFilter) {
       handleEditSavedFilter();
     } else {
       handleOpenDialog();
     }
   };
 
+  const renderBadge = () => (
+    <Badge color="warning" overlap="circular" variant="dot">
+      <SaveOutlined />
+    </Badge>
+  );
+  const isDisabled = isEmptyFilters || hasSameFilters;
+
   const isRestrictedStorageKey = localStorageKey.includes('_stixCoreRelationshipCreationFromEntity');
   if (isRestrictedStorageKey) return null;
 
@@ -77,17 +92,21 @@ const SavedFilterButton = ({ currentSavedFilter }: SavedFilterButtonProps) => {
             color="primary"
             onClick={handleSaveButtonClick}
             size="small"
-            disabled={!filters?.filters.length && !filters?.filterGroups.length}
+            disabled={isDisabled}
             aria-label={t_i18n('Save')}
           >
-            <SaveOutlined />
+            {!hasSameFilters && currentSavedFilter
+              ? renderBadge()
+              : <SaveOutlined />
+            }
           </IconButton>
         </span>
       </Tooltip>
 
       {isSavedDialogOpen && (
         <SavedFilterCreateDialog
           isOpen={isSavedDialogOpen}
+          setCurrentSavedFilter={setCurrentSavedFilter}
           onClose={handleCloseDialog}
         />
       )}
diff --git a/opencti-platform/opencti-front/src/components/saved_filters/SavedFilterCreateDialog.tsx b/opencti-platform/opencti-front/src/components/saved_filters/SavedFilterCreateDialog.tsx
@@ -9,6 +9,8 @@ import TextField from '@mui/material/TextField';
 import { graphql } from 'react-relay';
 import { useDataTableContext } from 'src/components/dataGrid/components/DataTableContext';
 import { insertNode } from 'src/utils/store';
+import { type SavedFiltersSelectionData } from 'src/components/saved_filters/SavedFilterSelection';
+import { SavedFilterCreateDialogMutation$data } from 'src/components/saved_filters/__generated__/SavedFilterCreateDialogMutation.graphql';
 import useApiMutation from '../../utils/hooks/useApiMutation';
 import getSavedFilterScopeFilter from './getSavedFilterScopeFilter';
 
@@ -26,9 +28,10 @@ const savedFilterCreateDialogMutation = graphql`
 type SavedFilterDialogProps = {
   onClose: () => void;
   isOpen: boolean;
+  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData | undefined) => void;
 };
 
-const SavedFilterCreateDialog = ({ isOpen, onClose }: SavedFilterDialogProps) => {
+const SavedFilterCreateDialog = ({ isOpen, onClose, setCurrentSavedFilter }: SavedFilterDialogProps) => {
   const { t_i18n } = useFormatter();
 
   const {
@@ -65,7 +68,9 @@ const SavedFilterCreateDialog = ({ isOpen, onClose }: SavedFilterDialogProps) =>
         const scopeFilter = getSavedFilterScopeFilter(localStorageKey);
         insertNode(store, 'SavedFilters_savedFilters', { filters: scopeFilter }, 'savedFilterAdd');
       },
-      onCompleted: () => {
+      onCompleted: (response) => {
+        const { savedFilterAdd } = response as SavedFilterCreateDialogMutation$data;
+        setCurrentSavedFilter(savedFilterAdd as SavedFiltersSelectionData);
         onClose();
       },
       onError: () => {
diff --git a/opencti-platform/opencti-front/src/components/saved_filters/SavedFilterSelection.tsx b/opencti-platform/opencti-front/src/components/saved_filters/SavedFilterSelection.tsx
@@ -9,15 +9,16 @@ export type SavedFiltersSelectionData = NonNullable<NonNullable<SavedFiltersQuer
 type SavedFilterSelectionProps = {
   isDisabled: boolean;
   data: SavedFiltersSelectionData[];
-  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData) => void;
+  currentSavedFilter?: SavedFiltersSelectionData;
+  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData | undefined) => void;
 };
 
 export type AutocompleteOptionType = {
   label: string;
   value: SavedFiltersSelectionData;
 };
 
-const SavedFilterSelection = ({ isDisabled, data, setCurrentSavedFilter }: SavedFilterSelectionProps) => {
+const SavedFilterSelection = ({ isDisabled, data, currentSavedFilter, setCurrentSavedFilter }: SavedFilterSelectionProps) => {
   const {
     useDataTablePaginationLocalStorage: {
       helpers,
@@ -34,6 +35,16 @@ const SavedFilterSelection = ({ isDisabled, data, setCurrentSavedFilter }: Saved
     value: item,
   }));
 
+  useEffect(() => {
+    if (currentSavedFilter && !selectedSavedFilter) {
+      setSelectedSavedFilter({
+        label: currentSavedFilter.name,
+        value: currentSavedFilter,
+      });
+      setInputValue(currentSavedFilter.name);
+    }
+  }, [currentSavedFilter]);
+
   const handleResetInput = () => {
     setSelectedSavedFilter(undefined);
     setCurrentSavedFilter(undefined);
diff --git a/opencti-platform/opencti-front/src/components/saved_filters/SavedFilters.tsx b/opencti-platform/opencti-front/src/components/saved_filters/SavedFilters.tsx
@@ -24,26 +24,29 @@ const savedFiltersQuery = graphql`
 
 type SavedFiltersComponentProps = {
   queryRef: PreloadedQuery<SavedFiltersQuery>;
-  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData) => void;
+  currentSavedFilter?: SavedFiltersSelectionData;
+  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData | undefined) => void;
 };
 
-const SavedFiltersComponent = ({ queryRef, setCurrentSavedFilter }: SavedFiltersComponentProps) => {
+const SavedFiltersComponent = ({ queryRef, currentSavedFilter, setCurrentSavedFilter }: SavedFiltersComponentProps) => {
   const { savedFilters } = usePreloadedQuery(savedFiltersQuery, queryRef);
 
   return (
     <SavedFilterSelection
       isDisabled={!savedFilters?.edges?.length}
       data={savedFilters?.edges?.map(({ node }) => node) ?? []}
+      currentSavedFilter={currentSavedFilter}
       setCurrentSavedFilter={setCurrentSavedFilter}
     />
   );
 };
 
 type SavedFiltersProps = {
-  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData) => void;
+  currentSavedFilter?: SavedFiltersSelectionData;
+  setCurrentSavedFilter: (savedFilter: SavedFiltersSelectionData | undefined) => void;
 };
 
-const SavedFilters = ({ setCurrentSavedFilter }: SavedFiltersProps) => {
+const SavedFilters = ({ currentSavedFilter, setCurrentSavedFilter }: SavedFiltersProps) => {
   const {
     useDataTablePaginationLocalStorage: {
       localStorageKey,
@@ -61,7 +64,13 @@ const SavedFilters = ({ setCurrentSavedFilter }: SavedFiltersProps) => {
   return (
     <>
       {queryRef
-        ? <SavedFiltersComponent queryRef={queryRef} setCurrentSavedFilter={setCurrentSavedFilter} />
+        ? (
+          <SavedFiltersComponent
+            queryRef={queryRef}
+            currentSavedFilter={currentSavedFilter}
+            setCurrentSavedFilter={setCurrentSavedFilter}
+          />
+        )
         : <SavedFiltersAutocomplete isDisabled />
       }
     </>
diff --git a/opencti-platform/opencti-front/src/private/components/common/lists/Filters.tsx b/opencti-platform/opencti-front/src/private/components/common/lists/Filters.tsx
@@ -51,7 +51,7 @@ const Filters: FunctionComponent<FiltersProps> = ({
   required = false,
 }) => {
   const navigate = useNavigate();
-  const [open, setOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
   const [filters, setFilters] = useState<FilterGroup | undefined>(
     emptyFilterGroup,
@@ -60,13 +60,14 @@ const Filters: FunctionComponent<FiltersProps> = ({
     [],
   );
   const [keyword, setKeyword] = useState('');
-  const entityTypes = searchContext?.entityTypes ?? ['Stix-Core-Object'];
+  const entityTypes: string[] = searchContext?.entityTypes ?? ['Stix-Core-Object'];
+
   const handleOpenFilters = (event: React.SyntheticEvent) => {
-    setOpen(true);
+    setIsOpen(true);
     setAnchorEl(event.currentTarget);
   };
   const handleCloseFilters = () => {
-    setOpen(false);
+    setIsOpen(false);
     setAnchorEl(null);
   };
   const { filterKeysSchema } = useAuth().schema;
@@ -114,7 +115,7 @@ const Filters: FunctionComponent<FiltersProps> = ({
         disabled={disabled}
         size={size}
         fontSize={fontSize}
-        open={open}
+        open={isOpen}
         filters={filters}
         handleCloseFilters={handleCloseFilters}
         defaultHandleRemoveFilter={defaultHandleRemoveFilter}
@@ -132,11 +133,9 @@ const Filters: FunctionComponent<FiltersProps> = ({
     <>
       {helpers ? (
         <ListFilters
-          size={size}
-          fontSize={fontSize}
           handleOpenFilters={handleOpenFilters}
           handleCloseFilters={handleCloseFilters}
-          open={open}
+          isOpen={isOpen}
           anchorEl={anchorEl}
           availableFilterKeys={uniq(availableFilterKeys)}
           filterElement={filterElement}
@@ -153,7 +152,7 @@ const Filters: FunctionComponent<FiltersProps> = ({
           fontSize={fontSize}
           handleOpenFilters={handleOpenFilters}
           handleCloseFilters={handleCloseFilters}
-          open={open}
+          open={isOpen}
           anchorEl={anchorEl}
           filterElement={filterElement}
           variant={variant}
diff --git a/opencti-platform/opencti-front/src/private/components/common/lists/ListFilters.tsx b/opencti-platform/opencti-front/src/private/components/common/lists/ListFilters.tsx
