Datasource: add button to navigate to explore from settings (#36119)

Fixes #13737

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

@@ -8,6 +8,7 @@ const setup = (propOverrides?: object) => {
     onSubmit: jest.fn(),
     onDelete: jest.fn(),
     onTest: jest.fn(),
+    exploreUrl: '/explore',
   };
 
   Object.assign(props, propOverrides);

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

@@ -5,18 +5,22 @@ import config from 'app/core/config';
 import { Button, LinkButton } from '@grafana/ui';
 
 export interface Props {
+  exploreUrl: string;
   isReadOnly: boolean;
   onDelete: () => void;
   onSubmit: (event: any) => void;
   onTest: (event: any) => void;
 }
 
-const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
+const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest, exploreUrl }) => {
   return (
     <div className="gf-form-button-row">
-      <LinkButton variant="secondary" fill="outline" href={`${config.appSubUrl}/datasources`}>
+      <LinkButton variant="secondary" fill="solid" href={`${config.appSubUrl}/datasources`}>
         Back
       </LinkButton>
+      <LinkButton variant="secondary" fill="solid" href={exploreUrl}>
+        Explore
+      </LinkButton>
       <Button
         type="button"
         variant="destructive"

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

@@ -20,7 +20,7 @@ import { getNavModel } from 'app/core/selectors/navModel';
 
 // Types
 import { StoreState } from 'app/types/';
-import { DataSourceSettings } from '@grafana/data';
+import { DataSourceSettings, urlUtil } from '@grafana/data';
 import { Alert, Button, LinkButton } from '@grafana/ui';
 import { getDataSourceLoadingNav, buildNavModel, getDataSourceNav } from '../state/navModel';
 import { PluginStateInfo } from 'app/features/plugins/PluginStateInfo';
@@ -149,6 +149,13 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
     return this.props.dataSource.id > 0;
   }
 
+  onNavigateToExplore() {
+    const { dataSource } = this.props;
+    const exploreState = JSON.stringify({ datasource: dataSource.name, context: 'explore' });
+    const url = urlUtil.renderUrl('/explore', { left: exploreState });
+    return url;
+  }
+
   renderLoadError(loadError: any) {
     let showDelete = false;
     let msg = loadError.toString();
@@ -269,6 +276,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
           isReadOnly={this.isReadOnly()}
           onDelete={this.onDelete}
           onTest={(event) => this.onTest(event)}
+          exploreUrl={this.onNavigateToExplore()}
         />
       </form>
     );

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

@@ -5,12 +5,19 @@ exports[`Render should render component 1`] = `
   className="gf-form-button-row"
 >
   <LinkButton
-    fill="outline"
+    fill="solid"
     href="/datasources"
     variant="secondary"
   >
     Back
   </LinkButton>
+  <LinkButton
+    fill="solid"
+    href="/explore"
+    variant="secondary"
+  >
+    Explore
+  </LinkButton>
   <Button
     aria-label="Data source settings page Delete button"
     disabled={true}
@@ -35,12 +42,19 @@ exports[`Render should render with buttons enabled 1`] = `
   className="gf-form-button-row"
 >
   <LinkButton
-    fill="outline"
+    fill="solid"
     href="/datasources"
     variant="secondary"
   >
     Back
   </LinkButton>
+  <LinkButton
+    fill="solid"
+    href="/explore"
+    variant="secondary"
+  >
+    Explore
+  </LinkButton>
   <Button
     aria-label="Data source settings page Delete button"
     disabled={false}