ensure users with JS disabled can still create subscriptions

Author: Oaphi

app/assets/javascripts/subscriptions.js

@@ -20,13 +20,17 @@ document.addEventListener('DOMContentLoaded', () => {
   /**
    * Synchronizes qualifier field with the given type
    * @param {string} type subscription type
+   * @param {boolean} [clear] whether to clear qualifier value
    */
-  const syncQualifier = (type) => {
+  const syncQualifier = (type, clear = true) => {
     const field = document.querySelector('.js-sub-qualifier-select');
     const label = document.querySelector('.js-sub-qualifier-label');
 
     if (field instanceof HTMLElement) {
-      $(field).val(null).trigger('change');
+      if (clear) {
+        $(field).val(null).trigger('change');
+      }
+
       field.closest('.form-group')?.classList.toggle('hide', !isQualifiable(type));
     }
 
@@ -50,6 +54,10 @@ document.addEventListener('DOMContentLoaded', () => {
         syncQualifier($event.target.value);
       }
     });
+
+    if (isTypeSelect(el)) {
+      syncQualifier(el.value, false);
+    }
   });
 
   $('.js-sub-qualifier-select').select2({

app/views/subscriptions/_qualifier.html.erb

@@ -6,7 +6,7 @@
       subscription : Subscription to render qualifier field for
 "%>
 
-<div class="form-group<%= ' hide' unless subscription.qualified? %>">
+<div class="form-group hide">
   <%= form.label :qualifier,
                  subscription.type&.capitalize || 'Qualifier',
                  class: "form-element js-sub-qualifier-label" %>
@@ -21,3 +21,14 @@
                   data: { create: 'false', placeholder: '', use_ids: subscription.user? },
                   multiple: false %>
 </div>
+
+<noscript>
+  <div class="form-group">
+    <%= form.label :qualifier, 'Qualifier', class: "form-element" %>
+    <div class="form-caption">
+      Must be a valid user id, category id, or tag <strong>name</strong> for user, category,
+      or tag subscriptions respectively, or <strong>blank</strong> otherwise.
+    </div>
+    <%= form.text_field :qualifier, class: 'form-element' %>
+  </div>
+</noscript>