ux: Confirm before deleting workflows

Author: Alorel

rollup.config.js

@@ -91,6 +91,7 @@ export default function (opts) {
           'RegExp',
           'String',
           'Symbol',
+          'Swal',
           'TypeError',
           'undefined',
           'WeakMap',

src/lib/registries/workflow-registry.mts

@@ -7,6 +7,7 @@ import {
   instantiateCompressedToJsonArray
 } from '../decorators/to-json-formatters/format-to-json-array-compressed.mjs';
 import {WorkflowExecution} from '../execution/workflow-execution.mjs';
+import {alertError} from '../util/alert';
 import {debugLog, errorLog} from '../util/log.mjs';
 
 const enum Strings {
@@ -115,16 +116,10 @@ function store(workflows: Workflow[] | readonly Workflow[]): void | never {
   try {
     ctx.accountStorage.setItem(Strings.CFG_KEY, compressArray(workflows));
   } catch (e) {
-    Swal
-      .fire({
-        cancelButtonColor: '#d33',
-        cancelButtonText: 'Kurwa!',
-        showCancelButton: true,
-        showConfirmButton: false,
-        text: 'Melvor mods have a 8kB storage limit and we\'ve reached it. Gonna have to delete some workflows.',
-        title: 'Failed to save',
-      })
-      .catch(errorLog);
+    alertError(
+      'Melvor mods have a 8kB storage limit and we\'ve reached it. Gonna have to delete some workflows.',
+      'Failed to save'
+    );
 
     throw e;
   }

src/lib/util/alert.tsx

@@ -0,0 +1,45 @@
+import {Observable} from 'rxjs';
+import type {SweetAlertOptions} from 'sweetalert2';
+
+const baseOpts: Partial<SweetAlertOptions> = {
+  cancelButtonColor: '#d33',
+  cancelButtonText: 'Cancel',
+  showCancelButton: true,
+  showConfirmButton: true,
+};
+
+export function alertError(text: string, title = 'Confirmation'): void {
+  Swal
+    .fire({
+      ...baseOpts,
+      cancelButtonText: 'Oh no',
+      confirmButtonText: 'OK',
+      showConfirmButton: false,
+      text,
+      title,
+    })
+    .catch(console.error);
+}
+
+export function alertConfirm(text: string, title = 'Confirmation'): Observable<void> {
+  return new Observable<void>(subscriber => {
+    Swal
+      .fire({
+        ...baseOpts,
+        text,
+        title,
+      })
+      .then(
+        v => {
+          if (v.isConfirmed) {
+            subscriber.next();
+          }
+          subscriber.complete();
+        },
+        e => {
+          console.error(e);
+          subscriber.complete();
+        }
+      );
+  });
+}

src/ui/pages/workflows-dashboard.tsx

@@ -14,6 +14,7 @@ import {WorkflowEventType} from '../../lib/execution/workflow-event.mjs';
 import type {WorkflowExecution} from '../../lib/execution/workflow-execution.mjs';
 import WorkflowRegistry from '../../lib/registries/workflow-registry.mjs';
 import {EMPTY_ARR} from '../../lib/util.mjs';
+import {alertConfirm} from '../../lib/util/alert';
 import swapElements from '../../lib/util/swap-elements.mjs';
 import {BorderedBlock} from '../components/block';
 import Btn from '../components/btn';
@@ -296,12 +297,16 @@ const BtnsNotRunning = memo<BtnsNotRunningProps>(
       });
     }, [editedWorkflow, activeWorkflow]);
     const del = useCallback(() => {
-      const activeId = activeWorkflow.peek()!.listId;
-      batch(() => {
-        activeWorkflow.value = undefined;
-        reg.rmByIdx(reg.workflows.findIndex(wf => wf.listId === activeId));
-        doRefresh();
-      });
+      const activeWf = activeWorkflow.peek()!;
+
+      alertConfirm(`Are you sure you want to delete "${activeWf.name}"?`)
+        .subscribe(() => {
+          batch(() => {
+            activeWorkflow.value = undefined;
+            reg.rmByIdx(reg.workflows.findIndex(wf => wf.listId === activeWf.listId));
+            doRefresh();
+          });
+        });
     }, [activeWorkflow, doRefresh]);
     const clone = useCallback(() => {
       const cloned = Workflow.fromJSON(JSON.parse(JSON.stringify(activeWorkflow.peek()!)))!;