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

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

const getRegionsByServiceType = serviceType => {
  switch (serviceType) {
    case "aws-s3":
      return SERVICE_METADATA.s3.regions;
    case "aws-ses":
      return SERVICE_METADATA.ses.regions;
    case "aws-sns":
      return SERVICE_METADATA.sns.regions;
    default:
      // some other unknown aws service. fall back to using S3 regions
      // so there's at least a non-empty default.
      return SERVICE_METADATA.s3.regions;
  }
};

class EditConfig extends BaseConfigEditor {
  render() {
    const {
      configSaveError,
      savingConfig,
      serviceConfig,
      serviceConfigInputs,
      alertKey
    } = this.props;
    const regions = getRegionsByServiceType(serviceConfig.type);
    return (
      <div className="service-config">
        <Banner message={configSaveError} error />
        <FormRow>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor="region">
              Region
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <select
              name="region"
              value={serviceConfigInputs.get("region")}
              onChange={e => this.setConfigInput("region", e)}
            >
              {regions.map(r =>
                <option key={r} value={r}>
                  {r}
                </option>
              )}
            </select>
          </FormRowInputGroup>
        </FormRow>
        <FormRow>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor="accessKeyId">
              Access Key ID
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              name="accessKeyId"
              type="text"
              className="text-input form-row-text-input"
              placeholder="ACCESS-KEY-ID"
              value={serviceConfigInputs.get("accessKeyId")}
              onChange={e => this.setConfigInput("accessKeyId", e)}
            />
          </FormRowInputGroup>
        </FormRow>
        <FormRow last>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor="secretAccessKey">
              Secret Access Key
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <MaskedInput
              name="secretAccessKey"
              className="text-input form-row-text-input"
              placeholder="SECRET-ACCESS-KEY"
              value={serviceConfigInputs.get("secretAccessKey")}
              onChange={e => this.setConfigInput("secretAccessKey", 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
)(EditConfig);