Remove deprecated code

src/components/SqlEditor.tsx

@@ -110,7 +110,7 @@ export const SqlEditor = (props: SqlEditorProps) => {
 
   return (
     <>
-      <div className={'gf-form ' + styles.QueryEditor.queryType}>
+      <div className={`${styles.QueryEditor.queryType} ${styles.Common.flexContainer}`}>
         <QueryTypeSwitcher queryType={queryType} onChange={(queryType) => saveChanges({ queryType })} sqlEditor />
       </div>
       <div className={styles.Common.wrapper}>

src/components/configEditor/HttpHeadersConfig.tsx

@@ -72,7 +72,6 @@ export const HttpHeadersConfig = (props: HttpHeadersConfigProps) => {
       <Field label={labels.forwardGrafanaHeaders.label} description={labels.forwardGrafanaHeaders.tooltip}>
         <Switch
           data-testid={selectors.forwardGrafanaHeadersSwitch}
-          className={'gf-form'}
           value={forwardGrafanaHeaders}
           onChange={(e) => updateForwardGrafanaHeaders(e.currentTarget.checked)}
         />
@@ -155,7 +154,6 @@ const HttpHeaderEditor = (props: HttpHeaderEditorProps) => {
           <Field label={labels.secureLabel}>
             <Switch
               data-testid={selectors.headerSecureSwitch}
-              className="gf-form"
               value={secure}
               onChange={(e) => setSecure(e.currentTarget.checked)}
               onBlur={() => onUpdate()}

src/components/configEditor/LabeledInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Input, InlineFormLabel } from '@grafana/ui';
+import { styles } from 'styles';
 
 interface LabeledInputProps {
   label: string;
@@ -14,7 +15,7 @@ export function LabeledInput(props: LabeledInputProps) {
   const { label, tooltip, placeholder, disabled, value, onChange } = props;
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flex}>
       <InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
         {label}
       </InlineFormLabel>

src/components/configEditor/LogsConfig.tsx

@@ -9,6 +9,7 @@ import { CHLogsConfig } from 'types/config';
 import allLabels from 'labels';
 import { columnLabelToPlaceholder } from 'data/utils';
 import { Switch } from 'components/queryBuilder/Switch';
+import { styles } from 'styles';
 
 interface LogsConfigProps {
   logsConfig?: CHLogsConfig;
@@ -125,7 +126,7 @@ export const LogsConfig = (props: LogsConfigProps) => {
           onChange={onSelectContextColumnsChange}
           wide
         />
-        <div className="gf-form">
+        <div className={styles.Common.flex}>
           <InlineFormLabel width={12} className="query-keyword" tooltip={labels.contextColumns.columns.tooltip}>
             {labels.contextColumns.columns.label}
           </InlineFormLabel>

src/components/configEditor/QuerySettingsConfig.tsx

@@ -100,7 +100,7 @@ export const QuerySettingsConfig = (props: QuerySettingsConfigProps) => {
       </Field>
 
       <Field label={labels.validateSql.label} description={labels.validateSql.tooltip}>
-        <Switch className="gf-form" value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
+        <Switch value={validateSql || false} onChange={onValidateSqlChange} role="checkbox" />
       </Field>
     </ConfigSection>
   );

src/components/queryBuilder/AggregateEditor.test.tsx

@@ -30,8 +30,8 @@ describe('AggregateEditor', () => {
     const addButton = result.getByTestId(selectors.components.QueryBuilder.AggregateEditor.addButton);
     expect(addButton).toBeInTheDocument();
     await userEvent.click(addButton);
-    expect(onAggregatesChange).toBeCalledTimes(1);
-    expect(onAggregatesChange).toBeCalledWith([expect.anything()]);
+    expect(onAggregatesChange).toHaveBeenCalledTimes(1);
+    expect(onAggregatesChange).toHaveBeenCalledWith([expect.anything()]);
   });
 
   it('should call onAggregatesChange when remove aggregate button is clicked', async () => {
@@ -45,7 +45,7 @@ describe('AggregateEditor', () => {
     const removeButton = result.getByTestId(selectors.components.QueryBuilder.AggregateEditor.itemRemoveButton);
     expect(removeButton).toBeInTheDocument();
     await userEvent.click(removeButton);
-    expect(onAggregatesChange).toBeCalledWith([]);
+    expect(onAggregatesChange).toHaveBeenCalledWith([]);
   });
 
   it('should call onAggregatesChange when aggregate is updated', async () => {
@@ -62,6 +62,6 @@ describe('AggregateEditor', () => {
     fireEvent.keyDown(aggregateSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(aggregateSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(aggregateSelect, { key: 'Enter' });
-    expect(onAggregatesChange).toBeCalledWith([expectedAggregate]);
+    expect(onAggregatesChange).toHaveBeenCalledWith([expectedAggregate]);
   });
 });

src/components/queryBuilder/AggregateEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { InlineFormLabel, Select, Button, Input, HorizontalGroup } from '@grafana/ui';
+import { InlineFormLabel, Select, Button, Input, Stack } from '@grafana/ui';
 import { AggregateColumn, AggregateType, TableColumn } from 'types/queryBuilder';
 import labels from 'labels';
 import { selectors } from 'selectors';
@@ -43,8 +43,8 @@
   }
 
   return (
-    <HorizontalGroup wrap align="flex-start" justify="flex-start">
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
       <Select
         width={20}
         className={styles.Common.inlineSelect}
         options={aggregateOptions}
@@ -53,7 +53,7 @@
         menuPlacement={'bottom'}
         allowCustomValue
       />
       <Select<string>
         width={40}
         className={styles.Common.inlineSelect}
         options={columnOptions}
@@ -83,7 +83,7 @@
         icon="trash-alt"
         onClick={() => removeAggregate(index)}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 

src/components/queryBuilder/ColumnsEditor.test.tsx

@@ -49,8 +49,8 @@ describe('ColumnsEditor', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' });
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
 
-    expect(onSelectedColumnsChange).toBeCalledTimes(1);
-    expect(onSelectedColumnsChange).toBeCalledWith([expect.any(Object), expect.any(Object)]);
+    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedColumnsChange).toHaveBeenCalledWith([expect.any(Object), expect.any(Object)]);
   });
 
   it('should call onSelectedColumnsChange when a column is deselected', () => {
@@ -67,8 +67,8 @@ describe('ColumnsEditor', () => {
 
     const removeButton = result.getByTestId('times'); // find by "x" symbol
     fireEvent.click(removeButton);
-    expect(onSelectedColumnsChange).toBeCalledTimes(1);
-    expect(onSelectedColumnsChange).toBeCalledWith([]);
+    expect(onSelectedColumnsChange).toHaveBeenCalledTimes(1);
+    expect(onSelectedColumnsChange).toHaveBeenCalledWith([]);
   });
 
   it('should close when clicked outside', () => {

src/components/queryBuilder/ColumnsEditor.tsx

@@ -79,7 +79,7 @@ export const ColumnsEditor = (props: ColumnsEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>

src/components/queryBuilder/DatabaseTableSelect.test.tsx

@@ -41,8 +41,8 @@ describe('DatabaseSelect', () => {
     );
     expect(result.container.firstChild).not.toBeNull();
 
-    expect(onDatabaseChange).toBeCalledTimes(1);
-    expect(onDatabaseChange).toBeCalledWith(defaultDB);
+    expect(onDatabaseChange).toHaveBeenCalledTimes(1);
+    expect(onDatabaseChange).toHaveBeenCalledWith(defaultDB);
   });
 
   it('should call onDatabaseChange when a database is selected', async () => {
@@ -61,8 +61,8 @@ describe('DatabaseSelect', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "other" db, a custom value
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "default" db
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
-    expect(onDatabaseChange).toBeCalledTimes(1);
-    expect(onDatabaseChange).toBeCalledWith(defaultDB);
+    expect(onDatabaseChange).toHaveBeenCalledTimes(1);
+    expect(onDatabaseChange).toHaveBeenCalledWith(defaultDB);
   });
 });
 
@@ -116,8 +116,8 @@ describe('TableSelect', () => {
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // "other" table, a custom value
     fireEvent.keyDown(multiSelect, { key: 'ArrowDown' }); // test table
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
-    expect(onTableChange).toBeCalledTimes(1);
-    expect(onTableChange).toBeCalledWith(testTable);
+    expect(onTableChange).toHaveBeenCalledTimes(1);
+    expect(onTableChange).toHaveBeenCalledWith(testTable);
   });
 });
 

src/components/queryBuilder/EditorTypeSwitcher.tsx

@@ -8,6 +8,7 @@ import { EditorType, CHQuery, defaultCHBuilderQuery } from 'types/sql';
 import { QueryBuilderOptions } from 'types/queryBuilder';
 import { mapQueryTypeToGrafanaFormat } from 'data/utils';
 import { Datasource } from 'data/CHDatasource';
+import { styles } from 'styles';
 
 interface CHEditorTypeSwitcherProps {
   query: CHQuery;
@@ -85,7 +86,7 @@ export const EditorTypeSwitcher = (props: CHEditorTypeSwitcherProps) => {
     setCannotConvertModalState(false);
   };
   return (
-    <span>
+    <span className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>

src/components/queryBuilder/FilterEditor.test.tsx

@@ -31,9 +31,9 @@ describe('FilterEditor', () => {
       expect(result.container.firstChild).not.toBeNull();
       expect(result.getAllByText(selectors.components.QueryEditor.QueryBuilder.WHERE.label).length).toBe(1);
       expect(result.getByTestId('query-builder-filters-add-button')).toBeInTheDocument();
-      expect(onFiltersChange).toBeCalledTimes(0);
+      expect(onFiltersChange).toHaveBeenCalledTimes(0);
       await userEvent.click(result.getByTestId('query-builder-filters-add-button'));
-      expect(onFiltersChange).toBeCalledTimes(1);
+      expect(onFiltersChange).toHaveBeenCalledTimes(1);
       expect(onFiltersChange).toHaveBeenCalledWith([defaultNewFilter]);
     });
     it('should render buttons and labels correctly', async () => {
@@ -105,10 +105,10 @@ describe('FilterEditor', () => {
       expect(result.getAllByTestId('query-builder-filters-inline-add-button').length).toBe(1);
       expect(result.getAllByTestId('query-builder-filters-remove-button').length).toBe(filters.length);
       await userEvent.click(result.getByTestId('query-builder-filters-inline-add-button'));
-      expect(onFiltersChange).toBeCalledTimes(1);
+      expect(onFiltersChange).toHaveBeenCalledTimes(1);
       expect(onFiltersChange).toHaveBeenNthCalledWith(1, [...filters, defaultNewFilter]);
       await userEvent.click(result.getAllByTestId('query-builder-filters-remove-button')[0]);
-      expect(onFiltersChange).toBeCalledTimes(2);
+      expect(onFiltersChange).toHaveBeenCalledTimes(2);
       expect(onFiltersChange).toHaveBeenNthCalledWith(2, [filters[1]]);
     });
   });

src/components/queryBuilder/FilterEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
-import { Button, HorizontalGroup, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select } from '@grafana/ui';
+import { Button, InlineFormLabel, Input, MultiSelect, RadioButtonGroup, Select, Stack } from '@grafana/ui';
 import { Filter, FilterOperator, TableColumn, NullFilter } from 'types/queryBuilder';
 import * as utils from 'components/queryBuilder/utils';
 import labels from 'labels';
@@ -137,7 +137,7 @@
 
     return (
       <div data-testid="query-builder-filters-date-value-container">
         <Select
           value={filter.value || 'TODAY'}
           onChange={(e) => onDateFilterValueChange(e.value!)}
           options={dateOptions}
@@ -156,7 +156,7 @@
     ) {
       return (
         <div data-testid="query-builder-filters-single-picklist-value-container">
           <Select value={filter.value} onChange={(e) => onStringFilterValueChange(e.value!)} options={getOptions()} />
         </div>
       );
     }
@@ -360,11 +360,11 @@
   };
 
   return (
-    <HorizontalGroup wrap align="flex-start" justify="flex-start">
+    <Stack wrap alignItems="flex-start" justifyContent="flex-start">
       {index !== 0 && (
         <RadioButtonGroup options={conditions} value={filter.condition} onChange={(e) => onFilterConditionChange(e!)} />
       )}
       <Select
         disabled={Boolean(filter.hint)}
         placeholder={filter.hint ? labels.types.ColumnHint[filter.hint] : undefined}
         value={filter.key}
@@ -379,7 +379,7 @@
         menuPlacement={'bottom'}
       />
       {(isMapType || isJSONType) && (
         <Select
           value={filter.mapKey}
           placeholder={labels.components.FilterEditor.mapKeyPlaceholder}
           width={40}
@@ -407,7 +407,7 @@
         className={styles.Common.smallBtn}
         onClick={() => removeFilter(index)}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 

src/components/queryBuilder/GroupByEditor.test.tsx

@@ -33,7 +33,7 @@ describe('GroupByEditor', () => {
     expect(result.queryAllByText('a').length).toBe(1); // is popup open
     fireEvent.keyDown(multiSelect, { key: 'Enter' });
     expect(result.queryAllByText('a').length).toBe(0); // is popup closed
-    expect(onGroupByChange).toBeCalledTimes(1);
-    expect(onGroupByChange).toBeCalledWith(expect.any(Object));
+    expect(onGroupByChange).toHaveBeenCalledTimes(1);
+    expect(onGroupByChange).toHaveBeenCalledWith(expect.any(Object));
   });
 });

src/components/queryBuilder/GroupByEditor.tsx

@@ -24,7 +24,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
   };
 
   return (
-    <div className="gf-form">
+    <div>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>

src/components/queryBuilder/LimitEditor.test.tsx

@@ -19,7 +19,7 @@ describe('LimitEditor', () => {
     fireEvent.change(limitInput, { target: { value: 5 } });
     fireEvent.blur(limitInput);
     expect(limitInput).toHaveValue(5);
-    expect(onLimitChange).toBeCalledTimes(1);
-    expect(onLimitChange).toBeCalledWith(5);
+    expect(onLimitChange).toHaveBeenCalledTimes(1);
+    expect(onLimitChange).toHaveBeenCalledWith(5);
   });
 });

src/components/queryBuilder/LimitEditor.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { InlineFormLabel, Input } from '@grafana/ui';
 import labels from 'labels';
 import { selectors } from 'selectors';
+import { styles } from 'styles';
 
 interface LimitEditorProps {
   limit: number;
@@ -13,7 +14,7 @@ export const LimitEditor = (props: LimitEditorProps) => {
   const { label, tooltip } = labels.components.LimitEditor;
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>

src/components/queryBuilder/ModeSwitch.test.tsx

@@ -29,15 +29,15 @@ describe('ModeSwitch', () => {
     expect(buttonB).toBeInTheDocument();
 
     fireEvent.click(buttonB);
-    expect(onChange).toBeCalledTimes(1);
-    expect(onChange).toBeCalledWith(true);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(true);
 
     result.rerender(
       <ModeSwitch labelA={labelA} labelB={labelB} value={true} onChange={onChange} label={label} tooltip={tooltip} />
     );
 
     fireEvent.click(buttonA);
-    expect(onChange).toBeCalledTimes(2);
-    expect(onChange).toBeCalledWith(false);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledWith(false);
   });
 });

src/components/queryBuilder/ModeSwitch.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RadioButtonGroup, InlineFormLabel } from '@grafana/ui';
+import { styles } from 'styles';
 
 export interface ModeSwitchProps {
   labelA: string;
@@ -28,7 +29,7 @@ export const ModeSwitch = (props: ModeSwitchProps) => {
   ];
 
   return (
-    <div className="gf-form">
+    <div className={styles.Common.flexContainer}>
       <InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
         {label}
       </InlineFormLabel>

src/components/queryBuilder/OrderByEditor.test.tsx

@@ -79,10 +79,10 @@ describe('OrderByEditor', () => {
     expect(result.getByTestId('query-builder-orderby-add-button')).toBeInTheDocument();
     expect(result.queryByTestId('query-builder-orderby-item-wrapper')).not.toBeInTheDocument();
     expect(result.queryByTestId('query-builder-orderby-remove-button')).not.toBeInTheDocument();
-    expect(onOrderByChange).toBeCalledTimes(0);
+    expect(onOrderByChange).toHaveBeenCalledTimes(0);
     await userEvent.click(result.getByTestId('query-builder-orderby-add-button'));
-    expect(onOrderByChange).toBeCalledTimes(1);
-    expect(onOrderByChange).toBeCalledWith([{ name: 'foo', dir: OrderByDirection.ASC }]);
+    expect(onOrderByChange).toHaveBeenCalledTimes(1);
+    expect(onOrderByChange).toHaveBeenCalledWith([{ name: 'foo', dir: OrderByDirection.ASC }]);
   });
   it('should remove items when remove button clicked', async () => {
     const onOrderByChange = jest.fn();
@@ -97,11 +97,11 @@ describe('OrderByEditor', () => {
       />
     );
     expect(result.container.firstChild).not.toBeNull();
-    expect(onOrderByChange).toBeCalledTimes(0);
+    expect(onOrderByChange).toHaveBeenCalledTimes(0);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-remove-button')[1]);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-remove-button')[0]);
     await userEvent.click(result.getAllByTestId('query-builder-orderby-add-button')[0]);
-    expect(onOrderByChange).toBeCalledTimes(3);
+    expect(onOrderByChange).toHaveBeenCalledTimes(3);
     expect(onOrderByChange).toHaveBeenNthCalledWith(1, [{ name: 'foo', dir: OrderByDirection.ASC }]);
     expect(onOrderByChange).toHaveBeenNthCalledWith(2, [{ name: 'bar', dir: OrderByDirection.ASC }]);
     expect(onOrderByChange).toHaveBeenNthCalledWith(3, [

src/components/queryBuilder/OtelVersionSelect.test.tsx

@@ -42,8 +42,8 @@ describe('OtelVersionSelect', () => {
     const toggle = result.getByRole('checkbox');
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
-    expect(onEnabledChange).toBeCalledTimes(1);
-    expect(onEnabledChange).toBeCalledWith(true);
+    expect(onEnabledChange).toHaveBeenCalledTimes(1);
+    expect(onEnabledChange).toHaveBeenCalledWith(true);
   });
 
   it('should call onEnabledChange when the switch is disabled', () => {
@@ -61,8 +61,8 @@ describe('OtelVersionSelect', () => {
     const toggle = result.getByRole('checkbox');
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
-    expect(onEnabledChange).toBeCalledTimes(1);
-    expect(onEnabledChange).toBeCalledWith(false);
+    expect(onEnabledChange).toHaveBeenCalledTimes(1);
+    expect(onEnabledChange).toHaveBeenCalledWith(false);
   });
 
   it('should call onVersionChange when a new version is selected', () => {
@@ -81,8 +81,8 @@ describe('OtelVersionSelect', () => {
     expect(select).toBeInTheDocument();
     fireEvent.keyDown(select, { key: 'ArrowDown' });
     fireEvent.keyDown(select, { key: 'Enter' });
-    expect(onVersionChange).toBeCalledTimes(1);
-    expect(onVersionChange).toBeCalledWith(expect.any(String));
+    expect(onVersionChange).toHaveBeenCalledTimes(1);
+    expect(onVersionChange).toHaveBeenCalledWith(expect.any(String));
   });
 
   it('should disable version selection when switch is disabled', () => {