From 7e44dcac0a403efe38e2f1c9e070c9d05d51ea84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nick=20M=C3=BCller?= <nmueller@blackshark.ai>
Date: Wed, 6 Jul 2022 20:03:41 +0200
Subject: [PATCH] Fixed undefined task input types access in
 NodeExecutionActions (#538)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fixed undefined task input types access in NodeExecutionActions
Issue occurred due to race condition while loading data, indentical fix applies as for #506

Signed-off-by: Nick Müller <nmueller@blackshark.ai>

* fix: cannot read properties of undefined (#506)

fix: nullref

Signed-off-by: Carina Ursu <carina@union.ai>

Co-authored-by: Carina Ursu <carina@union.ai>
(cherry picked from commit d38b98b2d68700415224ad6c621d79e928fded01)

Signed-off-by: Nick Müller <nmueller@blackshark.ai>

Co-authored-by: Carina Ursu <carinaelena@gmail.com>
---
 .../ExecutionDetailsActions.tsx               | 47 ++++++++++---------
 .../Tables/NodeExecutionActions.tsx           | 39 ++++++++-------
 2 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx
index 8177f5066..a4b39da2d 100644
--- a/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx
+++ b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx
@@ -1,6 +1,6 @@
 import { Button, Dialog, IconButton } from '@material-ui/core';
 import * as React from 'react';
-import { ResourceIdentifier, Identifier, Variable } from 'models/Common/types';
+import { ResourceIdentifier, Identifier } from 'models/Common/types';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { getTask } from 'models/Task/api';
 import { LaunchFormDialog } from 'components/Launch/LaunchForm/LaunchFormDialog';
@@ -67,37 +67,42 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
   const styles = useStyles();
 
   const [showLaunchForm, setShowLaunchForm] = React.useState<boolean>(false);
-  const [taskInputsTypes, setTaskInputsTypes] = React.useState<
-    Record<string, Variable> | undefined
-  >();
+
+  const [initialParameters, setInitialParameters] = React.useState<
+    TaskInitialLaunchParameters | undefined
+  >(undefined);
 
   const executionData = useNodeExecutionData(nodeExecutionId);
   const execution = useNodeExecution(nodeExecutionId);
-
-  const id = details.taskTemplate?.id as ResourceIdentifier | undefined;
+  const id = details.taskTemplate?.id;
 
   React.useEffect(() => {
-    const fetchTask = async () => {
-      const task = await getTask(id as Identifier);
-      setTaskInputsTypes(task.closure.compiledTask.template?.interface?.inputs?.variables);
-    };
-    if (id) fetchTask();
-  }, [id]);
+    if (!id) {
+      return;
+    }
+
+    (async () => {
+      const task = await getTask(id!);
+
+      const literals = executionData.value.fullInputs?.literals;
+      const taskInputsTypes = task.closure.compiledTask.template?.interface?.inputs?.variables;
+
+      const tempInitialParameters: TaskInitialLaunchParameters = {
+        values: literals && taskInputsTypes && literalsToLiteralValueMap(literals, taskInputsTypes),
+        taskId: id as Identifier | undefined,
+      };
+
+      setInitialParameters(tempInitialParameters);
+    })();
+  }, [details]);
 
   const [showDeck, setShowDeck] = React.useState(false);
   const onCloseDeck = () => setShowDeck(false);
 
-  if (!id) {
+  if (!id || !initialParameters) {
     return <></>;
   }
 
-  const literals = executionData.value.fullInputs?.literals;
-
-  const initialParameters: TaskInitialLaunchParameters = {
-    values: literals && taskInputsTypes && literalsToLiteralValueMap(literals, taskInputsTypes),
-    taskId: id as Identifier | undefined,
-  };
-
   const rerunOnClick = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
     setShowLaunchForm(true);
@@ -121,7 +126,7 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
         </Button>
       </div>
       <LaunchFormDialog
-        id={id}
+        id={id as ResourceIdentifier}
         initialParameters={initialParameters}
         showLaunchForm={showLaunchForm}
         setShowLaunchForm={setShowLaunchForm}
diff --git a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionActions.tsx b/packages/zapp/console/src/components/Executions/Tables/NodeExecutionActions.tsx
index 62ef88c35..430f82704 100644
--- a/packages/zapp/console/src/components/Executions/Tables/NodeExecutionActions.tsx
+++ b/packages/zapp/console/src/components/Executions/Tables/NodeExecutionActions.tsx
@@ -3,7 +3,7 @@ import { NodeExecution } from 'models/Execution/types';
 import * as React from 'react';
 import InputsAndOutputsIcon from '@material-ui/icons/Tv';
 import { RerunIcon } from '@flyteconsole/ui-atoms';
-import { Identifier, ResourceIdentifier, Variable } from 'models/Common/types';
+import { Identifier, ResourceIdentifier } from 'models/Common/types';
 import { LaunchFormDialog } from 'components/Launch/LaunchForm/LaunchFormDialog';
 import { getTask } from 'models/Task/api';
 import { useNodeExecutionData } from 'components/hooks/useNodeExecution';
@@ -27,13 +27,12 @@ export const NodeExecutionActions = (props: NodeExecutionActionsProps): JSX.Elem
   const [nodeExecutionDetails, setNodeExecutionDetails] = React.useState<
     NodeExecutionDetails | undefined
   >();
-  const [taskInputsTypes, setTaskInputsTypes] = React.useState<
-    Record<string, Variable> | undefined
-  >();
+  const [initialParameters, setInitialParameters] = React.useState<
+    TaskInitialLaunchParameters | undefined
+  >(undefined);
 
   const executionData = useNodeExecutionData(execution.id);
-  const literals = executionData.value.fullInputs?.literals;
-  const id = nodeExecutionDetails?.taskTemplate?.id as ResourceIdentifier;
+  const id = nodeExecutionDetails?.taskTemplate?.id;
 
   React.useEffect(() => {
     detailsContext.getNodeExecutionDetails(execution).then((res) => {
@@ -42,11 +41,23 @@ export const NodeExecutionActions = (props: NodeExecutionActionsProps): JSX.Elem
   });
 
   React.useEffect(() => {
-    const fetchTask = async () => {
+    if (!id) {
+      return;
+    }
+
+    (async () => {
       const task = await getTask(id as Identifier);
-      setTaskInputsTypes(task.closure.compiledTask.template?.interface?.inputs?.variables);
-    };
-    if (id) fetchTask();
+
+      const literals = executionData.value.fullInputs?.literals;
+      const taskInputsTypes = task.closure.compiledTask.template?.interface?.inputs?.variables;
+
+      const tempInitialParameters: TaskInitialLaunchParameters = {
+        values: literals && taskInputsTypes && literalsToLiteralValueMap(literals, taskInputsTypes),
+        taskId: id as Identifier | undefined,
+      };
+
+      setInitialParameters(tempInitialParameters);
+    })();
   }, [id]);
 
   // open the side panel for selected execution's detail
@@ -63,14 +74,10 @@ export const NodeExecutionActions = (props: NodeExecutionActionsProps): JSX.Elem
   };
 
   const renderRerunAction = () => {
-    if (!id) {
+    if (!id || !initialParameters) {
       return <></>;
     }
 
-    const initialParameters: TaskInitialLaunchParameters = {
-      values: literals && taskInputsTypes && literalsToLiteralValueMap(literals, taskInputsTypes),
-      taskId: id as Identifier | undefined,
-    };
     return (
       <>
         <Tooltip title={t('rerunTooltip')}>
@@ -79,7 +86,7 @@ export const NodeExecutionActions = (props: NodeExecutionActionsProps): JSX.Elem
           </IconButton>
         </Tooltip>
         <LaunchFormDialog
-          id={id}
+          id={id as ResourceIdentifier}
           initialParameters={initialParameters}
           showLaunchForm={showLaunchForm}
           setShowLaunchForm={setShowLaunchForm}