Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from May 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 0 additions & 6 deletions pkg/api/api.go
Expand Up @@ -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)
Expand Down
13 changes: 7 additions & 6 deletions public/app/features/browse-dashboards/components/NameCell.tsx
Expand Up @@ -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
)}
</>
);
}
Expand Down
33 changes: 14 additions & 19 deletions public/app/features/search/components/DashboardListPage.tsx
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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`
Expand All @@ -72,4 +67,4 @@ export const DashboardListPage = memo(({ match, location }: Props) => {

DashboardListPage.displayName = 'DashboardListPage';

export default DashboardListPage;
export default DashboardListPageFeatureToggle;
22 changes: 0 additions & 22 deletions public/app/routes/routes.tsx
Expand Up @@ -140,9 +140,6 @@ export function getAppRoutes(): RouteDescriptor[] {
)
),
},

...(config.featureToggles.nestedFolders ? getNestedFoldersRoutes() : []),

{
path: '/dashboards',
component: SafeDynamicImport(
Expand Down Expand Up @@ -568,22 +565,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')),
},
];
}