Merge branch 'revert-13502-revert-13488-org-users-to-react'

Author: torkelo

public/app/core/components/OrgActionBar/OrgActionBar.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import OrgActionBar, { Props } from './OrgActionBar';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    searchQuery: '',
+    setSearchQuery: jest.fn(),
+    linkButton: { href: 'some/url', title: 'test' },
+  };
+
+  Object.assign(props, propOverrides);
+
+  return shallow(<OrgActionBar {...props} />);
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const wrapper = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

public/app/core/components/OrgActionBar/OrgActionBar.tsx

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react';
+import LayoutSelector, { LayoutMode } from '../LayoutSelector/LayoutSelector';
+
+export interface Props {
+  searchQuery: string;
+  layoutMode?: LayoutMode;
+  onSetLayoutMode?: (mode: LayoutMode) => {};
+  setSearchQuery: (value: string) => {};
+  linkButton: { href: string; title: string };
+}
+
+export default class OrgActionBar extends PureComponent<Props> {
+  render() {
+    const { searchQuery, layoutMode, onSetLayoutMode, linkButton, setSearchQuery } = this.props;
+
+    return (
+      <div className="page-action-bar">
+        <div className="gf-form gf-form--grow">
+          <label className="gf-form--has-input-icon">
+            <input
+              type="text"
+              className="gf-form-input width-20"
+              value={searchQuery}
+              onChange={event => setSearchQuery(event.target.value)}
+              placeholder="Filter by name or type"
+            />
+            <i className="gf-form-input-icon fa fa-search" />
+          </label>
+          <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
+        </div>
+        <div className="page-action-bar__spacer" />
+        <a className="btn btn-success" href={linkButton.href} target="_blank">
+          {linkButton.title}
+        </a>
+      </div>
+    );
+  }
+}

public/app/features/plugins/__snapshots__/PluginActionBar.test.tsx.snap renamed to public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap

@@ -22,7 +22,6 @@ exports[`Render should render component 1`] = `
       />
     </label>
     <LayoutSelector
-      mode="grid"
       onLayoutModeChanged={[Function]}
     />
   </div>
@@ -31,10 +30,10 @@ exports[`Render should render component 1`] = `
   />
   <a
     className="btn btn-success"
-    href="https://grafana.com/plugins?utm_source=grafana_plugin_list"
+    href="some/url"
     target="_blank"
   >
-    Find more plugins on Grafana.com
+    test
   </a>
 </div>
 `;

public/app/features/datasources/DataSourcesActionBar.test.tsx

@@ -12,6 +12,9 @@ const setup = (propOverrides?: object) => {
     loadDataSources: jest.fn(),
     navModel: {} as NavModel,
     dataSourcesCount: 0,
+    searchQuery: '',
+    setDataSourcesSearchQuery: jest.fn(),
+    setDataSourcesLayoutMode: jest.fn(),
   };
 
   Object.assign(props, propOverrides);

public/app/features/datasources/DataSourcesActionBar.tsx

@@ -2,21 +2,29 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import PageHeader from '../../core/components/PageHeader/PageHeader';
-import DataSourcesActionBar from './DataSourcesActionBar';
+import OrgActionBar from '../../core/components/OrgActionBar/OrgActionBar';
+import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
 import DataSourcesList from './DataSourcesList';
-import { loadDataSources } from './state/actions';
-import { getDataSources, getDataSourcesCount, getDataSourcesLayoutMode } from './state/selectors';
-import { getNavModel } from '../../core/selectors/navModel';
 import { DataSource, NavModel } from 'app/types';
 import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector';
-import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
+import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions';
+import { getNavModel } from '../../core/selectors/navModel';
+import {
+  getDataSources,
+  getDataSourcesCount,
+  getDataSourcesLayoutMode,
+  getDataSourcesSearchQuery,
+} from './state/selectors';
 
 export interface Props {
   navModel: NavModel;
   dataSources: DataSource[];
   dataSourcesCount: number;
   layoutMode: LayoutMode;
+  searchQuery: string;
   loadDataSources: typeof loadDataSources;
+  setDataSourcesLayoutMode: typeof setDataSourcesLayoutMode;
+  setDataSourcesSearchQuery: typeof setDataSourcesSearchQuery;
 }
 
 const emptyListModel = {
@@ -40,7 +48,20 @@ export class DataSourcesListPage extends PureComponent<Props> {
   }
 
   render() {
-    const { dataSources, dataSourcesCount, navModel, layoutMode } = this.props;
+    const {
+      dataSources,
+      dataSourcesCount,
+      navModel,
+      layoutMode,
+      searchQuery,
+      setDataSourcesSearchQuery,
+      setDataSourcesLayoutMode,
+    } = this.props;
+
+    const linkButton = {
+      href: 'datasources/new',
+      title: 'Add data source',
+    };
 
     return (
       <div>
@@ -50,7 +71,14 @@ export class DataSourcesListPage extends PureComponent<Props> {
             <EmptyListCTA model={emptyListModel} />
           ) : (
             [
-              <DataSourcesActionBar key="action-bar" />,
+              <OrgActionBar
+                layoutMode={layoutMode}
+                searchQuery={searchQuery}
+                onSetLayoutMode={mode => setDataSourcesLayoutMode(mode)}
+                setSearchQuery={query => setDataSourcesSearchQuery(query)}
+                linkButton={linkButton}
+                key="action-bar"
+              />,
               <DataSourcesList dataSources={dataSources} layoutMode={layoutMode} key="list" />,
             ]
           )}
@@ -66,11 +94,14 @@ function mapStateToProps(state) {
     dataSources: getDataSources(state.dataSources),
     layoutMode: getDataSourcesLayoutMode(state.dataSources),
     dataSourcesCount: getDataSourcesCount(state.dataSources),
+    searchQuery: getDataSourcesSearchQuery(state.dataSources),
   };
 }
 
 const mapDispatchToProps = {
   loadDataSources,
+  setDataSourcesSearchQuery,
+  setDataSourcesLayoutMode,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourcesListPage));

public/app/features/datasources/DataSourcesListPage.test.tsx

@@ -8,8 +8,18 @@ exports[`Render should render action bar and datasources 1`] = `
   <div
     className="page-container page-body"
   >
-    <Connect(DataSourcesActionBar)
+    <OrgActionBar
       key="action-bar"
+      layoutMode="grid"
+      linkButton={
+        Object {
+          "href": "datasources/new",
+          "title": "Add data source",
+        }
+      }
+      onSetLayoutMode={[Function]}
+      searchQuery=""
+      setSearchQuery={[Function]}
     />
     <DataSourcesList
       dataSources={

public/app/features/datasources/DataSourcesListPage.tsx

@@ -1,6 +1,4 @@
-import './org_users_ctrl';
 import './profile_ctrl';
-import './org_users_ctrl';
 import './select_org_ctrl';
 import './change_password_ctrl';
 import './new_org_ctrl';