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,7 +186,8 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
     return (
       <Page navModel={navModel}>
         <Page.Contents isLoading={!this.hasDataSource}>
-          {this.hasDataSource && <div className="page-container page-body">
+          {this.hasDataSource && (
+            <div className="page-container page-body">
               <div>
                 <form onSubmit={this.onSubmit}>
                   {this.isReadOnly() && this.renderIsReadOnlyMessage()}
@@ -222,10 +229,12 @@ export class DataSourceSettingsPage extends PureComponent<Props, State> {
                     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>