render()

in public/pages/Destinations/containers/CreateDestination/CreateDestination.js [186:289]

• 95 lines of code
• 5 McCabe index (conditional complexity)

  render() {
    const { edit, httpClient, location, notifications } = this.props;
    const { initialValues } = this.state;
    return (
      <div style={{ padding: '25px 50px' }}>
        <Formik
          initialValues={initialValues}
          enableReinitialize={true}
          validateOnChange={false}
          onSubmit={this.handleSubmit}
        >
          {({ values, handleSubmit, isSubmitting, errors, isValid }) => (
            <Fragment>
              <EuiTitle size="l">
                <h1>{edit ? 'Edit' : 'Add'} destination</h1>
              </EuiTitle>
              <EuiSpacer size="m" />
              <ContentPanel title="Destination" titleSize="s" bodyStyles={{ padding: 'initial' }}>
                <div style={{ padding: '0px 10px' }}>
                  <FormikFieldText
                    name="name"
                    formRow
                    fieldProps={{
                      validate: validateDestinationName(
                        httpClient,
                        _.get(location, 'state.destinationToEdit')
                      ),
                    }}
                    rowProps={{
                      label: 'Name',
                      helpText: 'Specify a name of the destination.',
                      style: { paddingLeft: '10px' },
                      isInvalid,
                      error: hasError,
                    }}
                    inputProps={{
                      isInvalid,
                      /* To reduce the frequency of search request,
                      the comprehension 'validateDestinationName()' is only called onBlur,
                      but we enable the basic 'required()' validation onChange for good user experience.*/
                      onChange: (e, field, form) => {
                        field.onChange(e);
                        form.setFieldError('name', required(e.target.value));
                      },
                    }}
                  />
                  <FormikSelect
                    name="type"
                    formRow
                    fieldProps={{
                      validate: validateDestinationType(httpClient, notifications),
                    }}
                    rowProps={{
                      label: 'Type',
                      style: { paddingLeft: '10px' },
                      isInvalid,
                      error: hasError,
                    }}
                    inputProps={{
                      disabled: edit,
                      options: this.getAllowedDestinationOptions(),
                      isInvalid,
                    }}
                  />
                  <EuiSpacer size="m" />
                  <SubHeader title={<h4>Settings</h4>} description={''} />
                  <EuiSpacer size="m" />
                  {destinationType[values.type]({
                    httpClient,
                    values,
                    type: values.type,
                    notifications,
                  })}
                </div>
                <EuiSpacer size="m" />
              </ContentPanel>
              <EuiSpacer />
              <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                <EuiFlexItem grow={false}>
                  <EuiButtonEmpty onClick={this.handleCancel}>Cancel</EuiButtonEmpty>
                </EuiFlexItem>
                <EuiFlexItem grow={false}>
                  <EuiButton fill onClick={handleSubmit} isLoading={isSubmitting}>
                    {edit ? 'Update' : 'Create'}
                  </EuiButton>
                </EuiFlexItem>
              </EuiFlexGroup>
              <SubmitErrorHandler
                errors={errors}
                isSubmitting={isSubmitting}
                isValid={isValid}
                onSubmitError={() =>
                  this.props.notifications.toasts.addDanger({
                    title: `Failed to ${edit ? 'update' : 'create'} the destination`,
                    text: 'Fix all highlighted error(s) before continuing.',
                  })
                }
              />
            </Fragment>
          )}
        </Formik>
      </div>
    );
  }