From 6b67b394fd4799d3e50cbbc17fc99540982ed25e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Tue, 26 Aug 2025 06:56:51 +0200
Subject: [PATCH] Chore: fixes React hook betterer for EditDataSource.test.tsx
 (#110104)

---
 .betterer.results                                |  4 ----
 .../components/EditDataSource.test.tsx           | 16 ++++++++--------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index ada77c000ef..38ab3e6a0d5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2358,10 +2358,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Add noMargin prop to Card components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"],
       [0, 0, 0, "Add noMargin prop to Card components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"]
     ],
-    "public/app/features/datasources/components/EditDataSource.test.tsx:5381": [
-      [0, 0, 0, "React Hook \\"useEffect\\" is called in function \\"component\\" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word \\"use\\".", "0"],
-      [0, 0, 0, "React Hook \\"useEffect\\" is called in function \\"component\\" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word \\"use\\".", "1"]
-    ],
     "public/app/features/datasources/components/picker/DataSourceCard.tsx:5381": [
       [0, 0, 0, "Add noMargin prop to Card components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"]
     ],
diff --git a/public/app/features/datasources/components/EditDataSource.test.tsx b/public/app/features/datasources/components/EditDataSource.test.tsx
index 6a1f6832485..c11627ad514 100644
--- a/public/app/features/datasources/components/EditDataSource.test.tsx
+++ b/public/app/features/datasources/components/EditDataSource.test.tsx
@@ -326,7 +326,7 @@ describe('<EditDataSource>', () => {
 
     it('should pass a context prop to the rendered UI extension component', () => {
       const message = "I'm a UI extension component!";
-      const component = jest.fn().mockReturnValue(<div>{message}</div>);
+      const Component = jest.fn().mockReturnValue(<div>{message}</div>);
 
       setPluginComponentsHook(
         jest.fn().mockReturnValue({
@@ -337,7 +337,7 @@ describe('<EditDataSource>', () => {
                 pluginId: 'grafana-pdc-app',
                 title: 'Example component',
                 description: 'Example description',
-                component,
+                component: Component,
               },
               '1'
             ),
@@ -353,9 +353,9 @@ describe('<EditDataSource>', () => {
         },
       });
 
-      expect(component).toHaveBeenCalled();
+      expect(Component).toHaveBeenCalled();
 
-      const props = component.mock.calls[0][0];
+      const props = Component.mock.calls[0][0];
 
       expect(props.context).toBeDefined();
       expect(props.context.dataSource).toBeDefined();
@@ -368,7 +368,7 @@ describe('<EditDataSource>', () => {
 
   it('should be possible to update the `jsonData` first and `secureJsonData` directly afterwards from the extension component', () => {
     const message = "I'm a UI extension component!";
-    const component = ({ context }: { context: PluginExtensionDataSourceConfigContext }) => {
+    const Component = ({ context }: { context: PluginExtensionDataSourceConfigContext }) => {
       useEffect(() => {
         context.setJsonData({ test: 'test' } as unknown as DataSourceJsonData);
         context.setSecureJsonData({ test: 'test' });
@@ -387,7 +387,7 @@ describe('<EditDataSource>', () => {
               pluginId: 'grafana-pdc-app',
               title: 'Example component',
               description: 'Example description',
-              component: component as unknown as React.ComponentType<{}>,
+              component: Component as unknown as React.ComponentType<{}>,
             },
             '1'
           ),
@@ -413,7 +413,7 @@ describe('<EditDataSource>', () => {
 
   it('should be possible to update the `secureJsonData` first and `jsonData` directly afterwards from the extension component', () => {
     const message = "I'm a UI extension component!";
-    const component = ({ context }: { context: PluginExtensionDataSourceConfigContext }) => {
+    const Component = ({ context }: { context: PluginExtensionDataSourceConfigContext }) => {
       useEffect(() => {
         context.setSecureJsonData({ test: 'test' });
         context.setJsonData({ test: 'test' } as unknown as DataSourceJsonData);
@@ -432,7 +432,7 @@ describe('<EditDataSource>', () => {
               pluginId: 'grafana-pdc-app',
               title: 'Example component',
               description: 'Example description',
-              component: component as unknown as React.ComponentType<{}>,
+              component: Component as unknown as React.ComponentType<{}>,
             },
             '1'
           ),