Enhance Bonnie's Email Capabilities (#1500)

https://jira.cms.gov/browse/MAT-1364
MeasureAuthoringTool · Aug 27, 2020 · 3f24612 · 3f24612
1 parent a99fad0
commit 3f24612
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 30 deletions.
diff --git a/Gemfile b/Gemfile
@@ -42,7 +42,7 @@ group :test, :development, :ci do
   # Pinning teaspoon to 1.1.5 because of sprockets-rails 2.3.3
   gem 'teaspoon', '1.1.5'
   gem "overcommit"
-  gem 'rubocop'
+  gem 'rubocop', '~> 0.88.0'
   gem 'teaspoon-jasmine'
   gem 'simplecov', :require => false
   gem 'minitest'
@@ -88,3 +88,5 @@ gem 'jquery-rails'
 
 # Browser Detection
 gem 'browser'
+
+gem "reverse_markdown", "~> 2.0"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -33,7 +33,7 @@ GIT
 
 GIT
   remote: https://github.com/smartinez87/exception_notification.git
-  revision: cb6f1bc7e5a2b2ccaebc5a38a80590fb883b195c
+  revision: 921961a188262b8a0da625fcb56f19f20e7df0b6
   branch: master
   specs:
     exception_notification (4.4.3)
@@ -93,7 +93,8 @@ GEM
     arel (9.0.0)
     ast (2.4.1)
     bcrypt (3.1.15)
-    brakeman (4.8.2)
+    bigdecimal (2.0.0)
+    brakeman (4.9.0)
     browser (4.2.0)
     bson (4.10.0)
     builder (3.2.4)
@@ -116,8 +117,7 @@ GEM
     childprocess (3.0.0)
     code_analyzer (0.5.2)
       sexp_processor
-    codecov (0.2.2)
-      colorize
+    codecov (0.2.8)
       json
       simplecov
     coderay (1.1.3)
@@ -169,7 +169,7 @@ GEM
     eventmachine (1.2.7)
     execjs (2.7.0)
     ffi (1.13.1)
-    foreman (0.87.1)
+    foreman (0.87.2)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
     handlebars_assets (0.16)
@@ -237,7 +237,8 @@ GEM
       mini_portile2 (~> 2.4.0)
     non-stupid-digest-assets (1.0.9)
       sprockets (>= 2.0)
-    oj (3.10.8)
+    oj (3.10.12)
+      bigdecimal (>= 1.0, < 3)
     orm_adapter (0.5.0)
     overcommit (0.55.0)
       childprocess (>= 0.6.3, < 5)
@@ -304,6 +305,8 @@ GEM
       http-cookie (>= 1.0.2, < 2.0)
       mime-types (>= 1.16, < 4.0)
       netrc (~> 0.8)
+    reverse_markdown (2.0.0)
+      nokogiri
     rexml (3.2.4)
     roo (2.8.3)
       nokogiri (~> 1)
@@ -317,8 +320,8 @@ GEM
       rubocop-ast (>= 0.1.0, < 1.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 2.0)
-    rubocop-ast (0.2.0)
-      parser (>= 2.7.0.1)
+    rubocop-ast (0.3.0)
+      parser (>= 2.7.1.4)
     ruby-progressbar (1.10.1)
     rubyzip (1.3.0)
     rvm1-capistrano3 (1.4.0)
@@ -422,8 +425,9 @@ DEPENDENCIES
   rails-controller-testing
   rails_best_practices
   rest-client
+  reverse_markdown (~> 2.0)
   roo (~> 2.7)
-  rubocop
+  rubocop (~> 0.88.0)
   rubyzip (>= 1.3.0)
   rvm1-capistrano3
   selenium-webdriver

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
@@ -33,6 +33,7 @@
 #= require jquery-color/jquery.color
 #= require bootstrap-file-input/bootstrap.file-input
 #= require MutationObserver-shim/dist/mutationobserver.min
+#= require tinymce/tinymce
 #
 #= require costanza/js/costanza
 #= require costanza/thorax

diff --git a/app/assets/javascripts/templates/users/email_users.hbs b/app/assets/javascripts/templates/users/email_users.hbs
@@ -19,8 +19,8 @@
 				<input type="text" class="form-control" name="subject" id="emailSubject" placeholder="Subject">
 			</div>
 			<div class="form-group">
-				<label for="emailBody">Body</label>
-				<textarea class="form-control" rows="10" name="body" id="emailBody" placeholder="Email body"></textarea>
+				<label for="{{body_area_id}}">Body</label>
+				<textarea class="form-control" rows="10" name="body" id="{{body_area_id}}" placeholder="Email body"></textarea>
 			</div>
 		</form>
 	</div>

diff --git a/app/assets/javascripts/views/users_view.js.coffee b/app/assets/javascripts/views/users_view.js.coffee
@@ -18,13 +18,13 @@ class Thorax.Views.Users extends Thorax.Views.BonnieView
   emailAllUsers: ->
     if !@emailAllUsersView
       @emailAllUsersView = new Thorax.Views.EmailAllUsers()
-      @emailAllUsersView.appendTo(@$el)
+      @emailAllUsersView.appendTo($(document.body))
     @emailAllUsersView.display()
 
   emailActiveUsers: ->
     if !@emailActiveUsersView
       @emailActiveUsersView = new Thorax.Views.EmailActiveUsers()
-      @emailActiveUsersView.appendTo(@$el)
+      @emailActiveUsersView.appendTo($(document.body))
     @emailActiveUsersView.display()
 
 class Thorax.Views.User extends Thorax.Views.BonnieView
@@ -64,29 +64,56 @@ class Thorax.Views.User extends Thorax.Views.BonnieView
   emailUser: ->
     if !@emailUserView
       @emailUserView = new Thorax.Views.EmailUser({email: @model.attributes.email})
-      @emailUserView.appendTo(@$el)
+      @emailUserView.appendTo($(document.body))
     @emailUserView.display()
 
 class Thorax.Views.EmailUsers extends Thorax.Views.BonnieView
   template: JST['users/email_users']
 
   events:
     'ready': 'setup'
-    'keypress input:text': 'enableSend'
-    'keypress textarea': 'enableSend'
+    'keydown input:text': 'enableSend'
+    'change textarea': 'enableSend'
+
+  context: ->
+    @bodyAreaId = 'emailBody' + Date.now()
+    _(super).extend
+      body_area_id: @bodyAreaId
 
   setup: ->
     @emailUsersDialog = @$("#emailUsersDialog")
     @subjectField = @$("#emailSubject")
-    @bodyArea = @$("#emailBody")
+    @bodyAreaSelector = '#' + @bodyAreaId
+    @bodyArea = @$(@bodyAreaSelector)
     @sendButton = @$("#sendButton")
-    @enableSend();
+    @enableSend()
 
   display: ->
+    me = this
     @emailUsersDialog.modal(
-      "backdrop" : "static",
-      "keyboard" : true,
-      "show" : true).find('.modal-dialog').css('width','650px')
+      backdrop: 'static',
+      keyboard: true,
+      show: true).find('.modal-dialog').css('width','650px')
+    tinymce.init({
+      selector: @bodyAreaSelector
+      height: 400
+      plugins: 'link lists'
+      toolbar: 'undo redo | formatselect | bold italic backcolor | ' +
+        'link unlink | numlist bullist outdent indent | ' +
+        'alignleft aligncenter alignright | removeformat'
+      menubar: false
+      statusbar: false
+      setup: (editor) ->
+        editor.on('change', ->
+          editor.save()
+          me.bodyArea.trigger('change')
+        )
+    })
+    # Allow tinymce dialogs to work in Bootstrap
+    $(document).on('focusin', (e) ->
+      if $(e.target).closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root').length
+        e.stopImmediatePropagation()
+    )
 
   enableSend: ->
     @sendButton.prop('disabled', @subjectField.val().length == 0 || @bodyArea.val().length == 0)
@@ -103,6 +130,7 @@ class Thorax.Views.EmailUsers extends Thorax.Views.BonnieView
       'success': ->
         # Kill the subject and body areas if we've successfully sent our message
         me.subjectField.val('')
+        tinymce.activeEditor.setContent('')
         me.bodyArea.val('')
       'complete': @emailUsersDialog.modal('hide')
     })

diff --git a/app/assets/stylesheets/users.less b/app/assets/stylesheets/users.less
@@ -7,6 +7,7 @@
     color: @brand-primary;
   }
   td.user-email {
+    white-space: nowrap;
     i {
       cursor: pointer;
       margin-left: 5px;

diff --git a/app/views/admin/users_mailer/users_email.html.erb b/app/views/admin/users_mailer/users_email.html.erb
@@ -3,6 +3,6 @@
 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
 <title><%= @subject %></title>
 <body>
-<%= simple_format @body %>
+<%= @body.html_safe %>
 </body>
 </html>
diff --git a/app/views/admin/users_mailer/users_email.text.erb b/app/views/admin/users_mailer/users_email.text.erb
@@ -1 +1 @@
-<%= @body %>
+<%= ReverseMarkdown.convert(@body, unknown_tags: :drop) %>
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
   "scripts": {},
   "dependencies": {
     "browserify": "^16.5.1",
-    "cqm-execution": "^3.0.2"
+    "cqm-execution": "^3.0.2",
+    "tinymce": "^5.4.2"
   }
 }
diff --git a/spec/javascripts/admin_views/users_view_spec.js.coffee b/spec/javascripts/admin_views/users_view_spec.js.coffee
@@ -11,8 +11,3 @@ describe 'UsersViews', ->
     listedEmails = @view.$('td.user-email').toArray().map (e) ->
       e.innerText
     expect(listedEmails).toEqual jasmine.objectContaining [ '[email protected]', '[email protected]', '[email protected]', '[email protected]' ]
-
-  it 'opens modal on icon click', ->
-    @view.$("td.user-email:contains('[email protected]')").children("i.email-user").click()
-    expect(@view.$("#emailUsersDialog").length).toBe 1
-    expect(@view.$('input[name="target_email"]').val()).toBe '[email protected]'
diff --git a/yarn.lock b/yarn.lock
@@ -1148,6 +1148,11 @@ timers-browserify@^1.0.1:
   dependencies:
     process "~0.11.0"
 
+tinymce@^5.4.2:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.4.2.tgz#a1df417ea7e85697c2932269f7f93fbef30d4502"
+  integrity sha512-MRquvKxI28AiSn2ikypgJFD7LH4mQZLtgFn+yROF1bTFp92MdlLeGBrI38/O5mej3cvz27g3Pgr+3MShepbJ+w==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<%= @body %>
		<%= ReverseMarkdown.convert(@body, unknown_tags: :drop) %>