Update Modal component with open and error props

src/lib/components/workflow-actions.svelte

@@ -45,10 +45,11 @@
   let reason = '';
   let signalInput = '';
   let signalName = '';
-  let cancelConfirmationModal: Modal;
-  let terminateConfirmationModal: Modal;
-  let resetConfirmationModal: Modal;
-  let signalConfirmationModal: Modal;
+  let cancelConfirmationModalOpen = false;
+  let terminateConfirmationModalOpen = false;
+  let resetConfirmationModalOpen = false;
+  let signalConfirmationModalOpen = false;
+  let error = '';
   let resetReapplyType: ResetReapplyType = ResetReapplyType.Unspecified;
   let resetId: string;
   let resetReason: string;
@@ -76,22 +77,21 @@
   };
 
   const handleSuccessfulTermination = async () => {
-    terminateConfirmationModal?.close();
+    terminateConfirmationModalOpen = false;
     $refresh = Date.now();
     toaster.push({
       id: 'workflow-termination-success-toast',
       message: translate('workflows', 'terminate-success'),
     });
   };
 
-  const handleTerminationError = (error: NetworkError) => {
+  const handleTerminationError = (err: NetworkError) => {
     reason = '';
-    terminateConfirmationModal?.setError(
-      error?.message ?? translate('unknown-error'),
-    );
+    error = err?.message ?? translate('unknown-error');
   };
 
   const terminate = () => {
+    error = '';
     if (!workflow.canBeTerminated) return;
     terminateWorkflow({
       workflow,
@@ -109,23 +109,22 @@
 
   const cancel = async () => {
     loading = true;
+    error = '';
     try {
       await cancelWorkflow({
         namespace,
         workflowId: workflow.id,
         runId: workflow.runId,
       });
-      cancelConfirmationModal?.close();
+      cancelConfirmationModalOpen = false;
       loading = false;
       $refresh = Date.now();
       toaster.push({
         id: 'workflow-cancelation-success-toast',
         message: translate('workflows', 'cancel-success'),
       });
-    } catch (error) {
-      cancelConfirmationModal?.setError(
-        error?.message ?? translate('unknown-error'),
-      );
+    } catch (err) {
+      error = err?.message ?? translate('unknown-error');
     }
   };
 
@@ -134,6 +133,7 @@
   };
 
   const signal = async () => {
+    error = '';
     try {
       await signalWorkflow({
         namespace,
@@ -142,22 +142,21 @@
         signalInput,
         signalName,
       });
-      signalConfirmationModal?.close();
+      signalConfirmationModalOpen = false;
       $refresh = Date.now();
       toaster.push({
         message: translate('workflows', 'signal-success'),
         id: 'workflow-signal-success-toast',
       });
-    } catch (error) {
-      signalConfirmationModal?.setError(
-        error?.message ?? translate('unknown-error'),
-      );
+    } catch (err) {
+      error = err?.message ?? translate('unknown-error');
     }
 
     hideSignalModal();
   };
 
   const reset = async () => {
+    error = '';
     try {
       const response = await resetWorkflow({
         namespace,
@@ -178,12 +177,10 @@
           [workflow.runId]: response.runId,
         }));
       }
-      resetConfirmationModal?.close();
+      resetConfirmationModalOpen = false;
       $refresh = Date.now();
-    } catch (error) {
-      resetConfirmationModal?.setError(
-        error?.message ?? translate('unknown-error'),
-      );
+    } catch (err) {
+      error = err?.message ?? translate('unknown-error');
     }
     hideResetModal();
   };
@@ -222,21 +219,21 @@
   $: workflowActions = [
     {
       label: translate('workflows', 'reset'),
-      onClick: () => resetConfirmationModal.open(),
+      onClick: () => (resetConfirmationModalOpen = true),
       testId: 'reset-button',
       allowed: resetAllowed,
       tooltip: resetAllowed ? '' : resetTooltipText,
     },
     {
       label: translate('workflows', 'signal'),
-      onClick: () => signalConfirmationModal.open(),
+      onClick: () => (signalConfirmationModalOpen = true),
       testId: 'signal-button',
       allowed: signalEnabled,
       tooltip: signalEnabled ? '' : translate('workflows', 'signal-disabled'),
     },
     {
       label: translate('workflows', 'terminate'),
-      onClick: () => terminateConfirmationModal.open(),
+      onClick: () => (terminateConfirmationModalOpen = true),
       testId: 'terminate-button',
       allowed: terminateEnabled,
       destructive: true,
@@ -259,7 +256,7 @@
     position="right"
     disabled={actionsDisabled}
     primaryActionDisabled={!cancelEnabled || cancelInProgress}
-    on:click={() => cancelConfirmationModal.open()}
+    on:click={() => (cancelConfirmationModalOpen = true)}
     label={translate('workflows', 'request-cancellation')}
     menuLabel={translate('workflows', 'workflow-actions')}
   >
@@ -284,7 +281,7 @@
       aria-label={translate('workflows', 'reset')}
       disabled={!resetAllowed}
       variant="primary"
-      on:click={() => resetConfirmationModal.open()}
+      on:click={() => (resetConfirmationModalOpen = true)}
     >
       {translate('workflows', 'reset')}
     </Button>
@@ -296,7 +293,8 @@
   data-testid="reset-confirmation-modal"
   confirmText={translate('confirm')}
   cancelText={translate('cancel')}
-  bind:this={resetConfirmationModal}
+  bind:error
+  bind:open={resetConfirmationModalOpen}
   on:confirmModal={reset}
   on:cancelModal={hideResetModal}
   confirmDisabled={!resetId}
@@ -315,7 +313,8 @@
   data-testid="cancel-confirmation-modal"
   confirmText={translate('confirm')}
   cancelText={translate('cancel')}
-  bind:this={cancelConfirmationModal}
+  bind:error
+  bind:open={cancelConfirmationModalOpen}
   {loading}
   confirmType="destructive"
   on:confirmModal={cancel}
@@ -330,7 +329,8 @@
 <Modal
   id="terminate-confirmation-modal"
   data-testid="terminate-confirmation-modal"
-  bind:this={terminateConfirmationModal}
+  bind:error
+  bind:open={terminateConfirmationModalOpen}
   confirmText={translate('workflows', 'terminate')}
   cancelText={translate('cancel')}
   confirmType="destructive"
@@ -355,7 +355,8 @@
 <Modal
   id="signal-confirmation-modal"
   data-testid="signal-confirmation-modal"
-  bind:this={signalConfirmationModal}
+  bind:error
+  bind:open={signalConfirmationModalOpen}
   confirmText={translate('submit')}
   cancelText={translate('cancel')}
   confirmDisabled={!signalName}

src/lib/components/workflow/batch-operation-confirmation-modal.svelte

@@ -13,10 +13,16 @@
   export let actionableWorkflowsLength: number;
   export let query: string;
 
-  let modal: Modal;
-  export const open = () => modal.open();
-  export const close = () => modal.close();
-  export const setError = (error: string) => modal.setError(error);
+  let reason: string = '';
+  let isOpen = false;
+  let error = '';
+
+  export const open = () => {
+    reason = '';
+    isOpen = true;
+  };
+  export const close = () => (isOpen = false);
+  export const setError = (err: string) => (error = err);
 
   const dispatch = createEventDispatcher<{
     confirm: { reason: string };
@@ -30,27 +36,22 @@
 
   $: placeholder = getPlacholder(action, $authUser.email);
 
-  let reason: string = '';
-
   const handleConfirmModal = () => {
+    error = '';
     dispatch('confirm', {
       reason: formatReason({ action, reason, email: $authUser.email }),
     });
   };
-
-  const handleCancelModal = () => {
-    reason = '';
-  };
 </script>
 
 <Modal
   id="batch-operation-confirmation-modal"
-  bind:this={modal}
+  bind:open={isOpen}
+  bind:error
   data-testid="batch-{actionText}-confirmation"
   confirmType="destructive"
   cancelText={translate('cancel')}
   {confirmText}
-  on:cancelModal={handleCancelModal}
   on:confirmModal={handleConfirmModal}
 >
   <h3 slot="title">

src/lib/holocene/modal.story.svelte

@@ -8,25 +8,28 @@
 
   export let Hst: HST;
   let deleteConfirm: string;
-  let modal: Modal;
   let loading = false;
+  let basicModalOpen = false;
+  let formModalOpen = false;
+  let formModalError = '';
 
   let shouldError = false;
   let errorText =
     'Quo sint nisi nostrum quis nesciunt est. Delectus adipisci reiciendis nihil fuga libero exercitationem. Distinctio nihil sit et consequatur sit quia. Quia aut et temporibus doloremque veritatis corporis.';
-  const openModal = () => {
-    modal.open();
-  };
 
   const handleConfirm = () => {
     logEvent('Confirm', {});
+    basicModalOpen = false;
+    deleteConfirm = '';
   };
 
   const handleCancel = () => {
     logEvent('Cancel', {});
+    deleteConfirm = '';
   };
 
   const makeFakeApiRequest = async () => {
+    formModalError = '';
     try {
       loading = true;
       await new Promise<void>((resolve, reject) => {
@@ -36,9 +39,10 @@
           setTimeout(resolve, 250);
         }
       });
-      modal?.close();
+      formModalOpen = false;
+      deleteConfirm = '';
     } catch {
-      modal?.setError(errorText);
+      formModalError = errorText;
     } finally {
       loading = false;
     }
@@ -47,15 +51,19 @@
 
 <Hst.Story>
   <Hst.Variant title="A Basic Confirmation Modal">
-    <Button on:click={openModal}>Open Modal</Button>
+    <Button
+      on:click={() => {
+        basicModalOpen = true;
+      }}>Open Modal</Button
+    >
     <Modal
-      bind:this={modal}
       id="basic-modal"
       confirmType="destructive"
       confirmText="Delete"
       cancelText="Cancel"
       on:confirmModal={handleConfirm}
       on:cancelModal={handleCancel}
+      bind:open={basicModalOpen}
     >
       <h3 slot="title">Delete User</h3>
       <p slot="content">
@@ -64,16 +72,21 @@
     </Modal>
   </Hst.Variant>
   <Hst.Variant title="A Modal with a Form">
-    <Button on:click={openModal}>Open Modal</Button>
+    <Button
+      on:click={() => {
+        formModalOpen = true;
+      }}>Open Modal</Button
+    >
     <Modal
       id="form-modal"
-      bind:this={modal}
       confirmType="destructive"
       confirmText="Delete"
       cancelText="Cancel"
       {loading}
       on:cancelModal={handleCancel}
       on:confirmModal={makeFakeApiRequest}
+      bind:open={formModalOpen}
+      bind:error={formModalError}
     >
       <h3 slot="title">Delete Namespace</h3>
       <div slot="content" class="flex flex-col gap-2">