From f23fb740a93ee883528cf54ec8f7b66690b31455 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Tue, 16 Jan 2018 11:28:14 +0100
Subject: [PATCH] dashfolders: Add FolderPermissions container and make sure
 isFolder is passed to PermissionsStore #10275

---
 .../ManageDashboards/FolderPermissions.tsx    | 40 +++++++++++++++++++
 .../components/Permissions/Permissions.tsx    | 17 ++++----
 public/app/routes/routes.ts                   | 13 ++++--
 .../PermissionsStore/PermissionsStore.ts      | 21 ++++++----
 4 files changed, 70 insertions(+), 21 deletions(-)
 create mode 100644 public/app/containers/ManageDashboards/FolderPermissions.tsx

diff --git a/public/app/containers/ManageDashboards/FolderPermissions.tsx b/public/app/containers/ManageDashboards/FolderPermissions.tsx
new file mode 100644
index 00000000000..b5d5129878a
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/public/app/core/components/Permissions/Permissions.tsx b/public/app/core/components/Permissions/Permissions.tsx
index a01cf8d4e2e..462e5195fa7 100644
--- a/public/app/core/components/Permissions/Permissions.tsx
+++ b/public/app/core/components/Permissions/Permissions.tsx
@@ -26,12 +26,11 @@ export interface DashboardAcl {
 }
 
 export interface IProps {
-  error: any;
-  newType: any;
-  aclTypes: any;
-  backendSrv: any;
+  error: string;
+  newType: string;
   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 } = this.props;
-
+    const { dashboardId, permissions, isFolder } = 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}
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 57908bd50cb..be6fd39e511 100644
--- a/public/app/routes/routes.ts
+++ b/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',
-      controller: 'FolderPermissionsCtrl',
-      controllerAs: 'ctrl',
+      template: '<react-container />',
+      resolve: {
+        component: () => FolderPermissions,
+      },
     })
     .when('/dashboards/folder/:folderId/:slug/settings', {
       template: '<react-container />',
diff --git a/public/app/stores/PermissionsStore/PermissionsStore.ts b/public/app/stores/PermissionsStore/PermissionsStore.ts
index 9b0443f63d6..6582601acb4 100644
--- a/public/app/stores/PermissionsStore/PermissionsStore.ts
+++ b/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';