dashfolders: adds permission modal to dashboard settings

public/app/containers/ManageDashboards/FolderPermissions.tsx

@@ -53,8 +53,7 @@ export class FolderPermissions extends Component<IContainerProps, any> {
               onClick={this.handleAddPermission}
               disabled={permissions.isAddPermissionsVisible}
             >
-              <i className="fa fa-plus" />
-              Add Permission
+              <i className="fa fa-plus" /> Add Permission
             </button>
           </div>
           <SlideDown in={permissions.isAddPermissionsVisible}>

public/app/core/components/Permissions/DashboardPermissions.tsx

 import React, { Component } from 'react';
+import { observer } from 'mobx-react';
 import { store } from 'app/stores/store';
 import Permissions from 'app/core/components/Permissions/Permissions';
 import Tooltip from 'app/core/components/Tooltip/Tooltip';
 import PermissionsInfo from 'app/core/components/Permissions/PermissionsInfo';
+import AddPermissions from 'app/core/components/Permissions/AddPermissions';
+import SlideDown from 'app/core/components/Animations/SlideDown';
 
 export interface IProps {
   dashboardId: number;
@@ -11,26 +14,44 @@ export interface IProps {
   folderSlug: string;
   backendSrv: any;
 }
-
+@observer
 class DashboardPermissions extends Component<IProps, any> {
   permissions: any;
 
   constructor(props) {
     super(props);
+    this.handleAddPermission = this.handleAddPermission.bind(this);
     this.permissions = store.permissions;
   }
 
+  handleAddPermission() {
+    this.permissions.toggleAddPermissions();
+  }
+
   render() {
     const { dashboardId, folderTitle, folderSlug, folderId, backendSrv } = this.props;
 
     return (
       <div>
         <div className="dashboard-settings__header">
-          <h3 className="d-inline-block">Permissions</h3>
-          <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
-            <i className="gicon gicon-question gicon--has-hover" />
-          </Tooltip>
+          <div className="page-action-bar">
+            <h3 className="d-inline-block">Permissions</h3>
+            <Tooltip className="page-sub-heading-icon" placement="auto" content={PermissionsInfo}>
+              <i className="gicon gicon-question gicon--has-hover" />
+            </Tooltip>
+            <div className="page-action-bar__spacer" />
+            <button
+              className="btn btn-success pull-right"
+              onClick={this.handleAddPermission}
+              disabled={this.permissions.isAddPermissionsVisible}
+            >
+              <i className="fa fa-plus" /> Add Permission
+            </button>
+          </div>
         </div>
+        <SlideDown in={this.permissions.isAddPermissionsVisible}>
+          <AddPermissions permissions={this.permissions} backendSrv={backendSrv} dashboardId={dashboardId} />
+        </SlideDown>
         <Permissions
           permissions={this.permissions}
           isFolder={false}

public/app/core/components/Permissions/Permissions.jest.tsx

-// import React from 'react';
-// import Permissions from './Permissions';
-// import { RootStore } from 'app/stores/RootStore/RootStore';
-// import { backendSrv } from 'test/mocks/common';
-// import { shallow } from 'enzyme';
-
-// describe('Permissions', () => {
-//   let wrapper;
-
-//   beforeAll(() => {
-//     backendSrv.get.mockReturnValue(
-//       Promise.resolve([
-//         { id: 2, dashboardId: 1, role: 'Viewer', permission: 1, permissionName: 'View' },
-//         { id: 3, dashboardId: 1, role: 'Editor', permission: 1, permissionName: 'Edit' },
-//         {
-//           id: 4,
-//           dashboardId: 1,
-//           userId: 2,
-//           userLogin: 'danlimerick',
-//           userEmail: 'dan.limerick@gmail.com',
-//           permission: 4,
-//           permissionName: 'Admin',
-//         },
-//       ])
-//     );
-
-//     backendSrv.post = jest.fn();
-
-//     const store = RootStore.create(
-//       {},
-//       {
-//         backendSrv: backendSrv,
-//       }
-//     );
-
-//     wrapper = shallow(<Permissions backendSrv={backendSrv} isFolder={true} dashboardId={1} {...store} />);
-//     return wrapper.instance().loadStore(1, true);
-//   });
-
-// describe('when permission for a user is added', () => {
-//   it('should save permission to db', () => {
-//     const userItem = {
-//       id: 2,
-//       login: 'user2',
-//     };
-
-//     wrapper
-//       .instance()
-//       .userPicked(userItem)
-//       .then(() => {
-//         expect(backendSrv.post.mock.calls.length).toBe(1);
-//         expect(backendSrv.post.mock.calls[0][0]).toBe('/api/dashboards/id/1/acl');
-//       });
-//   });
-// });
-
-// describe('when permission for team is added', () => {
-//   it('should save permission to db', () => {
-//     const teamItem = {
-//       id: 2,
-//       name: 'ug1',
-//     };
-
-//     wrapper
-//       .instance()
-//       .teamPicked(teamItem)
-//       .then(() => {
-//         expect(backendSrv.post.mock.calls.length).toBe(1);
-//         expect(backendSrv.post.mock.calls[0][0]).toBe('/api/dashboards/id/1/acl');
-//       });
-//   });
-// });
-// });

public/sass/components/_gf-form.scss

@@ -400,7 +400,7 @@ select.gf-form-input ~ .gf-form-help-icon {
 .cta-form {
   position: relative;
   padding: 1rem;
-  background-color: $dark-4;
+  background-color: $empty-list-cta-bg;
   margin-bottom: 1rem;
   border-top: 3px solid $green;
 }