DS-734: Add alumni events to federated search #936

sherakama · 2024-08-28T00:10:14Z

READY FOR REVIEW

Summary

Complete refactor of the Alumni search to utilize Instantsearch and more recent UI/UX patterns
Adds support for alumni events

Review By (Date)

End of the sprint

Criticality

Normal

Review Tasks

1. Test Modal Desktop

Navigate to the home page of the preview build
Click on the search icon in the masthead and ensure it opens an overlay
Ensure overlay looks close to current production with the exception being the search field
Ensure focus is on the search field
click on the x to close the overlay
ensure focus is on the search button in the masthead
Hit enter to open the overlay again
press esc to close the overlay
Hit the space bar to open the overlay again
Hit enter to search for an empty string
Assert that you get the empty search message below the field
Validate that the focus trap works by tab navigating through the overlay content until you get back to a focus on the search field
Start typing goose or something else
Use arrow keys to navigate autocomplete options
Press esc to close autocomplete option
Press down arrow to open autocomplete option
Select an option and press enter
Assert that the selected phrase is filled out in the search but you did not navigate to the search page yet
Assert that the clear x option shows up in the search field
Tab navigate to the clear option
Press enter or space bar to clear search field
Enter a new search phrase and select an option with the mouse
Click on the Search icon
Ensure you are navigated to /search with a ?q= parameter that matches your search string
After page loads, click or tab to the search icon in the masthead
Click or press the return key on the masthead search icon
Assert that you scroll to the search field on the page and it is focused

2. Test Modal Mobile

It is the same as desktop just squished so have a look and see that it works on your device.

3. Test Search Page

Navigate to the search page with a query parameter and ensure the search field and state matches "Goose"
Clear the search or start from a fresh page
Click into or tab navigate to the search field
Start typing a query
Assert that the search autocomplete shows up
Assert that you can click on an option and that the search happens right away
Tab navigate and assert you are presented with a skip link past the filters to the results
Select that and ensure the focus moves to the results
Tab through the titles of the results
Scroll back up and select one of the filters from the left sidebar
Ensure the results are immediately updated
Assert that the URL query strings have been updated to reflect your selection
Copy and paste the URL into a new window and assert you get the same state after the page loads
Close that new window
Assert that the results get 'marked' with yellow highlights on the search keywords
Select a couple more filters from the sidebar
Ensure the order of the search items does not change but options without results are hidden
Click on the reset all filters link and assert that the filters are removed
Tab navigate or scroll down to the pager
Select another page
Assert when the page loads and you are scrolled back up to the results and that the URL has updated to show the search parameter
Scroll back up and focus in the search field
Clear the search field of any contents and hit return or click the search icon
Ensure the no search text shows up below the search field
Enter some garbage and search for something that shouldn't get any results
Ensure the no results content shows up
Clear search and start fresh
Filter by Alumni Events
Validate that only 'Events' show up in the results
Validate that the event has the same date and location as found in the /events finder
Search for Wine and ensure that you are shown the Stanford Wine Collection purple banner

4. Test Storyblok Configuration

The search page is more or less the same as the Desktop version with the exception of the filters
Validate the filters work and the clear and view buttons do what you expect them to

5. Aesthetic / A11y / Code

Please also review for general looks and feels as well as any A11y concerns you have.
Review code and catch all of my Shenanigans.

BUGS

Page gets dropped on deep link
Scroll to wrapper
Hash in URL causing navigation issues
Filter out previous events by date

…-federated

…i into DS-734/events-federated

…-federated

gatsby-browser.js

src/utilities/synchronizedEvents.js

sherakama · 2024-10-23T23:51:08Z

I'll look into the failing tests tomorrow.

ericbakenhus · 2024-10-24T22:38:55Z

@sherakama Part 1 reviewed. Buttons are buttoning, modals are modaling, searches are searching, focus traps are trapping focus. 👍

One (very) subjective suggestion: when it auto scrolls to the search input on the search page it feels a little cramped at the top of the window. We could give it a little breathing room by tossing a top scroll margin on it.

No scroll margin:

With 50px top scroll margin:

ericbakenhus · 2024-10-24T23:35:50Z

@sherakama Part 2: mobile seems good. 👍

ericbakenhus · 2024-10-25T17:09:59Z

@sherakama Part 3. Ran into a few issues. Everything not mentioned tested exactly as expected though. 👍

Issues found:

Seems like using the filter skip nav (i.e. adding a hash to the URL) triggers a new search/loading state.
If the URL has a hash in it (e.g. after using the skip filter nav), the clear search button doesn't reset the URL query or hash.
Bit an a11y/UX issue, selecting a filter makes the focus jump over to the wrapper element.
I'm not scrolled to the top after pagination (in FF). For the events search, I had to toss the scrolling code in a setTimeout to get it correctly queued up after the page change for events.
If I have an existing search (e.g. URL has q=test and results are showing for that search), but then manually clear the search input and hit enter/activate the search button then:
- the "Uh oh..." message does appear, but
- the"clear search" button also disappears, which makes clearing the existing search difficult.
I see an expired event in the results:

We're adding a date-based filter onto the events search to prevent that (I don't know if that can be easily applied here; I haven't looked at code yet). It should be less of an issue in production since the daily import function should be unpublishing/moving expired events.

I see an empty event. Don't know what's going on with that. 😅

Subjective thoughts:

Like before, maybe we could add some top scroll margin to the top of the results/wrapper/whatever it moves focus to (for when following the skip filters nav)
I really dislike using loading skeletons to show when Algolia is fetching an uncached query (searching on Directory gives me an aneurysm). The events search, for example, doesn't show any loading indicator (except if it hangs, then we toss on a 50% opacity and show a loading spinner). Even if it was slower (looking at you Coveo), I'd still heavily favor the opacity and/or spinner approach.
That wine banner is huge. More of a wine hero image/header. 😆

sherakama · 2024-10-25T22:50:36Z

Seems like using the filter skip nav (i.e. adding a hash to the URL) triggers a new search/loading state.

Huh yeah, that's strange. I'll look into that.

If the URL has a hash in it (e.g. after using the skip filter nav), the clear search button doesn't reset the URL query or hash.

Thanks, I'll look into that.

Bit an a11y/UX issue, selecting a filter makes the focus jump over to the wrapper element.

I'll keep it on the filter.

I'm not scrolled to the top after pagination (in FF). For the events search, I had to toss the scrolling code in a setTimeout to get it correctly queued up after the page change for events.

Thanks, I'll see what I can do.

If I have an existing search (e.g. URL has q=test and results are showing for that search), but then manually clear the search input and hit enter/activate the search button then:

the "Uh oh..." message does appear, but

the"clear search" button also disappears, which makes clearing the existing search difficult.

Good catch

We're adding a date-based filter onto the events search to prevent (expired events)

That would be a good belt and suspenders thing to add.

I see an empty event. Don't know what's going on with that. 😅

I caught that too. Added some more validation in the middleware: https://github.com/SU-SWS/adapt-algolia-index/pull/120/commits/6fb73747a0e913f32ae4a14fbecfe22740eb1f3c

Like before, maybe we could add some top scroll margin to the top of the results/wrapper/whatever it moves focus to (for when following the skip filters nav)

The scroll kinda bugs me overall. Perhaps I just remove it.

I really dislike using loading skeletons to show when Algolia is fetching an uncached query (searching on Directory gives me an aneurysm). The events search, for example, doesn't show any loading indicator (except if it hangs, then we toss on a 50% opacity and show a loading spinner). Even if it was slower (looking at you Coveo), I'd still heavily favor the opacity and/or spinner approach.

Yeah, maybe I'll two step this. Opacity immediately, and skeles for hung.

That wine banner is huge. More of a wine hero image/header. 😆

Yuuuuuge

sherakama · 2024-10-29T16:19:26Z

src/components/events-discovery/eventsDiscovery.jsx

@@ -120,7 +120,7 @@ const EventDiscoveryContent = () => {
              <Hits
                hitComponent={Hit}
                classNames={{
-                  root: `${isStalled ? 'su-opacity-50' : ''}`,
+                  root: `${isStalled ? 'su-opacity-30' : ''}`,


@ericbakenhus 50 didn't seem like enough on my monitor.

sherakama · 2024-10-29T16:20:46Z

src/components/search/SearchFacet.jsx


  // Filter out any items we don't want to show.
  const filteredItems = items.filter((item) => !excludes.includes(item.value));
  // Sort the items alphabetically.
  filteredItems.sort((a, b) => a.value.localeCompare(b.value));

  // Show loading.
-  if (status === 'loading') {
+  if (isStalled) {


Set the skeles to show when stalled (>2s)

Before that, the opacity is set to 30.

sherakama · 2024-10-29T16:21:05Z

src/components/page-types/searchPage.jsx

@@ -56,11 +56,12 @@ const SearchPage = (props) => {
    <InstantSearch
      searchClient={algoliaClient}
      indexName={indexName}
-      stalledSearchDelay={3000}
+      stalledSearchDelay={2000}


Stall and show the skeles at 2s

sherakama · 2024-10-29T16:21:48Z

src/components/search/SearchField.jsx

@@ -20,13 +20,14 @@ const SearchField = ({ emptySearchMessage }) => {
  const index = algoliaClient.initIndex(indexName);

  // Hooks and state.
-  const { query, refine } = useSearchBox();
+  const { query, refine, clear } = useSearchBox();


Hey, would you look at that! A clear function. Might be a good fit for the clear link? 🤦

sherakama · 2024-10-29T16:23:06Z

src/components/search/SearchField.jsx

@@ -44,14 +45,27 @@ const SearchField = ({ emptySearchMessage }) => {
        return;
      }

+      // Add the filters to the autocomplete as well.


I've patched in the facets so that they filter the autocomplete results and don't show anything outside of what is available. Before this, if I filtered down and then used the autocomplete to select an item outside of the current filter range, I got a no results found message.

sherakama · 2024-10-29T16:28:58Z

cypress/e2e/2-travel-study/destinations-filter.cy.ts

@@ -19,19 +19,19 @@ describe('Travel-Study Destinations Page', () => {
    cy.wait(1000);

    // Select Filter Month and check for URL update
-    cy.get('[data-test="filter-option--october"]').first().check({ force: true });
-    cy.url().should('contain', 'trip-month=oct');
+    cy.get('[data-test="filter-option--february"]').first().check({ force: true });


No upcoming october trips. 🤷

sherakama · 2024-10-29T16:32:43Z

src/components/accessibility/Skiplink.jsx

I'm not sure if I've committed a crime here or not but this is helping the search page as the anchor links are triggering gatsby's (reach) router to do a 'navigate' and render. The change to the URL is also picked up by the history function in the instantsearch router.

By putting the path into the URL and omitting the default browser behaviour I skip the route page render but I am still getting the history event and the search still searches. At least with this code the search and facets still update the URL when they are interacted with.

It results in all the same expected behavior, so I'd say it's legal. 😆

src/components/accessibility/Skiplink.jsx

Co-authored-by: Eric Bakenhus <[email protected]>

sherakama · 2024-10-30T17:33:37Z

@ericbakenhus and @yvonnetangsu I feel 'good enough' with this version. I've added a couple of follow-up tickets for the next sprint. Thanks for all of your review and feedback

DS-1027
DS-1028
DS-1029

sherakama · 2024-10-30T17:36:16Z

Ah shoot. Forgot to change the index back!

* DS-734: Add alumni events to federated search (#936)

sherakama added 11 commits August 27, 2024 17:10

Preview search with events.

9ff46e1

Preview search with events.

06efbf8

Allow BR tags.

fe5fd2c

Allow BR tags.

e0d9bb6

Thing.

cfc62bf

WIP! Re-write for instantsearch.

7fae149

WIP! Re-write for instantsearch.

032e9e0

WIP: Fixes and modal progress.

bd8067b

Merge branch 'dev' into DS-734/events-federated

aa2311e

Merge branch 'dev' of github.com:su-sws/saa_alumni into DS-734/events…

178df94

…-federated

wip!

be4b0fb

sherakama changed the title ~~Preview search with events.~~ DS-734: Add alumni events to federated search Sep 20, 2024

sherakama added 15 commits September 20, 2024 14:17

Merge branch 'dev' into DS-734/events-federated

cf13b89

Merge branch 'DS-734/events-federated' of github.com:su-sws/saa_alumn…

d16bc0c

…i into DS-734/events-federated

Merge branch 'dev' of github.com:su-sws/saa_alumni into DS-734/events…

1f62207

…-federated

DS-734: Theming search modal.

0bb670d

Merge branch 'dev' of github.com:su-sws/saa_alumni into DS-734/events…

6ba0b50

…-federated

Refactor modal.

4feb264

Merge branch 'dev' of github.com:su-sws/saa_alumni into DS-734/events…

b5678f1

…-federated

Ready to start mobile for search page.

13f4a50

Merge branch 'dev' of github.com:su-sws/saa_alumni into DS-734/events…

2fb3dfa

…-federated

Fixes and updates.

a7dfa08

Wip.

07a5dbd

Wip.

82cee30

Capitals are hard.

2c61d18

Added icons instead of words to result.

76f2075

Remove event body.

4d7c541

sherakama commented Oct 22, 2024

View reviewed changes

gatsby-browser.js Show resolved Hide resolved

sherakama commented Oct 22, 2024

View reviewed changes

src/utilities/synchronizedEvents.js Outdated Show resolved Hide resolved

Rename check UTM params.

cc85ead

Set focus on field after clear.

ceb5d95

sherakama requested review from ericbakenhus and yvonnetangsu October 23, 2024 23:49

sherakama added 6 commits October 25, 2024 17:43

Bugfixes and refinements.

2f47970

Bugs

4dd8280

Bugs

8493d22

Bug fixes.

a6b64c3

Bug fixes.

a176ed9

Fixup! Tests.

d35d266

sherakama commented Oct 29, 2024

View reviewed changes

UI bug fix.

3be38e7

ericbakenhus reviewed Oct 29, 2024

View reviewed changes

src/components/accessibility/Skiplink.jsx Outdated Show resolved Hide resolved

Update src/components/accessibility/Skiplink.jsx

098f0f3

Co-authored-by: Eric Bakenhus <[email protected]>

sherakama merged commit 6f3fe19 into dev Oct 30, 2024
6 checks passed

sherakama deleted the DS-734/events-federated branch October 30, 2024 17:34

sherakama mentioned this pull request Oct 30, 2024

Release: v5.2.0 #995

Merged

sherakama added a commit that referenced this pull request Oct 30, 2024

Release: v5.2.0

2bc97d7

* DS-734: Add alumni events to federated search (#936)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DS-734: Add alumni events to federated search #936

DS-734: Add alumni events to federated search #936

sherakama commented Aug 28, 2024 •

edited

Loading

sherakama commented Oct 23, 2024

ericbakenhus commented Oct 24, 2024

ericbakenhus commented Oct 24, 2024

ericbakenhus commented Oct 25, 2024 •

edited

Loading

sherakama commented Oct 25, 2024

sherakama Oct 29, 2024

sherakama Oct 29, 2024

sherakama Oct 29, 2024

sherakama Oct 29, 2024

sherakama Oct 29, 2024

sherakama Oct 29, 2024

sherakama Oct 29, 2024

ericbakenhus Oct 29, 2024

sherakama commented Oct 30, 2024

sherakama commented Oct 30, 2024

DS-734: Add alumni events to federated search #936

DS-734: Add alumni events to federated search #936

Conversation

sherakama commented Aug 28, 2024 • edited Loading

READY FOR REVIEW

Summary

Review By (Date)

Criticality

Review Tasks

1. Test Modal Desktop

2. Test Modal Mobile

3. Test Search Page

4. Test Storyblok Configuration

5. Aesthetic / A11y / Code

BUGS

sherakama commented Oct 23, 2024

ericbakenhus commented Oct 24, 2024

ericbakenhus commented Oct 24, 2024

ericbakenhus commented Oct 25, 2024 • edited Loading

sherakama commented Oct 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sherakama commented Oct 30, 2024

sherakama commented Oct 30, 2024

sherakama commented Aug 28, 2024 •

edited

Loading

ericbakenhus commented Oct 25, 2024 •

edited

Loading