chore(studio): route cleanup, getNavItems

web/packages/studio/src/routes/WorkspaceLayout/WorkspaceSideNav.tsx

@@ -8,25 +8,7 @@ import type {
   NavItem as NavItemData,
 } from '@studio/components/Layouts/NavigationDrawer/types';
 import { isGroup } from '@studio/components/Layouts/NavigationDrawer/utils';
-import {
-  ANONYMIZER_ENABLED,
-  BASE_MODELS_ENABLED,
-  COPILOT_STUDIO_ENABLED,
-  CUSTOMIZER_ENABLED,
-  DASHBOARD_ENABLED,
-  DATA_DESIGNER_ENABLED,
-  DATASETS_ENABLED,
-  DEPLOYMENTS_ENABLED,
-  EVALUATOR_ENABLED,
-  EXPERIMENT_ENABLED,
-  GUARDRAILS_ENABLED,
-  INTAKE_ENABLED,
-  JOBS_ENABLED,
-  MODEL_COMPARE_ENABLED,
-  OPTIMIZER_ENABLED,
-  SAFE_SYNTHESIZER_ENABLED,
-  SETTINGS_ENABLED,
-} from '@studio/constants/environment';
+import { BASE_MODELS_ENABLED } from '@studio/constants/environment';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import { getPluginIcon } from '@studio/plugins/iconMap';
 import {
@@ -36,48 +18,27 @@ import {
   usePluginsLoaded,
 } from '@studio/plugins/PluginContext';
 import { iconColorClass } from '@studio/routes/constants';
-import { getAgentSideNavItems } from '@studio/routes/groups/agentRoutes';
-import {
-  getAgentsListRoute,
-  getWorkspaceAnonymizerRoute,
-  getDataDesignerJobListRoute,
-  getEvaluationResultsRoute,
-  getExperimentRoute,
-  getGuardrailsRoute,
-  getIntakeTracesRoute,
-  getModelCompareRoute,
-  getOptimizerRoute,
-  getWorkspaceBaseModelsRoute,
-  getWorkspaceCustomizationJobListRoute,
-  getWorkspaceDashboardRoute,
-  getWorkspaceFilesetsRoute,
-  getWorkspaceDeploymentsRoute,
-  getWorkspaceJobsRoute,
-  getWorkspaceSafeSynthesizerRoute,
-  getWorkspaceSettingsRoute,
-  getWorkspaceVirtualModelsRoute,
-} from '@studio/routes/utils';
 import {
-  Bot,
-  Boxes,
-  ChartBar,
-  Database,
-  ListChecks,
-  Rocket,
-  Waypoints,
-  LayoutDashboard,
-  Lightbulb,
-  ListTree,
-  CirclePlay,
-  Metronome,
-  FlaskConical,
-  Form,
-  DatabaseCheck,
-  UserPen,
-  ShieldKeyhole,
-  FileStack,
-  Settings,
-} from 'lucide-react';
+  getAgentSideNavItems,
+  getAnonymizerSideNavItems,
+  getCustomizationSideNavItems,
+  getDashboardSideNavItems,
+  getDataDesignerSideNavItems,
+  getDeploymentSideNavItems,
+  getEvaluationSideNavItems,
+  getExperimentSideNavItems,
+  getFilesetSideNavItems,
+  getGuardrailsSideNavItems,
+  getIntakeSideNavItems,
+  getJobSideNavItems,
+  getModelCompareSideNavItems,
+  getOptimizerSideNavItems,
+  getSafeSynthesizerSideNavItems,
+  getSettingsSideNavItems,
+  getVirtualModelsSideNavItems,
+} from '@studio/routes/groups';
+import { getAgentsListRoute, getWorkspaceBaseModelsRoute } from '@studio/routes/utils';
+import { Bot, Boxes, Database } from 'lucide-react';
 import { useMemo } from 'react';
 import { useLocation } from 'react-router';
 
@@ -129,139 +90,19 @@ export const WorkspaceSideNav = ({ collapsed }: { collapsed?: boolean }) => {
   const showAgents = agentsInstalled || !manifestResolved;
 
   const baseItems = useMemo<NavInputItem[]>(() => {
-    const dashboardNav =
-      DASHBOARD_ENABLED || COPILOT_STUDIO_ENABLED
-        ? [
-            {
-              id: 'dashboard',
-              slotIcon: <LayoutDashboard className={iconColorClass} />,
-              slotLabel: 'Dashboard',
-              href: getWorkspaceDashboardRoute(workspace),
-            },
-          ]
-        : [];
-    const customizerNav = CUSTOMIZER_ENABLED
-      ? [
-          {
-            id: 'custom-models',
-            slotIcon: <Metronome className={iconColorClass} />,
-            slotLabel: 'Fine-tune',
-            href: getWorkspaceCustomizationJobListRoute(workspace),
-          },
-        ]
-      : [];
-
-    const evalNav = EVALUATOR_ENABLED
-      ? [
-          {
-            id: 'evaluation-results',
-            slotIcon: <ChartBar className={iconColorClass} />,
-            // Qualified: the rail hoists this out of Models, next to the agent evaluations link.
-            slotLabel: 'Model Evaluations',
-            href: getEvaluationResultsRoute(workspace),
-          },
-        ]
-      : [];
-
-    const tracesNav = INTAKE_ENABLED
-      ? [
-          {
-            id: 'traces',
-            slotIcon: <ListTree className={iconColorClass} />,
-            slotLabel: 'Traces',
-            href: getIntakeTracesRoute(workspace),
-          },
-        ]
-      : [];
-
-    const experimentNav = EXPERIMENT_ENABLED
-      ? [
-          {
-            id: 'experiment',
-            slotIcon: <FlaskConical className={iconColorClass} />,
-            slotLabel: 'Experiments',
-            href: getExperimentRoute(workspace),
-          },
-        ]
-      : [];
-
-    const safeSynthesizerNav = SAFE_SYNTHESIZER_ENABLED
-      ? [
-          {
-            id: 'safeSynthesizer',
-            slotIcon: <DatabaseCheck className={iconColorClass} />,
-            slotLabel: 'Safe Synthesizer',
-            href: getWorkspaceSafeSynthesizerRoute(workspace),
-          },
-        ]
-      : [];
-
-    const dataDesignerNav = DATA_DESIGNER_ENABLED
-      ? [
-          {
-            id: 'data-designer',
-            slotIcon: <Form className={iconColorClass} />,
-            slotLabel: 'Data Designer',
-            href: getDataDesignerJobListRoute(workspace),
-          },
-        ]
-      : [];
-
-    const anonymizerNav = ANONYMIZER_ENABLED
-      ? [
-          {
-            id: 'anonymizer',
-            slotIcon: <UserPen className={iconColorClass} />,
-            slotLabel: 'Anonymizer',
-            href: getWorkspaceAnonymizerRoute(workspace),
-          },
-        ]
-      : [];
-
+    const dashboardNav = getDashboardSideNavItems(workspace);
+    const customizerNav = getCustomizationSideNavItems(workspace);
+    const evalNav = getEvaluationSideNavItems(workspace);
+    const tracesNav = getIntakeSideNavItems(workspace);
+    const experimentNav = getExperimentSideNavItems(workspace);
+    const safeSynthesizerNav = getSafeSynthesizerSideNavItems(workspace);
+    const dataDesignerNav = getDataDesignerSideNavItems(workspace);
+    const anonymizerNav = getAnonymizerSideNavItems(workspace);
     const agentItems = showAgents ? getAgentSideNavItems(workspace) : [];
-
-    const optimizerNav = OPTIMIZER_ENABLED
-      ? [
-          {
-            id: 'optimizer',
-            slotIcon: <Lightbulb className={iconColorClass} />,
-            slotLabel: 'Insights',
-            href: getOptimizerRoute(workspace),
-          },
-        ]
-      : [];
-    const virtualModelsNav = GUARDRAILS_ENABLED
-      ? [
-          {
-            id: 'virtual-models',
-            slotIcon: <Waypoints className={iconColorClass} />,
-            slotLabel: 'Virtual Models',
-            href: getWorkspaceVirtualModelsRoute(workspace),
-          },
-        ]
-      : [];
-
-    const modelCompareNav = MODEL_COMPARE_ENABLED
-      ? [
-          {
-            id: 'playground',
-            slotIcon: <CirclePlay className={iconColorClass} />,
-            slotLabel: 'Playground',
-            href: getModelCompareRoute(workspace),
-          },
-        ]
-      : [];
-
-    const deploymentsNav = DEPLOYMENTS_ENABLED
-      ? [
-          {
-            id: 'deployments',
-            slotIcon: <Rocket className={iconColorClass} />,
-            slotLabel: 'Deployments',
-            href: getWorkspaceDeploymentsRoute(workspace),
-          },
-        ]
-      : [];
+    const optimizerNav = getOptimizerSideNavItems(workspace);
+    const virtualModelsNav = getVirtualModelsSideNavItems(workspace);
+    const modelCompareNav = getModelCompareSideNavItems(workspace);
+    const deploymentsNav = getDeploymentSideNavItems(workspace);
 
     const observabilityItems = [...optimizerNav, ...tracesNav];
 
@@ -315,16 +156,7 @@ export const WorkspaceSideNav = ({ collapsed }: { collapsed?: boolean }) => {
           ]
         : [];
 
-    const governanceItems = GUARDRAILS_ENABLED
-      ? [
-          {
-            id: 'guardrails',
-            slotIcon: <ShieldKeyhole className={iconColorClass} />,
-            slotLabel: 'Guardrails',
-            href: getGuardrailsRoute(workspace),
-          },
-        ]
-      : [];
+    const governanceItems = getGuardrailsSideNavItems(workspace);
 
     return [
       ...dashboardNav,
@@ -343,36 +175,9 @@ export const WorkspaceSideNav = ({ collapsed }: { collapsed?: boolean }) => {
 
   const systemNavGroup = useMemo(() => {
     const systemItems = [
-      ...(JOBS_ENABLED
-        ? [
-            {
-              id: 'jobs',
-              slotIcon: <ListChecks className={iconColorClass} />,
-              slotLabel: 'Jobs',
-              href: getWorkspaceJobsRoute(workspace),
-            },
-          ]
-        : []),
-      ...(DATASETS_ENABLED
-        ? [
-            {
-              id: 'datasets',
-              slotIcon: <FileStack className={iconColorClass} />,
-              slotLabel: 'Filesets',
-              href: getWorkspaceFilesetsRoute(workspace),
-            },
-          ]
-        : []),
-      ...(SETTINGS_ENABLED
-        ? [
-            {
-              id: 'settings',
-              slotIcon: <Settings className={iconColorClass} />,
-              slotLabel: 'Settings',
-              href: getWorkspaceSettingsRoute(workspace),
-            },
-          ]
-        : []),
+      ...getJobSideNavItems(workspace),
+      ...getFilesetSideNavItems(workspace),
+      ...getSettingsSideNavItems(workspace),
     ];
     return systemItems.length > 0 ? [{ group: 'System', items: systemItems }] : [];
   }, [workspace]);

web/packages/studio/src/routes/groups/anonymizerRoutes.tsx

@@ -4,7 +4,9 @@
 import { ErrorPanel } from '@nemo/common/src/components/ErrorPanel';
 import { ANONYMIZER_ENABLED } from '@studio/constants/environment';
 import { ROUTES } from '@studio/constants/routes';
-import { gateAnonymizerRoutes } from '@studio/routes/utils';
+import { iconColorClass } from '@studio/routes/constants';
+import { gateAnonymizerRoutes, getWorkspaceAnonymizerRoute } from '@studio/routes/utils';
+import { UserPen } from 'lucide-react';
 import { lazy, type FC } from 'react';
 import type { RouteObject } from 'react-router';
 
@@ -47,3 +49,15 @@ export const anonymizerRoutes: RouteObject[] = gateAnonymizerRoutes([
     errorElement: <ErrorPanel title="Anonymizer" />,
   },
 ]);
+
+export const getAnonymizerSideNavItems = (workspace: string) =>
+  ANONYMIZER_ENABLED
+    ? [
+        {
+          id: 'anonymizer',
+          slotIcon: <UserPen className={iconColorClass} />,
+          slotLabel: 'Anonymizer',
+          href: getWorkspaceAnonymizerRoute(workspace),
+        },
+      ]
+    : [];

web/packages/studio/src/routes/groups/customizationRoutes.tsx

@@ -2,8 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ErrorPanel } from '@nemo/common/src/components/ErrorPanel';
+import { CUSTOMIZER_ENABLED } from '@studio/constants/environment';
 import { ROUTES } from '@studio/constants/routes';
-import { gateCustomizationRoutes } from '@studio/routes/utils';
+import { iconColorClass } from '@studio/routes/constants';
+import {
+  gateCustomizationRoutes,
+  getWorkspaceCustomizationJobListRoute,
+} from '@studio/routes/utils';
+import { Metronome } from 'lucide-react';
 import { lazy } from 'react';
 import type { RouteObject } from 'react-router';
 
@@ -50,3 +56,15 @@ export const customizationRoutes: RouteObject[] = gateCustomizationRoutes([
     errorElement: <ErrorPanel title="Customizer" />,
   },
 ]);
+
+export const getCustomizationSideNavItems = (workspace: string) =>
+  CUSTOMIZER_ENABLED
+    ? [
+        {
+          id: 'custom-models',
+          slotIcon: <Metronome className={iconColorClass} />,
+          slotLabel: 'Fine-tune',
+          href: getWorkspaceCustomizationJobListRoute(workspace),
+        },
+      ]
+    : [];

web/packages/studio/src/routes/groups/dashboardRoutes.tsx

@@ -2,9 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ErrorPanel } from '@nemo/common/src/components/ErrorPanel';
-import { COPILOT_STUDIO_ENABLED } from '@studio/constants/environment';
+import { COPILOT_STUDIO_ENABLED, DASHBOARD_ENABLED } from '@studio/constants/environment';
 import { ROUTES } from '@studio/constants/routes';
-import { gateCopilotStudioRoutes, gateDashboardRoutes } from '@studio/routes/utils';
+import { iconColorClass } from '@studio/routes/constants';
+import {
+  gateCopilotStudioRoutes,
+  gateDashboardRoutes,
+  getWorkspaceDashboardRoute,
+} from '@studio/routes/utils';
+import { LayoutDashboard } from 'lucide-react';
 import { lazy } from 'react';
 import type { RouteObject } from 'react-router';
 
@@ -38,3 +44,15 @@ export const dashboardRoutes: RouteObject[] = gateDashboardRoutes([
     },
   ]),
 ]);
+
+export const getDashboardSideNavItems = (workspace: string) =>
+  DASHBOARD_ENABLED || COPILOT_STUDIO_ENABLED
+    ? [
+        {
+          id: 'dashboard',
+          slotIcon: <LayoutDashboard className={iconColorClass} />,
+          slotLabel: 'Dashboard',
+          href: getWorkspaceDashboardRoute(workspace),
+        },
+      ]
+    : [];