the universal sandbox runtime for agents and humans.
pocketenv.io
sandbox
openclaw
agent
claude-code
vercel-sandbox
deno-sandbox
cloudflare-sandbox
atproto
sprites
daytona
Add ConfirmDelete modal and edit mode support
Add ConfirmDelete component and index export. Update
AddFile/AddSecret/AddVariable/AddVolume
modals to accept optional id props and toggle between Add/Edit. Enforce
UPPER_SNAKE_CASE for
secret/variable names and auto-transform input. Wire confirm-delete
modal into Files, Secrets,
Variables and Volumes pages (state + placeholder handler). Minor
UI/class cleanup and copy tweak.
+334
-45
+119
apps/web/src/components/confirmdelete/ConfirmDelete.tsx
+119
apps/web/src/components/confirmdelete/ConfirmDelete.tsx
···
1
+
import { useEffect, useState } from "react";
2
+
import { createPortal } from "react-dom";
3
+
4
+
export type ConfirmDeleteModalProps = {
5
+
isOpen: boolean;
6
+
onClose: () => void;
7
+
onConfirm: () => Promise<void>;
8
+
subject: string;
9
+
title?: string;
10
+
};
11
+
12
+
function ConfirmDeleteModal({
13
+
isOpen,
14
+
onClose,
15
+
onConfirm,
16
+
subject,
17
+
title,
18
+
}: ConfirmDeleteModalProps) {
19
+
const [isLoading, setIsLoading] = useState(false);
20
+
useEffect(() => {
21
+
const handleEscapeKey = (event: KeyboardEvent) => {
22
+
if (event.key === "Escape" && isOpen) {
23
+
onClose();
24
+
}
25
+
};
26
+
27
+
document.addEventListener("keydown", handleEscapeKey);
28
+
return () => {
29
+
document.removeEventListener("keydown", handleEscapeKey);
30
+
};
31
+
}, [isOpen, onClose]);
32
+
33
+
const onDelete = async (e: React.MouseEvent<HTMLButtonElement>) => {
34
+
setIsLoading(true);
35
+
await onConfirm();
36
+
setIsLoading(false);
37
+
e.stopPropagation();
38
+
onClose();
39
+
};
40
+
41
+
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
42
+
e.stopPropagation();
43
+
if (e.target === e.currentTarget) {
44
+
onClose();
45
+
}
46
+
};
47
+
48
+
const handleContentClick = (e: React.MouseEvent<HTMLDivElement>) => {
49
+
e.stopPropagation();
50
+
};
51
+
52
+
const handleCloseButton = (e: React.MouseEvent<HTMLButtonElement>) => {
53
+
e.stopPropagation();
54
+
onClose();
55
+
};
56
+
57
+
if (!isOpen) return null;
58
+
59
+
return createPortal(
60
+
<>
61
+
<div
62
+
className="overlay modal modal-middle overlay-open:opacity-100 overlay-open:duration-300 open opened"
63
+
role="dialog"
64
+
style={{ outline: "none", zIndex: 80 }}
65
+
onClick={handleBackdropClick}
66
+
onMouseDown={handleBackdropClick}
67
+
>
68
+
<div
69
+
className={`overlay-animation-target modal-dialog overlay-open:duration-300 transition-all ease-out modal-dialog-md overlay-open:mt-4 mt-12`}
70
+
onClick={handleContentClick}
71
+
onMouseDown={handleContentClick}
72
+
>
73
+
<div className="modal-content">
74
+
<div className="modal-header pb-0">
75
+
<div className="flex-1">Delete {title}</div>
76
+
<button
77
+
type="button"
78
+
className="btn btn-text btn-circle btn-sm absolute end-3 top-3"
79
+
aria-label="Close"
80
+
onClick={handleCloseButton}
81
+
onMouseDown={(e) => e.stopPropagation()}
82
+
>
83
+
<span className="icon-[tabler--x] size-4"></span>
84
+
</button>
85
+
</div>
86
+
<div className="modal-body p-0 pl-2 h-[100px] flex flex-col justify-center">
87
+
<p className="font-semibold text-center">
88
+
Are you sure you want to delete this {subject}?
89
+
</p>
90
+
<p className="text-center ">This action cannot be undone.</p>
91
+
</div>
92
+
<div className="modal-footer">
93
+
<button
94
+
className="btn btn-error font-semibold"
95
+
onClick={onDelete}
96
+
>
97
+
{isLoading && (
98
+
<span className="loading loading-spinner loading-xs mr-1.5"></span>
99
+
)}
100
+
Yes, delete
101
+
</button>
102
+
</div>
103
+
</div>
104
+
</div>
105
+
</div>
106
+
107
+
<div
108
+
data-overlay-backdrop-template=""
109
+
style={{ zIndex: 79 }}
110
+
className="overlay-backdrop transition duration-300 fixed inset-0 bg-base-300/60 overflow-y-auto opacity-75"
111
+
onClick={handleBackdropClick}
112
+
onMouseDown={(e) => e.stopPropagation()}
113
+
></div>
114
+
</>,
115
+
document.body,
116
+
);
117
+
}
118
+
119
+
export default ConfirmDeleteModal;
+2
apps/web/src/components/confirmdelete/index.tsx
+2
apps/web/src/components/confirmdelete/index.tsx
+32
-5
apps/web/src/pages/settings/files/Files.tsx
+32
-5
apps/web/src/pages/settings/files/Files.tsx
···
8
8
import { useFilesQuery } from "../../../hooks/useFile";
9
9
import dayjs from "dayjs";
10
10
import Pagination from "../../../components/pagination";
11
+
import ConfirmDelete from "../../../components/ConfirmDelete";
11
12
12
13
const PAGE_SIZE = 12;
13
14
const SKELETON_ROWS = 8;
···
32
33
);
33
34
34
35
function Files() {
36
+
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
37
+
const [selectedFileId, setSelectedFileId] = useState<string | undefined>(
38
+
undefined,
39
+
);
35
40
const [isOpen, setIsOpen] = useState(false);
36
41
const [currentPage, setCurrentPage] = useState(1);
37
42
const offset = (currentPage - 1) * PAGE_SIZE;
···
53
58
setCurrentPage(page);
54
59
};
55
60
61
+
const handleConfirmDelete = async () => {};
62
+
56
63
return (
57
64
<Main
58
65
sidebar={<Sidebar />}
···
71
78
</button>
72
79
</div>
73
80
<p className="opacity-60 mb-5">
74
-
Files (encrypted) that are automatically injected into the sandbox
75
-
filesystem.
81
+
Files (will be encrypted) that are automatically injected into the
82
+
sandbox filesystem.
76
83
</p>
77
84
<div className="w-full overflow-x-auto">
78
85
<table className="table mb-20">
···
104
111
</td>
105
112
<td className="normal-case text-[14px] text-right">
106
113
<div className="join">
107
-
<button className="btn btn-outline join-item">
114
+
<button
115
+
className="btn btn-outline join-item"
116
+
onClick={() => {
117
+
setSelectedFileId(file.id);
118
+
setIsOpen(true);
119
+
}}
120
+
>
108
121
Edit
109
122
</button>
110
-
<button className="btn btn-outline join-item">
123
+
<button
124
+
className="btn btn-outline join-item"
125
+
onClick={() => setConfirmDeleteOpen(true)}
126
+
>
111
127
Delete
112
128
</button>
113
129
</div>
···
129
145
</div>
130
146
<AddFileModal
131
147
isOpen={isOpen}
132
-
onClose={() => setIsOpen(false)}
148
+
onClose={() => {
149
+
setIsOpen(false);
150
+
setSelectedFileId(undefined);
151
+
}}
133
152
sandboxId={data?.sandbox?.id ?? ""}
153
+
fileId={selectedFileId}
154
+
/>
155
+
<ConfirmDelete
156
+
isOpen={confirmDeleteOpen}
157
+
onClose={() => setConfirmDeleteOpen(false)}
158
+
onConfirm={handleConfirmDelete}
159
+
subject={"file"}
160
+
title={"file?"}
134
161
/>
135
162
</>
136
163
</Main>
+30
-3
apps/web/src/pages/settings/secrets/Secrets.tsx
+30
-3
apps/web/src/pages/settings/secrets/Secrets.tsx
···
8
8
import { useSecretsQuery } from "../../../hooks/useSecret";
9
9
import dayjs from "dayjs";
10
10
import Pagination from "../../../components/pagination";
11
+
import ConfirmDelete from "../../../components/confirmdelete/ConfirmDelete";
11
12
12
13
const PAGE_SIZE = 12;
13
14
const SKELETON_ROWS = 8;
···
32
33
);
33
34
34
35
function Secrets() {
36
+
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
37
+
const [selectedSecretId, setSelectedSecretId] = useState<string | undefined>(
38
+
undefined,
39
+
);
35
40
const [isOpen, setIsOpen] = useState(false);
36
41
const [currentPage, setCurrentPage] = useState(1);
37
42
const offset = (currentPage - 1) * PAGE_SIZE;
···
52
57
const onPageChange = (page: number) => {
53
58
setCurrentPage(page);
54
59
};
60
+
61
+
const handleConfirmDelete = async () => {};
55
62
56
63
return (
57
64
<Main
···
109
116
</td>
110
117
<td className="normal-case text-[14px] text-right">
111
118
<div className="join">
112
-
<button className="btn btn-outline join-item">
119
+
<button
120
+
className="btn btn-outline join-item"
121
+
onClick={() => {
122
+
setSelectedSecretId(secret.id);
123
+
setIsOpen(true);
124
+
}}
125
+
>
113
126
Edit
114
127
</button>
115
-
<button className="btn btn-outline join-item">
128
+
<button
129
+
className="btn btn-outline join-item"
130
+
onClick={() => setConfirmDeleteOpen(true)}
131
+
>
116
132
Delete
117
133
</button>
118
134
</div>
···
134
150
</div>
135
151
<AddSecretModal
136
152
isOpen={isOpen}
137
-
onClose={() => setIsOpen(false)}
153
+
onClose={() => {
154
+
setIsOpen(false);
155
+
setSelectedSecretId(undefined);
156
+
}}
138
157
sandboxId={data?.sandbox?.id ?? ""}
158
+
secretId={selectedSecretId}
159
+
/>
160
+
<ConfirmDelete
161
+
isOpen={confirmDeleteOpen}
162
+
onClose={() => setConfirmDeleteOpen(false)}
163
+
onConfirm={handleConfirmDelete}
164
+
subject={"secret"}
165
+
title={"secret?"}
139
166
/>
140
167
</>
141
168
</Main>
+30
-3
apps/web/src/pages/settings/variables/Variables.tsx
+30
-3
apps/web/src/pages/settings/variables/Variables.tsx
···
8
8
import { useVariablesQuery } from "../../../hooks/useVariable";
9
9
import dayjs from "dayjs";
10
10
import Pagination from "../../../components/pagination";
11
+
import ConfirmDelete from "../../../components/confirmdelete";
11
12
12
13
const PAGE_SIZE = 10;
13
14
const SKELETON_ROWS = 8;
···
34
35
);
35
36
36
37
function Variables() {
38
+
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
39
+
const [selectedVariableId, setSelectedVariableId] = useState<
40
+
string | undefined
41
+
>(undefined);
37
42
const [isOpen, setIsOpen] = useState(false);
38
43
const [currentPage, setCurrentPage] = useState(1);
39
44
const offset = (currentPage - 1) * PAGE_SIZE;
···
56
61
const onPageChange = (page: number) => {
57
62
setCurrentPage(page);
58
63
};
64
+
65
+
const handleConfirmDelete = async () => {};
59
66
60
67
return (
61
68
<Main
···
116
123
</td>
117
124
<td className="normal-case text-[14px] text-right">
118
125
<div className="join">
119
-
<button className="btn btn-outline join-item">
126
+
<button
127
+
className="btn btn-outline join-item"
128
+
onClick={() => {
129
+
setSelectedVariableId(variable.id);
130
+
setIsOpen(true);
131
+
}}
132
+
>
120
133
Edit
121
134
</button>
122
-
<button className="btn btn-outline join-item">
135
+
<button
136
+
className="btn btn-outline join-item"
137
+
onClick={() => setConfirmDeleteOpen(true)}
138
+
>
123
139
Delete
124
140
</button>
125
141
</div>
···
141
157
</div>
142
158
<AddVariableModal
143
159
isOpen={isOpen}
144
-
onClose={() => setIsOpen(false)}
160
+
onClose={() => {
161
+
setIsOpen(false);
162
+
setSelectedVariableId(undefined);
163
+
}}
145
164
sandboxId={data?.sandbox?.id ?? ""}
165
+
variableId={selectedVariableId}
166
+
/>
167
+
<ConfirmDelete
168
+
isOpen={confirmDeleteOpen}
169
+
onClose={() => setConfirmDeleteOpen(false)}
170
+
onConfirm={handleConfirmDelete}
171
+
subject={"variable"}
172
+
title={"variable?"}
146
173
/>
147
174
</>
148
175
</Main>
+30
-3
apps/web/src/pages/settings/volumes/Volumes.tsx
+30
-3
apps/web/src/pages/settings/volumes/Volumes.tsx
···
8
8
import { useVolumesQuery } from "../../../hooks/useVolume";
9
9
import dayjs from "dayjs";
10
10
import Pagination from "../../../components/pagination";
11
+
import ConfirmDelete from "../../../components/confirmdelete/ConfirmDelete";
11
12
12
13
const PAGE_SIZE = 12;
13
14
const SKELETON_ROWS = 8;
···
34
35
);
35
36
36
37
function Volumes() {
38
+
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
39
+
const [selectedVolumeId, setSelectedVolumeId] = useState<string | undefined>(
40
+
undefined,
41
+
);
37
42
const [isOpen, setIsOpen] = useState(false);
38
43
const [currentPage, setCurrentPage] = useState(1);
39
44
const offset = (currentPage - 1) * PAGE_SIZE;
···
54
59
const onPageChange = (page: number) => {
55
60
setCurrentPage(page);
56
61
};
62
+
63
+
const handleConfirmDelete = async () => {};
57
64
58
65
return (
59
66
<Main
···
111
118
</td>
112
119
<td className="normal-case text-[14px] text-right">
113
120
<div className="join">
114
-
<button className="btn btn-outline join-item">
121
+
<button
122
+
className="btn btn-outline join-item"
123
+
onClick={() => {
124
+
setSelectedVolumeId(volume.id);
125
+
setIsOpen(true);
126
+
}}
127
+
>
115
128
Edit
116
129
</button>
117
-
<button className="btn btn-outline join-item">
130
+
<button
131
+
className="btn btn-outline join-item"
132
+
onClick={() => setConfirmDeleteOpen(true)}
133
+
>
118
134
Delete
119
135
</button>
120
136
</div>
···
136
152
</div>
137
153
<AddVolumeModal
138
154
isOpen={isOpen}
139
-
onClose={() => setIsOpen(false)}
155
+
onClose={() => {
156
+
setIsOpen(false);
157
+
setSelectedVolumeId(undefined);
158
+
}}
140
159
sandboxId={data?.sandbox?.id ?? ""}
160
+
volumeId={selectedVolumeId}
161
+
/>
162
+
<ConfirmDelete
163
+
isOpen={confirmDeleteOpen}
164
+
onClose={() => setConfirmDeleteOpen(false)}
165
+
onConfirm={handleConfirmDelete}
166
+
subject={"volume"}
167
+
title={"volume?"}
141
168
/>
142
169
</>
143
170
</Main>