Improve rule creation interface

Gemfile

@@ -87,3 +87,6 @@ gem 'gravatar_image_tag'
 
 # Captcha for brimir
 gem 'recaptcha', require: 'recaptcha/rails'
+
+# React support
+gem 'react-rails'

Gemfile.lock

@@ -38,6 +38,10 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.4.0)
     arel (6.0.3)
+    babel-source (5.8.35)
+    babel-transpiler (0.7.0)
+      babel-source (>= 4.0, < 6)
+      execjs (~> 2.0)
     bcrypt (3.1.11)
     builder (3.2.2)
     byebug (8.2.5)
@@ -71,6 +75,7 @@ GEM
       compass (~> 1.0.0)
       sass-rails (< 5.1)
       sprockets (< 2.13)
+    connection_pool (2.2.0)
     coveralls (0.8.13)
       json (~> 1.8)
       simplecov (~> 0.11.0)
@@ -209,6 +214,13 @@ GEM
     rb-fsevent (0.9.7)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
+    react-rails (1.9.0)
+      babel-transpiler (>= 0.7.0)
+      coffee-script-source (~> 1.8)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
     recaptcha (3.3.0)
       json
     responders (2.2.0)
@@ -285,6 +297,7 @@ DEPENDENCIES
   rails (~> 4.2.0)
   rails-i18n
   rake
+  react-rails
   recaptcha
   sass-rails (~> 5.0.0)
   select2-rails (~> 3.5)
@@ -296,4 +309,4 @@ DEPENDENCIES
   will_paginate
 
 BUNDLED WITH
-   1.12.5
+   1.13.6

app/assets/javascripts/application.js

@@ -12,6 +12,9 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require react
+//= require react_ujs
+//= require components
 //= require foundation
 //= require select2
 //= require tinymce-jquery

app/assets/javascripts/components.js

@@ -0,0 +1 @@
+//= require_tree ./components

app/assets/javascripts/components/rule_fields.es6.jsx

@@ -0,0 +1,52 @@
+class RuleFields extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { operation: 'assign_label' };
+    /* XXX Why can't we use ES6 fat-arrow for this? Gem too old? */
+    this.operationSelected = this.operationSelected.bind(this);
+  }
+
+  operationSelected(e) {
+    this.setState({
+      operation: e.target.value
+    });
+  }
+
+  options(operation) {
+    return this.props.options[operation].map(function(user) {
+      return <option key={user.key} value={user.key}>{user.value}</option>;
+    });
+  }
+
+  render () {
+    let action_value = <select name="rule[action_value]">
+      {this.options(this.state.operation)}
+    </select>;
+
+    return (
+      <div>
+        <label htmlFor="rule[action_operation]">
+          {this.props.labels.action_operation}
+        </label>
+        <select onChange={this.operationSelected} name="rule[action_operation]">
+          <option value="assign_label">
+            {this.props.labels.assign_label}
+          </option>
+          <option value="change_status">
+            {this.props.labels.change_status}
+          </option>
+          <option value="change_priority">
+            {this.props.labels.change_priority}
+          </option>
+          <option value="assign_user">
+            {this.props.labels.assign_user}
+          </option>
+        </select>
+        <label htmlFor="rule[action_value]">
+          {this.props.labels.action_value}
+        </label>
+        {action_value}
+      </div>
+    );
+  }
+}

app/controllers/rules_controller.rb

@@ -18,6 +18,8 @@ class RulesController < ApplicationController
 
   load_and_authorize_resource :rule
 
+  before_action :load_resources
+
   def index
     @rules = @rules.paginate(page: params[:page])
   end
@@ -63,4 +65,31 @@ def rule_params
       )
     end
 
+    def load_resources
+      @label_options = Label.ordered.map do |l|
+        {
+          key: l.name,
+          value: l.name,
+        }
+      end
+      @users = User.agents.ordered.map do |u|
+        {
+          key: u.email,
+          value: u.email
+        }
+      end
+      @statuses = Ticket.statuses.except(:merged).map do |s,i|
+        {
+          key: s,
+          value: t(s, scope: 'activerecord.attributes.ticket.statuses')
+        }
+      end
+      @priorities = Ticket.priorities.map do |p,i|
+        {
+          key: p,
+          value: t(p)
+        }
+      end
+    end
+
 end

app/views/rules/_form.html.erb

@@ -13,9 +13,22 @@
 
       <%= f.text_field :filter_value %>
 
-      <%= f.collection_select(:action_operation, t('activerecord.attributes.rule.action_operations'), :first, :last) %>
-
-      <%= f.text_field :action_value %>
+      <%= react_component('RuleFields', {
+          labels: {
+            action_operation: t('activerecord.attributes.rule.action_operation'),
+            action_value: t('activerecord.attributes.rule.action_value'),
+            assign_label: t('activerecord.attributes.rule.action_operations.assign_label'),
+            change_status: t('activerecord.attributes.rule.action_operations.change_status'),
+            change_priority: t('activerecord.attributes.rule.action_operations.change_priority'),
+            assign_user: t('activerecord.attributes.rule.action_operations.assign_user'),
+          },
+          options: {
+            assign_label: @label_options,
+            assign_user: @users,
+            change_status: @statuses,
+            change_priority: @priorities
+          }
+      }) %>
     </div>
   </div>