FEATURE: add categories page style to order topics by created date (#17500)

app/assets/javascripts/discourse/app/components/navigation-item.js

@@ -65,6 +65,13 @@ export default Component.extend(FilterModeMixin, {
       }
     }
 
+    if (
+      this.siteSettings.desktop_category_page_style ===
+      "categories_and_latest_topics_created_date"
+    ) {
+      queryParams.push("order=created");
+    }
+
     if (queryParams.length) {
       href += `?${queryParams.join("&")}`;
     }

app/assets/javascripts/discourse/app/controllers/discovery/categories.js

@@ -23,7 +23,6 @@ export default DiscoveryController.extend({
   category: null,
 
   canEdit: reads("currentUser.staff"),
-
   @discourseComputed("model.parentCategory")
   categoryPageStyle(parentCategory) {
     let style = this.siteSettings.desktop_category_page_style;
@@ -40,7 +39,9 @@ export default DiscoveryController.extend({
     }
 
     const componentName =
-      parentCategory && style === "categories_and_latest_topics"
+      parentCategory &&
+      (style === "categories_and_latest_topics" ||
+        style === "categories_and_latest_topics_created_date")
         ? "categories_only"
         : style;
     return dasherize(componentName);

app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js

@@ -781,6 +781,7 @@ export default {
       case "categories_with_featured_topics":
         return $(".latest .featured-topic");
       case "categories_and_latest_topics":
+      case "categories_and_latest_topics_created_date":
         return $(".latest-topic-list .latest-topic-list-item");
       case "categories_and_top_topics":
         return $(".top-topic-list .latest-topic-list-item");

app/assets/javascripts/discourse/app/models/topic-tracking-state.js

@@ -245,8 +245,10 @@ const TopicTrackingState = EmberObject.extend({
       filter === "categories" &&
       data.message_type === "latest" &&
       !Site.current().mobileView &&
-      this.siteSettings.desktop_category_page_style ===
+      (this.siteSettings.desktop_category_page_style ===
-        "categories_and_latest_topics"
+        "categories_and_latest_topics" ||
+        this.siteSettings.desktop_category_page_style ===
+          "categories_and_latest_topics_created_date")
     ) {
       this._addIncoming(data.topic_id);
     }

app/assets/javascripts/discourse/app/routes/discovery-categories.js

@@ -24,7 +24,10 @@ const DiscoveryCategoriesRoute = DiscourseRoute.extend(OpenComposer, {
     let style =
       !this.site.mobileView && this.siteSettings.desktop_category_page_style;
 
-    if (style === "categories_and_latest_topics") {
+    if (
+      style === "categories_and_latest_topics" ||
+      style === "categories_and_latest_topics_created_date"
+    ) {
       return this._findCategoriesAndTopics("latest");
     } else if (style === "categories_and_top_topics") {
       return this._findCategoriesAndTopics("top");

app/assets/javascripts/discourse/app/templates/components/categories-topic-list.hbs

@@ -8,7 +8,11 @@
     <LatestTopicListItem @topic={{t}} />
   {{/each}}
   <div class="more-topics">
-    <a href={{get-url (concat "/" this.filter)}} class="btn btn-default pull-right">{{i18n "more"}}</a>
+    {{#if (eq this.siteSettings.desktop_category_page_style "categories_and_latest_topics_created_date") }}
+      <a href={{get-url (concat "/" this.filter "?order=created")}} class="btn btn-default pull-right">{{i18n "more"}}</a>
+    {{else}}
+      <a href={{get-url (concat "/" this.filter)}} class="btn btn-default pull-right">{{i18n "more"}}</a>
+    {{/if}}
   </div>
 {{else}}
   <div class="no-topics">

app/assets/javascripts/discourse/app/templates/discovery/categories.hbs

@@ -9,9 +9,14 @@
     </div>
   {{/if}}
 
-  {{component this.categoryPageStyle
+  {{#if (eq this.categoryPageStyle "categories-and-latest-topics-created-date")}}
-              categories=this.model.categories
+    <CategoriesAndLatestTopics @categories={{this.model.categories}} @topics={{this.model.topics}} />
-              topics=this.model.topics}}
+  {{else}}
+    {{component this.categoryPageStyle
+                categories=this.model.categories
+                topics=this.model.topics}}
+  {{/if}}
+
 </DiscoveryCategories>
 
 <PluginOutlet @name="below-discovery-categories" @connectorTagName="div" @args={{hash categories=this.model.categories categoryPageStyle=this.categoryPageStyle topics=this.model.topics}} />

app/assets/javascripts/discourse/tests/acceptance/categories-test.js

@@ -1,4 +1,8 @@
-import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  exists,
+  query,
+} from "discourse/tests/helpers/qunit-helpers";
 import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
 
@@ -29,9 +33,30 @@ acceptance("Categories - 'categories_and_latest_topics'", function (needs) {
       exists("div.latest-topic-list div[data-topic-id=8]"),
       "shows the topic list"
     );
+    assert.notOk(
+      query(".more-topics a").href.endsWith("?order=created"),
+      "the load more button doesn't include the order=created param"
+    );
   });
 });
 
+acceptance(
+  "Categories - 'categories_and_latest_topics' - order by created date",
+  function (needs) {
+    needs.settings({
+      desktop_category_page_style: "categories_and_latest_topics_created_date",
+    });
+    test("order topics by", async function (assert) {
+      await visit("/categories");
+
+      assert.ok(
+        query(".more-topics a").href.endsWith("?order=created"),
+        "the load more button includes the order=created param"
+      );
+    });
+  }
+);
+
 acceptance("Categories - 'categories_with_featured_topics'", function (needs) {
   needs.settings({
     desktop_category_page_style: "categories_with_featured_topics",

app/controllers/categories_controller.rb

@@ -48,10 +48,14 @@ class CategoriesController < ApplicationController
         style = SiteSetting.desktop_category_page_style
         topic_options = {
           per_page: CategoriesController.topics_per_page,
-          no_definitions: true
+          no_definitions: true,
         }
 
-        if style == "categories_and_latest_topics"
+        if style == "categories_and_latest_topics_created_date"
+          topic_options[:order] = 'created'
+          @topic_list = TopicQuery.new(current_user, topic_options).list_latest
+          @topic_list.more_topics_url = url_for(public_send("latest_path", sort: :created))
+        elsif style == "categories_and_latest_topics"
           @topic_list = TopicQuery.new(current_user, topic_options).list_latest
           @topic_list.more_topics_url = url_for(public_send("latest_path"))
         elsif style == "categories_and_top_topics"
@@ -284,8 +288,10 @@ class CategoriesController < ApplicationController
 
     topic_options = {
       per_page: CategoriesController.topics_per_page,
-      no_definitions: true
+      no_definitions: true,
     }
+    style = SiteSetting.desktop_category_page_style
+    topic_options[:order] = 'created' if style == "categories_and_latest_topics_created_date"
 
     result = CategoryAndTopicLists.new
     result.category_list = CategoryList.new(guardian, category_options)

app/models/category_page_style.rb

@@ -12,6 +12,7 @@ class CategoryPageStyle < EnumSiteSetting
     @values ||= [
       { name: 'category_page_style.categories_only', value: 'categories_only' },
       { name: 'category_page_style.categories_with_featured_topics', value: 'categories_with_featured_topics' },
+      { name: 'category_page_style.categories_and_latest_topics_created_date', value: 'categories_and_latest_topics_created_date' },
       { name: 'category_page_style.categories_and_latest_topics', value: 'categories_and_latest_topics' },
       { name: 'category_page_style.categories_and_top_topics', value: 'categories_and_top_topics' },
       { name: 'category_page_style.categories_boxes', value: 'categories_boxes' },

config/locales/client.en.yml

@@ -2063,6 +2063,7 @@ en:
       categories_only: "Categories Only"
       categories_with_featured_topics: "Categories with Featured Topics"
       categories_and_latest_topics: "Categories and Latest Topics"
+      categories_and_latest_topics_created_date: "Categories and Latest Topics (sort by topic created date)"
       categories_and_top_topics: "Categories and Top Topics"
       categories_boxes: "Boxes with Subcategories"
       categories_boxes_with_topics: "Boxes with Featured Topics"

config/locales/server.en.yml

@@ -5010,6 +5010,8 @@ en:
                 label: "Categories with Featured Topics"
               categories_and_latest_topics:
                 label: "Categories and Latest Topics"
+              categories_and_latest_topics_created_date:
+                label: "Categories and Latest Topics (sort by topic created date)"
               categories_and_top_topics:
                 label: "Categories and Top Topics"
               categories_boxes:

spec/requests/categories_controller_spec.rb

@@ -140,6 +140,37 @@ describe CategoriesController do
       expect(subsubcategory_response["topics"].map { |c| c['id'] }).to contain_exactly(topic3.id)
     end
 
+    describe 'categories and latest topics - ordered by created date' do
+      fab!(:category) { Fabricate(:category) }
+      fab!(:topic1) { Fabricate(:topic, category: category, created_at: 5.days.ago, updated_at: Time.now, bumped_at: Time.now) }
+      fab!(:topic2) { Fabricate(:topic, category: category, created_at: 2.days.ago, bumped_at: 2.days.ago) }
+      fab!(:topic3) { Fabricate(:topic, category: category, created_at: 1.day.ago, bumped_at: 1.day.ago) }
+
+      context 'when order is not set to created date' do
+        before do
+          SiteSetting.desktop_category_page_style = "categories_and_latest_topics"
+        end
+
+        it 'sorts topics by the default bump date' do
+          get "/categories_and_latest.json"
+          expect(response.status).to eq(200)
+          expect(response.parsed_body['topic_list']['topics'].map { |t| t["id"] }).to eq([topic1.id, topic3.id, topic2.id])
+        end
+      end
+
+      context 'when order is set to created' do
+        before do
+          SiteSetting.desktop_category_page_style = "categories_and_latest_topics_created_date"
+        end
+
+        it 'sorts topics by crated at date' do
+          get "/categories_and_latest.json"
+          expect(response.status).to eq(200)
+          expect(response.parsed_body['topic_list']['topics'].map { |t| t["id"] }).to eq([topic3.id, topic2.id, topic1.id])
+        end
+      end
+    end
+
     it 'includes subcategories and topics by default when view is subcategories_with_featured_topics' do
       SiteSetting.max_category_nesting = 3
       subcategory = Fabricate(:category, user: admin, parent_category: category)