add jobId to batch operation form (#1674)

* add jobId to batch operation form

* fix modal to update internal state when closed via keyboard

* add validation to jobId in batch confirm modal

* fix batch-service tests

* fix typo

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import { v4 } from 'uuid';
 
   import Input from '$lib/holocene/input/input.svelte';
   import Modal from '$lib/holocene/modal.svelte';
@@ -17,6 +18,9 @@
   let reason = '';
   let isOpen = false;
   let error = '';
+  let jobId = '';
+  let jobIdPlaceholder = v4();
+  let jobIdValid = true;
 
   export const open = () => {
     reason = '';
@@ -26,7 +30,7 @@
   export const setError = (err: string) => (error = err);
 
   const dispatch = createEventDispatcher<{
-    confirm: { reason: string };
+    confirm: { reason: string; jobId: string };
   }>();
 
   $: actionText =
@@ -41,8 +45,17 @@
     error = '';
     dispatch('confirm', {
       reason: formatReason({ action, reason, email: $authUser.email }),
+      jobId: jobId || jobIdPlaceholder,
     });
   };
+
+  const handleJobIdChange = (event: Event & { target: HTMLInputElement }) => {
+    if (/^[\w.~-]*$/.test(event.target.value)) {
+      jobIdValid = true;
+    } else {
+      jobIdValid = false;
+    }
+  };
 </script>
 
 <Modal
@@ -52,6 +65,7 @@
   data-testid="batch-{actionText}-confirmation"
   confirmType="destructive"
   cancelText={translate('cancel')}
+  confirmDisabled={!jobIdValid}
   {confirmText}
   on:confirmModal={handleConfirmModal}
 >
@@ -63,7 +77,7 @@
     />
   </h3>
   <svelte:fragment slot="content">
-    <div class="mb-4 flex flex-col">
+    <div class="mb-4 flex flex-col gap-2">
       {#if $allSelected}
         <p class="mb-2">
           <Translate
@@ -97,17 +111,28 @@
           />
         </p>
       {/if}
+      <Input
+        id={`bulk-action-reason-${action}`}
+        bind:value={reason}
+        label={translate('reason')}
+        hintText={translate(
+          'workflows',
+          'batch-operation-confirmation-input-hint',
+          { placeholder },
+        )}
+        {placeholder}
+      />
+      <Input
+        id="batch-operation-job-id"
+        label={translate('job-id')}
+        hintText={jobIdValid
+          ? translate('batch', 'job-id-input-hint')
+          : translate('batch', 'job-id-input-error')}
+        bind:value={jobId}
+        placeholder={jobIdPlaceholder}
+        on:input={handleJobIdChange}
+        valid={jobIdValid}
+      />
     </div>
-    <Input
-      id={`bulk-action-reason-${action}`}
-      bind:value={reason}
-      label={translate('reason')}
-      hintText={translate(
-        'workflows',
-        'batch-operation-confirmation-input-hint',
-        { placeholder },
-      )}
-      {placeholder}
-    />
   </svelte:fragment>
 </Modal>

src/lib/holocene/modal.svelte

@@ -109,6 +109,7 @@
 />
 <dialog
   {id}
+  on:close={handleCancel}
   bind:this={modalElement}
   class="body {className}"
   class:large

src/lib/i18n/locales/en/batch.ts

@@ -17,4 +17,7 @@ export const Strings = {
   'max-concurrent-alert-title': 'Maximum concurrent Batch Operations met',
   'max-concurrent-alert-description':
     'Only 1 in progress Batch Operation is permitted. If you are attempting to create a new Batch Operation while there is one currently running, it will fail.',
+  'job-id-input-hint':
+    'Job ID must be unique. If left blank, a randomly generated UUID will be used.',
+  'job-id-input-error': 'Job ID must only contain URL safe characters',
 } as const;

src/lib/pages/workflows-with-new-search.svelte

@@ -132,11 +132,14 @@
     $refresh = Date.now();
   };
 
-  const terminateWorkflows = async (event: CustomEvent<{ reason: string }>) => {
+  const terminateWorkflows = async (
+    event: CustomEvent<{ reason: string; jobId: string }>,
+  ) => {
     try {
       const options = {
         namespace: $page.params.namespace,
         reason: event.detail.reason,
+        jobId: event.detail.jobId,
         ...($allSelected
           ? { query: batchOperationQuery }
           : { workflows: $terminableWorkflows }),
@@ -154,10 +157,13 @@
     }
   };
 
-  const cancelWorkflows = async (event: CustomEvent<{ reason: string }>) => {
+  const cancelWorkflows = async (
+    event: CustomEvent<{ reason: string; jobId: string }>,
+  ) => {
     const options = {
       namespace: $page.params.namespace,
       reason: event.detail.reason,
+      jobId: event.detail.jobId,
       ...($allSelected
         ? { query: batchOperationQuery }
         : { workflows: $terminableWorkflows }),

src/lib/services/batch-service.test.ts

@@ -24,10 +24,6 @@ vi.mock('../utilities/request-from-api', () => ({
   }),
 }));
 
-vi.mock('uuid', () => ({
-  v4: () => 'xxx',
-}));
-
 vi.mock('../stores/versions', () => {
   return {
     temporalVersion: writable(),
@@ -51,6 +47,7 @@ describe('Batch Service', () => {
         namespace: 'default',
         reason: 'test',
         workflows: mockWorkflows,
+        jobId: 'xxx',
       });
 
       expect(requestFromAPI).toHaveBeenCalledTimes(2);
@@ -71,6 +68,7 @@ describe('Batch Service', () => {
         namespace: 'default',
         reason: 'test',
         workflows: mockWorkflows,
+        jobId: 'xxx',
       });
 
       expect(requestFromAPI).toHaveBeenCalledTimes(2);
@@ -99,6 +97,7 @@ describe('Batch Service', () => {
         namespace: 'default',
         reason: 'test',
         workflows: mockWorkflows,
+        jobId: 'xxx',
       });
 
       expect(requestFromAPI).toHaveBeenCalledTimes(2);
@@ -119,6 +118,7 @@ describe('Batch Service', () => {
         namespace: 'default',
         reason: 'test',
         workflows: mockWorkflows,
+        jobId: 'xxx',
       });
 
       expect(requestFromAPI).toHaveBeenCalledTimes(2);

src/lib/services/batch-service.ts

@@ -1,7 +1,5 @@
 import { get } from 'svelte/store';
 
-import { v4 as uuidv4 } from 'uuid';
-
 import { Action } from '$lib/models/workflow-actions';
 import { getAuthUser } from '$lib/stores/auth-user';
 import { inProgressBatchOperation } from '$lib/stores/batch-operations';
@@ -28,6 +26,7 @@ import type { WorkflowExecution } from '$types/workflows';
 type CreateBatchOperationOptions = {
   namespace: string;
   reason: string;
+  jobId: string;
   query?: string;
   workflows?: WorkflowExecution[];
 };
@@ -83,7 +82,7 @@ const createBatchOperationRequest = (
   options: CreateBatchOperationOptions,
 ): StartBatchOperationRequest => {
   const body: StartBatchOperationRequest = {
-    jobId: uuidv4(),
+    jobId: options.jobId,
     namespace: options.namespace,
     reason: options.reason,
     ...batchActionToOperation(action),