error view

TabbyML · Jun 12, 2024 · 740890b · 740890b
1 parent 92d8f55
commit 740890b
Show file tree

Hide file tree

Showing 11 changed files with 319 additions and 339 deletions.
diff --git a/ee/tabby-ui/app/files/components/chat-side-bar.tsx b/ee/tabby-ui/app/files/components/chat-side-bar.tsx
@@ -49,7 +49,6 @@ export const ChatSideBar: React.FC<ChatSideBarProps> = ({
         const fullPath = `${repositorySpecifier}/${rev}/${context.filepath}`
         if (!fullPath) return
         updateActivePath(fullPath, {
-          shouldFetchAllEntries: true,
           params: {
             line: String(context.range.start)
           }

diff --git a/ee/tabby-ui/app/files/components/error-view.tsx b/ee/tabby-ui/app/files/components/error-view.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { cn } from '@/lib/utils'
+import { IconFileSearch } from '@/components/ui/icons'
+
+import { SourceCodeBrowserContext } from './source-code-browser'
+import { Errors } from './utils'
+
+// import { Errors } from "./utils";
+
+interface ErrorViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  error: Error | undefined
+}
+
+export const ErrorView: React.FC<ErrorViewProps> = ({ className, error }) => {
+  const { activeEntryInfo, activeRepo, activeRepoRef } = React.useContext(
+    SourceCodeBrowserContext
+  )
+  const basename = activeEntryInfo?.basename
+  const isNotFound = error?.message === Errors.NOT_FOUND
+  const isEmptyRepository = error?.message === Errors?.EMPTY_REPOSITORY
+  // const isEmptyRepository = !!basename && (!activeRepo || !activeRepoRef?.name)
+
+  let errorMessge = 'Not found'
+  if (isEmptyRepository) {
+    errorMessge = 'Empty repository'
+  }
+
+  return (
+    <div
+      className={cn('min-h-[30vh] flex items-center justify-center', className)}
+    >
+      <div className="flex flex-col items-center">
+        <IconFileSearch className="mb-2 h-10 w-10" />
+        <div className="font-semibold text-2xl">{errorMessge}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/ee/tabby-ui/app/files/components/file-directory-breadcrumb.tsx b/ee/tabby-ui/app/files/components/file-directory-breadcrumb.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'next/link'
 
 import { RepositoryKind } from '@/lib/gql/generates/graphql'
 import { cn } from '@/lib/utils'
@@ -19,7 +20,6 @@ const FileDirectoryBreadcrumb: React.FC<FileDirectoryBreadcrumbProps> = ({
 }) => {
   const {
     currentFileRoutes,
-    updateActivePath,
     activePath,
     activeRepo,
     activeRepoRef,
@@ -61,36 +61,32 @@ const FileDirectoryBreadcrumb: React.FC<FileDirectoryBreadcrumbProps> = ({
   return (
     <div className={cn('flex flex-nowrap items-center gap-1', className)}>
       <div className="flex items-center gap-1 overflow-x-auto leading-8">
-        <div
-          className="cursor-pointer font-medium text-primary hover:underline"
-          onClick={e => updateActivePath(undefined)}
+        <Link
+          className="text-primary cursor-pointer font-medium hover:underline"
+          href="/files"
         >
           Repositories
-        </div>
+        </Link>
         <div>/</div>
         {routes?.map((route, idx) => {
           const isRepo = idx === 0 && routes?.length > 1
           const isActiveFile = idx === routes.length - 1
+          const classname = cn(
+            'whitespace-nowrap',
+            isRepo || isActiveFile ? 'font-bold' : 'font-medium',
+            isActiveFile ? '' : 'text-primary cursor-pointer hover:underline',
+            isRepo ? 'hover:underline' : undefined
+          )
 
-          // todo use link
           return (
             <React.Fragment key={route.href}>
-              <div
-                className={cn(
-                  'whitespace-nowrap',
-                  isRepo || isActiveFile ? 'font-bold' : 'font-medium',
-                  isActiveFile
-                    ? ''
-                    : 'cursor-pointer text-primary hover:underline',
-                  isRepo ? 'hover:underline' : undefined
-                )}
-                onClick={e => {
-                  if (isActiveFile) return
-                  updateActivePath(route.href)
-                }}
-              >
-                {route.name}
-              </div>
+              {isActiveFile ? (
+                <div className={classname}>{route.name}</div>
+              ) : (
+                <Link className={classname} href={`/files/${route.href}`}>
+                  {route.name}
+                </Link>
+              )}
               {!isActiveFile && <div>/</div>}
             </React.Fragment>
           )

diff --git a/ee/tabby-ui/app/files/components/file-directory-view.tsx b/ee/tabby-ui/app/files/components/file-directory-view.tsx
@@ -36,7 +36,8 @@ const DirectoryView: React.FC<DirectoryViewProps> = ({
     fileTreeData,
     activeRepo,
     activeRepoRef,
-    repoMap
+    repoMap,
+    activeEntryInfo
   } = React.useContext(SourceCodeBrowserContext)
 
   const files: TFileTreeNode[] = React.useMemo(() => {
@@ -66,28 +67,28 @@ const DirectoryView: React.FC<DirectoryViewProps> = ({
 
   const [loading] = useDebounceValue(propsLoading, 300)
 
-  const showParentEntry = currentFileRoutes?.length > 0
+  const showParentEntry = !!activeEntryInfo?.basename
   const parentNode = currentFileRoutes[currentFileRoutes?.length - 2]
 
   return (
     <div className={cn('text-base', className)}>
       <BlobHeader blob={undefined} hideBlobActions className="border-0" />
-      {loading || !initialized ? (
+      {(loading && !files?.length) || !initialized ? (
         <FileTreeSkeleton />
       ) : files?.length ? (
         <Table>
           <TableBody>
             {showParentEntry && (
               <TableRow className="cursor-pointer">
-                <Link
-                  href={`/files/${generateEntryPath(
-                    activeRepo,
-                    activeRepoRef?.name as string,
-                    parentNode?.file?.basename,
-                    parentNode?.file?.kind
-                  )}`}
-                >
-                  <TableCell className="p-1 px-4">
+                <TableCell className="p-1 px-4">
+                  <Link
+                    href={`/files/${generateEntryPath(
+                      activeRepo,
+                      activeRepoRef?.name as string,
+                      parentNode?.file?.basename,
+                      parentNode?.file?.kind
+                    )}`}
+                  >
                     <div className="flex items-center gap-2">
                       <div className="shrink-0">
                         <IconDirectorySolid
@@ -96,8 +97,8 @@ const DirectoryView: React.FC<DirectoryViewProps> = ({
                       </div>
                       <span className="px-1 py-2">..</span>
                     </div>
-                  </TableCell>
-                </Link>
+                  </Link>
+                </TableCell>
               </TableRow>
             )}
             <>
@@ -153,8 +154,7 @@ const DirectoryView: React.FC<DirectoryViewProps> = ({
         <div className="flex justify-center py-8">
           No indexed repository yet
         </div>
-      ) : // <div>404</div>
-      null}
+      ) : null}
     </div>
   )
 }

diff --git a/ee/tabby-ui/app/files/components/file-tree-header.tsx b/ee/tabby-ui/app/files/components/file-tree-header.tsx
@@ -51,8 +51,11 @@ import { RepositoryKindIcon } from './repository-kind-icon'
 import { SourceCodeBrowserContext } from './source-code-browser'
 import {
   generateEntryPath,
+  getDefaultRepoRef,
+  repositoryMap2List,
   resolveRepoRef,
-  resolveRepositoryInfoFromPath
+  resolveRepositoryInfoFromPath,
+  resolveRepoSpecifierFromRepoInfo
 } from './utils'
 
 interface FileTreeHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -87,13 +90,22 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
 }) => {
   const {
     activePath,
-    fileTreeData,
     updateActivePath,
     initialized,
     activeRepo,
     activeRepoRef,
-    fileMap
+    fileMap,
+    repoMap
   } = useContext(SourceCodeBrowserContext)
+  const repoList = React.useMemo(() => {
+    return repositoryMap2List(repoMap).map(repo => {
+      const repoSpecifier = resolveRepoSpecifierFromRepoInfo(repo) as string
+      return {
+        repo,
+        repoSpecifier
+      }
+    })
+  }, [repoMap])
   const [refSelectVisible, setRefSelectVisible] = React.useState(false)
   const [activeRefKind, setActiveRefKind] = React.useState<RepositoryRefKind>(
     activeRepoRef?.kind ?? 'branch'
@@ -117,7 +129,7 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
   const [options, setOptions] = React.useState<Array<SearchOption>>()
   const [optionsVisible, setOptionsVisible] = React.useState(false)
 
-  const noIndexedRepo = initialized && !fileTreeData?.length
+  const noIndexedRepo = initialized && !repoList?.length
 
   const [{ data: repositorySearchData }] = useQuery({
     query: repositorySearch,
@@ -138,6 +150,8 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
     const { basename = '' } = resolveRepositoryInfoFromPath(activePath)
     const kind = fileMap?.[basename]?.file?.kind ?? 'dir'
 
+    // clear repository search
+    setInput(undefined)
     updateActivePath(generateEntryPath(activeRepo, nextRev, basename, kind))
   }
 
@@ -151,8 +165,16 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
     setOptionsVisible(!!repositorySearchPattern)
   }, [repositorySearchData?.repositorySearch])
 
-  const onSelectRepo = (path: string) => {
-    updateActivePath(path)
+  const onSelectRepo = (repoSpecifier: string) => {
+    const repo = repoList.find(o => o.repoSpecifier === repoSpecifier)?.repo
+    if (repo) {
+      const path = `${repoSpecifier}/tree/${
+        resolveRepoRef(getDefaultRepoRef(repo.refs)).name
+      }`
+      // clear repository search
+      setInput(undefined)
+      updateActivePath(path)
+    }
   }
 
   const onInputValueChange = useDebounceCallback((v: string | undefined) => {
@@ -171,14 +193,14 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
   }
 
   const onSelectFile = async (value: SearchOption) => {
-    const path = value.path
-    if (!path) return
-
-    // todo generate entry path
-    const fullPath = `${repositorySpecifier}/${
-      activeRepoRef?.name ?? ''
-    }/${path}`
-    await updateActivePath(fullPath)
+    if (!value.path) return
+    const path = generateEntryPath(
+      activeRepo,
+      activeRepoRef?.name,
+      value.path,
+      value.type as any
+    )
+    updateActivePath(path)
   }
 
   // shortcut 't'
@@ -244,16 +266,18 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
               </SelectItem>
             ) : (
               <>
-                {/* todo use default */}
-                {fileTreeData?.map(repo => {
+                {repoList?.map(repo => {
                   return (
-                    <SelectItem key={repo.fullPath} value={repo.fullPath}>
+                    <SelectItem
+                      key={repo.repoSpecifier}
+                      value={repo.repoSpecifier}
+                    >
                       <div className="flex items-center gap-1">
                         <RepositoryKindIcon
-                          kind={repo?.repository?.kind}
+                          kind={repo.repo.kind}
                           fallback={<IconFolderGit />}
                         />
-                        {repo.name}
+                        {repo.repo.name}
                       </div>
                     </SelectItem>
                   )
@@ -297,7 +321,6 @@ const FileTreeHeader: React.FC<FileTreeHeaderProps> = ({
                 value={activeRefKind}
                 onValueChange={v => setActiveRefKind(v as RepositoryRefKind)}
               >
-                {/* todo style */}
                 <TabsList className="bg-popover py-0">
                   <TabsTrigger value="branch">Branches</TabsTrigger>
                   <TabsTrigger value="tag">Tags</TabsTrigger>

diff --git a/ee/tabby-ui/app/files/components/file-tree-panel.tsx b/ee/tabby-ui/app/files/components/file-tree-panel.tsx
@@ -9,9 +9,13 @@ import { FileTreeHeader } from './file-tree-header'
 import { SourceCodeBrowserContext } from './source-code-browser'
 import { generateEntryPath } from './utils'
 
-interface FileTreePanelProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface FileTreePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  fetchingTreeEntries: boolean
+}
 
-export const FileTreePanel: React.FC<FileTreePanelProps> = () => {
+export const FileTreePanel: React.FC<FileTreePanelProps> = ({
+  fetchingTreeEntries
+}) => {
   const {
     activePath,
     updateActivePath,
@@ -36,18 +40,6 @@ export const FileTreePanel: React.FC<FileTreePanelProps> = () => {
     updateActivePath(nextPath)
   }
 
-  // const currentFileTreeData = React.useMemo(() => {
-  //   const { repositorySpecifier, rev, basename } =
-  //     resolveRepositoryInfoFromPath(activePath)
-
-  //   if (!basename) return fileTreeData
-
-  //   const repo = fileTreeData.find(
-  //     treeNode => treeNode.fullPath === basename
-  //   )
-  //   return repo?.children ?? []
-  // }, [activePath, fileTreeData])
-
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <FileTreeHeader className="shrink-0 px-4 pb-3" />
@@ -64,6 +56,7 @@ export const FileTreePanel: React.FC<FileTreePanelProps> = () => {
           toggleExpandedKey={toggleExpandedKey}
           initialized={initialized}
           fileTreeData={fileTreeData}
+          fetchingTreeEntries={fetchingTreeEntries}
         />
       </div>
     </div>