ui(frontend): refine admin ui

pingcap · Nov 27, 2024 · b265ff2 · b265ff2
1 parent f245b0a
commit b265ff2
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 81 deletions.
diff --git a/frontend/app/src/app/(main)/(admin)/chat-engines/page.tsx b/frontend/app/src/app/(main)/(admin)/chat-engines/page.tsx
@@ -1,5 +1,6 @@
 import { AdminPageHeading } from '@/components/admin-page-heading';
 import { ChatEnginesTable } from '@/components/chat-engine/chat-engines-table';
+import { NextLink } from '@/components/nextjs/NextLink';
 
 export default function ChatEnginesPage () {
   return (
@@ -9,6 +10,7 @@ export default function ChatEnginesPage () {
           { title: 'Chat Engines', docsUrl: '/docs/chat-engine' },
         ]}
       />
+      <NextLink href="/chat-engines/new">New Chat Engine</NextLink>
       <ChatEnginesTable />
     </>
   );

diff --git a/frontend/app/src/app/(main)/(admin)/embedding-models/page.tsx b/frontend/app/src/app/(main)/(admin)/embedding-models/page.tsx
@@ -2,6 +2,8 @@
 
 import { AdminPageHeading } from '@/components/admin-page-heading';
 import { EmbeddingModelsTable } from '@/components/embedding-models/EmbeddingModelsTable';
+import { NextLink } from '@/components/nextjs/NextLink';
+import { PlusIcon } from 'lucide-react';
 
 export default function EmbeddingModelPage () {
 
@@ -13,6 +15,10 @@ export default function EmbeddingModelPage () {
           { title: 'Embedding Models', docsUrl: '/docs/embedding-model' },
         ]}
       />
+      <NextLink href="/embedding-models/create">
+        <PlusIcon className="size-4" />
+        New Embedding Model
+      </NextLink>
       <EmbeddingModelsTable />
     </>
   );

diff --git a/frontend/app/src/app/(main)/(admin)/llms/page.tsx b/frontend/app/src/app/(main)/(admin)/llms/page.tsx
@@ -1,5 +1,7 @@
 import { AdminPageHeading } from '@/components/admin-page-heading';
 import { LLMsTable } from '@/components/llm/LLMsTable';
+import { NextLink } from '@/components/nextjs/NextLink';
+import { PlusIcon } from 'lucide-react';
 
 export default function Page () {
   return (
@@ -10,6 +12,10 @@ export default function Page () {
           { title: 'LLMs', docsUrl: '/docs/llm' },
         ]}
       />
+      <NextLink href="/llms/create">
+        <PlusIcon className="size-4" />
+        New LLM
+      </NextLink>
       <LLMsTable />
     </>
   );

diff --git a/frontend/app/src/app/(main)/(admin)/reranker-models/page.tsx b/frontend/app/src/app/(main)/(admin)/reranker-models/page.tsx
@@ -1,5 +1,7 @@
 import { AdminPageHeading } from '@/components/admin-page-heading';
+import { NextLink } from '@/components/nextjs/NextLink';
 import RerankerModelsTable from '@/components/reranker/RerankerModelsTable';
+import { PlusIcon } from 'lucide-react';
 
 export default function Page () {
   return (
@@ -10,6 +12,10 @@ export default function Page () {
           { title: 'Reranker Models', docsUrl: '/docs/reranker-model' },
         ]}
       />
+      <NextLink href="/reranker-models/create">
+        <PlusIcon className="size-4" />
+        New Reranker Model
+      </NextLink>
       <RerankerModelsTable />
     </>
   );

diff --git a/frontend/app/src/components/admin-page-heading.tsx b/frontend/app/src/components/admin-page-heading.tsx
@@ -1,4 +1,7 @@
+'use client';
+
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import { useSettingContext } from '@/components/website-setting-provider';
 import { HelpCircleIcon } from 'lucide-react';
 import Link from 'next/link';
 import { Fragment, type ReactNode } from 'react';
@@ -10,41 +13,39 @@ export interface BreadcrumbItem {
 }
 
 export interface TableHeadingProps {
-  /**
-   * @deprecated
-   */
-  title?: ReactNode;
   breadcrumbs?: BreadcrumbItem[];
 }
 
-export function AdminPageHeading ({ title, breadcrumbs }: TableHeadingProps) {
+export function AdminPageHeading ({ breadcrumbs }: TableHeadingProps) {
+  const { title: siteTitle } = useSettingContext();
   return (
-    <div className="flex items-center gap-2 mb-2 pl-8">
+    <div className="mb-2 pl-8">
       {breadcrumbs && (
         <Breadcrumb>
           <BreadcrumbList>
+            <BreadcrumbLink asChild>
+              <Link href="/">
+                {siteTitle}
+              </Link>
+            </BreadcrumbLink>
             {breadcrumbs.map((item, index) => (
               <Fragment key={index}>
-                {index > 0 && <BreadcrumbSeparator />}
+                <BreadcrumbSeparator />
                 <BreadcrumbItem>
                   {item.url
                     ? <BreadcrumbLink asChild><Link href={item.url}>{item.title}</Link></BreadcrumbLink>
                     : index === breadcrumbs.length - 1
                       ? <BreadcrumbPage>{item.title}</BreadcrumbPage>
                       : <span>{item.title}</span>}
                   {item.docsUrl
-                    ? <a href={item.docsUrl} target='_blank'><HelpCircleIcon className="size-4" /></a>
+                    ? <a href={item.docsUrl} target="_blank"><HelpCircleIcon className="size-4" /></a>
                     : undefined}
                 </BreadcrumbItem>
               </Fragment>
             ))}
           </BreadcrumbList>
         </Breadcrumb>
       )}
-      <div>
-        {title && <h2 className="text-2xl flex-shrink-0 font-semibold">{title}</h2>}
-      </div>
     </div>
-  )
-    ;
+  );
 }
diff --git a/frontend/app/src/components/chat-engine/chat-engines-table.tsx b/frontend/app/src/components/chat-engine/chat-engines-table.tsx
@@ -7,7 +7,6 @@ import { datetime } from '@/components/cells/datetime';
 import { link } from '@/components/cells/link';
 import { mono } from '@/components/cells/mono';
 import { DataTableRemote } from '@/components/data-table-remote';
-import { NextLink } from '@/components/nextjs/NextLink';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
 import { CopyIcon, TrashIcon } from 'lucide-react';
@@ -59,7 +58,6 @@ const columns = [
 export function ChatEnginesTable () {
   return (
     <DataTableRemote
-      before={<NextLink href="/chat-engines/new">New Chat Engine</NextLink>}
       columns={columns}
       apiKey="api.chat-engines.list"
       api={listChatEngines}

diff --git a/frontend/app/src/components/dangerous-action-button.tsx b/frontend/app/src/components/dangerous-action-button.tsx
@@ -1,6 +1,6 @@
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
-import { Button, type ButtonProps } from '@/components/ui/button';
+import { Button, type ButtonProps, buttonVariants } from '@/components/ui/button';
 import { getErrorMessage } from '@/lib/errors';
 import { cn } from '@/lib/utils';
 import { AlertTriangleIcon, Loader2Icon } from 'lucide-react';
@@ -50,8 +50,8 @@ export const DangerousActionButton = forwardRef<HTMLButtonElement, DangerousActi
           <AlertDescription>{getErrorMessage(error)}</AlertDescription>
         </Alert>}
         <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction disabled={acting} onClick={handleClick}>
+          <AlertDialogCancel className={cn('border-none', buttonVariants({ variant: 'ghost' }))}>Cancel</AlertDialogCancel>
+          <AlertDialogAction className={buttonVariants({ variant: 'destructive' })} disabled={acting} onClick={handleClick}>
             {acting && <Loader2Icon className="size-4 mr-1 animate-spin repeat-infinite" />}
             Continue
           </AlertDialogAction>

diff --git a/frontend/app/src/components/embedding-models/EmbeddingModelsTable.tsx b/frontend/app/src/components/embedding-models/EmbeddingModelsTable.tsx
@@ -2,27 +2,15 @@
 
 import { type EmbeddingModel, listEmbeddingModels } from '@/api/embedding-models';
 import { mono } from '@/components/cells/mono';
-import { DataTableHeading } from '@/components/data-table-heading';
 import { DataTableRemote } from '@/components/data-table-remote';
 import { Badge } from '@/components/ui/badge';
-import { buttonVariants } from '@/components/ui/button';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { PlusIcon } from 'lucide-react';
 import Link from 'next/link';
 
 export function EmbeddingModelsTable () {
   return (
     <DataTableRemote
-      before={(
-        <DataTableHeading>
-          <span className="ml-auto" />
-          <Link className={buttonVariants({ variant: 'default', className: 'gap-2' })} href="/embedding-models/create">
-            <PlusIcon className="size-4" />
-            New
-          </Link>
-        </DataTableHeading>
-      )}
       columns={columns}
       apiKey="api.embedding-models.list"
       api={listEmbeddingModels}

diff --git a/frontend/app/src/components/form/control-widget.tsx b/frontend/app/src/components/form/control-widget.tsx
@@ -171,25 +171,10 @@ export const FormCombobox = forwardRef<any, FormComboboxProps>(({ config, placeh
             ? <Loader2Icon className="size-4 opacity-50 animate-spin repeat-infinite" />
             : config.error
               ? <TriangleAlertIcon className="size-4 text-destructive opacity-50" />
-              : <ChevronDown className="h-4 w-4 opacity-50" />}
+              : config.clearable !== false && current != null && !disabled
+                ? <FormComboboxClearButton onClick={() => onChange?.(null)} />
+                : <ChevronDown className="h-4 w-4 opacity-50" />}
         </PopoverPrimitive.Trigger>
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              {(config.clearable !== false && current != null && !disabled) && <button
-                className="ml-2 opacity-50 hover:opacity-100"
-                type="button"
-                onClick={(event) => {
-                  onChange?.(null);
-                }}>
-                <XCircleIcon className="size-4" />
-              </button>}
-            </TooltipTrigger>
-            <TooltipContent>
-              Clear select
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
       </div>
       <PopoverContent className={cn('p-0 focus:outline-none', contentWidth === 'anchor' && 'w-[--radix-popover-trigger-width]')} align="start" collisionPadding={8}>
         <Command>
@@ -236,3 +221,20 @@ export const FormCombobox = forwardRef<any, FormComboboxProps>(({ config, placeh
 });
 
 FormCombobox.displayName = 'FormCombobox';
+
+function FormComboboxClearButton ({ onClick }: { onClick?: () => void }) {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="ml-2 opacity-50 hover:opacity-100" type="button" onClick={onClick}>
+            <XCircleIcon className="size-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          Clear select
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/frontend/app/src/components/knowledge-base/knowledge-base-card.tsx b/frontend/app/src/components/knowledge-base/knowledge-base-card.tsx
@@ -1,5 +1,6 @@
 import { deleteKnowledgeBase, type KnowledgeBaseSummary } from '@/api/knowledge-base';
 import { DangerousActionButton } from '@/components/dangerous-action-button';
+import { mutateKnowledgeBases } from '@/components/knowledge-base/hooks';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader } from '@/components/ui/card';
@@ -10,7 +11,6 @@ import { cn } from '@/lib/utils';
 import { AlertTriangleIcon, Book, Ellipsis } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { ReactNode, startTransition, useState } from 'react';
-import { mutate } from 'swr';
 
 export function KnowledgeBaseCard ({ knowledgeBase, children }: { knowledgeBase: KnowledgeBaseSummary, children?: ReactNode }) {
   const router = useRouter();
@@ -31,12 +31,7 @@ export function KnowledgeBaseCard ({ knowledgeBase, children }: { knowledgeBase:
 
   const handleDelete = async () => {
     await deleteKnowledgeBase(knowledgeBase.id);
-    await mutate(key => {
-      if (typeof key === 'string') {
-        return key.startsWith('api.knowledge-bases.list?');
-      }
-      return false;
-    });
+    await mutateKnowledgeBases();
     setDropdownOpen(false);
   };
 
@@ -74,12 +69,12 @@ export function KnowledgeBaseCard ({ knowledgeBase, children }: { knowledgeBase:
                 <Ellipsis className="size-5" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-56" align='end' alignOffset={-9} onClick={event => event.stopPropagation()}>
+            <DropdownMenuContent className="w-56" align="end" alignOffset={-9} onClick={event => event.stopPropagation()}>
               <DropdownMenuItem onSelect={handleMenuItemSettingSelect}>Settings</DropdownMenuItem>
               <DropdownMenuSeparator />
               <DangerousActionButton action={handleDelete} asChild>
                 <DropdownMenuItem
-                  className="text-destructive focus:text-destructive"
+                  className="text-destructive focus:text-destructive focus:bg-destructive/10"
                   onSelect={event => event.preventDefault()}
                 >
                   Delete

diff --git a/frontend/app/src/components/llm/LLMsTable.tsx b/frontend/app/src/components/llm/LLMsTable.tsx
@@ -1,27 +1,15 @@
 'use client';
 
 import { listLlms, type LLM } from '@/api/llms';
-import { DataTableHeading } from '@/components/data-table-heading';
 import { DataTableRemote } from '@/components/data-table-remote';
 import { Badge } from '@/components/ui/badge';
-import { buttonVariants } from '@/components/ui/button';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { PlusIcon } from 'lucide-react';
 import Link from 'next/link';
 
 export function LLMsTable () {
   return (
     <DataTableRemote
-      before={(
-        <DataTableHeading>
-          <span className="ml-auto" />
-          <Link className={buttonVariants({ variant: 'default', className: 'gap-2' })} href="/llms/create">
-            <PlusIcon className="size-4" />
-            New
-          </Link>
-        </DataTableHeading>
-      )}
       columns={columns}
       apiKey="api.llms.list"
       api={listLlms}

diff --git a/frontend/app/src/components/reranker/RerankerModelsTable.tsx b/frontend/app/src/components/reranker/RerankerModelsTable.tsx
@@ -1,27 +1,15 @@
 'use client';
 
 import { listRerankers, type Reranker } from '@/api/rerankers';
-import { DataTableHeading } from '@/components/data-table-heading';
 import { DataTableRemote } from '@/components/data-table-remote';
 import { Badge } from '@/components/ui/badge';
-import { buttonVariants } from '@/components/ui/button';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/table-core';
-import { PlusIcon } from 'lucide-react';
 import Link from 'next/link';
 
 export default function RerankerModelsTable () {
   return (
     <DataTableRemote
-      before={(
-        <DataTableHeading>
-          <span className="ml-auto" />
-          <Link className={buttonVariants({ variant: 'default', className: 'gap-2' })} href="/reranker-models/create">
-            <PlusIcon className="size-4" />
-            New
-          </Link>
-        </DataTableHeading>
-      )}
       columns={columns}
       apiKey="api.rerankers.list"
       api={listRerankers}

diff --git a/frontend/app/src/components/secondary-navigator-list.tsx b/frontend/app/src/components/secondary-navigator-list.tsx
@@ -87,6 +87,7 @@ export const SecondaryNavigatorMain = forwardRef<HTMLDivElement, Omit<TabsPrimit
         value={value}
         forceMount={strategy !== 'mount' ? true : undefined}
         className={cn(classNames, strategy === 'hidden' && 'hidden data-[state=active]:block')}
+        tabIndex={undefined}
         {...props}
       />
     );