Merge pull request #205 from topcoder-platform/PROD-2439_save-draft

mmattlin · web-flow · commit bf59292768be · 2022-07-22T08:29:02.000-07:00
PROD-2439 Save Draft -&gt; PROD-2321
diff --git a/src-ts/lib/contact-support-form/contact-support-form.config.ts b/src-ts/lib/contact-support-form/contact-support-form.config.ts
@@ -12,7 +12,7 @@ export const contactSupportFormDef: FormDefinition = {
         primaryGroup: [
             {
                 buttonStyle: 'secondary',
-                isSave: true,
+                isSubmit: true,
                 label: 'Submit',
                 size: 'lg',
                 type: 'submit',
diff --git a/src-ts/lib/form/Form.tsx b/src-ts/lib/form/Form.tsx
@@ -15,7 +15,7 @@ import { Button } from '../button'
 import '../styles/index.scss'
 import { IconOutline } from '../svgs'
 
-import { FormButton, FormDefinition, FormInputModel } from '.'
+import { FormAction, FormButton, FormDefinition, FormInputModel } from '.'
 import {
     formGetInputFields,
     formInitializeValues,
@@ -29,6 +29,7 @@ import { FormGroups } from './form-groups'
 import styles from './Form.module.scss'
 
 interface FormProps<ValueType, RequestType> {
+    readonly action?: FormAction // only type submit will perform validation
     readonly formDef: FormDefinition
     readonly formValues?: ValueType
     readonly onChange?: (inputs: ReadonlyArray<FormInputModel>) => void,
@@ -99,7 +100,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
 
         async function onSubmitAsync(event: FormEvent<HTMLFormElement>): Promise<void> {
             const values: RequestType = props.requestGenerator(inputs)
-            formOnSubmitAsync<RequestType>(event, formDef, values, props.save, props.onSuccess)
+            formOnSubmitAsync<RequestType>(props.action || 'submit', event, formDef, values, props.save, props.onSuccess)
                 .then(() => {
                     setFormKey(Date.now())
                     formOnReset(inputs, props.formValues)
@@ -129,7 +130,7 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
                     <Button
                         {...button}
                         key={button.label || `button-${index}`}
-                        disable={isPrimaryGroup && isFormInvalid}
+                        disable={button.isSubmit && isFormInvalid}
                         tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
                     />
                 )
diff --git a/src-ts/lib/form/form-button.model.ts b/src-ts/lib/form/form-button.model.ts
@@ -6,7 +6,7 @@ export interface FormButton {
     readonly buttonStyle?: ButtonStyle
     readonly icon?: FC<SVGProps<SVGSVGElement>>
     readonly isReset?: boolean
-    readonly isSave?: boolean
+    readonly isSubmit?: boolean
     readonly label?: string
     readonly notTabble?: boolean
     onClick?: (event?: any) => void
diff --git a/src-ts/lib/form/form-definition.model.ts b/src-ts/lib/form/form-definition.model.ts
@@ -1,5 +1,7 @@
 import { FormButton, FormGroup } from '.'
 
+export type FormAction = 'save' | 'submit' | undefined
+
 export interface FormButtons {
     primaryGroup: ReadonlyArray<FormButton>
     secondaryGroup?: ReadonlyArray<FormButton>
diff --git a/src-ts/lib/form/form-functions/form.functions.ts b/src-ts/lib/form/form-functions/form.functions.ts
@@ -1,7 +1,7 @@
 import { ChangeEvent, FormEvent } from 'react'
 import { toast } from 'react-toastify'
 
-import { FormDefinition } from '../form-definition.model'
+import { FormAction, FormDefinition } from '../form-definition.model'
 import { FormGroup } from '../form-group.model'
 import { FormInputModel } from '../form-input.model'
 
@@ -31,11 +31,11 @@ export function getInputModel(inputs: ReadonlyArray<FormInputModel>, fieldName:
 
 export function initializeValues<T>(inputs: Array<FormInputModel>, formValues?: T): void {
     inputs
-        .filter(input =>  !input.dirty && !input.touched)
+        .filter(input => !input.dirty && !input.touched)
         .forEach(input => {
             input.value = !!(formValues as any)?.hasOwnProperty(input.name)
-            ? (formValues as any)[input.name]
-            : undefined
+                ? (formValues as any)[input.name]
+                : undefined
         })
 }
 
@@ -58,6 +58,7 @@ export function onReset(inputs: ReadonlyArray<FormInputModel>, formValue?: any):
 }
 
 export async function onSubmitAsync<T>(
+    action: FormAction,
     event: FormEvent<HTMLFormElement>,
     formDef: FormDefinition,
     formValue: T,
@@ -78,9 +79,11 @@ export async function onSubmitAsync<T>(
     // could have a form that's not dirty but has errors and you wouldn't
     // want to have it look like the submit succeeded
     const formValues: HTMLFormControlsCollection = (event.target as HTMLFormElement).elements
-    const isValid: boolean = validateForm(formValues, 'submit', inputs)
-    if (!isValid) {
-        return Promise.reject()
+    if (action === 'submit') {
+        const isValid: boolean = validateForm(formValues, action, inputs)
+        if (!isValid) {
+            return Promise.reject()
+        }
     }
 
     // set the properties for the updated T value
@@ -170,9 +173,9 @@ function validateField(formInputDef: FormInputModel, formElements: HTMLFormContr
 
 export function validateForm(formElements: HTMLFormControlsCollection, event: 'blur' | 'change' | 'submit' | 'initial', inputs: ReadonlyArray<FormInputModel>): boolean {
     const errors: ReadonlyArray<FormInputModel> = inputs?.filter(formInputDef => {
-            formInputDef.dirty = formInputDef.dirty || event === 'submit'
-            validateField(formInputDef, formElements, event)
-            return !!formInputDef.error
-        })
+        formInputDef.dirty = formInputDef.dirty || event === 'submit'
+        validateField(formInputDef, formElements, event)
+        return !!formInputDef.error
+    })
     return !errors.length
 }
diff --git a/src-ts/lib/styles/_buttons.scss b/src-ts/lib/styles/_buttons.scss
@@ -23,7 +23,7 @@
     border: solid $border;
     white-space: nowrap;
     cursor: pointer;
-    font-family: $font-roboto; 
+    font-family: $font-roboto;
     font-weight: $font-weight-bold;
     font-size: 11px;
     line-height: 24px;
@@ -32,7 +32,7 @@
     &.primary,
     &.secondary {
 
-        &:focus {
+        &:not(.disabled):focus {
             outline: $border solid $turq-140;
         }
     }
@@ -47,7 +47,7 @@
         padding: $border $pad-xl;
         font-size: 13px;
     }
-    
+
     &.button-md {
         padding: 3*$border $pad-xl;
         font-size: 13px;
@@ -57,7 +57,7 @@
         padding: $pad-sm $pad-xxl;
         font-size: 14px;
     }
-    
+
     &.button-xl {
         padding: $pad-md $pad-xxl;
         font-size: 16px;
@@ -85,6 +85,7 @@
             color: $black-60;
             background-color: $black-5;
             border-color: $black-5;
+            cursor: default;
         }
     }
 
@@ -105,6 +106,7 @@
             color: $black-60;
             background-color: $black-5;
             border-color: $black-5;
+            cursor: default;
         }
     }
 
@@ -125,6 +127,7 @@
             color: $black-60;
             background-color: $tc-white;
             border-color: $black-5;
+            cursor: default;
         }
     }
 
@@ -156,6 +159,7 @@
             color: $black-60;
             background-color: $tc-white;
             border-color: $black-5;
+            cursor: default;
         }
 
         svg {
diff --git a/src-ts/tools/work/work-detail-header/WorkFeedback/work-feedback-form.config.ts b/src-ts/tools/work/work-detail-header/WorkFeedback/work-feedback-form.config.ts
@@ -5,7 +5,7 @@ export const workFeedbackFormDef: FormDefinition = {
         primaryGroup: [
             {
                 buttonStyle: 'primary',
-                isSave: true,
+                isSubmit: true,
                 label: 'Mark as done',
                 size: 'xl',
                 type: 'submit',
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/BugHuntIntakeForm.tsx
@@ -3,6 +3,7 @@ import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
 
 import {
     Form,
+    FormAction,
     FormDefinition,
     formGetInputModel,
     FormInputModel,
@@ -45,9 +46,13 @@ const BugHuntIntakeForm: React.FC = () => {
     const isMobile: boolean = useCheckIsMobile()
     const { isLoggedIn }: ProfileContextData = useContext<ProfileContextData>(profileContext)
 
-    let action: string = ''
-    BugHuntFormConfig.buttons.primaryGroup[0].onClick = () => { action = 'save' }
-    BugHuntFormConfig.buttons.primaryGroup[1].onClick = () => { action = 'submit' }
+    const [action, setAction]: [FormAction, Dispatch<SetStateAction<FormAction>>] = useState()
+
+    BugHuntFormConfig.buttons.primaryGroup[0].onClick = () => { setAction('save') }
+    BugHuntFormConfig.buttons.primaryGroup[1].onClick = () => { setAction('submit') }
+    if (BugHuntFormConfig.buttons.secondaryGroup) {
+        BugHuntFormConfig.buttons.secondaryGroup[0].onClick = () => { navigate(-1) }
+    }
 
     const [challenge, setChallenge]: [Challenge | undefined, Dispatch<SetStateAction<Challenge | undefined>>] = useState()
     const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
@@ -180,6 +185,7 @@ const BugHuntIntakeForm: React.FC = () => {
                     onSuccess={onSaveSuccess}
                     requestGenerator={requestGenerator}
                     save={onSave}
+                    action={action}
                 />
             </div>
         </>
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
@@ -15,6 +15,7 @@ export const BugHuntFormConfig: FormDefinition = {
             },
             {
                 buttonStyle: 'primary',
+                isSubmit: true,
                 label: 'Complete and pay',
                 onClick: () => { },
                 type: 'submit',
@@ -92,7 +93,7 @@ export const BugHuntFormConfig: FormDefinition = {
                 {
                     label: 'Features to test (optional)',
                     name: ChallengeMetadataName.featuresToTest,
-                    placeholder: 'List the sepcific features',
+                    placeholder: 'List the specific features',
                     type: 'textarea',
                 },
             ],
diff --git a/src-ts/utils/settings/account/change-password/change-password-form.config.ts b/src-ts/utils/settings/account/change-password/change-password-form.config.ts
@@ -21,7 +21,7 @@ export const changePasswordFormDef: FormDefinition = {
         primaryGroup: [
             {
                 buttonStyle: 'secondary',
-                isSave: true,
+                isSubmit: true,
                 label: 'Change password',
                 size: 'xl',
                 type: 'submit',
@@ -80,7 +80,7 @@ export const changePasswordFormDef: FormDefinition = {
                 {
                     autocomplete: FormInputAutocompleteOption.off,
                     dependentFields: [
-                         ChangePasswordFieldName.newPassword,
+                        ChangePasswordFieldName.newPassword,
                     ],
                     label: 'Confirm Password',
                     name: ChangePasswordFieldName.confirmPassword,
diff --git a/src-ts/utils/settings/account/edit-name/edit-name-form.config.ts b/src-ts/utils/settings/account/edit-name/edit-name-form.config.ts
@@ -12,7 +12,7 @@ export const editNameFormDef: FormDefinition = {
         primaryGroup: [
             {
                 buttonStyle: 'secondary',
-                isSave: true,
+                isSubmit: true,
                 label: 'Save',
                 size: 'lg',
                 type: 'submit',

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export const contactSupportFormDef: FormDefinition = {`
`12`	`12`	`primaryGroup: [`
`13`	`13`	`{`
`14`	`14`	`buttonStyle: 'secondary',`
`15`		`- isSave: true,`
	`15`	`+ isSubmit: true,`
`16`	`16`	`label: 'Submit',`
`17`	`17`	`size: 'lg',`
`18`	`18`	`type: 'submit',`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`border: solid $border;`
`24`	`24`	`white-space: nowrap;`
`25`	`25`	`cursor: pointer;`
`26`		`- font-family: $font-roboto;`
	`26`	`+ font-family: $font-roboto;`
`27`	`27`	`font-weight: $font-weight-bold;`
`28`	`28`	`font-size: 11px;`
`29`	`29`	`line-height: 24px;`
`@@ -32,7 +32,7 @@`
`32`	`32`	`&.primary,`
`33`	`33`	`&.secondary {`
`34`	`34`
`35`		`- &:focus {`
	`35`	`+ &:not(.disabled):focus {`
`36`	`36`	`outline: $border solid $turq-140;`
`37`	`37`	`}`
`38`	`38`	`}`
`@@ -47,7 +47,7 @@`
`47`	`47`	`padding: $border $pad-xl;`
`48`	`48`	`font-size: 13px;`
`49`	`49`	`}`
`50`		`-`
	`50`	`+`
`51`	`51`	`&.button-md {`
`52`	`52`	`padding: 3*$border $pad-xl;`
`53`	`53`	`font-size: 13px;`
`@@ -57,7 +57,7 @@`
`57`	`57`	`padding: $pad-sm $pad-xxl;`
`58`	`58`	`font-size: 14px;`
`59`	`59`	`}`
`60`		`-`
	`60`	`+`
`61`	`61`	`&.button-xl {`
`62`	`62`	`padding: $pad-md $pad-xxl;`
`63`	`63`	`font-size: 16px;`
`@@ -85,6 +85,7 @@`
`85`	`85`	`color: $black-60;`
`86`	`86`	`background-color: $black-5;`
`87`	`87`	`border-color: $black-5;`
	`88`	`+ cursor: default;`
`88`	`89`	`}`
`89`	`90`	`}`
`90`	`91`
`@@ -105,6 +106,7 @@`
`105`	`106`	`color: $black-60;`
`106`	`107`	`background-color: $black-5;`
`107`	`108`	`border-color: $black-5;`
	`109`	`+ cursor: default;`
`108`	`110`	`}`
`109`	`111`	`}`
`110`	`112`
`@@ -125,6 +127,7 @@`
`125`	`127`	`color: $black-60;`
`126`	`128`	`background-color: $tc-white;`
`127`	`129`	`border-color: $black-5;`
	`130`	`+ cursor: default;`
`128`	`131`	`}`
`129`	`132`	`}`
`130`	`133`
`@@ -156,6 +159,7 @@`
`156`	`159`	`color: $black-60;`
`157`	`160`	`background-color: $tc-white;`
`158`	`161`	`border-color: $black-5;`
	`162`	`+ cursor: default;`
`159`	`163`	`}`
`160`	`164`
`161`	`165`	`svg {`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export const workFeedbackFormDef: FormDefinition = {`
`5`	`5`	`primaryGroup: [`
`6`	`6`	`{`
`7`	`7`	`buttonStyle: 'primary',`
`8`		`- isSave: true,`
	`8`	`+ isSubmit: true,`
`9`	`9`	`label: 'Mark as done',`
`10`	`10`	`size: 'xl',`
`11`	`11`	`type: 'submit',`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export const editNameFormDef: FormDefinition = {`
`12`	`12`	`primaryGroup: [`
`13`	`13`	`{`
`14`	`14`	`buttonStyle: 'secondary',`
`15`		`- isSave: true,`
	`15`	`+ isSubmit: true,`
`16`	`16`	`label: 'Save',`
`17`	`17`	`size: 'lg',`
`18`	`18`	`type: 'submit',`