dashfolders: Create nav model for folder page client side #10083

pkg/api/index.go

@@ -118,21 +118,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		Children: dashboardChildNavs,
 	})
 
-	dashboardFolderChildNavs := []*dtos.NavLink{
-		{Text: "Dashboards", Id: "manage-folder-dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-th-large"},
-		{Text: "Permissions", Id: "manage-folder-permissions", Url: setting.AppSubUrl + "/dashboards?1", Icon: "fa fa-fw fa-lock"},
-	}
-
-	data.NavTree = append(data.NavTree, &dtos.NavLink{
-		Text:         "Dashboards",
-		Id:           "manage-folder",
-		SubTitle:     "Manage folder dashboards & permissions",
-		Icon:         "fa fa-folder-open",
-		Url:          setting.AppSubUrl + "/",
-		HideFromMenu: true,
-		Children:     dashboardFolderChildNavs,
-	})
-
 	if c.IsSignedIn {
 		profileNode := &dtos.NavLink{
 			Text:         c.SignedInUser.Name,

public/app/features/dashboard/folder_dashboards_ctrl.ts

@@ -8,9 +8,8 @@ export class FolderDashboardsCtrl {
   constructor(private backendSrv, navModelSrv, private $routeParams) {
     if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) {
       this.folderId = $routeParams.folderId;
-      this.navModel = navModelSrv.getNav('manage-folder', 'manage-folder-dashboards', 0);
 
-      new FolderPageLoader(this.backendSrv, this.$routeParams).load(this.navModel, this.folderId);
+      new FolderPageLoader(this.backendSrv, this.$routeParams).load(this, this.folderId, 'manage-folder-dashboards');
     }
   }
 }

public/app/features/dashboard/folder_page_loader.ts

@@ -3,18 +3,51 @@ import _ from "lodash";
 export class FolderPageLoader {
   constructor(private backendSrv, private $routeParams) { }
 
-  load(navModel, folderId) {
+  load(ctrl, folderId, activeChildId) {
+    ctrl.navModel = {
+      main: {
+        icon: 'fa fa-folder-open',
+        id: 'manage-folder',
+        subTitle: 'Manage folder dashboards & permissions',
+        url: '/fsdfds',
+        text: '',
+        breadcrumbs: [
+          { title: 'Dashboards', uri: '/dashboards' },
+          { title: ' ' },
+        ],
+        children: [
+          {
+            active: activeChildId === 'manage-folder-dashboards',
+            icon: 'fa fa-fw fa-th-large',
+            id: 'manage-folder-dashboards',
+            text: 'Dashboards',
+            url: '/dashboards'
+          },
+          {
+            active: activeChildId === 'manage-folder-permissions',
+            icon: 'fa fa-fw fa-lock',
+            id: 'manage-folder-permissions',
+            text: 'Permissions',
+            url: '/dashboards/permissions'
+          }
+        ]
+      }
+    };
+
     this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => {
       const folderTitle = result.dashboard.title;
-      navModel.main.text = '';
-      navModel.main.breadcrumbs = [
+      ctrl.navModel.main.text = '';
+      ctrl.navModel.main.breadcrumbs = [
         { title: 'Dashboards', uri: '/dashboards' },
         { title: folderTitle }
       ];
+
       const folderUrl = `/dashboards/folder/${folderId}/${result.meta.type}/${result.meta.slug}`;
-      const dashTab = _.find(navModel.main.children, { id: 'manage-folder-dashboards' });
+
+      const dashTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-dashboards' });
       dashTab.url = folderUrl;
-      const permTab = _.find(navModel.main.children, { id: 'manage-folder-permissions' });
+
+      const permTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-permissions' });
       permTab.url = folderUrl + '/permissions';
     });
   }

public/app/features/dashboard/folder_permissions_ctrl.ts

@@ -8,9 +8,8 @@ export class FolderPermissionsCtrl {
   constructor(private backendSrv, navModelSrv, private $routeParams) {
     if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) {
       this.folderId = $routeParams.folderId;
-      this.navModel = navModelSrv.getNav('manage-folder', 'manage-folder-permissions', 0);
 
-      new FolderPageLoader(this.backendSrv, this.$routeParams).load(this.navModel, this.folderId);
+      new FolderPageLoader(this.backendSrv, this.$routeParams).load(this, this.folderId, 'manage-folder-permissions');
     }
   }
 }