dashfolders: Add FolderPermissions container and make sure isFolder is passed to PermissionsStore #10275

public/app/containers/ManageDashboards/FolderPermissions.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
+import IContainerProps from 'app/containers/IContainerProps';
+import PageHeader from 'app/core/components/PageHeader/PageHeader';
+import Permissions from 'app/core/components/Permissions/Permissions';
+
+@inject('nav', 'folder', 'view')
+@observer
+export class FolderPermissions extends Component<IContainerProps, any> {
+  dashboard: any;
+
+  constructor(props) {
+    super(props);
+    this.loadStore();
+  }
+
+  loadStore() {
+    const { nav, folder, view } = this.props;
+    return folder.load(view.routeParams.get('slug') as string).then(res => {
+      this.dashboard = res.dashboard;
+      return nav.initFolderNav(toJS(folder.folder), 'manage-folder-permissions');
+    });
+  }
+
+  render() {
+    const { nav, folder } = this.props;
+
+    if (!folder.folder || !nav.main) {
+      return <h2>Loading</h2>;
+    }
+
+    return (
+      <div>
+        <PageHeader model={nav as any} />
+        <Permissions isFolder={true} error="" newType="" dashboardId={1} />
+      </div>
+    );
+  }
+}

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

@@ -26,12 +26,11 @@ export interface DashboardAcl {
 }
 
 export interface IProps {
-  error: any;
+  error: string;
-  newType: any;
+  newType: string;
-  aclTypes: any;
-  backendSrv: any;
   dashboardId: number;
   permissions: any;
+  isFolder: boolean;
 }
 
 class Permissions extends Component<IProps, any> {
@@ -67,14 +66,12 @@ class PermissionsInner extends Component<IProps, any> {
 
   constructor(props) {
     super(props);
-
+    const { dashboardId, permissions, isFolder } = this.props;
-    const { dashboardId, permissions } = this.props;
-
     this.permissionChanged = this.permissionChanged.bind(this);
     this.typeChanged = this.typeChanged.bind(this);
     this.removeItem = this.removeItem.bind(this);
     this.update = this.update.bind(this);
-    permissions.load(dashboardId);
+    permissions.load(dashboardId, isFolder);
 
     this.state = {
       newType: 'Group',
@@ -134,7 +131,7 @@ class PermissionsInner extends Component<IProps, any> {
 
   render() {
     console.log('PermissionsInner render');
-    const { error, aclTypes, permissions } = this.props;
+    const { error, permissions } = this.props;
     const { newType } = this.state;
 
     return (
@@ -153,7 +150,7 @@ class PermissionsInner extends Component<IProps, any> {
               <div className="gf-form">
                 <div className="gf-form-select-wrapper">
                   <select className="gf-form-input gf-size-auto" value={newType} onChange={this.typeChanged}>
-                    {aclTypes.map((option, idx) => {
+                    {this.aclTypes.map((option, idx) => {
                       return (
                         <option key={idx} value={option.value}>
                           {option.text}

public/app/routes/routes.ts

@@ -3,6 +3,7 @@ import './ReactContainer';
 import { ServerStats } from 'app/containers/ServerStats/ServerStats';
 import { AlertRuleList } from 'app/containers/AlertRuleList/AlertRuleList';
 import { FolderSettings } from 'app/containers/ManageDashboards/FolderSettings';
+import { FolderPermissions } from 'app/containers/ManageDashboards/FolderPermissions';
 
 /** @ngInject **/
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -68,10 +69,16 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'CreateFolderCtrl',
       controllerAs: 'ctrl',
     })
+    // .when('/dashboards/folder/:folderId/:slug/permissions', {
+    //   templateUrl: 'public/app/features/dashboard/partials/folder_permissions.html',
+    //   controller: 'FolderPermissionsCtrl',
+    //   controllerAs: 'ctrl',
+    // })
     .when('/dashboards/folder/:folderId/:slug/permissions', {
-      templateUrl: 'public/app/features/dashboard/partials/folder_permissions.html',
+      template: '<react-container />',
-      controller: 'FolderPermissionsCtrl',
+      resolve: {
-      controllerAs: 'ctrl',
+        component: () => FolderPermissions,
+      },
     })
     .when('/dashboards/folder/:folderId/:slug/settings', {
       template: '<react-container />',

public/app/stores/PermissionsStore/PermissionsStore.ts

@@ -6,6 +6,8 @@ const duplicateError = 'This permission exists already.';
 export const PermissionsStore = types
   .model('PermissionsStore', {
     fetching: types.boolean,
+    isFolder: types.maybe(types.boolean),
+    dashboardId: types.maybe(types.number),
     canUpdate: types.boolean,
     items: types.optional(types.array(PermissionsStoreItem), []),
     originalItems: types.optional(types.array(PermissionsStoreItem), []),
@@ -25,21 +27,23 @@ export const PermissionsStore = types
     },
   }))
   .actions(self => ({
-    load: flow(function* load(dashboardId: number) {
+    load: flow(function* load(dashboardId: number, isFolder: boolean) {
       const backendSrv = getEnv(self).backendSrv;
       self.fetching = true;
+      self.isFolder = isFolder;
+      self.dashboardId = dashboardId;
       const res = yield backendSrv.get(`/api/dashboards/id/${dashboardId}/acl`);
-      const items = prepareServerResponse(res, dashboardId);
+      const items = prepareServerResponse(res, dashboardId, isFolder);
       self.items = items;
       self.originalItems = items;
       self.fetching = false;
     }),
-    addStoreItem: (item, dashboardId: number) => {
+    addStoreItem: item => {
       if (!self.isValid(item)) {
         return;
       }
 
-      self.items.push(prepareItem(item, dashboardId));
+      self.items.push(prepareItem(item, self.dashboardId, self.isFolder));
       self.canUpdate = true;
     },
     removeStoreItem: idx => {
@@ -84,16 +88,17 @@ export const PermissionsStore = types
     }),
   }));
 
-const prepareServerResponse = (response, dashboardId: number) => {
+const prepareServerResponse = (response, dashboardId: number, isFolder: boolean) => {
   return response.map(item => {
-    return prepareItem(item, dashboardId);
+    return prepareItem(item, dashboardId, isFolder);
   });
 };
 
-const prepareItem = (item, dashboardId: number) => {
+const prepareItem = (item, dashboardId: number, isFolder: boolean) => {
   // TODO: this.meta
   // item.inherited = !this.meta.isFolder && this.dashboardId !== item.dashboardId;
-  item.inherited = dashboardId !== item.dashboardId;
+  item.inherited = !isFolder && dashboardId !== item.dashboardId;
+  // item.inherited = dashboardId !== item.dashboardId;
   item.sortRank = 0;
   if (item.userId > 0) {
     item.icon = 'fa fa-fw fa-user';