From 2156980edba7241beee77b0edb37b1c3fff05e38 Mon Sep 17 00:00:00 2001
From: Tharun Rajendran <rajendrantharun@live.com>
Date: Mon, 23 Aug 2021 20:53:49 +0530
Subject: [PATCH] Datasource: add button to navigate to explore from settings
 (#36119)

Fixes #13737
---
 .../datasources/settings/ButtonRow.test.tsx    |  1 +
 .../datasources/settings/ButtonRow.tsx         |  8 ++++++--
 .../settings/DataSourceSettingsPage.tsx        | 10 +++++++++-
 .../__snapshots__/ButtonRow.test.tsx.snap      | 18 ++++++++++++++++--
 4 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/public/app/features/datasources/settings/ButtonRow.test.tsx b/public/app/features/datasources/settings/ButtonRow.test.tsx
index 84b16d829d5..2e177755493 100644
--- a/public/app/features/datasources/settings/ButtonRow.test.tsx
+++ b/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);
diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
index 7631b47bd40..8b744f68667 100644
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/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"
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index 47b215dd1d4..220ced746ea 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/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>
     );
diff --git a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
index c9e5ccbaed7..1c3741f48e8 100644
--- a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
+++ b/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}