Display category badge if similar topics is scoped to category

assets/javascripts/wizard/components/similar-topics-validator.js.es6

@@ -5,6 +5,8 @@ import { cancel, later } from "@ember/runloop";
 import { A } from "@ember/array";
 import EmberObject, { computed } from "@ember/object";
 import { notEmpty, and, equal, empty } from "@ember/object/computed";
+import discourseComputed from "discourse-common/utils/decorators";
+import { categoryBadgeHTML } from "discourse/helpers/category-link";
 
 export default WizardFieldValidator.extend({
   classNames: ['similar-topics-validator'],
@@ -24,6 +26,17 @@ export default WizardFieldValidator.extend({
   showNoSimilarTopics: computed('typing', 'noSimilarTopics', function() {
     return this.noSimilarTopics && !this.typing;
   }),
+  hasValidationCategories: notEmpty('validationCategories'),
+  
+  @discourseComputed('validation.categories')
+  validationCategories(categoryIds) {
+    return categoryIds.map(id => this.site.categoriesById[id]);
+  },
+  
+  @discourseComputed('validationCategories')
+  catLinks(categories) {
+    return categories.map(category => categoryBadgeHTML(category)).join("");
+  },
   
   validate() {},
 

assets/javascripts/wizard/templates/components/similar-topics-validator.hbs

@@ -6,7 +6,11 @@
 {{else if showNoSimilarTopics}}
   <label>{{i18n 'realtime_validations.similar_topics.no_results'}}</label>
 {{else if showDefault}}
+  {{#if hasValidationCategories}}
+    <label>{{{i18n 'realtime_validations.similar_topics.default_categories' catLinks=catLinks}}}</label>
+  {{else}}
     <label>{{i18n 'realtime_validations.similar_topics.default'}}</label>
+  {{/if}}
 {{else}}
   <label></label>
 {{/if}}

assets/stylesheets/wizard/custom/badges.scss

@@ -9,10 +9,12 @@
   .badge-category {
     display: inline-flex;
     align-items: baseline;
+    
     .category-name {
       text-overflow: ellipsis;
       overflow: hidden;
     }
+    
     .d-icon {
       margin-right: 3px;
       width: 0.74em;
@@ -22,7 +24,8 @@
   }
 
   &.bullet {
-    margin-right: 12px;
+    margin-right: 8px;
+    
     span.badge-category {
       color: var(--primary-high);
       overflow: hidden;
@@ -31,6 +34,7 @@
         color: $header-primary;
       }
     }
+    
     .badge-category-parent-bg,
     .badge-category-bg {
       flex: 0 0 auto;
@@ -39,6 +43,7 @@
       margin-right: 5px;
       display: inline-block;
     }
+    
     .badge-category-parent-bg {
       width: 5px;
       margin-right: 0;
@@ -46,6 +51,7 @@
         width: 5px;
       }
     }
+    
     .d-icon {
       color: var(--primary-medium);
     }
@@ -55,9 +61,11 @@
     margin-right: 5px;
     padding: 2px 4px 2px 4px;
     display: inline-flex;
+    
     span {
       overflow: hidden;
       text-overflow: ellipsis;
+      
       &.badge-category-bg,
       &.badge-category-parent-bg {
         position: absolute;
@@ -69,9 +77,11 @@
 
       &.badge-category-parent-bg {
         width: calc(100% - 5px);
+        
         & + .badge-category-bg {
           left: 5px;
           width: calc(100% - 5px);
+          
           & + .badge-category {
             margin-left: 5px;
           }
@@ -82,6 +92,7 @@
         position: relative;
       }
     }
+    
     + .topic-header-extra {
       padding: 2px 4px 2px 4px;
     }

assets/stylesheets/wizard/wizard_custom.scss

@@ -9,6 +9,7 @@
 @import "custom/base";
 @import "custom/wizard";
 @import "custom/step";
+@import "custom/badges";
 @import "custom/field";
 @import "custom/validators";
 @import "custom/mobile";

config/locales/client.en.yml

@@ -524,6 +524,7 @@ en:
     realtime_validations:
       similar_topics:
         default: "When you stop typing we'll look for similar topics."
+        default_categories: "When you stop typing we'll look for similar topics in %{catLinks}"
         results: "Your topic is similar to..."
         no_results: "No similar topics."
         loading: "Looking for similar topics..."

lib/custom_wizard/builder.rb

@@ -192,7 +192,11 @@ class CustomWizard::Builder
       params[:property] = field_template['property']
     end
         
-    if field_template['type'] === 'category'
+    if field_template['type'] === 'category' || (
+          field_template['validations'] &&
+          field_template['validations']['similar_topics'] &&
+          field_template['validations']['similar_topics']['categories'].present?
+        )
       @wizard.needs_categories = true
     end
     

spec/fixtures/field/validation/similar_topics.json

@@ -0,0 +1,7 @@
+{
+  "similar_topics": {
+    "status": true,
+    "categories": [46],
+    "position": "below"
+  }
+}

spec/serializers/custom_wizard/wizard_serializer_spec.rb

@@ -6,6 +6,12 @@ describe CustomWizard::WizardSerializer do
   fab!(:user) { Fabricate(:user) }
   fab!(:category) { Fabricate(:category) }
   
+  let(:similar_topics_validation) {
+    JSON.parse(File.open(
+      "#{Rails.root}/plugins/discourse-custom-wizard/spec/fixtures/field/validation/similar_topics.json"
+    ).read)
+  }
+
   before do
     CustomWizard::Template.save(
       JSON.parse(File.open(
@@ -65,6 +71,18 @@ describe CustomWizard::WizardSerializer do
     expect(json[:wizard][:uncategorized_category_id].present?).to eq(true)
   end
   
+  it "should return categories if there is a similar topics validation scoped to category(s)" do
+    @template[:steps][0][:fields][0][:validations] = similar_topics_validation[:validations]
+    CustomWizard::Template.save(@template)
+    
+    json = CustomWizard::WizardSerializer.new(
+      CustomWizard::Builder.new(@template[:id], user).build,
+      scope: Guardian.new(user)
+    ).as_json
+    expect(json[:wizard][:categories].present?).to eq(true)
+    expect(json[:wizard][:uncategorized_category_id].present?).to eq(true)
+  end
+  
   it 'should return groups if there is a group selector field' do
     json = CustomWizard::WizardSerializer.new(
       CustomWizard::Builder.new(@template[:id], user).build,