enable testing provsioned datasources

closes #12164

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);

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>

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>}
-
-                <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}
+          {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)}
                   />
-                )}
-
-                <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>
     );

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}

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>