permissions: fix link to folder from permissions list

Also, closing Add Permissions CTA when DashboardPermissions and
FolderPermissions unmounts.
Fixes #10749"

pkg/api/dashboard.go

@@ -99,7 +99,7 @@ func GetDashboard(c *middleware.Context) Response {
 			return ApiError(500, "Dashboard folder could not be read", err)
 		}
 		meta.FolderTitle = query.Result.Title
-		meta.FolderSlug = query.Result.Slug
+		meta.FolderUrl = query.Result.GetUrl()
 	}
 
 	// make sure db version is in sync with json model version

pkg/api/dtos/dashboard.go

@@ -27,7 +27,7 @@ type DashboardMeta struct {
 	IsFolder    bool      `json:"isFolder"`
 	FolderId    int64     `json:"folderId"`
 	FolderTitle string    `json:"folderTitle"`
-	FolderSlug  string    `json:"folderSlug"`
+	FolderUrl   string    `json:"folderUrl"`
 }
 
 type DashboardFullWithMeta struct {

public/app/containers/ManageDashboards/FolderPermissions.tsx

@@ -17,6 +17,11 @@ export class FolderPermissions extends Component<IContainerProps, any> {
     this.loadStore();
   }
 
+  componentWillUnmount() {
+    const { permissions } = this.props;
+    permissions.hideAddPermissions();
+  }
+
   loadStore() {
     const { nav, folder, view } = this.props;
     return folder.load(view.routeParams.get('uid') as string).then(res => {

public/app/core/angular_wrappers.ts

@@ -20,11 +20,5 @@ export function registerAngularDirectives() {
     ['tagOptions', { watchDepth: 'reference' }],
   ]);
   react2AngularDirective('selectUserPicker', UserPicker, ['backendSrv', 'handlePicked']);
-  react2AngularDirective('dashboardPermissions', DashboardPermissions, [
-    'backendSrv',
-    'dashboardId',
-    'folderTitle',
-    'folderSlug',
-    'folderId',
-  ]);
+  react2AngularDirective('dashboardPermissions', DashboardPermissions, ['backendSrv', 'dashboardId', 'folder']);
 }

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

@@ -6,12 +6,11 @@ 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';
+import { FolderInfo } from './FolderInfo';
 
 export interface IProps {
   dashboardId: number;
-  folderId: number;
-  folderTitle: string;
-  folderSlug: string;
+  folder?: FolderInfo;
   backendSrv: any;
 }
 @observer
@@ -28,8 +27,12 @@ class DashboardPermissions extends Component<IProps, any> {
     this.permissions.toggleAddPermissions();
   }
 
+  componentWillUnmount() {
+    this.permissions.hideAddPermissions();
+  }
+
   render() {
-    const { dashboardId, folderTitle, folderSlug, folderId, backendSrv } = this.props;
+    const { dashboardId, folder, backendSrv } = this.props;
 
     return (
       <div>
@@ -56,7 +59,7 @@ class DashboardPermissions extends Component<IProps, any> {
           permissions={this.permissions}
           isFolder={false}
           dashboardId={dashboardId}
-          folderInfo={{ title: folderTitle, slug: folderSlug, id: folderId }}
+          folderInfo={folder}
           backendSrv={backendSrv}
         />
       </div>

public/app/core/components/Permissions/FolderInfo.ts

@@ -1,5 +1,5 @@
 export interface FolderInfo {
-  title: string;
   id: number;
-  slug: string;
+  title: string;
+  url: string;
 }

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

@@ -30,7 +30,7 @@ export default observer(({ item, removeItem, permissionChanged, itemIndex, folde
           folderInfo && (
             <em className="muted no-wrap">
               Inherited from folder{' '}
-              <a className="text-link" href={`dashboards/folder/${folderInfo.id}/${folderInfo.slug}/permissions`}>
+              <a className="text-link" href={`${folderInfo.url}/permissions`}>
                 {folderInfo.title}
               </a>{' '}
             </em>

public/app/features/dashboard/settings/settings.html

@@ -99,9 +99,7 @@
   <dashboard-permissions ng-if="ctrl.dashboard"
     dashboardId="ctrl.dashboard.id"
     backendSrv="ctrl.backendSrv"
-    folderTitle="ctrl.dashboard.meta.folderTitle"
-    folderSlug="ctrl.dashboard.meta.folderSlug"
-    folderId="ctrl.dashboard.meta.folderId"
+    folder="ctrl.getFolder()"
   />
 </div>
 

public/app/features/dashboard/settings/settings.ts

@@ -197,6 +197,14 @@ export class SettingsCtrl {
     this.dashboard.meta.folderTitle = folder.title;
     this.dashboard.meta.folderSlug = folder.slug;
   }
+
+  getFolder() {
+    return {
+      id: this.dashboard.meta.folderId,
+      title: this.dashboard.meta.folderTitle,
+      url: this.dashboard.meta.folderUrl,
+    };
+  }
 }
 
 export function dashboardSettings() {