Improve reusability of QueryInput and StreamsFilter.

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"

graylog2-web-interface/src/views/components/searchbar/queryinput/QueryInput.tsx

@@ -170,7 +170,10 @@
     });
 
     commands.forEach((command) => editor.commands.addCommand(command));
-    editor.completers = [completer];
+
+    if (completer) {
+      editor.completers = [completer];
+    }
   }
 };
 
@@ -186,7 +189,7 @@
     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]);
 };
 
@@ -225,25 +228,25 @@
 };
 
 type Props = BaseProps & {
   commands?: Array<Command>,
   completerFactory?: (
     completers: Array<Completer>,
     timeRange: TimeRange | NoTimeRangeOverride | undefined,
     streams: Array<string>,
     fieldTypes: FieldTypes,
     userTimezone: string,
     view: View | undefined,
   ) => AutoCompleter,
   disableExecution?: boolean,
   isValidating?: boolean,
   name: string,
   onBlur?: (query: string) => void,
   onChange: (changeEvent: { target: { value: string, name: string } }) => Promise<string>,
   onExecute: (query: string) => void,
   streams?: Array<string> | undefined,
   timeRange?: TimeRange | NoTimeRangeOverride | undefined,
   validate: () => Promise<FormikErrors<{}>>,
   view?: View
 };
 
 const QueryInput = React.forwardRef<Editor, Props>(({