From 34d186e9c7178779af60cff333009fe74bb1c60e Mon Sep 17 00:00:00 2001
From: Linus Pahl <linus.pahl@graylog.com>
Date: Thu, 17 Oct 2024 11:37:23 +0200
Subject: [PATCH] Improve reusability of `QueryInput` and `StreamsFilter`.

---
 .../src/views/components/searchbar/StreamsFilter.tsx       | 7 ++++++-
 .../views/components/searchbar/queryinput/QueryInput.tsx   | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx b/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx
index 9ecfd2aa7734..99d319ab06b3 100644
--- a/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx
+++ b/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx
@@ -33,9 +33,13 @@ type Props = {
   streams: Array<{ key: string, value: string }>,
   onChange: (newStreamIds: Array<string>) => void,
   multi?: boolean,
+  clearable?: boolean
 };
 
-const StreamsFilter = ({ disabled = false, value = [], streams, onChange, multi = true }: Props) => {
+const StreamsFilter = ({
+  disabled = false, value = [], streams, onChange, multi = true,
+  clearable = true,
+}: Props) => {
   const sendTelemetry = useSendTelemetry();
   const selectedStreams = value.join(',');
   const placeholder = 'Select streams the search should include. Searches in all streams if empty.';
@@ -58,6 +62,7 @@ const StreamsFilter = ({ disabled = false, value = [], streams, onChange, multi
     <Container data-testid="streams-filter" title={placeholder}>
       <Select placeholder={placeholder}
               disabled={disabled}
+              clearable={clearable}
               inputProps={{ 'aria-label': placeholder }}
               displayKey="key"
               inputId="streams-filter"
diff --git a/graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx b/graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx
index 1cdd9a18884b..e7198b6dd72b 100644
--- a/graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx
+++ b/graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx
@@ -170,7 +170,10 @@ const _updateEditorConfiguration = (node: { editor: Editor; }, completer: AutoCo
     });
 
     commands.forEach((command) => editor.commands.addCommand(command));
-    editor.completers = [completer];
+
+    if (completer) {
+      editor.completers = [completer];
+    }
   }
 };
 
@@ -186,7 +189,7 @@ const useCompleter = ({ streams, timeRange, completerFactory, view }: Pick<Props
     return { all: allFieldsByName, query: queryFieldsByName };
   }, [allFields, queryFields]);
 
-  return useMemo(() => completerFactory(completers ?? [], timeRange, streams, fieldTypes, userTimezone, view),
+  return useMemo(() => completerFactory?.(completers ?? [], timeRange, streams, fieldTypes, userTimezone, view),
     [completerFactory, completers, timeRange, streams, fieldTypes, userTimezone, view]);
 };