chore(dashboard): Remove job step icons

apps/dashboard/src/components/activity/activity-job-item.tsx

@@ -180,18 +180,18 @@ function getJobIcon(type?: StepTypeEnum) {
   return <Icon className="h-3.5 w-3.5" />;
 }
 
-function getJobColor(status: JobStatusEnum) {
+function getJobClasses(status: JobStatusEnum) {
   switch (status) {
     case JobStatusEnum.COMPLETED:
-      return 'success';
+      return 'text-success';
     case JobStatusEnum.FAILED:
-      return 'destructive';
+      return 'text-destructive';
     case JobStatusEnum.DELAYED:
-      return 'warning';
+      return 'text-warning';
     case JobStatusEnum.MERGED:
-      return 'neutral-300';
+      return 'text-neutral-300';
     default:
-      return 'neutral-300';
+      return 'text-neutral-300';
   }
 }
 
@@ -202,7 +202,10 @@ function JobDetails({ job }: { job: IActivityJob }) {
         {job.executionDetails && job.executionDetails.length > 0 && (
           <div className="flex flex-col gap-2">
             {job.executionDetails.map((detail, index) => (
-              <ExecutionDetailItem key={index} detail={detail} />
+              <ExecutionDetailItem
+                key={index}
+                detail={{ ...detail, status: job.executionDetails[job.executionDetails.length - 1].status }}
+              />
             ))}
           </div>
         )}
@@ -240,7 +243,7 @@ function JobStatusIndicator({ status }: JobStatusIndicatorProps) {
   return (
     <div className="relative flex-shrink-0">
       <div className="flex h-6 w-6 items-center justify-center rounded-full bg-white shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]">
-        <div className={`text-${getJobColor(status)} flex items-center justify-center`}>
+        <div className={`${getJobClasses(status)} flex items-center justify-center`}>
           <Icon className={cn('h-4 w-4', animationClass)} />
         </div>
       </div>

apps/dashboard/src/components/activity/constants.ts

@@ -1,8 +1,8 @@
+import { ActivityFiltersData } from '@/types/activity';
 import { ChannelTypeEnum, JobStatusEnum } from '@novu/shared';
 import { IconType } from 'react-icons/lib';
 import { RiCheckboxCircleFill, RiErrorWarningFill, RiForbidFill, RiLoader3Line, RiLoader4Fill } from 'react-icons/ri';
 import { StatusBadgeProps } from '../primitives/status-badge';
-import { ActivityFiltersData } from '@/types/activity';
 
 export const STATUS_STYLES = {
   completed: 'border-[#99e3bb] bg-[#e9faf0] text-[#99e3bb]',
@@ -62,6 +62,7 @@ export const JOB_STATUS_CONFIG: Record<
     icon: RiLoader3Line,
     color: 'warning',
     label: 'RUNNING',
+    animationClass: 'animate-spin',
   },
   [JobStatusEnum.DELAYED]: {
     variant: 'pending' as const,

apps/dashboard/src/components/activity/execution-detail-item.tsx

@@ -1,56 +1,17 @@
-import { RiErrorWarningLine, RiCheckboxCircleLine, RiLoader3Line } from 'react-icons/ri';
-import { format } from 'date-fns';
-import { cn } from '@/utils/ui';
-import { ActivityDetailCard } from './activity-detail-card';
 import { IExecutionDetail } from '@novu/shared';
+import { format } from 'date-fns';
 import { formatJSONString } from '../../utils/string';
+import { ActivityDetailCard } from './activity-detail-card';
 
 interface ExecutionDetailItemProps {
   detail: IExecutionDetail;
 }
 
-function getStatusConfig(status: string) {
-  switch (status.toLowerCase()) {
-    case 'success':
-      return {
-        icon: RiCheckboxCircleLine,
-        colorClass: 'text-success',
-      };
-    case 'failed':
-    case 'error':
-      return {
-        icon: RiErrorWarningLine,
-        colorClass: 'text-destructive',
-      };
-    case 'pending':
-    case 'queued':
-      return {
-        icon: RiLoader3Line,
-        colorClass: 'text-neutral-300',
-      };
-    default:
-      return {
-        icon: RiCheckboxCircleLine,
-        colorClass: 'text-success',
-      };
-  }
-}
-
-export function ExecutionDetailItem({ detail }: ExecutionDetailItemProps) {
-  const { icon: StatusIcon, colorClass } = getStatusConfig(detail.status);
+export function ExecutionDetailItem(props: ExecutionDetailItemProps) {
+  const { detail } = props;
 
   return (
     <div className="flex items-start gap-3">
-      <div className="flex h-full items-center pt-2">
-        <div
-          className={cn(
-            'flex items-center justify-center rounded-full bg-white shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]',
-            colorClass
-          )}
-        >
-          <StatusIcon className={cn('h-4 w-4', colorClass)} />
-        </div>
-      </div>
       <ActivityDetailCard
         title={detail.detail}
         timestamp={format(new Date(detail.createdAt), 'HH:mm:ss')}