From ab7d18da363055daf6d9c4fe46d648e65a9d3a02 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Wed, 19 Jun 2024 09:06:03 -0300
Subject: [PATCH] add Tooltips for QueryFilterInputSelects

---
 .../src/components/QueryFilterInput.tsx       | 46 +++++++++++++------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryFilterInput.tsx b/bitmovin-analytics-datasource/src/components/QueryFilterInput.tsx
index 2af3128..398aef4 100644
--- a/bitmovin-analytics-datasource/src/components/QueryFilterInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryFilterInput.tsx
@@ -113,20 +113,38 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
 
   return (
     <HorizontalGroup spacing="xs">
-      <Select
-        value={attributeSelectValue}
-        onChange={handleAttributeChange}
-        options={attributeSelectOptions}
-        width={ATTRIBUTE_COMPONENT_WIDTH}
-        invalid={derivedQueryFilterState.attributeError != null}
-      />
-      <Select
-        value={operatorSelectValue}
-        onChange={handleOperatorChange}
-        options={SELECTABLE_QUERY_FILTER_OPERATORS}
-        width={OPERATOR_COMPONENT_WIDTH}
-        invalid={derivedQueryFilterState.operatorError != null}
-      />
+      <Tooltip
+        content={derivedQueryFilterState.attributeError ?? ''}
+        show={derivedQueryFilterState.attributeError != null}
+        theme="error"
+      >
+        {/* this div wrapper is needed to expose `ref` for Tooltip above */}
+        <div>
+          <Select
+            value={attributeSelectValue}
+            onChange={handleAttributeChange}
+            options={attributeSelectOptions}
+            width={ATTRIBUTE_COMPONENT_WIDTH}
+            invalid={derivedQueryFilterState.attributeError != null}
+          />
+        </div>
+      </Tooltip>
+      <Tooltip
+        content={derivedQueryFilterState.operatorError ?? ''}
+        show={derivedQueryFilterState.operatorError != null}
+        theme="error"
+      >
+        {/* this div wrapper is needed to expose `ref` for Tooltip above */}
+        <div>
+          <Select
+            value={operatorSelectValue}
+            onChange={handleOperatorChange}
+            options={SELECTABLE_QUERY_FILTER_OPERATORS}
+            width={OPERATOR_COMPONENT_WIDTH}
+            invalid={derivedQueryFilterState.operatorError != null}
+          />
+        </div>
+      </Tooltip>
       <Tooltip
         content={derivedQueryFilterState.inputValueError ?? ''}
         show={derivedQueryFilterState.inputValueError != null}