Fix inputs extractors list not updating after deletion

changelog/unreleased/pr-17289.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix inputs extractors list not updating after deletion"
+
+issues = ["16858"]
+pulls = ["17289"]

graylog2-web-interface/src/components/extractors/ExtractorsList.jsx

@@ -22,21 +22,22 @@ import { Row, Col, Button } from 'components/bootstrap';
 import Spinner from 'components/common/Spinner';
 import AddExtractorWizard from 'components/extractors/AddExtractorWizard';
 import EntityList from 'components/common/EntityList';
-import { ExtractorsActions } from 'stores/extractors/ExtractorsStore';
+import { ExtractorsActions, ExtractorsStore } from 'stores/extractors/ExtractorsStore';
+import { useStore } from 'stores/connect';
 
 import ExtractorsListItem from './ExtractorsListItem';
 import ExtractorsSortModal from './ExtractorSortModal';
 
-const fetchExtractors = (inputId, callback) => {
-  ExtractorsActions.list.triggerPromise(inputId).then((data) => callback(data?.extractors));
+const fetchExtractors = (inputId) => {
+  ExtractorsActions.list.triggerPromise(inputId);
 };
 
 const ExtractorsList = ({ input, node }) => {
-  const [extractors, setExtractors] = useState(null);
   const [showSortModal, setShowSortModal] = useState(false);
+  const extractors = useStore(ExtractorsStore, (state) => state.extractors);
 
   useEffect(() => {
-    fetchExtractors(input.id, setExtractors);
+    fetchExtractors(input.id);
   }, [input.id]);
 
   const _formatExtractor = (extractor) => (
@@ -92,7 +93,7 @@ const ExtractorsList = ({ input, node }) => {
         <ExtractorsSortModal input={input}
                              extractors={extractors}
                              onClose={() => setShowSortModal(false)}
-                             onSort={() => fetchExtractors(input.id, setExtractors)} />
+                             onSort={() => fetchExtractors(input.id)} />
       )}
     </div>
   );

graylog2-web-interface/src/stores/extractors/ExtractorsStore.js

@@ -62,16 +62,31 @@ export const ExtractorsStore = singletonStore(
     extractors: undefined,
     extractor: undefined,
 
+    getInitialState() {
+      return this.getState();
+    },
+
     init() {
-      this.trigger({ extractors: this.extractors, extractor: this.extractor });
+      this.trigger({ extractors: this.extractors, extractor: this.extractory });
+    },
+
+    getState() {
+      return {
+        extractors: this.extractors,
+        extractor: this.extractor,
+      };
+    },
+
+    propagateState() {
+      this.trigger(this.getState());
     },
 
     list(inputId) {
       const promise = fetch('GET', URLUtils.qualifyUrl(URLUtils.concatURLPath(this.sourceUrl, inputId, 'extractors')));
 
       promise.then((response) => {
         this.extractors = response.extractors;
-        this.trigger({ extractors: this.extractors });
+        this.propagateState();
       });
 
       ExtractorsActions.list.promise(promise);
@@ -97,7 +112,7 @@ export const ExtractorsStore = singletonStore(
 
       promise.then((response) => {
         this.extractor = response;
-        this.trigger({ extractor: this.extractor });
+        this.propagateState();
       });
 
       ExtractorsActions.get.promise(promise);
@@ -235,6 +250,8 @@ export const ExtractorsStore = singletonStore(
         if (failedImports === 0) {
           UserNotification.success(`Import results: ${successfulImports} extractor(s) imported.`,
             'Import operation successful');
+
+          this.propagateState();
         } else {
           UserNotification.warning(`Import results: ${successfulImports} extractor(s) imported, ${failedImports} error(s).`,
             'Import operation completed');