From 7dbda5a9918dda37bc97cbe86de9d41d566928d3 Mon Sep 17 00:00:00 2001
From: Ash Evans <ash.evans@ibm.com>
Date: Wed, 3 Jul 2024 12:15:50 +0100
Subject: [PATCH] first draft of the new description for Knowledge and Skills

Signed-off-by: Ash Evans <ash.evans@ibm.com>
---
 .../Knowledge/KnowledgeDescription.tsx        |  4 +--
 src/components/Contribute/Knowledge/index.tsx | 25 +++++++++----------
 .../Contribute/Skill/SkillDescription.tsx     |  8 +++---
 src/components/Contribute/Skill/index.tsx     | 14 +++++++++++
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/Contribute/Knowledge/KnowledgeDescription.tsx b/src/components/Contribute/Knowledge/KnowledgeDescription.tsx
index e7cd8054..466c6477 100644
--- a/src/components/Contribute/Knowledge/KnowledgeDescription.tsx
+++ b/src/components/Contribute/Knowledge/KnowledgeDescription.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
 
-const KnowledgeDescription = () => {
+const KnowledgeDescription: React.FunctionComponent = () => {
   return (
     <div>
       <p>
diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx
index 7236459b..7c25ffa6 100644
--- a/src/components/Contribute/Knowledge/index.tsx
+++ b/src/components/Contribute/Knowledge/index.tsx
@@ -18,6 +18,7 @@ import { useSession } from 'next-auth/react';
 import YamlCodeModal from '../../YamlCodeModal';
 import { UploadFile } from './UploadFile';
 import { SchemaVersion } from '@/types';
+import KnowledgeDescription from './KnowledgeDescription';
 
 export const KnowledgeForm: React.FunctionComponent = () => {
   const { data: session } = useSession();
@@ -420,19 +421,17 @@ Creator names: ${creators}
         </Button>
       </div>
 
-      <div>
-        <p>
-          Knowledge in InstructLab is represented by question and answer pairs that involve facts, data, or references. This knowledge is represented
-          in the taxonomy tree and each node of this tree contains a qna.yaml file.
-        </p>
-        <div>
-          <a href="https://github.com/instructlab/taxonomy/blob/main/README.md#getting-started-with-knowledge-contributions" target="_blank">
-            <Button variant="plain" aria-label="Learn more about what InstructLab Knowledge is">
-              Learn More
-            </Button>
-          </a>
-        </div>
-      </div>
+      <FormFieldGroupExpandable
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Knowledge Description', id: 'knowledge-description' }}
+            titleDescription="What is InstructLab Knowledge?"
+          />
+        }
+      >
+        <KnowledgeDescription />
+      </FormFieldGroupExpandable>
 
       <FormFieldGroupExpandable
         isExpanded
diff --git a/src/components/Contribute/Skill/SkillDescription.tsx b/src/components/Contribute/Skill/SkillDescription.tsx
index 2ab4cb81..ec872d8b 100644
--- a/src/components/Contribute/Skill/SkillDescription.tsx
+++ b/src/components/Contribute/Skill/SkillDescription.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
 
-const SkillDescription = () => {
+const SkillDescription: React.FunctionComponent = () => {
   return (
     <div>
       <p>Skills in InstructLab come in two main types:</p>
       <p>
-        1) Compositional Skills - These are skills that are performative and you are teaching the model how to do tasks like "write me a song" or
-        "summarize an email".
+        1) Compositional Skills - These are skills that are performative and you are teaching the model how to do tasks like &quot;write me a
+        song&quot; or &quot;summarize an email&quot;.
       </p>
       <p>2) Core Skills - Core skills are foudational like math, reasoning and coding.</p>
       <div>
diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx
index 58a0e160..37395950 100644
--- a/src/components/Contribute/Skill/index.tsx
+++ b/src/components/Contribute/Skill/index.tsx
@@ -17,6 +17,7 @@ import { getGitHubUsername } from '../../../utils/github';
 import { useSession } from 'next-auth/react';
 import YamlCodeModal from '../../YamlCodeModal';
 import { SchemaVersion } from '@/types';
+import SkillDescription from './SkillDescription';
 
 export const SkillForm: React.FunctionComponent = () => {
   const { data: session } = useSession();
@@ -342,6 +343,19 @@ export const SkillForm: React.FunctionComponent = () => {
           <CodeIcon /> View YAML
         </Button>
       </div>
+
+      <FormFieldGroupExpandable
+        toggleAriaLabel="Details"
+        header={
+          <FormFieldGroupHeader
+            titleText={{ text: 'Skills Description', id: 'skills-description' }}
+            titleDescription="What are InstructLab Skills?"
+          />
+        }
+      >
+        <SkillDescription />
+      </FormFieldGroupExpandable>
+
       <FormFieldGroupExpandable
         isExpanded
         toggleAriaLabel="Details"