[CommandBar] Enable input & tab pre-population on open

[ashleemboyer]

🔗 Relevant links

• Preview link 🔎
• Asana task 🎟️

🗒️ What

• Adds basic <button>s to the featured search card
  • The featured search terms are defined in the attached task
  • These buttons leverage the setCurrentInputValue and toggleIsOpen helpers exposed by CommandBar
• Sets the contentType of the HomePageView to 'tutorials'
  • This makes CommandBar show the "Tutorials" tab by default
  • Added a comment with explicit context, since we previously had this page use the "global" contentType
• Adds a magenta border around WIP cards, since this page is starting to shape up and may look official/done/broken otherwise

🧪 Testing

• Go to the home page on the preview
• For each <button> in the "Search with ease" featured card:
  • Activate the button
  • CommandBar should open
  • The input text should match the button's text
  • The Tutorials tab should be selected

💭 Anything else?

• This PR does not style these new buttons. That will come in a separate task currently scheduled for next week: Style & animate SearchCard.
• There's a slight delay/flash when CommandBar is opened with these buttons. This is because SearchCommandBarDialogBody waits to send off search queries for 300ms after the text input is finished changes, and because of the search results loading delay. This isn't ideal, and I'm thinking through a couple of options for optimizing this before release. This PR will not optimize this.
  • Expose the setSearchQuery helper from SearchCommandBarDialogBody. This doesn't feel super ideal because it's not intended to be used as a utility, it's still a feasible and low-effort option. However, it will only remove the 300ms before the search query is sent off. It will not help the results loading delay (an existing issue).
  • Pre-load the search results for these buttons on render, and put the results in the React Query cache. Since we currently rely solely on Algolia's UI components/contexts to invoke search results fetching, I'm not sure how feasible this idea is. I'll do some digging and see if Algolia exposes any prefetching utilities though!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
dev-portal	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 30, 2023 at 2:04PM (UTC)

[github-actions]

Some suggested prefixes and emojis that may help to write clear, actionable code review comments:

Praise 🙌	Question 🙋	Thought 💭	Blocker 🚧	Future 📌	Optional 🎨	Nitpick ⛏️

Expand for comment prefix descriptions

Prefix+Emoji	Description
Praise 🙌	Use to highlight something positive. It's nice to try to leave one per review, but don't leave false praise just to leave one of these comments.
Question 🙋	Use to gain clarity from the code author. The conversation could evolve into any one of these other categories. Only the reviewer should resolve these comment threads.
Thought 💭	Use to share context, leave a breadcrumb, or share an idea that came up while reviewing.
Blocker 🚧	Use to request changes that block merging the current PR. Only the reviewer should resolve these comment threads.
Future 📌	Use to request changes that the code author can choose to address in the current PR or a follow-up one.
Optional 🎨	Use to suggest optional changes that you feel strongly about but ultimately defer to the code author to make a decision on. These can be comments that turn into valuable conversation starters for adopting new code styles, guidelines, or team practices.
Nitpick ⛏️	Use to suggest changes based on loose opinions or personal preferences. The difference between this and Optional 🎨  is how strong the code reviewer's opinion is.

[github-actions]

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

This PR introduced no changes to the javascript bundle 🙌

[ashleemboyer]

@BRKalow no review required here, but if you've got time to take a peek at the "Anything else?" section of the PR description, I'd appreciate any breadcrumbs you might have about Algolia magic! 🤩

[emilypersson1]

working perfectly, thanks Ashlee!

[zchsh]

✅ Followed testing steps, this looks great to me!

[BRKalow]

I think Algolia has some internal caching, so we could potentially fire off a search query ahead of time to "warm the cache" independent of any react-query usage.

The debounce is tricky 🤔. I think the implementation you've got here is the right one (using the generic command bar utility).

Perhaps we could check if the input value is non-empty on first render, and if so set the search query right away. The debounce would only come into play on subsequent updates then.

[kendallstrautman]

LGTM! Your options in the description to explore caching seem like good avenues

[ashleemboyer]

@zchsh @BRKalow @kendallstrautman just a heads up about the follow-up optimization work -- I created an Asana task co-located with my other tasks for this project!

🎟️ Explore options for eliminating the flash of the Global Search buttons in the search card

The TL;DR is -- timebox 4 hours to explore the current 4 ideas we have, report the findings, and propose 1 to the team (just via Slack probably) for discussion.