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

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

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[] = [];

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);

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>
     );
   }

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>
     );

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.connections.renderElement()}
-        {this.root.render()}
+        {this.root.renderElement()}
         {this.isEditingEnabled && (
           <Portal>
             <CanvasContextMenu

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>
   );

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;

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

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

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.

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.items.map((item) => item.renderElement(searchQuery))}
-        {this.categories.map((category) => category.render(searchQuery))}
+        {this.categories.map((category) => category.renderElement(searchQuery))}
       </OptionsPaneCategory>
     );
   }

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} />;
   }
 

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();
   });
 });

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>
   );
 }

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>
   );
 };

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>
           );
         })}

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()}
       </>

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

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

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>
   );