Relaunch with edits

src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx

@@ -1,4 +1,4 @@
-import { Link, Typography } from '@material-ui/core';
+import { Button, Dialog, Link, Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import * as classnames from 'classnames';
@@ -14,9 +14,9 @@ import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes';
 import { ExecutionInputsOutputsModal } from '../ExecutionInputsOutputsModal';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
-import { RelaunchExecutionButton } from '../RelaunchExecution';
 import { TerminateExecutionButton } from '../TerminateExecution';
 import { executionIsTerminal } from '../utils';
+import { RelaunchExecutionForm } from './RelaunchExecutionForm';
 
 const useStyles = makeStyles((theme: Theme) => {
     const actionsMinWidth = theme.spacing(34);
@@ -91,6 +91,7 @@ export const ExecutionDetailsAppBarContent: React.FC<{
     const commonStyles = useCommonStyles();
     const styles = useStyles();
     const [showInputsOutputs, setShowInputsOutputs] = React.useState(false);
+    const [showRelaunchForm, setShowRelaunchForm] = React.useState(false);
 
     const { domain, name, project } = execution.id;
     const { duration, startedAt, phase, workflowId } = execution.closure;
@@ -114,11 +115,22 @@ export const ExecutionDetailsAppBarContent: React.FC<{
         );
     }
     const onClickShowInputsOutputs = () => setShowInputsOutputs(true);
+    const onClickRelaunch = () => setShowRelaunchForm(true);
+    const onCloseRelaunch = () => setShowRelaunchForm(false);
+
     const actionContent = executionIsTerminal(execution) ? (
-        <RelaunchExecutionButton
-            className={styles.actionButton}
-            execution={execution}
-        />
+        <Button
+            variant="outlined"
+            color="primary"
+            className={classnames(
+                styles.actionButton,
+                commonStyles.buttonWhiteOutlined
+            )}
+            onClick={onClickRelaunch}
+            size="small"
+        >
+            Relaunch
+        </Button>
     ) : (
         <TerminateExecutionButton className={styles.actionButton} />
     );
@@ -194,6 +206,17 @@ export const ExecutionDetailsAppBarContent: React.FC<{
                         {actionContent}
                     </div>
                 </div>
+                <Dialog
+                    scroll="paper"
+                    maxWidth="sm"
+                    fullWidth={true}
+                    open={showRelaunchForm}
+                >
+                    <RelaunchExecutionForm
+                        execution={execution}
+                        onClose={onCloseRelaunch}
+                    />
+                </Dialog>
             </NavBarContent>
             {modalContent}
         </>

src/components/Executions/ExecutionDetails/RelaunchExecutionForm.tsx

@@ -0,0 +1,44 @@
+import { WaitForData } from 'components/common';
+import { useWorkflow } from 'components/hooks';
+import { LaunchWorkflowForm } from 'components/Launch/LaunchWorkflowForm/LaunchWorkflowForm';
+import { useExecutionLaunchConfiguration } from 'components/Launch/LaunchWorkflowForm/useExecutionLaunchConfiguration';
+import { getWorkflowInputs } from 'components/Launch/LaunchWorkflowForm/utils';
+import { Execution, Workflow } from 'models';
+import * as React from 'react';
+
+export interface RelaunchExecutionFormProps {
+    execution: Execution;
+    onClose(): void;
+}
+
+const RenderForm: React.FC<RelaunchExecutionFormProps & {
+    workflow: Workflow;
+}> = ({ execution, onClose, workflow }) => {
+    const { workflowId } = execution.closure;
+    const workflowInputs = getWorkflowInputs(workflow);
+    const launchConfiguration = useExecutionLaunchConfiguration({
+        execution,
+        workflowInputs
+    });
+    return (
+        <WaitForData {...launchConfiguration}>
+            <LaunchWorkflowForm
+                initialParameters={launchConfiguration.value}
+                onClose={onClose}
+                workflowId={workflowId}
+            />
+        </WaitForData>
+    );
+};
+
+/** For a given execution, fetches the associated workflow and renders a
+ * `LaunchWorkflowForm` based on the workflow, launch plan, and inputs of the
+ * execution. */
+export const RelaunchExecutionForm: React.FC<RelaunchExecutionFormProps> = props => {
+    const workflow = useWorkflow(props.execution.closure.workflowId);
+    return (
+        <WaitForData {...workflow}>
+            {() => <RenderForm {...props} workflow={workflow.value} />}
+        </WaitForData>
+    );
+};

src/components/Executions/TaskExecutionDetails/TaskExecutionDetailsAppBarContent.tsx

@@ -1,4 +1,4 @@
-import { Link, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import * as classnames from 'classnames';
@@ -7,15 +7,11 @@ import { timestampToDate } from 'common/utils';
 import { useCommonStyles } from 'components/common/styles';
 import { NavBarContent } from 'components/Navigation/NavBarContent';
 import { interactiveTextDisabledColor, smallFontSize } from 'components/Theme';
-import { Execution, TaskExecution } from 'models';
+import { TaskExecution } from 'models';
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes';
-import { ExecutionInputsOutputsModal } from '../ExecutionInputsOutputsModal';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
-import { RelaunchExecutionButton } from '../RelaunchExecution';
-import { TerminateExecutionButton } from '../TerminateExecution';
-import { executionIsTerminal } from '../utils';
 
 const useStyles = makeStyles((theme: Theme) => {
     const actionsMinWidth = theme.spacing(34);

src/components/Launch/LaunchWorkflowForm/LaunchWorkflowForm.tsx

@@ -17,6 +17,7 @@ import {
 } from 'models';
 import * as React from 'react';
 import { formStrings } from './constants';
+import { InputValueCacheContext } from './inputValueCache';
 import { LaunchWorkflowFormInputs } from './LaunchWorkflowFormInputs';
 import { SearchableSelector } from './SearchableSelector';
 import { useStyles } from './styles';
@@ -63,7 +64,7 @@ export const LaunchWorkflowForm: React.FC<LaunchWorkflowFormProps> = props => {
     };
 
     return (
-        <>
+        <InputValueCacheContext.Provider value={state.inputValueCache}>
             <DialogTitle disableTypography={true} className={styles.header}>
                 <div className={styles.inputLabel}>{formStrings.title}</div>
                 <Typography variant="h6">{state.workflowName}</Typography>
@@ -152,6 +153,6 @@ export const LaunchWorkflowForm: React.FC<LaunchWorkflowFormProps> = props => {
                     </Button>
                 </DialogActions>
             </div>
-        </>
+        </InputValueCacheContext.Provider>
     );
 };