From 9bfc8bd0927f4010dbaee223d4ab5aae5c84ac9c Mon Sep 17 00:00:00 2001
From: Linus Pahl <linus.pahl@graylog.com>
Date: Tue, 22 Oct 2024 11:14:57 +0200
Subject: [PATCH] Allow showing validation error for streams filter.

---
 .../src/views/components/searchbar/StreamsFilter.tsx     | 9 ++++++---
 1 file changed, 6 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 99d319ab06b3..9a20da1e998a 100644
--- a/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx
+++ b/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx
@@ -21,8 +21,9 @@ import Select from 'components/common/Select';
 import { defaultCompare } from 'logic/DefaultCompare';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
+import { FormGroup } from 'components/bootstrap';
 
-const Container = styled.div`
+const Container = styled(FormGroup)`
   flex: 1;
   grid-area: streams;
 `;
@@ -34,11 +35,12 @@ type Props = {
   onChange: (newStreamIds: Array<string>) => void,
   multi?: boolean,
   clearable?: boolean
+  hasError?: boolean
 };
 
 const StreamsFilter = ({
   disabled = false, value = [], streams, onChange, multi = true,
-  clearable = true,
+  clearable = true, hasError = false,
 }: Props) => {
   const sendTelemetry = useSendTelemetry();
   const selectedStreams = value.join(',');
@@ -59,7 +61,7 @@ const StreamsFilter = ({
   };
 
   return (
-    <Container data-testid="streams-filter" title={placeholder}>
+    <Container data-testid="streams-filter" title={placeholder} validationState={hasError ? 'error' : undefined} bsClass="no-bm">
       <Select placeholder={placeholder}
               disabled={disabled}
               clearable={clearable}
@@ -70,6 +72,7 @@ const StreamsFilter = ({
               options={options}
               multi={multi}
               value={selectedStreams} />
+
     </Container>
   );
 };