NestedFolders: Use new Browse Dashboards UI behind feature flag (#67416)

NestedFolders: Put feature flagged new Browse Dashboards UI at main route

pkg/api/api.go

@@ -152,12 +152,6 @@ func (hs *HTTPServer) registerRoutes() {
 	r.Get("/dashboards/*", reqSignedIn, hs.Index)
 	r.Get("/goto/:uid", reqSignedIn, hs.redirectFromShortURL, hs.Index)
 
-	// Temporary routes for the work-in-progress new Browse Dashboards views
-	if hs.Features.IsEnabled(featuremgmt.FlagNestedFolders) {
-		r.Get("/nested-dashboards/", reqSignedIn, hs.Index)
-		r.Get("/nested-dashboards/*", reqSignedIn, hs.Index)
-	}
-
 	if hs.Features.IsEnabled(featuremgmt.FlagPublicDashboards) {
 		// list public dashboards
 		r.Get("/public-dashboards/list", reqSignedIn, hs.Index)

public/app/features/browse-dashboards/components/NameCell.tsx

@@ -45,12 +45,13 @@ export function NameCell({ row: { original: data }, onFolderClick }: NameCellPro
         <span className={styles.folderButtonSpacer} />
       )}
 
-      <Link
-        href={item.kind === 'folder' ? `/nested-dashboards/f/${item.uid}` : `/d/${item.uid}`}
-        className={styles.link}
-      >
-        {item.title}
-      </Link>
+      {item.url ? (
+        <Link href={item.url} className={styles.link}>
+          {item.title}
+        </Link>
+      ) : (
+        item.title
+      )}
     </>
   );
 }

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

@@ -4,11 +4,11 @@ import { useAsync } from 'react-use';
 
 import { locationUtil, NavModelItem } from '@grafana/data';
 import { config, locationService } from '@grafana/runtime';
-import { Badge, Link, Tooltip } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
+import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import NewBrowseDashboardsPage from 'app/features/browse-dashboards/BrowseDashboardsPage';
 import { FolderDTO } from 'app/types';
 
-import { GrafanaRouteComponentProps } from '../../../core/navigation/types';
 import { loadFolderPage } from '../loaders';
 
 import ManageDashboardsNew from './ManageDashboardsNew';
@@ -20,7 +20,16 @@ export interface DashboardListPageRouteParams {
 
 interface Props extends GrafanaRouteComponentProps<DashboardListPageRouteParams> {}
 
-export const DashboardListPage = memo(({ match, location }: Props) => {
+export const DashboardListPageFeatureToggle = memo((props: Props) => {
+  if (config.featureToggles.nestedFolders) {
+    return <NewBrowseDashboardsPage {...props} />;
+  }
+
+  return <DashboardListPage {...props} />;
+});
+DashboardListPageFeatureToggle.displayName = 'DashboardListPageFeatureToggle';
+
+const DashboardListPage = memo(({ match, location }: Props) => {
   const { loading, value } = useAsync<() => Promise<{ folder?: FolderDTO; pageNav?: NavModelItem }>>(() => {
     const uid = match.params.uid;
     const url = location.pathname;
@@ -41,21 +50,7 @@ export const DashboardListPage = memo(({ match, location }: Props) => {
   }, [match.params.uid]);
 
   return (
-    <Page
-      navId="dashboards/browse"
-      pageNav={value?.pageNav}
-      actions={
-        config.featureToggles.nestedFolders && (
-          <Link href="/nested-dashboards">
-            <Tooltip content="New Browse Dashboards for nested folders is still under development and may be missing features">
-              <span>
-                <Badge icon="folder" color="blue" text="Preview new Browse Dashboards" />
-              </span>
-            </Tooltip>
-          </Link>
-        )
-      }
-    >
+    <Page navId="dashboards/browse" pageNav={value?.pageNav}>
       <Page.Contents
         isLoading={loading}
         className={css`
@@ -72,4 +67,4 @@ export const DashboardListPage = memo(({ match, location }: Props) => {
 
 DashboardListPage.displayName = 'DashboardListPage';
 
-export default DashboardListPage;
+export default DashboardListPageFeatureToggle;

public/app/routes/routes.tsx

@@ -140,9 +140,6 @@ export function getAppRoutes(): RouteDescriptor[] {
             )
       ),
     },
-
-    ...(config.featureToggles.nestedFolders ? getNestedFoldersRoutes() : []),
-
     {
       path: '/dashboards',
       component: SafeDynamicImport(
@@ -567,22 +564,3 @@ export function getDynamicDashboardRoutes(cfg = config): RouteDescriptor[] {
     },
   ];
 }
-
-function getNestedFoldersRoutes(): RouteDescriptor[] {
-  return [
-    {
-      path: '/nested-dashboards',
-      component: SafeDynamicImport(() => import('app/features/browse-dashboards/BrowseDashboardsPage')),
-    },
-
-    {
-      path: '/nested-dashboards/f/:uid',
-      component: SafeDynamicImport(() => import('app/features/browse-dashboards/BrowseDashboardsPage')),
-    },
-
-    {
-      path: '/nested-dashboards/f/:uid/:slug',
-      component: SafeDynamicImport(() => import('app/features/browse-dashboards/BrowseDashboardsPage')),
-    },
-  ];
-}