Rewrite old useStyles2 pattern to use new pattern (#76136)

* Rewrite old useStyles2 pattern to use new pattern

* fix lint from used imports

packages/grafana-ui/src/components/Divider/Divider.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 
@@ -11,7 +11,7 @@ interface DividerProps {
 }
 
 export const Divider = ({ direction = 'horizontal', spacing = 2 }: DividerProps) => {
-  const styles = useStyles2(useCallback((theme) => getStyles(theme, spacing), [spacing]));
+  const styles = useStyles2(getStyles, spacing);
 
   if (direction === 'vertical') {
     return <div className={styles.verticalDivider}></div>;

packages/grafana-ui/src/components/Forms/InlineLabel.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -34,9 +34,7 @@ export const InlineLabel = ({
   as: Component = 'label',
   ...rest
 }: Props) => {
-  const styles = useStyles2(
-    useCallback((theme) => getInlineLabelStyles(theme, transparent, width), [transparent, width])
-  );
+  const styles = useStyles2(getInlineLabelStyles, transparent, width);
 
   return (
     <Component className={cx(styles.label, className)} {...rest}>

packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx

@@ -12,7 +12,7 @@ export interface Props {
 
 /** @beta */
 export const InlineSegmentGroup = ({ children, className, grow, ...htmlProps }: React.PropsWithChildren<Props>) => {
-  const styles = useStyles2((theme) => getStyles(theme, grow));
+  const styles = useStyles2(getStyles, grow);
 
   return (
     <div className={cx(styles.container, className)} {...htmlProps}>

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { HTMLProps, useCallback } from 'react';
+import React, { HTMLProps } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -41,12 +41,7 @@ export const Layout = ({
   height = '100%',
   ...rest
 }: LayoutProps) => {
-  const styles = useStyles2(
-    useCallback(
-      (theme) => getStyles(theme, orientation, spacing, justify, align, wrap),
-      [align, justify, orientation, spacing, wrap]
-    )
-  );
+  const styles = useStyles2(getStyles, orientation, spacing, justify, align, wrap);
 
   return (
     <div className={styles.layout} style={{ width, height }} {...rest}>
@@ -105,7 +100,7 @@ export const VerticalGroup = ({
 );
 
 export const Container = ({ children, padding, margin, grow, shrink }: React.PropsWithChildren<ContainerProps>) => {
-  const styles = useStyles2(useCallback((theme) => getContainerStyles(theme, padding, margin), [padding, margin]));
+  const styles = useStyles2(getContainerStyles, padding, margin);
 
   return (
     <div

packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx

@@ -20,7 +20,7 @@ const MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;
 
 export function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {
   const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);
-  const styles = useStyles2((theme) => getStyles(theme, delay, durationMs));
+  const styles = useStyles2(getStyles, delay, durationMs);
   const containerStyles: CSSProperties = {
     overflow: 'hidden',
   };

packages/grafana-ui/src/components/Text/Text.tsx

@@ -1,14 +1,5 @@
 import { css } from '@emotion/css';
-import React, {
-  createElement,
-  CSSProperties,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { createElement, CSSProperties, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDomServer from 'react-dom/server';
 
 import { GrafanaTheme2, ThemeTypographyVariantTypes } from '@grafana/data';
@@ -38,12 +29,7 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'clas
 
 export const Text = React.forwardRef<HTMLElement, TextProps>(
   ({ element = 'span', variant, weight, color, truncate, italic, textAlignment, children, ...restProps }, ref) => {
-    const styles = useStyles2(
-      useCallback(
-        (theme) => getTextStyles(theme, element, variant, color, weight, truncate, italic, textAlignment),
-        [color, textAlignment, truncate, italic, weight, variant, element]
-      )
-    );
+    const styles = useStyles2(getTextStyles, element, variant, color, weight, truncate, italic, textAlignment);
     const [isOverflowing, setIsOverflowing] = useState(false);
     const internalRef = useRef<HTMLElement>(null);
 

public/app/core/components/RolePicker/RolePickerInput.tsx

@@ -35,7 +35,7 @@ export const RolePickerInput = ({
   onQueryChange,
   ...rest
 }: InputProps): JSX.Element => {
-  const styles = useStyles2((theme) => getRolePickerInputStyles(theme, false, !!isFocused, !!disabled, false));
+  const styles = useStyles2(getRolePickerInputStyles, false, !!isFocused, !!disabled, false);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {

public/app/core/components/Upgrade/UpgradeBox.tsx

@@ -25,7 +25,7 @@ export const UpgradeBox = ({
   size = 'md',
   ...htmlProps
 }: Props) => {
-  const styles = useStyles2((theme) => getUpgradeBoxStyles(theme, size));
+  const styles = useStyles2(getUpgradeBoxStyles, size);
 
   useEffect(() => {
     reportExperimentView(`feature-highlights-${featureId}`, 'test', eventVariant);

public/app/features/alerting/unified/components/AlertLabels.tsx

@@ -15,7 +15,7 @@ interface Props {
 }
 
 export const AlertLabels = ({ labels, commonLabels = {}, size }: Props) => {
-  const styles = useStyles2((theme) => getStyles(theme, size));
+  const styles = useStyles2(getStyles, size);
   const [showCommonLabels, setShowCommonLabels] = useState(false);
 
   const labelsToShow = chain(labels)

public/app/features/alerting/unified/components/AlertStateDot.tsx

@@ -6,7 +6,7 @@ import { ComponentSize, Tooltip, useStyles2 } from '@grafana/ui';
 import { GrafanaAlertState } from 'app/types/unified-alerting-dto';
 
 const AlertStateDot = (props: DotStylesProps) => {
-  const styles = useStyles2((theme) => getDotStyles(theme, props));
+  const styles = useStyles2(getDotStyles, props);
 
   return (
     <Tooltip content={String(props.state)} placement="top">

public/app/features/alerting/unified/components/Label.tsx

@@ -18,7 +18,7 @@ interface Props {
 
 // TODO allow customization with color prop
 const Label = ({ label, value, icon, color, size = 'md' }: Props) => {
-  const styles = useStyles2((theme) => getStyles(theme, color, size));
+  const styles = useStyles2(getStyles, color, size);
 
   return (
     <div className={styles.wrapper} role="listitem">

public/app/features/datasources/components/picker/DataSourceDropdown.tsx

@@ -72,7 +72,7 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
     ...restProps
   } = props;
 
-  const styles = useStyles2((theme: GrafanaTheme2) => getStylesDropdown(theme, props));
+  const styles = useStyles2(getStylesDropdown, props);
   const [isOpen, setOpen] = useState(false);
   const [inputHasFocus, setInputHasFocus] = useState(false);
   const [filterTerm, setFilterTerm] = useState<string>('');

public/app/features/explore/PrometheusListView/ItemLabels.tsx

@@ -32,7 +32,7 @@ export const formatValueName = (name: string): string => {
 };
 
 export const ItemLabels = ({ valueLabels, expanded }: { valueLabels: Field[]; expanded: boolean }) => {
-  const styles = useStyles2((theme) => getItemLabelsStyles(theme, expanded));
+  const styles = useStyles2(getItemLabelsStyles, expanded);
 
   return (
     <div className={styles.itemLabelsWrap}>

public/app/features/explore/PrometheusListView/ItemValues.tsx

@@ -53,7 +53,7 @@ export const ItemValues = ({
   values: RawListValue[];
   hideFieldsWithoutValues: boolean;
 }) => {
-  const styles = useStyles2((theme) => getStyles(theme, totalNumberOfValues));
+  const styles = useStyles2(getStyles, totalNumberOfValues);
   return (
     <div role={'cell'} className={styles.rowValuesWrap}>
       {values?.map((value) => {

public/app/features/explore/PrometheusListView/RawListItem.tsx

@@ -101,7 +101,7 @@ const RawListItem = ({ listItemData, listKey, totalNumberOfValues, valueLabels,
   const { __name__, ...allLabels } = listItemData;
   const [_, copyToClipboard] = useCopyToClipboard();
   const displayLength = valueLabels?.length ?? totalNumberOfValues;
-  const styles = useStyles2((theme) => getStyles(theme, displayLength, isExpandedView));
+  const styles = useStyles2(getStyles, displayLength, isExpandedView);
   const { values, attributeValues } = getQueryValues(allLabels);
 
   /**

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
@@ -126,7 +126,7 @@ export function RichHistoryQueriesTab(props: RichHistoryQueriesTabProps) {
     activeDatasourceInstance,
   } = props;
 
-  const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, height), [height]));
+  const styles = useStyles2(getStyles, height);
 
   const listOfDatasources = createDatasourcesList();
 

public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx

@@ -41,7 +41,7 @@ export const LibraryPanelsSearch = ({
   showSort = false,
   showSecondaryActions = false,
 }: LibraryPanelsSearchProps): JSX.Element => {
-  const styles = useStyles2(useCallback((theme) => getStyles(theme, variant), [variant]));
+  const styles = useStyles2(getStyles, variant);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
@@ -149,7 +149,7 @@ const SearchControls = React.memo(
     onFolderFilterChange,
     onPanelFilterChange,
   }: SearchControlsProps) => {
-    const styles = useStyles2(useCallback((theme) => getRowStyles(theme, variant), [variant]));
+    const styles = useStyles2(getRowStyles, variant);
     const panelFilterChanged = useCallback(
       (plugins: PanelPluginMeta[]) => onPanelFilterChange(plugins.map((p) => p.id)),
       [onPanelFilterChange]

public/app/features/search/page/components/FolderSection.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useId, useState } from 'react';
+import React, { useId, useState } from 'react';
 import { useAsync } from 'react-use';
 
 import { GrafanaTheme2, toIconName } from '@grafana/data';
@@ -59,7 +59,7 @@ export const FolderSection = ({
   const uid = section.uid;
   const editable = selectionToggle != null;
 
-  const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getSectionHeaderStyles(theme, editable), [editable]));
+  const styles = useStyles2(getSectionHeaderStyles, editable);
   const [sectionExpanded, setSectionExpanded] = useState(() => {
     const lastExpandedFolder = window.localStorage.getItem(SEARCH_EXPANDED_FOLDER_STORAGE_KEY);
     return lastExpandedFolder === uid;

public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/Stack.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { CSSProperties, useCallback } from 'react';
+import React, { CSSProperties } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -14,7 +14,7 @@ interface StackProps {
 }
 
 export function Stack(props: StackProps) {
-  const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
+  const styles = useStyles2(getStyles, props);
   return <div className={styles.root}>{props.children}</div>;
 }
 

public/app/plugins/datasource/parca/QueryEditor/Stack.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { CSSProperties, useCallback } from 'react';
+import React, { CSSProperties } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
@@ -14,7 +14,7 @@ interface StackProps {
 }
 
 export function Stack(props: StackProps) {
-  const styles = useStyles2(useCallback((theme) => getStyles(theme, props), [props]));
+  const styles = useStyles2(getStyles, props);
   return <div className={styles.root}>{props.children}</div>;
 }
 

public/app/plugins/panel/gettingstarted/components/DocsCard.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -13,8 +13,8 @@ interface Props {
 }
 
 export const DocsCard = ({ card }: Props) => {
-  const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
-  const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
+  const styles = useStyles2(getStyles, card.done);
+  const iconStyles = useStyles2(iconStyle, card.done);
 
   return (
     <div className={styles.card}>

public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { MouseEvent, useCallback } from 'react';
+import React, { MouseEvent } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -14,8 +14,8 @@ interface Props {
 }
 
 export const TutorialCard = ({ card }: Props) => {
-  const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
-  const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
+  const styles = useStyles2(getStyles, card.done);
+  const iconStyles = useStyles2(iconStyle, card.done);
 
   return (
     <a

public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx

@@ -48,7 +48,7 @@ export const ThresholdDragHandle = ({
   }
 
   const disabled = typeof onChange !== 'function';
-  const styles = useStyles2((theme) => getStyles(theme, step, outOfBounds, disabled));
+  const styles = useStyles2(getStyles, step, outOfBounds, disabled);
   const [currentValue, setCurrentValue] = useState(step.value);
 
   const textColor = useMemo(() => {