Add prefix for Metadata to show Activity Type in Timeline (#2542)

* Add prefix for metadata to show ActivityType in Timeline

* Get rid of value var

Author: Alex-Tideman

Diff for: src/lib/components/event/event-summary-row.svelte

@@ -200,6 +200,9 @@
         {/if}
       </div>
     {/if}
+    {#if primaryAttribute?.key}
+      <EventDetailsRow {...primaryAttribute} {attributes} />
+    {/if}
     {#if currentEvent?.userMetadata?.summary}
       <MetadataDecoder
         value={currentEvent.userMetadata.summary}
@@ -214,12 +217,8 @@
               {decodedValue}
             </Badge>
           </div>
-        {:else}
-          <EventDetailsRow {...primaryAttribute} {attributes} />
         {/if}
       </MetadataDecoder>
-    {:else if primaryAttribute?.key}
-      <EventDetailsRow {...primaryAttribute} {attributes} />
     {/if}
     {#if currentEvent?.links?.length}
       <EventLink
@@ -235,7 +234,7 @@
         {attributes}
       />
     {/if}
-    {#if compact && secondaryAttribute?.key}
+    {#if compact && secondaryAttribute?.key && !currentEvent?.userMetadata?.summary}
       <EventDetailsRow {...secondaryAttribute} {attributes} />
     {/if}
   </td>

Diff for: src/lib/components/event/metadata-decoder.svelte

@@ -11,8 +11,11 @@
 
   export let value: Payload | undefined = undefined;
   export let fallback: string = '';
+  export let prefix: string = '';
   export let onDecode: (decodedValue: string) => void | undefined = undefined;
 
+  const maxLength = 100;
+
   let decodedValue = '';
 
   $: endpoint = getCodecEndpoint($page.data.settings);
@@ -28,6 +31,14 @@
     },
   };
 
+  const setPrefix = (metadata: string) => {
+    if (prefix) {
+      metadata = `${prefix} • ${metadata}`;
+    }
+    if (metadata.length < maxLength) return metadata;
+    return metadata.slice(0, maxLength) + '...';
+  };
+
   $: decodePayload = async (_value: Payload | undefined) => {
     if (!_value) return fallback;
     if (decodedValue) return decodedValue;
@@ -38,11 +49,11 @@
     );
 
     if (typeof metadata === 'string') {
+      decodedValue = setPrefix(metadata);
       if (onDecode) {
-        onDecode(metadata);
+        onDecode(decodedValue);
       }
-      decodedValue = metadata;
-      return metadata;
+      return decodedValue;
     }
 
     decodedValue = fallback;

Diff for: src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte

@@ -6,6 +6,7 @@
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { setActiveGroup } from '$lib/stores/active-events';
   import { getMillisecondDuration } from '$lib/utilities/format-time';
+  import { isActivityTaskScheduledEvent } from '$lib/utilities/is-event-type';
 
   import {
     CategoryIcon,
@@ -129,6 +130,9 @@
       {:else}
         <MetadataDecoder
           value={group?.userMetadata?.summary}
+          prefix={isActivityTaskScheduledEvent(group.initialEvent)
+            ? group?.displayName
+            : ''}
           fallback={group?.displayName}
           let:decodedValue
         >