Use case-insensitive substring match for quick filter field selector (#6)

* Use case-insensitive substring match for quick filter field selector

* Update .nvmrc

---------

Co-authored-by: Tommi Lätti <tommi.latti@paypay-corp.co.jp>

Author: putrasattvika2

.nvmrc

@@ -1 +1 @@
-16
+20

src/components/QueryEditor/FilterEditor/index.tsx

@@ -95,7 +95,7 @@ interface FilterEditorRowProps {
 
 export const FilterEditorRow = ({ value, onSubmit }: FilterEditorRowProps) => {
   const dispatch = useDispatch();
-  const getFields = useFields('filters', 'startsWith');
+  const getFields = useFields('filters', 'containsCaseInsensitive');
   const valueInputRef = useRef<HTMLInputElement>(null);
 
   return (

src/hooks/useFields.ts

@@ -46,7 +46,7 @@ const toSelectableValue = ({ text }: MetricFindValue): SelectableValue<string> =
   value: text,
 });
 
-type MatchType = 'contains' | 'startsWith'
+type MatchType = 'contains' | 'containsCaseInsensitive' | 'startsWith'
 
 /**
  * Returns a function to query the configured datasource for autocomplete values for the specified aggregation type or data types.
@@ -73,7 +73,20 @@ export const useFields = (type: AggregationType | string[], matchType: MatchType
         if (q === undefined) {
           return true;
         }
-        return matchType === 'contains' ? text.includes(q) : text.startsWith(q)
+
+        switch (matchType) {
+          case 'contains':
+            return text.includes(q);
+
+          case 'containsCaseInsensitive':
+            return text.toLowerCase().includes(q.toLowerCase());
+
+          case 'startsWith':
+            return text.startsWith(q);
+
+          default:
+            return true;
+        }
       })
       .map(toSelectableValue);
   };