New Feature: Response Templates #5419

Zhao-Andy · 2020-01-09T17:26:54Z

What type of PR is this? (check all applicable)

Feature

Description

This adds the canned response feature to be used by anyone as well as moderators. Canned responses are templates that users can save and reuse to reply to a comment.

Moderators can use canned responses made by the DEV Team to leave a comment as Sloan. These "moderator canned responses" are meant to be used to help reply in situations where posting under Sloan might be more effective than as the moderator themselves.

To do:

changelog post
write tests 😓
add new site config value for field user_moderator_id to production
make this work for replies (currently only works for new, top-level comments)

Related Tickets & Documents

#5000

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

no documentation needed (maybe?)

Zhao-Andy · 2020-01-28T14:56:54Z

@rhymes I've updated the PR with your requests; did not go through with refactoring the JS CodeClimate issues after all. I'd rather leave that for a separate PR. Rest of it should be okay, but looks like I might need to update the test coverage. 😩

Anyway feel free to review or not dependent on your priorities -- I added you since you've been reviewing this whole time and have the context. :)

rhymes · 2020-01-28T16:10:03Z

Hi @Zhao-Andy, let me know if you want to address the first request for change (the internal dashboard is a bit broken) or you'd rather do it in a following PR, don't know how important it is that it's not fully working:

I couldn't create an email template (neither plain text, nor markdown, nor HTML let me through), both the email and the abuse report email, I think it's because the HTML in /internal/response_templates contains the wrong field names

vaidehijoshi · 2020-02-13T22:51:05Z

Ooooh this is basically what we were trying to do when we added welcome_user_id into the SiteConfig. Seems like we can just use your mascot_user_id instead! 😎

nickytonline

Starting to look good. Just some changes to the frontend when you have a chance. Other things to consider are unit tests in the frontend if it brings more confidence and consider adding JS Doc comments to functions. We're slowly improving things in the frontend, so baby steps ;)

One other thing to note. The PR is quite large. I realize the ERBs and JS need to go together. Just wondering if anything in this PR can be pulled out into another PR.

app/assets/javascripts/initializers/initializeCommentsPage.js.erb

nickytonline · 2020-02-17T20:33:23Z

app/assets/javascripts/initializers/initializeCommentsPage.js.erb

-              document.getElementById("image-upload-file-label-" + randomIdNumber).innerHTML = errorMessage;
-              document.getElementById("image-upload-file-label-" + randomIdNumber).style.color = '#e05252';
-              document.getElementById("image-upload-submit-" + randomIdNumber).style.display = 'none';
+              document.getElementById("image-upload-file-label-" + randomIdNumber).innerHTML = errorMessage + '<button id="warningclosebutt">×</button>';


If these IDs are the same as the ones above, you can create references to these elements and reuse the reference.

nickytonline · 2020-02-17T21:18:36Z

app/assets/javascripts/utilities/buildCommentFormHTML.js.erb

            </div>\
          </form>';
 }

 function cancel(event, el) {
  event.preventDefault();
-  replaceActionButts(el.parentNode.parentNode.parentNode.parentNode);
+  replaceActionButts(el.parentNode.parentNode.parentNode.parentNode.parentNode);


What is el.parentNode.parentNode.parentNode.parentNode.parentNode referencing? There may be a better way to get a reference to it. If not, consider creating a variable so it can be described and/or consider a comment explaining what it refers to.

nickytonline · 2020-02-17T21:21:12Z

app/assets/stylesheets/settings.scss

@@ -561,7 +579,7 @@
      font-size: 0.9em;
    }
    .github-repo-featured-indicator {


I can't find a reference to this CSS selector anywhere in the code except for this file. Are you sure it's used?

nickytonline · 2020-02-17T21:22:34Z

app/javascript/packs/responseTemplates.js

+import loadingImg from '../../assets/images/loading-ellipsis.svg'
+import { handleLoggedOut, fetchResponseTemplates, addReplyObservers, addToggleListener } from '../responseTemplates/responseTemplates';
+
+const userStatus = document.querySelector('body').getAttribute('data-user-status');


Suggested change

const userStatus = document.querySelector('body').getAttribute('data-user-status');

const { userStatus } = document.body.dataset;

nickytonline · 2020-02-17T21:23:38Z

app/javascript/packs/responseTemplates.js

+
+  button.addEventListener('click', () => {
+    const responsesWrapper = document.querySelector('.mod-responses-container');
+    responsesWrapper.style.display = 'flex';


Can this display: flex be added to a CSS class instead? Less JS and in a CSS class it gets cached.

nickytonline · 2020-02-17T21:25:18Z

app/javascript/packs/responseTemplatesComments.js

@@ -0,0 +1,17 @@
+import { handleLoggedOut, addReplyObservers } from '../responseTemplates/responseTemplates';
+
+const userStatus = document.querySelector('body').getAttribute('data-user-status');


Same as above

Suggested change

const userStatus = document.querySelector('body').getAttribute('data-user-status');

const { userStatus } = document.body.dataset;

nickytonline · 2020-02-17T21:26:12Z

app/javascript/responseTemplates/responseTemplates.js

+/* eslint-disable no-alert */
+/* eslint-disable no-restricted-globals */
+function buildModResponseHTML(response) {
+  const array = response


consider a more descriptive name for the variable instead of the generic array.

nickytonline · 2020-02-17T21:30:41Z

app/javascript/responseTemplates/responseTemplates.js

+        ${modResponseHTML}
+        <header><h3>Personal Response Templates</h3></header>
+        ${personalResponseHTML}
+        <a target="_blank" rel="noopener nofollow" href="/settings/response-templates" class="mod-response-create-new">Create new template</a>


+1 for rel="noopener nofollow". 👏🏻

nickytonline · 2020-02-17T21:35:58Z

app/javascript/responseTemplates/responseTemplates.js

+
+  const observer = new MutationObserver(callback);
+
+  targetNodes.forEach(node => {


With this, n target nodes get observed which could be quite expensive. It may make more sense to observe the parent node of all the target nodes.

Co-Authored-By: Nick Taylor <nick@iamdeveloper.com>

Zhao-Andy · 2020-03-16T14:28:43Z

Closing in favor of splitting this into smaller PRs.

Zhao-Andy added 10 commits January 9, 2020 10:44

Add canned responses table and model

97a719f

Add MVP for personal canned responses

4b90a72

Use settings notice

974fc66

Make user relationship optional

b4d8194

Add internal CRUD actions for canned_responses

291f6d3

Add MVP of moderator responses

6c141c0

Complete canned responses for mods and personal

1b37977

Add actor_id column to comments

2a2ba9c

Use personal_comment instead of comment

b22b791

Log actor_id for moderator submitted comments

1cd2862

Zhao-Andy requested a review from a team January 9, 2020 17:26

pr-triage bot added the PR: unreviewed bot applied label for PR's with no review label Jan 9, 2020

Make minor styling updates

b325ed8

Zhao-Andy changed the title ~~New Feature: Canned Responses~~ WIP New Feature: Canned Responses Jan 9, 2020

pr-triage bot removed the PR: unreviewed bot applied label for PR's with no review label Jan 9, 2020

Zhao-Andy changed the title ~~WIP New Feature: Canned Responses~~ [WIP] New Feature: Canned Responses Jan 9, 2020

mstruve removed the request for review from a team January 9, 2020 17:40

Zhao-Andy added 13 commits January 11, 2020 11:58

Add canned response functionality for replies

e91187b

Disconnect observer on unload

9389501

Stop observing on page leave

c9fb27d

Rename file to cannedResponses

37a5d76

Handle loading responses for non-moderators

2c5abd7

Handle logged out users

be48c10

Add basic tests for canned responses controller

0258bfd

Test comment policy for moderator_create action

52ff145

Allow admins to properly post mod comments

0deb6f9

Test for new moderator_create action

d97bf32

Use proper auth for canned response

c8c5702

Test canned responses policy

490f9ef

Add tests for settings canned responses tab

67434ff

weekly-digest bot mentioned this pull request Feb 3, 2020

Weekly Digest (27 January, 2020 - 3 February, 2020) #5847

Closed

benhalpern added 4 commits February 10, 2020 16:35

Merge branch 'master' into zhao-andy/sloan-canned-responses

3d47292

Clean up JS edge cases and styles

8f75823

Merge branch 'master' into zhao-andy/sloan-canned-responses

eae9fe0

Fix tests, change mascot field name, update css

d7c8f60

Zhao-Andy requested review from a team as code owners February 13, 2020 20:38

Zhao-Andy requested review from nickytonline and removed request for a team February 13, 2020 20:38

Zhao-Andy removed the request for review from nickytonline February 13, 2020 22:54

benhalpern and others added 2 commits February 14, 2020 12:25

Merge branch 'master' into zhao-andy/sloan-canned-responses

9c53a34

Use proper type_of values

6b54dcc

nickytonline suggested changes Feb 17, 2020

View reviewed changes

vaidehijoshi mentioned this pull request Mar 5, 2020

Add a mascot_user_id to SiteConfig #6483

Merged

11 tasks

Zhao-Andy and others added 3 commits March 11, 2020 11:14

Fix merge conflicts

70e550e

Fix merge conflicts (again)

a83ad5c

Use const and querySelector, not var and getElByClasName

c5335b7

Co-Authored-By: Nick Taylor <nick@iamdeveloper.com>

Zhao-Andy mentioned this pull request Mar 12, 2020

Add response templates model and table #6615

Merged

3 tasks

rhymes removed their request for review March 13, 2020 13:18

Zhao-Andy removed request for benhalpern, jacobherrington and a team March 16, 2020 14:28

Zhao-Andy closed this Mar 16, 2020

Zhao-Andy mentioned this pull request Mar 17, 2020

Add response templates for internal usage #6676

Merged

3 tasks

Zhao-Andy mentioned this pull request Mar 24, 2020

Add response templates to user settings #6823

Merged

3 tasks

Zhao-Andy mentioned this pull request Apr 3, 2020

Finalize and add response templates feature #7068

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Feature: Response Templates #5419

New Feature: Response Templates #5419

Zhao-Andy commented Jan 9, 2020 •

edited

Loading

Zhao-Andy commented Jan 28, 2020

rhymes commented Jan 28, 2020

vaidehijoshi commented Feb 13, 2020

nickytonline left a comment

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

nickytonline Feb 17, 2020

Zhao-Andy commented Mar 16, 2020

	const userStatus = document.querySelector('body').getAttribute('data-user-status');
	const { userStatus } = document.body.dataset;

		@@ -0,0 +1,17 @@
		import { handleLoggedOut, addReplyObservers } from '../responseTemplates/responseTemplates';

		const userStatus = document.querySelector('body').getAttribute('data-user-status');


		const observer = new MutationObserver(callback);

		targetNodes.forEach(node => {

New Feature: Response Templates #5419

New Feature: Response Templates #5419

Conversation

Zhao-Andy commented Jan 9, 2020 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

Zhao-Andy commented Jan 28, 2020

rhymes commented Jan 28, 2020

vaidehijoshi commented Feb 13, 2020

nickytonline left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Zhao-Andy commented Mar 16, 2020

Zhao-Andy commented Jan 9, 2020 •

edited

Loading