Code Navigation: optimize repo link picker (#58025)

* replace cache-and-network policy with cache-first
* add unit test
* fix non-site-admin error bug
* convert CodeHostType constants to enum

Author: jasonhawkharris

client/web/BUILD.bazel

@@ -1979,6 +1979,7 @@ ts_project(
         "src/repo/linkifiy/get-links.test.ts",
         "src/repo/releases/RepositoryReleasesTagsPage.test.tsx",
         "src/repo/tree/TreePage.test.tsx",
+        "src/repo/utils.test.ts",
         "src/search/Notepad.test.tsx",
         "src/search/helpers.test.tsx",
         "src/search/index.test.ts",

client/web/src/repo/RepoLinkPicker.tsx

@@ -32,11 +32,10 @@ import {
     useDebounce,
 } from '@sourcegraph/wildcard'
 
-import {
-    ExternalServiceKind,
-    type RepositoriesSuggestionsResult,
-    type RepositoriesSuggestionsVariables,
-} from '../graphql-operations'
+import { type RepositoriesSuggestionsResult, type RepositoriesSuggestionsVariables } from '../graphql-operations'
+
+import { CodeHostType } from './constants'
+import { getInitialSearchTerm, stringToCodeHostType } from './utils'
 
 import styles from './RepoLinkPicker.module.scss'
 
@@ -47,11 +46,11 @@ const REPOSITORIES_QUERY = gql`
                 id
                 name
                 url
-                externalServices(first: 1) {
-                    nodes {
-                        id
-                        kind
-                    }
+                # We use externalRepository over externalServices here
+                # because externalServices is accessible only to admins.
+                externalRepository {
+                    id
+                    serviceType
                 }
             }
             pageInfo {
@@ -85,8 +84,10 @@ export const RepoLinkPicker: FC<RepoLinkPickerProps> = props => {
         loading,
     } = useQuery<RepositoriesSuggestionsResult, RepositoriesSuggestionsVariables>(REPOSITORIES_QUERY, {
         skip: !isSuggestionOpen,
-        variables: { query: debouncedSearchTerm },
-        fetchPolicy: 'cache-and-network',
+        variables: {
+            query: searchTerm.length === 0 ? getInitialSearchTerm(repositoryName) : debouncedSearchTerm,
+        },
+        fetchPolicy: 'cache-first',
     })
 
     const handleSelect = (selectedValue: string): void => {
@@ -146,7 +147,9 @@ export const RepoLinkPicker: FC<RepoLinkPickerProps> = props => {
                                         className={styles.item}
                                     >
                                         <Icon
-                                            svgPath={getCodeHostIconPath(suggestion.externalServices.nodes[0]?.kind)}
+                                            svgPath={getCodeHostIconPath(
+                                                stringToCodeHostType(suggestion.externalRepository.serviceType)
+                                            )}
                                             height="1rem"
                                             width="1rem"
                                             inline={false}
@@ -165,27 +168,27 @@ export const RepoLinkPicker: FC<RepoLinkPickerProps> = props => {
     )
 }
 
-export const getCodeHostIconPath = (codeHostType?: ExternalServiceKind): string => {
-    switch (codeHostType) {
-        case ExternalServiceKind.GITHUB: {
+export const getCodeHostIconPath = (codehost: CodeHostType): string => {
+    switch (codehost) {
+        case CodeHostType.GITHUB: {
             return mdiGithub
         }
-        case ExternalServiceKind.BITBUCKETCLOUD: {
+        case CodeHostType.BITBUCKETCLOUD: {
             return mdiBitbucket
         }
-        case ExternalServiceKind.BITBUCKETSERVER: {
+        case CodeHostType.BITBUCKETSERVER: {
             return mdiBitbucket
         }
-        case ExternalServiceKind.GITLAB: {
+        case CodeHostType.GITLAB: {
             return mdiGitlab
         }
-        case ExternalServiceKind.GITOLITE: {
+        case CodeHostType.GITOLITE: {
             return mdiGit
         }
-        case ExternalServiceKind.AWSCODECOMMIT: {
+        case CodeHostType.AWSCODECOMMIT: {
             return mdiAws
         }
-        case ExternalServiceKind.AZUREDEVOPS: {
+        case CodeHostType.AZUREDEVOPS: {
             return mdiMicrosoftAzure
         }
         default: {

client/web/src/repo/constants.ts

@@ -2,3 +2,14 @@ export const LogsPageTabs = {
     COMMANDS: 0,
     SYNCLOGS: 1,
 } as const
+
+export enum CodeHostType {
+    GITHUB = 'github',
+    BITBUCKETCLOUD = 'bitbucketCloud',
+    BITBUCKETSERVER = 'bitbucketServer',
+    GITLAB = 'gitlab',
+    GITOLITE = 'gitolite',
+    AWSCODECOMMIT = 'awsCodeCommit',
+    AZUREDEVOPS = 'azureDevOps',
+    OTHER = 'other',
+}

client/web/src/repo/utils.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { getInitialSearchTerm } from './utils'
+
+describe('getInitialSearchTerm', () => {
+    const tests: {
+        name: string
+        repo: string
+        expected: string
+    }[] = [
+        {
+            name: 'works with a github repo url',
+            repo: 'github.com/sourcegraph/sourcegraph',
+            expected: 'sourcegraph',
+        },
+        {
+            name: 'works with a gitlab repo url',
+            repo: 'gitlab.com/SourcegraphCody/jsonrpc2',
+            expected: 'jsonrpc2',
+        },
+        {
+            name: 'works with a perforce depot url',
+            repo: 'public.perforce.com/sourcegraph/myp4depot',
+            expected: 'myp4depot',
+        },
+        {
+            name: 'works with a bitbucket repo name',
+            repo: 'bitbucket.org/username/projectname/mybitbucketrepo',
+            expected: 'mybitbucketrepo',
+        },
+        {
+            name: 'works with a gerrit repo name',
+            repo: 'mygerritserver.com/c/mygerritrepo',
+            expected: 'mygerritrepo',
+        },
+        {
+            name: 'works with an Azure DevOps repo name',
+            repo: 'https://dev.azure.com/myADOorgname/myADOproject/_git/myADOrepo',
+            expected: 'myADOrepo',
+        },
+        {
+            name: 'works with a Plastic SCM repo name',
+            repo: 'https://cloud.plasticscm.com/my-plastic-repo',
+            expected: 'my-plastic-repo',
+        },
+    ]
+
+    for (const t of tests) {
+        it(t.name, () => {
+            expect(getInitialSearchTerm(t.repo)).toBe(t.expected)
+        })
+    }
+})

client/web/src/repo/utils.tsx

@@ -1,5 +1,9 @@
+import { at } from 'lodash'
+
 import { type GitCommitFields, RepositoryType } from '../graphql-operations'
 
+import { CodeHostType } from './constants'
+
 export const isPerforceChangelistMappingEnabled = (): boolean =>
     window.context.experimentalFeatures.perforceChangelistMapping === 'enabled'
 
@@ -12,3 +16,36 @@ export const getCanonicalURL = (sourceType: RepositoryType | string, node: GitCo
     isPerforceChangelistMappingEnabled() && isPerforceDepotSource(sourceType) && node.perforceChangelist
         ? node.perforceChangelist.canonicalURL
         : node.canonicalURL
+
+export const getInitialSearchTerm = (repo: string): string => {
+    const r = repo.split('/')
+    // This is what the linter required instead of r[r.length - 1].
+    // *shrugs*
+    return at(r, r.length - 1)[0]
+}
+
+export const stringToCodeHostType = (codeHostType: string): CodeHostType => {
+    switch (codeHostType) {
+        case 'github': {
+            return CodeHostType.GITHUB
+        }
+        case 'gitlab': {
+            return CodeHostType.GITLAB
+        }
+        case 'bitbucketCloud': {
+            return CodeHostType.BITBUCKETCLOUD
+        }
+        case 'gitolite': {
+            return CodeHostType.GITOLITE
+        }
+        case 'awsCodeCommit': {
+            return CodeHostType.AWSCODECOMMIT
+        }
+        case 'azureDevOps': {
+            return CodeHostType.AZUREDEVOPS
+        }
+        default: {
+            return CodeHostType.OTHER
+        }
+    }
+}