Folders: Editors should be able to edit name and delete folders (#31242)

* Folders: Editors should be able to edit name and delete folders

* Fixed so that we only build nav model in one place

public/app/features/folders/services/FolderPageLoader.ts

@@ -1,61 +0,0 @@
-import { backendSrv } from 'app/core/services/backend_srv';
-
-export class FolderPageLoader {
-  load(ctrl: any, uid: any, activeChildId: any) {
-    ctrl.navModel = {
-      main: {
-        icon: 'folder',
-        id: 'manage-folder',
-        subTitle: 'Manage folder dashboards & permissions',
-        url: '',
-        text: '',
-        breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
-        children: [
-          {
-            active: activeChildId === 'manage-folder-dashboards',
-            icon: 'apps',
-            id: 'manage-folder-dashboards',
-            text: 'Dashboards',
-            url: 'dashboards',
-          },
-          {
-            active: activeChildId === 'manage-folder-permissions',
-            icon: 'lock',
-            id: 'manage-folder-permissions',
-            text: 'Permissions',
-            url: 'dashboards/permissions',
-          },
-          {
-            active: activeChildId === 'manage-folder-settings',
-            icon: 'cog',
-            id: 'manage-folder-settings',
-            text: 'Settings',
-            url: 'dashboards/settings',
-          },
-        ],
-      },
-    };
-
-    return backendSrv.getFolderByUid(uid).then((folder: any) => {
-      ctrl.folderId = folder.id;
-      const folderTitle = folder.title;
-      const folderUrl = folder.url;
-      ctrl.navModel.main.text = folderTitle;
-
-      const dashTab = ctrl.navModel.main.children.find((child: any) => child.id === 'manage-folder-dashboards');
-      dashTab.url = folderUrl;
-
-      if (folder.canAdmin) {
-        const permTab = ctrl.navModel.main.children.find((child: any) => child.id === 'manage-folder-permissions');
-        permTab.url = folderUrl + '/permissions';
-
-        const settingsTab = ctrl.navModel.main.children.find((child: any) => child.id === 'manage-folder-settings');
-        settingsTab.url = folderUrl + '/settings';
-      } else {
-        ctrl.navModel.main.children = [dashTab];
-      }
-
-      return folder;
-    });
-  }
-}

public/app/features/folders/state/navModel.ts

@@ -2,7 +2,7 @@ import { FolderDTO } from 'app/types';
 import { NavModelItem, NavModel } from '@grafana/data';
 
 export function buildNavModel(folder: FolderDTO): NavModelItem {
-  return {
+  const model = {
     icon: 'folder',
     id: 'manage-folder',
     subTitle: 'Manage folder dashboards & permissions',
@@ -17,22 +17,30 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
         text: 'Dashboards',
         url: folder.url,
       },
-      {
-        active: false,
-        icon: 'lock',
-        id: `folder-permissions-${folder.uid}`,
-        text: 'Permissions',
-        url: `${folder.url}/permissions`,
-      },
-      {
-        active: false,
-        icon: 'cog',
-        id: `folder-settings-${folder.uid}`,
-        text: 'Settings',
-        url: `${folder.url}/settings`,
-      },
     ],
   };
+
+  if (folder.canAdmin) {
+    model.children.push({
+      active: false,
+      icon: 'lock',
+      id: `folder-permissions-${folder.uid}`,
+      text: 'Permissions',
+      url: `${folder.url}/permissions`,
+    });
+  }
+
+  if (folder.canSave) {
+    model.children.push({
+      active: false,
+      icon: 'cog',
+      id: `folder-settings-${folder.uid}`,
+      text: 'Settings',
+      url: `${folder.url}/settings`,
+    });
+  }
+
+  return model;
 }
 
 export function getLoadingNav(tabIndex: number): NavModel {
@@ -41,9 +49,9 @@ export function getLoadingNav(tabIndex: number): NavModel {
     uid: 'loading',
     title: 'Loading',
     url: 'url',
-    canSave: false,
+    canSave: true,
-    canEdit: false,
+    canEdit: true,
-    canAdmin: false,
+    canAdmin: true,
     version: 0,
   });
 

public/app/features/search/components/DashboardListPage.tsx

@@ -22,14 +22,14 @@ export const DashboardListPage: FC<Props> = memo(({ navModel, uid, url }) => {
       return Promise.resolve({ pageNavModel: navModel });
     }
 
-    return loadFolderPage(uid!, 'manage-folder-dashboards').then(({ folder, model }) => {
+    return loadFolderPage(uid!).then(({ folder, folderNav }) => {
       const path = locationUtil.stripBaseFromUrl(folder.url);
 
       if (path !== location.pathname) {
         getLocationSrv().update({ path });
       }
 
-      return { folder, pageNavModel: { ...navModel, ...model } };
+      return { folder, pageNavModel: { ...navModel, main: folderNav } };
     });
   }, [uid]);
 
@@ -41,6 +41,7 @@ export const DashboardListPage: FC<Props> = memo(({ navModel, uid, url }) => {
     </Page>
   );
 });
+
 DashboardListPage.displayName = 'DashboardListPage';
 
 const mapStateToProps: MapStateToProps<Props, {}, StoreState> = (state) => {

public/app/features/search/loaders.ts

@@ -1,59 +1,11 @@
 import { backendSrv } from 'app/core/services/backend_srv';
-import { NavModel } from '@grafana/data';
+import { buildNavModel } from '../folders/state/navModel';
-
-export const loadFolderPage = (uid: string, activeChildId: string) => {
-  const navModel: Pick<NavModel, 'main'> = {
-    main: {
-      icon: 'folder-open',
-      id: 'manage-folder',
-      subTitle: 'Manage folder dashboards & permissions',
-      url: '',
-      text: '',
-      breadcrumbs: [{ title: 'Dashboards', url: 'dashboards' }],
-      children: [
-        {
-          active: activeChildId === 'manage-folder-dashboards',
-          icon: 'th-large',
-          id: 'manage-folder-dashboards',
-          text: 'Dashboards',
-          url: 'dashboards',
-        },
-        {
-          active: activeChildId === 'manage-folder-permissions',
-          icon: 'lock',
-          id: 'manage-folder-permissions',
-          text: 'Permissions',
-          url: 'dashboards/permissions',
-        },
-        {
-          active: activeChildId === 'manage-folder-settings',
-          icon: 'cog',
-          id: 'manage-folder-settings',
-          text: 'Settings',
-          url: 'dashboards/settings',
-        },
-      ],
-    },
-  };
 
+export const loadFolderPage = (uid: string) => {
   return backendSrv.getFolderByUid(uid).then((folder) => {
-    const folderTitle = folder.title;
+    const navModel = buildNavModel(folder);
-    const folderUrl = folder.url;
+    navModel.children![0].active = true;
-    navModel.main.text = folderTitle;
 
-    const dashTab = navModel.main.children!.find((child: any) => child.id === 'manage-folder-dashboards');
+    return { folder, folderNav: navModel };
-    dashTab!.url = folderUrl;
-
-    if (folder.canAdmin) {
-      const permTab = navModel.main.children!.find((child: any) => child.id === 'manage-folder-permissions');
-      permTab!.url = folderUrl + '/permissions';
-
-      const settingsTab = navModel.main.children!.find((child: any) => child.id === 'manage-folder-settings');
-      settingsTab!.url = folderUrl + '/settings';
-    } else {
-      navModel.main.children = [dashTab!];
-    }
-
-    return { folder, model: navModel };
   });
 };