render()

in ui/src/client/components/ModalRoot/CreateSchemaModal/CreateSchemaModal.js [84:177]
81 lines of code
8 McCabe index (conditional complexity)

  render() {
    const {
      isLoading,
      subject,
      avro,
      createdVersion,
      testErrors,
      error,
      tested,
    } = this.state;
    const { closeModal } = this.props;
    return (
      <Modal {...this.props} className="create-schema-modal">

        <ModalHeader
          header="Create new schema"
          onClose={closeModal}
        />

        <ModalBody>

          <div className="create-schema-modal-body">

            <div>
              <span>Subject:</span>
            </div>

            <div className="subject-input">
              <Input
                className="input"
                value={subject}
                onChange={value => this.setState({ subject: value })}
                isError={!subject}
              />
            </div>

            <div>
              <span>Avro Schema:</span>
            </div>

            <SchemaEditor
              avro={avro}
              onChangeValue={newValue => this.setState({ avro: newValue })}
            />

            <TestResult
              tested={tested}
              testErrors={testErrors}
            />

            {error
              ? (
                <div className="error">
                  <span>{error.toString()}</span>
                </div>
              ) : null
            }

            {createdVersion
              ? (
                <div className="version">
                  <span>Created version: </span>
                  <span>{createdVersion}</span>
                </div>
              ) : null
            }

          </div>

        </ModalBody>

        <ModalFooter>
          {isLoading && <Loader type="spinner" color="lime-green" height={36} />}
          <Button
            className="green"
            name="Test"
            disable={isLoading || !subject || !avro}
            onClick={() => this.onTest()}
          />
          <Button
            className="green"
            name="Create"
            disable={isLoading || !subject || !avro}
            onClick={() => this.onPostSchema()}
          />
          <Button
            name="Cancel"
            onClick={closeModal}
            disable={isLoading}
          />
        </ModalFooter>
      </Modal>
    );
  }