From 17d3fb71e075c893698fb215e25a5a70f7068efe Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Mon, 18 Nov 2024 09:53:55 -0600
Subject: [PATCH] Add custom input selection if signal definitions exist to
 allow for manual input

---
 .../lines-and-dots/workflow-details.svelte        |  5 +++--
 .../signal-confirmation-modal.svelte              | 15 ++++++++++++++-
 src/lib/layouts/workflow-header.svelte            |  2 +-
 src/lib/pages/workflow-metadata.svelte            |  2 --
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/lines-and-dots/workflow-details.svelte b/src/lib/components/lines-and-dots/workflow-details.svelte
index 4a46d0029..136d0f9a2 100644
--- a/src/lib/components/lines-and-dots/workflow-details.svelte
+++ b/src/lib/components/lines-and-dots/workflow-details.svelte
@@ -24,14 +24,13 @@
 
 <div class="flex flex-col gap-2">
   <div
-    class="grid w-full grid-flow-row grid-cols-1 gap-2 rounded-xl p-2 text-sm lg:grid-cols-3 xl:grid-cols-4"
+    class="grid w-full grid-flow-row grid-cols-1 gap-x-4 gap-y-2 text-sm lg:grid-cols-3 lg:gap-y-1 xl:grid-cols-4"
   >
     <WorkflowDetail
       content={elapsedTime}
       class="order-1 font-mono text-xl"
       icon="clock"
     />
-
     <WorkflowDetail
       title={translate('common.start')}
       tooltip={$relativeTime
@@ -44,6 +43,7 @@
       content={formatDate(workflow?.startTime, $timeFormat, {
         relative: $relativeTime,
       })}
+      badge
       class="order-2"
     />
 
@@ -63,6 +63,7 @@
             relative: $relativeTime,
           })
         : '-'}
+      badge
       class="order-3 lg:order-5 xl:order-6"
     />
     <WorkflowDetail
diff --git a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
index ca33bc3a0..eb0dedb5c 100644
--- a/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/signal-confirmation-modal.svelte
@@ -28,6 +28,7 @@
   let error: string = '';
   let loading = false;
   let name = '';
+  let customSignal = false;
 
   let encoding: Writable<PayloadInputEncoding> = writable(defaultEncoding);
   let input = '';
@@ -36,6 +37,7 @@
     open = false;
     name = '';
     input = '';
+    customSignal = false;
     $encoding = defaultEncoding;
   };
 
@@ -64,6 +66,11 @@
       loading = false;
     }
   };
+
+  const handleCustom = () => {
+    customSignal = true;
+    name = '';
+  };
 </script>
 
 <Modal
@@ -80,18 +87,24 @@
 >
   <h3 slot="title">{translate('workflows.signal-modal-title')}</h3>
   <div slot="content" class="flex flex-col gap-4">
-    {#if signalDefinitions?.length > 0}
+    {#if signalDefinitions?.length > 0 && !customSignal}
       <Select
         id="signal-select"
         label={translate('workflows.signal-name-label')}
         class="min-w-fit"
         bind:value={name}
         data-testid="signal-select"
+        placeholder="Select a signal"
         required
       >
         {#each signalDefinitions as { name: value, description = '' }}
           <Option {value} {description}>{value}</Option>
         {/each}
+        <Option
+          on:click={handleCustom}
+          value="custom"
+          description="Input signal name">Custom</Option
+        >
       </Select>
     {:else}
       <Input
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index aca110765..c334bd1d1 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -143,7 +143,7 @@
   {/if}
   <WorkflowDetails />
   <Tabs>
-    <TabList class="flex flex-wrap gap-6 p-4 pl-0" label="workflow detail">
+    <TabList class="flex flex-wrap gap-6 pb-1 pt-4" label="workflow detail">
       <Tab
         label={translate('workflows.history-tab')}
         id="history-tab"
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index 7b692e371..047038ab3 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -13,7 +13,6 @@
       <h3>
         {translate('events.attribute-group.search-attributes')}
       </h3>
-      <div class="h-0.5 rounded-full bg-inverse" />
       <PayloadDecoder
         value={{ searchAttributes: workflow.searchAttributes }}
         key="searchAttributes"
@@ -31,7 +30,6 @@
   {#if workflow?.memo}
     <div class="mt-4 flex flex-col gap-2">
       <h3>{translate('common.memo')}</h3>
-      <div class="h-0.5 rounded-full bg-inverse" />
       <PayloadDecoder
         value={{ memo: workflow.memo }}
         key="memo"