stitch-ui/src/incomingwebhooks/components/IncomingWebhookEditor.js

// TODO refactor refs
/* eslint-disable react/no-string-refs */
import PropTypes from "prop-types";
import React from "react";
import ClipboardButton from "react-clipboard.js";
import FontAwesome from "react-fontawesome";
import { AlertContainer } from "../../alert";
import PipelineEditor from "../../pipelineeditor/components/PipelineEditor";
import { PIPELINE_KEY } from "../actions";
import {
  Banner,
  Tooltip,
  Button,
  FormRow,
  FormRowLabelGroup,
  FormRowInputGroup,
  Panel,
  SplitPanel
} from "../../core";
import { IncomingWebhook } from "../../models";
import { findServiceDefinition } from "../../services/registry";

export default class IncomingWebhookEditor extends React.Component {
  constructor(props) {
    super(props);
    this.save = this.save.bind(this);
  }
  save(pipeline) {
    const webhook = new IncomingWebhook({
      name: this.props.editing.name,
      pipeline,
      output: pipeline.output,
      respondResult: this.props.editing.respondResult,
      options: this.props.editing.options.toJS()
    });

    if (this.props.editing._id) {
      const webhookWithId = webhook.set("_id", this.props.editing._id);
      return this.props
        .updateIncomingWebhook(webhookWithId.toRaw())
        .then(() => this.props.addAlert("Saved"))
        .catch(() => {});
    }
    return this.props
      .createIncomingWebhook(webhook.toRaw())
      .then(() => this.props.addAlert("Created"))
      .catch(() => {});
  }

  render() {
    const {
      error,
      svcname,
      services,
      editing,
      discardChanges,
      setWebhookOptions,
      editingPipeline,
      setRespondResult,
      setName,
      remove,
      cancel,
      incomingWebhookUrl
    } = this.props;
    const svcdef = findServiceDefinition(svcname, services);
    let incomingWebhookOptionsEditor = null;
    if (svcdef && editing && svcdef.incomingWebhookOptionsEditor) {
      incomingWebhookOptionsEditor = React.createElement(
        svcdef.incomingWebhookOptionsEditor,
        {
          options: editing.options,
          setWebhookOptions
        }
      );
    }
    return (
      <SplitPanel right>
        <Panel
          dirty={editing.dirty || (editingPipeline && editingPipeline.dirty)}
        >
          <div className="panel-header">
            <h3 className="panel-header-title">
              {editing.name}
            </h3>
            <div className="panel-header-actions">
              <AlertContainer alertKey="incomingWebhookEditor" />
              <button
                type="button"
                onClick={() =>
                  this.pipelineEditor.getWrappedInstance().child.submit()}
                className="button button-is-small button-is-primary"
              >
                {editing._id ? "Save" : "Create"}
              </button>
              <button
                type="button"
                className="button button-is-small button-is-default"
                onClick={cancel}
              >
                Cancel
              </button>
              {editing._id &&
                <Button small onClick={remove}>
                  Delete<FontAwesome name="trash" />
                </Button>}
            </div>
          </div>
          <Banner message={error} error />
          <div className="panel-content">
            {editing._id &&
              <FormRow>
                <FormRowLabelGroup>
                  <label className="form-row-label" htmlFor="webhook-url">
                    Webhook URL
                  </label>
                  <Tooltip
                    dataFor="webhook-url-tooltip"
                    place="top"
                    classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-primary"
                    effect="float"
                  >
                    This is the callback URL for an incoming webhook from this
                    third-party service to execute a Stitch pipeline.
                  </Tooltip>
                </FormRowLabelGroup>
                <FormRowInputGroup>
                  <pre>
                    <code className="hljs">
                      {incomingWebhookUrl}
                    </code>
                  </pre>
                  <ClipboardButton
                    data-clipboard-text={incomingWebhookUrl}
                    button-className="button button-is-small button-is-default"
                    onSuccess={() => this.props.addAlert("Copied!", "Copied!")}
                  >
                    Copy to Clipboard
                  </ClipboardButton>
                </FormRowInputGroup>
              </FormRow>}
            <FormRow>
              <FormRowLabelGroup>
                <label className="form-row-label" htmlFor="webhook-name">
                  Name
                </label>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                <input
                  name="webhookName"
                  className="text-input form-row-text-input"
                  value={editing.name}
                  onChange={e => setName(e.target.value)}
                />
              </FormRowInputGroup>
            </FormRow>
            <FormRow>
              <FormRowLabelGroup>
                <label className="form-row-label" htmlFor="respondResult">
                  Respond with Result
                </label>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                <div className="slide-toggle-round-container">
                  <div className="switch">
                    <input
                      id="respondResult"
                      type="checkbox"
                      name="respondResult"
                      ref="respondResult"
                      checked={!!editing.respondResult}
                      onChange={e => setRespondResult(e.target.checked)}
                      className="slide-toggle-round"
                    />
                    <label htmlFor="respondResult" />
                  </div>
                </div>
              </FormRowInputGroup>
            </FormRow>
            {incomingWebhookOptionsEditor}
            <PipelineEditor
              ref={pipelineEditor => (this.pipelineEditor = pipelineEditor)}
              pipelineKey={PIPELINE_KEY}
              onSubmit={this.save}
              alertKey="ignored"
              saveButtonText="Save"
              services={services}
            />
            {(editing.dirty || editingPipeline.dirty) &&
              <div className="panel-discard">
                <div className="panel-discard-modified">
                  You have unsaved changes.
                </div>
                <div className="panel-discard-controls">
                  <Button small default onClick={discardChanges}>
                    Discard Changes
                  </Button>
                </div>
              </div>}
          </div>
        </Panel>
      </SplitPanel>
    );
  }
}

IncomingWebhookEditor.propTypes = {
  error: PropTypes.string,
  addAlert: PropTypes.func.isRequired,
  svcname: PropTypes.string.isRequired,
  services: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  editing: PropTypes.instanceOf(IncomingWebhook).isRequired,
  discardChanges: PropTypes.func.isRequired,
  setWebhookOptions: PropTypes.func.isRequired,
  editingPipeline: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  setRespondResult: PropTypes.func.isRequired,
  setName: PropTypes.func.isRequired,
  incomingWebhookUrl: PropTypes.string.isRequired,
  remove: PropTypes.func.isRequired,
  cancel: PropTypes.func.isRequired,
  updateIncomingWebhook: PropTypes.func.isRequired,
  createIncomingWebhook: PropTypes.func.isRequired
};

IncomingWebhookEditor.defaultProps = {
  error: ""
};