fix(svelte): Preserve selected lines in codehost URL (#63334)

Author: fkling

client/web-sveltekit/src/lib/repo/HistoryPanel.svelte

@@ -63,6 +63,7 @@
     }
 
     $: selectedRev = $page.url?.searchParams.get('rev')
+    $: diffEnabled = $page.url?.searchParams.has('diff')
     $: closeURL = SourcegraphURL.from($page.url).deleteSearchParameter('rev', 'diff').toString()
 </script>
 
@@ -89,8 +90,8 @@
                     <td><Timestamp date={new Date(commit.author.date)} strict /></td>
                     {#if enableViewAtCommit}
                         <td>
-                            <Tooltip tooltip={selected ? 'Close commit' : 'View at commit'}>
-                                <a href={selected ? closeURL : `?rev=${commit.oid}`}
+                            <Tooltip tooltip={selected && !diffEnabled ? 'Close commit' : 'View at commit'}>
+                                <a href={selected && !diffEnabled ? closeURL : `?rev=${commit.oid}`}
                                     ><Icon icon={ILucideFileText} inline aria-hidden /></a
                                 >
                             </Tooltip>

client/web-sveltekit/src/lib/repo/url.ts

@@ -0,0 +1,45 @@
+import type { LineOrPositionOrRange } from '$lib/common'
+import { ExternalServiceKind, type ExternalLink } from '$lib/graphql-types'
+
+interface GetExternalURLOptions {
+    externalLink: Pick<ExternalLink, 'url' | 'serviceKind'>
+    lineOrPosition?: LineOrPositionOrRange
+}
+
+/**
+ * Extends the external link with additional information depending on the service kind.
+ *
+ * @param externalLink The external link to process.
+ * @param lineOrPosition The line or position to add to the external link.
+ * @returns The external URL.
+ */
+export function getExternalURL({ externalLink, lineOrPosition }: GetExternalURLOptions): string {
+    let url = externalLink.url
+
+    switch (externalLink.serviceKind) {
+        case ExternalServiceKind.GITHUB: {
+            // Add range or position path to the code host URL.
+            if (lineOrPosition?.line !== undefined) {
+                url += `#L${lineOrPosition.line}`
+
+                if (lineOrPosition.endLine) {
+                    url += `-L${lineOrPosition.endLine}`
+                }
+            }
+            break
+        }
+        case ExternalServiceKind.GITLAB: {
+            // Add range or position path to the code host URL.
+            if (lineOrPosition?.line !== undefined) {
+                url += `#L${lineOrPosition.line}`
+
+                if (lineOrPosition.endLine) {
+                    url += `-${lineOrPosition.endLine}`
+                }
+            }
+            break
+        }
+    }
+
+    return url
+}

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/-/blob/[...path]/DiffView.svelte

@@ -19,9 +19,11 @@
 </script>
 
 <FileHeader type="blob" repoName={data.repoName} revision={data.revision} path={data.filePath}>
-    {#if $commit.value?.blob}
-        <FileIcon slot="icon" file={$commit.value.blob} inline />
-    {/if}
+    <svelte:fragment slot="icon">
+        {#if $commit.value?.blob}
+            <FileIcon file={$commit.value.blob} inline />
+        {/if}
+    </svelte:fragment>
 </FileHeader>
 
 <div class="info">

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/-/blob/[...path]/FileView.svelte

@@ -21,7 +21,7 @@
     import { renderMermaid } from '$lib/repo/mermaid'
     import OpenInEditor from '$lib/repo/open-in-editor/OpenInEditor.svelte'
     import Permalink from '$lib/repo/Permalink.svelte'
-    import { createCodeIntelAPI } from '$lib/shared'
+    import { createCodeIntelAPI, replaceRevisionInURL } from '$lib/shared'
     import { isLightTheme, settings } from '$lib/stores'
     import { TELEMETRY_RECORDER } from '$lib/telemetry'
     import { createPromiseStore, formatBytes } from '$lib/utils'
@@ -85,6 +85,10 @@
     $: showFileModeSwitcher = blob && !isBinaryFile && !embedded
     $: showFormattedView = isRichFile && fileViewModeFromURL === CodeViewMode.Default
     $: showBlameView = fileViewModeFromURL === CodeViewMode.Blame
+    $: rawURL = (function () {
+        const url = `${repoURL}/-/raw/${filePath}`
+        return revisionOverride ? replaceRevisionInURL(url, revisionOverride.abbreviatedOID) : url
+    })()
 
     $: codeIntelAPI =
         !isBinaryFile && !showFormattedView && !disableCodeIntel
@@ -148,26 +152,24 @@
             <slot name="actions" />
         </svelte:fragment>
     </FileHeader>
-{:else if revisionOverride}
-    <FileHeader type="blob" repoName={data.repoName} path={data.filePath} {revision}>
-        <FileIcon slot="icon" file={blob} inline />
-    </FileHeader>
 {:else}
     <FileHeader type="blob" repoName={data.repoName} path={data.filePath} {revision}>
         <FileIcon slot="icon" file={blob} inline />
         <svelte:fragment slot="actions">
-            {#await data.externalServiceType then externalServiceType}
-                {#if externalServiceType && !isBinaryFile}
-                    <OpenInEditor {externalServiceType} updateUserSetting={data.updateUserSetting} />
-                {/if}
-            {/await}
+            {#if !revisionOverride}
+                {#await data.externalServiceType then externalServiceType}
+                    {#if externalServiceType && !isBinaryFile}
+                        <OpenInEditor {externalServiceType} updateUserSetting={data.updateUserSetting} />
+                    {/if}
+                {/await}
+            {/if}
             {#if blob}
-                <OpenInCodeHostAction data={blob} />
+                <OpenInCodeHostAction data={blob} lineOrPosition={data.lineOrPosition} />
             {/if}
             <Permalink {commitID} />
         </svelte:fragment>
         <svelte:fragment slot="actionmenu">
-            <MenuLink href="{repoURL}/-/raw/{filePath}" target="_blank">
+            <MenuLink href={rawURL} target="_blank">
                 <Icon icon={ILucideEye} inline aria-hidden /> View raw
             </MenuLink>
             <MenuButton

client/web-sveltekit/src/routes/[...repo=reporev]/(validrev)/(code)/-/blob/[...path]/OpenInCodeHostAction.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
+    import type { LineOrPositionOrRange } from '$lib/common'
     import { getHumanNameForCodeHost } from '$lib/repo/shared/codehost'
+    import { getExternalURL } from '$lib/repo/url'
     import CodeHostIcon from '$lib/search/CodeHostIcon.svelte'
     import { TELEMETRY_RECORDER } from '$lib/telemetry'
     import Tooltip from '$lib/Tooltip.svelte'
 
     import type { OpenInCodeHostAction } from './OpenInCodeHostAction.gql'
 
     export let data: OpenInCodeHostAction
+    export let lineOrPosition: LineOrPositionOrRange | undefined = undefined
 
     function handleOpenCodeHostClick(): void {
         TELEMETRY_RECORDER.recordEvent('repo.goToCodeHost', 'click')
     }
 </script>
 
-{#each data.externalURLs as { url, serviceKind } (url)}
+{#each data.externalURLs as externalLink (externalLink.url)}
     <Tooltip tooltip="Open in code host">
-        <a href={url} target="_blank" rel="noopener noreferrer" on:click={handleOpenCodeHostClick}>
-            {#if serviceKind}
-                <CodeHostIcon repository={serviceKind} disableTooltip />
+        <a
+            href={getExternalURL({ externalLink, lineOrPosition })}
+            target="_blank"
+            rel="noopener noreferrer"
+            on:click={handleOpenCodeHostClick}
+        >
+            {#if externalLink.serviceKind}
+                <CodeHostIcon repository={externalLink.serviceKind} disableTooltip />
                 <span data-action-label>
-                    {getHumanNameForCodeHost(serviceKind)}
+                    {getHumanNameForCodeHost(externalLink.serviceKind)}
                 </span>
             {:else}
                 Code host