stitch-ui/src/services/default/components/ActionRule.js

import React from "react";
import PropTypes from "prop-types";
import { AlertContainer } from "../../../alert";
import {
  Banner,
  Spinner,
  RichJSONEditor,
  Tooltip,
  Panel,
  FormRow,
  FormRowLabelGroup,
  FormRowInputGroup,
  Button
} from "../../../core";

export default class ActionRule extends React.Component {
  constructor(props) {
    super(props);
    this.saveRule = this.saveRule.bind(this);
  }

  saveRule() {
    const ruleToSave = this.props.rule.parse();
    this.props.setRule(ruleToSave);
    if (ruleToSave.hasError()) {
      return null;
    }
    return this.props.saveRule(ruleToSave.toRawRule());
  }
  updateAction(action, e) {
    this.props.setRuleAction(action, e.target.checked);
  }
  render() {
    const {
      rule,
      availableActions,
      alertKey,
      deleteRule,
      discardChanges,
      completer
    } = this.props;
    const { saving, error } = this.props.ruleSaveState;
    return (
      <Panel alone dirty={rule.dirty}>
        <div className="panel-header">
          <h3 className="panel-header-title">Rule</h3>

          <div className="panel-header-actions">
            <Spinner open={saving} />
            <AlertContainer alertKey={alertKey} />
            <Button small primary onClick={this.saveRule}>
              Save
            </Button>
            <Button small default onClick={() => deleteRule(rule._id)}>
              Delete
            </Button>
          </div>
        </div>

        <div className="panel-content">
          {availableActions &&
            <FormRow>
              <FormRowLabelGroup>
                <label className="form-row-label" htmlFor="basic-rule-actions">
                  Actions
                </label>
                <Tooltip
                  dataFor="basic-rule-action-tooltip"
                  place="top"
                  classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-primary"
                  effect="float"
                >
                  Actions that are turned on here will become executable by
                  clients.
                </Tooltip>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                {availableActions.map(action =>
                  <div
                    className="slide-toggle-round-container-list"
                    key={action}
                  >
                    <div className="slide-toggle-round-container">
                      <h5 className="slide-toggle-round-label">
                        {action}
                      </h5>
                      <div className="switch">
                        <input
                          type="checkbox"
                          id={`${rule._id}/actions-${action}`}
                          name={`actions-${action}`}
                          className="slide-toggle-round"
                          onChange={e => this.updateAction(action, e)}
                          checked={rule.actions.contains(action)}
                        />
                        <label htmlFor={`${rule._id}/actions-${action}`} />
                      </div>
                    </div>
                  </div>
                )}
              </FormRowInputGroup>
            </FormRow>}
          <FormRow>
            <FormRowLabelGroup>
              <label
                className="form-row-label"
                htmlFor={`rule-editor/${rule._id}`}
              >
                When
              </label>
              <Banner small message={rule.when.error || error} error />
              <Tooltip
                dataFor="basic-rule-when-tooltip"
                place="top"
                classNames="tooltip-indicator tooltip-indicator-normal tooltip-indicator-primary"
                effect="float"
              >
                The actions above will be allowed to be executed if this
                expression evaluates to true.
              </Tooltip>
            </FormRowLabelGroup>
            <FormRowInputGroup>
              <RichJSONEditor
                completer={completer}
                minLines={5}
                maxLines={10}
                id={`rule-editor/${rule._id}`}
                onChange={this.props.setRuleWhen}
                value={rule.when.input}
              />
            </FormRowInputGroup>
          </FormRow>
        </div>
        {rule.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>}
      </Panel>
    );
  }
}

ActionRule.propTypes = {
  ruleSaveState: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  rule: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
  setRule: PropTypes.func.isRequired,
  deleteRule: PropTypes.func.isRequired,
  setRuleWhen: PropTypes.func.isRequired,
  setRuleAction: PropTypes.func.isRequired,
  saveRule: PropTypes.func.isRequired,
  discardChanges: PropTypes.func.isRequired,
  availableActions: PropTypes.arrayOf(PropTypes.string).isRequired,
  alertKey: PropTypes.string.isRequired,
  completer: PropTypes.object // eslint-disable-line react/forbid-prop-types
};

ActionRule.defaultProps = {
  completer: null,
  serviceType: ""
};