From c4ed7309dd1e934bd6d37c40702874f20aa85ac8 Mon Sep 17 00:00:00 2001 From: Daryl Lim <5508348+daryllimyt@users.noreply.github.com> Date: Tue, 24 Dec 2024 08:19:52 +0000 Subject: [PATCH 1/2] feat+fix(ui): Add color dots in dropdown and graceful defaults for tags (#661) --- .../components/dashboard/dashboard-table.tsx | 175 ++++++++++-------- .../dashboard/workflow-tags-sidebar.tsx | 14 +- 2 files changed, 104 insertions(+), 85 deletions(-) diff --git a/frontend/src/components/dashboard/dashboard-table.tsx b/frontend/src/components/dashboard/dashboard-table.tsx index 526bd85fe..7540253e6 100644 --- a/frontend/src/components/dashboard/dashboard-table.tsx +++ b/frontend/src/components/dashboard/dashboard-table.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react" import { useRouter, useSearchParams } from "next/navigation" -import { WorkflowMetadataResponse } from "@/client" +import { TagRead, WorkflowMetadataResponse } from "@/client" import { useWorkspace } from "@/providers/workspace" import { DotsHorizontalIcon } from "@radix-ui/react-icons" import { Row } from "@tanstack/react-table" @@ -155,19 +155,7 @@ export function WorkflowsDashboardTable() { ?.length ? ( row .getValue("tags") - ?.map((tag) => ( - - {tag.name} - - )) + ?.map((tag) => ) ) : ( - )} @@ -222,72 +210,89 @@ export function WorkflowsDashboardTable() { > Copy Workflow ID - - e.stopPropagation()} - > - Tags - - - - {tags?.map((tag) => { - const hasTag = row.original.tags?.some( - (t) => t.id === tag.id - ) - return ( - { - e.stopPropagation() - try { - if (hasTag) { - // Delete tag if already exists - await removeWorkflowTag({ - workflowId: row.original.id, - workspaceId, - tagId: tag.id, - }) - toast({ - title: "Tag removed", - description: `Successfully removed tag "${tag.name}" from workflow`, - }) - } else { - // Add tag if doesn't exist - await addWorkflowTag({ - workflowId: row.original.id, - workspaceId, - requestBody: { - tag_id: tag.id, - }, - }) + {tags && tags.length > 0 ? ( + + e.stopPropagation()} + > + Tags + + + + {/* No tags */} + + {tags.map((tag) => { + const hasTag = row.original.tags?.some( + (t) => t.id === tag.id + ) + return ( + { + e.stopPropagation() + try { + if (hasTag) { + // Delete tag if already exists + await removeWorkflowTag({ + workflowId: row.original.id, + workspaceId, + tagId: tag.id, + }) + toast({ + title: "Tag removed", + description: `Successfully removed tag "${tag.name}" from workflow`, + }) + } else { + // Add tag if doesn't exist + await addWorkflowTag({ + workflowId: row.original.id, + workspaceId, + requestBody: { + tag_id: tag.id, + }, + }) + toast({ + title: "Tag added", + description: `Successfully added tag "${tag.name}" to workflow`, + }) + } + } catch (error) { + console.error( + "Failed to modify tag:", + error + ) toast({ - title: "Tag added", - description: `Successfully added tag "${tag.name}" to workflow`, + title: "Error", + description: `Failed to ${hasTag ? "remove" : "add"} tag ${hasTag ? "from" : "to"} workflow`, + variant: "destructive", }) } - } catch (error) { - console.error( - "Failed to modify tag:", - error - ) - toast({ - title: "Error", - description: `Failed to ${hasTag ? "remove" : "add"} tag ${hasTag ? "from" : "to"} workflow`, - variant: "destructive", - }) - } - }} - > - {tag.name} - - ) - })} - - - + }} + > +
+ {tag.name} + + ) + })} + + + + ) : ( + e.stopPropagation()} + > + No tags available + + )} { @@ -367,3 +372,19 @@ const defaultToolbarProps: DataTableToolbarProps = { column: "title", }, } + +export function TagBadge({ tag }: { tag: TagRead }) { + return ( + + {tag.name} + + ) +} diff --git a/frontend/src/components/dashboard/workflow-tags-sidebar.tsx b/frontend/src/components/dashboard/workflow-tags-sidebar.tsx index 93d3c68be..e8a26b493 100644 --- a/frontend/src/components/dashboard/workflow-tags-sidebar.tsx +++ b/frontend/src/components/dashboard/workflow-tags-sidebar.tsx @@ -5,13 +5,7 @@ import { useRouter } from "next/navigation" import { TagCreate, TagRead, TagUpdate } from "@/client" import { useWorkspace } from "@/providers/workspace" import { zodResolver } from "@hookform/resolvers/zod" -import { - EllipsisIcon, - PencilIcon, - Plus, - Tag, - Trash2Icon, -} from "lucide-react" +import { EllipsisIcon, PencilIcon, Plus, Tag, Trash2Icon } from "lucide-react" import { useForm } from "react-hook-form" import z from "zod" @@ -73,11 +67,15 @@ const createTagSchema = z.object({ export function WorkflowTagsSidebar({ workspaceId }: { workspaceId: string }) { const router = useRouter() - const { tags, createTag, tagsIsLoading, deleteTag } = useTags(workspaceId) + const { tags, createTag, tagsIsLoading } = useTags(workspaceId) const [showTagDialog, setShowTagDialog] = useState(false) const methods = useForm({ resolver: zodResolver(createTagSchema), + defaultValues: { + name: "", + color: "#aabbcc", + }, }) const handleCreateTag = async (params: TagCreate) => { From b4e678771f71633519af3dca7276979d94a6e67b Mon Sep 17 00:00:00 2001 From: Daryl Lim <5508348+daryllimyt@users.noreply.github.com> Date: Tue, 24 Dec 2024 16:20:38 +0800 Subject: [PATCH 2/2] build: Add pnpm typecheck to just lint --- justfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/justfile b/justfile index 489af2b6a..026291445 100644 --- a/justfile +++ b/justfile @@ -22,7 +22,7 @@ build: docker compose build --no-cache lint-ui: - cd frontend && pnpm lint:fix && cd .. + cd frontend && pnpm lint:fix && pnpm typecheck && cd .. lint-app: ruff check .