Add toast instead of redirect on Start Workflow with link to workflow (…

…#2402) * Add toast instead of redirect on start workflow with link to workflow * Keep error alert
temporalio · Oct 22, 2024 · e91708a · e91708a
1 parent c2047bf
commit e91708a
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 107 deletions.
diff --git a/src/lib/holocene/toaster.svelte b/src/lib/holocene/toaster.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Toaster } from '../stores/toaster';
 
+  import Link from './link.svelte';
   import ToastComponent from './toast.svelte';
 
   export let pop: Toaster['pop'];
@@ -16,9 +17,15 @@
   class="fixed bottom-5 right-5 z-[99999] flex flex-col items-end gap-2"
   role="log"
 >
-  {#each $toasts as { message, variant, id } (id)}
+  {#each $toasts as { message, variant, id, link } (id)}
     <ToastComponent {closeButtonLabel} {variant} {id} on:dismiss={dismissToast}>
-      {message}
+      {#if link}
+        <Link href={link}>
+          {message}
+        </Link>
+      {:else}
+        {message}
+      {/if}
     </ToastComponent>
   {/each}
 </div>
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
@@ -247,5 +247,6 @@ export const Strings = {
   'pending-workflow-task': 'Pending Workflow Task',
   'original-scheduled-time': 'Original Scheduled Time',
   'started-time': 'Started Time',
-  'starting-workflow': 'Starting Workflow...',
+  'start-workflow-success': 'Workflow started successfully',
+  'start-workflow-error': 'Error starting Workflow',
 } as const;
diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
@@ -4,7 +4,6 @@
   import { onMount } from 'svelte';
   import { v4 } from 'uuid';
 
-  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
 
   import PayloadInput, {
@@ -15,7 +14,6 @@
   import Button from '$lib/holocene/button.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Link from '$lib/holocene/link.svelte';
-  import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
   import { getPollers } from '$lib/services/pollers-service';
   import {
@@ -26,9 +24,11 @@
     customSearchAttributes,
     type SearchAttributeInput,
   } from '$lib/stores/search-attributes';
+  import { toaster } from '$lib/stores/toaster';
   import { workflowsSearchParams } from '$lib/stores/workflows';
   import { pluralize } from '$lib/utilities/pluralize';
   import {
+    routeForEventHistory,
     routeForTaskQueue,
     routeForWorkflows,
   } from '$lib/utilities/route-for';
@@ -37,8 +37,6 @@
 
   $: ({ namespace } = $page.params);
 
-  let loading = false;
-
   let workflowId = '';
   let taskQueue = '';
   let workflowType = '';
@@ -70,10 +68,9 @@
   });
 
   const onWorkflowStart = async () => {
-    loading = true;
     try {
       error = '';
-      await startWorkflow({
+      const { runId } = await startWorkflow({
         namespace,
         workflowId,
         taskQueue,
@@ -82,11 +79,22 @@
         encoding: $encoding,
         searchAttributes,
       });
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      goto(routeForWorkflows({ namespace }));
+      toaster.push({
+        variant: 'success',
+        duration: 5000,
+        message: translate('workflows.start-workflow-success'),
+        link: routeForEventHistory({
+          namespace,
+          workflow: workflowId,
+          run: runId,
+        }),
+      });
     } catch (e) {
-      error = e?.message || 'Error starting Workflow';
-      loading = false;
+      error = e?.message || translate('workflows.start-workflow-error');
+      toaster.push({
+        variant: 'error',
+        message: translate('workflows.start-workflow-error'),
+      });
     }
   };
 
@@ -161,103 +169,97 @@
 </script>
 
 <div class="flex w-full flex-col items-center pb-24">
-  {#if loading}
-    <Loading title={translate('workflows.starting-workflow')} />
-  {:else}
-    <div class="mb-6 flex w-full items-start">
-      <Link
-        href={`${routeForWorkflows({
-          namespace,
-        })}?${$workflowsSearchParams}`}
-        data-testid="back-to-workflows"
-        icon="chevron-left"
+  <div class="mb-6 flex w-full items-start">
+    <Link
+      href={`${routeForWorkflows({
+        namespace,
+      })}?${$workflowsSearchParams}`}
+      data-testid="back-to-workflows"
+      icon="chevron-left"
+    >
+      {translate('workflows.back-to-workflows')}
+    </Link>
+  </div>
+  <div class="flex w-full flex-col gap-4 lg:w-2/3 2xl:w-1/2">
+    <h1 class="mb-4 overflow-hidden" data-testid="start-workflow">
+      Start a Workflow
+    </h1>
+    <div
+      class="flex w-full flex-col items-center justify-between gap-2 md:flex-row md:gap-4"
+    >
+      <Input
+        id="workflowId"
+        required
+        bind:value={workflowId}
+        label="Workflow ID"
+        class="w-full grow"
+        on:blur={(e) => onInputChange(e, 'workflowId')}
+      />
+      <Button
+        class="mt-0 md:mt-6"
+        variant="secondary"
+        leadingIcon="retry"
+        on:click={generateRandomWorkflowId}>Random UUID</Button
       >
-        {translate('workflows.back-to-workflows')}
-      </Link>
     </div>
-    <div class="flex w-full flex-col gap-4 lg:w-2/3 2xl:w-1/2">
-      <h1 class="mb-4 overflow-hidden" data-testid="start-workflow">
-        Start a Workflow
-      </h1>
-      <div
-        class="flex w-full flex-col items-center justify-between gap-2 md:flex-row md:gap-4"
-      >
-        <Input
-          id="workflowId"
-          required
-          bind:value={workflowId}
-          label="Workflow ID"
-          class="w-full grow"
-          on:blur={(e) => onInputChange(e, 'workflowId')}
-        />
-        <Button
-          class="mt-0 md:mt-6"
-          variant="secondary"
-          leadingIcon="retry"
-          on:click={generateRandomWorkflowId}>Random UUID</Button
-        >
-      </div>
-      <div class="flex w-full items-center justify-between gap-4">
-        <Input
-          id="taskQueue"
-          required
-          bind:value={taskQueue}
-          label="Task Queue"
-          class="grow"
-          on:blur={(e) => onInputChange(e, 'taskQueue')}
-        />
-      </div>
-      {#if pollerCount !== undefined}
-        <Alert
-          intent={pollerCount > 0 ? 'success' : 'warning'}
-          title={pollerCount
-            ? 'Task Queue is Active'
-            : 'Task Queue is Inactive'}
-        >
-          <div class="flex w-full items-center justify-between">
-            <p>
-              {pollerCount}
-              {pluralize('Worker', pollerCount)}
-            </p>
-            <Link
-              href={routeForTaskQueue({ namespace, queue: taskQueue })}
-              newTab
-            >
-              View Task Queue
-            </Link>
-          </div></Alert
-        >
-      {/if}
+    <div class="flex w-full items-center justify-between gap-4">
       <Input
-        id="workflowType"
+        id="taskQueue"
         required
-        bind:value={workflowType}
-        label="Workflow Type"
-        on:blur={(e) => onInputChange(e, 'workflowType')}
+        bind:value={taskQueue}
+        label="Task Queue"
+        class="grow"
+        on:blur={(e) => onInputChange(e, 'taskQueue')}
       />
-      {#key inputRetrieved}
-        <PayloadInput bind:input bind:encoding />
-      {/key}
-      {#if viewAdvancedOptions}
-        <AddSearchAttributes bind:attributesToAdd={searchAttributes} />
-      {/if}
-      <div class="mt-4 flex w-full justify-between">
-        <Button
-          variant="ghost"
-          trailingIcon={viewAdvancedOptions ? 'chevron-up' : 'chevron-down'}
-          on:click={() => (viewAdvancedOptions = !viewAdvancedOptions)}
-          >{translate('common.more-options')}</Button
-        >
-        <Button
-          disabled={!enableStart}
-          on:click={onWorkflowStart}
-          data-testid="start-workflow-button"
-          >{translate('workflows.start-workflow')}</Button
-        >
-      </div>
-      {#if error}
-        <Alert intent="error" title={error} />
-      {/if}
     </div>
-  {/if}
+    {#if pollerCount !== undefined}
+      <Alert
+        intent={pollerCount > 0 ? 'success' : 'warning'}
+        title={pollerCount ? 'Task Queue is Active' : 'Task Queue is Inactive'}
+      >
+        <div class="flex w-full items-center justify-between">
+          <p>
+            {pollerCount}
+            {pluralize('Worker', pollerCount)}
+          </p>
+          <Link
+            href={routeForTaskQueue({ namespace, queue: taskQueue })}
+            newTab
+          >
+            View Task Queue
+          </Link>
+        </div></Alert
+      >
+    {/if}
+    <Input
+      id="workflowType"
+      required
+      bind:value={workflowType}
+      label="Workflow Type"
+      on:blur={(e) => onInputChange(e, 'workflowType')}
+    />
+    {#key inputRetrieved}
+      <PayloadInput bind:input bind:encoding />
+    {/key}
+    {#if viewAdvancedOptions}
+      <AddSearchAttributes bind:attributesToAdd={searchAttributes} />
+    {/if}
+    <div class="mt-4 flex w-full justify-between">
+      <Button
+        variant="ghost"
+        trailingIcon={viewAdvancedOptions ? 'chevron-up' : 'chevron-down'}
+        on:click={() => (viewAdvancedOptions = !viewAdvancedOptions)}
+        >{translate('common.more-options')}</Button
+      >
+      <Button
+        disabled={!enableStart}
+        on:click={onWorkflowStart}
+        data-testid="start-workflow-button"
+        >{translate('workflows.start-workflow')}</Button
+      >
+    </div>
+    {#if error}
+      <Alert intent="error" title={error} />
+    {/if}
+  </div>
 </div>
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
@@ -500,7 +500,7 @@ export async function startWorkflow({
   input,
   encoding,
   searchAttributes,
-}: StartWorkflowOptions) {
+}: StartWorkflowOptions): Promise<{ runId: string }> {
   const route = routeForApi('workflow', {
     namespace,
     workflowId,

diff --git a/src/lib/types/holocene.ts b/src/lib/types/holocene.ts
@@ -10,4 +10,5 @@ export interface Toast {
   variant?: ToastVariant;
   id?: string;
   duration?: number;
+  link?: string;
 }