diff --git a/src/components/shared/Settings/useFlags.ts b/src/components/shared/Settings/useFlags.ts index c55e30a6b..afdcd1747 100644 --- a/src/components/shared/Settings/useFlags.ts +++ b/src/components/shared/Settings/useFlags.ts @@ -7,6 +7,17 @@ import type { BetaFlagsStorage } from "./types"; const storage = getStorage(); +/** + * Non-hook flag check for use outside React (e.g., route beforeLoad). + */ +export function isFlagEnabled(flagName: keyof typeof ExistingFlags): boolean { + return ( + storage.getItem("betaFlags")?.[flagName] ?? + ExistingFlags[flagName]?.default ?? + false + ); +} + export function useFlags() { return { getFlags: () => storage.getItem("betaFlags"), diff --git a/src/flags.ts b/src/flags.ts index e2bff15d4..654be0094 100644 --- a/src/flags.ts +++ b/src/flags.ts @@ -38,4 +38,12 @@ export const ExistingFlags: ConfigFlags = { default: false, category: "beta", }, + + ["dashboard"]: { + name: "Dashboard", + description: + "Enable the new Dashboard page, a redesigned homepage experience.", + default: false, + category: "beta", + }, }; diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx new file mode 100644 index 000000000..aaf8a2a1b --- /dev/null +++ b/src/routes/Dashboard/Dashboard.tsx @@ -0,0 +1,22 @@ +import { BlockStack, InlineStack } from "@/components/ui/layout"; +import { Text } from "@/components/ui/typography"; + +export const Dashboard = () => { + return ( + + + + Dashboard + + + Beta + + + + ); +}; diff --git a/src/routes/router.ts b/src/routes/router.ts index f35469d65..e7a91f528 100644 --- a/src/routes/router.ts +++ b/src/routes/router.ts @@ -13,9 +13,11 @@ import { AuthorizationResultScreen as HuggingFaceAuthorizationResultScreen } fro import { AddSecretView } from "@/components/shared/SecretsManagement/components/AddSecretView"; import { ReplaceSecretView } from "@/components/shared/SecretsManagement/components/ReplaceSecretView"; import { SecretsListView } from "@/components/shared/SecretsManagement/components/SecretsListView"; +import { isFlagEnabled } from "@/components/shared/Settings/useFlags"; import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants"; import RootLayout from "../components/layout/RootLayout"; +import { Dashboard } from "./Dashboard/Dashboard"; import Editor from "./Editor"; import Home from "./Home"; import { ImportPage } from "./Import"; @@ -39,8 +41,10 @@ export const RUNS_BASE_PATH = "/runs"; export const QUICK_START_PATH = "/quick-start"; const SETTINGS_PATH = "/settings"; const IMPORT_PATH = "/app/editor/import-pipeline"; +const DASHBOARD_PATH = "/dashboard"; export const APP_ROUTES = { HOME: "/", + DASHBOARD: DASHBOARD_PATH, QUICK_START: QUICK_START_PATH, IMPORT: IMPORT_PATH, PIPELINE_EDITOR: `${EDITOR_PATH}/$name`, @@ -76,6 +80,17 @@ const indexRoute = createRoute({ component: Home, }); +const dashboardRoute = createRoute({ + getParentRoute: () => mainLayout, + path: APP_ROUTES.DASHBOARD, + component: Dashboard, + beforeLoad: () => { + if (!isFlagEnabled("dashboard")) { + throw redirect({ to: APP_ROUTES.HOME }); + } + }, +}); + const quickStartRoute = createRoute({ getParentRoute: () => mainLayout, path: APP_ROUTES.QUICK_START, @@ -194,6 +209,7 @@ const settingsRouteTree = settingsLayoutRoute.addChildren([ const appRouteTree = mainLayout.addChildren([ indexRoute, + dashboardRoute, quickStartRoute, settingsRouteTree, importRoute,