diff --git a/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx index 8177f5066a..a4b39da2d7 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(false); - const [taskInputsTypes, setTaskInputsTypes] = React.useState< - Record | 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) => { e.stopPropagation(); setShowLaunchForm(true); @@ -121,7 +126,7 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS (); - const [taskInputsTypes, setTaskInputsTypes] = React.useState< - Record | 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 ( <> @@ -79,7 +86,7 @@ export const NodeExecutionActions = (props: NodeExecutionActionsProps): JSX.Elem