modified AddPermissions component

public/app/core/components/PermissionList/AddPermission.tsx

@@ -4,20 +4,27 @@ import { TeamPicker, Team } from 'app/core/components/Picker/TeamPicker';
 import DescriptionPicker, { OptionWithDescription } from 'app/core/components/Picker/DescriptionPicker';
 import { User } from 'app/types';
 import {
-  dashboardPermissionLevels,
-  dashboardAclTargets,
   AclTarget,
   PermissionLevel,
   NewDashboardAclItem,
   OrgRole,
+  DashboardPermissionInfo,
+  AclTargetInfo,
 } from 'app/types/acl';
 
 export interface Props {
   onAddPermission: (item: NewDashboardAclItem) => void;
   onCancel: () => void;
+  showPermissionLevels?: boolean;
+  dashboardPermissionLevels?: DashboardPermissionInfo[];
+  dashboardAclTargets: AclTargetInfo[];
 }
 
 class AddPermissions extends Component<Props, NewDashboardAclItem> {
+  static defaultProps = {
+    showPermissionLevels: true,
+  };
+
   constructor(props) {
     super(props);
     this.state = this.getCleanState();
@@ -78,7 +85,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
   }
 
   render() {
-    const { onCancel } = this.props;
+    const { onCancel, showPermissionLevels, dashboardPermissionLevels, dashboardAclTargets } = this.props;
     const newItem = this.state;
     const pickerClassName = 'width-20';
     const isValid = this.isValid();
@@ -125,15 +132,17 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
               </div>
             ) : null}
 
-            <div className="gf-form">
-              <DescriptionPicker
-                optionsWithDesc={dashboardPermissionLevels}
-                onSelected={this.onPermissionChanged}
-                value={newItem.permission}
-                disabled={false}
-                className={'gf-form-input--form-dropdown-right'}
-              />
-            </div>
+            {showPermissionLevels && (
+              <div className="gf-form">
+                <DescriptionPicker
+                  optionsWithDesc={dashboardPermissionLevels}
+                  onSelected={this.onPermissionChanged}
+                  value={newItem.permission}
+                  disabled={false}
+                  className={'gf-form-input--form-dropdown-right'}
+                />
+              </div>
+            )}
 
             <div className="gf-form">
               <button data-save-permission className="btn btn-success" type="submit" disabled={!isValid}>

public/app/features/dashboard/permissions/DashboardPermissions.tsx

@@ -3,7 +3,13 @@ import { connect } from 'react-redux';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { StoreState, FolderInfo } from 'app/types';
-import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
+import {
+  dashboardAclTargets,
+  dashboardPermissionLevels,
+  DashboardAcl,
+  PermissionLevel,
+  NewDashboardAclItem,
+} from 'app/types/acl';
 import {
   getDashboardPermissions,
   addDashboardPermission,
@@ -81,7 +87,12 @@ export class DashboardPermissions extends PureComponent<Props, State> {
           </div>
         </div>
         <SlideDown in={isAdding}>
-          <AddPermission onAddPermission={this.onAddPermission} onCancel={this.onCancelAddPermission} />
+          <AddPermission
+            dashboardAclTargets={dashboardAclTargets}
+            dashboardPermissionLevels={dashboardPermissionLevels}
+            onAddPermission={this.onAddPermission}
+            onCancel={this.onCancelAddPermission}
+          />
         </SlideDown>
         <PermissionList
           items={permissions}

public/app/features/datasources/DataSourcePermissions.tsx

@@ -1,13 +1,59 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+import SlideDown from '../../core/components/Animations/SlideDown';
+import AddPermissions from '../../core/components/PermissionList/AddPermission';
+import { AclTarget, AclTargetInfo } from 'app/types/acl';
 
 export interface Props {}
 
-export class DataSourcePermissions extends PureComponent<Props> {
+interface State {
+  isAdding: boolean;
+}
+
+export class DataSourcePermissions extends PureComponent<Props, State> {
+  state = {
+    isAdding: false,
+  };
+
+  onOpenAddPermissions = () => {
+    this.setState({
+      isAdding: true,
+    });
+  };
+
+  onAddPermission = () => {};
+
+  onCancelAddPermission = () => {
+    this.setState({
+      isAdding: false,
+    });
+  };
+
   render() {
+    const { isAdding } = this.state;
+
+    const dashboardAclTargets: AclTargetInfo[] = [
+      { value: AclTarget.Team, text: 'Team' },
+      { value: AclTarget.User, text: 'User' },
+    ];
+
     return (
       <div>
-        <h3>Permissions</h3>
+        <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" onClick={this.onOpenAddPermissions} disabled={isAdding}>
+            <i className="fa fa-plus" /> Add Permission
+          </button>
+        </div>
+        <SlideDown in={isAdding}>
+          <AddPermissions
+            dashboardAclTargets={dashboardAclTargets}
+            showPermissionLevels={false}
+            onAddPermission={this.onAddPermission}
+            onCancel={this.onCancelAddPermission}
+          />
+        </SlideDown>
       </div>
     );
   }

public/app/features/folders/FolderPermissions.tsx

@@ -6,7 +6,13 @@ import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import SlideDown from 'app/core/components/Animations/SlideDown';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { NavModel, StoreState, FolderState } from 'app/types';
-import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
+import {
+  dashboardAclTargets,
+  dashboardPermissionLevels,
+  DashboardAcl,
+  PermissionLevel,
+  NewDashboardAclItem,
+} from 'app/types/acl';
 import {
   getFolderByUid,
   getFolderPermissions,
@@ -93,7 +99,12 @@ export class FolderPermissions extends PureComponent<Props, State> {
             </button>
           </div>
           <SlideDown in={isAdding}>
-            <AddPermission onAddPermission={this.onAddPermission} onCancel={this.onCancelAddPermission} />
+            <AddPermission
+              dashboardAclTargets={dashboardAclTargets}
+              dashboardPermissionLevels={dashboardPermissionLevels}
+              onAddPermission={this.onAddPermission}
+              onCancel={this.onCancelAddPermission}
+            />
           </SlideDown>
           <PermissionList
             items={folder.permissions}