From ebb1f8693bd531dd2123ae51d7d25a346f1e5eeb Mon Sep 17 00:00:00 2001
From: Brent Salisbury <bsalisbu@redhat.com>
Date: Tue, 29 Oct 2024 15:06:19 -0400
Subject: [PATCH] Add a flag to allow for dynamic loading of experimental
 features

Changing the .env `NEXT_PUBLIC_EXPERIMENTAL_FEATURES` will load
or unloed the "Experimental Features" menu item from the sidebar.

Signed-off-by: Brent Salisbury <bsalisbu@redhat.com>
---
 .env.example                 |  1 +
 src/components/AppLayout.tsx | 35 +++++++++++++++++++++++------------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/.env.example b/.env.example
index fb4e23cd..9ad509e3 100644
--- a/.env.example
+++ b/.env.example
@@ -18,3 +18,4 @@ TAXONOMY_DOCUMENTS_REPO=github.com/instructlab-public/taxonomy-knowledge-docs
 NEXT_PUBLIC_AUTHENTICATION_ORG=<AUTHENTICATION_ORG>
 NEXT_PUBLIC_TAXONOMY_REPO_OWNER=<GITHUB_ACCOUNT>
 NEXT_PUBLIC_TAXONOMY_REPO=<REPO_NAME>
+NEXT_PUBLIC_EXPERIMENTAL_FEATURES=false
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 854f195c..0999861c 100644
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@@ -32,6 +32,12 @@ interface IAppLayout {
   children: React.ReactNode;
 }
 
+type Route = {
+  path: string;
+  label: string;
+  children?: Route[];
+};
+
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const { theme } = useTheme();
   const { data: session, status } = useSession();
@@ -53,6 +59,14 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     return null; // Return nothing if not authenticated to avoid flicker
   }
 
+  const isExperimentalEnabled = process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES === 'true';
+
+  // Only log if experimental features are enabled
+  if (isExperimentalEnabled) {
+    console.log('Is Experimental Enabled:', isExperimentalEnabled);
+    console.log('Environment Variable:', process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES);
+  }
+
   const routes = [
     { path: '/dashboard', label: 'Dashboard' },
     {
@@ -70,8 +84,12 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
         { path: '/playground/chat', label: 'Chat' },
         { path: '/playground/endpoints', label: 'Custom Model Endpoints' }
       ]
+    },
+    isExperimentalEnabled && {
+      path: '/experimental',
+      label: 'Experimental Features'
     }
-  ];
+  ].filter(Boolean) as Route[];
 
   const Header = (
     <Masthead>
@@ -95,27 +113,20 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     </Masthead>
   );
 
-  const renderNavItem = (route: { path: string; label: string }, index: number) => (
+  const renderNavItem = (route: Route, index: number) => (
     <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`} isActive={route.path === pathname}>
       <Link href={route.path}>{route.label}</Link>
     </NavItem>
   );
 
-  const renderNavExpandable = (
-    route: {
-      path: string;
-      label: string;
-      children: { path: string; label: string }[];
-    },
-    index: number
-  ) => (
+  const renderNavExpandable = (route: Route, index: number) => (
     <NavExpandable
       key={`${route.label}-${index}`}
       title={route.label}
-      isActive={route.path === pathname || route.children.some((child) => child.path === pathname)}
+      isActive={route.path === pathname || route.children?.some((child) => child.path === pathname)}
       isExpanded
     >
-      {route.children.map((child, idx) => renderNavItem(child, idx))}
+      {route.children?.map((child, idx) => renderNavItem(child, idx))}
     </NavExpandable>
   );