From a7c4cc1af17de91c6cf55da8de3c4a3d63013a77 Mon Sep 17 00:00:00 2001
From: Asha Padmashetti <asha.padmashetti@gmail.com>
Date: Mon, 14 Oct 2024 15:25:09 -0700
Subject: [PATCH] adding gap between form elements skill and knowledge

Signed-off-by: ashapadmashetti <asha.padmashetti@gmail.com>
---
 .../AttributionInformation.tsx                |  22 ++-
 .../AuthorInformation/AuthorInformation.tsx   |  12 +-
 .../DocumentInformation.tsx                   | 143 +++++++++---------
 .../KnowledgeInformation.tsx                  |  14 +-
 .../KnowledgeQuestionAnswerPairs.tsx          |   6 +-
 src/components/Contribute/Knowledge/index.tsx |   6 +-
 .../AttributionInformation.tsx                |  13 +-
 .../AuthorInformation/AuthorInformation.tsx   |  12 +-
 .../SkillsInformation/SkillsInformation.tsx   |   9 +-
 .../SkillsSeedExample/SkillsSeedExample.tsx   |  11 +-
 src/components/PathService/PathService.tsx    |   2 +-
 11 files changed, 142 insertions(+), 108 deletions(-)

diff --git a/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx b/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx
index 0e37bf9..7a3fc30 100644
--- a/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx
+++ b/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx
@@ -145,7 +145,7 @@ const AttributionInformation: React.FC<Props> = ({
         />
       }
     >
-      <FormGroup isRequired key={'attribution-info-details-id'}>
+      <FormGroup isRequired key={'attribution-info-details-work_link'} label="Work link or URL">
         <TextInput
           isRequired
           type="url"
@@ -160,7 +160,7 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validLink}>
-                Link to title is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
@@ -169,11 +169,13 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validLink}>
-                Please enter a valid URL.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'attribution-info-details-title_work'} label="Work title">
         <TextInput
           isRequired
           type="text"
@@ -188,11 +190,13 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validTitle}>
-                Title is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'attribution-info-details-document_revision'} label="Document revision">
         <TextInput
           isRequired
           type="text"
@@ -207,11 +211,13 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validRevision}>
-                Revision is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'attribution-info-details-license'} label="License">
         <TextInput
           isRequired
           type="text"
@@ -226,11 +232,13 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validLicense}>
-                License is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'attribution-info-details-creators'} label="Creators name">
         <TextInput
           isRequired
           type="text"
@@ -245,7 +253,7 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validCreators}>
-                Creators is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
diff --git a/src/components/Contribute/Knowledge/AuthorInformation/AuthorInformation.tsx b/src/components/Contribute/Knowledge/AuthorInformation/AuthorInformation.tsx
index 2b98a34..a3787cf 100644
--- a/src/components/Contribute/Knowledge/AuthorInformation/AuthorInformation.tsx
+++ b/src/components/Contribute/Knowledge/AuthorInformation/AuthorInformation.tsx
@@ -20,16 +20,20 @@ interface Props {
 const AuthorInformation: React.FC<Props> = ({ reset, knowledgeFormData, setDisableAction, email, setEmail, name, setName }) => {
   const [validEmail, setValidEmail] = useState<ValidatedOptions>();
   const [validName, setValidName] = useState<ValidatedOptions>();
+  const [validEmailError, setValidEmailError] = useState('Required Field');
 
   const validateEmail = (email: string) => {
     const re = /\S+@\S+\.\S+/;
     if (re.test(email)) {
       setValidEmail(ValidatedOptions.success);
       setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
+      setValidEmailError('');
       return;
     }
+    const errMsg = email ? 'Please enter a valid email address.' : 'Required field';
     setDisableAction(true);
     setValidEmail(ValidatedOptions.error);
+    setValidEmailError(errMsg);
     return;
   };
 
@@ -67,7 +71,7 @@ const AuthorInformation: React.FC<Props> = ({ reset, knowledgeFormData, setDisab
         />
       }
     >
-      <FormGroup isRequired key={'author-info-details-id'}>
+      <FormGroup isRequired key={'author-info-details-email'} label="Email address">
         <TextInput
           isRequired
           type="email"
@@ -82,11 +86,13 @@ const AuthorInformation: React.FC<Props> = ({ reset, knowledgeFormData, setDisab
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validEmail}>
-                Please enter a valid email address.
+                {validEmailError}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'author-info-details-name'} label="Full name">
         <TextInput
           isRequired
           type="text"
@@ -101,7 +107,7 @@ const AuthorInformation: React.FC<Props> = ({ reset, knowledgeFormData, setDisab
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validName}>
-                Name is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
diff --git a/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx b/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx
index 5068647..ec0cb4c 100644
--- a/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx
+++ b/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx
@@ -257,75 +257,80 @@ const DocumentInformation: React.FC<Props> = ({
         <p>{modalText}</p>
       </Modal>
       {!useFileUpload ? (
-        <FormGroup key={'doc-info-details-id'}>
-          <TextInput
-            isRequired
-            type="url"
-            aria-label="repo"
-            validated={validRepo}
-            placeholder="Enter repo url where document exists"
-            value={knowledgeDocumentRepositoryUrl}
-            onChange={(_event, value) => setKnowledgeDocumentRepositoryUrl(value)}
-            onBlur={() => validateRepo(knowledgeDocumentRepositoryUrl)}
-          />
-          {validRepo === ValidatedOptions.error && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem icon={<ExclamationCircleIcon />} variant={validRepo}>
-                  Repo URL is required.
-                </HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
-          {validRepo === ValidatedOptions.warning && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
-                  Please enter a valid URL.
-                </HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
-
-          <TextInput
-            isRequired
-            type="text"
-            aria-label="commit"
-            placeholder="Enter the commit sha of the document in that repo"
-            value={knowledgeDocumentCommit}
-            validated={validCommit}
-            onChange={(_event, value) => setKnowledgeDocumentCommit(value)}
-            onBlur={() => validateCommit(knowledgeDocumentCommit)}
-          />
-          {validCommit === ValidatedOptions.error && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem icon={<ExclamationCircleIcon />} variant={validCommit}>
-                  Valid commit SHA is required.
-                </HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
-          <TextInput
-            isRequired
-            type="text"
-            aria-label="patterns"
-            placeholder="Enter the documents name (comma separated)"
-            value={documentName}
-            validated={validDocumentName}
-            onChange={(_event, value) => setDocumentName(value)}
-            onBlur={() => validateDocumentName(documentName)}
-          />
-          {validDocumentName === ValidatedOptions.error && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem icon={<ExclamationCircleIcon />} variant={validDocumentName}>
-                  Document name is required.
-                </HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
-        </FormGroup>
+        <>
+          <FormGroup isRequired key={'doc-info-details-id'} label="Repo URL">
+            <TextInput
+              isRequired
+              type="url"
+              aria-label="repo"
+              validated={validRepo}
+              placeholder="Enter repo url where document exists"
+              value={knowledgeDocumentRepositoryUrl}
+              onChange={(_event, value) => setKnowledgeDocumentRepositoryUrl(value)}
+              onBlur={() => validateRepo(knowledgeDocumentRepositoryUrl)}
+            />
+            {validRepo === ValidatedOptions.error && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant={validRepo}>
+                    Required field
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
+            {validRepo === ValidatedOptions.warning && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant="error">
+                    Please enter a valid URL.
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
+          </FormGroup>
+          <FormGroup isRequired key={'doc-info-details-commit_sha'} label="Commit SHA">
+            <TextInput
+              isRequired
+              type="text"
+              aria-label="commit"
+              placeholder="Enter the commit sha of the document in that repo"
+              value={knowledgeDocumentCommit}
+              validated={validCommit}
+              onChange={(_event, value) => setKnowledgeDocumentCommit(value)}
+              onBlur={() => validateCommit(knowledgeDocumentCommit)}
+            />
+            {validCommit === ValidatedOptions.error && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant={validCommit}>
+                    Valid commit SHA is required.
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
+          </FormGroup>
+          <FormGroup isRequired key={'doc-info-details-patterns'} label="Document names">
+            <TextInput
+              isRequired
+              type="text"
+              aria-label="patterns"
+              placeholder="Enter the documents name (comma separated)"
+              value={documentName}
+              validated={validDocumentName}
+              onChange={(_event, value) => setDocumentName(value)}
+              onBlur={() => validateDocumentName(documentName)}
+            />
+            {validDocumentName === ValidatedOptions.error && (
+              <FormHelperText>
+                <HelperText>
+                  <HelperTextItem icon={<ExclamationCircleIcon />} variant={validDocumentName}>
+                    Required field
+                  </HelperTextItem>
+                </HelperText>
+              </FormHelperText>
+            )}
+          </FormGroup>
+        </>
       ) : (
         <>
           <UploadFile onFilesChange={handleFilesChange} />
diff --git a/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx b/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx
index b86e669..6a3b09f 100644
--- a/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx
+++ b/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx
@@ -103,7 +103,7 @@ const KnowledgeInformation: React.FC<Props> = ({
         />
       }
     >
-      <FormGroup key={'knowledge-info-details-id'}>
+      <FormGroup key={'knowledge-info-details-submission_summary'} label="Submission summary">
         <TextInput
           isRequired
           type="text"
@@ -118,11 +118,12 @@ const KnowledgeInformation: React.FC<Props> = ({
         {validDescription === ValidatedOptions.error && (
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={validDescription}>
-              Description is required and must be less than 60 characters
+              Required field
             </HelperTextItem>
           </HelperText>
         )}
-
+      </FormGroup>
+      <FormGroup key={'knowledge-info-details-domain'} label="Domain">
         <TextInput
           isRequired
           type="text"
@@ -136,11 +137,12 @@ const KnowledgeInformation: React.FC<Props> = ({
         {validDomain === ValidatedOptions.error && (
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={validDomain}>
-              Domain is required
+              Required field
             </HelperTextItem>
           </HelperText>
         )}
-
+      </FormGroup>
+      <FormGroup key={'knowledge-info-details-document_outline'} label="Document outline">
         <TextArea
           isRequired
           type="text"
@@ -155,7 +157,7 @@ const KnowledgeInformation: React.FC<Props> = ({
         {validOutline === ValidatedOptions.error && (
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={validOutline}>
-              Document outline is required and must be at least 40 characters
+              Required field
             </HelperTextItem>
           </HelperText>
         )}
diff --git a/src/components/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx b/src/components/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx
index 7c2e1f6..a7f15d3 100644
--- a/src/components/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx
+++ b/src/components/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx
@@ -45,7 +45,7 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
         <FormHelperText key={seedExampleIndex * 10 + 2}>
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.isContextValid}>
-              {seedExample.validationError ? seedExample.validationError : 'Context is required. It must be non empty and less than 500 words.'}
+              {seedExample.validationError ? seedExample.validationError : 'Required field. It must be non empty and less than 500 words.'}
             </HelperTextItem>
           </HelperText>
         </FormHelperText>
@@ -86,7 +86,7 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.questionAndAnswers[questionAnswerIndex].isQuestionValid}>
                     {seedExample.questionAndAnswers[questionAnswerIndex].questionValidationError ||
-                      'Question is required. Total length of all Q&A pairs should be less than 250 words.'}
+                      'Required field. Total length of all Q&A pairs should be less than 250 words.'}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>
@@ -107,7 +107,7 @@ const KnowledgeQuestionAnswerPairs: React.FC<Props> = ({
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.questionAndAnswers[questionAnswerIndex].isAnswerValid}>
                     {seedExample.questionAndAnswers[questionAnswerIndex].answerValidationError ||
-                      'Answer is required. Total length of all Q&A pairs should be less than 250 words.'}
+                      'Required field. Total length of all Q&A pairs should be less than 250 words.'}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>
diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx
index 881866f..12aebb2 100644
--- a/src/components/Contribute/Knowledge/index.tsx
+++ b/src/components/Contribute/Knowledge/index.tsx
@@ -225,7 +225,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
     const contextStr = context.trim();
     if (contextStr.length == 0) {
       setDisableAction(true);
-      return { msg: 'Context is required', status: ValidatedOptions.error };
+      return { msg: 'Required field', status: ValidatedOptions.error };
     }
     const tokens = contextStr.split(/\s+/);
     if (tokens.length > 0 && tokens.length <= 500) {
@@ -241,7 +241,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
     const questionStr = question.trim();
     if (questionStr.length == 0) {
       setDisableAction(true);
-      return { msg: 'Question is required', status: ValidatedOptions.error };
+      return { msg: 'Required field', status: ValidatedOptions.error };
     }
     const tokens = questionStr.split(/\s+/);
     if (tokens.length > 0 && tokens.length < 250) {
@@ -256,7 +256,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
     const answerStr = answer.trim();
     if (answerStr.length == 0) {
       setDisableAction(true);
-      return { msg: 'Answer is required', status: ValidatedOptions.error };
+      return { msg: 'Required field', status: ValidatedOptions.error };
     }
     const tokens = answerStr.split(/\s+/);
     if (tokens.length > 0 && tokens.length < 250) {
diff --git a/src/components/Contribute/Skill/AttributionInformation/AttributionInformation.tsx b/src/components/Contribute/Skill/AttributionInformation/AttributionInformation.tsx
index 57eb6f8..124df4e 100644
--- a/src/components/Contribute/Skill/AttributionInformation/AttributionInformation.tsx
+++ b/src/components/Contribute/Skill/AttributionInformation/AttributionInformation.tsx
@@ -101,7 +101,7 @@ const AttributionInformation: React.FC<Props> = ({
         />
       }
     >
-      <FormGroup isRequired key={'attribution-info-details-id'}>
+      <FormGroup isRequired key={'attribution-info-details-title_work'} label="Work title">
         <TextInput
           isRequired
           type="text"
@@ -116,12 +116,13 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validTitle}>
-                Title is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
-
+      </FormGroup>
+      <FormGroup isRequired key={'attribution-info-details-license_work'} label="Work License">
         <TextInput
           isRequired
           type="text"
@@ -136,11 +137,13 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validLicense}>
-                License is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'attribution-info-details-creators'} label="Creators name">
         <TextInput
           isRequired
           type="text"
@@ -155,7 +158,7 @@ const AttributionInformation: React.FC<Props> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validCreators}>
-                Creators is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
diff --git a/src/components/Contribute/Skill/AuthorInformation/AuthorInformation.tsx b/src/components/Contribute/Skill/AuthorInformation/AuthorInformation.tsx
index e958b19..79a7c00 100644
--- a/src/components/Contribute/Skill/AuthorInformation/AuthorInformation.tsx
+++ b/src/components/Contribute/Skill/AuthorInformation/AuthorInformation.tsx
@@ -20,16 +20,20 @@ interface Props {
 const AuthorInformation: React.FC<Props> = ({ reset, skillFormData, setDisableAction, email, setEmail, name, setName }) => {
   const [validEmail, setValidEmail] = useState<ValidatedOptions>();
   const [validName, setValidName] = useState<ValidatedOptions>();
+  const [validEmailError, setValidEmailError] = useState('Required Field');
 
   const validateEmail = (email: string) => {
     const re = /\S+@\S+\.\S+/;
     if (re.test(email)) {
       setValidEmail(ValidatedOptions.success);
       setDisableAction(!checkSkillFormCompletion(skillFormData));
+      setValidEmailError('');
       return;
     }
+    const errMsg = email ? 'Please enter a valid email address.' : 'Required field';
     setDisableAction(true);
     setValidEmail(ValidatedOptions.error);
+    setValidEmailError(errMsg);
     return;
   };
 
@@ -67,7 +71,7 @@ const AuthorInformation: React.FC<Props> = ({ reset, skillFormData, setDisableAc
         />
       }
     >
-      <FormGroup isRequired key={'author-info-details-id'}>
+      <FormGroup isRequired key={'author-info-details-email'} label="Email">
         <TextInput
           isRequired
           type="email"
@@ -82,11 +86,13 @@ const AuthorInformation: React.FC<Props> = ({ reset, skillFormData, setDisableAc
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validEmail}>
-                Please enter a valid email address.
+                {validEmailError}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
         )}
+      </FormGroup>
+      <FormGroup isRequired key={'author-info-details-name'} label="Full name">
         <TextInput
           isRequired
           type="text"
@@ -101,7 +107,7 @@ const AuthorInformation: React.FC<Props> = ({ reset, skillFormData, setDisableAc
           <FormHelperText>
             <HelperText>
               <HelperTextItem icon={<ExclamationCircleIcon />} variant={validName}>
-                Name is required.
+                Required field
               </HelperTextItem>
             </HelperText>
           </FormHelperText>
diff --git a/src/components/Contribute/Skill/SkillsInformation/SkillsInformation.tsx b/src/components/Contribute/Skill/SkillsInformation/SkillsInformation.tsx
index 8eca1bc..f74a7f5 100644
--- a/src/components/Contribute/Skill/SkillsInformation/SkillsInformation.tsx
+++ b/src/components/Contribute/Skill/SkillsInformation/SkillsInformation.tsx
@@ -85,7 +85,7 @@ const SkillsInformation: React.FC<Props> = ({
         />
       }
     >
-      <FormGroup key={'skills-info-details-id'}>
+      <FormGroup key={'skills-info-details-submission_summary'} label="Submission summary">
         <TextInput
           isRequired
           type="text"
@@ -100,11 +100,12 @@ const SkillsInformation: React.FC<Props> = ({
         {validDescription === ValidatedOptions.error && (
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={validDescription}>
-              Description is required and must be less than 60 characters
+              Required field. Must be less than 60 characters
             </HelperTextItem>
           </HelperText>
         )}
-
+      </FormGroup>
+      <FormGroup key={'skills-info-details-document_outline'} label="Document Outline">
         <TextArea
           isRequired
           type="text"
@@ -119,7 +120,7 @@ const SkillsInformation: React.FC<Props> = ({
         {validOutline === ValidatedOptions.error && (
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={validOutline}>
-              Detailed description is required and must be at least 40 characters
+              Required field. Must be at least 40 characters
             </HelperTextItem>
           </HelperText>
         )}
diff --git a/src/components/Contribute/Skill/SkillsSeedExample/SkillsSeedExample.tsx b/src/components/Contribute/Skill/SkillsSeedExample/SkillsSeedExample.tsx
index b599c8c..9eea5d9 100644
--- a/src/components/Contribute/Skill/SkillsSeedExample/SkillsSeedExample.tsx
+++ b/src/components/Contribute/Skill/SkillsSeedExample/SkillsSeedExample.tsx
@@ -83,7 +83,7 @@ const SkillsSeedExample: React.FC<Props> = ({
             />
           }
         >
-          <FormGroup key={seedExampleIndex}>
+          <FormGroup isRequired key={seedExampleIndex + '-question'} label="Question">
             <TextArea
               key={seedExampleIndex * 10 + 2}
               isRequired
@@ -99,11 +99,13 @@ const SkillsSeedExample: React.FC<Props> = ({
               <FormHelperText key={seedExampleIndex * 100 + 2}>
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.isQuestionValid}>
-                    {seedExample.questionValidationError || 'Question is required. '}
+                    {seedExample.questionValidationError || 'Required field '}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>
             )}
+          </FormGroup>
+          <FormGroup key={seedExampleIndex + '-context'} label="Context">
             <TextArea
               key={seedExampleIndex * 10 + 1}
               isRequired
@@ -115,7 +117,8 @@ const SkillsSeedExample: React.FC<Props> = ({
               onChange={(_event, contextValue: string) => handleContextInputChange(seedExampleIndex, contextValue)}
               onBlur={() => handleContextBlur(seedExampleIndex)}
             />
-
+          </FormGroup>
+          <FormGroup isRequired key={seedExampleIndex + '-answer'} label="Answer">
             <TextArea
               key={seedExampleIndex * 10 + 3}
               isRequired
@@ -131,7 +134,7 @@ const SkillsSeedExample: React.FC<Props> = ({
               <FormHelperText key={seedExampleIndex * 100 + 4}>
                 <HelperText>
                   <HelperTextItem icon={<ExclamationCircleIcon />} variant={seedExample.isAnswerValid}>
-                    {seedExample.answerValidationError || 'Answer is required.'}
+                    {seedExample.answerValidationError || 'Required field'}
                   </HelperTextItem>
                 </HelperText>
               </FormHelperText>
diff --git a/src/components/PathService/PathService.tsx b/src/components/PathService/PathService.tsx
index 6c80b9f..29544e4 100644
--- a/src/components/PathService/PathService.tsx
+++ b/src/components/PathService/PathService.tsx
@@ -149,7 +149,7 @@ const PathService: React.FC<PathServiceProps> = ({ reset, rootPath, path, handle
         <FormHelperText>
           <HelperText>
             <HelperTextItem icon={<ExclamationCircleIcon />} variant={validPath}>
-              Please select a valid file path.
+              Required field
             </HelperTextItem>
           </HelperText>
         </FormHelperText>