Update chat messages component to use stimulus 2 syntax

app/components/chat_message/chat_message.html.erb

@@ -1,8 +1,12 @@
 <div
   class="<%= class_attr %>"
   data-controller="chat-message"
-  data-chat-message-id="<%= message.id %>"
-  data-chat-message-sender-name="<%= message.sender&.name %>"
+  data-chat-message-id-value="<%= message.id %>"
+  data-chat-message-sender-name-value="<%= message.sender&.name %>"
+  data-chat-message-truncated-class="ChatMessage--truncated"
+  data-chat-message-expanded-class="ChatMessage--expanded"
+  data-chat-message-copied-class="ChatMessage--copied"
+  data-chat-message-highlighted-class="ChatMessage--highlighted"
   id="<%= id %>"
 >
     <div class="ChatMessage-text" data-chat-message-target="text">

app/components/chat_message/chat_message.js

@@ -5,10 +5,14 @@ const SUCCESS_NOTIFICATION_DURATION = 2000;
 
 export default class extends Controller {
   static targets = ['text', 'toggleExpanded'];
-
+  static classes = ['truncated', 'expanded', 'copied', 'highlighted'];
+  static values = {
+    senderName: String,
+    id: String,
+  };
   connect() {
     if (this.isTruncated()) {
-      this.element.classList.add('ChatMessage--truncated');
+      this.element.classList.add(this.truncatedClass);
       this.collapse();
     }
   }
@@ -18,7 +22,7 @@ export default class extends Controller {
   }
 
   isExpanded() {
-    return this.element.classList.contains('ChatMessage--expanded');
+    return this.element.classList.contains(this.expandedClass);
   }
 
   toggleExpanded() {
@@ -30,18 +34,18 @@ export default class extends Controller {
   }
 
   expand() {
-    this.element.classList.add('ChatMessage--expanded');
+    this.element.classList.add(this.expandedClass);
     this.toggleExpandedTarget.setAttribute('aria-expanded', 'true');
   }
 
   collapse() {
-    this.element.classList.remove('ChatMessage--expanded');
+    this.element.classList.remove(this.expandedClass);
     this.toggleExpandedTarget.setAttribute('aria-expanded', 'false');
   }
 
   copy() {
     const text = this.textTarget.innerText;
-    const sender = this.data.get('sender-name');
+    const sender = this.senderNameValue;
     let clipboardText = `${sender}: ${text}`;
 
     if (!sender) {
@@ -52,20 +56,20 @@ export default class extends Controller {
   }
 
   onCopy() {
-    this.element.classList.add('ChatMessage--copied');
+    this.element.classList.add(this.copiedClass);
 
     setTimeout(() => {
-      this.element.classList.remove('ChatMessage--copied');
+      this.element.classList.remove(this.copiedClass);
     }, SUCCESS_NOTIFICATION_DURATION);
   }
 
   isHighlighted() {
-    return this.element.classList.contains('ChatMessage--highlighted');
+    return this.element.classList.contains(this.highlightedClass);
   }
 
   toggleHighlighted() {
     Rails.ajax({
-      url: `/messages/${this.data.get('id')}/highlight`,
+      url: `/messages/${this.idValue}/highlight`,
       type: 'POST',
       data: `highlighted=${!this.isHighlighted()}`,
     });
@@ -78,10 +82,10 @@ export default class extends Controller {
   }
 
   highlight() {
-    this.element.classList.add('ChatMessage--highlighted');
+    this.element.classList.add(this.highlightedClass);
   }
 
   unhighlight() {
-    this.element.classList.remove('ChatMessage--highlighted');
+    this.element.classList.remove(this.highlightedClass);
   }
 }

app/components/request_form/request_form.html.erb

@@ -5,7 +5,7 @@
   class: 'RequestForm',
   data: {
     controller: 'request-form',
-    request_form_members_count_message: I18n.t('request.form.members_count_message').to_json
+    request_form_members_count_message_value: I18n.t('request.form.members_count_message').to_json
   }
 ) do %>
   <div class="RequestForm-column" data-action="input->request-form#updatePreview">

app/components/request_form/request_form.js

@@ -9,6 +9,9 @@ const template = ({ message, notes }) => {
 
 export default class extends Controller {
   static targets = ['preview', 'message', 'membersCount'];
+  static values = {
+    membersCountMessage: String,
+  };
 
   connect() {
     this.updatePreview();
@@ -29,7 +32,7 @@ export default class extends Controller {
       return;
     }
 
-    const messageTemplates = JSON.parse(this.data.get('members-count-message'));
+    const messageTemplates = JSON.parse(this.membersCountMessageValue);
     const tags = event.detail.tags;
 
     Rails.ajax({

app/components/request_notification/request_notification.html.erb

@@ -1,9 +1,9 @@
 <div 
   class="RequestNotification" 
   data-controller="request-notification" 
-  data-request-notification-id="<%= request.id %>" 
-  data-request-notification-last-updated-at="<%= last_updated_at %>"
-  data-request-notification-message-template="<%= t('components.request_notification.message_template').to_json %>"
+  data-request-notification-id-value="<%= request.id %>" 
+  data-request-notification-last-updated-at-value="<%= last_updated_at %>"
+  data-request-notification-message-template-value="<%= t('components.request_notification.message_template').to_json %>"
   hidden
 >
   <%= c 'notification', show_close: false do %>

app/components/request_notification/request_notification.js

@@ -5,20 +5,24 @@ const POLLING_INTERVAL = 1000 * 30;
 
 export default class extends Controller {
   static targets = ['text'];
+  static values = {
+    id: String,
+    lastUpdatedAt: String,
+    messageTemplate: String,
+  };
 
   connect() {
-    this.lastUpdatedAt = this.data.get('last-updated-at');
-    this.messageTemplate = JSON.parse(this.data.get('message-template'));
+    this.messageTemplate = JSON.parse(this.messageTemplateValue);
     this.fetchMessages();
     setInterval(() => this.fetchMessages(), POLLING_INTERVAL);
   }
 
   fetchMessages() {
     Rails.ajax({
-      url: `/requests/${this.data.get('id')}/notifications`,
+      url: `/requests/${this.idValue}/notifications`,
       type: 'GET',
       data: new URLSearchParams({
-        last_updated_at: this.lastUpdatedAt,
+        last_updated_at: this.lastUpdatedAtValue,
       }).toString(),
       success: ({ message_count }) => {
         if (message_count == 0) {

app/components/tags_input/tags_input.html.erb

@@ -1,9 +1,9 @@
 <div
   class="TagsInput"
   data-controller="tags-input"
-  data-tags-input-available-tags="<%= available_tags %>"
-  data-tags-input-allow-new="<%= allow_new %>"
-  data-tags-input-members-label="<%= I18n.t('contributor.contributor').to_json %>"
+  data-tags-input-available-tags-value="<%= available_tags %>"
+  data-tags-input-allow-new-value="<%= allow_new %>"
+  data-tags-input-members-label-value="<%= I18n.t('contributor.contributor').to_json %>"
 >
   <%= c 'input', value: value, stimulus_controller: 'tags-input', stimulus_target: 'input', **props %>
 </div>

app/components/tags_input/tags_input.js

@@ -37,15 +37,20 @@ function transformTag(tagData) {
 
 export default class extends Controller {
   static targets = ['input'];
+  static values = {
+    availableTags: String,
+    allowNew: Boolean,
+    membersLabel: String,
+  };
 
   connect() {
     this.tagify = new Tagify(this.inputTarget, {
       originalInputValueFormat: tags => {
         return tags.map(tag => tag.value).join(',');
       },
 
-      whitelist: JSON.parse(this.data.get('available-tags')),
-      enforceWhitelist: !JSON.parse(this.data.get('allow-new')),
+      whitelist: JSON.parse(this.availableTagsValue),
+      enforceWhitelist: !this.allowNewValue,
 
       dropdown: {
         classname: 'TagsInput-dropdown',
@@ -58,9 +63,8 @@ export default class extends Controller {
       },
 
       transformTag,
-
       labels: {
-        members: JSON.parse(this.data.get('members-label')),
+        members: JSON.parse(this.membersLabelValue),
       },
     });