Knowledge fixes

src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormFieldGroupExpandable, FormFieldGroupHeader, FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
@@ -9,6 +9,7 @@ import { KnowledgeFormData } from '..';
 import { checkKnowledgeFormCompletion } from '../validation';
 
 interface Props {
+  reset: boolean;
   knowledgeFormData: KnowledgeFormData;
   setDisableAction: React.Dispatch<React.SetStateAction<boolean>>;
   titleWork: string;
@@ -24,6 +25,7 @@ interface Props {
 }
 
 const AttributionInformation: React.FC<Props> = ({
+  reset,
   knowledgeFormData,
   setDisableAction,
   titleWork,
@@ -43,6 +45,14 @@ const AttributionInformation: React.FC<Props> = ({
   const [validLicense, setValidLicense] = React.useState<ValidatedOptions>();
   const [validCreators, setValidCreators] = React.useState<ValidatedOptions>();
 
+  useEffect(() => {
+    setValidTitle(ValidatedOptions.default);
+    setValidLink(ValidatedOptions.default);
+    setValidRevision(ValidatedOptions.default);
+    setValidLicense(ValidatedOptions.default);
+    setValidCreators(ValidatedOptions.default);
+  }, [reset]);
+
   const validateTitle = (title: string) => {
     if (title.length > 0) {
       setValidTitle(ValidatedOptions.success);

src/components/Contribute/Knowledge/AuthorInformation/AuthorInformation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormFieldGroupExpandable, FormFieldGroupHeader, FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
@@ -9,14 +9,15 @@ import { KnowledgeFormData } from '..';
 import { checkKnowledgeFormCompletion } from '../validation';
 
 interface Props {
+  reset: boolean;
   knowledgeFormData: KnowledgeFormData;
   setDisableAction: React.Dispatch<React.SetStateAction<boolean>>;
   email: string;
   setEmail: React.Dispatch<React.SetStateAction<string>>;
   name: string;
   setName: React.Dispatch<React.SetStateAction<string>>;
 }
-const AuthorInformation: React.FC<Props> = ({ knowledgeFormData, setDisableAction, email, setEmail, name, setName }) => {
+const AuthorInformation: React.FC<Props> = ({ reset, knowledgeFormData, setDisableAction, email, setEmail, name, setName }) => {
   const [validEmail, setValidEmail] = useState<ValidatedOptions>();
   const [validName, setValidName] = useState<ValidatedOptions>();
 
@@ -43,6 +44,11 @@ const AuthorInformation: React.FC<Props> = ({ knowledgeFormData, setDisableActio
     return;
   };
 
+  useEffect(() => {
+    setValidEmail(ValidatedOptions.default);
+    setValidName(ValidatedOptions.default);
+  }, [reset]);
+
   return (
     <FormFieldGroupExpandable
       isExpanded

src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } 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 { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
@@ -12,6 +12,7 @@ import { KnowledgeFormData } from '..';
 import { checkKnowledgeFormCompletion } from '../validation';
 
 interface Props {
+  reset: boolean;
   knowledgeFormData: KnowledgeFormData;
   setDisableAction: React.Dispatch<React.SetStateAction<boolean>>;
   knowledgeDocumentRepositoryUrl: string;
@@ -25,6 +26,7 @@ interface Props {
 }
 
 const DocumentInformation: React.FC<Props> = ({
+  reset,
   knowledgeFormData,
   setDisableAction,
   knowledgeDocumentRepositoryUrl,
@@ -49,6 +51,12 @@ const DocumentInformation: React.FC<Props> = ({
   const [validCommit, setValidCommit] = useState<ValidatedOptions>();
   const [validDocumentName, setValidDocumentName] = useState<ValidatedOptions>();
 
+  useEffect(() => {
+    setValidRepo(ValidatedOptions.default);
+    setValidCommit(ValidatedOptions.default);
+    setValidDocumentName(ValidatedOptions.default);
+  }, [reset]);
+
   const validateRepo = (repo: string) => {
     if (repo.length === 0) {
       setDisableAction(true);

src/components/Contribute/Knowledge/FilePathInformation/FilePathInformation.tsx

@@ -3,10 +3,11 @@ import { FormFieldGroupExpandable, FormFieldGroupHeader, FormGroup } from '@patt
 import PathService from '@/components/PathService/PathService';
 
 interface Props {
+  reset?: boolean;
   setFilePath: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const FilePathInformation: React.FC<Props> = ({ setFilePath }) => {
+const FilePathInformation: React.FC<Props> = ({ reset, setFilePath }) => {
   return (
     <FormFieldGroupExpandable
       isExpanded
@@ -26,7 +27,7 @@ const FilePathInformation: React.FC<Props> = ({ setFilePath }) => {
       }
     >
       <FormGroup isRequired key={'file-path-service-id'}>
-        <PathService rootPath="knowledge" handlePathChange={setFilePath} />
+        <PathService reset={reset} rootPath="knowledge" handlePathChange={setFilePath} />
       </FormGroup>
     </FormFieldGroupExpandable>
   );

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

@@ -7,6 +7,7 @@ const KnowledgeDescriptionContent: React.FunctionComponent = () => {
     <div>
       <p>
         <b>
+          <br />
           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>

src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormFieldGroupExpandable, FormFieldGroupHeader, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 import { TextArea } from '@patternfly/react-core/dist/dynamic/components/TextArea';
@@ -10,6 +10,7 @@ import { KnowledgeFormData } from '..';
 import { checkKnowledgeFormCompletion } from '../validation';
 
 interface Props {
+  reset: boolean;
   knowledgeFormData: KnowledgeFormData;
   setDisableAction: React.Dispatch<React.SetStateAction<boolean>>;
   submissionSummary: string;
@@ -21,6 +22,7 @@ interface Props {
 }
 
 const KnowledgeInformation: React.FC<Props> = ({
+  reset,
   knowledgeFormData,
   setDisableAction,
   submissionSummary,
@@ -34,6 +36,12 @@ const KnowledgeInformation: React.FC<Props> = ({
   const [validDomain, setValidDomain] = React.useState<ValidatedOptions>();
   const [validOutline, setValidOutline] = React.useState<ValidatedOptions>();
 
+  useEffect(() => {
+    setValidDescription(ValidatedOptions.default);
+    setValidDomain(ValidatedOptions.default);
+    setValidOutline(ValidatedOptions.default);
+  }, [reset]);
+
   const validateDescription = (description: string) => {
     if (description.length > 0 && description.length < 60) {
       setValidDescription(ValidatedOptions.success);

src/components/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx

@@ -51,7 +51,7 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
         <FormHelperText key={seedExampleIndex * 10 + 2}>
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.isContextValid}>
-              Context is required. It must be non empty and less than 500 characters.
+              {seedExample.validationError || 'Context is required. It must be non empty and less than 500 characters.'}
             </HelperTextItem>
           </HelperText>
         </FormHelperText>
@@ -98,7 +98,8 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
               <FormHelperText key={seedExampleIndex * 100 + questionAnswerIndex * 10 + 2}>
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.questionAndAnswers[questionAnswerIndex].isQuestionValid}>
-                    Question is required. Total length of all Q&A pairs should be less than 250 characters.
+                    {seedExample.questionAndAnswers[questionAnswerIndex].questionValidationError ||
+                      'Question is required. Total length of all Q&A pairs should be less than 250 characters.'}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>
@@ -118,7 +119,8 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
               <FormHelperText key={seedExampleIndex * 100 + questionAnswerIndex * 10 + 4}>
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.questionAndAnswers[questionAnswerIndex].isAnswerValid}>
-                    Answer is required. Total length of all Q&A pairs should be less than 250 characters.
+                    {seedExample.questionAndAnswers[questionAnswerIndex].answerValidationError ||
+                      'Answer is required. Total length of all Q&A pairs should be less than 250 characters.'}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>