Skip to content

Commit 79db3de

Browse files
drew-harrisskeptrunedev
drew-harris
authored and
skeptrunedev
committed
feat: working dataset settings
1 parent 03c79e2 commit 79db3de

File tree

5 files changed

+1164
-2
lines changed

5 files changed

+1164
-2
lines changed

‎frontends/dashboard/src/components/dataset-settings/DangerZone.tsx‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import { createMemo, createSignal, useContext, Show } from "solid-js";
2+
import { DatasetContext } from "../../contexts/DatasetContext";
3+
import { UserContext } from "../../contexts/UserContext";
4+
import { createToast } from "../ShowToasts";
5+
6+
export const DangerZoneForm = () => {
7+
const datasetContext = useContext(DatasetContext);
8+
const userContext = useContext(UserContext);
9+
10+
const [deleting, setDeleting] = createSignal(false);
11+
12+
const [confirmDeleteText, setConfirmDeleteText] = createSignal("");
13+
const [confirmClearText, setConfirmClearText] = createSignal("");
14+
const [isClearing, setIsClearing] = createSignal(false);
15+
16+
const datasetName = createMemo(() => datasetContext.dataset()?.dataset.name);
17+
18+
const dataset_id = datasetContext.dataset()?.dataset.id;
19+
const organization_id = userContext.selectedOrg().id;
20+
21+
const api_host = import.meta.env.VITE_API_HOST as unknown as string;
22+
23+
const deleteDataset = () => {
24+
if (!dataset_id) return;
25+
if (!organization_id) return;
26+
27+
const confirmBox = confirm(
28+
"Deleting this dataset will remove all chunks which are contained within it. Are you sure you want to delete?",
29+
);
30+
if (!confirmBox) return;
31+
32+
setDeleting(true);
33+
fetch(`${api_host}/dataset/${dataset_id}`, {
34+
method: "DELETE",
35+
headers: {
36+
"Content-Type": "application/json",
37+
"TR-Dataset": dataset_id,
38+
},
39+
credentials: "include",
40+
})
41+
.then((res) => {
42+
if (res.ok) {
43+
window.location.href = `/dashboard/${organization_id}/overview`;
44+
createToast({
45+
title: "Success",
46+
message: "Dataset deleted successfully!",
47+
type: "success",
48+
});
49+
}
50+
})
51+
.catch(() => {
52+
setDeleting(false);
53+
createToast({
54+
title: "Error",
55+
message: "Error deleting dataset!",
56+
type: "error",
57+
});
58+
});
59+
};
60+
61+
const clearDataset = () => {
62+
if (!dataset_id) return;
63+
64+
const confirmBox = confirm("This action is not reversible. Proceed?");
65+
if (!confirmBox) return;
66+
67+
fetch(`${api_host}/dataset/clear/${dataset_id}`, {
68+
method: "PUT",
69+
headers: {
70+
"Content-Type": "application/json",
71+
...(dataset_id && { "TR-Dataset": dataset_id }),
72+
},
73+
credentials: "include",
74+
})
75+
.then(() => {
76+
createToast({
77+
title: "Success",
78+
message: "Cleared all chunks for this dataset!",
79+
type: "success",
80+
});
81+
82+
setConfirmClearText("");
83+
})
84+
.catch(() => {
85+
createToast({
86+
title: "Error",
87+
type: "error",
88+
message: `Failed to clear dataset.`,
89+
});
90+
});
91+
};
92+
93+
return (
94+
<>
95+
<Show when={datasetContext.dataset != null}>
96+
<form
97+
class="rounded-md border border-red-600/20 shadow-sm shadow-red-500/30"
98+
id="danger-zone"
99+
>
100+
<div class="shadow sm:overflow-hidden sm:rounded-md">
101+
<div class="space-y-4 bg-white px-3 py-6 sm:p-6">
102+
<div class="flex flex-col gap-2">
103+
<div>
104+
<h2
105+
id="user-details-name"
106+
class="text-xl font-medium leading-6"
107+
>
108+
Dataset Management
109+
</h2>
110+
<p class="mt-1 text-sm text-neutral-600">
111+
Easily clear or delete datasets.
112+
</p>
113+
</div>
114+
<div class="mt-6 flex flex-col gap-6">
115+
<div>
116+
<h2
117+
id="user-details-name"
118+
class="text-lg font-medium leading-6"
119+
>
120+
Clear Dataset
121+
</h2>
122+
<p class="mt-1 text-sm text-neutral-600">
123+
This will delete all chunks, groups, and files in the
124+
dataset, but not the analytics or dataset itself.
125+
</p>
126+
<div class="mt-2 grid grid-cols-4 gap-0">
127+
<div class="col-span-3 sm:col-span-2">
128+
<Show when={isClearing()}>
129+
<label
130+
for="dataset-name"
131+
class="block text-sm font-medium leading-6 opacity-70"
132+
>
133+
Enter the dataset name
134+
<span class="font-bold"> "{datasetName()}" </span>
135+
to confirm.
136+
</label>
137+
<input
138+
type="text"
139+
name="dataset-name"
140+
id="dataset-name"
141+
class="block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 focus:ring-inset focus:ring-neutral-900/20 sm:text-sm sm:leading-6"
142+
value={confirmClearText()}
143+
onInput={(e) =>
144+
setConfirmClearText(e.currentTarget.value)
145+
}
146+
/>
147+
</Show>
148+
<button
149+
type="button"
150+
class="pointer:cursor w-fit rounded-md border bg-magenta-400 px-4 py-2 text-sm font-bold text-white hover:bg-magenta-600 focus:outline-magenta-500 disabled:opacity-50"
151+
classList={{
152+
"mt-3": isClearing(),
153+
}}
154+
disabled={
155+
confirmClearText() !== datasetName() && isClearing()
156+
}
157+
onClick={() => {
158+
if (isClearing()) {
159+
void clearDataset();
160+
setIsClearing(false);
161+
} else {
162+
setIsClearing(true);
163+
}
164+
}}
165+
>
166+
Clear Dataset
167+
</button>
168+
</div>
169+
</div>
170+
</div>
171+
<div>
172+
<h2
173+
id="user-details-name"
174+
class="text-lg font-medium leading-6"
175+
>
176+
Delete Dataset
177+
</h2>
178+
<p class="mt-1 text-sm text-neutral-600">
179+
This will delete all chunks, groups, and files in the
180+
dataset as well as the dataset itself.
181+
</p>
182+
<div class="mt-2 grid grid-cols-4 gap-0">
183+
<div class="col-span-4 sm:col-span-2">
184+
<Show when={deleting()}>
185+
<label
186+
for="dataset-name"
187+
class="block text-sm font-medium leading-6 opacity-70"
188+
>
189+
Enter the dataset name
190+
<span class="font-bold"> "{datasetName()}" </span>
191+
to confirm.
192+
</label>
193+
<input
194+
type="text"
195+
name="dataset-name"
196+
id="dataset-name"
197+
class="block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 focus:ring-inset focus:ring-neutral-900/20 sm:text-sm sm:leading-6"
198+
value={confirmDeleteText()}
199+
onInput={(e) =>
200+
setConfirmDeleteText(e.currentTarget.value)
201+
}
202+
/>
203+
</Show>
204+
<button
205+
onClick={() => {
206+
if (deleting()) {
207+
void deleteDataset();
208+
setDeleting(false);
209+
} else {
210+
setDeleting(true);
211+
}
212+
}}
213+
disabled={
214+
deleting() && confirmDeleteText() !== datasetName()
215+
}
216+
classList={{
217+
"pointer:cursor text-sm w-fit disabled:opacity-50 font-bold rounded-md bg-red-600/80 border px-4 py-2 text-white hover:bg-red-500 focus:outline-magenta-500":
218+
true,
219+
"mt-3": deleting(),
220+
}}
221+
>
222+
Delete Dataset
223+
</button>
224+
</div>
225+
</div>
226+
</div>
227+
</div>
228+
</div>
229+
</div>
230+
</div>
231+
</form>
232+
</Show>
233+
</>
234+
);
235+
};

0 commit comments

Comments
 (0)