implemented similar topics UI via ember components

assets/javascripts/wizard/components/suggested-validator.js.es6

@@ -48,6 +48,8 @@ export default WizardFieldValidator.extend({
        
     },
     actions: {
-        closeMessage(){}
+        closeMessage(){
+            this.set('showMessage', false);
+        }
     }
 });

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);
+  }
+});

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 'realtime_validations.similar_topics_heading'}}</h3>
-  <h3>{{i18n "composer.similar_topics"}}</h3>
+  <div class="wizard-similar-topics">
-
+  {{#each similarTopics as |similarTopic|}}
-
+    {{wizard-similar-topic topic=similarTopic}}
-  <ul class="topics">
+  {{/each}}
-    {{mount-widget widget="search-result-topic" args=(hash results=similarTopics)}}
+  </div>
-  </ul>
 {{/if}}
 

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>

assets/stylesheets/wizard/custom/field.scss

@@ -156,3 +156,17 @@
     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;
+  }
+}

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..."