feat(ui): Add static nav and flow toggle

TracecatHQ · Mar 5, 2024 · c429f3f · c429f3f
1 parent 85bb126
commit c429f3f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,12 +1,19 @@
 import { cookies } from "next/headers"
 
+import { DefaultQueryClientProvider } from "@/providers/query"
+import { Label } from "@/components/ui/label"
 import { Metadata } from "next"
-import { Search } from "@/components/search"
+import { SelectedWorkflowProvider } from "@/providers/selected-workflow"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { UserNav } from "@/components/user-nav"
 import { Workspace } from "@/components/workspace"
 import WorkflowSwitcher from "@/components/workflow-switcher"
-import { UserNav } from "@/components/user-nav"
-import { DefaultQueryClientProvider } from "@/providers/query"
-import { SelectedWorkflowProvider } from "@/providers/selected-workflow"
+
+import {
+  WorkflowIcon,
+  BellRingIcon,
+} from "lucide-react"
 
 export const metadata: Metadata = {
   title: "Workflows | Tracecat",
@@ -37,9 +44,26 @@ export default function DashboardPage() {
         <div className="flex flex-col h-screen">
           <div className="border-b">
             <div className="flex h-16 items-center px-4">
-              <WorkflowSwitcher />
-              <div className="ml-auto flex items-center space-x-4">
-                <Search />
+              <div className="flex space-x-8">
+                <WorkflowSwitcher />
+                <Tabs defaultValue="workspace-view">
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="workflow">
+                      <WorkflowIcon className="h-4 w-4 mr-2" />
+                      Workflow
+                    </TabsTrigger>
+                    <TabsTrigger value="cases">
+                      <BellRingIcon className="h-4 w-4 mr-2" />
+                      Cases
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
+              </div>
+              <div className="ml-auto flex items-center space-x-8">
+                <div className="flex items-center space-x-2">
+                  <Switch id="airplane-mode" />
+                  <Label htmlFor="airplane-mode">Enable workflow</Label>
+                </div>
                 <UserNav />
               </div>
             </div>

diff --git a/frontend/src/components/workflow-switcher.tsx b/frontend/src/components/workflow-switcher.tsx
@@ -13,7 +13,6 @@ import {
 import { cn } from "@/lib/utils"
 import {
   Avatar,
-  AvatarFallback,
   AvatarImage,
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
@@ -94,7 +93,7 @@ export default function WorkflowSwitcher({ className }: WorkflowSwitcherProps) {
   });
 
   // Automatically select the first workflow as the default selected workflow if not already selected
-  const { selectedWorkflowMetadata, setSelectedWorkflowMetadata } = useSelectedWorkflowMetadata();
+  const { setSelectedWorkflowMetadata } = useSelectedWorkflowMetadata();
 
   useEffect(() => {
     if (!selectedWorkflow && workflows && workflows.length > 0) {
@@ -122,13 +121,6 @@ export default function WorkflowSwitcher({ className }: WorkflowSwitcherProps) {
             aria-label="Select a team"
             className={cn("w-96 justify-between", className)}
           >
-            <Avatar className="mr-2 h-5 w-5">
-              <AvatarImage
-                src={`https://avatar.vercel.sh/${selectedWorkflow?.id}.png`}
-                alt={selectedWorkflow?.title ?? ""}
-                className="grayscale"
-              />
-            </Avatar>
             {selectedWorkflow?.title ?? ""}
             <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
           </Button>
@@ -145,8 +137,9 @@ export default function WorkflowSwitcher({ className }: WorkflowSwitcherProps) {
                         setSelectedWorkflow(workflow)
                         setOpen(false)
                       }}
-                      className="text-sm"
+                      className="text-xs"
                     >
+                      {/* TODO: Replace with CircleIcon and green / grey / red (error) / yellow (warning) */}
                       <Avatar className="mr-2 h-5 w-5">
                         <AvatarImage
                           src={`https://avatar.vercel.sh/${workflow.id}.png`}
@@ -157,7 +150,7 @@ export default function WorkflowSwitcher({ className }: WorkflowSwitcherProps) {
                       {workflow.title}
                       <CheckIcon
                         className={cn(
-                          "ml-auto h-4 w-4",
+                          "ml-auto h-4 w-4 text-xs",
                           selectedWorkflow && selectedWorkflow.id === workflow.id
                             ? "opacity-100"
                             : "opacity-0"
@@ -173,6 +166,7 @@ export default function WorkflowSwitcher({ className }: WorkflowSwitcherProps) {
               <CommandGroup>
                 <DialogTrigger asChild>
                   <CommandItem
+                    className="text-xs"
                     onSelect={() => {
                       setOpen(false)
                       setShowNewWorkflowDialog(true)