Dashboard and beta

Author: Mbeaulne

src/components/shared/Settings/useFlags.ts

@@ -7,6 +7,17 @@ import type { BetaFlagsStorage } from "./types";
 
 const storage = getStorage<keyof BetaFlagsStorage, BetaFlagsStorage>();
 
+/**
+ * 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"),

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",
+  },
 };

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 (
+    <BlockStack gap="4" className="container mx-auto w-3/4 p-4">
+      <InlineStack align="space-between" blockAlign="center">
+        <Text as="h1" size="xl" weight="bold">
+          Dashboard
+        </Text>
+        <Text
+          as="span"
+          size="xs"
+          weight="semibold"
+          className="px-2 py-1 rounded-full bg-amber-100 text-amber-800"
+        >
+          Beta
+        </Text>
+      </InlineStack>
+    </BlockStack>
+  );
+};

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,