Chore: Rename render method on classes which aren't actually react class components (#113808)

* rename canvas class method so it's not falsely marked as a react class component * also rename scene method * rename render method in OptionsPaneCategoryDescriptor and OptionsPaneItemDescriptor * rename render to setup in test scenario class
2025-11-14 10:20:01 +00:00
parent 1535cfc17b
commit bfee2ecc65
21 changed files with 53 additions and 97 deletions
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -1894,26 +1894,6 @@
      "count": 1
    }
  },
-  "public/app/features/canvas/runtime/element.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/canvas/runtime/frame.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/canvas/runtime/root.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/canvas/runtime/scene.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
  "public/app/features/commandPalette/actions/scopeActions.tsx": {
    "react-hooks/rules-of-hooks": {
      "count": 4
@@ -2337,11 +2317,6 @@
      "count": 1
    }
  },
-  "public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
  "public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx": {
    "@grafana/no-aria-label-selectors": {
      "count": 1
@@ -2351,14 +2326,6 @@
    },
    "no-restricted-syntax": {
      "count": 1
-    },
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
    }
  },
  "public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx": {
@@ -4527,16 +4494,6 @@
      "count": 1
    }
  },
-  "public/app/plugins/panel/canvas/components/connections/Connections.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/plugins/panel/canvas/components/connections/Connections2.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
  "public/app/plugins/panel/canvas/editor/LineStyleEditor.tsx": {
    "no-restricted-syntax": {
      "count": 1
--- a/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx
+++ b/packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx
@@ -15,7 +15,6 @@ export interface RadialColorDefsOptions {
  displayProcessor: DisplayProcessor;
 }

-// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
 export class RadialColorDefs {
  private colorToIds: Record<string, string> = {};
  private defs: React.ReactNode[] = [];
--- a/public/app/features/canvas/runtime/element.tsx
+++ b/public/app/features/canvas/runtime/element.tsx
@@ -1090,7 +1090,7 @@ export class ElementState implements LayerElement {
    );
  };

-  render() {
+  renderElement() {
    const { item, div } = this;
    const scene = this.getScene();
    const isSelected = div && scene && scene.selecto && scene.selecto.getSelectedTargets().includes(div);
--- a/public/app/features/canvas/runtime/frame.tsx
+++ b/public/app/features/canvas/runtime/frame.tsx
@@ -244,10 +244,10 @@ export class FrameState extends ElementState {
    }
  };

-  render() {
+  renderElement() {
    return (
      <div key={this.UID} ref={this.initElement}>
-        {this.elements.map((v) => v.render())}
+        {this.elements.map((v) => v.renderElement())}
      </div>
    );
  }
--- a/public/app/features/canvas/runtime/root.tsx
+++ b/public/app/features/canvas/runtime/root.tsx
@@ -43,7 +43,7 @@ export class RootElement extends FrameState {
    this.div = target;
  };

-  render() {
+  renderElement() {
    return (
      <div
        onContextMenu={(event) => event.preventDefault()}
@@ -52,7 +52,7 @@ export class RootElement extends FrameState {
        style={{ ...this.sizeStyle, ...this.dataStyle }}
      >
        {this.elements.map((v) => (
-          <Fragment key={v.UID}>{v.render()}</Fragment>
+          <Fragment key={v.UID}>{v.renderElement()}</Fragment>
        ))}
      </div>
    );
--- a/public/app/features/canvas/runtime/scene.tsx
+++ b/public/app/features/canvas/runtime/scene.tsx
@@ -370,7 +370,7 @@ export class Scene {
    }
  };

-  render() {
+  renderElement() {
    const hasDataLinks = this.tooltipPayload?.element?.getLinks && this.tooltipPayload.element.getLinks({}).length > 0;
    const hasActions =
      this.tooltipPayload?.element?.options.actions &&
@@ -388,8 +388,8 @@ export class Scene {

    const sceneDiv = (
      <>
-        {this.connections.render()}
-        {this.root.render()}
+        {this.connections.renderElement()}
+        {this.root.renderElement()}
        {this.isEditingEnabled && (
          <Portal>
            <CanvasContextMenu
--- a/public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx
+++ b/public/app/features/dashboard-scene/edit-pane/ElementEditPane.tsx
@@ -22,7 +22,7 @@ export function ElementEditPane({ element, editPane, isNewElement }: Props) {
    <div className={styles.wrapper}>
      <EditPaneHeader element={element} editPane={editPane} />
      <ScrollContainer showScrollIndicators={true}>
-        <div className={styles.categories}>{categories.map((cat) => cat.render())}</div>
+        <div className={styles.categories}>{categories.map((cat) => cat.renderElement())}</div>
      </ScrollContainer>
    </div>
  );
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelOptions.tsx
@@ -87,21 +87,21 @@ export const PanelOptions = React.memo<Props>(({ panel, searchQuery, listMode, d
      case OptionFilter.All:
        if (libraryPanelOptions) {
          // Library Panel options first
-          mainBoxElements.push(libraryPanelOptions.render());
+          mainBoxElements.push(libraryPanelOptions.renderElement());
        }
-        mainBoxElements.push(panelFrameOptions.render());
+        mainBoxElements.push(panelFrameOptions.renderElement());

        for (const item of visualizationOptions ?? []) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(item.renderElement());
        }

        for (const item of justOverrides) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(item.renderElement());
        }
        break;
      case OptionFilter.Overrides:
        for (const item of justOverrides) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(item.renderElement());
        }
      default:
        break;
--- a/public/app/features/dashboard-scene/settings/variables/editors/AdHocFiltersVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/AdHocFiltersVariableEditor.test.tsx
@@ -140,7 +140,7 @@ describe('AdHocFiltersVariableEditor', () => {
      title: 'Mock Parent',
    });

-    render(descriptor.render());
+    render(descriptor.renderElement());

    await waitFor(() => {
      // Check that some part of the component renders
--- a/public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.test.tsx
@@ -106,7 +106,7 @@ describe('GroupByVariableEditor', () => {
      title: 'Mock Parent',
    });

-    render(descriptor.render());
+    render(descriptor.renderElement());

    await waitFor(() => {
      // Check that some part of the component renders
--- a/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/editors/QueryVariableEditor.test.tsx
@@ -471,7 +471,7 @@ describe('QueryVariableEditor', () => {
      title: 'Mock Parent',
    });

-    const { queryByRole } = render(descriptor.render());
+    const { queryByRole } = render(descriptor.renderElement());
    const user = userEvent.setup();

    // 1. Initial state: "Open variable editor" button is visible, Modal is not.
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor.tsx
@@ -58,7 +58,7 @@ export class OptionsPaneCategoryDescriptor {
    return sub;
  }

-  render(searchQuery?: string) {
+  renderElement(searchQuery?: string) {
    if (this.props.customRender) {
      return this.props.customRender();
    }
@@ -66,15 +66,15 @@ export class OptionsPaneCategoryDescriptor {
    if (this.props.title === '') {
      return (
        <Box padding={2} paddingBottom={1} key={this.props.title}>
-          {this.items.map((item) => item.render(searchQuery))}
+          {this.items.map((item) => item.renderElement(searchQuery))}
        </Box>
      );
    }

    return (
      <OptionsPaneCategory key={this.props.title} {...this.props}>
-        {this.items.map((item) => item.render(searchQuery))}
-        {this.categories.map((category) => category.render(searchQuery))}
+        {this.items.map((item) => item.renderElement(searchQuery))}
+        {this.categories.map((category) => category.renderElement(searchQuery))}
      </OptionsPaneCategory>
    );
  }
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -38,7 +38,7 @@ export class OptionsPaneItemDescriptor {
    this.props = { ...props };
  }

-  render(searchQuery?: string) {
+  renderElement(searchQuery?: string) {
    return <OptionsPaneItem key={this.props.id} itemDescriptor={this} searchQuery={searchQuery} />;
  }

--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.test.tsx
@@ -92,7 +92,7 @@ class OptionsPaneOptionsTestScenario {
    },
  });

-  render() {
+  setup() {
    render(
      <Provider store={this.store}>
        <OptionsPaneOptions
@@ -113,14 +113,14 @@ class OptionsPaneOptionsTestScenario {
 describe('OptionsPaneOptions', () => {
  it('should render panel frame options', async () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    expect(screen.getByLabelText(OptionsPaneSelector.fieldLabel('Panel options Title'))).toBeInTheDocument();
  });

  it('should render all categories', async () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    expect(screen.getByRole('heading', { name: /Panel options/ })).toBeInTheDocument();
    expect(screen.getByRole('heading', { name: /Standard options/ })).toBeInTheDocument();
@@ -131,14 +131,14 @@ describe('OptionsPaneOptions', () => {

  it('should render custom  options', () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    expect(screen.getByLabelText(OptionsPaneSelector.fieldLabel('TestPanel CustomBool'))).toBeInTheDocument();
  });

  it('should not render options that are marked as hidden from defaults', () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    expect(screen.queryByLabelText(OptionsPaneSelector.fieldLabel('TestPanel HiddenFromDef'))).not.toBeInTheDocument();
  });
@@ -162,13 +162,13 @@ describe('OptionsPaneOptions', () => {
      },
    });

-    scenario.render();
+    scenario.setup();
    expect(screen.queryByLabelText(OptionsPaneSelector.fieldLabel('TestPanel HiddenFromDef'))).toBeInTheDocument();
  });

  it('should create categories for field options with category', () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    expect(screen.getByRole('heading', { name: /Axis/ })).toBeInTheDocument();
  });
@@ -190,13 +190,13 @@ describe('OptionsPaneOptions', () => {
      },
    });

-    scenario.render();
+    scenario.setup();
    expect(screen.queryByRole('heading', { name: /Axis/ })).not.toBeInTheDocument();
  });

  it('should call onPanelConfigChange when updating title', () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    const input = screen.getByDisplayValue(scenario.panel.title);
    fireEvent.change(input, { target: { value: 'New' } });
@@ -207,7 +207,7 @@ describe('OptionsPaneOptions', () => {

  it('should call onFieldConfigsChange when updating field config', () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    const input = screen.getByPlaceholderText('CustomTextPropPlaceholder');
    fireEvent.change(input, { target: { value: 'New' } });
@@ -221,7 +221,7 @@ describe('OptionsPaneOptions', () => {

  it('should only render hits when search query specified', async () => {
    const scenario = new OptionsPaneOptionsTestScenario();
-    scenario.render();
+    scenario.setup();

    const input = screen.getByPlaceholderText('Search options');
    fireEvent.change(input, { target: { value: 'TextPropWithCategory' } });
@@ -237,7 +237,7 @@ describe('OptionsPaneOptions', () => {
      id: 'TestPanel',
    });

-    scenario.render();
+    scenario.setup();

    expect(
      screen.queryByLabelText(selectors.components.ValuePicker.button('Add field override'))
@@ -259,7 +259,7 @@ describe('OptionsPaneOptions', () => {
      },
    });

-    scenario.render();
+    scenario.setup();

    const thresholdsSection = screen.getByTestId(selectors.components.OptionsGroup.group('Thresholds'));
    expect(
@@ -285,7 +285,7 @@ describe('OptionsPaneOptions', () => {
      }),
    ];

-    scenario.render();
+    scenario.setup();

    expect(screen.getByLabelText(dataOverrideTooltipDescription)).toBeInTheDocument();
    expect(screen.queryByLabelText(overrideRuleTooltipDescription)).not.toBeInTheDocument();
@@ -305,7 +305,7 @@ describe('OptionsPaneOptions', () => {
      },
    ];

-    scenario.render();
+    scenario.setup();
    expect(screen.getByLabelText(overrideRuleTooltipDescription)).toBeInTheDocument();
  });
 });
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
@@ -59,23 +59,23 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
      case OptionFilter.All:
        if (isPanelModelLibraryPanel(panel)) {
          // Library Panel options first
-          mainBoxElements.push(libraryPanelOptions.render());
+          mainBoxElements.push(libraryPanelOptions.renderElement());
        }
        // Panel frame options second
-        mainBoxElements.push(panelFrameOptions.render());
+        mainBoxElements.push(panelFrameOptions.renderElement());

        // Then add all panel and field defaults
        for (const item of vizOptions) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(item.renderElement());
        }

        for (const item of justOverrides) {
-          mainBoxElements.push(item.render());
+          mainBoxElements.push(item.renderElement());
        }
        break;
      case OptionFilter.Overrides:
        for (const override of justOverrides) {
-          mainBoxElements.push(override.render());
+          mainBoxElements.push(override.renderElement());
        }
        break;
      case OptionFilter.Recent:
@@ -86,7 +86,7 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
            key="Recent options"
            forceOpen={true}
          >
-            {getRecentOptions(allOptions).map((item) => item.render())}
+            {getRecentOptions(allOptions).map((item) => item.renderElement())}
          </OptionsPaneCategory>
        );
        break;
@@ -152,9 +152,9 @@ export function renderSearchHits(
        key="Normal options"
        forceOpen={true}
      >
-        {optionHits.map((hit) => hit.render(searchQuery))}
+        {optionHits.map((hit) => hit.renderElement(searchQuery))}
      </OptionsPaneCategory>
-      {overrideHits.map((override) => override.render(searchQuery))}
+      {overrideHits.map((override) => override.renderElement(searchQuery))}
    </div>
  );
 }
--- a/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
+++ b/public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx
@@ -39,7 +39,7 @@ export const HeatmapTransformerEditor = (props: TransformerUIProps<HeatmapTransf
  const pane = getTransformerOptionPane<HeatmapTransformerOptions>(props, supplier);
  return (
    <div>
-      <div>{pane.items.map((v) => v.render())}</div>
+      <div>{pane.items.map((v) => v.renderElement())}</div>
    </div>
  );
 };
--- a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
+++ b/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx
@@ -148,13 +148,13 @@ export const SetGeometryTransformerEditor = (props: Props) => {
  const pane = getTransformerOptionPane<SpatialTransformOptions>(props, supplier);
  return (
    <div>
-      <div>{pane.items.map((v) => v.render())}</div>
+      <div>{pane.items.map((v) => v.renderElement())}</div>
      <div>
        {pane.categories.map((c) => {
          return (
            <div key={c.props.id} className={styles.wrap}>
              <h5>{c.props.title}</h5>
-              <div className={styles.item}>{c.items.map((s) => s.render())}</div>
+              <div className={styles.item}>{c.items.map((s) => s.renderElement())}</div>
            </div>
          );
        })}
--- a/public/app/plugins/panel/canvas/CanvasPanel.tsx
+++ b/public/app/plugins/panel/canvas/CanvasPanel.tsx
@@ -340,7 +340,7 @@ export class CanvasPanel extends Component<Props, State> {
  render() {
    return (
      <>
-        {this.scene.render()}
+        {this.scene.renderElement()}
        {this.state.openInlineEdit && this.renderInlineEdit()}
        {this.state.openSetBackground && this.renderSetBackground()}
      </>
--- a/public/app/plugins/panel/canvas/components/connections/Connections.tsx
+++ b/public/app/plugins/panel/canvas/components/connections/Connections.tsx
@@ -679,7 +679,7 @@ export class Connections {
    return isConnectionSource(element) || isConnectionTarget(element, this.scene.byName);
  };

-  render() {
+  renderElement() {
    return (
      <>
        <ConnectionAnchors
--- a/public/app/plugins/panel/canvas/components/connections/Connections2.tsx
+++ b/public/app/plugins/panel/canvas/components/connections/Connections2.tsx
@@ -648,7 +648,7 @@ export class Connections2 {
    return isConnectionSource(element) || isConnectionTarget(element, this.scene.byName);
  };

-  render() {
+  renderElement() {
    return (
      <>
        <ConnectionAnchors
--- a/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
+++ b/public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx
@@ -106,7 +106,7 @@ export function InlineEditBody() {

  return (
    <>
-      <div style={topLevelItemsContainerStyle}>{pane.items.map((item) => item.render())}</div>
+      <div style={topLevelItemsContainerStyle}>{pane.items.map((item) => item.renderElement())}</div>
      <div style={topLevelItemsContainerStyle}>
        <AddLayerButton
          onChange={(sel) => onAddItem(sel, rootLayer)}
@@ -131,7 +131,7 @@ export function InlineEditBody() {
 function renderOptionsPaneCategoryDescriptor(pane: OptionsPaneCategoryDescriptor) {
  return (
    <OptionsPaneCategory {...pane.props} key={pane.props.id}>
-      <div>{pane.items.map((v) => v.render())}</div>
+      <div>{pane.items.map((v) => v.renderElement())}</div>
      {pane.categories.map((c) => renderOptionsPaneCategoryDescriptor(c))}
    </OptionsPaneCategory>
  );