Skill form improvements

*.* remove redundant description text from individual seed example
*.* add link to the seed examples documentation page for user help
*.* Rename File path to Taxonomy Directory Path and update the
description.
*.* Taxonomy directory path will only show directories within
compositional_skills directory in taxonomy repo. Taxonomy
repo doesn't allow contribution to foundational_skills at
this point of time.
*.* Update Skill contribution page head text with related links.

Signed-off-by: Anil Vishnoi <vishnoianil@gmail.com>

Author: vishnoianil

pathservice/cmd/pathservice.go

@@ -9,7 +9,6 @@ import (
 	"os"
 	"os/signal"
 	"path/filepath"
-	"strings"
 	"sync"
 	"syscall"
 	"time"
@@ -27,7 +26,7 @@ const (
 	repoDir         = "/tmp/taxonomy"
 	checkInterval   = 1 * time.Minute // Interval for checking updates
 	serviceLogLevel = "IL_UI_DEPLOYMENT"
-	SKILLS          = "skills/"
+	SKILLS          = "compositional_skills/" // Currently, we are only supporting compositional skills
 	KNOWLEDGE       = "knowledge/"
 )
 
@@ -148,47 +147,18 @@ func (ps *PathService) checkForUpdates(ctx context.Context, wg *sync.WaitGroup,
 
 }
 
-func (ps *PathService) skillPathHandler(w http.ResponseWriter, r *http.Request) {
-	dirName := r.URL.Query().Get("dir_name")
-
-	var subDirs []string
-	var levelOne bool
-	if dirName == "" {
-		levelOne = true
-	}
-
-	dirPath := filepath.Join(repoDir, dirName)
-	entries, err := os.ReadDir(dirPath)
-	if err != nil {
-		http.Error(w, "Directory path doesn't exist", http.StatusInternalServerError)
-		return
-	}
-
-	for _, entry := range entries {
-		if entry.IsDir() {
-			// If we are at root level, then only return directories ending with skills
-			if levelOne && !strings.HasSuffix(entry.Name(), "skills") {
-				continue
-			}
-			subDirs = append(subDirs, entry.Name())
-		}
-	}
-	response, err := json.Marshal(subDirs)
-	if err != nil {
-		http.Error(w, "Error creating response", http.StatusInternalServerError)
-		return
-	}
+func (ps *PathService) skillPathHandler(w http.ResponseWriter, r *http.Request){
+	ps.pathHandler(w, r, SKILLS)
+}
 
-	w.Header().Set("Content-Type", "application/json")
-	w.Header().Set("Access-Control-Allow-Origin", "*")
-	w.Write(response)
+func (ps *PathService) knowledgePathHandler(w http.ResponseWriter, r *http.Request){
+	ps.pathHandler(w, r, KNOWLEDGE)
 }
 
-func (ps *PathService) knowledgePathHandler(w http.ResponseWriter, r *http.Request) {
+func (ps *PathService) pathHandler(w http.ResponseWriter, r *http.Request, rootDir string) {
 	dirName := r.URL.Query().Get("dir_name")
 
-	// Knowledge taxonomy tree is present in the knowledge directory
-	dirName = KNOWLEDGE + dirName
+	dirName = rootDir + dirName
 	var subDirs []string
 	dirPath := filepath.Join(repoDir, dirName)
 	entries, err := os.ReadDir(dirPath)
@@ -202,7 +172,6 @@ func (ps *PathService) knowledgePathHandler(w http.ResponseWriter, r *http.Reque
 			subDirs = append(subDirs, entry.Name())
 		}
 	}
-
 	response, err := json.Marshal(subDirs)
 	if err != nil {
 		http.Error(w, "Error creating response", http.StatusInternalServerError)

src/app/api/pr/skill/route.ts

@@ -7,6 +7,7 @@ import { SkillYamlData, AttributionData } from '@/types';
 import { dumpYaml } from '@/utils/yamlConfig';
 
 const GITHUB_API_URL = 'https://api.github.com';
+const SKILLS_DIR = 'compositional_skills';
 const UPSTREAM_REPO_OWNER = process.env.NEXT_PUBLIC_TAXONOMY_REPO_OWNER!;
 const UPSTREAM_REPO_NAME = process.env.NEXT_PUBLIC_TAXONOMY_REPO!;
 const BASE_BRANCH = 'main';
@@ -42,8 +43,8 @@ export async function POST(req: NextRequest) {
     }
 
     const branchName = `skill-contribution-${Date.now()}`;
-    const newYamlFilePath = `${filePath}qna.yaml`;
-    const newAttributionFilePath = `${filePath}attribution.txt`;
+    const newYamlFilePath = `${SKILLS_DIR}/${filePath}qna.yaml`;
+    const newAttributionFilePath = `${SKILLS_DIR}/${filePath}attribution.txt`;
 
     const skillData = yaml.load(content) as SkillYamlData;
     const attributionData = attribution as AttributionData;

src/app/edit-submission/knowledge/[id]/page.tsx

@@ -106,7 +106,7 @@ const EditKnowledgePage: React.FunctionComponent<{ params: { id: string } }> = (
           });
           knowledgeExistingFormData.seedExamples = seedExamples;
 
-          // Set the file path from the current YAML file
+          // Set the file path from the current YAML file (remove the root folder name from the path)
           const currentFilePath = foundYamlFile.filename.split('/').slice(1, -1).join('/');
           knowledgeEditFormData.knowledgeFormData.filePath = currentFilePath + '/';
 

src/app/edit-submission/skill/[id]/page.tsx

@@ -88,7 +88,7 @@ const EditSkillPage: React.FunctionComponent<{ params: { id: string } }> = ({ pa
           skillExistingFormData.seedExamples = seedExamples;
 
           // Set the file path from the current YAML file (Note: skills root directory starts from the repo root)
-          const currentFilePath = foundYamlFile.filename.split('/').slice(0, -1).join('/');
+          const currentFilePath = foundYamlFile.filename.split('/').slice(1, -1).join('/');
           skillEditFormData.skillFormData.filePath = currentFilePath + '/';
 
           // Fetch and parse attribution file if it exists

src/components/Contribute/Skill/AttributionInformation/AttributionInformation.tsx

@@ -92,7 +92,7 @@ const AttributionInformation: React.FC<Props> = ({
           titleText={{
             text: (
               <p>
-                Attribution Info <span style={{ color: 'red' }}>*</span>
+                Attribution Information <span style={{ color: 'red' }}>*</span>
               </p>
             ),
             id: 'attribution-info-id'

src/components/Contribute/Skill/AuthorInformation/AuthorInformation.tsx

@@ -58,7 +58,7 @@ const AuthorInformation: React.FC<Props> = ({ reset, skillFormData, setDisableAc
           titleText={{
             text: (
               <p>
-                Author Info <span style={{ color: 'red' }}>*</span>
+                Author Information <span style={{ color: 'red' }}>*</span>
               </p>
             ),
             id: 'author-info-id'

src/components/Contribute/Skill/FilePathInformation/FilePathInformation.tsx

@@ -18,12 +18,12 @@ const FilePathInformation: React.FC<Props> = ({ reset, path, setFilePath }) => {
           titleText={{
             text: (
               <p>
-                File Path Info <span style={{ color: 'red' }}>*</span>
+                Taxonomy Directory Path <span style={{ color: 'red' }}>*</span>
               </p>
             ),
             id: 'file-path-info-id'
           }}
-          titleDescription="Specify the file path for the QnA and Attribution files."
+          titleDescription="Specify the directory location within taxonomy repository structure for the QnA Yaml and Attribution files."
         />
       }
     >

src/components/Contribute/Skill/SkillsDescription/SkillsDescriptionContent.tsx

@@ -7,14 +7,18 @@ const SkillsDescriptionContent: React.FunctionComponent = () => {
     <div>
       <b>
         <br />
-        <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 &quot;write me a
-          song&quot; or &quot;summarize an email&quot;. <br />
-          2) Core Skills - Core skills are foundational like math, reasoning and coding.
-          <a href="https://github.com/instructlab/taxonomy/blob/main/docs/SKILLS_GUIDE.md" target="_blank">
+          Skills are performative. When you create a skill for the model, you are teaching it how to do something: &quot;write me a song,&quot;
+          &quot;rearrange words in a sentence&quot; or &quot;summarize an email.&quot;
+          <a href="https://docs.instructlab.ai/taxonomy/skills/skills_guide/#what-is-a-skill" target="_blank" rel="noopener noreferrer">
             <Button variant="link" aria-label="Learn more about what Skills are in InstructLab">
-              Learn More
+              Learn more about skills
+              <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+            </Button>
+          </a>
+          <a href="https://docs.instructlab.ai/taxonomy/skills/" target="_blank" rel="noopener noreferrer">
+            <Button variant="link" aria-label="Learn more about what Skills are in InstructLab">
+              Getting started with skills contribution
               <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
             </Button>
           </a>

src/components/Contribute/Skill/SkillsInformation/SkillsInformation.tsx

@@ -76,7 +76,7 @@ const SkillsInformation: React.FC<Props> = ({
           titleText={{
             text: (
               <p>
-                Skills Info <span style={{ color: 'red' }}>*</span>
+                Skill Information <span style={{ color: 'red' }}>*</span>
               </p>
             ),
             id: 'skills-info-id'

src/components/Contribute/Skill/SkillsSeedExample/SkillsSeedExample.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormFieldGroupExpandable, FormFieldGroupHeader, FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import { TrashIcon, PlusCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons/dist/dynamic/icons/';
+import { TrashIcon, PlusCircleIcon, ExclamationCircleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons/dist/dynamic/icons/';
 import { SeedExample } from '..';
 import { TextArea } from '@patternfly/react-core/dist/esm/components/TextArea';
 import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants';
@@ -32,6 +32,7 @@ const SkillsSeedExample: React.FC<Props> = ({
 }) => {
   return (
     <FormFieldGroupExpandable
+      style={{ justifyContent: 'left' }}
       isExpanded
       toggleAriaLabel="Details"
       header={
@@ -44,7 +45,16 @@ const SkillsSeedExample: React.FC<Props> = ({
             ),
             id: 'seed-examples-id'
           }}
-          titleDescription="Add seed examples with Q&A pair and context (optional). Minimum 5 seed examples are required."
+          titleDescription={
+            <p>
+              Add seed examples with question and answer pair and related context (optional). Minimum 5 seed examples are required.{' '}
+              <a href="https://docs.instructlab.ai/taxonomy/skills/#skills-yaml-examples" target="_blank" rel="noopener noreferrer">
+                {' '}
+                Learn more about seed examples
+                <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+              </a>
+            </p>
+          }
         />
       }
     >
@@ -58,12 +68,11 @@ const SkillsSeedExample: React.FC<Props> = ({
               titleText={{
                 text: (
                   <p>
-                    Skill Seed Example {seedExampleIndex + 1} {seedExample.immutable && <span style={{ color: 'red' }}>*</span>}
+                    Seed Example {seedExampleIndex + 1} {seedExample.immutable && <span style={{ color: 'red' }}>*</span>}
                   </p>
                 ),
                 id: 'nested-field-group1-titleText-id'
               }}
-              titleDescription="Please enter question and answer for the seed example. Context is recommended but not required."
               actions={
                 !seedExample.immutable && (
                   <Button variant="plain" aria-label="Remove" onClick={() => deleteSeedExample(seedExampleIndex)}>
@@ -130,9 +139,11 @@ const SkillsSeedExample: React.FC<Props> = ({
           </FormGroup>
         </FormFieldGroupExpandable>
       ))}
-      <Button variant="link" onClick={addSeedExample}>
-        <PlusCircleIcon /> Add Seed Example
-      </Button>
+      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+        <Button variant="link" type="button" onClick={addSeedExample}>
+          <PlusCircleIcon /> Add Seed Example
+        </Button>
+      </div>
     </FormFieldGroupExpandable>
   );
 };

src/components/Contribute/Skill/Submit/Submit.tsx

@@ -88,7 +88,7 @@ const Submit: React.FC<Props> = ({ disableAction, skillFormData, setActionGroupA
   };
   return (
     <Button variant="primary" type="submit" isDisabled={disableAction} onClick={handleSubmit}>
-      Submit Skill
+      Submit
     </Button>
   );
 };

src/components/Contribute/Skill/Update/Update.tsx

@@ -8,6 +8,7 @@ import { amendCommit, getGitHubUsername, updatePullRequest } from '@/utils/githu
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 
+const SKILLS_DIR = 'compositional_skills/';
 interface Props {
   disableAction: boolean;
   skillFormData: SkillFormData;
@@ -75,8 +76,9 @@ Creator names: ${attributionData.creator_names}
         const commitMessage = `Amend commit with updated content\n\nSigned-off-by: ${skillFormData.name} <${skillFormData.email}>`;
 
         // Ensure proper file paths for the edit
-        const finalYamlPath = skillFormData.filePath.replace(/^\//, '').replace(/\/?$/, '/') + yamlFile.filename.split('/').pop();
-        const finalAttributionPath = skillFormData.filePath.replace(/^\//, '').replace(/\/?$/, '/') + attributionFile.filename.split('/').pop();
+        const finalYamlPath = SKILLS_DIR + skillFormData.filePath.replace(/^\//, '').replace(/\/?$/, '/') + yamlFile.filename.split('/').pop();
+        const finalAttributionPath =
+          SKILLS_DIR + skillFormData.filePath.replace(/^\//, '').replace(/\/?$/, '/') + attributionFile.filename.split('/').pop();
 
         const origFilePath = yamlFile.filename.split('/').slice(0, -1).join('/');
         const oldFilePath = {

src/components/Contribute/Skill/validation.tsx

@@ -61,7 +61,7 @@ export const validateFields = (
   const { duplicate, index } = hasDuplicateSeedExamples(skillFormData.seedExamples);
   if (duplicate) {
     skillFormData.seedExamples[index].isQuestionValid = ValidatedOptions.error;
-    skillFormData.seedExamples[index].questionValidationError = 'This is duplicate question, please provide unique contexts.';
+    skillFormData.seedExamples[index].questionValidationError = 'This is duplicate question, please provide unique questions.';
     const actionGroupAlertContent: ActionGroupAlertContent = {
       title: `Seed example issue!`,
       message: `Seed example ${index + 1} question is duplicate. Please provide unique questions.`,