Worflow UI #45
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,216 @@ | ||||||
| import { | ||||||
| Sidebar, | ||||||
| SidebarContent, | ||||||
| SidebarFooter, | ||||||
| SidebarHeader, | ||||||
| SidebarMenu, | ||||||
| SidebarMenuButton, | ||||||
| SidebarMenuItem, | ||||||
| SidebarMenuSub, | ||||||
| SidebarMenuSubItem, | ||||||
| SidebarMenuSubButton, | ||||||
| SidebarTrigger, | ||||||
| } from '@workspace/ui/components/sidebar' | ||||||
|
|
||||||
| import { | ||||||
| Collapsible, | ||||||
| CollapsibleContent, | ||||||
| CollapsibleTrigger, | ||||||
| } from '@workspace/ui/components/collapsible' | ||||||
|
|
||||||
| import { | ||||||
| DropdownMenu, | ||||||
| DropdownMenuContent, | ||||||
| DropdownMenuItem, | ||||||
| DropdownMenuTrigger | ||||||
| } from '@workspace/ui/components/dropdown-menu' | ||||||
| import { ChevronDown, ChevronUp, Key, LogOut, LucideLayoutDashboard, PlusCircle, User2, WorkflowIcon } from 'lucide-react' | ||||||
| import { useEffect, useState } from 'react' | ||||||
| import { createWorkflow, getAllCredentials, getAllWorkflows, getEmptyWorkflow } from '@/app/workflow/lib/config' | ||||||
| import { useAppDispatch, useAppSelector } from '@/app/hooks/redux' | ||||||
| import { userAction } from '@/store/slices/userSlice' | ||||||
| import { workflowActions } from '@/store/slices/workflowSlice' | ||||||
| import { toast } from 'sonner' | ||||||
| import { signOut } from 'next-auth/react' | ||||||
| import { useRouter } from 'next/navigation' | ||||||
|
|
||||||
| export function AppSidebar() { | ||||||
|
|
||||||
| const user = useAppSelector((s)=> s.user) | ||||||
| const flow = useAppSelector(s=>s.workflow) // workflow | ||||||
| const dispatch = useAppDispatch() | ||||||
| const router = useRouter() | ||||||
| const [selectedWorkflow, setSelectedWorkflow] = useState<string | null >(flow.workflow_id) | ||||||
| const [workflow, setWorkflow] = useState<Array<any>>() | ||||||
| const [creds, setCreds] = useState<Array<any>>() | ||||||
| useEffect(()=>{ | ||||||
| async function getWorkflows(){ | ||||||
| const flows = await getAllWorkflows(); | ||||||
| if(flows) setWorkflow(flows) | ||||||
| } | ||||||
|
|
||||||
| async function getCreds(){ | ||||||
| const credentials = await getAllCredentials(); | ||||||
| if(credentials) setCreds(credentials) | ||||||
| } | ||||||
|
|
||||||
| if(!creds) getCreds() | ||||||
| if(!workflow) getWorkflows() | ||||||
| },[selectedWorkflow]) | ||||||
|
|
||||||
| const workflowHandler = (wId: string)=>{ | ||||||
| dispatch(workflowActions.setWorkflowId(wId)) | ||||||
| } | ||||||
| const credHandler = (cId: string)=> { | ||||||
| // console.log(cId); | ||||||
|
|
||||||
| } | ||||||
| const logout = async()=>{ | ||||||
| toast.info("Logging out...") | ||||||
| await signOut({redirect: false}) | ||||||
| dispatch(userAction.clearUser()) | ||||||
| dispatch(workflowActions.clearWorkflow()) | ||||||
| router.push('/login') | ||||||
| } | ||||||
|
|
||||||
| const createNewWorkflow = async()=>{ | ||||||
| const workflow = await getEmptyWorkflow() | ||||||
|
|
||||||
| if(workflow){ | ||||||
| const {id, isEmpty} = workflow | ||||||
| dispatch(workflowActions.setWorkflowId(id)) | ||||||
| dispatch(workflowActions.setWorkflowStatus(isEmpty)) | ||||||
| toast.info("You are in empty workflow") | ||||||
| } | ||||||
| else{ | ||||||
| const newWorkflow = await createWorkflow() | ||||||
| dispatch(workflowActions.clearWorkflow()) | ||||||
| setSelectedWorkflow(null) | ||||||
| dispatch(workflowActions.setWorkflowId(newWorkflow.id)) | ||||||
| dispatch(workflowActions.setWorkflowStatus(newWorkflow.isEmpty)) | ||||||
| toast.success("Workflow created") | ||||||
| } | ||||||
| } | ||||||
| // console.log(`workflow form ${workflow}`) | ||||||
| return ( | ||||||
| <Sidebar collapsible='icon'> | ||||||
| <SidebarHeader className='flex items-center justify-between p-4'> | ||||||
| <span className='text-2xl font-bold'>Logo</span> | ||||||
| <SidebarTrigger /> | ||||||
| </SidebarHeader> | ||||||
|
|
||||||
| <SidebarContent> | ||||||
| <SidebarMenu> | ||||||
|
|
||||||
| <SidebarMenuItem> | ||||||
| <SidebarMenuButton className='text-xl font-bold text-white h-14' onClick={createNewWorkflow}> | ||||||
| <PlusCircle className='m-2'/> Create Workflow | ||||||
| </SidebarMenuButton> | ||||||
| </SidebarMenuItem> | ||||||
|
|
||||||
| {/* WORKFLOWS LIST */} | ||||||
| <Collapsible defaultOpen className="group/collapsible"> | ||||||
| <SidebarMenuItem> | ||||||
| <CollapsibleTrigger asChild> | ||||||
| <SidebarMenuButton> | ||||||
| <WorkflowIcon className='m-2'/> | ||||||
| <span>Workflows</span> | ||||||
| <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" /> | ||||||
| </SidebarMenuButton> | ||||||
| </CollapsibleTrigger> | ||||||
| <CollapsibleContent> | ||||||
| <SidebarMenuSub className="max-h-64 overflow-y-auto cursor-pointer"> | ||||||
| {workflow ? (workflow.length === 0 ? ( | ||||||
| <SidebarMenuSubItem key={0}> | ||||||
| <SidebarMenuSubButton> | ||||||
| <span>Create Workflow</span> | ||||||
| </SidebarMenuSubButton> | ||||||
| </SidebarMenuSubItem> | ||||||
| ) : (workflow.map((i:any) => ( | ||||||
| <SidebarMenuSubItem onClick={()=>workflowHandler(i.id)} key={i.id}> | ||||||
| <SidebarMenuSubButton isActive={flow.workflow_id === i.id}> | ||||||
| <span>{i.name}</span> | ||||||
| </SidebarMenuSubButton> | ||||||
| </SidebarMenuSubItem>) | ||||||
| ))) : (<span>Loading...</span> | ||||||
| ) | ||||||
| } | ||||||
| </SidebarMenuSub> | ||||||
| </CollapsibleContent> | ||||||
| </SidebarMenuItem> | ||||||
| </Collapsible> | ||||||
| {/* CREDENTIALS LIST */} | ||||||
| <Collapsible className="group/collapsible"> | ||||||
| <SidebarMenuItem> | ||||||
| <CollapsibleTrigger asChild> | ||||||
| <SidebarMenuButton> | ||||||
| <Key className='m-2'/> | ||||||
| <span>Credentials</span> | ||||||
| <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" /> | ||||||
| </SidebarMenuButton> | ||||||
| </CollapsibleTrigger> | ||||||
| <CollapsibleContent> | ||||||
| <SidebarMenuSub className="max-h-32 overflow-y-auto cursor-pointer"> | ||||||
| {creds ? (creds.length === 0 ? | ||||||
| (<SidebarMenuSubItem key={0}> | ||||||
| <SidebarMenuSubButton> | ||||||
| <span>No credentials avaliable</span> | ||||||
|
There was a problem hiding this comment. Typo in user-facing text. "avaliable" should be "available". - <span>No credentials avaliable</span>
+ <span>No credentials available</span>📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| </SidebarMenuSubButton> | ||||||
| </SidebarMenuSubItem> | ||||||
| ) : creds.map((i:any) => ( | ||||||
| <SidebarMenuSubItem key={i.id}> | ||||||
| <SidebarMenuSubButton> | ||||||
| <span>credential - {i.type}</span> | ||||||
| </SidebarMenuSubButton> | ||||||
| </SidebarMenuSubItem> | ||||||
| ))) : ( | ||||||
| <SidebarMenuSubItem key={0}> | ||||||
| <SidebarMenuSubButton> | ||||||
| <span>Loading...</span> | ||||||
| </SidebarMenuSubButton> | ||||||
| </SidebarMenuSubItem> | ||||||
| ) | ||||||
| } | ||||||
| </SidebarMenuSub> | ||||||
| </CollapsibleContent> | ||||||
| </SidebarMenuItem> | ||||||
| </Collapsible> | ||||||
| </SidebarMenu> | ||||||
| </SidebarContent> | ||||||
|
|
||||||
| <SidebarFooter> | ||||||
| <SidebarMenu> | ||||||
| <SidebarMenuItem> | ||||||
| <DropdownMenu> | ||||||
| <DropdownMenuTrigger asChild> | ||||||
| <SidebarMenuButton className='h-auto'> | ||||||
| <User2 /> | ||||||
| <div className='flex flex-col'> | ||||||
| <p className='font-bold'>{user.name}</p> | ||||||
| <p className='font-light'> | ||||||
| {user.email} | ||||||
| </p> | ||||||
| </div> | ||||||
| <ChevronUp className="ml-auto" /> | ||||||
| </SidebarMenuButton> | ||||||
| </DropdownMenuTrigger> | ||||||
| <DropdownMenuContent | ||||||
| side="top" | ||||||
| className="w-[--radix-popper-anchor-width] flex gap-1 justify-between" | ||||||
| > | ||||||
| <DropdownMenuItem> | ||||||
| <span >Dashboard</span> | ||||||
| <LucideLayoutDashboard className='text-white'/> | ||||||
| </DropdownMenuItem> | ||||||
| <DropdownMenuItem onClick={logout} className='bg-red-600 hover:bg-red-400'> | ||||||
| <span>Sign out</span> | ||||||
| <LogOut className='text-white'/> | ||||||
| </DropdownMenuItem> | ||||||
| </DropdownMenuContent> | ||||||
| </DropdownMenu> | ||||||
| </SidebarMenuItem> | ||||||
| </SidebarMenu> | ||||||
| </SidebarFooter> | ||||||
| </Sidebar> | ||||||
| ) | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -1,15 +1,27 @@ | ||||||
| "use client"; | ||||||
|
|
||||||
| import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar"; | ||||||
|
There was a problem hiding this comment. Remove unused import.
🔎 Proposed fix-import { SidebarProvider, SidebarTrigger } from "@workspace/ui/components/sidebar";
+import { SidebarProvider } from "@workspace/ui/components/sidebar";📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| import CreateWorkFlow from "../components/nodes/CreateWorkFlow"; | ||||||
| import { AppSidebar } from "../components/ui/app-sidebar"; | ||||||
| // import WorkFlow from "../components/nodes/WorkFlow"; | ||||||
| // import CreateWorkFlow from "../components/workflow"; | ||||||
|
|
||||||
| export default function Workf() { | ||||||
|
|
||||||
| return ( | ||||||
| <> | ||||||
| <div className="flex w-screen h-screen bg-white"> | ||||||
| <div className=" w-auto h-full text-black"> | ||||||
| <SidebarProvider> | ||||||
| <AppSidebar /> | ||||||
|
|
||||||
| {/* {children} */} | ||||||
| </SidebarProvider> | ||||||
| </div> | ||||||
| <div className=" flex -col h-[95vh] w-full fitems-center justify-center bg-[#0f0f1a]"> | ||||||
|
There was a problem hiding this comment. Fix CSS class typos. The className string contains two typos:
🔎 Proposed fix- <div className=" flex -col h-[95vh] w-full fitems-center justify-center bg-[#0f0f1a]">
+ <div className="flex flex-col h-[95vh] w-full items-center justify-center bg-[#0f0f1a]">📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| <CreateWorkFlow/> | ||||||
| </div> | ||||||
| </div> | ||||||
| </> | ||||||
| ); | ||||||
| } | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add error handling for workflow update.
The workflow update operation at lines 401-406 lacks error handling. If this update fails after the trigger has been successfully created, it would leave the system in an inconsistent state where:
isEmptyflag remainstrue(incorrect)This could lead to unexpected behavior in the UI or other parts of the system that rely on the
isEmptyflag.🔎 Proposed fix
📝 Committable suggestion
🤖 Prompt for AI Agents