clear test box if success

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

@@ -16,6 +16,7 @@ const setup = (propOverrides?: object) => {
     setDataSourceName: jest.fn(),
     updateDataSource: jest.fn(),
     testing: {} as DataSourceTest,
+    clearTesting: jest.fn(),
   };
 
   Object.assign(props, propOverrides);

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

@@ -8,7 +8,7 @@ import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
 import appEvents from '../../../core/app_events';
-import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
+import { clearTesting, deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
@@ -23,9 +23,11 @@ export interface Props {
   loadDataSource: typeof loadDataSource;
   setDataSourceName: typeof setDataSourceName;
   updateDataSource: typeof updateDataSource;
+  clearTesting: typeof clearTesting;
 }
 interface State {
   dataSource: DataSource;
+  hasClosedTest: boolean;
 }
 
 enum DataSourceStates {
@@ -36,6 +38,7 @@ enum DataSourceStates {
 export class DataSourceSettings extends PureComponent<Props, State> {
   state = {
     dataSource: {} as DataSource,
+    hasClosedTest: false,
   };
 
   async componentDidMount() {
@@ -44,6 +47,23 @@ export class DataSourceSettings extends PureComponent<Props, State> {
     await loadDataSource(pageId);
   }
 
+  componentDidUpdate(prevProps) {
+    const { clearTesting } = this.props;
+
+    if (!this.state.hasClosedTest && prevProps.testing.status === 'success') {
+      this.setState({ hasClosedTest: true });
+
+      setTimeout(() => {
+        clearTesting();
+        this.setState({ hasClosedTest: false });
+      }, 3000);
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearTesting();
+  }
+
   onSubmit = event => {
     event.preventDefault();
 
@@ -194,6 +214,7 @@ const mapDispatchToProps = {
   loadDataSource,
   setDataSourceName,
   updateDataSource,
+  clearTesting,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));

public/app/features/datasources/state/actions.ts

@@ -21,6 +21,7 @@ export enum ActionTypes {
   SetDataSourceTestingProgess = 'SET_TESTING_PROGRESS',
   SetDataSourceTestingSuccess = 'SET_DATA_SOURCE_TESTING_SUCCESS',
   SetDataSourceTestingFail = 'SET_DATA_SOURCE_TESTING_FAIL',
+  ClearTesting = 'CLEAR_TEST',
 }
 
 interface LoadDataSourcesAction {
@@ -78,6 +79,10 @@ interface SetDataSourceTestingFailAction {
   payload: string;
 }
 
+interface ClearTestingAction {
+  type: ActionTypes.ClearTesting;
+}
+
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -118,6 +123,10 @@ export const setDataSourceName = (name: string) => ({
   payload: name,
 });
 
+export const clearTesting = (): ClearTestingAction => ({
+  type: ActionTypes.ClearTesting,
+});
+
 const setDataSourceTestingProgress = (state: boolean): SetDataSourceTestingProgessAction => ({
   type: ActionTypes.SetDataSourceTestingProgess,
   payload: state,
@@ -149,7 +158,8 @@ export type Action =
   | SetDataSourceNameAction
   | SetDataSourceTestingProgessAction
   | SetDataSourceTestingSuccessAction
-  | SetDataSourceTestingFailAction;
+  | SetDataSourceTestingFailAction
+  | ClearTestingAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 

public/app/features/datasources/state/reducers.ts

@@ -1,4 +1,4 @@
-import { DataSource, DataSourcesState, DataSourceTest, Plugin } from 'app/types';
+import { DataSource, DataSourcesState, Plugin } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 
@@ -12,7 +12,7 @@ const initialState: DataSourcesState = {
   dataSourceTypeSearchQuery: '',
   hasFetched: false,
   dataSourceMeta: {} as Plugin,
-  testing: {} as DataSourceTest,
+  testing: { inProgress: false, status: '', message: '' },
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
@@ -59,6 +59,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
         ...state,
         testing: { status: 'error', message: action.payload, inProgress: false },
       };
+
+    case ActionTypes.ClearTesting:
+      return { ...state, testing: { inProgress: false, status: '', message: '' } };
   }
 
   return state;