Update top level IA using current contribution wizards

jeff-phillips-18 · jeff-phillips-18 · commit c02d480dc163 · 2025-04-30T09:32:54.000-04:00
Signed-off-by: Jeffrey Phillips &lt;jephilli@redhat.com&gt;
diff --git a/src/app/api/envConfig/route.ts b/src/app/api/envConfig/route.ts
@@ -17,7 +17,6 @@ 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_DOCUMENT_MANAGEMENT: process.env.IL_ENABLE_DOCUMENT_MANAGEMENT || '',
     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 || '',
diff --git a/src/app/contribute/knowledge/github/[...slug]/page.tsx b/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';
diff --git a/src/app/contribute/knowledge/native/[...slug]/page.tsx b/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;
diff --git a/src/app/contribute/skill/github/[...slug]/page.tsx b/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;
diff --git a/src/app/contribute/skill/native/[...slug]/page.tsx b/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;
diff --git a/src/app/dashboard/knowledge/github/[...slug]/page.tsx b/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;
diff --git a/src/app/dashboard/knowledge/native/[...slug]/page.tsx b/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';
diff --git a/src/app/dashboard/skill/github/[...slug]/page.tsx b/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';
diff --git a/src/app/dashboard/skill/native/[...slug]/page.tsx b/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';
diff --git a/src/app/page.tsx b/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>
   );
 };
diff --git a/src/app/playground/chat/page.tsx b/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
diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
@@ -48,7 +48,8 @@ type Route = {
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className }) => {
   const { data: session, status } = useSession();
   const {
-    featureFlags: { experimentalFeaturesEnabled }
+    loaded,
+    featureFlags: { skillFeaturesEnabled, playgroundFeaturesEnabled, experimentalFeaturesEnabled }
   } = useFeatureFlags();
 
   const router = useRouter();
@@ -61,7 +62,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
     }
   }, [session, status, pathname, router]);
 
-  if (status === 'loading') {
+  if (!loaded || status === 'loading') {
     return (
       <Bullseye>
         <Spinner />
@@ -73,34 +74,34 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
     return null; // Return nothing if not authenticated to avoid flicker
   }
 
-  //const isExperimentalEnabled = process.env.NEXT_PUBLIC_EXPERIMENTAL_FEATURES === 'true';
-
   const routes = [
     { path: '/dashboard', label: 'Dashboard' },
-    {
-      path: '/contribute',
-      label: 'Contribute',
-      children: [
-        { path: '/contribute/skill', label: 'Skill' },
-        { path: '/contribute/knowledge', label: 'Knowledge' }
-      ]
-    },
-    {
-      path: '/playground',
-      label: 'Playground',
-      children: [
-        { path: '/playground/chat', label: 'Chat' },
-        { path: '/playground/endpoints', label: 'Custom model endpoints' }
-      ]
-    },
-    experimentalFeaturesEnabled && {
-      path: '/experimental',
-      label: 'Experimental features',
-      children: [
-        { path: '/experimental/fine-tune/', label: 'Fine-tuning' },
-        { path: '/experimental/chat-eval/', label: 'Model chat eval' }
-      ]
-    }
+    { path: '/contribute/knowledge', label: 'Contribute knowledge' },
+    ...(skillFeaturesEnabled ? [{ path: '/contribute/skill', label: 'Contribute skills' }] : []),
+    ...(playgroundFeaturesEnabled
+      ? [
+          {
+            path: '/playground',
+            label: 'Playground',
+            children: [
+              { path: '/playground/chat', label: 'Chat with a model' },
+              { path: '/playground/endpoints', label: 'Custom model endpoints' }
+            ]
+          }
+        ]
+      : []),
+    ...(experimentalFeaturesEnabled
+      ? [
+          {
+            path: '/experimental',
+            label: 'Experimental features',
+            children: [
+              { path: '/experimental/fine-tune/', label: 'Fine-tuning' },
+              { path: '/experimental/chat-eval/', label: 'Model chat eval' }
+            ]
+          }
+        ]
+      : [])
   ].filter(Boolean) as Route[];
 
   const Header = (
@@ -138,7 +139,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
   );
 
   const renderNavItem = (route: Route, index: number) => (
-    <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`} isActive={route.path === pathname}>
+    <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`} isActive={pathname.startsWith(route.path)}>
       <Link href={route.path}>{route.label}</Link>
     </NavItem>
   );
@@ -147,7 +148,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
     <NavExpandable
       key={`${route.label}-${index}`}
       title={route.label}
-      isActive={route.path === pathname || route.children?.some((child) => child.path === pathname)}
+      isActive={route.path.startsWith(pathname) || route.children?.some((child) => pathname.startsWith(child.path))}
       isExpanded
     >
       {route.children?.map((child, idx) => renderNavItem(child, idx))}
diff --git a/src/components/Contribute/AutoFill.ts b/src/components/Contribute/AutoFill.ts
@@ -353,7 +353,7 @@ const skillsSeedExamples: SkillSeedExample[] = [
 ];
 
 export const autoFillSkillsFields: SkillFormData = {
-  branchName: `knowledge-contribution-${Date.now()}`,
+  branchName: `skill-contribution-${Date.now()}`,
   email: 'helloworld@instructlab.com',
   name: 'juliadenham',
   submissionSummary: 'Teaching a model to rhyme.',
diff --git a/src/components/Contribute/ContributionWizard/ContributionWizard.tsx b/src/components/Contribute/ContributionWizard/ContributionWizard.tsx
@@ -2,23 +2,10 @@
 'use client';
 import React from 'react';
 import { useSession } from 'next-auth/react';
+import { Button, Content, Flex, FlexItem, PageGroup, PageSection, Title, Wizard, WizardStep } from '@patternfly/react-core';
 import { ContributionFormData, EditFormData } from '@/types';
 import { useRouter } from 'next/navigation';
 import { autoFillKnowledgeFields, autoFillSkillsFields } from '@/components/Contribute/AutoFill';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  Content,
-  Flex,
-  FlexItem,
-  PageBreadcrumb,
-  PageGroup,
-  PageSection,
-  Title,
-  Wizard,
-  WizardStep
-} from '@patternfly/react-core';
 import { getGitHubUserInfo } from '@/utils/github';
 import ContributionWizardFooter from '@/components/Contribute/ContributionWizard/ContributionWizardFooter';
 import { deleteDraftData } from '@/components/Contribute/Utils/autoSaveUtils';
@@ -48,6 +35,7 @@ export interface StepType {
 export interface Props {
   title: React.ReactNode;
   description: React.ReactNode;
+  breadcrumbs?: React.ReactNode;
   editFormData?: EditFormData;
   formData: ContributionFormData;
   setFormData: React.Dispatch<React.SetStateAction<ContributionFormData>>;
@@ -61,6 +49,7 @@ export interface Props {
 export const ContributionWizard: React.FunctionComponent<Props> = ({
   title,
   description,
+  breadcrumbs = null,
   editFormData,
   formData,
   setFormData,
@@ -150,12 +139,7 @@ export const ContributionWizard: React.FunctionComponent<Props> = ({
 
   return (
     <PageGroup isFilled style={{ overflowY: 'hidden', flex: 1 }}>
-      <PageBreadcrumb stickyOnBreakpoint={{ default: 'top' }}>
-        <Breadcrumb>
-          <BreadcrumbItem to="/">Contribute</BreadcrumbItem>
-          <BreadcrumbItem isActive>{title}</BreadcrumbItem>
-        </Breadcrumb>
-      </PageBreadcrumb>
+      {breadcrumbs}
       <PageSection className="knowledge-form" style={{ overflowY: 'hidden' }}>
         <Flex direction={{ default: 'column' }}>
           <FlexItem>
diff --git a/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx b/src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx
@@ -7,7 +7,7 @@ import DocumentInformation from '@/components/Contribute/Knowledge/DocumentInfor
 import KnowledgeSeedExamples from '@/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExamples';
 import { ContributionFormData, KnowledgeEditFormData, KnowledgeFormData, KnowledgeSeedExample, KnowledgeYamlData } from '@/types';
 import { useRouter } from 'next/navigation';
-import { Button, ValidatedOptions } from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbItem, Button, PageBreadcrumb, ValidatedOptions } from '@patternfly/react-core';
 import { ActionGroupAlertContent } from '@/components/Contribute/types';
 import { UploadKnowledgeDocuments } from '@/components/Contribute/Utils/documentUtils';
 import {
@@ -336,7 +336,27 @@ export const KnowledgeWizard: React.FunctionComponent<KnowledgeFormProps> = ({ k
   return (
     <>
       <ContributionWizard
-        title={knowledgeEditFormData?.formData ? 'Edit knowledge contribution' : 'Submit knowledge contribution'}
+        breadcrumbs={
+          knowledgeEditFormData ? (
+            <PageBreadcrumb stickyOnBreakpoint={{ default: 'top' }}>
+              <Breadcrumb>
+                <BreadcrumbItem
+                  to="/"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    router.push('/contribute/knowledge');
+                  }}
+                >
+                  Contribute knowledge
+                </BreadcrumbItem>
+                <BreadcrumbItem isActive>{`Edit${knowledgeEditFormData?.isDraft ? ' draft' : ''} knowledge contribution`}</BreadcrumbItem>
+              </Breadcrumb>
+            </PageBreadcrumb>
+          ) : null
+        }
+        title={
+          knowledgeEditFormData?.formData ? `Edit${knowledgeEditFormData?.isDraft ? ' draft' : ''} knowledge contribution` : 'Knowledge contribution'
+        }
         description={
           <>
             Knowledge contributions improve a model’s ability to answer questions accurately. They consist of questions and answers, and documents
diff --git a/src/components/Contribute/Skill/SkillWizard/SkillWizard.tsx b/src/components/Contribute/Skill/SkillWizard/SkillWizard.tsx
diff --git a/src/components/Contribute/Utils/autoSaveUtils.ts b/src/components/Contribute/Utils/autoSaveUtils.ts
diff --git a/src/components/Contribute/Utils/submitUtils.ts b/src/components/Contribute/Utils/submitUtils.ts
diff --git a/src/components/Dashboard/Github/dashboard.tsx b/src/components/Dashboard/Github/dashboard.tsx
diff --git a/src/components/Dashboard/Native/dashboard.tsx b/src/components/Dashboard/Native/dashboard.tsx
diff --git a/src/types/index.ts b/src/types/index.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// src/app/edit-submission/knowledge/github/[...slug]/page.tsx`
	`1`	`+// src/app/contribute/knowledge/github/[...slug]/page.tsx`
`2`	`2`	`import * as React from 'react';`
`3`	`3`	`import { AppLayout } from '@/components/AppLayout';`
`4`	`4`	`import EditKnowledge from '@/components/Contribute/EditKnowledge/github/EditKnowledge';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// src/app/edit-submission/knowledge/native/[...slug]/page.tsx`
	`1`	`+// src/app/dashboard/knowledge/native/[...slug]/page.tsx`
`2`	`2`	`import { AppLayout } from '@/components/AppLayout';`
`3`	`3`	`import EditKnowledgeNative from '@/components/Contribute/EditKnowledge/native/EditKnowledge';`
`4`	`4`	`import * as React from 'react';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// src/app/edit-submission/skill/[id]/page.tsx`
	`1`	`+// src/app/dashboard/skill/[id]/page.tsx`
`2`	`2`	`import * as React from 'react';`
`3`	`3`	`import { AppLayout } from '@/components/AppLayout';`
`4`	`4`	`import EditSkill from '@/components/Contribute/EditSkill/github/EditSkill';`