Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add confirmation to deletions #1597

Merged
merged 11 commits into from
Feb 25, 2025
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { page } from '$app/stores';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { Modal } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Button, InputCheckbox } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import { FormList } from '$lib/elements/forms/index.js';
import { func } from '../store';

export let showDelete = false;
const functionId = $page.params.function;

let confirmedDeletion = false;

const handleSubmit = async () => {
try {
await sdk.forProject.functions.delete(functionId);
Expand Down Expand Up @@ -38,12 +42,24 @@
icon="exclamation"
state="warning"
headerDivider={false}>
<p data-private>
Are you sure you want to delete this function and all associated deployments from your
project?
</p>
<FormList>
<p data-private>Are you sure you want to delete <b>{$func.name}</b>?</p>
<p data-private>
The function and all associated deployments will be permanently deleted. This action is
irreversible.
</p>

<div class="input-check-box-friction">
<InputCheckbox
required
size="s"
id="delete_policy"
bind:checked={confirmedDeletion}
label="I understand and confirm" />
</div>
</FormList>
<svelte:fragment slot="footer">
<Button text on:click={() => (showDelete = false)}>Cancel</Button>
<Button secondary submit>Delete</Button>
<Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
</svelte:fragment>
</Modal>
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,7 @@

async function cancelDeployment() {
try {
await sdk.forProject.sites.updateDeploymentBuild(
deployment.resourceId,
deployment.$id
);
await sdk.forProject.sites.updateDeploymentBuild(deployment.resourceId, deployment.$id);
await invalidate(Dependencies.DEPLOYMENTS);
addNotification({
type: 'success',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,4 @@
</svelte:fragment>
</CardGrid>

<Delete bind:showDelete />
<Delete siteName={site.name} bind:showDelete />
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { page } from '$app/stores';
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
import { Modal } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Button, InputCheckbox } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { sdk } from '$lib/stores/sdk';
import { FormList } from '$lib/elements/forms/index.js';

export let siteName = '';
export let showDelete = false;
const siteId = $page.params.site;

let confirmedDeletion = false;

const handleSubmit = async () => {
try {
await sdk.forProject.sites.delete(siteId);
Expand All @@ -37,12 +41,24 @@
onSubmit={handleSubmit}
icon="exclamation"
state="warning">
<p data-private>
Are you sure you want to delete this site and all associated deployments from your
project?
</p>
<FormList>
<p data-private>Are you sure you want to delete <b>{siteName}</b>?</p>
<p data-private>
The site and all associated deployments will be permanently deleted. This action is
irreversible.
</p>

<div class="input-check-box-friction">
<InputCheckbox
required
size="s"
id="delete_policy"
bind:checked={confirmedDeletion}
label="I understand and confirm" />
</div>
</FormList>
<svelte:fragment slot="footer">
<Button text on:click={() => (showDelete = false)}>Cancel</Button>
<Button secondary submit>Delete</Button>
<Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
</svelte:fragment>
</Modal>
Loading