From c513a30bd743c8fbd5d7f4833683867302bee2a4 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Thu, 9 Mar 2023 13:19:03 +0100 Subject: [PATCH] fix(frontend): add confirmation modal to delete script/flow/app --- .../lib/components/common/table/AppRow.svelte | 14 ++++++-- .../components/common/table/FlowRow.svelte | 11 ++++-- .../components/common/table/ScriptRow.svelte | 16 ++++++--- .../src/lib/components/home/ItemsList.svelte | 34 ++++++++++++++++++- .../(root)/(logged)/resources/+page.svelte | 4 +-- 5 files changed, 66 insertions(+), 13 deletions(-) diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte index b12590ff11..575ebdce0c 100644 --- a/frontend/src/lib/components/common/table/AppRow.svelte +++ b/frontend/src/lib/components/common/table/AppRow.svelte @@ -24,6 +24,7 @@ export let starred: boolean export let shareModal: ShareModal export let moveDrawer: MoveDrawer + export let deleteConfirmedCallback: (() => void) | undefined let { summary, path, extra_perms, canWrite, workspace_id } = app @@ -120,9 +121,16 @@ { displayName: 'Delete', icon: faTrashAlt, - action: async () => { - await AppService.deleteApp({ workspace: $workspaceStore ?? '', path }) - dispatch('change') + action: async (event) => { + if (event?.shiftKey) { + await AppService.deleteApp({ workspace: $workspaceStore ?? '', path }) + dispatch('change') + } else { + deleteConfirmedCallback = async () => { + await AppService.deleteApp({ workspace: $workspaceStore ?? '', path }) + dispatch('change') + } + } }, type: 'delete', disabled: !canWrite diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte index 3fefeae94f..9f8da4da8b 100644 --- a/frontend/src/lib/components/common/table/FlowRow.svelte +++ b/frontend/src/lib/components/common/table/FlowRow.svelte @@ -31,6 +31,7 @@ export let starred: boolean export let shareModal: ShareModal export let moveDrawer: MoveDrawer + export let deleteConfirmedCallback: (() => void) | undefined let { summary, path, extra_perms, canWrite, workspace_id, archived } = flow @@ -187,8 +188,14 @@ { displayName: 'Delete', icon: faTrashAlt, - action: () => { - path ? deleteFlow(path) : null + action: (event) => { + if (event?.shiftKey) { + deleteFlow(path) + } else { + deleteConfirmedCallback = () => { + deleteFlow(path) + } + } }, type: 'delete', disabled: !canWrite diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte index 224875fcb9..ec7baeff5f 100644 --- a/frontend/src/lib/components/common/table/ScriptRow.svelte +++ b/frontend/src/lib/components/common/table/ScriptRow.svelte @@ -18,7 +18,8 @@ faFileExport, faList, faPlay, - faShare + faShare, + faTrashAlt } from '@fortawesome/free-solid-svg-icons' import { MoreVertical } from 'lucide-svelte' import { createEventDispatcher } from 'svelte' @@ -32,6 +33,7 @@ export let starred: boolean export let shareModal: ShareModal export let moveDrawer: MoveDrawer + export let deleteConfirmedCallback: (() => void) | undefined let { summary, @@ -212,9 +214,15 @@ : [ { displayName: 'Delete', - icon: faArchive, - action: () => { - path ? deleteScript(path) : null + icon: faTrashAlt, + action: (event) => { + if (event?.shiftKey) { + deleteScript(path) + } else { + deleteConfirmedCallback = () => { + deleteScript(path) + } + } }, type: dlt, disabled: !canWrite diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte index ffadf82080..8cda6d6fe9 100644 --- a/frontend/src/lib/components/home/ItemsList.svelte +++ b/frontend/src/lib/components/home/ItemsList.svelte @@ -2,7 +2,7 @@ import CenteredPage from '$lib/components/CenteredPage.svelte' import { AppService, FlowService, ListableApp, Script, ScriptService, type Flow } from '$lib/gen' import { userStore, workspaceStore } from '$lib/stores' - import { Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common' + import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '$lib/components/common' import { canWrite } from '$lib/utils' import ShareModal from '$lib/components/ShareModal.svelte' import type uFuzzy from '@leeoniya/ufuzzy' @@ -21,6 +21,7 @@ import { Icon } from 'svelte-awesome' import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons' import MoveDrawer from '../MoveDrawer.svelte' + import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte' type TableItem = T & { canWrite: boolean @@ -49,6 +50,8 @@ let nbDisplayed = 30 + export let deleteConfirmedCallback: (() => void) | undefined = undefined + async function loadScripts(): Promise { const loadedScripts = await ScriptService.listScripts({ workspace: $workspaceStore!, @@ -320,6 +323,7 @@ {#each (items ?? []).slice(0, nbDisplayed) as item, i (item.type + '/' + item.path + (item.summary ?? ''))} {#if item.type == 'script'} {:else if item.type == 'flow'} {:else if item.type == 'app'} + + { + deleteConfirmedCallback = undefined + }} + on:confirmed={() => { + if (deleteConfirmedCallback) { + deleteConfirmedCallback() + } + deleteConfirmedCallback = undefined + }} +> +
+ Are you sure you want to remove it? + +
+ You can press + SHIFT + while removing to bypass confirmation. +
+ +
+ diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte index d070ca25f5..18b1f6a4c0 100644 --- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte @@ -74,8 +74,6 @@ types: true } - $: open = Boolean(deleteConfirmedCallback) - $: owners = Array.from( new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? []) ).sort() @@ -647,7 +645,7 @@ /> {