From 3b9105e1bebb24e518548faf258576e0b30f70a8 Mon Sep 17 00:00:00 2001
From: bergquist <carl.bergquist@gmail.com>
Date: Tue, 12 Feb 2019 08:45:21 +0100
Subject: [PATCH] enable testing provsioned datasources

closes #12164
---
 .../datasources/settings/ButtonRow.test.tsx   |  1 +
 .../datasources/settings/ButtonRow.tsx        |  8 +-
 .../settings/DataSourceSettingsPage.tsx       | 89 ++++++++++---------
 .../__snapshots__/ButtonRow.test.tsx.snap     |  7 ++
 .../DataSourceSettingsPage.test.tsx.snap      |  4 +
 5 files changed, 68 insertions(+), 41 deletions(-)

diff --git a/public/app/features/datasources/settings/ButtonRow.test.tsx b/public/app/features/datasources/settings/ButtonRow.test.tsx
index 0acab8941ff..84b16d829d5 100644
--- a/public/app/features/datasources/settings/ButtonRow.test.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.test.tsx
@@ -7,6 +7,7 @@ const setup = (propOverrides?: object) => {
     isReadOnly: true,
     onSubmit: jest.fn(),
     onDelete: jest.fn(),
+    onTest: jest.fn(),
   };
 
   Object.assign(props, propOverrides);
diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx
index 6b85e21405c..3e8ac060010 100644
--- a/public/app/features/datasources/settings/ButtonRow.tsx
+++ b/public/app/features/datasources/settings/ButtonRow.tsx
@@ -4,14 +4,20 @@ export interface Props {
   isReadOnly: boolean;
   onDelete: () => void;
   onSubmit: (event) => void;
+  onTest: (event) => void;
 }
 
-const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
+const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit, onTest }) => {
   return (
     <div className="gf-form-button-row">
       <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
         Save &amp; Test
       </button>
+      {isReadOnly && (
+        <button type="submit" className="btn btn-success" onClick={onTest}>
+          Test
+        </button>
+      )}
       <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}>
         Delete
       </button>
diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
index ff840390cf5..fe1121ed73e 100644
--- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
+++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx
@@ -72,6 +72,12 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     this.testDataSource();
   };
 
+  onTest = async (evt: React.FormEvent<HTMLFormElement>) => {
+    evt.preventDefault();
+
+    this.testDataSource();
+  };
+
   onDelete = () => {
     appEvents.emit('confirm-modal', {
       title: 'Delete',
@@ -180,52 +186,55 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     return (
       <Page navModel={navModel}>
         <Page.Contents isLoading={!this.hasDataSource}>
-          {this.hasDataSource && <div className="page-container page-body">
-            <div>
-              <form onSubmit={this.onSubmit}>
-                {this.isReadOnly() && this.renderIsReadOnlyMessage()}
-                {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
+          {this.hasDataSource && (
+            <div className="page-container page-body">
+              <div>
+                <form onSubmit={this.onSubmit}>
+                  {this.isReadOnly() && this.renderIsReadOnlyMessage()}
+                  {this.shouldRenderInfoBox() && <div className="grafana-info-box">{this.getInfoText()}</div>}
 
-                <BasicSettings
-                  dataSourceName={dataSource.name}
-                  isDefault={dataSource.isDefault}
-                  onDefaultChange={state => setIsDefault(state)}
-                  onNameChange={name => setDataSourceName(name)}
-                />
-
-                {dataSourceMeta.module && (
-                  <PluginSettings
-                    dataSource={dataSource}
-                    dataSourceMeta={dataSourceMeta}
-                    onModelChange={this.onModelChange}
+                  <BasicSettings
+                    dataSourceName={dataSource.name}
+                    isDefault={dataSource.isDefault}
+                    onDefaultChange={state => setIsDefault(state)}
+                    onNameChange={name => setDataSourceName(name)}
                   />
-                )}
 
-                <div className="gf-form-group section">
-                  {testingMessage && (
-                    <div className={`alert-${testingStatus} alert`}>
-                      <div className="alert-icon">
-                        {testingStatus === 'error' ? (
-                          <i className="fa fa-exclamation-triangle" />
-                        ) : (
-                          <i className="fa fa-check" />
-                        )}
-                      </div>
-                      <div className="alert-body">
-                        <div className="alert-title">{testingMessage}</div>
-                      </div>
-                    </div>
+                  {dataSourceMeta.module && (
+                    <PluginSettings
+                      dataSource={dataSource}
+                      dataSourceMeta={dataSourceMeta}
+                      onModelChange={this.onModelChange}
+                    />
                   )}
-                </div>
 
-                <ButtonRow
-                  onSubmit={event => this.onSubmit(event)}
-                  isReadOnly={this.isReadOnly()}
-                  onDelete={this.onDelete}
-                />
-              </form>
+                  <div className="gf-form-group section">
+                    {testingMessage && (
+                      <div className={`alert-${testingStatus} alert`}>
+                        <div className="alert-icon">
+                          {testingStatus === 'error' ? (
+                            <i className="fa fa-exclamation-triangle" />
+                          ) : (
+                            <i className="fa fa-check" />
+                          )}
+                        </div>
+                        <div className="alert-body">
+                          <div className="alert-title">{testingMessage}</div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  <ButtonRow
+                    onSubmit={event => this.onSubmit(event)}
+                    isReadOnly={this.isReadOnly()}
+                    onDelete={this.onDelete}
+                    onTest={event => this.onTest(event)}
+                  />
+                </form>
+              </div>
             </div>
-          </div>}
+          )}
         </Page.Contents>
       </Page>
     );
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 bd190f60b03..d4ec7eeea1e 100644
--- a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap
@@ -12,6 +12,13 @@ exports[`Render should render component 1`] = `
   >
     Save & Test
   </button>
+  <button
+    className="btn btn-success"
+    onClick={[MockFunction]}
+    type="submit"
+  >
+    Test
+  </button>
   <button
     className="btn btn-danger"
     disabled={true}
diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap
index af7895ac6b8..d23e508ea82 100644
--- a/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap
+++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap
@@ -97,6 +97,7 @@ exports[`Render should render alpha info text 1`] = `
             isReadOnly={false}
             onDelete={[Function]}
             onSubmit={[Function]}
+            onTest={[Function]}
           />
         </form>
       </div>
@@ -202,6 +203,7 @@ exports[`Render should render beta info text 1`] = `
             isReadOnly={false}
             onDelete={[Function]}
             onSubmit={[Function]}
+            onTest={[Function]}
           />
         </form>
       </div>
@@ -302,6 +304,7 @@ exports[`Render should render component 1`] = `
             isReadOnly={false}
             onDelete={[Function]}
             onSubmit={[Function]}
+            onTest={[Function]}
           />
         </form>
       </div>
@@ -407,6 +410,7 @@ exports[`Render should render is ready only message 1`] = `
             isReadOnly={true}
             onDelete={[Function]}
             onSubmit={[Function]}
+            onTest={[Function]}
           />
         </form>
       </div>