Adds a delete button to the action edit dialog with a confirmation alert. Fixes pingdotgg/t3code#208.
Showing the changes to apps/web/src/components/ProjectScriptsControl.tsx (1 of 2 files). Show all
Unified · Split
| @@ -14,7 +14,7 @@ import { · 13 unmodified lines | ||
| 14 | 14 | SettingsIcon, |
| 15 | 15 | WrenchIcon, |
| 16 | 16 | } from "lucide-react"; |
| 17 | −import React, { type FormEvent, type KeyboardEvent, useMemo, useState } from "react"; | |
| 17 | +import React, { type FormEvent, type KeyboardEvent, useCallback, useMemo, useState } from "react"; | |
| 18 | 18 | |
| 19 | 19 | import { |
| 20 | 20 | keybindingValueForCommand, |
| @@ -27,6 +27,15 @@ import { · 6 unmodified lines | ||
| 27 | 27 | } from "~/projectScripts"; |
| 28 | 28 | import { shortcutLabelForCommand } from "~/keybindings"; |
| 29 | 29 | import { isMacPlatform } from "~/lib/utils"; |
| 30 | +import { | |
| 31 | + AlertDialog, | |
| 32 | + AlertDialogClose, | |
| 33 | + AlertDialogDescription, | |
| 34 | + AlertDialogFooter, | |
| 35 | + AlertDialogHeader, | |
| 36 | + AlertDialogPopup, | |
| 37 | + AlertDialogTitle, | |
| 38 | +} from "./ui/alert-dialog"; | |
| 30 | 39 | import { Button } from "./ui/button"; |
| 31 | 40 | import { |
| 32 | 41 | Dialog, |
| @@ -84,6 +93,7 @@ interface ProjectScriptsControlProps { · 51 unmodified lines | ||
| 84 | 93 | onRunScript: (script: ProjectScript) => void; |
| 85 | 94 | onAddScript: (input: NewProjectScriptInput) => Promise<void> | void; |
| 86 | 95 | onUpdateScript: (scriptId: string, input: NewProjectScriptInput) => Promise<void> | void; |
| 96 | + onDeleteScript: (scriptId: string) => Promise<void> | void; | |
| 87 | 97 | } |
| 88 | 98 | |
| 89 | 99 | function normalizeShortcutKeyToken(key: string): string | null { |
| @@ -144,6 +154,7 @@ export default function ProjectScriptsControl({ · 54 unmodified lines | ||
| 144 | 154 | onRunScript, |
| 145 | 155 | onAddScript, |
| 146 | 156 | onUpdateScript, |
| 157 | + onDeleteScript, | |
| 147 | 158 | }: ProjectScriptsControlProps) { |
| 148 | 159 | const addScriptFormId = React.useId(); |
| 149 | 160 | const [editingScriptId, setEditingScriptId] = useState<string | null>(null); |
| @@ -155,6 +166,7 @@ export default function ProjectScriptsControl({ · 5 unmodified lines | ||
| 155 | 166 | const [runOnWorktreeCreate, setRunOnWorktreeCreate] = useState(false); |
| 156 | 167 | const [keybinding, setKeybinding] = useState(""); |
| 157 | 168 | const [validationError, setValidationError] = useState<string | null>(null); |
| 169 | + const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false); | |
| 158 | 170 | |
| 159 | 171 | const primaryScript = useMemo(() => { |
| 160 | 172 | if (preferredScriptId) { |
| @@ -247,6 +259,13 @@ export default function ProjectScriptsControl({ · 86 unmodified lines | ||
| 247 | 259 | setDialogOpen(true); |
| 248 | 260 | }; |
| 249 | 261 | |
| 262 | + const confirmDeleteScript = useCallback(() => { | |
| 263 | + if (!editingScriptId) return; | |
| 264 | + setDeleteConfirmOpen(false); | |
| 265 | + setDialogOpen(false); | |
| 266 | + void onDeleteScript(editingScriptId); | |
| 267 | + }, [editingScriptId, onDeleteScript]); | |
| 268 | + | |
| 250 | 269 | return ( |
| 251 | 270 | <> |
| 252 | 271 | {primaryScript ? ( |
| @@ -440,6 +459,16 @@ export default function ProjectScriptsControl({ · 187 unmodified lines | ||
| 440 | 459 | </form> |
| 441 | 460 | </DialogPanel> |
| 442 | 461 | <DialogFooter> |
| 462 | + {isEditing && ( | |
| 463 | + <Button | |
| 464 | + type="button" | |
| 465 | + variant="destructive-outline" | |
| 466 | + className="mr-auto" | |
| 467 | + onClick={() => setDeleteConfirmOpen(true)} | |
| 468 | + > | |
| 469 | + Delete | |
| 470 | + </Button> | |
| 471 | + )} | |
| 443 | 472 | <Button |
| 444 | 473 | type="button" |
| 445 | 474 | variant="outline" |
| @@ -455,6 +484,21 @@ export default function ProjectScriptsControl({ · 9 unmodified lines | ||
| 455 | 484 | </DialogFooter> |
| 456 | 485 | </DialogPopup> |
| 457 | 486 | </Dialog> |
| 487 | + | |
| 488 | + <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}> | |
| 489 | + <AlertDialogPopup> | |
| 490 | + <AlertDialogHeader> | |
| 491 | + <AlertDialogTitle>Delete action "{name}"?</AlertDialogTitle> | |
| 492 | + <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription> | |
| 493 | + </AlertDialogHeader> | |
| 494 | + <AlertDialogFooter> | |
| 495 | + <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose> | |
| 496 | + <Button variant="destructive" onClick={confirmDeleteScript}> | |
| 497 | + Delete action | |
| 498 | + </Button> | |
| 499 | + </AlertDialogFooter> | |
| 500 | + </AlertDialogPopup> | |
| 501 | + </AlertDialog> | |
| 458 | 502 | </> |
| 459 | 503 | ); |
| 460 | 504 | } |