Svelte: update navigation bar for dotcom deployment (#62682)

This updates the navigation bar in svelte to show the dotcom-specific nav bar on dotcom (whenever svelte is enabled there).

client/web-sveltekit/src/lib/navigation/GlobalHeader.svelte

@@ -19,16 +19,17 @@
     import Icon from '$lib/Icon.svelte'
     import { mark } from '$lib/images'
     import GlobalSidebarNavigation from '$lib/navigation/GlobalSidebarNavigation.svelte'
-    import { mainNavigation } from '$lib/navigation/mainNavigation'
     import MainNavigationEntry from '$lib/navigation/MainNavigationEntry.svelte'
     import Popover from '$lib/Popover.svelte'
     import { Badge, Button } from '$lib/wildcard'
 
     import { GlobalNavigation_User } from './GlobalNavigation.gql'
+    import type { NavigationEntry, NavigationMenu } from './mainNavigation'
     import UserMenu from './UserMenu.svelte'
 
     export let authenticatedUser: GlobalNavigation_User | null | undefined
     export let handleOptOut: (() => Promise<void>) | undefined
+    export let entries: (NavigationEntry | NavigationMenu)[]
 
     let isSidebarNavigationOpen: boolean = false
 
@@ -41,7 +42,7 @@
 
 <header class="root" data-global-header>
     {#if isSidebarNavigationOpen}
-        <GlobalSidebarNavigation onClose={() => (isSidebarNavigationOpen = false)} />
+        <GlobalSidebarNavigation onClose={() => (isSidebarNavigationOpen = false)} {entries} />
     {/if}
 
     <div class="logo" class:with-custom-content={withCustomContent}>
@@ -59,7 +60,7 @@
     <nav class="plain-navigation" bind:this={$extensionElement}>
         {#if !withCustomContent}
             <ul class="plain-navigation-list">
-                {#each mainNavigation as entry (entry.label)}
+                {#each entries as entry (entry.label)}
                     <MainNavigationEntry {entry} />
                 {/each}
             </ul>

client/web-sveltekit/src/lib/navigation/GlobalSidebarNavigation.svelte

@@ -8,15 +8,17 @@
 
 <script lang="ts">
     import { mdiClose } from '@mdi/js'
+
     import { page } from '$app/stores'
     import { onClickOutside, portal } from '$lib/dom'
     import Icon from '$lib/Icon.svelte'
     import SourcegraphLogo from '$lib/SourcegraphLogo.svelte'
 
-    import { isCurrent, mainNavigation } from './mainNavigation'
+    import { isCurrent } from './mainNavigation'
     import MainNavigationLink from './MainNavigationLink.svelte'
 
     export let onClose: () => void
+    export let entries: (NavigationEntry | NavigationMenu)[]
 </script>
 
 <div class="root" use:portal>
@@ -33,7 +35,7 @@
 
         <nav>
             <ul class="list">
-                {#each mainNavigation as entry (entry.label)}
+                {#each entries as entry (entry.label)}
                     <li>
                         <MainNavigationLink {entry} />
                         {#if isNavigationMenu(entry) && entry.children.length > 0}

client/web-sveltekit/src/lib/navigation/mainNavigation.ts

@@ -1,11 +1,6 @@
-import { mdiChartBar, mdiMagnify } from '@mdi/js'
 import type { Page } from '@sveltejs/kit'
 import type { ComponentType } from 'svelte'
 
-import BatchChangesIcon from '$lib/icons/BatchChanges.svelte'
-import CodyIcon from '$lib/icons/Cody.svelte'
-import { isRepoRoute } from '$lib/navigation'
-
 /**
  * Indicates to the UI to show a status badge next to the navigation entry.
  */
@@ -72,76 +67,5 @@ export interface NavigationMenu {
  * by means of comparing the entry's href with the current page's URL.
  */
 export function isCurrent(entry: NavigationEntry, page: Page): boolean {
-    return page.url.pathname.startsWith(entry.href)
+    return page.url.pathname === entry.href
 }
-
-/**
- * The main navigation of the application.
- */
-export const mainNavigation: (NavigationMenu | NavigationEntry)[] = [
-    {
-        label: 'Code Search',
-        icon: mdiMagnify,
-        href: '/search',
-        children: [
-            {
-                label: 'Search Home',
-                href: '/search',
-            },
-            {
-                label: 'Contexts',
-                href: '/contexts',
-            },
-            {
-                label: 'Notebooks',
-                href: '/notebooks',
-            },
-            {
-                label: 'Monitoring',
-                href: '/code-monitoring',
-            },
-            {
-                label: 'Code Ownership',
-                href: '/own',
-            },
-            {
-                label: 'Search Jobs',
-                href: '/search-jobs',
-                status: Status.BETA,
-            },
-        ],
-        isCurrent(this: NavigationMenu, page) {
-            // This is a special case of the code search menu: It is marked as "current" if the
-            // current page is a repository route.
-            return isRepoRoute(page.route?.id) || this.children.some(entry => isCurrent(entry, page))
-        },
-    },
-    {
-        label: 'Cody AI',
-        icon: CodyIcon,
-        href: '/cody',
-        isCurrent(this: NavigationMenu, page) {
-            return this.children.some(entry => isCurrent(entry, page))
-        },
-        children: [
-            {
-                label: 'Dashboard',
-                href: '/cody',
-            },
-            {
-                label: 'Web Chat',
-                href: '/cody/chat',
-            },
-        ],
-    },
-    {
-        label: 'Batch Changes',
-        icon: BatchChangesIcon,
-        href: '/batch-changes',
-    },
-    {
-        label: 'Insights',
-        icon: mdiChartBar,
-        href: '/insights',
-    },
-]

client/web-sveltekit/src/routes/+layout.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
     import { onDestroy } from 'svelte'
     import { writable } from 'svelte/store'
+
     import { browser } from '$app/environment'
     import { beforeNavigate } from '$app/navigation'
-
     import { isErrorLike } from '$lib/common'
+    import GlobalHeader from '$lib/navigation/GlobalHeader.svelte'
     import { TemporarySettingsStorage } from '$lib/shared'
     import { isLightTheme, setAppContext } from '$lib/stores'
     import { createTemporarySettingsStorage } from '$lib/temporarySettings'
-    import GlobalHeader from '$lib/navigation/GlobalHeader.svelte'
 
     import './styles.scss'
 
     import { createFeatureFlagStore } from '$lib/featureflags'
+    import FuzzyFinderContainer from '$lib/fuzzyfinder/FuzzyFinderContainer.svelte'
     import GlobalNotification from '$lib/global-notifications/GlobalNotifications.svelte'
     import { getGraphQLClient } from '$lib/graphql/apollo'
     import { isRouteEnabled } from '$lib/navigation'
 
     import type { LayoutData } from './$types'
-    import FuzzyFinderContainer from '$lib/fuzzyfinder/FuzzyFinderContainer.svelte'
 
     export let data: LayoutData
 
@@ -96,7 +96,7 @@
     {/if}
 {/await}
 
-<GlobalHeader authenticatedUser={$user} {handleOptOut} />
+<GlobalHeader authenticatedUser={$user} {handleOptOut} entries={data.navigationEntries} />
 
 <main>
     <slot />

client/web-sveltekit/src/routes/+layout.ts

@@ -6,6 +6,7 @@ import type { Settings } from '$lib/shared'
 
 import type { LayoutLoad } from './$types'
 import { Init, EvaluatedFeatureFlagsQuery, GlobalAlertsSiteFlags, DisableSveltePrototype } from './layout.gql'
+import { mainNavigation, dotcomMainNavigation } from './navigation'
 
 // Disable server side rendering for the whole app
 export const ssr = false
@@ -39,6 +40,7 @@ export const load: LayoutLoad = async ({ fetch }) => {
 
     return {
         user: result.data.currentUser,
+        navigationEntries: window.context.sourcegraphDotComMode ? dotcomMainNavigation : mainNavigation,
         // Initial user settings
         settings,
         featureFlags: result.data.evaluatedFeatureFlags,

client/web-sveltekit/src/routes/navigation.ts

@@ -0,0 +1,110 @@
+import { mdiChartBar, mdiMagnify } from '@mdi/js'
+
+import BatchChangesIcon from '$lib/icons/BatchChanges.svelte'
+import CodyIcon from '$lib/icons/Cody.svelte'
+import { isRepoRoute } from '$lib/navigation'
+import { Status, isCurrent, type NavigationEntry, type NavigationMenu } from '$lib/navigation/mainNavigation'
+
+/**
+ * The main navigation of the application.
+ */
+export const mainNavigation: (NavigationMenu | NavigationEntry)[] = [
+    {
+        label: 'Code Search',
+        icon: mdiMagnify,
+        href: '/search',
+        children: [
+            {
+                label: 'Search Home',
+                href: '/search',
+            },
+            {
+                label: 'Contexts',
+                href: '/contexts',
+            },
+            {
+                label: 'Notebooks',
+                href: '/notebooks',
+            },
+            {
+                label: 'Monitoring',
+                href: '/code-monitoring',
+            },
+            {
+                label: 'Code Ownership',
+                href: '/own',
+            },
+            {
+                label: 'Search Jobs',
+                href: '/search-jobs',
+                status: Status.BETA,
+            },
+        ],
+        isCurrent(this: NavigationMenu, page) {
+            // This is a special case of the code search menu: It is marked as "current" if the
+            // current page is a repository route.
+            return isRepoRoute(page.route?.id) || this.children.some(entry => isCurrent(entry, page))
+        },
+    },
+    {
+        label: 'Cody AI',
+        icon: CodyIcon,
+        href: '/cody',
+        isCurrent(this: NavigationMenu, page) {
+            return this.children.some(entry => isCurrent(entry, page))
+        },
+        children: [
+            {
+                label: 'Dashboard',
+                href: '/cody',
+            },
+            {
+                label: 'Web Chat',
+                href: '/cody/chat',
+            },
+        ],
+    },
+    {
+        label: 'Batch Changes',
+        icon: BatchChangesIcon,
+        href: '/batch-changes',
+    },
+    {
+        label: 'Insights',
+        icon: mdiChartBar,
+        href: '/insights',
+    },
+]
+
+/**
+ * The main navigation for sourcegraph.com
+ */
+export const dotcomMainNavigation: (NavigationMenu | NavigationEntry)[] = [
+    {
+        label: 'Code Search',
+        icon: mdiMagnify,
+        href: '/search',
+    },
+    {
+        label: 'Cody AI',
+        icon: CodyIcon,
+        href: '/cody',
+        children: [
+            {
+                label: 'Dashboard',
+                href: '/cody',
+            },
+            {
+                label: 'Web Chat',
+                href: '/cody/chat',
+            },
+        ],
+        isCurrent(this: NavigationMenu, page) {
+            return this.children.some(entry => isCurrent(entry, page))
+        },
+    },
+    {
+        label: 'About Sourcegraph',
+        href: '/',
+    },
+]