From c62f1ac96fb9f5527c5f1207c2edd2117df0440b Mon Sep 17 00:00:00 2001
From: Faizaan Gagan <fzngagan@gmail.com>
Date: Thu, 25 Mar 2021 11:18:33 +0530
Subject: [PATCH] IMPR: added a state for insufficient characters

---
 .../similar-topics-validator.js.es6           | 38 ++++++++++---------
 .../components/similar-topics-validator.hbs   |  2 +-
 config/locales/client.en.yml                  |  4 +-
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/assets/javascripts/wizard/components/similar-topics-validator.js.es6 b/assets/javascripts/wizard/components/similar-topics-validator.js.es6
index 3b63fafb..eae1ae63 100644
--- a/assets/javascripts/wizard/components/similar-topics-validator.js.es6
+++ b/assets/javascripts/wizard/components/similar-topics-validator.js.es6
@@ -4,7 +4,7 @@ import { observes } from "discourse-common/utils/decorators";
 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 { notEmpty, and, equal, empty, alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { dasherize } from "@ember/string";
@@ -12,7 +12,8 @@ import { dasherize } from "@ember/string";
 export default WizardFieldValidator.extend({
   classNames: ['similar-topics-validator'],
   similarTopics: null,
-  hasInput: notEmpty('field.value'),
+  input: alias('field.value'),
+  hasInput: notEmpty('input'),
   hasSimilarTopics: notEmpty('similarTopics'),
   hasNotSearched: equal('similarTopics', null),
   noSimilarTopics: computed('similarTopics', function() {
@@ -21,6 +22,9 @@ export default WizardFieldValidator.extend({
   showDefault: computed('hasNotSearched', 'hasInput', 'typing', function() {
     return this.hasInput && (this.hasNotSearched || this.typing);
   }),
+  insufficientCharacters: computed('typing', 'input', function() {
+    return this.hasInput && this.input.length < 5 && !this.typing;
+  }),
   showSimilarTopics: computed('typing', 'hasSimilarTopics', function() {
     return this.hasSimilarTopics && !this.typing;
   }),
@@ -28,7 +32,7 @@ export default WizardFieldValidator.extend({
     return this.noSimilarTopics && !this.typing;
   }),
   hasValidationCategories: notEmpty('validationCategories'),
-  showValidationCategories: and('showDefault', 'hasValidationCategories'),
+  insufficientCharactersCategories: and('insufficientCharacters', 'hasValidationCategories'),
   
   @discourseComputed('validation.categories')
   validationCategories(categoryIds) {
@@ -46,15 +50,15 @@ export default WizardFieldValidator.extend({
     'loading',
     'showSimilarTopics',
     'showNoSimilarTopics',
-    'showValidationCategories',
-    'showDefault'
+    'insufficientCharacters',
+    'insufficientCharactersCategories'
   )
   currentState(
     loading,
     showSimilarTopics,
     showNoSimilarTopics,
-    showValidationCategories,
-    showDefault
+    insufficientCharacters,
+    insufficientCharactersCategories
   ) {
     switch (true) {
       case loading:
@@ -63,10 +67,10 @@ export default WizardFieldValidator.extend({
         return 'results';
       case showNoSimilarTopics:
         return 'no_results';
-      case showValidationCategories:
-        return 'default_categories';
-      case showDefault:
-        return 'default';
+      case insufficientCharactersCategories:
+        return 'insufficient_characters_categories';
+      case insufficientCharacters:
+        return 'insufficient_characters';
       default:
         return false;
     }
@@ -97,11 +101,6 @@ export default WizardFieldValidator.extend({
     
     this.set("typing", true);
     
-    if (value && value.length < 5) {
-      this.set('similarTopics', null);
-      return;
-    }
-    
     const lastKeyUp = new Date();
     this._lastKeyUp = lastKeyUp;
 
@@ -113,7 +112,12 @@ export default WizardFieldValidator.extend({
         return;
       }
       this.set("typing", false);
-      
+
+      if (value && value.length < 5) {
+        this.set('similarTopics', null);
+        return;
+      }
+
       this.updateSimilarTopics();
     }, 1000);
   },
diff --git a/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs b/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs
index bba88c0f..32727326 100644
--- a/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs
+++ b/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs
@@ -1,6 +1,6 @@
 <label class={{currentStateClass}}>
   {{#if currentState}}
-    {{#if showValidationCategories}}
+    {{#if insufficientCharactersCategories}}
       {{html-safe (i18n currentStateKey catLinks=catLinks)}}
     {{else}}
       {{i18n currentStateKey}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 47b2aa5b..1ebe3a83 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -528,8 +528,8 @@ 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}"
+        insufficient_characters: "Type a minimum 5 characters to start looking for similar topics"
+        insufficient_characters_categories: "Type a minimum 5 characters to start looking for similar topics in %{catLinks}"
         results: "Your topic is similar to..."
         no_results: "No similar topics."
         loading: "Looking for similar topics..."