FIX: Keep the original URLParams in navigation item (#28696)

Originally, we assumed that the href passed to the NavigationItem must
not have URLParams, and roughly appended URLParams such as
`?order=created` to the end. This will result in something like
`/latest?state=my_votes?order=created` (note the double question mark
here), for example the discourse-topic-voting plugin

This commit modifies the logic for appending URLParams to the end,
ensuring that the original URL parameters are preserved.

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

@@ -54,8 +54,9 @@ export default class NavigationItem extends Component {
     super.didReceiveAttrs(...arguments);
     const content = this.content;
 
-    let href = content.get("href");
+    let [href, searchParams] = content.get("href")?.split("?") || [];
-    let urlSearchParams = new URLSearchParams();
+
+    let urlSearchParams = new URLSearchParams(searchParams);
     let addParamsEvenIfEmpty = false;
 
     // Include the category id if the option is present
@@ -81,14 +82,15 @@ export default class NavigationItem extends Component {
 
     if (
       this.siteSettings.desktop_category_page_style ===
-      "categories_and_latest_topics_created_date"
+        "categories_and_latest_topics_created_date" &&
+      urlSearchParams.get("order") == null
     ) {
       urlSearchParams.set("order", "created");
     }
 
     const queryString = urlSearchParams.toString();
-    if (addParamsEvenIfEmpty || queryString) {
+    if (addParamsEvenIfEmpty || (queryString && href)) {
-      href += `?${queryString}`;
+      href = (href || "") + `?${queryString}`;
     }
     this.set("hrefLink", href);
 

app/assets/javascripts/discourse/tests/integration/components/navigation-bar-test.gjs

@@ -6,7 +6,21 @@ import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 
 const navItems = [
   EmberObject.create({ name: "new", displayName: "New" }),
-  EmberObject.create({ name: "unread", displayName: "Unread" }),
+  EmberObject.create({
+    name: "unread",
+    displayName: "Unread",
+    href: "/unread",
+  }),
+  EmberObject.create({
+    name: "votes",
+    displayName: "Votes",
+    href: "/latest?order=votes",
+  }),
+  EmberObject.create({
+    name: "my-votes",
+    displayName: "My votes",
+    href: "/latest?state=my_votes",
+  }),
 ];
 
 module("Integration | Component | navigation-bar", function (hooks) {
@@ -19,6 +33,37 @@ module("Integration | Component | navigation-bar", function (hooks) {
     assert.dom(".nav .nav-item_unread").includesText("Unread");
   });
 
+  test("display currect url", async function (assert) {
+    await render(<template><NavigationBar @navItems={{navItems}} /></template>);
+
+    assert.dom(".nav .nav-item_new > a").hasNoAttribute("href");
+    assert.dom(".nav .nav-item_unread > a").hasAttribute("href", "/unread");
+    assert
+      .dom(".nav .nav-item_votes > a")
+      .hasAttribute("href", "/latest?order=votes");
+    assert
+      .dom(".nav .nav-item_my-votes > a")
+      .hasAttribute("href", "/latest?state=my_votes");
+  });
+
+  test("display currect url when desktop_category_page_style is categories_and_latest_topics_created_date", async function (assert) {
+    this.siteSettings.desktop_category_page_style =
+      "categories_and_latest_topics_created_date";
+
+    await render(<template><NavigationBar @navItems={{navItems}} /></template>);
+
+    assert.dom(".nav .nav-item_new > a").hasNoAttribute("href");
+    assert
+      .dom(".nav .nav-item_unread > a")
+      .hasAttribute("href", "/unread?order=created");
+    assert
+      .dom(".nav .nav-item_votes > a")
+      .hasAttribute("href", "/latest?order=votes");
+    assert
+      .dom(".nav .nav-item_my-votes > a")
+      .hasAttribute("href", "/latest?state=my_votes&order=created");
+  });
+
   test("display navigation bar items behind a dropdown on mobile", async function (assert) {
     this.site.mobileView = true;