chore: Fix typings and add Page-component to NewDataSourcePage #14762

public/app/features/datasources/NewDataSourcePage.tsx

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
-import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import { NavModel, Plugin } from 'app/types';
+import Page from 'app/core/components/Page/Page';
+import { NavModel, Plugin, StoreState } from 'app/types';
 import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getDataSourceTypes } from './state/selectors';
@@ -10,6 +10,7 @@ import { getDataSourceTypes } from './state/selectors';
 export interface Props {
   navModel: NavModel;
   dataSourceTypes: Plugin[];
+  isLoading: boolean;
   addDataSource: typeof addDataSource;
   loadDataSourceTypes: typeof loadDataSourceTypes;
   dataSourceTypeSearchQuery: string;
@@ -21,58 +22,59 @@ class NewDataSourcePage extends PureComponent<Props> {
     this.props.loadDataSourceTypes();
   }
 
-  onDataSourceTypeClicked = type => {
-    this.props.addDataSource(type);
+  onDataSourceTypeClicked = (plugin: Plugin) => {
+    this.props.addDataSource(plugin);
   };
 
-  onSearchQueryChange = event => {
+  onSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.props.setDataSourceTypeSearchQuery(event.target.value);
   };
 
   render() {
-    const { navModel, dataSourceTypes, dataSourceTypeSearchQuery } = this.props;
-
+    const { navModel, dataSourceTypes, dataSourceTypeSearchQuery, isLoading } = this.props;
     return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">
-          <h2 className="add-data-source-header">Choose data source type</h2>
-          <div className="add-data-source-search">
-            <label className="gf-form--has-input-icon">
-              <input
-                type="text"
-                className="gf-form-input width-20"
-                value={dataSourceTypeSearchQuery}
-                onChange={this.onSearchQueryChange}
-                placeholder="Filter by name or type"
-              />
-              <i className="gf-form-input-icon fa fa-search" />
-            </label>
-          </div>
-          <div className="add-data-source-grid">
-            {dataSourceTypes.map((type, index) => {
-              return (
-                <div
-                  onClick={() => this.onDataSourceTypeClicked(type)}
-                  className="add-data-source-grid-item"
-                  key={`${type.id}-${index}`}
-                >
-                  <img className="add-data-source-grid-item-logo" src={type.info.logos.small} />
-                  <span className="add-data-source-grid-item-text">{type.name}</span>
-                </div>
-              );
-            })}
+      <Page navModel={navModel}>
+        <Page.Contents isLoading={isLoading}>
+          <div className="page-container page-body">
+            <h2 className="add-data-source-header">Choose data source type</h2>
+            <div className="add-data-source-search">
+              <label className="gf-form--has-input-icon">
+                <input
+                  type="text"
+                  className="gf-form-input width-20"
+                  value={dataSourceTypeSearchQuery}
+                  onChange={this.onSearchQueryChange}
+                  placeholder="Filter by name or type"
+                />
+                <i className="gf-form-input-icon fa fa-search" />
+              </label>
+            </div>
+            <div className="add-data-source-grid">
+              {dataSourceTypes.map((plugin, index) => {
+                return (
+                  <div
+                    onClick={() => this.onDataSourceTypeClicked(plugin)}
+                    className="add-data-source-grid-item"
+                    key={`${plugin.id}-${index}`}
+                  >
+                    <img className="add-data-source-grid-item-logo" src={plugin.info.logos.small} />
+                    <span className="add-data-source-grid-item-text">{plugin.name}</span>
+                  </div>
+                );
+              })}
+            </div>
           </div>
-        </div>
-      </div>
+        </Page.Contents>
+      </Page>
     );
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps(state: StoreState) {
   return {
     navModel: getNavModel(state.navIndex, 'datasources'),
     dataSourceTypes: getDataSourceTypes(state.dataSources),
+    isLoading: state.dataSources.isLoadingDataSources
   };
 }
 

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

@@ -12,6 +12,7 @@ import { Plugin, StoreState } from 'app/types';
 export enum ActionTypes {
   LoadDataSources = 'LOAD_DATA_SOURCES',
   LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES',
+  LoadedDataSourceTypes = 'LOADED_DATA_SOURCE_TYPES',
   LoadDataSource = 'LOAD_DATA_SOURCE',
   LoadDataSourceMeta = 'LOAD_DATA_SOURCE_META',
   SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
@@ -38,6 +39,10 @@ interface SetDataSourcesLayoutModeAction {
 
 interface LoadDataSourceTypesAction {
   type: ActionTypes.LoadDataSourceTypes;
+}
+
+interface LoadedDataSourceTypesAction {
+  type: ActionTypes.LoadedDataSourceTypes;
   payload: Plugin[];
 }
 
@@ -81,8 +86,12 @@ const dataSourceMetaLoaded = (dataSourceMeta: Plugin): LoadDataSourceMetaAction
   payload: dataSourceMeta,
 });
 
-const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadDataSourceTypesAction => ({
+const dataSourceTypesLoad = (): LoadDataSourceTypesAction => ({
   type: ActionTypes.LoadDataSourceTypes,
+});
+
+const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadedDataSourceTypesAction => ({
+  type: ActionTypes.LoadedDataSourceTypes,
   payload: dataSourceTypes,
 });
 
@@ -117,6 +126,7 @@ export type Action =
   | SetDataSourcesLayoutModeAction
   | UpdateLocationAction
   | LoadDataSourceTypesAction
+  | LoadedDataSourceTypesAction
   | SetDataSourceTypeSearchQueryAction
   | LoadDataSourceAction
   | UpdateNavIndexAction
@@ -167,6 +177,7 @@ export function addDataSource(plugin: Plugin): ThunkResult<void> {
 
 export function loadDataSourceTypes(): ThunkResult<void> {
   return async dispatch => {
+    dispatch(dataSourceTypesLoad());
     const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' });
     dispatch(dataSourceTypesLoaded(result));
   };

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

@@ -12,6 +12,7 @@ const initialState: DataSourcesState = {
   dataSourceTypes: [] as Plugin[],
   dataSourceTypeSearchQuery: '',
   hasFetched: false,
+  isLoadingDataSources: false,
   dataSourceMeta: {} as Plugin,
 };
 
@@ -30,7 +31,10 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
       return { ...state, layoutMode: action.payload };
 
     case ActionTypes.LoadDataSourceTypes:
-      return { ...state, dataSourceTypes: action.payload };
+      return { ...state, dataSourceTypes: [], isLoadingDataSources: true };
+
+    case ActionTypes.LoadedDataSourceTypes:
+      return { ...state, dataSourceTypes: action.payload, isLoadingDataSources: false };
 
     case ActionTypes.SetDataSourceTypeSearchQuery:
       return { ...state, dataSourceTypeSearchQuery: action.payload };

public/app/types/datasources.ts

@@ -12,4 +12,5 @@ export interface DataSourcesState {
   dataSource: DataSourceSettings;
   dataSourceMeta: Plugin;
   hasFetched: boolean;
+  isLoadingDataSources: boolean;
 }