Prometheus: Don't remove lables when switching metrics

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

@@ -57,7 +57,7 @@ describe('MetricSelect', () => {
     await waitFor(() => expect(screen.getAllByLabelText('Select option')).toHaveLength(2));
   });
 
-  it('highlihts matching string', async () => {
+  it('highlights matching string', async () => {
     const { container } = render(<MetricSelect {...props} />);
     await openMetricSelect();
     const input = screen.getByRole('combobox');
@@ -65,7 +65,7 @@ describe('MetricSelect', () => {
     await waitFor(() => expect(container.querySelectorAll('mark')).toHaveLength(1));
   });
 
-  it('highlihts multiple matching strings in 1 input row', async () => {
+  it('highlights multiple matching strings in 1 input row', async () => {
     const { container } = render(<MetricSelect {...props} />);
     await openMetricSelect();
     const input = screen.getByRole('combobox');
@@ -73,7 +73,7 @@ describe('MetricSelect', () => {
     await waitFor(() => expect(container.querySelectorAll('mark')).toHaveLength(2));
   });
 
-  it('highlihts multiple matching strings in multiple input rows', async () => {
+  it('highlights multiple matching strings in multiple input rows', async () => {
     const { container } = render(<MetricSelect {...props} />);
     await openMetricSelect();
     const input = screen.getByRole('combobox');

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

@@ -42,11 +42,11 @@ export function MetricSelect({ query, onChange, onGetMetrics }: Props) {
         <Highlighter
           searchWords={meta.inputValue.split(splitSeparator)}
           textToHighlight={option.label ?? ''}
-          highlightClassName={styles.hightlight}
+          highlightClassName={styles.highlight}
         />
       );
     },
-    [styles.hightlight]
+    [styles.highlight]
   );
 
   return (
@@ -69,7 +69,7 @@ export function MetricSelect({ query, onChange, onGetMetrics }: Props) {
           options={state.metrics}
           onChange={({ value }) => {
             if (value) {
-              onChange({ ...query, metric: value, labels: [] });
+              onChange({ ...query, metric: value });
             }
           }}
         />
@@ -82,7 +82,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   select: css`
     min-width: 125px;
   `,
-  hightlight: css`
+  highlight: css`
     label: select__match-highlight;
     background: inherit;
     padding: inherit;