From 18c45a7a2b89f893468a6dc55fca2fd1a231aef3 Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Wed, 13 Nov 2019 15:52:33 -0600
Subject: [PATCH] UX: Add message when no topics found in KE view

---
 .../controllers/knowledge-explorer.js.es6     |   5 +
 .../templates/knowledge-explorer.hbs          | 134 +++++++++---------
 config/locales/client.en.yml                  |   1 +
 3 files changed, 75 insertions(+), 65 deletions(-)

diff --git a/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6 b/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
index 650bf5a..45173f2 100644
--- a/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
+++ b/assets/javascripts/discourse/controllers/knowledge-explorer.js.es6
@@ -44,6 +44,11 @@ export default Ember.Controller.extend({
     }
   },
 
+  @discourseComputed("topics")
+  emptyTopics(topics) {
+    return topics.length > 0 ? false : true;
+  },
+
   @discourseComputed("loadMoreUrl")
   canLoadMore(loadMoreUrl) {
     if (loadMoreUrl === null || this.isLoadingMore) {
diff --git a/assets/javascripts/discourse/templates/knowledge-explorer.hbs b/assets/javascripts/discourse/templates/knowledge-explorer.hbs
index 0bf10bf..49be2f4 100644
--- a/assets/javascripts/discourse/templates/knowledge-explorer.hbs
+++ b/assets/javascripts/discourse/templates/knowledge-explorer.hbs
@@ -1,71 +1,75 @@
 <div class="knowledge-explorer">
-  {{knowledge-explorer-search
-    searchTerm=(readonly searchTerm)
-    onSearch=(action "performSearch")
-  }}
-  {{#conditional-loading-spinner condition=isLoading}}
-    <div class="knowledge-explorer-browse">
-      {{#if site.mobileView}}
-        {{#unless selectedTopic}}
-          {{d-button class="knowledge-explorer-expander" icon=(if expandedFilters "angle-up" "angle-down") action=(action "toggleFilters") label="knowledge_explorer.filter_button"}}
-        {{/unless}}
-      {{/if}}
-      <div class="knowledge-explorer-filters">
-        {{#if expandedFilters}}
-            {{#if categories}}
-              <div class="knowledge-explorer-items knowledge-explorer-categories">
-                <h3>{{i18n 'knowledge_explorer.categories'}}</h3>
-                {{#each categories as |category|}}
-                  {{knowledge-explorer-category
-                    category=category
-                    selectCategory=(action "updateSelectedCategories"
-                    tagName="")
+  {{#if emptyTopics}}
+    <span class="no-topics-found">{{i18n 'knowledge_explorer.no_topics'}}</span>
+  {{else}}
+    {{knowledge-explorer-search
+      searchTerm=(readonly searchTerm)
+      onSearch=(action "performSearch")
+    }}
+    {{#conditional-loading-spinner condition=isLoading}}
+      <div class="knowledge-explorer-browse">
+        {{#if site.mobileView}}
+          {{#unless selectedTopic}}
+            {{d-button class="knowledge-explorer-expander" icon=(if expandedFilters "angle-up" "angle-down") action=(action "toggleFilters") label="knowledge_explorer.filter_button"}}
+          {{/unless}}
+        {{/if}}
+        <div class="knowledge-explorer-filters">
+          {{#if expandedFilters}}
+              {{#if categories}}
+                <div class="knowledge-explorer-items knowledge-explorer-categories">
+                  <h3>{{i18n 'knowledge_explorer.categories'}}</h3>
+                  {{#each categories as |category|}}
+                    {{knowledge-explorer-category
+                      category=category
+                      selectCategory=(action "updateSelectedCategories"
+                      tagName="")
+                    }}
+                  {{/each}}
+                </div>
+              {{/if}}
+              {{#if tags}}
+                <div class="knowledge-explorer-items knowledge-explorer-tags">
+                  <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
+                  {{#each tags as |tag|}}
+                    {{knowledge-explorer-tag
+                      tag=tag
+                      selectTag=(action "updateSelectedTags")
+                    }}
+                  {{/each}}
+                </div>
+              {{/if}}
+          {{/if}}
+        </div>
+        {{#if selectedTopic}}
+          {{#conditional-loading-spinner condition=isTopicLoading}}
+            {{knowledge-explorer-topic topic=topic}}
+          {{/conditional-loading-spinner}}
+        {{else}}
+          <div class="knowledge-explorer-results">
+            {{#if isSearching}}
+              {{#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
                   }}
-                {{/each}}
-              </div>
-            {{/if}}
-            {{#if tags}}
-              <div class="knowledge-explorer-items knowledge-explorer-tags">
-                <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
-                {{#each tags as |tag|}}
-                  {{knowledge-explorer-tag
-                    tag=tag
-                    selectTag=(action "updateSelectedTags")
-                  }}
-                {{/each}}
-              </div>
+                </div>
+              {{/if}}
             {{/if}}
+            {{#unless emptySearchResults}}
+              {{knowledge-explorer-topic-list
+                topics=topics
+                selectTopic=(action "setSelectedTopic")
+                loadMore=(action "loadMore")
+                loading=isLoadingMore
+              }}
+            {{/unless}}
+          </div>
         {{/if}}
       </div>
-      {{#if selectedTopic}}
-        {{#conditional-loading-spinner condition=isTopicLoading}}
-          {{knowledge-explorer-topic topic=topic}}
-        {{/conditional-loading-spinner}}
-      {{else}}
-        <div class="knowledge-explorer-results">
-          {{#if isSearching}}
-            {{#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>
-            {{/if}}
-          {{/if}}
-          {{#unless emptySearchResults}}
-            {{knowledge-explorer-topic-list
-              topics=topics
-              selectTopic=(action "setSelectedTopic")
-              loadMore=(action "loadMore")
-              loading=isLoadingMore
-            }}
-          {{/unless}}
-        </div>
-      {{/if}}
-    </div>
-  {{/conditional-loading-spinner}}
+    {{/conditional-loading-spinner}}
+  {{/if}}
 </div>
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index f5bad96..7b68d66 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2,6 +2,7 @@ en:
   js:
     knowledge_explorer:
       title: "Knowledge Explorer"
+      no_topics: "No topics in Knowledge Explorer."
       categories: "Categories"
       tags: "Tags"
       search: