Search: Load folder page (#23768)

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

@@ -7,7 +7,7 @@ import { StoreState } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParams } from 'app/core/selectors/location';
 import Page from 'app/core/components/Page/Page';
-import { backendSrv } from 'app/core/services/backend_srv';
+import { loadFolderPage } from '../loaders';
 import { ManageDashboards } from './ManageDashboards';
 
 interface Props {
@@ -17,25 +17,24 @@ interface Props {
 
 export const DashboardListPage: FC<Props> = memo(({ navModel, uid }) => {
   const { loading, value } = useAsync(() => {
-    if (uid) {
-      return backendSrv.getFolderByUid(uid).then((folder: any) => {
-        const url = locationUtil.stripBaseFromUrl(folder.url);
+    if (!uid) {
+      return Promise.resolve({ pageNavModel: navModel });
+    }
+    return loadFolderPage(uid, 'manage-folder-dashboards').then(({ folder, model }) => {
+      const url = locationUtil.stripBaseFromUrl(folder.url);
 
-        if (url !== location.pathname) {
-          getLocationSrv().update({ path: url });
-        }
+      if (url !== location.pathname) {
+        getLocationSrv().update({ path: url });
+      }
 
-        return folder.id;
-      });
-    } else {
-      return Promise.resolve(undefined);
-    }
+      return { id: folder.id, pageNavModel: { ...navModel, ...model } };
+    });
   }, [uid]);
 
   return (
-    <Page navModel={navModel}>
+    <Page navModel={value?.pageNavModel}>
       <Page.Contents isLoading={loading}>
-        <ManageDashboards folderUid={uid} folderId={value} />
+        <ManageDashboards folderUid={uid} folderId={value?.id} />
       </Page.Contents>
     </Page>
   );

public/app/features/search/loaders.ts

+import { backendSrv } from 'app/core/services/backend_srv';
+
+export const loadFolderPage = (uid: string, activeChildId: string) => {
+  const navModel = {
+    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',
+        },
+      ],
+    },
+  };
+
+  return backendSrv.getFolderByUid(uid).then((folder: any) => {
+    const folderTitle = folder.title;
+    const folderUrl = folder.url;
+    navModel.main.text = folderTitle;
+
+    const dashTab = navModel.main.children.find((child: any) => child.id === 'manage-folder-dashboards');
+    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 };
+  });
+};