Datasources: fixes async mount errors (#24579)

* Chore: updates Elasticsearch DataLinks test async wrapper mount

* Chore: updates Loki DervidedFields test async wrapper mount

* Chore: fixes typecheck issues

* Chore: small strict-null fix

public/app/features/datasources/NewDataSourcePage.tsx

@@ -152,7 +152,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
           </div>
         )
       }
-      className={isPhantom && 'add-data-source-item--phantom'}
+      className={isPhantom ? 'add-data-source-item--phantom' : ''}
       onClick={onClick}
       aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}
     />

public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import { DataLinks } from './DataLinks';
 import { Button } from '@grafana/ui';
 import { DataLink } from './DataLink';
+import { act } from 'react-dom/test-utils';
 
 describe('DataLinks', () => {
   let originalGetSelection: typeof window.getSelection;
@@ -15,31 +16,43 @@ describe('DataLinks', () => {
     window.getSelection = originalGetSelection;
   });
 
-  it('renders correctly when no fields', () => {
-    const wrapper = mount(<DataLinks onChange={() => {}} />);
+  it('renders correctly when no fields', async () => {
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DataLinks onChange={() => {}} />);
+    });
     expect(wrapper.find(Button).length).toBe(1);
     expect(wrapper.find(Button).contains('Add')).toBeTruthy();
     expect(wrapper.find(DataLink).length).toBe(0);
   });
 
-  it('renders correctly when there are fields', () => {
-    const wrapper = mount(<DataLinks value={testValue} onChange={() => {}} />);
+  it('renders correctly when there are fields', async () => {
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DataLinks value={testValue} onChange={() => {}} />);
+    });
 
-    expect(wrapper.find(Button).filterWhere(button => button.contains('Add')).length).toBe(1);
+    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
     expect(wrapper.find(DataLink).length).toBe(2);
   });
 
-  it('adds new field', () => {
+  it('adds new field', async () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(<DataLinks onChange={onChangeMock} />);
-    const addButton = wrapper.find(Button).filterWhere(button => button.contains('Add'));
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DataLinks onChange={onChangeMock} />);
+    });
+    const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
     addButton.simulate('click');
     expect(onChangeMock.mock.calls[0][0].length).toBe(1);
   });
 
-  it('removes field', () => {
+  it('removes field', async () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(<DataLinks value={testValue} onChange={onChangeMock} />);
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DataLinks value={testValue} onChange={onChangeMock} />);
+    });
     const removeButton = wrapper
       .find(DataLink)
       .at(0)

public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import { DerivedFields } from './DerivedFields';
 import { Button } from '@grafana/ui';
 import { DerivedField } from './DerivedField';
+import { act } from 'react-dom/test-utils';
 
 describe('DerivedFields', () => {
   let originalGetSelection: typeof window.getSelection;
@@ -15,32 +16,46 @@ describe('DerivedFields', () => {
     window.getSelection = originalGetSelection;
   });
 
-  it('renders correctly when no fields', () => {
-    const wrapper = mount(<DerivedFields onChange={() => {}} />);
+  it('renders correctly when no fields', async () => {
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DerivedFields onChange={() => {}} />);
+    });
     expect(wrapper.find(Button).length).toBe(1);
     expect(wrapper.find(Button).contains('Add')).toBeTruthy();
     expect(wrapper.find(DerivedField).length).toBe(0);
   });
 
-  it('renders correctly when there are fields', () => {
-    const wrapper = mount(<DerivedFields value={testValue} onChange={() => {}} />);
+  it('renders correctly when there are fields', async () => {
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DerivedFields value={testValue} onChange={() => {}} />);
+    });
 
-    expect(wrapper.find(Button).filterWhere(button => button.contains('Add')).length).toBe(1);
-    expect(wrapper.find(Button).filterWhere(button => button.contains('Show example log message')).length).toBe(1);
+    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
+    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
+      1
+    );
     expect(wrapper.find(DerivedField).length).toBe(2);
   });
 
-  it('adds new field', () => {
+  it('adds new field', async () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(<DerivedFields onChange={onChangeMock} />);
-    const addButton = wrapper.find(Button).filterWhere(button => button.contains('Add'));
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DerivedFields onChange={onChangeMock} />);
+    });
+    const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
     addButton.simulate('click');
     expect(onChangeMock.mock.calls[0][0].length).toBe(1);
   });
 
-  it('removes field', () => {
+  it('removes field', async () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
+    let wrapper: any;
+    await act(async () => {
+      wrapper = await mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
+    });
     const removeButton = wrapper
       .find(DerivedField)
       .at(0)