Update dependency eslint-plugin-react to v7.27.1 (#43207)

* Update dependency eslint-plugin-react to v7.27.1

* Fix up code to work with new version of eslint-plugin-react

* kick drone

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

package.json

@@ -171,7 +171,7 @@
     "eslint-plugin-lodash": "^7.2.0",
     "eslint-plugin-no-only-tests": "2.6.0",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react": "7.27.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-webpack-plugin": "3.1.0",
     "expose-loader": "3.1.0",

packages/grafana-ui/src/components/Button/ToolbarButton.tsx

@@ -97,6 +97,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, Props>(
   }
 );
 
+ToolbarButton.displayName = 'ToolbarButton';
+
 function getButtonAriaLabel(ariaLabel: string | undefined, tooltip: string | undefined) {
   return ariaLabel ? ariaLabel : tooltip ? selectors.components.PageToolbar.item(tooltip) : undefined;
 }

packages/grafana-ui/src/components/Select/IndicatorsContainer.tsx

@@ -22,3 +22,5 @@ export const IndicatorsContainer = React.forwardRef<HTMLDivElement, React.PropsW
     </div>
   );
 });
+
+IndicatorsContainer.displayName = 'IndicatorsContainer';

packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx

@@ -42,11 +42,14 @@ export const PartialHighlighter: React.FC<Props> = (props: Props) => {
     let end = indices[i];
 
     children.push(
-      createElement(highlighted ? 'mark' : 'span', {
+      createElement(
-        key: i - 1,
+        highlighted ? 'mark' : 'span',
-        children: text.substring(start, end),
+        {
-        className: highlighted ? highlightClassName : undefined,
+          key: i - 1,
-      })
+          className: highlighted ? highlightClassName : undefined,
+        },
+        text.substring(start, end)
+      )
     );
     highlighted = !highlighted;
   }

public/app/core/components/TransformersUI/FilterByValueTransformer/ValueMatchers/RangeMatcherEditor.tsx

@@ -9,7 +9,7 @@ type PropNames = 'from' | 'to';
 export function rangeMatcherEditor<T = any>(
   config: ValueMatcherEditorConfig
 ): React.FC<ValueMatcherUIProps<RangeValueMatcherOptions<T>>> {
-  return ({ options, onChange, field }) => {
+  return function RangeMatcherEditor({ options, onChange, field }) {
     const { validator } = config;
     const [isInvalid, setInvalid] = useState({
       from: !validator(options.from),

public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.tsx

@@ -155,6 +155,8 @@ export const DashboardPrompt = React.memo(({ dashboard }: Props) => {
   );
 });
 
+DashboardPrompt.displayName = 'DashboardPrompt';
+
 function moveToBlockedLocationAfterReactStateUpdate(location?: H.Location | null) {
   if (location) {
     setTimeout(() => locationService.push(location!), 10);

public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx

@@ -112,6 +112,8 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
   }
 );
 
+OptionsPaneCategory.displayName = 'OptionsPaneCategory';
+
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     box: css`

public/app/features/explore/TraceView/createSpanLink.tsx

@@ -36,7 +36,7 @@ export function createSpanLinkFactory({
     // let's try to use the old legacy path.
     return legacyCreateSpanLinkFactory(splitOpenFn, traceToLogsOptions);
   } else {
-    return function (span: TraceSpan): SpanLinkDef | undefined {
+    return function SpanLink(span: TraceSpan): SpanLinkDef | undefined {
       // We should be here only if there are some links in the dataframe
       const field = dataFrame.fields.find((f) => Boolean(f.config.links?.length))!;
       try {
@@ -74,7 +74,7 @@ function legacyCreateSpanLinkFactory(splitOpenFn: SplitOpen, traceToLogsOptions?
     return undefined;
   }
 
-  return function (span: TraceSpan): SpanLinkDef {
+  return function SpanLink(span: TraceSpan): SpanLinkDef {
     // This is reusing existing code from derived fields which may not be ideal match so some data is a bit faked at
     // the moment. Issue is that the trace itself isn't clearly mapped to dataFrame (right now it's just a json blob
     // inside a single field) so the dataLinks as config of that dataFrame abstraction breaks down a bit and we do

public/app/features/search/components/ManageDashboards.tsx

@@ -141,6 +141,8 @@ export const ManageDashboards: FC<Props> = memo(({ folder }) => {
   );
 });
 
+ManageDashboards.displayName = 'ManageDashboards';
+
 export default ManageDashboards;
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {

public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

@@ -121,6 +121,8 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
   }
 );
 
+PromExploreExtraField.displayName = 'PromExploreExtraField';
+
 export const testIds = {
   extraFieldEditor: 'prom-editor-extra-field',
   stepField: 'prom-editor-extra-field-step',

yarn.lock

@@ -11902,7 +11902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.0.3, array-includes@npm:^3.1.1, array-includes@npm:^3.1.3":
+"array-includes@npm:^3.0.3, array-includes@npm:^3.1.1, array-includes@npm:^3.1.3, array-includes@npm:^3.1.4":
   version: 3.1.4
   resolution: "array-includes@npm:3.1.4"
   dependencies:
@@ -11976,7 +11976,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.2.3":
+"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.2.3, array.prototype.flatmap@npm:^1.2.5":
   version: 1.2.5
   resolution: "array.prototype.flatmap@npm:1.2.5"
   dependencies:
@@ -17350,6 +17350,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react@npm:7.27.1":
+  version: 7.27.1
+  resolution: "eslint-plugin-react@npm:7.27.1"
+  dependencies:
+    array-includes: ^3.1.4
+    array.prototype.flatmap: ^1.2.5
+    doctrine: ^2.1.0
+    estraverse: ^5.3.0
+    jsx-ast-utils: ^2.4.1 || ^3.0.0
+    minimatch: ^3.0.4
+    object.entries: ^1.1.5
+    object.fromentries: ^2.0.5
+    object.hasown: ^1.1.0
+    object.values: ^1.1.5
+    prop-types: ^15.7.2
+    resolve: ^2.0.0-next.3
+    semver: ^6.3.0
+    string.prototype.matchall: ^4.0.6
+  peerDependencies:
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+  checksum: db1ce303b597ede0bc8873d3f575b05873b06a058162c80f76604c9096eee8f72f299d7f849a86ac2e59f269c196575e6bcfb1ef9d7cbb23f533d081bcc15ea0
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
@@ -17604,7 +17628,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0":
+"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0, estraverse@npm:^5.3.0":
   version: 5.3.0
   resolution: "estraverse@npm:5.3.0"
   checksum: 072780882dc8416ad144f8fe199628d2b3e7bbc9989d9ed43795d2c90309a2047e6bc5979d7e2322a341163d22cfad9e21f4110597fe487519697389497e4e2b
@@ -19541,7 +19565,7 @@ __metadata:
     eslint-plugin-lodash: ^7.2.0
     eslint-plugin-no-only-tests: 2.6.0
     eslint-plugin-prettier: 4.0.0
-    eslint-plugin-react: 7.22.0
+    eslint-plugin-react: 7.27.1
     eslint-plugin-react-hooks: 4.2.0
     eslint-webpack-plugin: 3.1.0
     eventemitter3: 4.0.0
@@ -26011,7 +26035,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.entries@npm:^1.1.0, object.entries@npm:^1.1.1, object.entries@npm:^1.1.2":
+"object.entries@npm:^1.1.0, object.entries@npm:^1.1.1, object.entries@npm:^1.1.2, object.entries@npm:^1.1.5":
   version: 1.1.5
   resolution: "object.entries@npm:1.1.5"
   dependencies:
@@ -26022,7 +26046,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.fromentries@npm:^2.0.0, object.fromentries@npm:^2.0.0 || ^1.0.0, object.fromentries@npm:^2.0.2":
+"object.fromentries@npm:^2.0.0, object.fromentries@npm:^2.0.0 || ^1.0.0, object.fromentries@npm:^2.0.2, object.fromentries@npm:^2.0.5":
   version: 2.0.5
   resolution: "object.fromentries@npm:2.0.5"
   dependencies:
@@ -26044,6 +26068,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object.hasown@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "object.hasown@npm:1.1.0"
+  dependencies:
+    define-properties: ^1.1.3
+    es-abstract: ^1.19.1
+  checksum: 5c5d0b1b793514609f7a635f3110fbd346e142c9afd2485b802775e1ef6c90e48ff6e8e8744927933370ba30964e21af9c5fcf782b47f34d650aa6b277565330
+  languageName: node
+  linkType: hard
+
 "object.pick@npm:^1.3.0":
   version: 1.3.0
   resolution: "object.pick@npm:1.3.0"
@@ -26053,7 +26087,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.0, object.values@npm:^1.1.1":
+"object.values@npm:^1.1.0, object.values@npm:^1.1.1, object.values@npm:^1.1.5":
   version: 1.1.5
   resolution: "object.values@npm:1.1.5"
   dependencies:
@@ -30802,6 +30836,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:^2.0.0-next.3":
+  version: 2.0.0-next.3
+  resolution: "resolve@npm:2.0.0-next.3"
+  dependencies:
+    is-core-module: ^2.2.0
+    path-parse: ^1.0.6
+  checksum: f34b3b93ada77d64a6d590c06a83e198f3a827624c4ec972260905fa6c4d612164fbf0200d16d2beefea4ad1755b001f4a9a1293d8fc2322a8f7d6bf692c4ff5
+  languageName: node
+  linkType: hard
+
 "resolve@npm:~1.17.0":
   version: 1.17.0
   resolution: "resolve@npm:1.17.0"
@@ -30831,6 +30875,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@patch:resolve@^2.0.0-next.3#~builtin<compat/resolve>":
+  version: 2.0.0-next.3
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.3#~builtin<compat/resolve>::version=2.0.0-next.3&hash=07638b"
+  dependencies:
+    is-core-module: ^2.2.0
+    path-parse: ^1.0.6
+  checksum: 21684b4d99a4877337cdbd5484311c811b3e8910edb5d868eec85c6e6550b0f570d911f9a384f9e176172d6713f2715bd0b0887fa512cb8c6aeece018de6a9f8
+  languageName: node
+  linkType: hard
+
 "resolve@patch:resolve@~1.17.0#~builtin<compat/resolve>":
   version: 1.17.0
   resolution: "resolve@patch:resolve@npm%3A1.17.0#~builtin<compat/resolve>::version=1.17.0&hash=07638b"
@@ -32557,7 +32611,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.2":
+"string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.2, string.prototype.matchall@npm:^4.0.6":
   version: 4.0.6
   resolution: "string.prototype.matchall@npm:4.0.6"
   dependencies: