Updates to the Dashboard based on UX designs

.env.github.example

@@ -21,3 +21,11 @@ IL_ENABLE_DEV_MODE=false
 # (Optional) Enable document conversion. Any non-markdown file will be converted to markdown file
 # Default: false
 IL_ENABLE_DOC_CONVERSION=false
+
+# (Optional) Enable this option if you want to enable UI features that allow Skills contributions
+# Default: false
+IL_ENABLE_SKILLS_FEATURES=true
+
+# (Optional) Enable this option if you want to enable UI playground features (Chat with a model, Custom model endpoints)
+# Default: false
+IL_ENABLE_PLAYGROUND_FEATURES=true

.env.native.example

@@ -27,3 +27,11 @@ NEXT_PUBLIC_EXPERIMENTAL_FEATURES=false
 # (Optional) Uncomment and point to the URL the api-server is running on. Native mode only and needs
 # to be running on the same host as the UI.
 # NEXT_PUBLIC_API_SERVER=http://localhost:8080
+
+# (Optional) Enable this option if you want to enable UI features that allow Skills contributions
+# Default: false
+IL_ENABLE_SKILLS_FEATURES=true
+
+# (Optional) Enable this option if you want to enable UI playground features (Chat with a model, Custom model endpoints)
+# Default: false
+IL_ENABLE_PLAYGROUND_FEATURES=true

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

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

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

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

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

@@ -1,20 +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/github/EditKnowledge';
+import ViewKnowledgePage from '@/components/Contribute/Knowledge/View/github/ViewKnowledgePage';
 
 type PageProps = {
   params: Promise<{ slug: string[] }>;
 };
 
-const EditKnowledgePage = async ({ params }: PageProps) => {
+const KnowledgeGithubPage = async ({ params }: PageProps) => {
   const resolvedParams = await params;
 
   return (
     <AppLayout className="contribute-page">
-      <EditKnowledge prNumber={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] != null ? true : false} />
+      <ViewKnowledgePage branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] === 'isDraft'} />
     </AppLayout>
   );
 };
 
-export default EditKnowledgePage;
+export default KnowledgeGithubPage;

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

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

src/app/contribute/knowledge/page.tsx

@@ -4,9 +4,8 @@ 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';
+import KnowledgeWizard from '@/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard';
 
 const KnowledgeFormPage: React.FunctionComponent = () => {
   const {
@@ -17,7 +16,7 @@ const KnowledgeFormPage: React.FunctionComponent = () => {
   return (
     <AppLayout className="contribute-page">
       {loaded ? (
-        <>{!isGithubMode ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</>
+        <KnowledgeWizard isGithubMode={isGithubMode} />
       ) : (
         <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
           <Spinner size="xl" />

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

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

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

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

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

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

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

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

src/app/contribute/skill/page.tsx

@@ -4,9 +4,8 @@ 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 { useEnvConfig } from '@/context/EnvConfigContext';
+import SkillWizard from '@/components/Contribute/Skill/SkillWizard/SkillWizard';
 
 const SkillFormPage: React.FunctionComponent = () => {
   const {
@@ -17,11 +16,7 @@ const SkillFormPage: React.FunctionComponent = () => {
   return (
     <AppLayout className="contribute-page">
       {loaded ? (
-        !isGithubMode ? (
-          <SkillFormNative />
-        ) : (
-          <SkillFormGithub />
-        )
+        <SkillWizard isGithubMode={isGithubMode} />
       ) : (
         <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
           <Spinner size="xl" />

src/app/dashboard/page.tsx

@@ -6,8 +6,8 @@ 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 { DashboardGithub } from '@/components/Dashboard/Github/DashboardPage';
+import { DashboardNative } from '@/components/Dashboard/Native/DashboardPage';
 import { useEnvConfig } from '@/context/EnvConfigContext';
 
 const Home: React.FunctionComponent = () => {
@@ -17,7 +17,7 @@ const Home: React.FunctionComponent = () => {
   } = useEnvConfig();
 
   return (
-    <AppLayout>
+    <AppLayout className="dashboard-page">
       {loaded ? (
         !isGithubMode ? (
           <DashboardNative />