From 73e2232269053c9aabb57228091c9616106b3e34 Mon Sep 17 00:00:00 2001
From: Sokratis Vidros <SokratisVidros@users.noreply.github.com>
Date: Fri, 24 Jan 2025 14:51:21 +0200
Subject: [PATCH] fix(dashboard): Another create with UI fixes (#7583)

---
 .../components/activity/activity-panel.tsx    | 72 +++++++++----------
 .../components/activity/activity-table.tsx    |  4 +-
 .../activity/components/activity-overview.tsx |  7 +-
 .../activity/components/overview-item.tsx     | 36 +++++++---
 apps/dashboard/src/pages/activity-feed.tsx    |  4 +-
 5 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/apps/dashboard/src/components/activity/activity-panel.tsx b/apps/dashboard/src/components/activity/activity-panel.tsx
index 07f5032b316..714c52a1230 100644
--- a/apps/dashboard/src/components/activity/activity-panel.tsx
+++ b/apps/dashboard/src/components/activity/activity-panel.tsx
@@ -83,46 +83,42 @@ export function ActivityPanel({
       transition={{ duration: 0.5, ease: 'easeOut' }}
       className="h-full"
     >
-      <div>
-        <div
-          className={cn(
-            'flex items-center gap-2 border-b border-t border-neutral-200 border-b-neutral-100 px-3 pb-2 pt-[7px]',
-            headerClassName,
-            overviewHeaderClassName
-          )}
-        >
-          <RiRouteFill className="h-3 w-3" />
-          <span className="text-foreground-950 text-sm font-medium">
-            {activity.template?.name || 'Deleted workflow'}
-          </span>
-        </div>
-        <ActivityOverview activity={activity} />
-
-        <div className={cn('flex items-center gap-2 border-b border-t border-neutral-100 p-2 px-3', headerClassName)}>
-          <RiPlayCircleLine className="h-3 w-3" />
-          <span className="text-foreground-950 text-sm font-medium">Logs</span>
-        </div>
-
-        {isMerged && (
-          <div className="px-3 py-3">
-            <InlineToast
-              ctaClassName="text-foreground-950"
-              variant={'tip'}
-              ctaLabel="View Execution"
-              onCtaClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-
-                if (activity._digestedNotificationId) {
-                  onActivitySelect(activity._digestedNotificationId);
-                }
-              }}
-              description="Remaining execution has been merged to an active Digest of an existing workflow execution."
-            />
-          </div>
+      <div
+        className={cn(
+          'flex items-center gap-2 border-b border-t border-neutral-200 border-b-neutral-100 px-3 pb-2 pt-[7px]',
+          headerClassName,
+          overviewHeaderClassName
         )}
-        <LogsSection jobs={activity.jobs} />
+      >
+        <RiRouteFill className="h-3 w-3" />
+        <span className="text-foreground-950 text-sm font-medium">{activity.template?.name || 'Deleted workflow'}</span>
       </div>
+      <ActivityOverview activity={activity} />
+
+      <div className={cn('flex items-center gap-2 border-b border-t border-neutral-100 p-2 px-3', headerClassName)}>
+        <RiPlayCircleLine className="h-3 w-3" />
+        <span className="text-foreground-950 text-sm font-medium">Logs</span>
+      </div>
+
+      {isMerged && (
+        <div className="px-3 py-3">
+          <InlineToast
+            ctaClassName="text-foreground-950"
+            variant={'tip'}
+            ctaLabel="View Execution"
+            onCtaClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+
+              if (activity._digestedNotificationId) {
+                onActivitySelect(activity._digestedNotificationId);
+              }
+            }}
+            description="Remaining execution has been merged to an active Digest of an existing workflow execution."
+          />
+        </div>
+      )}
+      <LogsSection jobs={activity.jobs} />
     </motion.div>
   );
 }
diff --git a/apps/dashboard/src/components/activity/activity-table.tsx b/apps/dashboard/src/components/activity/activity-table.tsx
index c33db4e0036..f7afd1ca8b4 100644
--- a/apps/dashboard/src/components/activity/activity-table.tsx
+++ b/apps/dashboard/src/components/activity/activity-table.tsx
@@ -80,7 +80,7 @@ export function ActivityTable({
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.2 }}
-          className="flex min-h-full min-w-[800px] flex-1 flex-col"
+          className="flex min-h-full flex-1 flex-col"
         >
           <Table
             isLoading={isLoading}
@@ -181,7 +181,7 @@ function getSubscriberDisplay(subscriber?: Pick<ISubscriber, '_id' | 'subscriber
   if (!subscriber) return '';
 
   if (subscriber.firstName || subscriber.lastName) {
-    return `• ${subscriber.firstName || ''} ${subscriber.lastName || ''}`;
+    return `• ${subscriber.firstName || ''} ${subscriber.lastName || ''}`.trim();
   }
 
   return '';
diff --git a/apps/dashboard/src/components/activity/components/activity-overview.tsx b/apps/dashboard/src/components/activity/components/activity-overview.tsx
index 4d38af1d342..9551bb59e10 100644
--- a/apps/dashboard/src/components/activity/components/activity-overview.tsx
+++ b/apps/dashboard/src/components/activity/components/activity-overview.tsx
@@ -37,7 +37,12 @@ export function ActivityOverview({ activity }: ActivityOverviewProps) {
 
         <OverviewItem label="Transaction ID" value={activity.transactionId} isCopyable />
 
-        <OverviewItem label="Subscriber ID" value={activity.subscriber?.subscriberId ?? ''} isCopyable />
+        <OverviewItem
+          label="Subscriber ID"
+          isDeleted={!activity.subscriber}
+          value={(activity.subscriber?.subscriberId || activity._subscriberId) ?? ''}
+          isCopyable
+        />
 
         <OverviewItem label="Triggered at" value={format(new Date(activity.createdAt), 'MMM d yyyy, HH:mm:ss')}>
           <TimeDisplayHoverCard
diff --git a/apps/dashboard/src/components/activity/components/overview-item.tsx b/apps/dashboard/src/components/activity/components/overview-item.tsx
index f33b14949a7..9c43dd9252a 100644
--- a/apps/dashboard/src/components/activity/components/overview-item.tsx
+++ b/apps/dashboard/src/components/activity/components/overview-item.tsx
@@ -1,24 +1,42 @@
 import { CopyButton } from '@/components/primitives/copy-button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/primitives/tooltip';
 import { cn } from '@/utils/ui';
 import { ReactNode } from 'react';
 
 interface OverviewItemProps {
-  label: string;
-  value?: string;
+  children?: ReactNode;
   className?: string;
-  isMonospace?: boolean;
   isCopyable?: boolean;
-  children?: ReactNode;
+  isDeleted?: boolean;
+  isMonospace?: boolean;
+  label: string;
+  value?: string;
 }
 
 export function OverviewItem({
-  label,
-  value,
+  children,
   className = '',
-  isMonospace = true,
   isCopyable = false,
-  children,
+  isDeleted = false,
+  isMonospace = true,
+  label,
+  value,
 }: OverviewItemProps) {
+  const childrenComponent = children || (
+    <span className={cn('text-foreground-600 text-xs', { 'font-mono': isMonospace, 'line-through': isDeleted })}>
+      {value}
+    </span>
+  );
+
+  const wrappedChildren = isDeleted ? (
+    <Tooltip>
+      <TooltipTrigger>{childrenComponent}</TooltipTrigger>
+      <TooltipContent>Resource was deleted.</TooltipContent>
+    </Tooltip>
+  ) : (
+    childrenComponent
+  );
+
   return (
     <div className={cn('group flex items-center justify-between', className)}>
       <span className="text-foreground-950 text-xs font-medium">{label}</span>
@@ -31,7 +49,7 @@ export function OverviewItem({
             className="text-foreground-600 mr-0 size-3 gap-0 p-0 opacity-0 transition-opacity group-hover:opacity-100"
           ></CopyButton>
         )}
-        {children || <span className={cn('text-foreground-600 text-xs', isMonospace && 'font-mono')}>{value}</span>}
+        {wrappedChildren}
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/pages/activity-feed.tsx b/apps/dashboard/src/pages/activity-feed.tsx
index 998d7cb0d0a..bfacdf403b5 100644
--- a/apps/dashboard/src/pages/activity-feed.tsx
+++ b/apps/dashboard/src/pages/activity-feed.tsx
@@ -42,7 +42,7 @@ export function ActivityFeed() {
         />
         <div className="relative flex h-[calc(100vh-88px)]">
           <ResizablePanelGroup direction="horizontal">
-            <ResizablePanel defaultSize={70} minSize={40}>
+            <ResizablePanel defaultSize={70} minSize={50}>
               <ActivityTable
                 selectedActivityId={activityItemId}
                 onActivitySelect={handleActivitySelect}
@@ -56,7 +56,7 @@ export function ActivityFeed() {
               {activityItemId && (
                 <>
                   <ResizableHandle />
-                  <ResizablePanel defaultSize={30} minSize={30} maxSize={50}>
+                  <ResizablePanel defaultSize={35} minSize={35} maxSize={50}>
                     <motion.div
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}