stitch-ui/src/services/push/gcm/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,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  MaskedInput,
  Button
} from "../../../../core";
import { BaseConfigEditor } from "../../../config";

const INPUT_API_KEY = "apiKey";
const INPUT_SENDER_ID = "senderId";

class EditConfig extends BaseConfigEditor {
  render() {
    const {
      configSaveError,
      savingConfig,
      serviceConfigInputs,
      alertKey
    } = this.props;
    return (
      <div className="service-config">
        <Banner message={configSaveError} error />
        <FormRow>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor="senderId">
              Sender ID
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <input
              type="text"
              className="text-input form-row-text-input"
              placeholder="Sender ID"
              name="senderId"
              value={serviceConfigInputs.get(INPUT_SENDER_ID) || ""}
              onChange={e => this.setConfigInput(INPUT_SENDER_ID, e)}
            />
          </FormRowInputGroup>
        </FormRow>
        <FormRow last>
          <FormRowLabelGroup>
            <label className="form-row-label" htmlFor="apiKey">
              API Key
            </label>
          </FormRowLabelGroup>
          <FormRowInputGroup>
            <MaskedInput
              className="text-input form-row-text-input"
              placeholder="API Key"
              name={INPUT_API_KEY}
              value={serviceConfigInputs.get(INPUT_API_KEY) || ""}
              onChange={e => this.setConfigInput(INPUT_API_KEY, e)}
            />
          </FormRowInputGroup>
        </FormRow>
        <div>
          <Button default disabled={savingConfig} onClick={this.saveConfig}>
            Save
          </Button>
          <Spinner open={savingConfig} />
          <AlertContainer alertKey={alertKey} />
        </div>
      </div>
    );
  }
}

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