Skip to content

Commit

Permalink
adding gap between form elements skill and knowledge
Browse files Browse the repository at this point in the history 
improved validation

Signed-off-by: Asha Padmashetti <asha.padmashetti@gmail.com>
  • Loading branch information
@ashapadmashetti
ashapadmashetti committed Nov 4, 2024
1 parent f783c40 commit 3ee91fc
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 123 deletions.
18 changes: 13 additions & 5 deletions src/components/Contribute/AuthorInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,30 @@ interface Props {
const AuthorInformation: React.FC<Props> = ({ formType, reset, formData, 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 validateEmail = (emailStr: string) => {
const email = emailStr.trim();
const re = /\S+@\S+\.\S+/;
if (re.test(email)) {
setValidEmail(ValidatedOptions.success);
setValidEmailError('');
if (formType === FormType.Knowledge) {
setDisableAction(!checkKnowledgeFormCompletion(formData));
return;
}
setDisableAction(!checkSkillFormCompletion(formData));
return;
}
const errMsg = email ? 'Please enter a valid email address.' : 'Required field';
setDisableAction(true);
setValidEmail(ValidatedOptions.error);
setValidEmailError(errMsg);
return;
};

const validateName = (name: string) => {
const validateName = (nameStr: string) => {
const name = nameStr.trim();
if (name.length > 0) {
setValidName(ValidatedOptions.success);
if (formType === FormType.Knowledge) {
Expand Down Expand Up @@ -81,7 +87,7 @@ const AuthorInformation: React.FC<Props> = ({ formType, reset, formData, setDisa
/>
}
>
<FormGroup isRequired key={'author-info-details-id'}>
<FormGroup isRequired key={'author-info-details-email'} label="Email address">
<TextInput
isRequired
type="email"
Expand All @@ -96,11 +102,13 @@ const AuthorInformation: React.FC<Props> = ({ formType, reset, formData, setDisa
<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 @@ -115,7 +123,7 @@ const AuthorInformation: React.FC<Props> = ({ formType, reset, formData, setDisa
<FormHelperText>
<HelperText>
<HelperTextItem icon={<ExclamationCircleIcon />} variant={validName}>
Name is required.
Required field
</HelperTextItem>
</HelperText>
</FormHelperText>
Expand Down
35 changes: 24 additions & 11 deletions src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,8 @@ const AttributionInformation: React.FC<Props> = ({
setValidCreators(ValidatedOptions.success);
}, [isEditForm]);

const validateTitle = (title: string) => {
const validateTitle = (titleStr: string) => {
const title = titleStr.trim();
if (title.length > 0) {
setValidTitle(ValidatedOptions.success);
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
Expand All @@ -77,7 +78,8 @@ const AttributionInformation: React.FC<Props> = ({
return;
};

const validateLink = (link: string) => {
const validateLink = (linkStr: string) => {
const link = linkStr.trim();
if (link.length === 0) {
setDisableAction(true);
setValidLink(ValidatedOptions.error);
Expand All @@ -95,7 +97,8 @@ const AttributionInformation: React.FC<Props> = ({
}
};

const validateRevision = (revision: string) => {
const validateRevision = (revisionStr: string) => {
const revision = revisionStr.trim();
if (revision.length > 0) {
setValidRevision(ValidatedOptions.success);
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
Expand All @@ -106,7 +109,8 @@ const AttributionInformation: React.FC<Props> = ({
return;
};

const validateLicense = (license: string) => {
const validateLicense = (licenseStr: string) => {
const license = licenseStr.trim();
if (license.length > 0) {
setValidLicense(ValidatedOptions.success);
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
Expand All @@ -117,7 +121,8 @@ const AttributionInformation: React.FC<Props> = ({
return;
};

const validateCreators = (creators: string) => {
const validateCreators = (creatorsStr: string) => {
const creators = creatorsStr.trim();
if (creators.length > 0) {
setValidCreators(ValidatedOptions.success);
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
Expand Down Expand Up @@ -145,7 +150,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 +165,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 @@ -174,6 +179,8 @@ const AttributionInformation: React.FC<Props> = ({
</HelperText>
</FormHelperText>
)}
</FormGroup>
<FormGroup isRequired key={'attribution-info-details-title_work'} label="Work title">
<TextInput
isRequired
type="text"
Expand All @@ -188,11 +195,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 +216,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 +237,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 +258,7 @@ const AttributionInformation: React.FC<Props> = ({
<FormHelperText>
<HelperText>
<HelperTextItem icon={<ExclamationCircleIcon />} variant={validCreators}>
Creators is required.
Required field
</HelperTextItem>
</HelperText>
</FormHelperText>
Expand Down
152 changes: 80 additions & 72 deletions src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,8 @@ const DocumentInformation: React.FC<Props> = ({
}
}, [isEditForm]);

const validateRepo = (repo: string) => {
const validateRepo = (repoStr: string) => {
const repo = repoStr.trim();
if (repo.length === 0) {
setDisableAction(true);
setValidRepo(ValidatedOptions.error);
Expand All @@ -85,7 +86,8 @@ const DocumentInformation: React.FC<Props> = ({
}
};

const validateCommit = (commit: string) => {
const validateCommit = (commitStr: string) => {
const commit = commitStr.trim();
if (commit.length > 0) {
setValidCommit(ValidatedOptions.success);
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
Expand All @@ -96,7 +98,8 @@ const DocumentInformation: React.FC<Props> = ({
return;
};

const validateDocumentName = (documentName: string) => {
const validateDocumentName = (document: string) => {
const documentName = document.trim();
if (documentName.length > 0) {
setValidDocumentName(ValidatedOptions.success);
setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData));
Expand Down Expand Up @@ -257,75 +260,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
Loading

0 comments on commit 3ee91fc

Please sign in to comment.