Update the navigation items per UX designs

src/app/api/envConfig/route.ts

@@ -17,6 +17,8 @@ export async function GET() {
     DEPLOYMENT_TYPE: process.env.IL_UI_DEPLOYMENT || '',
     ENABLE_DEV_MODE: process.env.IL_ENABLE_DEV_MODE || 'false',
     ENABLE_DOC_CONVERSION: process.env.IL_ENABLE_DOC_CONVERSION || 'false',
+    ENABLE_SKILLS_FEATURES: process.env.IL_ENABLE_SKILLS_FEATURES || '',
+    ENABLE_PLAYGROUND_FEATURES: process.env.IL_ENABLE_PLAYGROUND_FEATURES || '',
     EXPERIMENTAL_FEATURES: process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES || '',
     TAXONOMY_ROOT_DIR: process.env.NEXT_PUBLIC_TAXONOMY_ROOT_DIR || '',
     TAXONOMY_KNOWLEDGE_DOCUMENT_REPO:

src/app/edit-submission/knowledge/github/[...slug]/page.tsx → src/app/contribute/knowledge/github/[...slug]/page.tsx

@@ -1,4 +1,4 @@
-// src/app/edit-submission/knowledge/github/[...slug]/page.tsx
+// src/app/contribute/knowledge/github/[...slug]/page.tsx
 import * as React from 'react';
 import { AppLayout } from '@/components/AppLayout';
 import EditKnowledge from '@/components/Contribute/EditKnowledge/github/EditKnowledge';

src/app/contribute/knowledge/native/[...slug]/page.tsx

@@ -0,0 +1,20 @@
+// src/app/contribute/knowledge/github/[...slug]/page.tsx
+import * as React from 'react';
+import { AppLayout } from '@/components/AppLayout';
+import EditKnowledge from '@/components/Contribute/EditKnowledge/native/EditKnowledge';
+
+type PageProps = {
+  params: Promise<{ slug: string[] }>;
+};
+
+const EditKnowledgePage = async ({ params }: PageProps) => {
+  const resolvedParams = await params;
+
+  return (
+    <AppLayout className="contribute-page">
+      <EditKnowledge branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] != null ? true : false} />
+    </AppLayout>
+  );
+};
+
+export default EditKnowledgePage;

src/app/contribute/knowledge/page.tsx

@@ -1,39 +1,23 @@
 // src/app/contribute/knowledge/page.tsx
 'use client';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Flex, Spinner } from '@patternfly/react-core';
 import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens';
 import { AppLayout } from '@/components/AppLayout';
 import KnowledgeFormGithub from '@/components/Contribute/Knowledge/Github';
 import KnowledgeFormNative from '@/components/Contribute/Knowledge/Native';
+import { useEnvConfig } from '@/context/EnvConfigContext';
 
 const KnowledgeFormPage: React.FunctionComponent = () => {
-  const [deploymentType, setDeploymentType] = useState<string | undefined>();
-  const [loaded, setLoaded] = useState<boolean>();
-
-  useEffect(() => {
-    let canceled = false;
-
-    const getEnvVariables = async () => {
-      const res = await fetch('/api/envConfig');
-      const envConfig = await res.json();
-      if (!canceled) {
-        setDeploymentType(envConfig.DEPLOYMENT_TYPE);
-        setLoaded(true);
-      }
-    };
-
-    getEnvVariables();
-
-    return () => {
-      canceled = true;
-    };
-  }, []);
+  const {
+    loaded,
+    envConfig: { isGithubMode }
+  } = useEnvConfig();
 
   return (
     <AppLayout className="contribute-page">
       {loaded ? (
-        <>{deploymentType === 'native' ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</>
+        <>{!isGithubMode ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</>
       ) : (
         <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
           <Spinner size="xl" />

src/app/contribute/skill/github/[...slug]/page.tsx

@@ -0,0 +1,20 @@
+// src/app/contribute/knowledge/github/[...slug]/page.tsx
+import * as React from 'react';
+import { AppLayout } from '@/components/AppLayout';
+import EditSkill from '@/components/Contribute/EditSkill/github/EditSkill';
+
+type PageProps = {
+  params: Promise<{ slug: string[] }>;
+};
+
+const EditKnowledgePage = async ({ params }: PageProps) => {
+  const resolvedParams = await params;
+
+  return (
+    <AppLayout className="contribute-page">
+      <EditSkill prNumber={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] != null ? true : false} />
+    </AppLayout>
+  );
+};
+
+export default EditKnowledgePage;

src/app/contribute/skill/native/[...slug]/page.tsx

@@ -0,0 +1,20 @@
+// src/app/contribute/knowledge/github/[...slug]/page.tsx
+import * as React from 'react';
+import { AppLayout } from '@/components/AppLayout';
+import EditSkill from '@/components/Contribute/EditSkill/native/EditSkill';
+
+type PageProps = {
+  params: Promise<{ slug: string[] }>;
+};
+
+const EditKnowledgePage = async ({ params }: PageProps) => {
+  const resolvedParams = await params;
+
+  return (
+    <AppLayout className="contribute-page">
+      <EditSkill branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] != null ? true : false} />
+    </AppLayout>
+  );
+};
+
+export default EditKnowledgePage;

src/app/contribute/skill/page.tsx

@@ -1,38 +1,27 @@
 // src/app/contribute/skill/page.tsx
 'use client';
+import React from 'react';
+import { Flex, Spinner } from '@patternfly/react-core';
+import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens/dist/esm/t_global_spacer_xl';
 import { AppLayout } from '@/components/AppLayout';
 import { SkillFormGithub } from '@/components/Contribute/Skill/Github/index';
 import { SkillFormNative } from '@/components/Contribute/Skill/Native/index';
-import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens';
-import { Flex, Spinner } from '@patternfly/react-core';
-import { useEffect, useState } from 'react';
+import { useEnvConfig } from '@/context/EnvConfigContext';
 
 const SkillFormPage: React.FunctionComponent = () => {
-  const [deploymentType, setDeploymentType] = useState<string | undefined>();
-  const [loaded, setLoaded] = useState<boolean>();
-
-  useEffect(() => {
-    let canceled = false;
-
-    const getEnvVariables = async () => {
-      const res = await fetch('/api/envConfig');
-      const envConfig = await res.json();
-      if (!canceled) {
-        setDeploymentType(envConfig.DEPLOYMENT_TYPE);
-        setLoaded(true);
-      }
-    };
-
-    getEnvVariables();
+  const {
+    loaded,
+    envConfig: { isGithubMode }
+  } = useEnvConfig();
 
-    return () => {
-      canceled = true;
-    };
-  }, []);
   return (
     <AppLayout className="contribute-page">
       {loaded ? (
-        <>{deploymentType === 'native' ? <SkillFormNative /> : <SkillFormGithub />}</>
+        !isGithubMode ? (
+          <SkillFormNative />
+        ) : (
+          <SkillFormGithub />
+        )
       ) : (
         <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
           <Spinner size="xl" />

src/app/dashboard/knowledge/github/[...slug]/page.tsx

@@ -0,0 +1,20 @@
+// src/app/dashboard/knowledge/github/[...slug]/page.tsx
+import * as React from 'react';
+import { AppLayout } from '@/components/AppLayout';
+import EditKnowledge from '@/components/Contribute/EditKnowledge/github/EditKnowledge';
+
+type PageProps = {
+  params: Promise<{ slug: string[] }>;
+};
+
+const EditKnowledgePage = async ({ params }: PageProps) => {
+  const resolvedParams = await params;
+
+  return (
+    <AppLayout className="contribute-page">
+      <EditKnowledge prNumber={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] != null ? true : false} />
+    </AppLayout>
+  );
+};
+
+export default EditKnowledgePage;

src/app/edit-submission/knowledge/native/[...slug]/page.tsx → src/app/dashboard/knowledge/native/[...slug]/page.tsx

@@ -1,4 +1,4 @@
-// src/app/edit-submission/knowledge/native/[...slug]/page.tsx
+// src/app/dashboard/knowledge/native/[...slug]/page.tsx
 import { AppLayout } from '@/components/AppLayout';
 import EditKnowledgeNative from '@/components/Contribute/EditKnowledge/native/EditKnowledge';
 import * as React from 'react';

src/app/dashboard/page.tsx

@@ -1,25 +1,36 @@
 // src/app/dashboard/page.tsx
 'use client';
 
+import React from 'react';
+import { Flex, Spinner } from '@patternfly/react-core';
+import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens/dist/esm/t_global_spacer_xl';
 import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout } from '@/components/AppLayout';
 import { DashboardGithub } from '@/components/Dashboard/Github/dashboard';
 import { DashboardNative } from '@/components/Dashboard/Native/dashboard';
-import { useEffect, useState } from 'react';
+import { useEnvConfig } from '@/context/EnvConfigContext';
 
 const Home: React.FunctionComponent = () => {
-  const [deploymentType, setDeploymentType] = useState<string | undefined>();
+  const {
+    loaded,
+    envConfig: { isGithubMode }
+  } = useEnvConfig();
 
-  useEffect(() => {
-    const getEnvVariables = async () => {
-      const res = await fetch('/api/envConfig');
-      const envConfig = await res.json();
-      setDeploymentType(envConfig.DEPLOYMENT_TYPE);
-    };
-    getEnvVariables();
-  }, []);
-
-  return <AppLayout>{deploymentType === 'native' ? <DashboardNative /> : <DashboardGithub />}</AppLayout>;
+  return (
+    <AppLayout>
+      {loaded ? (
+        !isGithubMode ? (
+          <DashboardNative />
+        ) : (
+          <DashboardGithub />
+        )
+      ) : (
+        <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
+          <Spinner size="xl" />
+        </Flex>
+      )}
+    </AppLayout>
+  );
 };
 
 export default Home;

src/app/edit-submission/skill/github/[...slug]/page.tsx → src/app/dashboard/skill/github/[...slug]/page.tsx

@@ -1,4 +1,4 @@
-// src/app/edit-submission/skill/[id]/page.tsx
+// src/app/dashboard/skill/[id]/page.tsx
 import * as React from 'react';
 import { AppLayout } from '@/components/AppLayout';
 import EditSkill from '@/components/Contribute/EditSkill/github/EditSkill';

src/app/edit-submission/skill/native/[...slug]/page.tsx → src/app/dashboard/skill/native/[...slug]/page.tsx

@@ -1,4 +1,4 @@
-// src/app/edit-submission/skill/[id]/page.tsx
+// src/app/dashboard/skill/[id]/page.tsx
 import * as React from 'react';
 import { AppLayout } from '@/components/AppLayout';
 import EditSkillNative from '@/components/Contribute/EditSkill/native/EditSkill';

src/app/login/page.tsx

@@ -1,41 +1,28 @@
 // src/app/login/page.tsx
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 import NativeLogin from '@/app/login/nativelogin';
 import GithubLogin from '@/app/login/githublogin';
 import './login-page.css';
+import { useEnvConfig } from '@/context/EnvConfigContext';
 
 const Login: React.FunctionComponent = () => {
-  const [deploymentType, setDeploymentType] = useState<string | 'github'>();
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    const chooseLoginPage = async () => {
-      try {
-        const res = await fetch('/api/envConfig');
-        const envConfig = await res.json();
-        setDeploymentType(envConfig.DEPLOYMENT_TYPE);
-      } catch (error) {
-        console.error('Error fetching environment config:', error);
-        setDeploymentType('github');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    chooseLoginPage();
-  }, []);
+  const {
+    loaded,
+    envConfig: { isGithubMode }
+  } = useEnvConfig();
 
   return (
     <div className="login-page-background">
-      {isLoading ? (
+      {!loaded ? (
         <div className="loading-container">
           <Spinner size="lg" />
           Loading...
         </div>
       ) : (
-        <div className="login-page-container">{deploymentType === 'native' ? <NativeLogin /> : <GithubLogin />}</div>
+        <div className="login-page-container">{!isGithubMode ? <NativeLogin /> : <GithubLogin />}</div>
       )}
     </div>
   );

src/app/page.tsx

@@ -1,23 +1,21 @@
 // src/app/page.tsx
 'use client';
 
-import { DashboardGithub } from '@/components/Dashboard/Github/dashboard';
-import { GithubAccessPopup } from '@/components/GithubAccessPopup';
 import * as React from 'react';
-import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { GithubAccessPopup } from '@/components/GithubAccessPopup';
 import { AppLayout } from '../components/AppLayout';
 
 const HomePage: React.FC = () => {
-  const [isWarningConditionAccepted, setIsWarningConditionAccepted] = useState<boolean>(false);
+  const router = useRouter();
 
-  const handleWarningConditionAccepted = React.useCallback(() => {
-    setIsWarningConditionAccepted(true);
-  }, []);
+  const handleWarningConditionAccepted = () => {
+    router.push('/dashboard');
+  };
 
   return (
     <AppLayout>
       <GithubAccessPopup onAccept={handleWarningConditionAccepted} />
-      {isWarningConditionAccepted && <DashboardGithub />}
     </AppLayout>
   );
 };

src/app/playground/chat/page.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import { useRouter } from 'next/navigation';
-import { Breadcrumb, BreadcrumbItem, Button, PageBreadcrumb, PageSection, Content } from '@patternfly/react-core/';
+import { Button, PageSection, Content } from '@patternfly/react-core/';
 import { t_global_spacer_sm as SmSpacerSize } from '@patternfly/react-tokens';
 import { AppLayout } from '@/components/AppLayout';
 import ModelsContextProvider from '../../../components/Chat/ModelsContext';
@@ -16,14 +16,8 @@ const ChatPage: React.FC = () => {
 
   return (
     <AppLayout className="chatBotPage">
-      <PageBreadcrumb>
-        <Breadcrumb>
-          <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
-          <BreadcrumbItem isActive>Chat</BreadcrumbItem>
-        </Breadcrumb>
-      </PageBreadcrumb>
       <PageSection>
-        <Content component="h1">Chat with a Model</Content>
+        <Content component="h1">Chat with a model</Content>
         <Content style={{ marginBottom: SmSpacerSize.var }}>
           {`Before you start adding new skills and knowledge to your model, you can check its baseline
           performance by chatting with a language model that's hosted on your cloud. Choose a supported model