Icon & link support for self-hosted repositories (#93)

brendan-kellam · web-flow · commit d6544086e74a · 2024-11-26T21:49:41.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added file suggestions as a suggestion type. ([#88](https://github.com/sourcebot-dev/sourcebot/pull/88))
+- Added icon and link support for self-hosted repositories. ([#93](https://github.com/sourcebot-dev/sourcebot/pull/93))
 
 ## [2.5.0] - 2024-11-22
 
diff --git a/packages/web/src/app/components/repositoryCarousel.tsx b/packages/web/src/app/components/repositoryCarousel.tsx
@@ -56,8 +56,8 @@ interface RepositoryBadgeProps {
 const RepositoryBadge = ({
     repo
 }: RepositoryBadgeProps) => {
-    const { repoIcon, repoName, repoLink } = (() => {
-        const info = getRepoCodeHostInfo(repo.Name);
+    const { repoIcon, displayName, repoLink } = (() => {
+        const info = getRepoCodeHostInfo(repo);
 
         if (info) {
             return {
@@ -66,14 +66,14 @@ const RepositoryBadge = ({
                     alt={info.costHostName}
                     className={`w-4 h-4 ${info.iconClassName}`}
                 />,
-                repoName: info.repoName,
+                displayName: info.displayName,
                 repoLink: info.repoLink,
             }
         }
 
         return {
             repoIcon: <FileIcon className="w-4 h-4" />,
-            repoName: repo.Name,
+            displayName: repo.Name,
             repoLink: undefined,
         }
     })();
@@ -91,7 +91,7 @@ const RepositoryBadge = ({
         >
             {repoIcon}
             <span className="text-sm font-mono">
-                {repoName}
+                {displayName}
             </span>
         </div>
     )
diff --git a/packages/web/src/app/repos/columns.tsx b/packages/web/src/app/repos/columns.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { Button } from "@/components/ui/button";
-import { getRepoCodeHostInfo } from "@/lib/utils";
 import { Column, ColumnDef } from "@tanstack/react-table"
 import { ArrowUpDown } from "lucide-react"
 import prettyBytes from "pretty-bytes";
@@ -19,6 +18,7 @@ export type RepositoryColumnInfo = {
     lastIndexed: string;
     latestCommit: string;
     commitUrlTemplate: string;
+    url: string;
 }
 
 export const columns: ColumnDef<RepositoryColumnInfo>[] = [
@@ -27,14 +27,16 @@ export const columns: ColumnDef<RepositoryColumnInfo>[] = [
         header: "Name",
         cell: ({ row }) => {
             const repo = row.original;
-            const info = getRepoCodeHostInfo(repo.name);
+            const url = repo.url;
+            // local repositories will have a url of 0 length
+            const isRemoteRepo = url.length === 0;
             return (
                 <div className="flex flex-row items-center gap-2">
                     <span
-                        className={info?.repoLink ? "cursor-pointer text-blue-500 hover:underline": ""}
+                        className={!isRemoteRepo ? "cursor-pointer text-blue-500 hover:underline": ""}
                         onClick={() => {
-                            if (info?.repoLink) {
-                                window.open(info.repoLink, "_blank");
+                            if (!isRemoteRepo) {
+                                window.open(url, "_blank");
                             }
                         }}
                     >
diff --git a/packages/web/src/app/repos/repositoryTable.tsx b/packages/web/src/app/repos/repositoryTable.tsx
@@ -26,6 +26,7 @@ export const RepositoryTable = async () => {
             latestCommit: repo.Repository.LatestCommitDate,
             indexedFiles: repo.Stats.Documents,
             commitUrlTemplate: repo.Repository.CommitURLTemplate,
+            url: repo.Repository.URL,
         }
     }).sort((a, b) => {
         return new Date(b.lastIndexed).getTime() -  new Date(a.lastIndexed).getTime();
diff --git a/packages/web/src/app/search/components/codePreviewPanel/index.tsx b/packages/web/src/app/search/components/codePreviewPanel/index.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { fetchFileSource } from "@/app/api/(client)/client";
-import { getCodeHostFilePreviewLink, base64Decode } from "@/lib/utils";
+import { base64Decode } from "@/lib/utils";
 import { useQuery } from "@tanstack/react-query";
 import { CodePreview, CodePreviewFile } from "./codePreview";
 import { SearchResultFile } from "@/lib/types";
@@ -11,13 +11,15 @@ interface CodePreviewPanelProps {
     onClose: () => void;
     selectedMatchIndex: number;
     onSelectedMatchIndexChange: (index: number) => void;
+    repoUrlTemplates: Record<string, string>;
 }
 
 export const CodePreviewPanel = ({
     fileMatch,
     onClose,
     selectedMatchIndex,
     onSelectedMatchIndexChange,
+    repoUrlTemplates,
 }: CodePreviewPanelProps) => {
 
     const { data: file } = useQuery({
@@ -37,8 +39,15 @@ export const CodePreviewPanel = ({
                 branch,
             })
                 .then(({ source }) => {
-                    // @todo : refector this to use the templates provided by zoekt.
-                    const link = getCodeHostFilePreviewLink(fileMatch.Repository, fileMatch.FileName, branch);
+                    const link = (() => {
+                        const template = repoUrlTemplates[fileMatch.Repository];
+                        if (!template) {
+                            return undefined;
+                        }
+                        return template
+                            .replace("{{.Version}}", branch ?? "HEAD")
+                            .replace("{{.Path}}", fileMatch.FileName);
+                    })();
 
                     const decodedSource = base64Decode(source);
 
diff --git a/packages/web/src/app/search/components/filterPanel/entry.tsx b/packages/web/src/app/search/components/filterPanel/entry.tsx
@@ -2,16 +2,13 @@
 
 import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
 import clsx from "clsx";
-import Image from "next/image";
 
 export type Entry = {
     key: string;
     displayName: string;
     count: number;
     isSelected: boolean;
-    icon?: string;
-    iconAltText?: string;
-    iconClassName?: string;
+    Icon?: React.ReactNode;
 }
 
 interface EntryProps {
@@ -22,11 +19,9 @@ interface EntryProps {
 export const Entry = ({
     entry: {
         isSelected,
-        icon,
-        iconAltText,
-        iconClassName,
         displayName,
         count,
+        Icon,
     },
     onClicked,
 }: EntryProps) => {
@@ -42,13 +37,7 @@ export const Entry = ({
             onClick={() => onClicked()}
         >
             <div className="flex flex-row items-center gap-1">
-                {icon ? (
-                    <Image
-                        src={icon}
-                        alt={iconAltText ?? ''}
-                        className={`w-4 h-4 flex-shrink-0 ${iconClassName}`}
-                    />
-                ) : (
+                {Icon ? Icon : (
                     <QuestionMarkCircledIcon className="w-4 h-4 flex-shrink-0" />
                 )}
                 <p className="text-wrap">{displayName}</p>
diff --git a/packages/web/src/app/search/components/filterPanel/index.tsx b/packages/web/src/app/search/components/filterPanel/index.tsx
@@ -1,20 +1,24 @@
 'use client';
 
-import { SearchResultFile } from "@/lib/types";
-import { getRepoCodeHostInfo } from "@/lib/utils";
+import { Repository, SearchResultFile } from "@/lib/types";
+import { cn, getRepoCodeHostInfo } from "@/lib/utils";
 import { SetStateAction, useCallback, useEffect, useState } from "react";
 import { Entry } from "./entry";
 import { Filter } from "./filter";
 import { getLanguageIcon } from "./languageIcons";
+import Image from "next/image";
+import { LaptopIcon, QuestionMarkCircledIcon } from "@radix-ui/react-icons";
 
 interface FilePanelProps {
     matches: SearchResultFile[];
     onFilterChanged: (filteredMatches: SearchResultFile[]) => void,
+    repoMetadata: Record<string, Repository>;
 }
 
 export const FilterPanel = ({
     matches,
     onFilterChanged,
+    repoMetadata,
 }: FilePanelProps) => {
     const [repos, setRepos] = useState<Record<string, Entry>>({});
     const [languages, setLanguages] = useState<Record<string, Entry>>({});
@@ -24,19 +28,28 @@ export const FilterPanel = ({
             "Repository",
             matches,
             (key) => {
-                const info = getRepoCodeHostInfo(key);
+                const repo: Repository | undefined = repoMetadata[key];
+                const info = getRepoCodeHostInfo(repo);
+                const Icon = info ? (
+                    <Image
+                        src={info.icon}
+                        alt={info.costHostName}
+                        className={cn('w-4 h-4 flex-shrink-0', info.iconClassName)}
+                    />
+                ) : (
+                    <LaptopIcon className="w-4 h-4 flex-shrink-0" />
+                );
+
                 return {
                     key,
-                    displayName: info?.repoName ?? key,
+                    displayName: info?.displayName ?? key,
                     count: 0,
                     isSelected: false,
-                    icon: info?.icon,
-                    iconAltText: info?.costHostName,
-                    iconClassName: info?.iconClassName,
+                    Icon,
                 };
             }
         );
-       
+
         setRepos(_repos);
     }, [matches, setRepos]);
 
@@ -45,12 +58,23 @@ export const FilterPanel = ({
             "Language",
             matches,
             (key) => {
+                const iconSrc = getLanguageIcon(key);
+                const Icon = iconSrc ? (
+                    <Image
+                        src={iconSrc}
+                        alt={key}
+                        className="w-4 h-4 flex-shrink-0"
+                    />
+                ) : (
+                    <QuestionMarkCircledIcon className="w-4 h-4 flex-shrink-0" />
+                );
+
                 return {
                     key,
                     displayName: key,
                     count: 0,
                     isSelected: false,
-                    icon: getLanguageIcon(key),
+                    Icon: Icon,
                 } satisfies Entry;
             }
         )
@@ -85,10 +109,10 @@ export const FilterPanel = ({
         );
 
         const filteredMatches = matches.filter((match) =>
-            (
-                (selectedRepos.size === 0 ? true : selectedRepos.has(match.Repository)) &&
-                (selectedLanguages.size === 0 ? true : selectedLanguages.has(match.Language))
-            )
+        (
+            (selectedRepos.size === 0 ? true : selectedRepos.has(match.Repository)) &&
+            (selectedLanguages.size === 0 ? true : selectedLanguages.has(match.Language))
+        )
         );
 
         onFilterChanged(filteredMatches);
diff --git a/packages/web/src/app/search/components/searchResultsPanel/fileMatchContainer.tsx b/packages/web/src/app/search/components/searchResultsPanel/fileMatchContainer.tsx
@@ -3,10 +3,10 @@
 import { getRepoCodeHostInfo } from "@/lib/utils";
 import { useCallback, useMemo } from "react";
 import Image from "next/image";
-import { DoubleArrowDownIcon, DoubleArrowUpIcon, FileIcon } from "@radix-ui/react-icons";
+import { DoubleArrowDownIcon, DoubleArrowUpIcon, LaptopIcon } from "@radix-ui/react-icons";
 import clsx from "clsx";
 import { Separator } from "@/components/ui/separator";
-import { SearchResultFile } from "@/lib/types";
+import { Repository, SearchResultFile } from "@/lib/types";
 import { FileMatch } from "./fileMatch";
 
 export const MAX_MATCHES_TO_PREVIEW = 3;
@@ -18,6 +18,7 @@ interface FileMatchContainerProps {
     showAllMatches: boolean;
     onShowAllMatchesButtonClicked: () => void;
     isBranchFilteringEnabled: boolean;
+    repoMetadata: Record<string, Repository>;
 }
 
 export const FileMatchContainer = ({
@@ -27,6 +28,7 @@ export const FileMatchContainer = ({
     showAllMatches,
     onShowAllMatchesButtonClicked,
     isBranchFilteringEnabled,
+    repoMetadata,
 }: FileMatchContainerProps) => {
 
     const matchCount = useMemo(() => {
@@ -59,11 +61,13 @@ export const FileMatchContainer = ({
         return null;
     }, [matches]);
 
-    const { repoIcon, repoName, repoLink } = useMemo(() => {
-        const info = getRepoCodeHostInfo(file.Repository);
+    const { repoIcon, displayName, repoLink } = useMemo(() => {
+        const repo: Repository | undefined = repoMetadata[file.Repository];
+        const info = getRepoCodeHostInfo(repo);
+
         if (info) {
             return {
-                repoName: info.repoName,
+                displayName: info.displayName,
                 repoLink: info.repoLink,
                 repoIcon: <Image
                     src={info.icon}
@@ -74,11 +78,11 @@ export const FileMatchContainer = ({
         }
 
         return {
-            repoName: file.Repository,
+            displayName: file.Repository,
             repoLink: undefined,
-            repoIcon: <FileIcon className="w-4 h-4" />
+            repoIcon: <LaptopIcon className="w-4 h-4" />
         }
-    }, [file]);
+    }, [file.Repository, repoMetadata]);
 
     const isMoreContentButtonVisible = useMemo(() => {
         return matchCount > MAX_MATCHES_TO_PREVIEW;
@@ -122,7 +126,7 @@ export const FileMatchContainer = ({
                             }
                         }}
                     >
-                        {repoName}
+                        {displayName}
                     </span>
                     {isBranchFilteringEnabled && branches.length > 0 && (
                         <span
diff --git a/packages/web/src/app/search/components/searchResultsPanel/index.tsx b/packages/web/src/app/search/components/searchResultsPanel/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { SearchResultFile } from "@/lib/types";
+import { Repository, SearchResultFile } from "@/lib/types";
 import { FileMatchContainer, MAX_MATCHES_TO_PREVIEW } from "./fileMatchContainer";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -12,6 +12,7 @@ interface SearchResultsPanelProps {
     isLoadMoreButtonVisible: boolean;
     onLoadMoreButtonClicked: () => void;
     isBranchFilteringEnabled: boolean;
+    repoMetadata: Record<string, Repository>;
 }
 
 const ESTIMATED_LINE_HEIGHT_PX = 20;
@@ -25,6 +26,7 @@ export const SearchResultsPanel = ({
     isLoadMoreButtonVisible,
     onLoadMoreButtonClicked,
     isBranchFilteringEnabled,
+    repoMetadata,
 }: SearchResultsPanelProps) => {
     const parentRef = useRef<HTMLDivElement>(null);
     const [showAllMatchesStates, setShowAllMatchesStates] = useState(Array(fileMatches.length).fill(false));
@@ -148,6 +150,7 @@ export const SearchResultsPanel = ({
                                 onShowAllMatchesButtonClicked(virtualRow.index);
                             }}
                             isBranchFilteringEnabled={isBranchFilteringEnabled}
+                            repoMetadata={repoMetadata}
                         />
                     </div>
                 ))}
diff --git a/packages/web/src/app/search/page.tsx b/packages/web/src/app/search/page.tsx
diff --git a/packages/web/src/lib/schemas.ts b/packages/web/src/lib/schemas.ts
diff --git a/packages/web/src/lib/utils.ts b/packages/web/src/lib/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ export const RepositoryTable = async () => {`
`26`	`26`	`latestCommit: repo.Repository.LatestCommitDate,`
`27`	`27`	`indexedFiles: repo.Stats.Documents,`
`28`	`28`	`commitUrlTemplate: repo.Repository.CommitURLTemplate,`
	`29`	`+ url: repo.Repository.URL,`
`29`	`30`	`}`
`30`	`31`	`}).sort((a, b) => {`
`31`	`32`	`return new Date(b.lastIndexed).getTime() - new Date(a.lastIndexed).getTime();`