diff --git a/client/shared/src/settings/temporary/TemporarySettings.ts b/client/shared/src/settings/temporary/TemporarySettings.ts index 5b1bb291f59..41d85192571 100644 --- a/client/shared/src/settings/temporary/TemporarySettings.ts +++ b/client/shared/src/settings/temporary/TemporarySettings.ts @@ -98,7 +98,9 @@ export interface TemporarySettingsSchema { 'openCodeGraph.annotations.visible': boolean 'webNext.welcomeOverlay.dismissed': boolean + 'webNext.welcomeOverlay.show': boolean 'webNext.departureMessage.dismissed': boolean + 'webNext.departureMessage.show': boolean } /** @@ -165,7 +167,9 @@ const TEMPORARY_SETTINGS: Record = { 'cody.onboarding.completed': null, 'openCodeGraph.annotations.visible': null, 'webNext.welcomeOverlay.dismissed': null, + 'webNext.welcomeOverlay.show': null, 'webNext.departureMessage.dismissed': null, + 'webNext.departureMessage.show': null, } export const TEMPORARY_SETTINGS_KEYS = Object.keys(TEMPORARY_SETTINGS) as readonly (keyof TemporarySettings)[] diff --git a/client/web-sveltekit/src/lib/navigation/FeedbackDialog.svelte b/client/web-sveltekit/src/lib/navigation/FeedbackDialog.svelte index 8df0ef5472a..90153e3214d 100644 --- a/client/web-sveltekit/src/lib/navigation/FeedbackDialog.svelte +++ b/client/web-sveltekit/src/lib/navigation/FeedbackDialog.svelte @@ -13,13 +13,7 @@ {/if}
-

- You're currently on the new, faster Code Search user experience. It's in beta, and is our effort to rebuild - the tool from the ground up for performance. -

-
-
-

Got feedback for us on the beta? We'd love to hear from you.

+

Have feedback for us on the beta? We’d love to hear from you.

- - Feedback - diff --git a/client/web-sveltekit/src/routes/+layout.svelte b/client/web-sveltekit/src/routes/+layout.svelte index ab52e1e0bad..9e0703a5d70 100644 --- a/client/web-sveltekit/src/routes/+layout.svelte +++ b/client/web-sveltekit/src/routes/+layout.svelte @@ -83,17 +83,11 @@ $: handleOptOut = currentUserID ? async (): Promise => { // Show departure message after switching off - $temporarySettingsStorage.set('webNext.departureMessage.dismissed', false) + $temporarySettingsStorage.set('webNext.departureMessage.show', true) await data.disableSvelteFeatureFlags(currentUserID) window.location.reload() } : undefined - - $: welcomeOverlayDismissed = $temporarySettingsStorage.get('webNext.welcomeOverlay.dismissed', false) - $: showWelcomeOverlay = !($welcomeOverlayDismissed ?? true) - function handleDismissWelcomeOverlay() { - $temporarySettingsStorage.set('webNext.welcomeOverlay.dismissed', true) - } @@ -112,7 +106,7 @@ - + diff --git a/client/web-sveltekit/src/routes/WelcomeOverlay.svelte b/client/web-sveltekit/src/routes/WelcomeOverlay.svelte index c79d9054cb1..ead6ca15d86 100644 --- a/client/web-sveltekit/src/routes/WelcomeOverlay.svelte +++ b/client/web-sveltekit/src/routes/WelcomeOverlay.svelte @@ -2,6 +2,7 @@ import { allHotkey } from '$lib/fuzzyfinder/keys' import Icon from '$lib/Icon.svelte' import KeyboardShortcut from '$lib/KeyboardShortcut.svelte' + import { temporarySetting } from '$lib/temporarySettings' import { isLightTheme } from '$lib/theme' import Button from '$lib/wildcard/Button.svelte' import ProductStatusBadge from '$lib/wildcard/ProductStatusBadge.svelte' @@ -9,11 +10,16 @@ import WelcomeOverlayScreenshotDark from './WelcomeOverlayScreenshotDark.svelte' import WelcomeOverlayScreenshotLight from './WelcomeOverlayScreenshotLight.svelte' - export let show: boolean - export let handleDismiss: () => void - let dialog: HTMLDialogElement | undefined let inner: HTMLDivElement | undefined + + $: activated = temporarySetting('webNext.welcomeOverlay.show', false) + $: dismissed = temporarySetting('webNext.welcomeOverlay.dismissed', false) + $: show = !$activated.loading && $activated.data && !$dismissed.loading && !$dismissed.data + + function handleDismiss() { + dismissed.setValue(true) + } function handleClickOutside(event: MouseEvent) { // Use an inner div because the whole backdrop registers as part of the dialog if (inner && !inner.contains(event.target as Node)) { diff --git a/client/web/BUILD.bazel b/client/web/BUILD.bazel index 88ea192fd67..91987b93983 100644 --- a/client/web/BUILD.bazel +++ b/client/web/BUILD.bazel @@ -1651,6 +1651,7 @@ ts_project( "src/storm/pages/SearchPageWrapper/SearchPageWrapper.tsx", "src/storm/pages/SearchPageWrapper/index.ts", "src/storm/routes.tsx", + "src/sveltekit/LearnMoreOverlay.tsx", "src/sveltekit/SvelteKitNavItem.tsx", "src/sveltekit/WebNextAwareLink.tsx", "src/sveltekit/routes.ts", diff --git a/client/web/dist/img/welcome-overlay-screenshot-dark.svg b/client/web/dist/img/welcome-overlay-screenshot-dark.svg new file mode 100644 index 00000000000..a4a2d9cbc2a --- /dev/null +++ b/client/web/dist/img/welcome-overlay-screenshot-dark.svg @@ -0,0 +1,826 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/web/dist/img/welcome-overlay-screenshot-light.svg b/client/web/dist/img/welcome-overlay-screenshot-light.svg new file mode 100644 index 00000000000..b5dd5a0516b --- /dev/null +++ b/client/web/dist/img/welcome-overlay-screenshot-light.svg @@ -0,0 +1,2550 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/web/src/sveltekit/LearnMoreOverlay.module.scss b/client/web/src/sveltekit/LearnMoreOverlay.module.scss new file mode 100644 index 00000000000..2ad7470a177 --- /dev/null +++ b/client/web/src/sveltekit/LearnMoreOverlay.module.scss @@ -0,0 +1,182 @@ +@import 'wildcard/src/global-styles/breakpoints'; + +.dialog { + position: absolute; + margin: 0 auto; + top: min(10vh, 10rem); + width: min(80vw, 100rem); + padding: 2rem; + overflow: hidden; + + border-radius: 0.75rem; + border: 1px solid var(--border-color); + background-color: var(--color-bg-1); + + :global(.theme-light) & { + box-shadow: 0 186px 52px 0 rgba(0, 0, 0, 0), 0 119px 48px 0 rgba(0, 0, 0, 0.01), + 0 67px 40px 0 rgba(0, 0, 0, 0.02), 0 30px 30px 0 rgba(0, 0, 0, 0.03), 0 7px 16px 0 rgba(0, 0, 0, 0.04); + } + :global(.theme-dark) & { + box-shadow: 0 186px 52px 0 rgba(0, 0, 0, 0.01), 0 119px 48px 0 rgba(0, 0, 0, 0.03), + 0 67px 40px 0 rgba(0, 0, 0, 0.06), 0 30px 30px 0 rgba(0, 0, 0, 0.12), 0 7px 16px 0 rgba(0, 0, 0, 0.24); + } + + &::backdrop { + opacity: 0.48; + :global(.theme-light) & { + background: var(--color-background, #f9fafb); + } + :global(.theme-dark) & { + background: var(--color-background, #0f111a); + } + } + + /* stylelint-disable-next-line property-no-unknown */ + container-type: inline-size; + + @media (--xs-breakpoint-down) { + margin: 0; + border-radius: 0; + border: none; + position: fixed; + top: 0; + width: 100vw; + height: 100vh; + max-height: 100vh; + max-width: 100vw; + } +} + +.inner { + > :global(img) { + position: absolute; + right: 0; + bottom: 0; + filter: drop-shadow(0 25px 50px rgba(15, 17, 26, 0.25)); + + /* stylelint-disable-next-line scss/at-rule-no-unknown */ + @container (width < 975px) { + display: none; + } + } + + > :global(button) { + position: absolute; + top: 1rem; + right: 1rem; + } +} + +.content { + // TODO: import this from shadcn color library (once it exists) + :global(.theme-light) & { + --color-text-subtle: var(--text-body); + } + :global(.theme-dark) & { + --color-text-subtle: #a6b6d9; + } + + width: calc(100% - 24rem); + /* stylelint-disable-next-line scss/at-rule-no-unknown */ + @container (width < 975px) { + width: 100%; + } + + display: flex; + gap: 1rem; + flex-direction: column; + + .logo { + display: flex; + gap: 1rem; + align-items: center; + + img { + width: 2rem; + height: 2rem; + } + } + + .message { + h1 { + text-wrap: balance; + span { + background: linear-gradient(90deg, #00cbec 0%, #a112ff 48.53%, #ff5543 97.06%); + color: transparent; + background-clip: text; + } + } + } + + .subtitle { + margin: 0; + font-size: var(--font-size-large); + font-weight: 500; + color: var(--color-text-subtle); + text-wrap: wrap; + } + + .features { + display: grid; + max-width: 700px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1rem 0.75rem; + padding: 1rem 0; + + > div { + display: grid; + grid-template-columns: min-content auto; + gap: 0.25rem 0.75rem; + svg { + grid-column: 1; + grid-row: 1; + width: 1.25rem; + height: 1.25rem; + } + h5 { + all: unset; + font-weight: 600; + + grid-column: 2; + grid-row: 1; + } + p { + all: unset; + font-size: var(--font-size-small); + font-weight: 400; + color: var(--color-text-subtle); + + grid-column: 2; + grid-row: 2; + text-wrap: wrap; + } + } + } + + .cta { + display: flex; + gap: 1rem; + flex-direction: column; + + h3 { + color: #ff5644; + } + div { + grid-column: 1 / -1; + display: flex; + gap: 1rem; + align-items: center; + } + button { + width: 15rem; + } + p { + grid-column: 1 / -1; + color: var(--text-muted); + font-size: var(--font-size-small); + font-weight: 400; + margin: 0; + text-wrap: wrap; + } + } +} diff --git a/client/web/src/sveltekit/LearnMoreOverlay.tsx b/client/web/src/sveltekit/LearnMoreOverlay.tsx new file mode 100644 index 00000000000..c04fd2dd054 --- /dev/null +++ b/client/web/src/sveltekit/LearnMoreOverlay.tsx @@ -0,0 +1,107 @@ +import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react' + +import { mdiFilePlusOutline, mdiGraphOutline, mdiMagnifyScan, mdiClose } from '@mdi/js' + +import { useIsLightTheme } from '@sourcegraph/shared/src/theme' +import { Button, H1, H3, H5, Text, Icon, ProductStatusBadge } from '@sourcegraph/wildcard' + +import { BrandLogo } from '../components/branding/BrandLogo' + +import styles from './LearnMoreOverlay.module.scss' + +export const LearnMoreOverlay = forwardRef<{ show: () => void; hide: () => void }, { handleEnable: () => void }>( + ({ handleEnable }, forwardedRef) => { + const innerRef = useRef(null) + const dialogRef = useRef(null) + + const isLightTheme = useIsLightTheme() + + const show = (): void => dialogRef.current?.showModal() + const hide = (): void => dialogRef.current?.close() + + useImperativeHandle(forwardedRef, () => ({ show, hide })) + + const handleClickOutside = (event: MouseEvent): void => { + // Use an inner div because the whole backdrop registers as part of the dialog + if (innerRef.current && !innerRef.current.contains(event.target as Node)) { + hide() + } + } + + useEffect(() => { + document.body.addEventListener('mousedown', handleClickOutside) + return () => { + document.body.removeEventListener('mousedown', handleClickOutside) + } + }) + + return ( + +
+
+
+ + +
+
+

+ Try a new, faster experience +

+ + Get ready for a new Code Search experience: rewritten from the ground-up for performance + to empower your workflow. + +
+
+
+ +
New in-line diff view
+ Easily compare commits and see how a file changed over time, all in-line +
+
+ +
Revamped code navigation
+ + Quickly find a list of references of a given symbol, or immediately jump to the + definition + +
+
+ + {/* TODO: add keyboard shortcut */} +
Reworked fuzzy finder
+ Find files and symbols quickly and easily with our whole new fuzzy finder. +
+
+
+

Enable the new UI

+
+ + +
+ You can opt out at any time by using the toggle at the top of the screen. + + Whilst exploring the new experience, consider leaving us some feedback via the button at + the top. We'd love to hear from you! + +
+
+ + + + +
+ + ) + } +) diff --git a/client/web/src/sveltekit/SvelteKitNavItem.module.scss b/client/web/src/sveltekit/SvelteKitNavItem.module.scss index 9587eb4caf0..95c15ee66ec 100644 --- a/client/web/src/sveltekit/SvelteKitNavItem.module.scss +++ b/client/web/src/sveltekit/SvelteKitNavItem.module.scss @@ -54,3 +54,16 @@ .help-icon { color: var(--icon-color); } + +.colorful { + background: linear-gradient(90deg, #00cbec 0%, #a112ff 48.53%, #ff5543 97.06%); + color: transparent; + background-clip: text; +} + +.enable-toggle { + display: flex; + align-items: center; + font-weight: normal; + gap: 0.5rem; +} diff --git a/client/web/src/sveltekit/SvelteKitNavItem.tsx b/client/web/src/sveltekit/SvelteKitNavItem.tsx index e290407d4dd..01ca22aa116 100644 --- a/client/web/src/sveltekit/SvelteKitNavItem.tsx +++ b/client/web/src/sveltekit/SvelteKitNavItem.tsx @@ -1,13 +1,14 @@ import { FC, useRef, useEffect, useCallback } from 'react' import { useApolloClient } from '@apollo/client' -import { mdiHelpCircleOutline, mdiClose } from '@mdi/js' +import { mdiChevronDown, mdiClose } from '@mdi/js' import { useLocation } from 'react-router-dom' import { Toggle } from '@sourcegraph/branded/src/components/Toggle' import { useTemporarySetting } from '@sourcegraph/shared/src/settings/temporary' import { Text, H3, Popover, PopoverTrigger, PopoverContent, Icon, Button } from '@sourcegraph/wildcard' +import { LearnMoreOverlay } from './LearnMoreOverlay' import { enableSvelteAndReload, canEnableSvelteKit } from './util' import styles from './SvelteKitNavItem.module.scss' @@ -16,17 +17,17 @@ export const SvelteKitNavItem: FC<{ userID?: string }> = ({ userID }) => { const location = useLocation() const client = useApolloClient() const [departureDismissed, setDepartureDismissed] = useTemporarySetting('webNext.departureMessage.dismissed', false) - const [welcomeDismissed, setWelcomeDismissed] = useTemporarySetting('webNext.welcomeOverlay.dismissed', false) + const [showDeparture, _setDepartureDismissed] = useTemporarySetting('webNext.departureMessage.show', false) + const [_showWelcomeMessage, setShowWelcomeMessage] = useTemporarySetting('webNext.welcomeOverlay.show', false) const departureRef = useRef(null) - const handleClickOutside = useCallback( (event: MouseEvent) => { if (departureRef.current && !departureRef.current.contains(event.target as Node)) { setDepartureDismissed(true) } }, - [departureRef, setDepartureDismissed] + [setDepartureDismissed] ) useEffect(() => { @@ -36,71 +37,82 @@ export const SvelteKitNavItem: FC<{ userID?: string }> = ({ userID }) => { } }, [handleClickOutside]) + const learnMoreRef = useRef<{ show: () => void; hide: () => void } | null>(null) + if (!userID || !canEnableSvelteKit(location.pathname)) { return null } // only show if the welcome message has been dismissed so we know they have been introduced to the new webapp - const showDeparture = !departureDismissed && welcomeDismissed - const popoverProps = showDeparture ? { isOpen: true, onOpenChange: () => {} } : {} + const departureVisible = !departureDismissed && showDeparture + const popoverProps = departureVisible ? { isOpen: true, onOpenChange: () => {} } : {} return ( - - -
- - New, faster UX - { - setWelcomeDismissed(false) // Show welcome after switching on - enableSvelteAndReload(client, userID) - }} - title="Enable new, faster UX" - className={styles.toggle} - /> -
- - - {showDeparture ? ( -
+ <> + enableSvelteAndReload(client, userID)} /> + + + + + + {departureVisible ? ( +
+
+

+ Switched out of the new experience? + +

+ + Remember, you can always switch back using the toggle above. We're still working on + it, so check back soon. + +
+
+ Got feedback for us on the beta? We’d love to hear from you. + + It only takes two minutes and helps a ton! +
+
+ ) : (

- Switched out of the new experience? - + Try a new, faster UX (Beta) + + { + setShowWelcomeMessage(true) + enableSvelteAndReload(client, userID) + }} + title="Enable new, faster UX" + className={styles.toggle} + /> + Enable +

- Remember, you can always switch back using the toggle above. We're still working on it, - so check back soon. + We've rewritten Code Search from the ground-up for performance to empower your workflow. -
-
- Got feedback for us on the beta? We’d love to hear from you. - - It only takes two minutes and helps a ton!
-
- ) : ( -
-

What's this "New, faster UX"?

- - We've been busy at work on a new Code Search experience, built from the ground up for - performance, which is now available in beta. - - Simply activate the toggle to get it. -
- )} - - + )} + + + ) }