Chore: More backwards compatible changes needed for react 19 (#115422)

backwards compatible changes needed for react 19

packages/grafana-flamegraph/src/FlameGraph/FlameGraph.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import * as React from 'react';
+import { type ComponentProps, useRef } from 'react';
 
 import { createDataFrame } from '@grafana/data';
 
@@ -16,14 +16,14 @@ jest.mock('react-use', () => {
   return {
     ...reactUse,
     useMeasure: () => {
-      const ref = React.useRef();
+      const ref = useRef(null);
       return [ref, { width: 1600 }];
     },
   };
 });
 
 describe('FlameGraph', () => {
-  function setup(props?: Partial<React.ComponentProps<typeof FlameGraph>>) {
+  function setup(props?: Partial<ComponentProps<typeof FlameGraph>>) {
     const flameGraphData = createDataFrame(data);
     const container = new FlameGraphDataContainer(flameGraphData, { collapsing: true });
 

packages/grafana-flamegraph/src/FlameGraphContainer.test.tsx

@@ -21,7 +21,7 @@ jest.mock('@grafana/assistant', () => ({
 jest.mock('react-use', () => ({
   ...jest.requireActual('react-use'),
   useMeasure: () => {
-    const ref = useRef();
+    const ref = useRef(null);
     return [ref, { width: 1600 }];
   },
 }));

packages/grafana-runtime/src/services/pluginExtensions/utils.test.tsx

@@ -262,24 +262,18 @@ function createComponent<Props extends JSX.IntrinsicAttributes>(
   pluginId?: string,
   id?: string
 ): ComponentTypeWithExtensionMeta<Props> {
-  function ComponentWithMeta(props: Props) {
-    if (Implementation) {
-      return <Implementation {...props} />;
+  const ComponentWithMeta: ComponentTypeWithExtensionMeta<Props> = Object.assign(
+    Implementation || (() => <div>Test</div>),
+    {
+      meta: {
+        id: id ?? '',
+        pluginId: pluginId ?? '',
+        title: '',
+        description: '',
+        type: PluginExtensionTypes.component,
+      } satisfies PluginExtensionComponentMeta,
     }
-
-    return <div>Test</div>;
-  }
-
-  ComponentWithMeta.displayName = '';
-  ComponentWithMeta.propTypes = {};
-  ComponentWithMeta.contextTypes = {};
-  ComponentWithMeta.meta = {
-    id: id ?? '',
-    pluginId: pluginId ?? '',
-    title: '',
-    description: '',
-    type: PluginExtensionTypes.component,
-  } satisfies PluginExtensionComponentMeta;
+  );
 
   return ComponentWithMeta;
 }

packages/grafana-ui/src/components/Select/resetSelectStyles.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
-import { CSSObjectWithLabel } from 'react-select';
+import { StylesConfig } from 'react-select';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-export default function resetSelectStyles(theme: GrafanaTheme2) {
+export default function resetSelectStyles(theme: GrafanaTheme2): Partial<StylesConfig> {
   return {
     clearIndicator: () => ({}),
     container: () => ({}),
@@ -13,7 +13,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     groupHeading: () => ({}),
     indicatorsContainer: () => ({}),
     indicatorSeparator: () => ({}),
-    input: function (originalStyles: CSSObjectWithLabel) {
+    input: function (originalStyles) {
       return {
         ...originalStyles,
         color: 'inherit',
@@ -27,7 +27,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     loadingIndicator: () => ({}),
     loadingMessage: () => ({}),
     menu: () => ({}),
-    menuList: ({ maxHeight }: { maxHeight: number }) => ({
+    menuList: ({ maxHeight }) => ({
       maxHeight,
     }),
     multiValue: () => ({}),
@@ -38,7 +38,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
     multiValueRemove: () => ({}),
     noOptionsMessage: () => ({}),
     option: () => ({}),
-    placeholder: (originalStyles: CSSObjectWithLabel) => ({
+    placeholder: (originalStyles) => ({
       ...originalStyles,
       color: theme.colors.text.secondary,
     }),
@@ -47,11 +47,11 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
   };
 }
 
-export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | string | undefined) {
+export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | string | undefined): Partial<StylesConfig> {
   return useMemo(() => {
     return {
       ...resetSelectStyles(theme),
-      menuPortal: (base: CSSObjectWithLabel) => {
+      menuPortal: (base) => {
         // Would like to correct top position when menu is placed bottom, but have props are not sent to this style function.
         // Only state is. https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/components/Menu.tsx#L605
         return {
@@ -60,7 +60,7 @@ export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | stri
         };
       },
       //These are required for the menu positioning to function
-      menu: ({ top, bottom, position }: CSSObjectWithLabel) => {
+      menu: ({ top, bottom, position }) => {
         return {
           top,
           bottom,
@@ -73,7 +73,7 @@ export function useCustomSelectStyles(theme: GrafanaTheme2, width: number | stri
         width: width ? theme.spacing(width) : '100%',
         display: width === 'auto' ? 'inline-flex' : 'flex',
       }),
-      option: (provided: CSSObjectWithLabel, state: any) => ({
+      option: (provided, state) => ({
         ...provided,
         opacity: state.isDisabled ? 0.5 : 1,
       }),

packages/grafana-ui/src/components/Table/Table.story.tsx

@@ -263,7 +263,16 @@ export const Footer: StoryFn<typeof Table> = (args) => {
   );
 };
 
-export const Pagination: StoryFn<typeof Table> = (args) => <Basic {...args} />;
+export const Pagination: StoryFn<typeof Table> = (args) => {
+  const theme = useTheme2();
+  const data = buildData(theme, {});
+
+  return (
+    <DashboardStoryCanvas>
+      <Table {...args} data={data} />
+    </DashboardStoryCanvas>
+  );
+};
 Pagination.args = {
   enablePagination: true,
 };