PLU-401: Deleted steps are removed from past executions (#850)

## Problem
- When a step is deleted, the related execution steps are removed from
the steps of past executions in the Executions tab.
- Current query ignores execution steps that have been soft deleted
(soft delete happens when user deletes a step in the Pipe editor)
- Execution row app icons do not reflect the correct apps that were
executed, only shows the current apps in the Pipe


## Solution
- Query for all execution steps regardless of delete status to reflect
the execution accurately.
- Query and display the app keys for each execution

## Before & After Screenshots

**BEFORE**:

![image](https://github.com/user-attachments/assets/d435722a-a43c-4ff2-95bb-b41f38c972db)
![image
(1)](https://github.com/user-attachments/assets/f4065de4-0d6b-4078-a8d5-6da34fd89bec)
<img width="1213" alt="Screenshot 2025-02-06 at 11 01 13 PM"
src="https://github.com/user-attachments/assets/de6bb390-b3fb-4709-ae84-5056e937f38b"
/>


**AFTER**:
![Screenshot 2025-02-06 at 9 40
32 PM](https://github.com/user-attachments/assets/0f2ca52e-6795-4ebf-826d-f32a4a89598c)
<img width="1512" alt="Screenshot 2025-02-06 at 9 41 06 PM"
src="https://github.com/user-attachments/assets/04f0c526-dfa0-431c-9410-75f87fb05a61"
/>
<img width="1512" alt="Screenshot 2025-02-06 at 9 41 19 PM"
src="https://github.com/user-attachments/assets/9bd148cd-8564-40c6-b61d-8e6d5e760ec5"
/>
![Screenshot 2025-02-06 at 10 59
11 PM](https://github.com/user-attachments/assets/91c2df69-c899-4419-8d27-7e647a7b8355)


## Tests
- [x] Existing pipes execute as usual
- [x] Failed pipes show error as usual
- [x] New executions follow the updated steps in the Pipe
- [x] Past executions reflect the correct steps prior to the updates

Author: kevinkim-ogp

packages/backend/src/graphql/queries/get-execution-steps.ts

@@ -28,6 +28,7 @@ const getExecutionSteps: QueryResolvers['getExecutionSteps'] = async (
         .from('execution_steps')
         .groupBy('step_id')
         .where('execution_id', '=', execution.id)
+        .withSoftDeleted()
     })
     .join('latest_steps', (builder) => {
       builder

packages/backend/src/graphql/queries/get-executions.ts

@@ -23,7 +23,11 @@ const getExecutions: QueryResolvers['getExecutions'] = async (
 
   const executionsQuery = context.currentUser
     .$relatedQuery('executions')
+    .withGraphFetched({
+      executionSteps: true,
+    })
     .where(filterBuilder)
+    .withSoftDeleted()
     .orderBy('created_at', 'desc')
 
   return paginate(executionsQuery, params.limit, params.offset)

packages/backend/src/graphql/schema.graphql

@@ -296,6 +296,7 @@ type ExecutionStep {
   stepId: String
   step: Step
   appKey: String
+  iconUrl: String
   jobId: String
   status: String
   dataIn: JSONObject
@@ -380,6 +381,7 @@ type Execution {
   updatedAt: String
   status: String
   flow: Flow
+  executionSteps: [ExecutionStep]
 }
 
 type BulkRetryExecutionsResult {

packages/backend/src/models/execution-step.ts

@@ -1,5 +1,7 @@
 import { IExecutionStepMetadata, IJSONObject } from '@plumber/types'
 
+import appConfig from '@/config/app'
+
 import Base from './base'
 import Execution from './execution'
 import Step from './step'
@@ -44,6 +46,10 @@ class ExecutionStep extends Base {
     },
   }
 
+  static get virtualAttributes() {
+    return ['iconUrl']
+  }
+
   static relationMappings = () => ({
     execution: {
       relation: Base.BelongsToOneRelation,
@@ -66,6 +72,14 @@ class ExecutionStep extends Base {
   get isFailed() {
     return this.status === 'failure'
   }
+
+  get iconUrl() {
+    if (!this.appKey) {
+      return null
+    }
+
+    return `${appConfig.baseUrl}/apps/${this.appKey}/assets/favicon.svg`
+  }
 }
 
 export default ExecutionStep

packages/frontend/src/components/ExecutionRow/index.tsx

@@ -27,7 +27,7 @@ type ExecutionRowProps = {
 
 export default function ExecutionRow(props: ExecutionRowProps): ReactElement {
   const { execution } = props
-  const { flow } = execution
+  const { flow, executionSteps } = execution
 
   const createdAt = DateTime.fromMillis(parseInt(execution.createdAt, 10))
   const relativeCreatedAt = createdAt.toRelative()
@@ -63,7 +63,12 @@ export default function ExecutionRow(props: ExecutionRowProps): ReactElement {
           >
             <GridItem area="apps">
               <HStack>
-                <FlowAppIcons steps={flow.steps} />
+                <FlowAppIcons
+                  // NOTE: passing executionSteps into steps props to preserve deleted steps
+                  steps={[...executionSteps].sort(
+                    (a, b) => Number(a.createdAt) - Number(b.createdAt),
+                  )}
+                />
               </HStack>
             </GridItem>
             <GridItem area="title">

packages/frontend/src/graphql/queries/get-executions.ts

@@ -24,6 +24,14 @@ export const GET_EXECUTIONS = gql`
           createdAt
           updatedAt
           status
+          executionSteps {
+            id
+            appKey
+            createdAt
+            updatedAt
+            status
+            iconUrl
+          }
         }
       }
     }