UX: "view all" link on upcoming events list (#518)

* UX: "view all" link on upcoming events list * DEV: tests for view-all link * UX: footer style * DEV: fix linting
discourse · Jan 8, 2024 · d973787 · d973787
1 parent 9fe3eb2
commit d973787
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 1 deletion.
diff --git a/assets/javascripts/discourse/components/upcoming-events-list.gjs b/assets/javascripts/discourse/components/upcoming-events-list.gjs
@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import { LinkTo } from "@ember/routing";
 import { inject as service } from "@ember/service";
 import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import DButton from "discourse/components/d-button";
@@ -40,6 +41,9 @@ export default class UpcomingEventsList extends Component {
   errorMessage = I18n.t(
     "discourse_calendar.discourse_post_event.upcoming_events_list.error"
   );
+  viewAllLabel = I18n.t(
+    "discourse_calendar.discourse_post_event.upcoming_events_list.view_all"
+  );
 
   constructor() {
     super(...arguments);
@@ -182,6 +186,15 @@ export default class UpcomingEventsList extends Component {
             {{/each-in}}
           {{/unless}}
         </div>
+
+        <div class="upcoming-events-list__footer">
+          <LinkTo
+            @route="discourse-post-event-upcoming-events"
+            class="upcoming-events-list__view-all"
+          >
+            {{this.viewAllLabel}}
+          </LinkTo>
+        </div>
       </div>
     {{/if}}
   </template>

diff --git a/assets/stylesheets/common/upcoming-events-list.scss b/assets/stylesheets/common/upcoming-events-list.scss
@@ -33,4 +33,11 @@
     width: 30%;
     text-align: center;
   }
+
+  &__footer {
+    border-top: 1px solid var(--primary-low);
+    padding-top: 0.5em;
+    font-size: var(--font-down-1);
+    line-height: var(--line-height-medium);
+  }
 }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
@@ -444,6 +444,7 @@ en:
           all_day: "All-day"
           error: "Failed to retrieve events"
           try_again: "Try again"
+          view_all: "View all"
     group_timezones:
       search: "Search..."
       group_availability: "%{group} availability"

diff --git a/test/javascripts/integration/components/upcoming-events-list-test.gjs b/test/javascripts/integration/components/upcoming-events-list-test.gjs
@@ -1,6 +1,6 @@
 import { hash } from "@ember/helper";
 import Service from "@ember/service";
-import { render, waitFor } from "@ember/test-helpers";
+import { click, currentURL, render, waitFor } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
@@ -19,6 +19,9 @@ import UpcomingEventsList, {
 
 class RouterStub extends Service {
   currentRoute = { attributes: { category: { id: 1 } } };
+  currentRouteName = "discovery.latest";
+  on() {}
+  off() {}
 }
 
 const today = "2100-02-01T08:00:00";
@@ -132,6 +135,37 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
       ["Awesome Event", "Another Awesome Event"],
       "it displays the event name"
     );
+
+    assert.ok(
+      exists(".upcoming-events-list__view-all"),
+      "it displays the view-all link"
+    );
+  });
+
+  test("with events, view-all navigation", async function (assert) {
+    pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
+
+    await render(<template><UpcomingEventsList /></template>);
+
+    this.appEvents.trigger("page:changed", { url: "/" });
+
+    await waitFor(".loading-container .spinner", { count: 0 });
+
+    assert.strictEqual(
+      query(".upcoming-events-list__view-all").innerText,
+      I18n.t(
+        "discourse_calendar.discourse_post_event.upcoming_events_list.view_all"
+      ),
+      "it displays the view-all link"
+    );
+
+    await click(".upcoming-events-list__view-all");
+
+    assert.strictEqual(
+      currentURL(),
+      "/upcoming-events",
+      "view-all link navigates to the upcoming-events page"
+    );
   });
 
   test("with events, overridden formats", async function (assert) {