From ee5111a628379709770f0e7c9cf1e4e423e01515 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Tue, 7 Jan 2025 11:52:34 +0000
Subject: [PATCH] DEV: Update for glimmer topic list (#189)

This switches docs to use the core `<BasicTopicList` component, with some customizations made via the DAG API.
---
 .../components/docs-topic-list-item.js        | 24 -----------
 .../discourse/components/docs-topic-list.js   | 32 ---------------
 .../discourse/initializers/setup-docs.js      | 16 ++++++++
 .../components/docs-topic-list-item.hbs       |  1 -
 .../templates/components/docs-topic-list.hbs  | 41 -------------------
 .../discourse/templates/docs-index.hbs        | 18 ++++----
 .../discourse/templates/docs-topic-link.hbr   |  1 -
 .../templates/docs-topic-list-item.hbr        | 19 ---------
 assets/stylesheets/common/docs.scss           | 11 ++++-
 assets/stylesheets/mobile/docs.scss           |  2 +-
 spec/system/docs_index_spec.rb                |  4 +-
 test/javascripts/acceptance/docs-test.js      |  5 +--
 12 files changed, 39 insertions(+), 135 deletions(-)
 delete mode 100644 assets/javascripts/discourse/components/docs-topic-list-item.js
 delete mode 100644 assets/javascripts/discourse/components/docs-topic-list.js
 delete mode 100644 assets/javascripts/discourse/templates/components/docs-topic-list-item.hbs
 delete mode 100644 assets/javascripts/discourse/templates/components/docs-topic-list.hbs
 delete mode 100644 assets/javascripts/discourse/templates/docs-topic-link.hbr
 delete mode 100644 assets/javascripts/discourse/templates/docs-topic-list-item.hbr

diff --git a/assets/javascripts/discourse/components/docs-topic-list-item.js b/assets/javascripts/discourse/components/docs-topic-list-item.js
deleted file mode 100644
index 020ff0d..0000000
--- a/assets/javascripts/discourse/components/docs-topic-list-item.js
+++ /dev/null
@@ -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))
-      );
-    }
-  }
-}
diff --git a/assets/javascripts/discourse/components/docs-topic-list.js b/assets/javascripts/discourse/components/docs-topic-list.js
deleted file mode 100644
index 2d16744..0000000
--- a/assets/javascripts/discourse/components/docs-topic-list.js
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/assets/javascripts/discourse/initializers/setup-docs.js b/assets/javascripts/discourse/initializers/setup-docs.js
index ac3e96c..313f03e 100644
--- a/assets/javascripts/discourse/initializers/setup-docs.js
+++ b/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 {
diff --git a/assets/javascripts/discourse/templates/components/docs-topic-list-item.hbs b/assets/javascripts/discourse/templates/components/docs-topic-list-item.hbs
deleted file mode 100644
index 87721b9..0000000
--- a/assets/javascripts/discourse/templates/components/docs-topic-list-item.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{this.topicListItemContents}}
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/components/docs-topic-list.hbs b/assets/javascripts/discourse/templates/components/docs-topic-list.hbs
deleted file mode 100644
index cd28b4d..0000000
--- a/assets/javascripts/discourse/templates/components/docs-topic-list.hbs
+++ /dev/null
@@ -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}} />
\ No newline at end of file
diff --git a/assets/javascripts/discourse/templates/docs-index.hbs b/assets/javascripts/discourse/templates/docs-index.hbs
index 3dea2e5..c42d0ad 100644
--- a/assets/javascripts/discourse/templates/docs-index.hbs
+++ b/assets/javascripts/discourse/templates/docs-index.hbs
@@ -243,15 +243,15 @@
           {{/if}}
 
           {{#unless this.emptyResults}}
-            <DocsTopicList
-              @topics={{this.topics}}
-              @showExcerpts={{this.showExcerpts}}
-              @ascending={{this.ascending}}
-              @order={{this.orderColumn}}
-              @sortBy={{action "sortBy"}}
-              @loadMore={{action "loadMore"}}
-              @loading={{this.isLoadingMore}}
-            />
+            <LoadMore @selector=".topic-list tr" @action={{this.loadMore}}>
+              <BasicTopicList
+                @topics={{this.topics}}
+                @ascending={{this.ascending}}
+                @order={{this.orderColumn}}
+                @changeSort={{action "sortBy"}}
+              />
+            </LoadMore>
+            <ConditionalLoadingSpinner @condition={{this.isLoadingMore}} />
           {{/unless}}
         </div>
       {{/if}}
diff --git a/assets/javascripts/discourse/templates/docs-topic-link.hbr b/assets/javascripts/discourse/templates/docs-topic-link.hbr
deleted file mode 100644
index ab7afc2..0000000
--- a/assets/javascripts/discourse/templates/docs-topic-link.hbr
+++ /dev/null
@@ -1 +0,0 @@
-<a href="/{{urlPath}}?topic={{topic.id}}" class="docs-topic-link">{{{topic.fancyTitle}}}</a>
diff --git a/assets/javascripts/discourse/templates/docs-topic-list-item.hbr b/assets/javascripts/discourse/templates/docs-topic-list-item.hbr
deleted file mode 100644
index 026c4b2..0000000
--- a/assets/javascripts/discourse/templates/docs-topic-list-item.hbr
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/assets/stylesheets/common/docs.scss b/assets/stylesheets/common/docs.scss
index b1df0bd..af9bead 100644
--- a/assets/stylesheets/common/docs.scss
+++ b/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;
+  }
+}
diff --git a/assets/stylesheets/mobile/docs.scss b/assets/stylesheets/mobile/docs.scss
index 6d27b71..4686abd 100644
--- a/assets/stylesheets/mobile/docs.scss
+++ b/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 {
diff --git a/spec/system/docs_index_spec.rb b/spec/system/docs_index_spec.rb
index 057ae20..f25ad2a 100644
--- a/spec/system/docs_index_spec.rb
+++ b/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(".docs-topic-link", text: topic_2.title)
+    expect(page).to have_css(".raw-topic-link", text: topic_1.title)
+    expect(page).to have_css(".raw-topic-link", text: topic_2.title)
   end
 
   describe "topic excerpts" do
diff --git a/test/javascripts/acceptance/docs-test.js b/test/javascripts/acceptance/docs-test.js
index 9796909..4b4165f 100644
--- a/test/javascripts/acceptance/docs-test.js
+++ b/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(
-      query(".docs-topic-link").innerText.trim(),
-      "Importing from Software X"
-    );
+    assert.dom(".raw-topic-link").hasText("Importing from Software X");
   });
 
   test("selecting a category", async function (assert) {