UX: Include metadata in composer link modal search results

UX: Include metadata in composer link modal search results

Metadata includes topic status (closed, pinned, solved, etc.) as well as category and tags.

diff --git a/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6 b/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6
index 313ab332c3..82d3a7250b 100644
--- a/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6
+++ b/app/assets/javascripts/discourse/controllers/insert-hyperlink.js.es6
@@ -169,7 +169,7 @@ export default Ember.Controller.extend(ModalFunctionality, {
       if (!e.metaKey && !e.ctrlKey) {
         e.preventDefault();
         e.stopPropagation();
-        this.selectLink(e.target);
+        this.selectLink(e.target.closest(".search-link"));
       }
     },
     search() {
diff --git a/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs b/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs
index ec15a2b501..b32fdc42fa 100644
--- a/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/insert-hyperlink.hbs
@@ -11,13 +11,21 @@
       {{/if}}
       {{#if searchResults}}
         <div class="internal-link-results">
-          {{#each searchResults as |r index|}}
+          {{#each searchResults as |result|}}
             <a
               class="search-link"
-              href="{{r.url}}"
+              href="{{result.url}}"
               onclick={{action "linkClick"}}
-              data-title="{{r.title}}">
-              {{replace-emoji r.fancy_title}}
+              data-title="{{result.title}}">
+              {{topic-status topic=result disableActions=true}}
+              {{replace-emoji result.fancy_title}}
+              <div class="search-category">
+                {{#if result.category.parentCategory}}
+                  {{category-link result.category.parentCategory}}
+                {{/if}}
+                {{category-link result.category hideParent=true}}
+                {{discourse-tags result}}
+              </div>
             </a>
           {{/each}}
         </div>
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 44f7c2fbf2..ced3985e74 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -225,7 +225,7 @@
           max-height: 150px;
           width: 90%;
           overflow-y: auto;
-          > a {
+          > .search-link {
             padding: 6px;
             border-bottom: 1px solid $primary-low;
             cursor: pointer;
@@ -234,6 +234,14 @@
             &:focus {
               background-color: $highlight-medium;
             }
+            .search-category {
+              display: flex;
+              align-items: center;
+            }
+            .discourse-tags {
+              display: inline-block;
+              font-size: $font-down-1;
+            }
           }
         }
       }

GitHub sha: c6e255f4

1 Like