feat: implemented StarSearch share prompt #3324

nickytonline · 2024-05-06T23:01:00Z

Description

Now you can share StarSearch prompts. Note that some accessibility issues were also fixed while writing end to end tests for this feature.

Related Tickets & Documents

Closes #3325
Fixes #3478

Mobile & Desktop Screenshots/Recordings

Steps to QA

Tier (staff will fill in)

Tier 1
Tier 2
Tier 3
Tier 4

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2024-05-06T23:01:17Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`cc7d86e`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6661ae696f55c30007a30be8
😎 Deploy Preview	https://deploy-preview-3324--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-05-06T23:01:19Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`cc7d86e`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6661ae696c71ab00082ae2e1
😎 Deploy Preview	https://deploy-preview-3324--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

bdougie · 2024-05-06T23:53:07Z

I'd love to see us reuse elements from other places.

Gemini uses a share icon.

OpenSauced Highlights already have a share experience with the 3 dots.

I'd love to avoid adding more design debt with whatever solution we approach.

bdougie · 2024-05-06T23:55:45Z

Thought this was the issue 😓 , but sharing my context.

nickytonline · 2024-05-07T01:15:39Z

I've pushed changes to use the share dropdown @bdougie, but I think we could still run the risk of the prompt URL being too many characters for Twitter, but this should be an easy fix by either hashing it or using dub.co URLs.

isabensusan · 2024-05-07T16:01:49Z

Loving the exploration!! The UI is looking a bit too busy, I'll do a quick design for just icons to simplify

isabensusan · 2024-05-28T16:59:00Z

@nickytonline

Icon

import { HiOutlineShare } from "react-icons/hi";
<HiOutlineShare />

brandonroberts · 2024-05-30T15:51:39Z

This is ready for initial review @nickytonline @isabensusan

Screen.Recording.2024-05-30.at.10.49.31.AM.mov

Notes:

The Prompt URL will be shortened
If they aren't logged in, it doesn't auto-submit the prompt, but also doesn't force login
I can open a new PR if needed

nickytonline

The share menu works but it seems put of place. Beside the two thumbs up with some gap would probably look better and only show it once the prompt response is completed.

brandonroberts · 2024-05-31T19:43:17Z

Updated the placement of the share icon and the logic to only take the first item in the chat session.

Screen.Recording.2024-05-31.at.2.41.49.PM.mov

nickytonline

Works great @brandonroberts! One thing I wonder is for Twitter/X, we should truncate the prompt if it doesn't fit in a standard Tweet message length.

Also, a shorter URL would be great to increase the text count in a Tweet, but I imagine that unfurling potentially prevents an OG image from appearing?

brandonroberts · 2024-05-31T20:54:24Z

Works great @brandonroberts! One thing I wonder is for Twitter/X, we should truncate the prompt if it doesn't fit in a standard Tweet message length.

Also, a shorter URL would be great to increase the text count in a Tweet, but I imagine that unfurling potentially prevents an OG image from appearing?

Yea, we could truncate the prompt, or not include it as it will be in the OG image. The short URL shouldn't prevent the OG image from appearing

nickytonline · 2024-05-31T21:32:06Z

Works great @brandonroberts! One thing I wonder is for Twitter/X, we should truncate the prompt if it doesn't fit in a standard Tweet message length.
Also, a shorter URL would be great to increase the text count in a Tweet, but I imagine that unfurling potentially prevents an OG image from appearing?

Yea, we could truncate the prompt, or not include it as it will be in the OG image. The short URL shouldn't prevent the OG image from appearing

Good point that it's in the OG image so no need for it in the Tweet. Sounds good with that tweak and the short URL.

brandonroberts · 2024-06-03T13:58:25Z

@nickytonline The prompt text has been removed from the social media text in favor of the OG image

nickytonline

@brandonroberts, it works great on Desktop, but on iPhone at least, the menu share menu opens, but clicking any of the menu items, like share to X do nothing. It looks like Safari/iOS (and any other browsers on iPhone) block window.open in an async call.

There's some solutions in https://stackoverflow.com/questions/20696041/window-openurl-blank-not-working-on-imac-safari that should work.

nickytonline · 2024-06-03T14:29:36Z

pages/star-search/index.tsx

@@ -535,6 +576,65 @@ Need some ideas? Try hitting the **Need Inspiration?** button below!`;
                    <span className="sr-only">Thumbs down</span>
                    <ThumbsdownIcon size={16} />
                  </button>
+                  {prompt && (


Refactor (blocking): add some spacing between the thumbs down icon and the share icon to prevent users from accidentally clicking thumbs down instead of share.

Good catch, added some padding

nickytonline · 2024-06-03T15:00:13Z

pages/star-search/index.tsx

    }
  }

+  function openWindow(url: string) {


arrrgh, looks like that suggestion from StackOverflow doesn't work.

Oh interesting, I tried it in Safari and Chrome and it worked for me

I'm on Safari Version 16.6 (18615.3.12.11.2)

It works fine on Safari Desktop (I'm on 17.5), it's the iOS version that doesn't work. On iOS 17, it's Safari 17.3.

Ahh, ok 👀

I think one of the other solutions might work. There was one suggesting _top for the window target. Maybe give that a go.

nickytonline · 2024-06-03T16:03:02Z

I tried this logged out and it fills the prompt input, but I'm not prompted to log in and can still run the prompt.

CleanShot.2024-06-03.at.11.59.13.mp4

brandonroberts · 2024-06-03T16:32:27Z

I tried this logged out and it fills the prompt input, but I'm not prompted to log in and can still run the prompt.

CleanShot.2024-06-03.at.11.59.13.mp4

That's intended behavior for a shared prompt, otherwise we have to connect and redirect them back just to see the results that someone else already shared.

Not sure if we should gate it if its shared

nickytonline · 2024-06-03T16:34:10Z

I tried this logged out and it fills the prompt input, but I'm not prompted to log in and can still run the prompt.
CleanShot.2024-06-03.at.11.59.13.mp4

That's intended behavior for a shared prompt, otherwise we have to connect and redirect them back just to see the results that someone else already shared.

Not sure if we should gate it if its shared

For that particular prompt I guess not, but what if they do another prompt?

brandonroberts · 2024-06-03T18:43:59Z

Not sure, but I'd lean towards letting them enter more prompts to start.

brandonroberts · 2024-06-03T18:57:57Z

@nickytonline will you try it again with iOS Safari and see if the window opens now?

nickytonline · 2024-06-03T21:26:05Z

@nickytonline will you try it again with iOS Safari and see if the window opens now?

Argh. Still no dice. If you have an Android phone, I can dig into this if you want.

…rompt submitted automatically

…cannot create one

…tically

…mselves in StarSearch

nickytonline · 2024-06-04T19:09:03Z

pages/star-search/index.tsx

-                                twitterParams.set("url", shortUrl);
-                                twitterUrl += `?${twitterParams.toString()}`;
-                                openWindow(twitterUrl);
+                              href={twitterShareUrl}


Made these actual links so that we don't run into iOS and other browser security restrictions.

nickytonline · 2024-06-05T11:49:16Z

components/atoms/Card/card.tsx

 }

-const Card: React.FC<CardProps> = ({ className, children, heading }) => {
+const Card = ({ className, children, heading, focusable = false }: CardProps) => {


I didn't make it focusable by default because I wasn't sure if that's necessary or not.

e2e/star-search.spec.ts

nickytonline · 2024-06-05T13:35:59Z

~~Just looking at some flaky tests~~ fixed!

  4 flaky
    [chromium] › star-search.spec.ts:4:5 › StarSearch (Logged Out Experience) ──────────────────────
    [firefox] › star-search.spec.ts:4:5 › StarSearch (Logged Out Experience) ───────────────────────
    [webkit] › star-search.spec.ts:4:5 › StarSearch (Logged Out Experience) ────────────────────────
    [webkit] › star-search.spec.ts:90:5 › StarSearch shared prompt ─────────────────────────────────
  44 passed (1.4m)

pages/star-search/index.tsx

nickytonline mentioned this pull request May 6, 2024

feat: Shareable StarSearch prompts #3325

Open

1 task

brandonroberts force-pushed the nickytonline/star-search-share branch from 743c707 to d4f5006 Compare May 30, 2024 15:02

brandonroberts marked this pull request as ready for review May 30, 2024 15:51

nickytonline commented May 31, 2024

View reviewed changes

nickytonline commented Jun 3, 2024

View reviewed changes

nickytonline force-pushed the nickytonline/star-search-share branch 4 times, most recently from 5fe7a42 to 6fefa5c Compare June 4, 2024 21:02

nickytonline and others added 13 commits June 4, 2024 18:41

feat: implemented StarSearch share prompt

2d0ba02

chore: now the share prompt uses the share dropdown

e035834

feat: enable auto-submit if logged in

48d5b2a

chore: fix LinkedIn URL

0cb717d

chore: close dropdown

7cf2d0e

fix: show login modal if no shared prompt is provided

718c638

fix: only share first prompt in chat session

413438a

chore: remove prompt from social media share text

b936478

fix: fix window open logic for Safari and add left padding to share icon

bf353a1

chore: fixed share links for iOS

fc387ca

chore: fixed an issue with a logged out user not getting the shared p…

c597ff7

…rompt submitted automatically

chore: now a non-logged in user can see the shared prompt result but …

2b09650

…cannot create one

chore: removed a flicker in the UI when the shared prompt runs automa…

3acbd33

…tically

nickytonline force-pushed the nickytonline/star-search-share branch from cb52412 to 3acbd33 Compare June 4, 2024 22:41

nickytonline added 3 commits June 4, 2024 19:52

chore: added the #StarSearch hashtag to the intent to Tweet message

bb95646

test: added some tests for StarSearch prompt sharing

fecae8d

chore: fixed an issue where a guest user gets a broken avatar for the…

576d3d7

…mselves in StarSearch

nickytonline force-pushed the nickytonline/star-search-share branch from 5865c7e to 576d3d7 Compare June 5, 2024 03:11

chore: refactored types for Card component since a new prop was added

3271bf2

nickytonline force-pushed the nickytonline/star-search-share branch from ca135b1 to 3271bf2 Compare June 5, 2024 11:50

nickytonline commented Jun 5, 2024

View reviewed changes

nickytonline requested a review from a team June 5, 2024 12:36

nickytonline force-pushed the nickytonline/star-search-share branch from 607ac4a to 7a1eebd Compare June 6, 2024 02:31

nickytonline commented Jun 6, 2024

View reviewed changes

pages/star-search/index.tsx Show resolved Hide resolved

test: added some comments to test

a670dd6

nickytonline force-pushed the nickytonline/star-search-share branch from 7a1eebd to a670dd6 Compare June 6, 2024 02:53

nickytonline added 2 commits June 5, 2024 23:33

test: tweaks to E2E tests for StarSearch

fa4b3fe

test: fixed some tests

cc7d86e

nickytonline requested a review from BekahHW June 6, 2024 12:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: implemented StarSearch share prompt #3324

feat: implemented StarSearch share prompt #3324

nickytonline commented May 6, 2024 •

edited

netlify bot commented May 6, 2024 •

edited

netlify bot commented May 6, 2024 •

edited

bdougie commented May 6, 2024

bdougie commented May 6, 2024

nickytonline commented May 7, 2024

isabensusan commented May 7, 2024

isabensusan commented May 28, 2024 •

edited

brandonroberts commented May 30, 2024 •

edited

nickytonline left a comment

brandonroberts commented May 31, 2024

nickytonline left a comment

brandonroberts commented May 31, 2024

nickytonline commented May 31, 2024

brandonroberts commented Jun 3, 2024

nickytonline left a comment

nickytonline Jun 3, 2024

brandonroberts Jun 3, 2024

nickytonline Jun 3, 2024

brandonroberts Jun 3, 2024

brandonroberts Jun 3, 2024

nickytonline Jun 3, 2024 •

edited

brandonroberts Jun 3, 2024

nickytonline Jun 3, 2024

nickytonline commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

nickytonline commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

nickytonline commented Jun 3, 2024 •

edited

nickytonline Jun 4, 2024

nickytonline Jun 5, 2024

nickytonline commented Jun 5, 2024 •

edited

feat: implemented StarSearch share prompt #3324

Are you sure you want to change the base?

feat: implemented StarSearch share prompt #3324

Conversation

nickytonline commented May 6, 2024 • edited

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Steps to QA

Tier (staff will fill in)

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented May 6, 2024 • edited

✅ Deploy Preview for oss-insights ready!

netlify bot commented May 6, 2024 • edited

✅ Deploy Preview for design-insights ready!

bdougie commented May 6, 2024

bdougie commented May 6, 2024

nickytonline commented May 7, 2024

isabensusan commented May 7, 2024

isabensusan commented May 28, 2024 • edited

brandonroberts commented May 30, 2024 • edited

nickytonline left a comment

Choose a reason for hiding this comment

brandonroberts commented May 31, 2024

nickytonline left a comment

Choose a reason for hiding this comment

brandonroberts commented May 31, 2024

nickytonline commented May 31, 2024

brandonroberts commented Jun 3, 2024

nickytonline left a 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

nickytonline Jun 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickytonline commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

nickytonline commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

brandonroberts commented Jun 3, 2024

nickytonline commented Jun 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nickytonline commented Jun 5, 2024 • edited

nickytonline commented May 6, 2024 •

edited

netlify bot commented May 6, 2024 •

edited

netlify bot commented May 6, 2024 •

edited

isabensusan commented May 28, 2024 •

edited

brandonroberts commented May 30, 2024 •

edited

nickytonline Jun 3, 2024 •

edited

nickytonline commented Jun 3, 2024 •

edited

nickytonline commented Jun 5, 2024 •

edited