diff --git a/src/app/login/githublogin.css b/src/app/login/githublogin.css index 6f230e5b..e67fc4ed 100644 --- a/src/app/login/githublogin.css +++ b/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; diff --git a/src/app/login/githublogin.tsx b/src/app/login/githublogin.tsx index f658c2ef..43b2a7b9 100644 --- a/src/app/login/githublogin.tsx +++ b/src/app/login/githublogin.tsx @@ -63,6 +63,15 @@ const GithubLogin: React.FC = () => { Code Of Conduct + + + Terms of use + {' '} + |{' '} + + Privacy Policy + + diff --git a/src/components/AboutModal/AboutModal.tsx b/src/components/AboutModal/AboutModal.tsx index 696d388f..519feb21 100644 --- a/src/components/AboutModal/AboutModal.tsx +++ b/src/components/AboutModal/AboutModal.tsx @@ -51,6 +51,15 @@ const AboutInstructLab = ({ isOpen, setIsOpen }: AboutModalProps) => { © InstructLab | Version 1.0.0 Beta + + + Terms of use + {' '} + |{' '} + + Privacy Policy + + diff --git a/src/components/Contribute/Knowledge/KnowledgeDescription/KnowledgeDescriptionContent.tsx b/src/components/Contribute/Knowledge/KnowledgeDescription/KnowledgeDescriptionContent.tsx index ca5b0805..a66c7485 100644 --- a/src/components/Contribute/Knowledge/KnowledgeDescription/KnowledgeDescriptionContent.tsx +++ b/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. - - + + + diff --git a/src/components/Contribute/Knowledge/KnowledgeSeedExample/KnowledgeSeedExample.tsx b/src/components/Contribute/Knowledge/KnowledgeSeedExample/KnowledgeSeedExample.tsx index 437e0ae4..b84ad9c0 100644 --- a/src/components/Contribute/Knowledge/KnowledgeSeedExample/KnowledgeSeedExample.tsx +++ b/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 = ({ ), id: 'seed-examples-id' }} - titleDescription="Add seed examples with context and minimum 3 question and answer pairs. Minimum 5 seed examples are required." + titleDescription={ +

+ Add seed examples with context and minimum 3 question and answer pairs. Minimum 5 seed examples are required.{' '} + + {' '} + Learn more about seed examples + + +

+ } /> } > diff --git a/src/components/Contribute/Knowledge/Update/Update.tsx b/src/components/Contribute/Knowledge/Update/Update.tsx index 33d2969c..4824c068 100644 --- a/src/components/Contribute/Knowledge/Update/Update.tsx +++ b/src/components/Contribute/Knowledge/Update/Update.tsx @@ -159,7 +159,7 @@ Creator names: ${attributionData.creator_names} }; return ( ); }; diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx index 18c3dc43..547995e6 100644 --- a/src/components/Contribute/Knowledge/index.tsx +++ b/src/components/Contribute/Knowledge/index.tsx @@ -220,65 +220,51 @@ export const KnowledgeForm: React.FunctionComponent = ({ 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 = ({ 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 = ({ 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 = ({ 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; }) diff --git a/src/components/Contribute/Skill/Update/Update.tsx b/src/components/Contribute/Skill/Update/Update.tsx index 13e8009d..a63b95a7 100644 --- a/src/components/Contribute/Skill/Update/Update.tsx +++ b/src/components/Contribute/Skill/Update/Update.tsx @@ -147,7 +147,7 @@ Creator names: ${attributionData.creator_names} }; return ( ); };