Merge pull request #211 from vishnoianil/fixes

Fix minor issues related to beta release

src/app/login/githublogin.css

@@ -43,6 +43,14 @@ a {
   font-size: large;
 }
 
+.urls-text-medium {
+  margin-top: 1rem;
+  color: white;
+  padding: 20px;
+  text-align: center;
+  font-size: medium;
+}
+
 .policy-text {
   margin-top: 1rem;
   color: white;

src/app/login/githublogin.tsx

@@ -63,6 +63,15 @@ const GithubLogin: React.FC = () => {
                     Code Of Conduct
                   </a>
                 </Text>
+                <Text className="urls-text-medium">
+                  <a href="https://www.redhat.com/en/about/terms-use" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
+                    Terms of use
+                  </a>{' '}
+                  |{' '}
+                  <a href="https://www.redhat.com/en/about/privacy-policy" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
+                    Privacy Policy
+                  </a>
+                </Text>
               </TextContent>
             </div>
           </GridItem>

src/components/AboutModal/AboutModal.tsx

@@ -51,6 +51,15 @@ const AboutInstructLab = ({ isOpen, setIsOpen }: AboutModalProps) => {
           <Text className={styles.version} component={TextVariants.p}>
             © InstructLab | Version 1.0.0 Beta
           </Text>
+          <Text className={styles.links}>
+            <a href="https://www.redhat.com/en/about/terms-use" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
+              Terms of use
+            </a>{' '}
+            |{' '}
+            <a href="https://www.redhat.com/en/about/privacy-policy" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
+              Privacy Policy
+            </a>
+          </Text>
         </TextContent>
       </div>
     </AboutModal>

src/components/Contribute/Knowledge/KnowledgeDescription/KnowledgeDescriptionContent.tsx

@@ -11,9 +11,15 @@ const KnowledgeDescriptionContent: React.FunctionComponent = () => {
           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.
         </b>
-        <a href="https://github.com/instructlab/taxonomy/blob/main/docs/KNOWLEDGE_GUIDE.md" target="_blank">
-          <Button variant="link" aria-label="Learn more about what InstructLab Knowledge is">
-            Learn More
+        <a href="https://docs.instructlab.ai/taxonomy/knowledge/guide/#what-is-knowledge" target="_blank" rel="noopener noreferrer">
+          <Button variant="link" aria-label="Learn more about what Knowledge is in InstructLab">
+            Learn more about knowledge
+            <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+          </Button>
+        </a>
+        <a href="https://docs.instructlab.ai/taxonomy/knowledge/" target="_blank" rel="noopener noreferrer">
+          <Button variant="link" aria-label="Getting started with InstructLab knowledge contribution">
+            Getting started with knowledge contribution
             <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
           </Button>
         </a>

src/components/Contribute/Knowledge/KnowledgeSeedExample/KnowledgeSeedExample.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormFieldGroupExpandable, FormFieldGroupHeader } from '@patternfly/react-core/dist/dynamic/components/Form';
 import KnowledgeQuestionAnswerPairs from '../KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs';
 import { SeedExample } from '..';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 
 interface Props {
   seedExamples: SeedExample[];
@@ -36,7 +37,16 @@ const KnowledgeSeedExample: React.FC<Props> = ({
             ),
             id: 'seed-examples-id'
           }}
-          titleDescription="Add seed examples with context and minimum 3 question and answer pairs. Minimum 5 seed examples are required."
+          titleDescription={
+            <p>
+              Add seed examples with context and minimum 3 question and answer pairs. Minimum 5 seed examples are required.{' '}
+              <a href="https://docs.instructlab.ai/taxonomy/knowledge/#knowledge-yaml-examples" target="_blank" rel="noopener noreferrer">
+                {' '}
+                Learn more about seed examples
+                <ExternalLinkAltIcon style={{ padding: '3px' }}></ExternalLinkAltIcon>
+              </a>
+            </p>
+          }
         />
       }
     >

src/components/Contribute/Knowledge/Update/Update.tsx

@@ -159,7 +159,7 @@ Creator names: ${attributionData.creator_names}
   };
   return (
     <Button variant="primary" type="submit" isDisabled={disableAction} onClick={handleUpdate}>
-      Update Knowledge
+      Update
     </Button>
   );
 };

src/components/Contribute/Knowledge/index.tsx

@@ -220,65 +220,51 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
     }
   }, [knowledgeEditFormData]);
 
-  const validateContext = (seedExample: SeedExample): SeedExample => {
+  const validateContext = (context: string) => {
     // Split the context into words based on spaces
-    const contextStr = seedExample.context.trim();
+    const contextStr = context.trim();
     if (contextStr.length == 0) {
       setDisableAction(true);
-      seedExample.validationError = 'Context is required';
-      seedExample.isContextValid = ValidatedOptions.error;
-      return seedExample;
+      return { errorMsg: 'Context is required', context: ValidatedOptions.error };
     }
     const tokens = contextStr.split(/\s+/);
     if (tokens.length > 0 && tokens.length <= 500) {
       setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
-      seedExample.isContextValid = ValidatedOptions.success;
-      return seedExample;
+      return { errorMsg: '', context: ValidatedOptions.success };
     }
     setDisableAction(true);
-    seedExample.validationError = 'Context must be less than 500 words. Current word count: ' + tokens.length;
-    seedExample.isContextValid = ValidatedOptions.error;
-    return seedExample;
+    const errorMsg = 'Context must be less than 500 words. Current word count: ' + tokens.length;
+    return { errorMsg: errorMsg, context: ValidatedOptions.error };
   };
 
-  const validateQuestion = (qnaPair: QuestionAndAnswerPair): QuestionAndAnswerPair => {
-    const questionStr = qnaPair.question.trim();
+  const validateQuestion = (question: string) => {
+    const questionStr = question.trim();
     if (questionStr.length == 0) {
       setDisableAction(true);
-      qnaPair.questionValidationError = 'Question is required';
-      qnaPair.isQuestionValid = ValidatedOptions.error;
-      return qnaPair;
+      return { errorMsg: 'Question is required', context: ValidatedOptions.error };
     }
     const tokens = questionStr.split(/\s+/);
     if (tokens.length > 0 && tokens.length < 250) {
       setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
-      qnaPair.isQuestionValid = ValidatedOptions.success;
-      return qnaPair;
+      return { errorMsg: '', context: ValidatedOptions.success };
     }
     setDisableAction(true);
-    qnaPair.questionValidationError = 'Question must be less than 250 words. Current word count: ' + tokens.length;
-    qnaPair.isQuestionValid = ValidatedOptions.error;
-    return qnaPair;
+    return { errorMsg: 'Question must be less than 250 words. Current word count: ' + tokens.length, context: ValidatedOptions.error };
   };
 
-  const validateAnswer = (qnaPair: QuestionAndAnswerPair): QuestionAndAnswerPair => {
-    const answerStr = qnaPair.answer.trim();
+  const validateAnswer = (answer: string) => {
+    const answerStr = answer.trim();
     if (answerStr.length == 0) {
       setDisableAction(true);
-      qnaPair.answerValidationError = 'Answer is required';
-      qnaPair.isAnswerValid = ValidatedOptions.error;
-      return qnaPair;
+      return { errorMsg: 'Answer is required', context: ValidatedOptions.error };
     }
     const tokens = answerStr.split(/\s+/);
     if (tokens.length > 0 && tokens.length < 250) {
       setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
-      qnaPair.isAnswerValid = ValidatedOptions.success;
-      return qnaPair;
+      return { errorMsg: '', context: ValidatedOptions.success };
     }
     setDisableAction(true);
-    qnaPair.answerValidationError = 'Answer must be less than 250 words. Current word count: ' + tokens.length;
-    qnaPair.isAnswerValid = ValidatedOptions.error;
-    return qnaPair;
+    return { errorMsg: 'Answer must be less than 250 words. Current word count: ' + tokens.length, context: ValidatedOptions.error };
   };
 
   const handleContextInputChange = (seedExampleIndex: number, contextValue: string): void => {
@@ -295,14 +281,18 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
   };
 
   const handleContextBlur = (seedExampleIndex: number): void => {
-    setSeedExamples(
-      seedExamples.map((seedExample: SeedExample, index: number) => {
-        if (index === seedExampleIndex) {
-          return validateContext(seedExample);
-        }
-        return seedExample;
-      })
-    );
+    const updatedSeedExamples = seedExamples.map((seedExample: SeedExample, index: number): SeedExample => {
+      if (index === seedExampleIndex) {
+        const { errorMsg, context } = validateContext(seedExample.context);
+        return {
+          ...seedExample,
+          isContextValid: context,
+          validationError: errorMsg
+        };
+      }
+      return seedExample;
+    });
+    setSeedExamples(updatedSeedExamples);
   };
 
   const handleQuestionInputChange = (seedExampleIndex: number, questionAndAnswerIndex: number, questionValue: string): void => {
@@ -333,7 +323,12 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
               ...seedExample,
               questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, index: number) => {
                 if (index === questionAndAnswerIndex) {
-                  return validateQuestion(questionAndAnswerPair);
+                  const { errorMsg, context } = validateQuestion(questionAndAnswerPair.question);
+                  return {
+                    ...questionAndAnswerPair,
+                    isQuestionValid: context,
+                    questionValidationError: errorMsg
+                  };
                 }
                 return questionAndAnswerPair;
               })
@@ -371,7 +366,12 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
               ...seedExample,
               questionAndAnswers: seedExample.questionAndAnswers.map((questionAndAnswerPair: QuestionAndAnswerPair, index: number) => {
                 if (index === questionAndAnswerIndex) {
-                  return validateAnswer(questionAndAnswerPair);
+                  const { errorMsg, context } = validateAnswer(questionAndAnswerPair.answer);
+                  return {
+                    ...questionAndAnswerPair,
+                    isAnswerValid: context,
+                    answerValidationError: errorMsg
+                  };
                 }
                 return questionAndAnswerPair;
               })

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

@@ -147,7 +147,7 @@ Creator names: ${attributionData.creator_names}
   };
   return (
     <Button variant="primary" type="submit" isDisabled={disableAction} onClick={handleUpdate}>
-      Update Skill
+      Update
     </Button>
   );
 };