pausing permissions list

public/app/features/datasources/AddDataSourcePermissions.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { UserPicker } from 'app/core/components/Picker/UserPicker';
 import { Team, TeamPicker } from 'app/core/components/Picker/TeamPicker';
 import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
-import { AclTarget, DataSourcePermissionLevel } from 'app/types/acl';
+import { dataSourceAclLevels, AclTarget, DataSourcePermissionLevel } from 'app/types/acl';
 import { User } from 'app/types';
 
 export interface Props {
@@ -68,9 +68,6 @@ export class AddDataSourcePermissions extends PureComponent<Props, State> {
 
     const pickerClassName = 'width-20';
     const aclTargets = [{ value: AclTarget.Team, text: 'Team' }, { value: AclTarget.User, text: 'User' }];
-    const permissionLevels = [
-      { value: DataSourcePermissionLevel.Query, label: 'Query', description: 'Can query data source.' },
-    ];
 
     return (
       <div className="gf-form-inline cta-form">
@@ -106,7 +103,7 @@ export class AddDataSourcePermissions extends PureComponent<Props, State> {
             )}
             <div className="gf-form">
               <DescriptionPicker
-                optionsWithDesc={permissionLevels}
+                optionsWithDesc={dataSourceAclLevels}
                 onSelected={this.onPermissionChanged}
                 value={permission}
                 disabled={false}

public/app/features/datasources/DataSourcePermissions.tsx

@@ -2,11 +2,11 @@ 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, loadDataSourcePermissions, removeDataSourcePermission } from './state/actions';
 import { DashboardAcl, DataSourcePermission } from 'app/types';
 import { getRouteParamsId } from '../../core/selectors/location';
-import PermissionList from '../../core/components/PermissionList/PermissionList';
 
 export interface Props {
   dataSourcePermissions: DataSourcePermission[];
@@ -87,12 +87,7 @@ export class DataSourcePermissions extends PureComponent<Props, State> {
             onCancel={this.onCancelAddPermission}
           />
         </SlideDown>
-        <PermissionList
+        <DataSourcePermissionsList items={dataSourcePermissions} onRemoveItem={item => this.onRemovePermission(item)} />
-          items={dataSourcePermissions}
-          onRemoveItem={this.onRemovePermission}
-          onPermissionChanged={() => {}}
-          isFetching={false}
-        />
       </div>
     );
   }

public/app/features/datasources/DataSourcePermissionsList.tsx

@@ -0,0 +1,84 @@
+import React, { PureComponent } from 'react';
+import { DataSourcePermission } from '../../types';
+import { dataSourceAclLevels, DataSourcePermissionLevel } from '../../types/acl';
+import DescriptionPicker from '../../core/components/Picker/DescriptionPicker';
+
+interface Props {
+  items: DataSourcePermission[];
+  onRemoveItem: (item) => void;
+}
+
+export class DataSourcePermissionsList extends PureComponent<Props> {
+  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>
+                <td style={{ width: '1%' }}>
+                  <i style={{ width: '25px', height: '25px' }} className="gicon gicon-shield" />
+                </td>
+                <td style={{ width: '90%' }}>
+                  {}
+                  <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>
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default DataSourcePermissionsList;

public/app/types/acl.ts

@@ -78,6 +78,10 @@ export interface AclTargetInfo {
   text: string;
 }
 
+export const dataSourceAclLevels = [
+  { value: DataSourcePermissionLevel.Query, label: 'Query', description: 'Can query data source.' },
+];
+
 export const dashboardAclTargets: AclTargetInfo[] = [
   { value: AclTarget.Team, text: 'Team' },
   { value: AclTarget.User, text: 'User' },