From 82a9109ae3099180d3509f309b6ba856cd8d7457 Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Wed, 23 Feb 2022 21:24:26 +0200
Subject: [PATCH] FEATURE: Show topic visited state on search page (#15994)

The visited state used user's history instead of the data from the
server.
---
 .../app/templates/components/search-result-entry.hbs |  2 +-
 .../discourse/tests/acceptance/search-full-test.js   | 12 ++++++++++++
 .../discourse/tests/helpers/create-pretender.js      | 10 +++++++---
 app/assets/stylesheets/common/base/search.scss       |  2 +-
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs b/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs
index 3b23861cdb5..860cee9c3b2 100644
--- a/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/search-result-entry.hbs
@@ -10,7 +10,7 @@
       {{track-selected selectedList=selected selectedId=post.topic class="bulk-select"}}
     {{/if}}
 
-    <a href={{post.url}} {{action "logClick" post.topic_id}} class="search-link" role="heading" aria-level="2">
+    <a href={{post.url}} {{action "logClick" post.topic_id}} class="search-link{{if post.topic.visited " visited"}}" role="heading" aria-level="2">
       {{raw "topic-status" topic=post.topic showPrivateMessageIcon=true}}
       <span class="topic-title">
         {{#if post.useTopicTitleHeadline}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js
index 8efa99a8e50..8331ebec021 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js
@@ -558,4 +558,16 @@ acceptance("Search - Full Page", function (needs) {
     await click(".topic-bulk-actions-modal .btn:nth-child(2)"); // close topics
     assert.equal(lastBody["topic_ids[]"], 7);
   });
+
+  test("adds visited class to visited topics", async function (assert) {
+    await visit("/search");
+
+    await fillIn(".search-query", "discourse");
+    await click(".search-cta");
+    assert.equal(queryAll(".visited").length, 0);
+
+    await fillIn(".search-query", "discourse visited");
+    await click(".search-cta");
+    assert.equal(queryAll(".visited").length, 1);
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/helpers/create-pretender.js b/app/assets/javascripts/discourse/tests/helpers/create-pretender.js
index 288fcb787dd..00beaebec5d 100644
--- a/app/assets/javascripts/discourse/tests/helpers/create-pretender.js
+++ b/app/assets/javascripts/discourse/tests/helpers/create-pretender.js
@@ -254,10 +254,14 @@ export function applyDefaultHandlers(pretender) {
   pretender.get("/search", (request) => {
     if (request.queryParams.q === "discourse") {
       return response(fixturesByUrl["/search.json"]);
+    } else if (request.queryParams.q === "discourse visited") {
+      const obj = JSON.parse(JSON.stringify(fixturesByUrl["/search.json"]));
+      obj.topics.firstObject.visited = true;
+      return response(obj);
     } else if (request.queryParams.q === "discourse in:personal") {
-      const fixtures = fixturesByUrl["/search.json"];
-      fixtures.topics.firstObject.archetype = "private_message";
-      return response(fixtures);
+      const obj = JSON.parse(JSON.stringify(fixturesByUrl["/search.json"]));
+      obj.topics.firstObject.archetype = "private_message";
+      return response(obj);
     } else {
       return response({});
     }
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 6edced0927f..ccf4cc6805f 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -329,7 +329,7 @@
     }
   }
 
-  a.search-link:visited .topic-title {
+  a.search-link.visited .topic-title {
     color: var(--primary-medium);
   }
   .search-link {