Handle deleted steps in flow run details view

Author: Roman Snapko

packages/react-ui/src/app/features/builder/run-details/flow-step-details-card-item.tsx

@@ -6,7 +6,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@openops/components/ui';
-import { ChevronRight } from 'lucide-react';
+import { ChevronRight, TrashIcon } from 'lucide-react';
 import React, { useCallback, useMemo } from 'react';
 
 import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
@@ -18,6 +18,7 @@ import { ActionType, FlagId, flowHelper } from '@openops/shared';
 import { flagsHooks } from '@/app/common/hooks/flags-hooks';
 import { useCenterWorkflowViewOntoStep } from '@/app/features/builder/hooks/center-workflow-view-onto-step';
 import { StepStatusIcon } from '@/app/features/flow-runs/components/step-status-icon';
+import { t } from 'i18next';
 import { RUN_DETAILS_STEP_CARD_ID_PREFIX } from './constants';
 import { LoopIterationInput } from './loop-iteration-input';
 
@@ -145,10 +146,19 @@ const FlowStepDetailsCardItem = ({
                 />
               </Button>
             )}
-            <img className="w-6 h-6" alt={'logo'} src={stepMetadata?.logoUrl} />
-            <div className="break-all truncate">{`${stepIndex + 1}. ${
-              step?.displayName
-            }`}</div>
+            {stepMetadata?.logoUrl ? (
+              <img
+                className="w-6 h-6"
+                alt={'logo'}
+                src={stepMetadata?.logoUrl}
+              />
+            ) : (
+              <TrashIcon className="w-6 h-6" />
+            )}
+
+            <div className="break-all truncate">{`${
+              stepIndex !== -1 ? `${stepIndex + 1}. ` : ''
+            }${step?.displayName ?? t('Deleted Step')}`}</div>
             <div className="w-2"></div>
             <div className="flex gap-1 justify-end items-center flex-grow">
               {isLoopStep && (