From 9dc63c0755afc20d7942258f85c634fd836bf462 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 14 Jun 2023 11:25:05 -0700
Subject: [PATCH] UX: Add required indicator to fields with `required`
 validation (#22096)

---
 .../app/components/form-template-field/checkbox.hbs      | 3 +++
 .../app/components/form-template-field/dropdown.hbs      | 7 ++++++-
 .../app/components/form-template-field/input.hbs         | 9 +++++++--
 .../app/components/form-template-field/multi-select.hbs  | 7 ++++++-
 .../app/components/form-template-field/textarea.hbs      | 7 ++++++-
 .../app/components/form-template-field/upload.hbs        | 7 ++++++-
 .../common/components/form-template-field.scss           | 7 +++++++
 spec/system/composer/template_validation_spec.rb         | 6 ++++++
 spec/system/page_objects/components/composer.rb          | 6 ++++++
 9 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs
index ef710c6157a..bac0b91ab3c 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/checkbox.hbs
@@ -7,5 +7,8 @@
       required={{if @validations.required "required" ""}}
     />
     {{@attributes.label}}
+    {{#if @validations.required}}
+      {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+    {{/if}}
   </label>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs
index 960dcb6d8ba..ad6a2328c34 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/dropdown.hbs
@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="dropdown">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
 
   {{! TODO(@keegan): Update implementation to use <ComboBox/> instead }}
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
index 7095cace0e4..cf6d827fc53 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/input.hbs
@@ -1,7 +1,12 @@
 <div class="control-group form-template-field" data-field-type="input">
-  {{! TODO(@keegan): Make label required }}
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
+
   {{/if}}
 
   <Input
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
index 74e1c40abb0..4329fb8fafa 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/multi-select.hbs
@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="multi-select">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
 
   {{! TODO(@keegan): Update implementation to use <MultiSelect/> instead }}
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
index f2fbd04441a..5190c4eed51 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/textarea.hbs
@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="textarea">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
   <Textarea
     name={{@attributes.label}}
diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs b/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs
index 20ddddde27f..5d8cc2698d8 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/upload.hbs
@@ -1,6 +1,11 @@
 <div class="control-group form-template-field" data-field-type="upload">
   {{#if @attributes.label}}
-    <label class="form-template-field__label">{{@attributes.label}}</label>
+    <label class="form-template-field__label">
+      {{@attributes.label}}
+      {{#if @validations.required}}
+        {{d-icon "asterisk" class="form-template-field__required-indicator"}}
+      {{/if}}
+    </label>
   {{/if}}
   <input
     type="file"
diff --git a/app/assets/stylesheets/common/components/form-template-field.scss b/app/assets/stylesheets/common/components/form-template-field.scss
index b4bf508a04e..2d7c1019da4 100644
--- a/app/assets/stylesheets/common/components/form-template-field.scss
+++ b/app/assets/stylesheets/common/components/form-template-field.scss
@@ -13,4 +13,11 @@
     padding: 0.5em 0.65em;
     font-size: var(--font-0);
   }
+  // END of what should be removed after updating dropdown/multi-select to use select-kit
+
+  &__required-indicator {
+    color: var(--danger);
+    margin-left: 0.5em;
+    font-size: var(--font-down-4);
+  }
 }
diff --git a/spec/system/composer/template_validation_spec.rb b/spec/system/composer/template_validation_spec.rb
index c9560e2a72f..60f072da467 100644
--- a/spec/system/composer/template_validation_spec.rb
+++ b/spec/system/composer/template_validation_spec.rb
@@ -68,6 +68,12 @@ describe "Composer Form Template Validations", type: :system, js: true do
     sign_in user
   end
 
+  it "shows an asterisk on the label of the required fields" do
+    category_page.visit(category_with_template)
+    category_page.new_topic_button.click
+    expect(composer).to have_form_template_field_required_indicator("input")
+  end
+
   it "shows an error when a required input is not filled in" do
     category_page.visit(category_with_template)
     category_page.new_topic_button.click
diff --git a/spec/system/page_objects/components/composer.rb b/spec/system/page_objects/components/composer.rb
index 8951a40165f..c609e155eec 100644
--- a/spec/system/page_objects/components/composer.rb
+++ b/spec/system/page_objects/components/composer.rb
@@ -142,6 +142,12 @@ module PageObjects
         page.has_css?(".form-template-field[data-field-type='#{field}']")
       end
 
+      def has_form_template_field_required_indicator?(field)
+        page.has_css?(
+          ".form-template-field[data-field-type='#{field}'] .form-template-field__required-indicator",
+        )
+      end
+
       FORM_TEMPLATE_CHOOSER_SELECTOR = ".composer-select-form-template"
 
       def has_no_form_template_chooser?