Chore: Clean up usage of deprecated stylesFactory function (#78419)

2025-02-25 18:55:37 -06:00 · 2023-11-21 14:01:53 +00:00
parent 165de515cd
commit 9e11779921
54 changed files with 964 additions and 1064 deletions
--- a/public/app/core/navigation/GrafanaRouteError.tsx
+++ b/public/app/core/navigation/GrafanaRouteError.tsx
@@ -3,7 +3,7 @@ import React, { ErrorInfo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';

 import { locationUtil, PageLayoutType } from '@grafana/data';
-import { Button, ErrorWithStack, stylesFactory } from '@grafana/ui';
+import { Button, ErrorWithStack, useStyles2 } from '@grafana/ui';

 import { Page } from '../components/Page/Page';

@@ -15,6 +15,7 @@ interface Props {
 export function GrafanaRouteError({ error, errorInfo }: Props) {
  const location = useLocation();
  const isChunkLoadingError = error?.name === 'ChunkLoadError';
+  const style = useStyles2(getStyles);

  useEffect(() => {
    // Auto reload page 1 time if we have a chunk load error
@@ -27,7 +28,7 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {

  return (
    <Page navId="error" layout={PageLayoutType.Canvas}>
-      <div className={getStyles()}>
+      <div className={style}>
        {isChunkLoadingError && (
          <div>
            <h2>Unable to find application file</h2>
@@ -50,9 +51,7 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
  );
 }

-const getStyles = stylesFactory(() => {
-  return css`
-    width: 500px;
-    margin: 64px auto;
-  `;
-});
+const getStyles = () => css`
+  width: 500px;
+  margin: 64px auto;
+`;
--- a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
+++ b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React from 'react';

-import { Modal, stylesFactory } from '@grafana/ui';
+import { Modal, useStyles2 } from '@grafana/ui';

 import { OnRowOptionsUpdate, RowOptionsForm } from './RowOptionsForm';

@@ -14,7 +14,8 @@ export interface RowOptionsModalProps {
 }

 export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate, warning }: RowOptionsModalProps) => {
-  const styles = getStyles();
+  const styles = useStyles2(getStyles);
+
  return (
    <Modal isOpen={true} title="Row options" icon="copy" onDismiss={onDismiss} className={styles.modal}>
      <RowOptionsForm repeat={repeat} title={title} onCancel={onDismiss} onUpdate={onUpdate} warning={warning} />
@@ -22,11 +23,9 @@ export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate, warning }:
  );
 };

-const getStyles = stylesFactory(() => {
-  return {
-    modal: css`
-      label: RowOptionsModal;
-      width: 500px;
-    `,
-  };
+const getStyles = () => ({
+  modal: css`
+    label: RowOptionsModal;
+    width: 500px;
+  `,
 });
--- a/public/app/features/dimensions/editors/ResourceCards.tsx
+++ b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -4,7 +4,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { areEqual, FixedSizeGrid as Grid } from 'react-window';

 import { GrafanaTheme2 } from '@grafana/data';
-import { useTheme2, stylesFactory } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';

 import { ResourceItem } from './FolderPickerTab';
@@ -26,8 +26,7 @@ const MemoizedCell = memo(function Cell(props: CellProps) {
  const { cards, columnCount, onChange, selected } = data;
  const singleColumnIndex = columnIndex + rowIndex * columnCount;
  const card = cards[singleColumnIndex];
-  const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  return (
    <div style={style}>
@@ -56,53 +55,6 @@ const MemoizedCell = memo(function Cell(props: CellProps) {
  );
 }, areEqual);

-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    card: css`
-      display: inline-block;
-      width: 90px;
-      height: 90px;
-      margin: 0.75rem;
-      margin-left: 15px;
-      text-align: center;
-      cursor: pointer;
-      position: relative;
-      background-color: transparent;
-      border: 1px solid transparent;
-      border-radius: 8px;
-      padding-top: 6px;
-      :hover {
-        border-color: ${theme.colors.action.hover};
-        box-shadow: ${theme.shadows.z2};
-      }
-    `,
-    selected: css`
-      border: 2px solid ${theme.colors.primary.main};
-      :hover {
-        border-color: ${theme.colors.primary.main};
-      }
-    `,
-    img: css`
-      width: 40px;
-      height: 40px;
-      object-fit: cover;
-      vertical-align: middle;
-      fill: ${theme.colors.text.primary};
-    `,
-    text: css`
-      color: ${theme.colors.text.primary};
-      white-space: nowrap;
-      font-size: 12px;
-      text-overflow: ellipsis;
-      display: block;
-      overflow: hidden;
-    `,
-    grid: css`
-      border: 1px solid ${theme.colors.border.medium};
-    `,
-  };
-});
-
 interface CardProps {
  onChange: (value: string) => void;
  cards: ResourceItem[];
@@ -111,8 +63,7 @@ interface CardProps {

 export const ResourceCards = (props: CardProps) => {
  const { onChange, cards, value } = props;
-  const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  return (
    <AutoSizer defaultWidth={680}>
@@ -139,3 +90,48 @@ export const ResourceCards = (props: CardProps) => {
    </AutoSizer>
  );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  card: css`
+    display: inline-block;
+    width: 90px;
+    height: 90px;
+    margin: 0.75rem;
+    margin-left: 15px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    padding-top: 6px;
+    :hover {
+      border-color: ${theme.colors.action.hover};
+      box-shadow: ${theme.shadows.z2};
+    }
+  `,
+  selected: css`
+    border: 2px solid ${theme.colors.primary.main};
+    :hover {
+      border-color: ${theme.colors.primary.main};
+    }
+  `,
+  img: css`
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    vertical-align: middle;
+    fill: ${theme.colors.text.primary};
+  `,
+  text: css`
+    color: ${theme.colors.text.primary};
+    white-space: nowrap;
+    font-size: 12px;
+    text-overflow: ellipsis;
+    display: block;
+    overflow: hidden;
+  `,
+  grid: css`
+    border: 1px solid ${theme.colors.border.medium};
+  `,
+});
--- a/public/app/features/explore/ExploreDrawer.tsx
+++ b/public/app/features/explore/ExploreDrawer.tsx
@@ -5,51 +5,7 @@ import React from 'react';

 // Services & Utils
 import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
-
-// Types
-
-const drawerSlide = (theme: GrafanaTheme2) => keyframes`
-  0% {
-    transform: translateY(${theme.components.horizontalDrawer.defaultHeight}px);
-  }
-
-  100% {
-    transform: translateY(0px);
-  }
-`;
-
-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    container: css`
-      position: fixed !important;
-      bottom: 0;
-      background: ${theme.colors.background.primary};
-      border-top: 1px solid ${theme.colors.border.weak};
-      margin: ${theme.spacing(0, -2, 0, -2)};
-      box-shadow: ${theme.shadows.z3};
-      z-index: ${theme.zIndex.navbarFixed};
-    `,
-    drawerActive: css`
-      opacity: 1;
-      animation: 0.5s ease-out ${drawerSlide(theme)};
-    `,
-    rzHandle: css`
-      background: ${theme.colors.secondary.main};
-      transition: 0.3s background ease-in-out;
-      position: relative;
-      width: 200px !important;
-      height: 7px !important;
-      left: calc(50% - 100px) !important;
-      top: -4px !important;
-      cursor: grab;
-      border-radius: ${theme.shape.radius.pill};
-      &:hover {
-        background: ${theme.colors.secondary.shade};
-      }
-    `,
-  };
-});
+import { useStyles2, useTheme2 } from '@grafana/ui';

 export interface Props {
  width: number;
@@ -60,7 +16,7 @@ export interface Props {
 export function ExploreDrawer(props: Props) {
  const { width, children, onResize } = props;
  const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
  const drawerWidth = `${width + 31.5}px`;

  return (
@@ -87,3 +43,43 @@ export function ExploreDrawer(props: Props) {
    </Resizable>
  );
 }
+
+const drawerSlide = (theme: GrafanaTheme2) => keyframes`
+  0% {
+    transform: translateY(${theme.components.horizontalDrawer.defaultHeight}px);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+`;
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    position: fixed !important;
+    bottom: 0;
+    background: ${theme.colors.background.primary};
+    border-top: 1px solid ${theme.colors.border.weak};
+    margin: ${theme.spacing(0, -2, 0, -2)};
+    box-shadow: ${theme.shadows.z3};
+    z-index: ${theme.zIndex.navbarFixed};
+  `,
+  drawerActive: css`
+    opacity: 1;
+    animation: 0.5s ease-out ${drawerSlide(theme)};
+  `,
+  rzHandle: css`
+    background: ${theme.colors.secondary.main};
+    transition: 0.3s background ease-in-out;
+    position: relative;
+    width: 200px !important;
+    height: 7px !important;
+    left: calc(50% - 100px) !important;
+    top: -4px !important;
+    cursor: grab;
+    border-radius: ${theme.shape.radius.pill};
+    &:hover {
+      background: ${theme.colors.secondary.shade};
+    }
+  `,
+});
--- a/public/app/features/geo/editor/GazetteerPathEditor.tsx
+++ b/public/app/features/geo/editor/GazetteerPathEditor.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { useMemo, useState, useEffect } from 'react';

-import { StandardEditorProps, SelectableValue, GrafanaTheme2 } from '@grafana/data';
-import { Alert, Select, stylesFactory, useTheme2 } from '@grafana/ui';
+import { StandardEditorProps, SelectableValue } from '@grafana/data';
+import { Alert, Select, useStyles2 } from '@grafana/ui';

 import { COUNTRIES_GAZETTEER_PATH, Gazetteer, getGazetteer } from '../gazetteer/gazetteer';

@@ -34,7 +34,7 @@ export const GazetteerPathEditor = ({
  context,
  item,
 }: StandardEditorProps<string, GazetteerPathEditorConfigSettings>) => {
-  const styles = getStyles(useTheme2());
+  const styles = useStyles2(getStyles);
  const [gaz, setGaz] = useState<Gazetteer>();
  const settings = item.settings;

@@ -86,17 +86,15 @@ export const GazetteerPathEditor = ({
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    keys: css`
-      margin-top: 4px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+const getStyles = () => ({
+  keys: css`
+    margin-top: 4px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;

-      > span {
-        margin-left: 4px;
-      }
-    `,
-  };
+    > span {
+      margin-left: 4px;
+    }
+  `,
 });
--- a/public/app/features/inspector/InspectStatsTable.tsx
+++ b/public/app/features/inspector/InspectStatsTable.tsx
@@ -9,7 +9,7 @@ import {
  QueryResultMetaStat,
  TimeZone,
 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
+import { useStyles2, useTheme2 } from '@grafana/ui';

 interface InspectStatsTableProps {
  timeZone: TimeZone;
@@ -19,7 +19,7 @@ interface InspectStatsTableProps {

 export const InspectStatsTable = ({ timeZone, name, stats }: InspectStatsTableProps) => {
  const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  if (!stats || !stats.length) {
    return null;
@@ -56,13 +56,11 @@ function formatStat(stat: QueryResultMetaStat, timeZone: TimeZone, theme: Grafan
  return formattedValueToString(display(stat.value));
 }

-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    wrapper: css`
-      padding-bottom: ${theme.spacing(2)};
-    `,
-    cell: css`
-      text-align: right;
-    `,
-  };
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    padding-bottom: ${theme.spacing(2)};
+  `,
+  cell: css`
+    text-align: right;
+  `,
 });
--- a/public/app/features/inspector/InspectStatsTraceIdsTable.tsx
+++ b/public/app/features/inspector/InspectStatsTraceIdsTable.tsx
@@ -2,16 +2,15 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';

-type Props = {
+interface Props {
  name: string;
  traceIds: string[];
-};
+}

 export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  if (traceIds.length === 0) {
    return null;
@@ -35,13 +34,11 @@ export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => {
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    wrapper: css`
-      padding-bottom: ${theme.spacing(2)};
-    `,
-    cell: css`
-      text-align: right;
-    `,
-  };
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    padding-bottom: ${theme.spacing(2)};
+  `,
+  cell: css`
+    text-align: right;
+  `,
 });
--- a/public/app/features/live/dashboard/DashboardChangedModal.tsx
+++ b/public/app/features/live/dashboard/DashboardChangedModal.tsx
@@ -3,7 +3,7 @@ import React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Button, Modal, stylesFactory, useStyles2 } from '@grafana/ui';
+import { Button, Modal, useStyles2 } from '@grafana/ui';

 import { dashboardWatcher } from './dashboardWatcher';
 import { DashboardEvent, DashboardEventAction } from './types';
@@ -50,12 +50,10 @@ export function DashboardChangedModal({ onDismiss, event }: Props) {
  );
 }

-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    modal: css({ width: '600px' }),
-    description: css({
-      color: theme.colors.text.secondary,
-      paddingBottom: theme.spacing(1),
-    }),
-  };
+const getStyles = (theme: GrafanaTheme2) => ({
+  modal: css({ width: '600px' }),
+  description: css({
+    color: theme.colors.text.secondary,
+    paddingBottom: theme.spacing(1),
+  }),
 });
--- a/public/app/features/users/TokenRevokedModal.tsx
+++ b/public/app/features/users/TokenRevokedModal.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, InfoBox, Portal, stylesFactory, useTheme2 } from '@grafana/ui';
+import { Button, InfoBox, Portal, useStyles2, useTheme2 } from '@grafana/ui';
 import { getModalStyles } from '@grafana/ui/src/components/Modal/getModalStyles';

 interface Props {
@@ -10,9 +10,8 @@ interface Props {
 }

 export const TokenRevokedModal = (props: Props) => {
+  const styles = useStyles2(getStyles);
  const theme = useTheme2();
-
-  const styles = getStyles(theme);
  const modalStyles = getModalStyles(theme);

  const showMaxConcurrentSessions = Boolean(props.maxConcurrentSessions);
@@ -51,17 +50,15 @@ export const TokenRevokedModal = (props: Props) => {
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    infobox: css`
-      margin-bottom: 0;
-    `,
-    text: css`
-      margin: ${theme.spacing(1, 0, 2)};
-    `,
-    backdrop: css`
-      background-color: ${theme.colors.background.canvas};
-      opacity: 0.8;
-    `,
-  };
+const getStyles = (theme: GrafanaTheme2) => ({
+  infobox: css`
+    margin-bottom: 0;
+  `,
+  text: css`
+    margin: ${theme.spacing(1, 0, 2)};
+  `,
+  backdrop: css`
+    background-color: ${theme.colors.background.canvas};
+    opacity: 0.8;
+  `,
 });
--- a/public/app/plugins/datasource/azuremonitor/components/Space.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/Space.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';

 export interface SpaceProps {
  v?: number;
@@ -11,8 +11,7 @@ export interface SpaceProps {
 }

 export const Space = (props: SpaceProps) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme, props);
+  const styles = useStyles2(getStyles, props);

  return <span className={cx(styles.wrapper)} />;
 };
@@ -23,7 +22,7 @@ Space.defaultProps = {
  layout: 'block',
 };

-const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
+const getStyles = (theme: GrafanaTheme2, props: SpaceProps) => ({
  wrapper: css([
    {
      paddingRight: theme.spacing(props.h ?? 0),
@@ -36,4 +35,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
      display: 'block',
    },
  ]),
-}));
+});
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
-import { Input, stylesFactory, useTheme2 } from '@grafana/ui';
+import { Input, useStyles2 } from '@grafana/ui';

 import { MultiFilterCondition } from './MultiFilter';

@@ -17,8 +17,7 @@ export interface Props {
 export const MultiFilterItem = ({ filter, onChange, onDelete, keyPlaceholder }: Props) => {
  const [localKey, setLocalKey] = useState(filter.key || '');
  const [localValue, setLocalValue] = useState(filter.value?.join(', ') || '');
-  const theme = useTheme2();
-  const styles = getOperatorStyles(theme);
+  const styles = useStyles2(getOperatorStyles);

  return (
    <div data-testid="cloudwatch-multifilter-item">
@@ -59,9 +58,9 @@ export const MultiFilterItem = ({ filter, onChange, onDelete, keyPlaceholder }:
  );
 };

-const getOperatorStyles = stylesFactory((theme: GrafanaTheme2) => ({
+const getOperatorStyles = (theme: GrafanaTheme2) => ({
  root: css({
    padding: theme.spacing(0, 1),
    alignSelf: 'center',
  }),
-}));
+});
--- a/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/shared/Dimensions/FilterItem.tsx
@@ -4,7 +4,7 @@ import { useAsyncFn } from 'react-use';

 import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
-import { Select, stylesFactory, useTheme2 } from '@grafana/ui';
+import { Select, useStyles2 } from '@grafana/ui';

 import { CloudWatchDatasource } from '../../../datasource';
 import { Dimensions, MetricStat } from '../../../types';
@@ -76,8 +76,7 @@ export const FilterItem = ({
    metricName,
    accountId,
  ]);
-  const theme = useTheme2();
-  const styles = getOperatorStyles(theme);
+  const styles = useStyles2(getOperatorStyles);

  return (
    <div data-testid="cloudwatch-dimensions-filter-item">
@@ -119,9 +118,9 @@ export const FilterItem = ({
  );
 };

-const getOperatorStyles = stylesFactory((theme: GrafanaTheme2) => ({
+const getOperatorStyles = (theme: GrafanaTheme2) => ({
  root: css({
    padding: theme.spacing(0, 1),
    alignSelf: 'center',
  }),
-}));
+});
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
@@ -6,50 +6,28 @@ import { DataSourceInstanceSettings, VariableSuggestion } from '@grafana/data';
 import {
  Button,
  DataLinkInput,
-  stylesFactory,
  InlineField,
  InlineSwitch,
  InlineFieldRow,
  InlineLabel,
  Input,
+  useStyles2,
 } from '@grafana/ui';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';

 import { DataLinkConfig } from '../types';

-const getStyles = stylesFactory(() => ({
-  firstRow: css`
-    display: flex;
-  `,
-  nameField: css`
-    flex: 2;
-  `,
-  regexField: css`
-    flex: 3;
-  `,
-  row: css`
-    display: flex;
-    align-items: baseline;
-  `,
-  urlField: css`
-    display: flex;
-    flex: 1;
-  `,
-  urlDisplayLabelField: css`
-    flex: 1;
-  `,
-}));
-
-type Props = {
+interface Props {
  value: DataLinkConfig;
  onChange: (value: DataLinkConfig) => void;
  onDelete: () => void;
  suggestions: VariableSuggestion[];
  className?: string;
-};
+}
+
 export const DataLink = (props: Props) => {
  const { value, onChange, onDelete, suggestions, className } = props;
-  const styles = getStyles();
+  const styles = useStyles2(getStyles);
  const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);

  const handleChange = (field: keyof typeof value) => (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -173,3 +151,26 @@ function useInternalLink(datasourceUid?: string): [boolean, Dispatch<SetStateAct

  return [showInternalLink, setShowInternalLink];
 }
+
+const getStyles = () => ({
+  firstRow: css`
+    display: flex;
+  `,
+  nameField: css`
+    flex: 2;
+  `,
+  regexField: css`
+    flex: 3;
+  `,
+  row: css`
+    display: flex;
+    align-items: baseline;
+  `,
+  urlField: css`
+    display: flex;
+    flex: 1;
+  `,
+  urlDisplayLabelField: css`
+    flex: 1;
+  `,
+});
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/EditorField.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { ComponentProps } from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { Field, Icon, PopoverContent, ReactUtils, stylesFactory, Tooltip, useTheme2 } from '@grafana/ui';
+import { Field, Icon, PopoverContent, ReactUtils, Tooltip, useStyles2 } from '@grafana/ui';

 interface EditorFieldProps extends ComponentProps<typeof Field> {
  label: string;
@@ -15,8 +15,7 @@ interface EditorFieldProps extends ComponentProps<typeof Field> {
 export const EditorField = (props: EditorFieldProps) => {
  const { label, optional, tooltip, children, width, ...fieldProps } = props;

-  const theme = useTheme2();
-  const styles = getStyles(theme, width);
+  const styles = useStyles2(getStyles, width);

  // Null check for backward compatibility
  const childInputId = fieldProps?.htmlFor || ReactUtils?.getChildId(children);
@@ -45,32 +44,30 @@ export const EditorField = (props: EditorFieldProps) => {
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme2, width?: number | string) => {
-  return {
-    space: css({
-      paddingRight: theme.spacing(0),
-      paddingBottom: theme.spacing(0.5),
-    }),
-    root: css({
-      minWidth: theme.spacing(width ?? 0),
-    }),
-    label: css({
-      fontSize: 12,
-      fontWeight: theme.typography.fontWeightMedium,
-    }),
-    optional: css({
-      fontStyle: 'italic',
-      color: theme.colors.text.secondary,
-    }),
-    field: css({
-      marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
-    }),
-    icon: css({
-      color: theme.colors.text.secondary,
-      marginLeft: theme.spacing(1),
-      ':hover': {
-        color: theme.colors.text.primary,
-      },
-    }),
-  };
+const getStyles = (theme: GrafanaTheme2, width?: number | string) => ({
+  space: css({
+    paddingRight: theme.spacing(0),
+    paddingBottom: theme.spacing(0.5),
+  }),
+  root: css({
+    minWidth: theme.spacing(width ?? 0),
+  }),
+  label: css({
+    fontSize: 12,
+    fontWeight: theme.typography.fontWeightMedium,
+  }),
+  optional: css({
+    fontStyle: 'italic',
+    color: theme.colors.text.secondary,
+  }),
+  field: css({
+    marginBottom: 0, // GrafanaUI/Field has a bottom margin which we must remove
+  }),
+  icon: css({
+    color: theme.colors.text.secondary,
+    marginLeft: theme.spacing(1),
+    ':hover': {
+      color: theme.colors.text.primary,
+    },
+  }),
 });