diff --git a/client/web-sveltekit/BUILD.bazel b/client/web-sveltekit/BUILD.bazel index a2d85b808ef..d5c06c009fc 100644 --- a/client/web-sveltekit/BUILD.bazel +++ b/client/web-sveltekit/BUILD.bazel @@ -14,7 +14,6 @@ SRCS = [ ".prettierignore", ".env", ".env.dotcom", - "static/react-logo.svg", "//client/wildcard:sass-breakpoints", "//client/wildcard:global-style-sources", "//client/web/dist/img:copy", diff --git a/client/web-sveltekit/src/lib/images.ts b/client/web-sveltekit/src/lib/images.ts index c1c0682e0de..f3bef838029 100644 --- a/client/web-sveltekit/src/lib/images.ts +++ b/client/web-sveltekit/src/lib/images.ts @@ -1,4 +1,3 @@ export { default as logoLight } from '$root/client/web/dist/img/sourcegraph-logo-light.svg' export { default as logoDark } from '$root/client/web/dist/img/sourcegraph-logo-dark.svg' export { default as mark } from '$root/client/web/dist/img/sourcegraph-mark.svg' -export { default as svelteLogoEnabled } from '$root/client/web/dist/img/svelte-logo.svg' diff --git a/client/web-sveltekit/src/routes/Header.svelte b/client/web-sveltekit/src/routes/Header.svelte index 1923dd392e8..b2fdd226df7 100644 --- a/client/web-sveltekit/src/routes/Header.svelte +++ b/client/web-sveltekit/src/routes/Header.svelte @@ -1,7 +1,7 @@ @@ -51,9 +52,9 @@ Insights - + - Svelte logo +
diff --git a/client/web-sveltekit/src/routes/InfoBanner.svelte b/client/web-sveltekit/src/routes/InfoBanner.svelte index 1afe4fbe332..271c9cd7bc4 100644 --- a/client/web-sveltekit/src/routes/InfoBanner.svelte +++ b/client/web-sveltekit/src/routes/InfoBanner.svelte @@ -1,17 +1,20 @@
- You are trying out the SvelteKit prototype. Links marked with will bring you back - to the React version{#if urlHasFeatureFlag}.{:else}, as will a hard refresh.{/if} + You are trying out the experimental web app. Links marked with will bring you back to the production version{#if urlHasFeatureFlag}.{:else}, as will a hard refresh.{/if}
- - - diff --git a/client/web/dist/img/svelte-logo.svg b/client/web/dist/img/svelte-logo.svg deleted file mode 100644 index 4bf279659a9..00000000000 --- a/client/web/dist/img/svelte-logo.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - diff --git a/client/web/src/featureFlags/featureFlags.ts b/client/web/src/featureFlags/featureFlags.ts index f8694b48ef5..8c152eab41b 100644 --- a/client/web/src/featureFlags/featureFlags.ts +++ b/client/web/src/featureFlags/featureFlags.ts @@ -19,8 +19,12 @@ export const FEATURE_FLAGS = [ 'contrast-compliant-syntax-highlighting', 'enable-ownership-panels', 'enable-simple-search', + // TODO(fkling): Remove this flag 'enable-sveltekit', + // TODO(fkling): Remove this flag 'enable-sveltekit-toggle', + 'web-next', + 'web-next-toggle', 'end-user-onboarding', 'insight-polling-enabled', 'opencodegraph', diff --git a/client/web/src/sveltekit/SvelteKitNavItem.tsx b/client/web/src/sveltekit/SvelteKitNavItem.tsx index dbec6296f7a..093196cd7e1 100644 --- a/client/web/src/sveltekit/SvelteKitNavItem.tsx +++ b/client/web/src/sveltekit/SvelteKitNavItem.tsx @@ -1,25 +1,34 @@ import type { FC } from 'react' +import { mdiFlaskEmptyOutline } from '@mdi/js' import { useLocation } from 'react-router-dom' -import { Button, Tooltip } from '@sourcegraph/wildcard' +import { Button, Icon, Tooltip } from '@sourcegraph/wildcard' import { useFeatureFlag } from '../featureFlags/useFeatureFlag' import { isSvelteKitSupportedURL, reload } from './util' +function useIsSvelteKitToggleEnabled(): boolean { + const [isSvelteKitToggleEnabled] = useFeatureFlag('enable-sveltekit-toggle') + const [isExperimentalWebAppToggleEnabled] = useFeatureFlag('web-next-toggle') + return isSvelteKitToggleEnabled || isExperimentalWebAppToggleEnabled +} + export const SvelteKitNavItem: FC = () => { const location = useLocation() - const [isSvelteKitToggleEnabled] = useFeatureFlag('enable-sveltekit-toggle') + const isEnabled = useIsSvelteKitToggleEnabled() - if (!isSvelteKitToggleEnabled || !isSvelteKitSupportedURL(location.pathname)) { + if (!isEnabled || !isSvelteKitSupportedURL(location.pathname)) { return null } return ( - + ) diff --git a/client/web/src/sveltekit/util.ts b/client/web/src/sveltekit/util.ts index 9420d77f8e2..5d6504f459d 100644 --- a/client/web/src/sveltekit/util.ts +++ b/client/web/src/sveltekit/util.ts @@ -1,28 +1,30 @@ -import isAbsoluteUrl from 'is-absolute-url' import { matchPath } from 'react-router-dom' import { routes } from '../routes' import { PageRoutes } from '../routes.constants' -const SVELTEKIT_SUPPORTED_REPO_PATHS = /^\/.*?\/-\/(blob|tree|branches|commit|commits|stats|tags)\// +const SVELTEKIT_SUPPORTED_REPO_PATHS = /^\/.*?\/-\/(blob\/|tree\/|branches$|commit\/|commits$|stats$|tags$)/ -export function isSvelteKitSupportedURL(href: string): boolean { - if (!href || isAbsoluteUrl(href)) { +function isRepoSubPage(href: string): boolean { + return href.includes('/-/') +} + +export function isSvelteKitSupportedURL(pathname: string): boolean { + if (!pathname) { return false } const route = routes.find( - route => - (route.path && matchPath(route.path, href)) || - (route.path && matchPath(route.path.replace(/\/\*$/, ''), href)) + route => route.path && (matchPath(route.path, pathname) || matchPath(route.path.replace(/\/\*$/, ''), pathname)) ) return ( route?.path === PageRoutes.Search || - (route?.path === PageRoutes.RepoContainer && SVELTEKIT_SUPPORTED_REPO_PATHS.test(href)) + (route?.path === PageRoutes.RepoContainer && + (!isRepoSubPage(pathname) || SVELTEKIT_SUPPORTED_REPO_PATHS.test(pathname))) ) } export function reload(): void { const url = new URL(window.location.href) - url.searchParams.append('feat', 'enable-sveltekit') + url.searchParams.append('feat', 'web-next') window.location.href = url.toString() } diff --git a/cmd/frontend/internal/app/ui/sveltekit.go b/cmd/frontend/internal/app/ui/sveltekit.go index d623e5fe365..adfd549a818 100644 --- a/cmd/frontend/internal/app/ui/sveltekit.go +++ b/cmd/frontend/internal/app/ui/sveltekit.go @@ -27,7 +27,7 @@ var sveltekitEnabledRoutes = map[string]struct{}{ } // useSvelteKit returns true if the route is configured to be supported by useSvelteKit -// (see svelteKitEnabledRoutes) and the 'enable-sveltekit' feature flag is set +// (see svelteKitEnabledRoutes) and the 'enable-sveltekit' or 'enable-sveltekit' feature flag is set func useSvelteKit(r *http.Request) bool { route := mux.CurrentRoute(r) if route == nil { @@ -38,7 +38,9 @@ func useSvelteKit(r *http.Request) bool { return false } - return featureflag.FromContext(r.Context()).GetBoolOr("enable-sveltekit", false) + ff := featureflag.FromContext(r.Context()) + + return ff.GetBoolOr("enable-sveltekit", false) || ff.GetBoolOr("web-next", false) } // renderSvelteKit writes SvelteKit's fallback page to the provided writer