From bb082f949008f3d6608cb40e1acf307be63eaf67 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Thu, 16 Oct 2025 17:17:36 +0100
Subject: [PATCH] Chore: Change eslint rule to allow jsx utility classes
 (#112528)

* change rule to allow jsx utility classes

* update suppressions

* actually prune this one...
---
 eslint-suppressions.json | 75 ----------------------------------------
 eslint.config.js         |  2 +-
 2 files changed, 1 insertion(+), 76 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 19e820b2d84..c478f4e251b 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -579,11 +579,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/Cascader/Cascader.tsx": {
     "react-prefer-function-component/react-prefer-function-component": {
       "count": 1
@@ -858,11 +853,6 @@
       "count": 1
     }
   },
-  "packages/grafana-ui/src/components/RadialGauge/RadialColorDefs.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx": {
     "react-prefer-function-component/react-prefer-function-component": {
       "count": 1
@@ -2182,11 +2172,6 @@
       "count": 4
     }
   },
-  "public/app/features/dashboard-scene/edit-pane/DashboardEditableElement.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/edit-pane/DashboardOutline.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -2202,31 +2187,11 @@
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/inspect/InspectDataTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx": {
     "no-restricted-syntax": {
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/inspect/InspectMetaDataTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/dashboard-scene/inspect/InspectQueryTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/dashboard-scene/inspect/InspectStatsTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/pages/DashboardScenePage.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 2
@@ -2240,26 +2205,11 @@
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataAlertingTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataQueriesTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformationsTab.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.test.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
@@ -2288,21 +2238,6 @@
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/scene/AddLibraryPanelDrawer.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/dashboard-scene/scene/CustomTimeRangeCompare.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
-  "public/app/features/dashboard-scene/scene/DashboardDataLayerSet.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -2313,11 +2248,6 @@
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/scene/ViewPanelScene.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/scene/export/exporters.test.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 6
@@ -2377,11 +2307,6 @@
       "count": 1
     }
   },
-  "public/app/features/dashboard-scene/serialization/custom-variables/SnapshotVariable.tsx": {
-    "react-prefer-function-component/react-prefer-function-component": {
-      "count": 1
-    }
-  },
   "public/app/features/dashboard-scene/serialization/transformSceneToSaveModel.test.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1
diff --git a/eslint.config.js b/eslint.config.js
index 417d8e552b2..d85694070b3 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -158,7 +158,7 @@ module.exports = [
       '@grafana/no-border-radius-literal': 'error',
       '@grafana/no-unreduced-motion': 'error',
       '@grafana/no-restricted-img-srcs': 'error',
-      'react-prefer-function-component/react-prefer-function-component': 'error',
+      'react-prefer-function-component/react-prefer-function-component': ['error', { allowJsxUtilityClass: true }],
       'react/prop-types': 'off',
       // need to ignore emotion's `css` prop, see https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md#rule-options
       'react/no-unknown-property': ['error', { ignore: ['css'] }],