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

import PropTypes from "prop-types";
/* eslint-disable react/no-array-index-key */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from "react";
import { connect } from "react-redux";

import * as actions from "../actions";
import * as pipelineActions from "../../pipelineeditor/actions";
import { IncomingWebhook } from "../../models";
import { servicesByType } from "../../services/registry";
import IncomingWebhookDisplay from "./IncomingWebhookDisplay";
import IncomingWebhookEditor from "./IncomingWebhookEditor";
import { addAlert } from "../../alert";
import {
  Button,
  SplitPanelContainer,
  SplitPanel,
  Confirm,
  EditList,
  EditListHeader
} from "../../core";

class EditIncomingWebhooks extends React.Component {
  constructor(props) {
    super(props);
    this.getIncomingWebhookUrl = this.getIncomingWebhookUrl.bind(this);
    this.newIncomingWebhook = this.newIncomingWebhook.bind(this);
    this.removeIncomingWebhook = this.removeIncomingWebhook.bind(this);
    this.cancelEditIncomingWebhook = this.cancelEditIncomingWebhook.bind(this);
  }
  componentDidMount() {
    this.props.setNotEditing();
    this.props.loadIncomingWebhooks();
  }
  getIncomingWebhookUrl(incomingWebhookId) {
    return `${this.props.settings.apiUrl}/api/client/v1.0/app/${this.props.app
      .clientAppId}/svc/${this.props
      .svcname}/incomingWebhook/${incomingWebhookId}`;
  }
  removeIncomingWebhook(incomingWebhookId) {
    return Confirm.confirm(
      "Are you sure you want to remove this webhook?"
    ).then(
      () =>
        this.props
          .removeIncomingWebhook(incomingWebhookId)
          .then(this.props.setNotEditing)
          .then(this.props.loadIncomingWebhooks),
      () => Promise.resolve()
    );
  }

  cancelEditIncomingWebhook() {
    this.props.setNotEditing(this.props.loadIncomingWebhooks, Promise.resolve);
  }

  newIncomingWebhook() {
    const defaultIncomingWebhook = servicesByType.get(
      this.props.services[this.props.svcname].type
    ).defaultIncomingWebhook;
    this.props.setEditing(defaultIncomingWebhook.name, defaultIncomingWebhook);
  }

  render() {
    const {
      addAlert, // eslint-disable-line no-shadow
      editing,
      incomingWebhooks,
      loadIncomingWebhooks,
      saveWebhookError,
      createWebhookError,
      services,
      setEditing,
      setError,
      setWebhookOptions,
      setRespondResult,
      setWebhookName,
      editingPipeline,
      svcname,
      discardChanges,
      updateIncomingWebhook,
      createIncomingWebhook
    } = this.props;

    return (
      <SplitPanelContainer>
        <SplitPanel left>
          <EditListHeader>
            <h3>Webhooks</h3>
            <Button small primary onClick={this.newIncomingWebhook}>
              New Webhook
            </Button>
          </EditListHeader>
          <EditList>
            {incomingWebhooks
              .map((v, k) =>
                <IncomingWebhookDisplay
                  key={k}
                  _id={k}
                  name={v.name}
                  editing={editing}
                  setEditing={() => setEditing(k, IncomingWebhook.fromRaw(v))}
                />
              )
              .toArray()}
          </EditList>
        </SplitPanel>
        {editing &&
          <IncomingWebhookEditor
            addAlert={addAlert}
            error={saveWebhookError || createWebhookError}
            editing={editing}
            setError={setError}
            discardChanges={discardChanges}
            setRespondResult={setRespondResult}
            setName={setWebhookName}
            editingPipeline={editingPipeline}
            setWebhookOptions={setWebhookOptions}
            incomingWebhookUrl={this.getIncomingWebhookUrl(editing._id)}
            remove={() => this.removeIncomingWebhook(editing._id)}
            cancel={() => this.cancelEditIncomingWebhook()}
            updateIncomingWebhook={data =>
              updateIncomingWebhook(editing._id, data)
                .then(loadIncomingWebhooks)
                .then(() => {
                  setEditing(
                    editing._id,
                    IncomingWebhook.fromRaw(
                      this.props.incomingWebhooks.get(editing._id)
                    )
                  );
                })}
            createIncomingWebhook={data => {
              let newEditingId;
              return createIncomingWebhook(data)
                .then(res => {
                  newEditingId = res._id;
                  return loadIncomingWebhooks();
                })
                .then(() => {
                  setEditing(
                    newEditingId,
                    IncomingWebhook.fromRaw(
                      this.props.incomingWebhooks.get(newEditingId)
                    )
                  );
                });
            }}
            svcname={svcname}
            services={services}
          />}
      </SplitPanelContainer>
    );
  }
}

const mapStateToProps = state => {
  const { incomingWebhooks, editing } = state.incomingWebhooks;
  const { services } = state.app.root;
  const { settings } = state.base;
  const {
    saveWebhookError,
    createWebhookError,
    removeWebhookError,
    loadWebhooksError
  } = state.incomingWebhooks;
  const editingPipeline = state.pipeline.pipelines.get(actions.PIPELINE_KEY);
  return {
    settings,
    incomingWebhooks,
    editing,
    editingPipeline,
    services,
    saveWebhookError,
    createWebhookError,
    removeWebhookError,
    loadWebhooksError
  };
};

const mapDispatchToProps = (dispatch, ownProps) => ({
  addAlert: message => dispatch(addAlert("incomingWebhookEditor", message)),
  loadIncomingWebhooks: () =>
    dispatch(
      actions.loadIncomingWebhooks(
        ownProps.app.groupId,
        ownProps.app._id,
        ownProps.svcname
      )
    ),
  createIncomingWebhook: data =>
    dispatch(
      actions.createIncomingWebhook(
        ownProps.app.groupId,
        ownProps.app._id,
        ownProps.svcname,
        data
      )
    ),
  updateIncomingWebhook: (id, data) =>
    dispatch(
      actions.updateIncomingWebhook(
        ownProps.app.groupId,
        ownProps.app._id,
        ownProps.svcname,
        id,
        data
      )
    ),
  removeIncomingWebhook: id =>
    dispatch(
      actions.removeIncomingWebhook(
        ownProps.app.groupId,
        ownProps.app._id,
        ownProps.svcname,
        id
      )
    ),
  setError: e => dispatch(actions.setError(e)),
  setWebhookOptions: opts => dispatch(actions.setWebhookOptions(opts)),
  setNotEditing: () => dispatch(actions.setEditing(null)),
  discardChanges: () => {
    dispatch(actions.discardChanges());
    dispatch(
      pipelineActions.discardChanges({ pipelineKey: actions.PIPELINE_KEY })
    );
  },
  setRespondResult: respondResult =>
    dispatch(actions.setRespondResult({ respondResult })),
  setWebhookName: name => dispatch(actions.setWebhookName({ name })),
  setEditing: (name, incomingWebhook) => {
    dispatch(
      pipelineActions.initPipeline({
        pipelineKey: actions.PIPELINE_KEY,
        pipelineObj: incomingWebhook.pipeline
      })
    );
    dispatch(actions.setEditing(incomingWebhook));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(
  EditIncomingWebhooks
);

EditIncomingWebhooks.propTypes = {
  addAlert: PropTypes.func.isRequired,
  editing: PropTypes.instanceOf(IncomingWebhook),
  settings: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  app: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  incomingWebhooks: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  loadIncomingWebhooks: PropTypes.func.isRequired,
  services: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  setEditing: PropTypes.func.isRequired,
  setNotEditing: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
  setWebhookOptions: PropTypes.func.isRequired,
  setRespondResult: PropTypes.func.isRequired,
  setWebhookName: PropTypes.func.isRequired,
  saveWebhookError: PropTypes.string,
  createWebhookError: PropTypes.string,
  createIncomingWebhook: PropTypes.func.isRequired,
  editingPipeline: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  svcname: PropTypes.string.isRequired,
  discardChanges: PropTypes.func.isRequired,
  updateIncomingWebhook: PropTypes.func.isRequired,
  removeIncomingWebhook: PropTypes.func.isRequired
};

EditIncomingWebhooks.defaultProps = {
  editing: null,
  saveWebhookError: "",
  createWebhookError: "",
  editingPipeline: null
};