Merge pull request #13700 from grafana/permissions-code-to-enterprise

Permissions code to enterprise

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { AddDataSourcePermissions, Props } from './AddDataSourcePermissions';
-import { AclTarget } from '../../types/acl';
-
-const setup = () => {
-  const props: Props = {
-    onAddPermission: jest.fn(),
-    onCancel: jest.fn(),
-  };
-
-  return shallow(<AddDataSourcePermissions {...props} />);
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render user picker', () => {
-    const wrapper = setup();
-
-    wrapper.instance().setState({ type: AclTarget.User });
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,77 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { DataSourcePermissions, Props } from './DataSourcePermissions';
-import { DataSourcePermission, DataSourcePermissionDTO } from 'app/types';
-import { AclTarget, dashboardPermissionLevels } from '../../types/acl';
-
-const setup = (propOverrides?: object) => {
-  const props: Props = {
-    dataSourcePermission: {} as DataSourcePermissionDTO,
-    pageId: 1,
-    addDataSourcePermission: jest.fn(),
-    enableDataSourcePermissions: jest.fn(),
-    disableDataSourcePermissions: jest.fn(),
-    loadDataSourcePermissions: jest.fn(),
-    removeDataSourcePermission: jest.fn(),
-  };
-
-  Object.assign(props, propOverrides);
-
-  const wrapper = shallow(<DataSourcePermissions {...props} />);
-  const instance = wrapper.instance() as DataSourcePermissions;
-
-  return {
-    wrapper,
-    instance,
-  };
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render permissions enabled', () => {
-    const { wrapper } = setup({
-      dataSourcePermission: {
-        enabled: true,
-        datasourceId: 1,
-        permissions: [] as DataSourcePermission[],
-      },
-    });
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-
-describe('Functions', () => {
-  describe('on add permissions', () => {
-    const { instance } = setup();
-
-    it('should add permissions for team', () => {
-      const mockState = {
-        permission: dashboardPermissionLevels[0].value,
-        teamId: 1,
-        type: AclTarget.Team,
-      };
-
-      instance.onAddPermission(mockState);
-
-      expect(instance.props.addDataSourcePermission).toHaveBeenCalledWith(1, { teamId: 1, permission: 1 });
-    });
-
-    it('should add permissions for user', () => {
-      const mockState = {
-        permission: dashboardPermissionLevels[0].value,
-        userId: 1,
-        type: AclTarget.User,
-      };
-
-      instance.onAddPermission(mockState);
-
-      expect(instance.props.addDataSourcePermission).toHaveBeenCalledWith(1, { userId: 1, permission: 1 });
-    });
-  });
-});

public/app/features/datasources/DataSourcePermissions.tsx

@@ -1,155 +0,0 @@
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-import SlideDown from '../../core/components/Animations/SlideDown';
-import AddDataSourcePermissions from './AddDataSourcePermissions';
-import DataSourcePermissionsList from './DataSourcePermissionsList';
-import { AclTarget } from 'app/types/acl';
-import {
-  addDataSourcePermission,
-  disableDataSourcePermissions,
-  enableDataSourcePermissions,
-  loadDataSourcePermissions,
-  removeDataSourcePermission,
-} from './state/actions';
-import { DataSourcePermissionDTO } from 'app/types';
-import { getRouteParamsId } from '../../core/selectors/location';
-
-export interface Props {
-  dataSourcePermission: DataSourcePermissionDTO;
-  pageId: number;
-  addDataSourcePermission: typeof addDataSourcePermission;
-  enableDataSourcePermissions: typeof enableDataSourcePermissions;
-  disableDataSourcePermissions: typeof disableDataSourcePermissions;
-  loadDataSourcePermissions: typeof loadDataSourcePermissions;
-  removeDataSourcePermission: typeof removeDataSourcePermission;
-}
-
-interface State {
-  isAdding: boolean;
-}
-
-export class DataSourcePermissions extends PureComponent<Props, State> {
-  state = {
-    isAdding: false,
-  };
-
-  componentDidMount() {
-    this.fetchDataSourcePermissions();
-  }
-
-  async fetchDataSourcePermissions() {
-    const { pageId, loadDataSourcePermissions } = this.props;
-
-    return await loadDataSourcePermissions(pageId);
-  }
-
-  onOpenAddPermissions = () => {
-    this.setState({
-      isAdding: true,
-    });
-  };
-
-  onEnablePermissions = () => {
-    const { pageId, enableDataSourcePermissions } = this.props;
-    enableDataSourcePermissions(pageId);
-  };
-
-  onDisablePermissions = () => {
-    const { pageId, disableDataSourcePermissions } = this.props;
-
-    disableDataSourcePermissions(pageId);
-  };
-
-  onAddPermission = state => {
-    const { pageId, addDataSourcePermission } = this.props;
-    const data = {
-      permission: state.permission,
-    };
-
-    if (state.type === AclTarget.Team) {
-      addDataSourcePermission(pageId, Object.assign(data, { teamId: state.teamId }));
-    } else if (state.type === AclTarget.User) {
-      addDataSourcePermission(pageId, Object.assign(data, { userId: state.userId }));
-    }
-  };
-
-  onRemovePermission = item => {
-    this.props.removeDataSourcePermission(item.datasourceId, item.id);
-  };
-
-  onCancelAddPermission = () => {
-    this.setState({
-      isAdding: false,
-    });
-  };
-
-  render() {
-    const { dataSourcePermission } = this.props;
-    const { isAdding } = this.state;
-    const isPermissionsEnabled = dataSourcePermission.enabled;
-
-    return (
-      <div>
-        <div className="page-action-bar">
-          <h3 className="page-sub-heading">Permissions</h3>
-          <div className="page-action-bar__spacer" />
-          {isPermissionsEnabled && [
-            <button
-              key="add-permission"
-              className="btn btn-success pull-right"
-              onClick={this.onOpenAddPermissions}
-              disabled={isAdding}
-            >
-              <i className="fa fa-plus" /> Add Permission
-            </button>,
-            <button key="disable-permissions" className="btn btn-danger pull-right" onClick={this.onDisablePermissions}>
-              Disable Permissions
-            </button>,
-          ]}
-        </div>
-        {!isPermissionsEnabled ? (
-          <div className="empty-list-cta">
-            <div className="empty-list-cta__title">{'Permissions not enabled for this data source.'}</div>
-            <button onClick={this.onEnablePermissions} className="empty-list-cta__button btn btn-xlarge btn-success">
-              {'Enable'}
-            </button>
-            <div className="empty-list-cta__pro-tip">
-              <i className="fa fa-rocket" /> ProTip:{' '}
-              {'Only admins will be able to query the data source after you enable permissions.'}
-            </div>
-          </div>
-        ) : (
-          <div>
-            <SlideDown in={isAdding}>
-              <AddDataSourcePermissions
-                onAddPermission={state => this.onAddPermission(state)}
-                onCancel={this.onCancelAddPermission}
-              />
-            </SlideDown>
-            <DataSourcePermissionsList
-              items={dataSourcePermission.permissions}
-              onRemoveItem={item => this.onRemovePermission(item)}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  return {
-    pageId: getRouteParamsId(state.location),
-    dataSourcePermission: state.dataSources.dataSourcePermission,
-  };
-}
-
-const mapDispatchToProps = {
-  addDataSourcePermission,
-  enableDataSourcePermissions,
-  disableDataSourcePermissions,
-  loadDataSourcePermissions,
-  removeDataSourcePermission,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(DataSourcePermissions);

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { DataSourcePermissionsList, Props } from './DataSourcePermissionsList';
-import { DataSourcePermission } from '../../types';
-import { getMockDataSourcePermissionsTeam, getMockDataSourcePermissionsUser } from './__mocks__/dataSourcesMocks';
-
-const setup = (propOverrides?: object) => {
-  const props: Props = {
-    items: [] as DataSourcePermission[],
-    onRemoveItem: jest.fn(),
-  };
-
-  Object.assign(props, propOverrides);
-
-  return shallow(<DataSourcePermissionsList {...props} />);
-};
-
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render items', () => {
-    const wrapper = setup({
-      items: [getMockDataSourcePermissionsUser(), getMockDataSourcePermissionsTeam()],
-    });
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});

public/app/features/datasources/DataSourcePermissionsList.tsx

@@ -1,109 +0,0 @@
-import React, { PureComponent } from 'react';
-import { DataSourcePermission } from 'app/types';
-import { dataSourceAclLevels, DataSourcePermissionLevel } from 'app/types/acl';
-import DescriptionPicker from '../../core/components/Picker/DescriptionPicker';
-
-export interface Props {
-  items: DataSourcePermission[];
-  onRemoveItem: (item) => void;
-}
-
-export class DataSourcePermissionsList extends PureComponent<Props> {
-  renderAvatar(item) {
-    if (item.teamId) {
-      return <img className="filter-table__avatar" src={item.teamAvatarUrl} />;
-    } else if (item.userId) {
-      return <img className="filter-table__avatar" src={item.userAvatarUrl} />;
-    }
-
-    return <i style={{ width: '25px', height: '25px' }} className="gicon gicon-viewer" />;
-  }
-
-  renderDescription(item) {
-    if (item.userId) {
-      return [
-        <span key="name">{item.userLogin} </span>,
-        <span key="description" className="filter-table__weak-italic">
-          (User)
-        </span>,
-      ];
-    }
-    if (item.teamId) {
-      return [
-        <span key="name">{item.team} </span>,
-        <span key="description" className="filter-table__weak-italic">
-          (Team)
-        </span>,
-      ];
-    }
-    return <span className="filter-table__weak-italic">(Role)</span>;
-  }
-
-  render() {
-    const { items } = this.props;
-    const permissionLevels = [...dataSourceAclLevels];
-    permissionLevels.push({ value: DataSourcePermissionLevel.Admin, label: 'Admin', description: '' });
-
-    return (
-      <table className="filter-table gf-form-group">
-        <tbody>
-          <tr className="gf-form-disabled">
-            <td style={{ width: '1%' }}>
-              <i style={{ width: '25px', height: '25px' }} className="gicon gicon-shield" />
-            </td>
-            <td style={{ width: '90%' }}>
-              Admin
-              <span className="filter-table__weak-italic"> (Role)</span>
-            </td>
-            <td />
-            <td className="query-keyword">Can</td>
-            <td>
-              <div className="gf-form">
-                <DescriptionPicker
-                  optionsWithDesc={permissionLevels}
-                  onSelected={() => {}}
-                  value={2}
-                  disabled={true}
-                  className={'gf-form-input--form-dropdown-right'}
-                />
-              </div>
-            </td>
-            <td>
-              <button className="btn btn-inverse btn-small">
-                <i className="fa fa-lock" />
-              </button>
-            </td>
-          </tr>
-          {items.map((item, index) => {
-            return (
-              <tr key={`${item.id}-${index}`}>
-                <td style={{ width: '1%' }}>{this.renderAvatar(item)}</td>
-                <td style={{ width: '90%' }}>{this.renderDescription(item)}</td>
-                <td />
-                <td className="query-keyword">Can</td>
-                <td>
-                  <div className="gf-form">
-                    <DescriptionPicker
-                      optionsWithDesc={permissionLevels}
-                      onSelected={() => {}}
-                      value={1}
-                      disabled={true}
-                      className={'gf-form-input--form-dropdown-right'}
-                    />
-                  </div>
-                </td>
-                <td>
-                  <button className="btn btn-danger btn-small" onClick={() => this.props.onRemoveItem(item)}>
-                    <i className="fa fa-remove" />
-                  </button>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    );
-  }
-}
-
-export default DataSourcePermissionsList;

public/app/features/datasources/EditDataSourcePage.tsx

@@ -1,84 +0,0 @@
-import React, { PureComponent } from 'react';
-import { hot } from 'react-hot-loader';
-import { connect } from 'react-redux';
-import PageHeader from '../../core/components/PageHeader/PageHeader';
-import DataSourcePermissions from './DataSourcePermissions';
-import { DataSource, NavModel } from 'app/types';
-import { loadDataSource } from './state/actions';
-import { getNavModel } from '../../core/selectors/navModel';
-import { getRouteParamsId, getRouteParamsPage } from '../../core/selectors/location';
-import { getDataSourceLoadingNav } from './state/navModel';
-import { getDataSource } from './state/selectors';
-
-export interface Props {
-  navModel: NavModel;
-  dataSource: DataSource;
-  dataSourceId: number;
-  pageName: string;
-  loadDataSource: typeof loadDataSource;
-}
-
-enum PageTypes {
-  Settings = 'settings',
-  Permissions = 'permissions',
-  Dashboards = 'dashboards',
-}
-
-export class EditDataSourcePage extends PureComponent<Props> {
-  componentDidMount() {
-    this.fetchDataSource();
-  }
-
-  async fetchDataSource() {
-    await this.props.loadDataSource(this.props.dataSourceId);
-  }
-
-  isValidPage(currentPage) {
-    return (Object as any).values(PageTypes).includes(currentPage);
-  }
-
-  getCurrentPage() {
-    const currentPage = this.props.pageName;
-
-    return this.isValidPage(currentPage) ? currentPage : PageTypes.Permissions;
-  }
-
-  renderPage() {
-    switch (this.getCurrentPage()) {
-      case PageTypes.Permissions:
-        return <DataSourcePermissions />;
-    }
-
-    return null;
-  }
-
-  render() {
-    const { navModel } = this.props;
-
-    return (
-      <div>
-        <PageHeader model={navModel} />
-        <div className="page-container page-body">{this.renderPage()}</div>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps(state) {
-  const pageName = getRouteParamsPage(state.location) || PageTypes.Permissions;
-  const dataSourceId = getRouteParamsId(state.location);
-  const dataSourceLoadingNav = getDataSourceLoadingNav(pageName);
-
-  return {
-    navModel: getNavModel(state.navIndex, `datasource-${pageName}-${dataSourceId}`, dataSourceLoadingNav),
-    dataSourceId: dataSourceId,
-    dataSource: getDataSource(state.dataSources, dataSourceId),
-    pageName: pageName,
-  };
-}
-
-const mapDispatchToProps = {
-  loadDataSource,
-};
-
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(EditDataSourcePage));

public/app/features/datasources/__mocks__/dataSourcesMocks.ts

@@ -1,4 +1,4 @@
-import { DataSource, DataSourcePermission } from 'app/types';
+import { DataSource } from 'app/types';
 
 export const getMockDataSources = (amount: number): DataSource[] => {
   const dataSources = [];
@@ -43,32 +43,3 @@ export const getMockDataSource = (): DataSource => {
     user: '',
   };
 };
-
-export const getMockDataSourcePermissionsUser = (): DataSourcePermission => {
-  return {
-    created: '2018-10-10T16:50:45+02:00',
-    datasourceId: 1,
-    id: 2,
-    permission: 1,
-    permissionName: 'Query',
-    updated: '2018-10-10T16:50:45+02:00',
-    userAvatarUrl: '/avatar/926aa85c6bcefa0b4deca3223f337ae1',
-    userEmail: 'test@test.com',
-    userId: 3,
-    userLogin: 'testUser',
-  };
-};
-
-export const getMockDataSourcePermissionsTeam = (): DataSourcePermission => {
-  return {
-    created: '2018-10-10T16:57:09+02:00',
-    datasourceId: 1,
-    id: 6,
-    permission: 1,
-    permissionName: 'Query',
-    team: 'A-team',
-    teamAvatarUrl: '/avatar/93c0801b955cbd443a8cfa91a401d7bc',
-    teamId: 1,
-    updated: '2018-10-10T16:57:09+02:00',
-  };
-};

public/app/features/datasources/__snapshots__/AddDataSourcePermissions.test.tsx.snap

@@ -1,175 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div
-  className="gf-form-inline cta-form"
->
-  <button
-    className="cta-form__close btn btn-transparent"
-    onClick={[MockFunction]}
-  >
-    <i
-      className="fa fa-close"
-    />
-  </button>
-  <form
-    name="addPermission"
-    onSubmit={[Function]}
-  >
-    <h5>
-      Add Permission For
-    </h5>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <select
-          className="gf-form-input gf-size-auto"
-          onChange={[Function]}
-          value="Team"
-        >
-          <option
-            key="0"
-            value="Team"
-          >
-            Team
-          </option>
-          <option
-            key="1"
-            value="User"
-          >
-            User
-          </option>
-        </select>
-      </div>
-      <div
-        className="gf-form"
-      >
-        <TeamPicker
-          className="width-20"
-          onSelected={[Function]}
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <DescriptionPicker
-          className="gf-form-input--form-dropdown-right"
-          disabled={false}
-          onSelected={[Function]}
-          optionsWithDesc={
-            Array [
-              Object {
-                "description": "Can query data source.",
-                "label": "Query",
-                "value": 1,
-              },
-            ]
-          }
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <button
-          className="btn btn-success"
-          data-save-permission={true}
-          disabled={true}
-          type="submit"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;
-
-exports[`Render should render user picker 1`] = `
-<div
-  className="gf-form-inline cta-form"
->
-  <button
-    className="cta-form__close btn btn-transparent"
-    onClick={[MockFunction]}
-  >
-    <i
-      className="fa fa-close"
-    />
-  </button>
-  <form
-    name="addPermission"
-    onSubmit={[Function]}
-  >
-    <h5>
-      Add Permission For
-    </h5>
-    <div
-      className="gf-form-inline"
-    >
-      <div
-        className="gf-form"
-      >
-        <select
-          className="gf-form-input gf-size-auto"
-          onChange={[Function]}
-          value="User"
-        >
-          <option
-            key="0"
-            value="Team"
-          >
-            Team
-          </option>
-          <option
-            key="1"
-            value="User"
-          >
-            User
-          </option>
-        </select>
-      </div>
-      <div
-        className="gf-form"
-      >
-        <UserPicker
-          className="width-20"
-          onSelected={[Function]}
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <DescriptionPicker
-          className="gf-form-input--form-dropdown-right"
-          disabled={false}
-          onSelected={[Function]}
-          optionsWithDesc={
-            Array [
-              Object {
-                "description": "Can query data source.",
-                "label": "Query",
-                "value": 1,
-              },
-            ]
-          }
-        />
-      </div>
-      <div
-        className="gf-form"
-      >
-        <button
-          className="btn btn-success"
-          data-save-permission={true}
-          disabled={true}
-          type="submit"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-`;

public/app/features/datasources/__snapshots__/DataSourcePermissions.test.tsx.snap

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <h3
-      className="page-sub-heading"
-    >
-      Permissions
-    </h3>
-    <div
-      className="page-action-bar__spacer"
-    />
-  </div>
-  <div
-    className="empty-list-cta"
-  >
-    <div
-      className="empty-list-cta__title"
-    >
-      Permissions not enabled for this data source.
-    </div>
-    <button
-      className="empty-list-cta__button btn btn-xlarge btn-success"
-      onClick={[Function]}
-    >
-      Enable
-    </button>
-    <div
-      className="empty-list-cta__pro-tip"
-    >
-      <i
-        className="fa fa-rocket"
-      />
-       ProTip:
-       
-      Only admins will be able to query the data source after you enable permissions.
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Render should render permissions enabled 1`] = `
-<div>
-  <div
-    className="page-action-bar"
-  >
-    <h3
-      className="page-sub-heading"
-    >
-      Permissions
-    </h3>
-    <div
-      className="page-action-bar__spacer"
-    />
-    <button
-      className="btn btn-success pull-right"
-      disabled={false}
-      key="add-permission"
-      onClick={[Function]}
-    >
-      <i
-        className="fa fa-plus"
-      />
-       Add Permission
-    </button>
-    <button
-      className="btn btn-danger pull-right"
-      key="disable-permissions"
-      onClick={[Function]}
-    >
-      Disable Permissions
-    </button>
-  </div>
-  <div>
-    <Component
-      in={false}
-    >
-      <AddDataSourcePermissions
-        onAddPermission={[Function]}
-        onCancel={[Function]}
-      />
-    </Component>
-    <DataSourcePermissionsList
-      items={Array []}
-      onRemoveItem={[Function]}
-    />
-  </div>
-</div>
-`;

public/app/features/datasources/__snapshots__/DataSourcePermissionsList.test.tsx.snap

@@ -1,327 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<table
-  className="filter-table gf-form-group"
->
-  <tbody>
-    <tr
-      className="gf-form-disabled"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <i
-          className="gicon gicon-shield"
-          style={
-            Object {
-              "height": "25px",
-              "width": "25px",
-            }
-          }
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        Admin
-        <span
-          className="filter-table__weak-italic"
-        >
-           (Role)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={2}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-inverse btn-small"
-        >
-          <i
-            className="fa fa-lock"
-          />
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;
-
-exports[`Render should render items 1`] = `
-<table
-  className="filter-table gf-form-group"
->
-  <tbody>
-    <tr
-      className="gf-form-disabled"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <i
-          className="gicon gicon-shield"
-          style={
-            Object {
-              "height": "25px",
-              "width": "25px",
-            }
-          }
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        Admin
-        <span
-          className="filter-table__weak-italic"
-        >
-           (Role)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={2}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-inverse btn-small"
-        >
-          <i
-            className="fa fa-lock"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
-      key="2-0"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <img
-          className="filter-table__avatar"
-          src="/avatar/926aa85c6bcefa0b4deca3223f337ae1"
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        <span
-          key="name"
-        >
-          testUser
-           
-        </span>
-        <span
-          className="filter-table__weak-italic"
-          key="description"
-        >
-          (User)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={1}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-small"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-    <tr
-      key="6-1"
-    >
-      <td
-        style={
-          Object {
-            "width": "1%",
-          }
-        }
-      >
-        <img
-          className="filter-table__avatar"
-          src="/avatar/93c0801b955cbd443a8cfa91a401d7bc"
-        />
-      </td>
-      <td
-        style={
-          Object {
-            "width": "90%",
-          }
-        }
-      >
-        <span
-          key="name"
-        >
-          A-team
-           
-        </span>
-        <span
-          className="filter-table__weak-italic"
-          key="description"
-        >
-          (Team)
-        </span>
-      </td>
-      <td />
-      <td
-        className="query-keyword"
-      >
-        Can
-      </td>
-      <td>
-        <div
-          className="gf-form"
-        >
-          <DescriptionPicker
-            className="gf-form-input--form-dropdown-right"
-            disabled={true}
-            onSelected={[Function]}
-            optionsWithDesc={
-              Array [
-                Object {
-                  "description": "Can query data source.",
-                  "label": "Query",
-                  "value": 1,
-                },
-                Object {
-                  "description": "",
-                  "label": "Admin",
-                  "value": 2,
-                },
-              ]
-            }
-            value={1}
-          />
-        </div>
-      </td>
-      <td>
-        <button
-          className="btn btn-danger btn-small"
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-remove"
-          />
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-`;

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

@@ -1,5 +1,5 @@
 import { ThunkAction } from 'redux-thunk';
-import { DataSource, DataSourcePermissionDTO, Plugin, StoreState } from 'app/types';
+import { DataSource, Plugin, StoreState } from 'app/types';
 import { getBackendSrv } from '../../../core/services/backend_srv';
 import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
 import { updateLocation, updateNavIndex, UpdateNavIndexAction } from '../../../core/actions';
@@ -11,7 +11,6 @@ export enum ActionTypes {
   LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES',
   LoadDataSource = 'LOAD_DATA_SOURCE',
   LoadDataSourceMeta = 'LOAD_DATA_SOURCE_META',
-  LoadDataSourcePermissions = 'LOAD_DATA_SOURCE_PERMISSIONS',
   SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
   SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
   SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY',
@@ -52,11 +51,6 @@ export interface LoadDataSourceMetaAction {
   payload: Plugin;
 }
 
-export interface LoadDataSourcePermissionsAction {
-  type: ActionTypes.LoadDataSourcePermissions;
-  payload: DataSourcePermissionDTO;
-}
-
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
@@ -77,13 +71,6 @@ const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadDataSourceTypesAc
   payload: dataSourceTypes,
 });
 
-const dataSourcePermissionsLoaded = (
-  dataSourcePermission: DataSourcePermissionDTO
-): LoadDataSourcePermissionsAction => ({
-  type: ActionTypes.LoadDataSourcePermissions,
-  payload: dataSourcePermission,
-});
-
 export const setDataSourcesSearchQuery = (searchQuery: string): SetDataSourcesSearchQueryAction => ({
   type: ActionTypes.SetDataSourcesSearchQuery,
   payload: searchQuery,
@@ -108,8 +95,7 @@ export type Action =
   | SetDataSourceTypeSearchQueryAction
   | LoadDataSourceAction
   | UpdateNavIndexAction
-  | LoadDataSourceMetaAction
-  | LoadDataSourcePermissionsAction;
+  | LoadDataSourceMetaAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -159,42 +145,6 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   };
 }
 
-export function loadDataSourcePermissions(id: number): ThunkResult<void> {
-  return async dispatch => {
-    const response = await getBackendSrv().get(`/api/datasources/${id}/permissions`);
-    dispatch(dataSourcePermissionsLoaded(response));
-  };
-}
-
-export function enableDataSourcePermissions(id: number): ThunkResult<void> {
-  return async dispatch => {
-    await getBackendSrv().post(`/api/datasources/${id}/enable-permissions`, {});
-    dispatch(loadDataSourcePermissions(id));
-  };
-}
-
-export function disableDataSourcePermissions(id: number): ThunkResult<void> {
-  return async dispatch => {
-    await getBackendSrv().post(`/api/datasources/${id}/disable-permissions`, {});
-    dispatch(loadDataSourcePermissions(id));
-  };
-}
-
-export function addDataSourcePermission(id: number, data: object): ThunkResult<void> {
-  return async dispatch => {
-    await getBackendSrv().post(`/api/datasources/${id}/permissions`, data);
-
-    dispatch(loadDataSourcePermissions(id));
-  };
-}
-
-export function removeDataSourcePermission(id: number, permissionId: number): ThunkResult<void> {
-  return async dispatch => {
-    await getBackendSrv().delete(`/api/datasources/${id}/permissions/${permissionId}`);
-    dispatch(loadDataSourcePermissions(id));
-  };
-}
-
 export function nameExits(dataSources, name) {
   return (
     dataSources.filter(dataSource => {

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

@@ -1,4 +1,4 @@
-import { DataSource, DataSourcePermissionDTO, DataSourcesState, Plugin } from 'app/types';
+import { DataSource, DataSourcesState, Plugin } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 
@@ -11,7 +11,6 @@ const initialState: DataSourcesState = {
   dataSourceTypes: [] as Plugin[],
   dataSourceTypeSearchQuery: '',
   dataSourceMeta: {} as Plugin,
-  dataSourcePermission: {} as DataSourcePermissionDTO,
   hasFetched: false,
 };
 
@@ -37,9 +36,6 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
     case ActionTypes.LoadDataSourceMeta:
       return { ...state, dataSourceMeta: action.payload };
-
-    case ActionTypes.LoadDataSourcePermissions:
-      return { ...state, dataSourcePermission: action.payload };
   }
 
   return state;

public/app/routes/routes.ts

@@ -13,7 +13,6 @@ import FolderPermissions from 'app/features/folders/FolderPermissions';
 import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
-import EditDataSourcePage from 'app/features/datasources/EditDataSourcePage';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -83,12 +82,6 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'DataSourceDashboardsCtrl',
       controllerAs: 'ctrl',
     })
-    .when('/datasources/edit/:id/:page?', {
-      template: '<react-container />',
-      resolve: {
-        component: () => EditDataSourcePage,
-      },
-    })
     .when('/datasources/new', {
       template: '<react-container />',
       resolve: {

public/app/store/configureStore.ts

@@ -11,7 +11,7 @@ import pluginReducers from 'app/features/plugins/state/reducers';
 import dataSourcesReducers from 'app/features/datasources/state/reducers';
 import usersReducers from 'app/features/users/state/reducers';
 
-const rootReducer = combineReducers({
+const rootReducers = {
   ...sharedReducers,
   ...alertingReducers,
   ...teamsReducers,
@@ -21,13 +21,19 @@ const rootReducer = combineReducers({
   ...pluginReducers,
   ...dataSourcesReducers,
   ...usersReducers,
-});
+};
 
 export let store;
 
+export function addRootReducer(reducers) {
+  Object.assign(rootReducers, ...reducers);
+}
+
 export function configureStore() {
   const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
+  const rootReducer = combineReducers(rootReducers);
+
   if (process.env.NODE_ENV !== 'production') {
     // DEV builds we had the logger middleware
     store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())));

public/app/types/datasources.ts

@@ -1,28 +1,6 @@
 import { LayoutMode } from '../core/components/LayoutSelector/LayoutSelector';
 import { Plugin } from './plugins';
 
-export interface DataSourcePermission {
-  id: number;
-  datasourceId: number;
-  permission: number;
-  permissionName: string;
-  created: string;
-  updated: string;
-  userId?: number;
-  userLogin?: string;
-  userEmail?: string;
-  userAvatarUrl?: string;
-  teamId?: number;
-  teamAvatarUrl?: string;
-  team?: string;
-}
-
-export interface DataSourcePermissionDTO {
-  datasourceId: number;
-  enabled: boolean;
-  permissions: DataSourcePermission[];
-}
-
 export interface DataSource {
   id: number;
   orgId: number;
@@ -49,6 +27,5 @@ export interface DataSourcesState {
   dataSourceTypes: Plugin[];
   dataSource: DataSource;
   dataSourceMeta: Plugin;
-  dataSourcePermission: DataSourcePermissionDTO;
   hasFetched: boolean;
 }

public/app/types/index.ts

@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard';
 import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState } from './user';
-import { DataSource, DataSourcePermissionDTO, DataSourcePermission, DataSourcesState } from './datasources';
+import { DataSource, DataSourcesState } from './datasources';
 import { PluginMeta, Plugin, PluginsState } from './plugins';
 
 export {
@@ -41,8 +41,6 @@ export {
   Plugin,
   PluginsState,
   DataSourcesState,
-  DataSourcePermissionDTO,
-  DataSourcePermission,
   Invitee,
   OrgUser,
   User,