Refactor event details link, add link support for endpointId (#2360)

* Refactor event details link, add link support for endpointId. * More refactoring * Make reactive with type * Refactor to add link to timeline details * Update based on feedback. Remove max width constraints * Add shrink-0 to icon * Lots of small styling updates
temporalio · Oct 3, 2024 · 5b6371b · 5b6371b
1 parent 7a19ad5
commit 5b6371b
Show file tree

Hide file tree

Showing 14 changed files with 174 additions and 242 deletions.
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
@@ -25,8 +25,12 @@
       {#each group.eventList as groupEvent}
         {@const attributes = formatAttributes(groupEvent)}
         {@const details = Object.entries(attributes)}
-        <div class="w-full border-subtle [&:not(:last-child)]:border-r-2">
-          <div class="flex w-full justify-between bg-subtle px-2 py-1">
+        <div
+          class="w-full border-subtle xl:w-1/3 [&:not(:last-child)]:border-r-2"
+        >
+          <div
+            class="flex w-full flex-wrap justify-between bg-subtle px-2 py-1"
+          >
             <div class="flex gap-2">
               {groupEvent.id}
               {spaceBetweenCapitalLetters(groupEvent.name)}

diff --git a/src/lib/components/event/event-details-link.svelte b/src/lib/components/event/event-details-link.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import Link from '$lib/holocene/link.svelte';
+  import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
+  import { type EventLinkType } from '$lib/utilities/get-single-attribute-for-event';
+  import {
+    routeForEventHistory,
+    routeForNexusEndpoint,
+    routeForTaskQueue,
+  } from '$lib/utilities/route-for';
+
+  export let value: string;
+  export let attributes: CombinedAttributes;
+  export let type: EventLinkType;
+  export let light = false;
+
+  $: ({ workflow, namespace } = $page.params);
+
+  $: executionLink = routeForEventHistory({
+    namespace,
+    workflow,
+    run: value,
+  });
+  $: taskQueueLink = routeForTaskQueue({ namespace, queue: value });
+  $: childWorkflowLink = routeForEventHistory({
+    namespace,
+    workflow: attributes.workflowExecutionWorkflowId,
+    run: attributes.workflowExecutionRunId,
+  });
+  $: nexusEndpointLink = routeForNexusEndpoint(value);
+
+  $: hrefs = {
+    execution: executionLink,
+    'task-queue': taskQueueLink,
+    'child-workflow': childWorkflowLink,
+    'nexus-endpoint': nexusEndpointLink,
+  } as Record<Exclude<EventLinkType, 'none'>, string>;
+
+  $: href = hrefs[type];
+</script>
+
+<Link class="truncate break-all" {href} {light}>
+  {value}
+</Link>
diff --git a/src/lib/components/event/event-details-row-expanded.svelte b/src/lib/components/event/event-details-row-expanded.svelte
@@ -1,37 +1,30 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import Link from '$lib/holocene/link.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
   import { translate } from '$lib/i18n/translate';
   import { timeFormat } from '$lib/stores/time-format';
   import { format } from '$lib/utilities/format-camel-case';
   import { formatDate } from '$lib/utilities/format-date';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import {
+    displayLinkType,
     getCodeBlockValue,
     getStackTrace,
-    shouldDisplayAsExecutionLink,
-    shouldDisplayAsTaskQueueLink,
     shouldDisplayAsTime,
-    shouldDisplayChildWorkflowLink,
   } from '$lib/utilities/get-single-attribute-for-event';
-  import {
-    routeForEventHistory,
-    routeForTaskQueue,
-  } from '$lib/utilities/route-for';
 
+  import EventDetailsLink from './event-details-link.svelte';
   import PayloadDecoder from './payload-decoder.svelte';
 
   export let key: string;
   export let value: string | number | Record<string, unknown>;
   export let attributes: CombinedAttributes;
   export let inline = false;
 
-  const { workflow, namespace } = $page.params;
   $: codeBlockValue = getCodeBlockValue(value);
   $: stackTrace = getStackTrace(codeBlockValue);
+  $: linkType = displayLinkType(key, attributes);
 </script>
 
 <div class="flex {$$props.class}">
@@ -88,49 +81,27 @@
         </div>
       {/if}
     </div>
-  {:else if shouldDisplayAsExecutionLink(key)}
-    <div class="content detail-row">
-      <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
-        <Link
-          href={routeForEventHistory({
-            namespace,
-            workflow,
-            run: value.toString(),
-          })}
-        >
-          {value}
-        </Link>
-      </Badge>
-    </div>
-  {:else if shouldDisplayChildWorkflowLink(key, attributes)}
+  {:else if linkType !== 'none'}
     <div class="content detail-row">
       <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
-        <Link
-          href={routeForEventHistory({
-            namespace: attributes?.namespace || namespace,
-            workflow: attributes.workflowExecutionWorkflowId,
-            run: attributes.workflowExecutionRunId,
-          })}
-        >
-          {value}
-        </Link>
-      </Badge>
-    </div>
-  {:else if shouldDisplayAsTaskQueueLink(key)}
-    <div class="content detail-row">
-      <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
-        <Link href={routeForTaskQueue({ namespace, queue: value.toString() })}>
-          {value}
-        </Link>
-      </Badge>
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={String(value)}
+      >
+        <Badge type="subtle" class="select-none">
+          <EventDetailsLink
+            value={String(value)}
+            {attributes}
+            type={linkType}
+          />
+        </Badge>
+      </Copyable>
     </div>
   {:else}
     <div class="content detail-row">
       <p class="text-sm">{format(key)}</p>
-      <Badge type="subtle">
+      <Badge type="subtle" class="inline-block whitespace-pre-wrap">
         {shouldDisplayAsTime(key) ? formatDate(value, $timeFormat) : value}
       </Badge>
     </div>
@@ -147,6 +118,6 @@
   }
 
   .detail-row {
-    @apply flex w-full items-center gap-4 py-1 text-left xl:flex;
+    @apply flex w-full items-center gap-2 py-1 text-left;
   }
 </style>
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
@@ -1,127 +1,56 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
-  import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
   import { format } from '$lib/utilities/format-camel-case';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
-  import {
-    shouldDisplayAsExecutionLink,
-    shouldDisplayAsTaskQueueLink,
-    shouldDisplayChildWorkflowLink,
-  } from '$lib/utilities/get-single-attribute-for-event';
-  import {
-    routeForEventHistory,
-    routeForTaskQueue,
-  } from '$lib/utilities/route-for';
+  import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';
 
+  import EventDetailsLink from './event-details-link.svelte';
   import PayloadDecoder from './payload-decoder.svelte';
 
   export let key: string;
   export let value: string | Record<string, unknown> | Payloads;
   export let attributes: CombinedAttributes;
   export let showKey = true;
 
-  const { workflow, namespace } = $page.params;
+  $: linkType = displayLinkType(key, attributes);
 </script>
 
 {#if key}
   <div
-    class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
+    class="invisible flex w-0 items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 md:visible md:w-auto"
   >
     {#if showKey}
-      <p class="max-w-fit whitespace-nowrap text-right text-xs">
+      <p class="truncate whitespace-nowrap text-right text-xs">
         {format(key)}
       </p>
     {/if}
     {#if typeof value === 'object'}
       <div
-        class="flex w-full items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
+        class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
       >
         <PayloadDecoder {value} key="payloads" let:decodedValue>
           <div class="payload {$$props.class}">
             <code><pre>{decodedValue}</pre></code>
           </div>
         </PayloadDecoder>
       </div>
-    {:else if shouldDisplayAsExecutionLink(key)}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-            container-class="xl:flex-row"
-          >
-            <Badge type="subtle" class="select-none">
-              <Link
-                class="truncate"
-                href={routeForEventHistory({
-                  namespace,
-                  workflow,
-                  run: value,
-                })}
-              >
-                {value}
-              </Link>
-            </Badge>
-          </Copyable>
-        </div>
-      </div>
-    {:else if shouldDisplayChildWorkflowLink(key, attributes)}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-            container-class="xl:flex-row"
-          >
-            <Badge type="subtle" class="select-none">
-              <Link
-                class="truncate"
-                href={routeForEventHistory({
-                  namespace,
-                  workflow: attributes.workflowExecutionWorkflowId,
-                  run: attributes.workflowExecutionRunId,
-                })}
-              >
-                {value}
-              </Link>
-            </Badge>
-          </Copyable>
-        </div>
-      </div>
-    {:else if shouldDisplayAsTaskQueueLink(key)}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <div class="truncate text-sm">
-          <Copyable
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            content={value}
-          >
-            <Badge type="subtle" class="select-none">
-              <Link
-                class="truncate"
-                href={routeForTaskQueue({ namespace, queue: value })}
-              >
-                {value}
-              </Link>
-            </Badge>
-          </Copyable>
-        </div>
-      </div>
-    {:else}
-      <div class="flex w-full items-center gap-2 pr-1">
-        <p class="truncate text-right text-sm xl:text-left">
-          <Badge type="subtle" class="select-none">
-            {value}
-          </Badge>
+    {:else if linkType !== 'none'}
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={value}
+      >
+        <p class="select-none truncate">
+          <EventDetailsLink {value} {attributes} type={linkType} />
         </p>
-      </div>
+      </Copyable>
+    {:else}
+      <Badge type="subtle" class="block min-w-fit select-none truncate">
+        {value}
+      </Badge>
     {/if}
   </div>
 {/if}

diff --git a/src/lib/components/event/event-link.svelte b/src/lib/components/event/event-link.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div
-  class="flex max-w-lg flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
+  class="flex flex-row items-center gap-2 overflow-hidden first:pt-0 last:border-b-0 xl:max-w-xl {$$props.class}"
 >
   <p class="max-w-fit whitespace-nowrap text-right text-xs">Link</p>
   <div class="overflow-hidden truncate pr-1">