fix: Executions page crashes when it cannot find iconUrl (#1270)

## Problem
Recently encountered an error in Plumber Admin where a user's executions
page crashed with an error complaining about iconUrl.

## Solution
Add optional chaining on iconUrl to avoid crashes and fallback to the
fallback icon instead.

## Tests
May not be easy to replicate, but do a sanity check that everything
still works
- [ ] Executions load properly
- [ ] Execution steps load properly
- [ ] Apps load properly in My Apps page
- [ ] App icons are shown properly when choosing app on create step

Author: kevinkim-ogp

packages/frontend/src/components/ExecutionStep/components/AppIconWithStatus.tsx

@@ -3,7 +3,7 @@ import { Box } from '@chakra-ui/react'
 import AppIcon from '@/components/AppIcon'
 
 interface AppIconWithStatusProps {
-  iconUrl: string
+  iconUrl?: string
   appName: string
   statusIcon: React.ReactElement
 }

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

@@ -69,7 +69,7 @@ export default function ExecutionStep({
         <HStack p={4} alignItems="center" justifyContent="space-between">
           <HStack gap={2}>
             <AppIconWithStatus
-              iconUrl={app.iconUrl}
+              iconUrl={app?.iconUrl}
               appName={appName}
               statusIcon={statusIcon}
             />

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

@@ -21,7 +21,7 @@ export default function FlowAppIcons(props: FlowAppIconsProps) {
       <AppIcon
         name={firstStep.name}
         variant="rounded"
-        url={firstStep.iconUrl}
+        url={firstStep?.iconUrl}
         h={8}
         w={8}
         isTrigger={true}
@@ -35,7 +35,7 @@ export default function FlowAppIcons(props: FlowAppIconsProps) {
         <AppIcon
           name={lastStep.name}
           variant="rounded"
-          url={lastStep.iconUrl}
+          url={lastStep?.iconUrl}
           h={8}
           w={8}
         />

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAndAddConnection/ConnectionHeader.tsx

@@ -43,7 +43,7 @@ export default function ConnectionHeader(props: ConnectionHeaderProps) {
       <Flex justifyContent="center" alignItems="center" gap={2} mt={2}>
         <AppLogoBox imageUrl={mainLogo} />
         <Icon as={BiTransferAlt} boxSize={6} color="base.content.default" />
-        <AppLogoBox imageUrl={selectedApp.iconUrl} />
+        <AppLogoBox imageUrl={selectedApp?.iconUrl} />
       </Flex>
       <Text textStyle="h4">{headerText}</Text>
     </Flex>

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseApp.tsx

@@ -319,7 +319,7 @@ export default function ChooseApp(props: ChooseAppProps) {
                       >
                         <Flex alignItems="center" gap={4}>
                           <Image
-                            src={app.iconUrl}
+                            src={app?.iconUrl}
                             boxSize={8}
                             borderStyle="solid"
                             fit="contain"

packages/frontend/src/pages/Application/index.tsx

@@ -60,7 +60,11 @@ export default function Application(): React.ReactElement | null {
     <>
       <Container>
         <Flex gap={4} mb={3} px={4} alignItems="center">
-          <AppIcon url={app.iconUrl} color={app.primaryColor} name={app.name} />
+          <AppIcon
+            url={app?.iconUrl}
+            color={app.primaryColor}
+            name={app.name}
+          />
           <Text textStyle="h4">{app.name}</Text>
         </Flex>