DEV: Update for glimmer topic list (#189)

This switches docs to use the core `<BasicTopicList` component, with some customizations made via the DAG API.

assets/javascripts/discourse/components/docs-topic-list-item.js

@@ -1,24 +0,0 @@
-import Component from "@ember/component";
-import { htmlSafe } from "@ember/template";
-import { classNameBindings, tagName } from "@ember-decorators/component";
-import { RUNTIME_OPTIONS } from "discourse-common/lib/raw-handlebars-helpers";
-import { findRawTemplate } from "discourse-common/lib/raw-templates";
-
-@tagName("tr")
-@classNameBindings(":topic-list-item")
-export default class DocsTopicListItem extends Component {
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-    this.renderTopicListItem();
-  }
-
-  renderTopicListItem() {
-    const template = findRawTemplate("docs-topic-list-item");
-    if (template) {
-      this.set(
-        "topicListItemContents",
-        htmlSafe(template(this, RUNTIME_OPTIONS))
-      );
-    }
-  }
-}

assets/javascripts/discourse/components/docs-topic-list.js

@@ -1,32 +0,0 @@
-import Component from "@ember/component";
-import { action } from "@ember/object";
-import { classNames } from "@ember-decorators/component";
-import discourseComputed from "discourse-common/utils/decorators";
-import { getDocs } from "../../lib/get-docs";
-
-@classNames("docs-topic-list")
-export default class DocsTopicList extends Component {
-  urlPath = getDocs();
-
-  @discourseComputed("order")
-  sortTitle(order) {
-    return order === "title";
-  }
-
-  @discourseComputed("order")
-  sortActivity(order) {
-    return order === "activity";
-  }
-
-  @action
-  sortListActivity() {
-    this.sortBy("activity");
-    return false;
-  }
-
-  @action
-  sortListTitle() {
-    this.sortBy("title");
-    return false;
-  }
-}

assets/javascripts/discourse/initializers/setup-docs.js

@@ -17,6 +17,22 @@ function initialize(api, container) {
       href: "/" + docsPath,
     });
   }
+
+  api.registerValueTransformer("topic-list-columns", ({ value: columns }) => {
+    if (container.lookup("service:router").currentRouteName === "docs.index") {
+      columns.delete("posters");
+      columns.delete("replies");
+      columns.delete("views");
+    }
+    return columns;
+  });
+
+  api.registerValueTransformer("topic-list-item-expand-pinned", ({ value }) => {
+    if (container.lookup("service:router").currentRouteName === "docs.index") {
+      return true;
+    }
+    return value;
+  });
 }
 
 export default {

assets/javascripts/discourse/templates/components/docs-topic-list-item.hbs

@@ -1 +0,0 @@
-{{this.topicListItemContents}}

assets/javascripts/discourse/templates/components/docs-topic-list.hbs

@@ -1,41 +0,0 @@
-<LoadMore @selector=".topic-list tr" @action={{this.loadMore}}>
-  <table class="topic-list">
-    <thead class="topic-list-header">
-      <th role="button" class="topic-list-data" {{action "sortListTitle"}}>
-        {{i18n "docs.column_titles.topic"}}
-
-        {{#if this.sortTitle}}
-          {{#if this.ascending}}
-            {{d-icon "angle-up"}}
-          {{else}}
-            {{d-icon "angle-down"}}
-          {{/if}}
-        {{/if}}
-      </th>
-
-      <th role="button" class="topic-list-data" {{action "sortListActivity"}}>
-        {{i18n "docs.column_titles.activity"}}
-
-        {{#if this.sortActivity}}
-          {{#if this.ascending}}
-            {{d-icon "angle-up"}}
-          {{else}}
-            {{d-icon "angle-down"}}
-          {{/if}}
-        {{/if}}
-      </th>
-    </thead>
-
-    <tbody class="topic-list-body">
-      {{#each this.topics as |topic|}}
-        {{docs-topic-list-item
-          topic=topic
-          urlPath=this.urlPath
-          showExcerpt=this.showExcerpts
-        }}
-      {{/each}}
-    </tbody>
-  </table>
-</LoadMore>
-
-<ConditionalLoadingSpinner @condition={{this.loading}} />

assets/javascripts/discourse/templates/docs-index.hbs

@@ -243,15 +243,15 @@
           {{/if}}
 
           {{#unless this.emptyResults}}
-            <DocsTopicList
+            <LoadMore @selector=".topic-list tr" @action={{this.loadMore}}>
-              @topics={{this.topics}}
+              <BasicTopicList
-              @showExcerpts={{this.showExcerpts}}
+                @topics={{this.topics}}
-              @ascending={{this.ascending}}
+                @ascending={{this.ascending}}
-              @order={{this.orderColumn}}
+                @order={{this.orderColumn}}
-              @sortBy={{action "sortBy"}}
+                @changeSort={{action "sortBy"}}
-              @loadMore={{action "loadMore"}}
+              />
-              @loading={{this.isLoadingMore}}
+            </LoadMore>
-            />
+            <ConditionalLoadingSpinner @condition={{this.isLoadingMore}} />
           {{/unless}}
         </div>
       {{/if}}

assets/javascripts/discourse/templates/docs-topic-link.hbr

@@ -1 +0,0 @@
-<a href="/{{urlPath}}?topic={{topic.id}}" class="docs-topic-link">{{{topic.fancyTitle}}}</a>

assets/javascripts/discourse/templates/docs-topic-list-item.hbr

@@ -1,19 +0,0 @@
-{{~raw-plugin-outlet name="topic-list-before-columns"}}
-
-<td class="main-link topic-list-data">
-  {{~raw-plugin-outlet name="topic-list-before-link"}}
-  <span class="link-top-line">
-    {{~raw "topic-status" topic=topic}}
-    {{~raw "docs-topic-link" topic=topic urlPath=urlPath}}
-  </span>
-  <span class="link-bottom-line">
-    {{category-link topic.category}}
-    {{discourse-tags topic mode="list"}}
-  </span>
-  {{!-- {{#if showExcerpt}} --}}
-    {{~raw "list/topic-excerpt" topic=topic}}
-  {{!-- {{/if}} --}}
-</td>
-<td class="topic-list-data">
-  {{format-date topic.bumped_at format="tiny" noTitle="true"}}
-</td>

assets/stylesheets/common/docs.scss

@@ -153,7 +153,7 @@
       font-weight: normal;
       font-size: $font-down-1;
     }
-    .docs-topic-link {
+    .raw-topic-link {
       color: var(--tertiary);
       cursor: pointer;
       display: inline-block;
@@ -274,3 +274,12 @@
     width: 100%;
   }
 }
+
+// TODO: Remove once legacy topic-list is removed
+.docs-browse {
+  .topic-list-data.replies,
+  .topic-list-data.posts,
+  .topic-list-data.views {
+    display: none;
+  }
+}

assets/stylesheets/mobile/docs.scss

@@ -25,7 +25,7 @@
       .docs-topic-list {
         flex-basis: 100%;
       }
-      .docs-topic-link {
+      .raw-topic-link {
         padding-right: 0.25em;
       }
       .docs-topic {

spec/system/docs_index_spec.rb

@@ -16,8 +16,8 @@ describe "Discourse Docs | Index", type: :system do
 
   it "does not error when showing the index" do
     visit("/docs")
-    expect(page).to have_css(".docs-topic-link", text: topic_1.title)
+    expect(page).to have_css(".raw-topic-link", text: topic_1.title)
-    expect(page).to have_css(".docs-topic-link", text: topic_2.title)
+    expect(page).to have_css(".raw-topic-link", text: topic_2.title)
   end
 
   describe "topic excerpts" do

test/javascripts/acceptance/docs-test.js

@@ -57,10 +57,7 @@ acceptance("Docs", function (needs) {
     assert.equal(query(".docs-category .docs-item-count").innerText, "119");
     assert.equal(query(".docs-tag .docs-item-id").innerText, "something");
     assert.equal(query(".docs-tag .docs-item-count").innerText, "74");
-    assert.equal(
+    assert.dom(".raw-topic-link").hasText("Importing from Software X");
-      query(".docs-topic-link").innerText.trim(),
-      "Importing from Software X"
-    );
   });
 
   test("selecting a category", async function (assert) {