From d47770de88413a73268d6b8c92dcab117c034087 Mon Sep 17 00:00:00 2001
From: Faizaan Gagan <fzngagan@gmail.com>
Date: Thu, 11 Feb 2021 22:23:13 +0530
Subject: [PATCH] implemented similar topics UI via ember components

---
 .../components/suggested-validator.js.es6     |  4 +++-
 .../wizard/helpers/date-node.js.es6           | 22 +++++++++++++++++++
 .../components/suggested-validator.hbs        | 13 +++++------
 .../components/wizard-similar-topic.hbs       |  4 ++++
 assets/stylesheets/wizard/custom/field.scss   | 14 ++++++++++++
 config/locales/client.en.yml                  |  2 ++
 6 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 assets/javascripts/wizard/helpers/date-node.js.es6
 create mode 100644 assets/javascripts/wizard/templates/components/wizard-similar-topic.hbs

diff --git a/assets/javascripts/wizard/components/suggested-validator.js.es6 b/assets/javascripts/wizard/components/suggested-validator.js.es6
index 599723e3..b5847c16 100644
--- a/assets/javascripts/wizard/components/suggested-validator.js.es6
+++ b/assets/javascripts/wizard/components/suggested-validator.js.es6
@@ -48,6 +48,8 @@ export default WizardFieldValidator.extend({
        
     },
     actions: {
-        closeMessage(){}
+        closeMessage(){
+            this.set('showMessage', false);
+        }
     }
 });
\ No newline at end of file
diff --git a/assets/javascripts/wizard/helpers/date-node.js.es6 b/assets/javascripts/wizard/helpers/date-node.js.es6
new file mode 100644
index 00000000..99fa01f3
--- /dev/null
+++ b/assets/javascripts/wizard/helpers/date-node.js.es6
@@ -0,0 +1,22 @@
+import { registerUnbound } from "discourse-common/lib/helpers";
+import { longDate, number, relativeAge } from "discourse/lib/formatter";
+
+export default registerUnbound("date-node", function (dt) {
+  if (typeof dt === "string") {
+    dt = new Date(dt);
+  }
+  if (dt) {
+    const attributes = {
+      title: longDate(dt),
+      "data-time": dt.getTime(),
+      "data-format": "tiny",
+    };
+
+    const finalString = `<span class="relative-date" title="${
+      attributes["title"]
+    }" data-time="${attributes["data-time"]}" data-format="${
+      attributes["data-format"]
+    }">${relativeAge(dt)}</span>`;
+    return new Handlebars.SafeString(finalString);
+  }
+});
diff --git a/assets/javascripts/wizard/templates/components/suggested-validator.hbs b/assets/javascripts/wizard/templates/components/suggested-validator.hbs
index 87ddd03f..651ad25e 100644
--- a/assets/javascripts/wizard/templates/components/suggested-validator.hbs
+++ b/assets/javascripts/wizard/templates/components/suggested-validator.hbs
@@ -1,10 +1,9 @@
 {{#if similarTopics}}
-  <a href {{action 'closeMessage' message}} class="close">{{d-icon "times"}}</a>
-  <h3>{{i18n "composer.similar_topics"}}</h3>
-
-
-  <ul class="topics">
-    {{mount-widget widget="search-result-topic" args=(hash results=similarTopics)}}
-  </ul>
+  <h3>{{i18n 'realtime_validations.similar_topics_heading'}}</h3>
+  <div class="wizard-similar-topics">
+  {{#each similarTopics as |similarTopic|}}
+    {{wizard-similar-topic topic=similarTopic}}
+  {{/each}}
+  </div>
 {{/if}}
 
diff --git a/assets/javascripts/wizard/templates/components/wizard-similar-topic.hbs b/assets/javascripts/wizard/templates/components/wizard-similar-topic.hbs
new file mode 100644
index 00000000..eeaaa751
--- /dev/null
+++ b/assets/javascripts/wizard/templates/components/wizard-similar-topic.hbs
@@ -0,0 +1,4 @@
+<a href="{{topic.url}}" target="_blank">
+  <span class="title">{{html-safe topic.fancy_title}}</span>
+  <div class="blurb">{{date-node topic.created_at}} - {{html-safe topic.blurb}}</div>
+</a>
diff --git a/assets/stylesheets/wizard/custom/field.scss b/assets/stylesheets/wizard/custom/field.scss
index c791d41a..8e36ff76 100644
--- a/assets/stylesheets/wizard/custom/field.scss
+++ b/assets/stylesheets/wizard/custom/field.scss
@@ -155,4 +155,18 @@
   .select-kit.combo-box.group-dropdown {
     min-width: 220px;
   }
+}
+
+.wizard-similar-topics {
+  background-color: var(--tertiary-low);
+  padding: 5px;
+  .title {
+    color: var(--primary);
+  }
+  
+  .blurb {
+    margin-left: 0.5em;
+    color: var(--primary-high);
+    font-size: $font-down-1;
+  }
 }
\ No newline at end of file
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 0ae2abc2..903c9fce 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -520,3 +520,5 @@ en:
       yourself_confirm:
         title: "Did you forget to add recipients?"
         body: "Right now this message is only being sent to yourself!"
+    realtime_validations:
+      similar_topics_heading: "Your topic is similar to..."