App: Refactor Form: Support `errors` and `errorFields` returned from the backend, and add possibility to hide the submit the button

Problem

We recently started returning an errors object in onyxData from the API that contain the latest error related to a form submission. The current Form component does not take into account the new key and no server error message gets displayed when we submit incorrect data.

There are also some cases where we need to hide the submit button but this is currently not possible as it is abstracted away from outside components. Example: when adding a bank account from Plaid, we need to hide the button while Plaid is loading and when the user hasn’t selected a Plaid account yet from the picker.

Since there are a few ongoing PRs that depend on the Form component, I figured it might be a good idea to create a separate PR for this and have the PRs merge with main.

cc @luacmartins @marcaaron

Solution

• Add a getErrorMessage function to Form that extracts the latest error message from the errors object. For API calls that still return an error key, this should still work as the function below checks for both keys.

getErrorMessage() {
    const latestErrorMessage = ErrorUtils.getLatestErrorMessage(this.props.formState);
    return this.props.formState.error || (typeof latestErrorMessage === 'string' ? latestErrorMessage : '');
}

• Rename setErrorMessage in actions/FormActions.js to setErrors.

• Add an optional prop isSubmitButtonVisible to Form that controls the visibility of the submit button. This prop should have a default value of true to not break any existing components that use Form.

• Handle field-specific errors coming from the backend and display them on the inputs that need attention.

• If there are any errorFields, display the errors on the input and display the fixTheErrors.

childrenWrapperWithProps(children) {
    return React.Children.map(children, (child) => {
        ...
        const errorFields = lodashGet(this.props.formState, 'errorFields', {});
        const fieldErrorMessage = _.chain(errorFields[inputID])
            .keys()
            .sortBy()
            .reverse()
            .map(key => errorFields[inputID][key])
            .first()
            .value();

         return React.cloneElement(child, {
             ref: node => this.inputRefs[inputID] = node,
             defaultValue,
             errorText: this.state.errors[inputID] || fieldErrorMessage,
             ...
        }
    }
}

/** Controls the submit button's visibility */
isSubmitButtonVisible: PropTypes.bool,
...

const defaultProps = {
    isSubmitButtonVisible: true,
    ...
};
...

{this.props.isSubmitButtonVisible && (
<FormAlertWithSubmitButton
    buttonText={this.props.submitButtonText}
    isAlertVisible={_.size(this.state.errors) > 0 || Boolean(this.getErrorMessage())}
    isLoading={this.props.formState.isLoading}
    message={_.isEmpty(this.props.formState.errorFields) ? this.getErrorMessage() : null}

    onSubmit={this.submit}
    onFixTheErrorsLinkPressed={() => {
        this.inputRefs[_.first(_.keys(this.state.errors))].focus();
    }}
    containerStyles={[styles.mh0, styles.mt5]}
/>
)}