stitch-ui/src/services/mongodb/components/EditConfig.js

import React from "react"; // eslint-disable-line no-unused-vars
import { connect } from "react-redux";
import { AlertContainer } from "../../../alert";
import * as actions from "../../actions";
import {
  Banner,
  Spinner,
  Tooltip,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Button
} from "../../../core";
import { BaseConfigEditor } from "../../config";

const INPUT_URI = "uri";

class EditMongoConfig extends BaseConfigEditor {
  saveConfig() {
    const serviceConfigInputs = this.props.serviceConfigInputs.toJS();
    serviceConfigInputs.uri = serviceConfigInputs.uri.trim();
    this.props.setConfigInput(INPUT_URI, serviceConfigInputs.uri);
    return this.props.onSubmit(serviceConfigInputs);
  }

  render() {
    const {
      configSaveError,
      savingConfig,
      serviceConfigInputs,
      alertKey
    } = this.props;
    return (
      <div className="service-config">
        <Banner message={configSaveError} error />
        <FormRow last>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor={INPUT_URI}>
              MongoDB URL
            </label>
            <Tooltip
              dataFor="uri-tooltip"
              place="bottom"
              classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-secondary"
              effect="float"
            >
              <span>
                Stitch uses a connection string in URI format for connecting to
                the MongoDB deployment.<br />
                You can retrieve the connection string through the MongoDB Atlas
                UI.
              </span>
            </Tooltip>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <textarea
              name={INPUT_URI}
              type="text"
              rows={6}
              className="text-input text-input-for-variable form-row-text-input"
              placeholder="mongodb://host1:27017"
              value={serviceConfigInputs.get(INPUT_URI)}
              onChange={e => this.setConfigInput(INPUT_URI, e)}
            />
          </FormRowInputGroup>
        </FormRow>
        <div>
          <Button
            default
            disabled={savingConfig}
            onClick={this.saveConfig}
            type="button"
          >
            Save
          </Button>
          <Spinner open={savingConfig} />
          <AlertContainer alertKey={alertKey} />
        </div>
      </div>
    );
  }
}

export default connect(
  actions.configEditMapper.mapStateToProps,
  actions.configEditMapper.mapDispatchToProps
)(EditMongoConfig);