add Tooltips for QueryFilterInputSelects

bitmovin · Jun 19, 2024 · ab7d18d · ab7d18d
1 parent cf9b6fb
commit ab7d18d
Showing 1 changed file with 32 additions and 14 deletions.
diff --git 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}