diff --git a/packages/ui/src/features/canvas/components/ChannelsList.tsx b/packages/ui/src/features/canvas/components/ChannelsList.tsx index 8839bbe36..19dde93f1 100644 --- a/packages/ui/src/features/canvas/components/ChannelsList.tsx +++ b/packages/ui/src/features/canvas/components/ChannelsList.tsx @@ -56,13 +56,16 @@ import { useChannelTaskMutations, useChannelTasks, } from "@posthog/ui/features/canvas/hooks/useChannelTasks"; -import { useDashboards } from "@posthog/ui/features/canvas/hooks/useDashboards"; +import { + useDashboardMutations, + useDashboards, +} from "@posthog/ui/features/canvas/hooks/useDashboards"; import { TaskIcon } from "@posthog/ui/features/sidebar/components/items/TaskIcon"; import { useTaskPrStatus } from "@posthog/ui/features/sidebar/useTaskPrStatus"; import { useTasks } from "@posthog/ui/features/tasks/useTasks"; import { useWorkspace } from "@posthog/ui/features/workspace/useWorkspace"; import { toast } from "@posthog/ui/primitives/toast"; -import { Box, Flex, Text, Tooltip } from "@radix-ui/themes"; +import { AlertDialog, Box, Flex, Text, Tooltip } from "@radix-ui/themes"; import { useNavigate, useRouterState } from "@tanstack/react-router"; import { type ReactNode, useEffect, useState } from "react"; import { hostClient } from "../hostClient"; @@ -248,7 +251,8 @@ function ChildRow({ ); } -// A single saved canvas under a channel — navigates to its detail view. +// A single saved canvas under a channel — navigates to its detail view, with a +// right-click menu to delete it. function DashboardRow({ channelId, dashboard, @@ -259,19 +263,92 @@ function DashboardRow({ active: boolean; }) { const navigate = useNavigate(); - return ( - - navigate({ - to: "/website/$channelId/dashboards/$dashboardId", - params: { channelId, dashboardId: dashboard.id }, - }) + const pathname = useRouterState({ select: (s) => s.location.pathname }); + const { deleteDashboard, isDeleting } = useDashboardMutations(); + const [confirmOpen, setConfirmOpen] = useState(false); + + const onDelete = async () => { + try { + await deleteDashboard(dashboard.id); + // Deleting destroys the canvas, including any child routes under it, so + // match the whole subtree (mirrors ChannelMenu.onDelete). + if ( + pathname.startsWith(`/website/${channelId}/dashboards/${dashboard.id}`) + ) { + void navigate({ + to: "/website/$channelId", + params: { channelId }, + }); } - /> + } catch (error) { + toast.error("Couldn't delete canvas", { + description: error instanceof Error ? error.message : String(error), + }); + } + }; + + return ( + <> + + + + + navigate({ + to: "/website/$channelId/dashboards/$dashboardId", + params: { channelId, dashboardId: dashboard.id }, + }) + } + /> + + } + /> + + + setConfirmOpen(true)} + > + + Delete + + + + + + + Delete canvas + + "{dashboard.name}" will be permanently deleted. This can't be + undone. + + + + + + + + + + + + ); }