Skip to content

Commit

Permalink
adding gap between form elements skill and knowledge
Browse files Browse the repository at this point in the history 
Signed-off-by: ashapadmashetti <[email protected]>
  • Loading branch information
@ashapadmashetti
ashapadmashetti committed Oct 14, 2024
1 parent 67eefbb commit a7c4cc1
Show file tree
Hide file tree
Showing 11 changed files with 142 additions and 108 deletions.
22 changes: 15 additions & 7 deletions src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -245,7 +253,7 @@ const AttributionInformation: React.FC<Props> = ({
<FormHelperText>
<HelperText>
<HelperTextItem icon={<ExclamationCircleIcon />} variant={validCreators}>
Creators is required.
Required field
</HelperTextItem>
</HelperText>
</FormHelperText>
Expand Down
12 changes: 9 additions & 3 deletions src/components/Contribute/Knowledge/AuthorInformation/AuthorInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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>
Expand Down
143 changes: 74 additions & 69 deletions src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
14 changes: 8 additions & 6 deletions src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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>
)}
Expand Down
6 changes: 3 additions & 3 deletions ...onents/Contribute/Knowledge/KnowledgeQuestionAnswerPairs/KnowledgeQuestionAnswerPairs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Contribute/Knowledge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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) {
Expand Down
Loading

0 comments on commit a7c4cc1

Please sign in to comment.