PluginsCatalog: post installation, adding an "add datasource"-button. (#40155)

* added post installation steps.

* changes according to feedback.

* removing return union null type.

* added tests.

* changing the wording of the button to 'create a..'

* updated tests to check for the updated copy.

* changing the back to be a regular back button.

* updated snapshot

public/app/features/datasources/settings/ButtonRow.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
 
-import config from 'app/core/config';
 import { Button, LinkButton } from '@grafana/ui';
 
 import { AccessControlAction } from 'app/types/';
@@ -22,9 +21,9 @@ const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest, exploreU
 
   return (
     <div className="gf-form-button-row">
-      <LinkButton variant="secondary" fill="solid" href={`${config.appSubUrl}/datasources`}>
+      <Button variant="secondary" fill="solid" type="button" onClick={() => history.back()}>
         Back
-      </LinkButton>
+      </Button>
       <LinkButton variant="secondary" fill="solid" href={exploreUrl} disabled={!canExploreDataSources}>
         Explore
       </LinkButton>

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -22,7 +22,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 // Types
 import { StoreState, AccessControlAction } from 'app/types/';
 import { DataSourceSettings, urlUtil } from '@grafana/data';
-import { Alert, Button, LinkButton } from '@grafana/ui';
+import { Alert, Button } from '@grafana/ui';
 import { getDataSourceLoadingNav, buildNavModel, getDataSourceNav } from '../state/navModel';
 import { PluginStateInfo } from 'app/features/plugins/PluginStateInfo';
 import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
@@ -190,9 +190,9 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
                 Delete
               </Button>
             )}
-            <LinkButton variant="secondary" href="datasources" fill="outline">
+            <Button variant="secondary" fill="outline" type="button" onClick={() => history.back()}>
               Back
-            </LinkButton>
+            </Button>
           </div>
         </Page.Contents>
       </Page>

public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap

@@ -4,13 +4,14 @@ exports[`Render should render component 1`] = `
 <div
   className="gf-form-button-row"
 >
-  <LinkButton
+  <Button
     fill="solid"
-    href="/datasources"
+    onClick={[Function]}
+    type="button"
     variant="secondary"
   >
     Back
-  </LinkButton>
+  </Button>
   <LinkButton
     disabled={false}
     fill="solid"
@@ -42,13 +43,14 @@ exports[`Render should render with buttons enabled 1`] = `
 <div
   className="gf-form-button-row"
 >
-  <LinkButton
+  <Button
     fill="solid"
-    href="/datasources"
+    onClick={[Function]}
+    type="button"
     variant="secondary"
   >
     Back
-  </LinkButton>
+  </Button>
   <LinkButton
     disabled={false}
     fill="solid"