FEATURE: View article OP in KE view

Output of topic OP to KE view

UI styles for OP view

assets/javascripts/discourse/components/knowledge-explorer-topic-link.js.es6

@@ -0,0 +1,7 @@
+export default Ember.Component.extend({
+  click() {
+    const topic = this.get("topic");
+
+    this.set("selectedTopic", topic.id);
+  }
+});

assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6

@@ -0,0 +1,9 @@
+import { default as computed } from "ember-addons/ember-computed-decorators";
+
+export default Ember.Component.extend({
+  classNames: "knowledge-explorer-topic",
+  @computed("topic")
+  originalPostContent(topic) {
+    return topic.post_stream.posts[0].cooked;
+  }
+});

assets/javascripts/discourse/controllers/knowledge-explorer.js.es6

@@ -7,7 +7,8 @@ export default Ember.Controller.extend({
   application: Ember.inject.controller(),
   queryParams: {
     filterCategory: "category",
-    filterTags: "tags"
+    filterTags: "tags",
+    selectedTopic: "topic"
   },
   filterTags: null,
   filterCategory: null,
@@ -15,6 +16,8 @@ export default Ember.Controller.extend({
   searchTerm: null,
   searchResults: null,
 
+  selectedTopic: null,
+
   @computed("searchResults")
   hasSearchResults(results) {
     return !!results;

assets/javascripts/discourse/routes/knowledge-explorer.js.es6

@@ -4,21 +4,34 @@ export default Ember.Route.extend({
   queryParams: {
     filterTags: {
       refreshModel: true
+    },
+    selectedTopic: {
+      refreshModel: true
     }
   },
   model(params) {
     if (params.filterTags) {
       const tags = params.filterTags;
       return ajax(`/knowledge-explorer.json?tags=${tags}`);
+    } else if (params.selectedTopic) {
+      return ajax(`/t/${params.selectedTopic}.json`);
     } else {
       return ajax("/knowledge-explorer.json");
     }
   },
 
   setupController(controller, model) {
-    controller.setProperties({
+    if (model.tags && model.topics) {
-      tags: model.tags,
+      controller.setProperties({
-      topics: model.topics
+        tags: model.tags,
-    });
+        topics: model.topics
+      });
+    } else {
+      controller.setProperties({
+        tags: [],
+        topics: [],
+        topic: model
+      });
+    }
   }
 });

assets/javascripts/discourse/templates/components/knowledge-explorer-topic-link.hbs

@@ -0,0 +1 @@
+<span class="knowledge-explorer-topic-link">{{topic.title}}</span>

assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs

@@ -8,7 +8,7 @@
     <tr>
       <td class="main-link">
         <span class="link-top-line">
-          <a href="/t/{{topic.id}}">{{topic.title}}</a>
+          {{knowledge-explorer-topic-link topic=topic selectedTopic=selectedTopic}}
         </span>
         <span class="link-bottom-line">
           {{#each topic.tags as |tag|}}

assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs

@@ -0,0 +1,5 @@
+<a class="knowledge-explorer-nav-link return" href="/knowledge-explorer">Return to Knowledge Explorer</a>
+<div class="topic-content">
+  {{{originalPostContent}}}
+</div>
+<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">View the discussion on this topic</a>

assets/javascripts/discourse/templates/knowledge-explorer.hbs

@@ -1,23 +1,27 @@
 <div class="knowledge-explorer">
-  <div class="knowledge-explorer-search">
+  {{#if selectedTopic}}
-    {{knowledge-explorer-search searchResults=searchResults searchTerm=searchTerm filterTags=filterTags}}
+    {{knowledge-explorer-topic topic=topic}}
-  </div>
+  {{else}}
-  <div class="knowledge-explorer-browse">
+    <div class="knowledge-explorer-search">
-    {{knowledge-explorer-tag-list
+      {{knowledge-explorer-search searchResults=searchResults searchTerm=searchTerm filterTags=filterTags}}
-        tags=tags
-        filterTags=filterTags
-    }}
-    <div class="knowledge-explorer-results">
-    {{#if hasSearchResults}}
-      {{#if emptySearchResults}}
-        <div class="result-count no-result">{{i18n 'search.no_results'}}</div>
-      {{else}}
-        <div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
-        {{knowledge-explorer-topic-list topics=searchResults}}
-      {{/if}}
-    {{else}}
-      {{knowledge-explorer-topic-list topics=topics}}
-    {{/if}}
     </div>
-  </div>
+    <div class="knowledge-explorer-browse">
+      {{knowledge-explorer-tag-list
+          tags=tags
+          filterTags=filterTags
+      }}
+      <div class="knowledge-explorer-results">
+      {{#if hasSearchResults}}
+        {{#if emptySearchResults}}
+          <div class="result-count no-result">{{i18n 'search.no_results'}}</div>
+        {{else}}
+          <div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
+          {{knowledge-explorer-topic-list topics=searchResults selectedTopic=selectedTopic}}
+        {{/if}}
+      {{else}}
+        {{knowledge-explorer-topic-list topics=topics selectedTopic=selectedTopic}}
+      {{/if}}
+      </div>
+    </div>
+  {{/if}}
 </div>

assets/stylesheets/common/knowledge-explorer.scss

@@ -1,4 +1,27 @@
 .knowledge-explorer {
+  .knowledge-explorer-topic {
+    width: 80%;
+    margin: 0 auto;
+    .knowledge-explorer-nav-link {
+      font-weight: bold;
+      &.return {
+        font-size: .8em;
+        &::before {
+          content: "«";
+          margin-right: 3px;
+        }
+      }
+      &.more {
+        float: right;
+        font-size: 1.2em;
+        padding: 10px 0;
+        &::after {
+          content: "»";
+          margin-left: 3px;
+        }
+      }
+    }
+  }
  .knowledge-explorer-search {
   align-items: center;
   background-color: $primary-very-low;
@@ -65,6 +88,10 @@
     }
     .knowledge-explorer-topic-list {
       flex-basis: 100%;
+      .knowledge-explorer-topic-link {
+        color: $tertiary;
+        cursor: pointer;
+      }
       .discourse-tag {
         padding-right: 5px;
       }

assets/stylesheets/mobile/knowledge-explorer.scss

@@ -1,5 +1,9 @@
 .mobile-view {
   .knowledge-explorer {
+    .knowledge-explorer-topic {
+      width: calc(100vw - 35px);
+      margin: 10px 0;
+    }
     .knowledge-explorer-search {
       font-size: $font-up-2;
       padding: .5em 0;