Chore: Use react-highlight-words types (#54627)

packages/grafana-ui/package.json

@@ -149,6 +149,7 @@
     "@types/react-calendar": "3.5.1",
     "@types/react-color": "3.0.6",
     "@types/react-dom": "17.0.14",
+    "@types/react-highlight-words": "0.16.4",
     "@types/react-router-dom": "5.3.3",
     "@types/react-table": "7.7.12",
     "@types/react-test-renderer": "17.0.1",

packages/grafana-ui/src/components/BrowserLabel/Label.tsx

@@ -1,6 +1,5 @@
 import { cx, css } from '@emotion/css';
 import React, { forwardRef, HTMLAttributes, useCallback } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { GrafanaTheme2 } from '@grafana/data';

packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx

@@ -1,6 +1,5 @@
 import ansicolor from 'ansicolor';
 import React, { PureComponent } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { findHighlightChunksInText, GrafanaTheme2 } from '@grafana/data';

packages/grafana-ui/src/components/Logs/LogRowMessage.tsx

@@ -1,7 +1,6 @@
 import { css, cx } from '@emotion/css';
 import memoizeOne from 'memoize-one';
 import React, { PureComponent } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 import tinycolor from 'tinycolor2';
 

packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx

@@ -1,6 +1,5 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { GrafanaTheme } from '@grafana/data';

public/app/features/alerting/AlertRuleItem.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { Icon, IconName, Button, LinkButton, Card } from '@grafana/ui';

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -1,6 +1,5 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import {

public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { selectors } from '@grafana/e2e-selectors';

public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/css';
 import React, { useCallback, useState } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { SelectableValue, toOption, GrafanaTheme2 } from '@grafana/data';

yarn.lock

@@ -5231,6 +5231,7 @@ __metadata:
     "@types/react-calendar": 3.5.1
     "@types/react-color": 3.0.6
     "@types/react-dom": 17.0.14
+    "@types/react-highlight-words": 0.16.4
     "@types/react-router-dom": 5.3.3
     "@types/react-table": 7.7.12
     "@types/react-test-renderer": 17.0.1