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

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

const INPUT_CLUSTER_NAME = "clusterName";

class EditMongoAtlasConfig extends BaseConfigEditor {
  render() {
    const { serviceConfigInputs } = this.props;
    return (
      <div className="service-config">
        <FormRow last>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor={INPUT_CLUSTER_NAME}>
              Cluster Name
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              type="text"
              className="text-input form-row-text-input"
              placeholder="Cluster0"
              name={INPUT_CLUSTER_NAME}
              value={serviceConfigInputs.get(INPUT_CLUSTER_NAME)}
              disabled="true"
            />
          </FormRowInputGroup>
        </FormRow>
      </div>
    );
  }
}

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