Loki: Fix text search in Label browser (#32293)

* Switch to simple search before implementing proper fuzzy search

* Just do simple search

* Finalize simple search

* Pass string to highlights

public/app/plugins/datasource/loki/components/LokiLabel.tsx

@@ -14,7 +14,7 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
   name: string;
   active?: boolean;
   loading?: boolean;
-  searchTerm?: RegExp;
+  searchTerm?: string;
   value?: string;
   facets?: number;
   onClick?: OnLabelClick;
@@ -24,6 +24,7 @@ export const LokiLabel = forwardRef<HTMLElement, Props>(
   ({ name, value, hidden, facets, onClick, className, loading, searchTerm, active, style, ...rest }, ref) => {
     const theme = useTheme();
     const styles = getLabelStyles(theme);
+    const searchWords = searchTerm ? [searchTerm] : [];
 
     const onLabelClick = (event: React.MouseEvent<HTMLElement>) => {
       if (onClick && !hidden) {
@@ -55,7 +56,7 @@ export const LokiLabel = forwardRef<HTMLElement, Props>(
         )}
         {...rest}
       >
-        <Highlighter textToHighlight={text} searchWords={[searchTerm]} highlightClassName={styles.matchHighLight} />
+        <Highlighter textToHighlight={text} searchWords={searchWords} highlightClassName={styles.matchHighLight} />
       </span>
     );
   }

public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx

@@ -364,17 +364,13 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
       return <LoadingPlaceholder text="Loading labels..." />;
     }
     const styles = getStyles(theme);
-    let matcher: RegExp;
     let selectedLabels = labels.filter((label) => label.selected && label.values);
     if (searchTerm) {
       // TODO extract from render() and debounce
-      try {
-        matcher = new RegExp(searchTerm.split('').join('.*'), 'i');
-        selectedLabels = selectedLabels.map((label) => ({
-          ...label,
-          values: label.values?.filter((value) => value.selected || matcher.test(value.name)),
-        }));
-      } catch (error) {}
+      selectedLabels = selectedLabels.map((label) => ({
+        ...label,
+        values: label.values?.filter((value) => value.selected || value.name.includes(searchTerm)),
+      }));
     }
     const selector = buildSelector(this.state.labels);
     const empty = selector === EMPTY_SELECTOR;
@@ -439,7 +435,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
                           value={value?.name}
                           active={value?.selected}
                           onClick={this.onClickValue}
-                          searchTerm={matcher}
+                          searchTerm={searchTerm}
                         />
                       </div>
                     );