Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adding gap between form elements skill and knowledge #272

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

adding gap between form elements skill and knowledge #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 15 additions & 7 deletions src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx
View file
Open in desktop
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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to update this text, given that it doesn't only check if the box is empty, but it also checks if the entered string is valid string. I think, let's rephrase it to "URL is required and must be a valid URL".

</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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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