From dfa7e260372e7743efcc42bb5c9f03742e776fa8 Mon Sep 17 00:00:00 2001
From: Randy Schott <1815175+schottra@users.noreply.github.com>
Date: Tue, 1 Sep 2020 17:27:06 -0700
Subject: [PATCH] feat: Allow cloning of running executions (#93)

* feat: add clone functionality for running executions

* fix: updating deprecated method in test
---
 src/components/Errors/test/DataError.test.tsx |  4 +-
 .../ExecutionDetailsAppBarContent.tsx         | 54 ++++++----
 .../Executions/ExecutionDetails/constants.ts  |  4 +
 .../ExecutionDetailsAppBarContent.test.tsx    | 98 +++++++++++++++++++
 src/components/common/MoreOptionsMenu.tsx     | 79 +++++++++++++++
 src/components/common/constants.ts            |  5 +
 .../common/test/MoreOptionsMenu.test.tsx      | 72 ++++++++++++++
 src/test/utils.ts                             |  2 +-
 8 files changed, 298 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
 create mode 100644 src/components/common/MoreOptionsMenu.tsx
 create mode 100644 src/components/common/test/MoreOptionsMenu.test.tsx

diff --git a/src/components/Errors/test/DataError.test.tsx b/src/components/Errors/test/DataError.test.tsx
index 89f4a6f14..20ef817b1 100644
--- a/src/components/Errors/test/DataError.test.tsx
+++ b/src/components/Errors/test/DataError.test.tsx
@@ -13,13 +13,13 @@ describe('DataError', () => {
         const { container } = render(
             <DataError {...defaultProps} error={new NotAuthorizedError()} />
         );
-        expect(container).toBeEmpty();
+        expect(container).toBeEmptyDOMElement();
     });
 
     it('renders not found for NotFound errors', () => {
         const { getByText } = render(
             <DataError {...defaultProps} error={new NotFoundError('')} />
         );
-        expect(getByText('Not found')).not.toBeEmpty();
+        expect(getByText('Not found')).not.toBeEmptyDOMElement();
     });
 });
diff --git a/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx b/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
index 696bcb496..4a239b314 100644
--- a/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
+++ b/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
@@ -3,10 +3,11 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import ArrowBack from '@material-ui/icons/ArrowBack';
 import * as classnames from 'classnames';
 import { navbarGridHeight } from 'common/layout';
+import { MoreOptionsMenu } from 'components/common/MoreOptionsMenu';
 import { useCommonStyles } from 'components/common/styles';
 import { useLocationState } from 'components/hooks/useLocationState';
 import { NavBarContent } from 'components/Navigation/NavBarContent';
-import { interactiveTextDisabledColor, smallFontSize } from 'components/Theme';
+import { interactiveTextDisabledColor } from 'components/Theme';
 import { Execution } from 'models';
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
@@ -15,10 +16,14 @@ import { ExecutionInputsOutputsModal } from '../ExecutionInputsOutputsModal';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
 import { TerminateExecutionButton } from '../TerminateExecution';
 import { executionIsTerminal } from '../utils';
+import { executionActionStrings } from './constants';
 import { RelaunchExecutionForm } from './RelaunchExecutionForm';
 
 const useStyles = makeStyles((theme: Theme) => {
     return {
+        actionButton: {
+            marginLeft: theme.spacing(2)
+        },
         actions: {
             alignItems: 'center',
             display: 'flex',
@@ -37,24 +42,25 @@ const useStyles = makeStyles((theme: Theme) => {
             flex: '1 1 auto',
             maxWidth: '100%'
         },
-        titleContainer: {
-            alignItems: 'center',
-            display: 'flex',
-            flex: '0 1 auto',
-            flexDirection: 'column',
-            maxHeight: theme.spacing(navbarGridHeight),
-            overflow: 'hidden'
-        },
         inputsOutputsLink: {
             color: interactiveTextDisabledColor
         },
-        actionButton: {
-            marginLeft: theme.spacing(2)
+        moreActions: {
+            marginLeft: theme.spacing(1),
+            marginRight: theme.spacing(-2)
         },
         title: {
             flex: '0 1 auto',
             marginLeft: theme.spacing(2)
         },
+        titleContainer: {
+            alignItems: 'center',
+            display: 'flex',
+            flex: '0 1 auto',
+            flexDirection: 'column',
+            maxHeight: theme.spacing(navbarGridHeight),
+            overflow: 'hidden'
+        },
         version: {
             flex: '0 1 auto',
             overflow: 'hidden'
@@ -70,10 +76,8 @@ export const ExecutionDetailsAppBarContent: React.FC<{
     const styles = useStyles();
     const [showInputsOutputs, setShowInputsOutputs] = React.useState(false);
     const [showRelaunchForm, setShowRelaunchForm] = React.useState(false);
-
     const { domain, name, project } = execution.id;
     const { phase, workflowId } = execution.closure;
-
     const {
         backLink = Routes.WorkflowDetails.makeUrl(
             workflowId.project,
@@ -81,6 +85,10 @@ export const ExecutionDetailsAppBarContent: React.FC<{
             workflowId.name
         )
     } = useLocationState();
+    const isTerminal = executionIsTerminal(execution);
+    const onClickShowInputsOutputs = () => setShowInputsOutputs(true);
+    const onClickRelaunch = () => setShowRelaunchForm(true);
+    const onCloseRelaunch = () => setShowRelaunchForm(false);
 
     let modalContent: JSX.Element | null = null;
     if (showInputsOutputs) {
@@ -92,11 +100,8 @@ export const ExecutionDetailsAppBarContent: React.FC<{
             />
         );
     }
-    const onClickShowInputsOutputs = () => setShowInputsOutputs(true);
-    const onClickRelaunch = () => setShowRelaunchForm(true);
-    const onCloseRelaunch = () => setShowRelaunchForm(false);
 
-    const actionContent = executionIsTerminal(execution) ? (
+    const actionContent = isTerminal ? (
         <Button
             variant="outlined"
             color="primary"
@@ -113,6 +118,20 @@ export const ExecutionDetailsAppBarContent: React.FC<{
         <TerminateExecutionButton className={styles.actionButton} />
     );
 
+    // For running executions, add an overflow menu with the ability to clone
+    // while we are still running.
+    const moreActionsContent = !isTerminal ? (
+        <MoreOptionsMenu
+            className={styles.moreActions}
+            options={[
+                {
+                    label: executionActionStrings.clone,
+                    onClick: onClickRelaunch
+                }
+            ]}
+        />
+    ) : null;
+
     return (
         <>
             <NavBarContent>
@@ -145,6 +164,7 @@ export const ExecutionDetailsAppBarContent: React.FC<{
                             View Inputs &amp; Outputs
                         </Link>
                         {actionContent}
+                        {moreActionsContent}
                     </div>
                 </div>
                 <Dialog
diff --git a/src/components/Executions/ExecutionDetails/constants.ts b/src/components/Executions/ExecutionDetails/constants.ts
index dd3f755fd..ec298b1d8 100644
--- a/src/components/Executions/ExecutionDetails/constants.ts
+++ b/src/components/Executions/ExecutionDetails/constants.ts
@@ -16,3 +16,7 @@ export const tabs = {
         label: 'Graph'
     }
 };
+
+export const executionActionStrings = {
+    clone: 'Clone Execution'
+};
diff --git a/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx b/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
new file mode 100644
index 000000000..6410dd8b8
--- /dev/null
+++ b/src/components/Executions/ExecutionDetails/test/ExecutionDetailsAppBarContent.test.tsx
@@ -0,0 +1,98 @@
+import {
+    fireEvent,
+    render,
+    RenderResult,
+    waitFor
+} from '@testing-library/react';
+import { labels as commonLabels } from 'components/common/constants';
+import {
+    ExecutionContext,
+    ExecutionContextData
+} from 'components/Executions/contexts';
+import { Execution } from 'models';
+import { createMockExecution } from 'models/__mocks__/executionsData';
+import { WorkflowExecutionPhase } from 'models/Execution/enums';
+import * as React from 'react';
+import { MemoryRouter } from 'react-router';
+import { delayedPromise, DelayedPromiseResult } from 'test/utils';
+import { executionActionStrings } from '../constants';
+import { ExecutionDetailsAppBarContent } from '../ExecutionDetailsAppBarContent';
+
+jest.mock('components/Navigation/NavBarContent', () => ({
+    NavBarContent: ({ children }: React.Props<any>) => children
+}));
+
+describe('ExecutionDetailsAppBarContent', () => {
+    let execution: Execution;
+    let executionContext: ExecutionContextData;
+    let mockTerminateExecution: jest.Mock<Promise<void>>;
+    let terminatePromise: DelayedPromiseResult<void>;
+
+    beforeEach(() => {
+        execution = createMockExecution();
+        mockTerminateExecution = jest.fn().mockImplementation(() => {
+            terminatePromise = delayedPromise();
+            return terminatePromise;
+        });
+        executionContext = {
+            execution,
+            terminateExecution: mockTerminateExecution
+        };
+    });
+
+    const renderContent = () =>
+        render(
+            <MemoryRouter>
+                <ExecutionContext.Provider value={executionContext}>
+                    <ExecutionDetailsAppBarContent execution={execution} />
+                </ExecutionContext.Provider>
+            </MemoryRouter>
+        );
+
+    describe('for running executions', () => {
+        beforeEach(() => {
+            execution.closure.phase = WorkflowExecutionPhase.RUNNING;
+        });
+
+        it('renders an overflow menu', async () => {
+            const { getByLabelText } = renderContent();
+            await waitFor(() => getByLabelText(commonLabels.moreOptionsButton));
+        });
+
+        describe('in overflow menu', () => {
+            let renderResult: RenderResult;
+            let buttonEl: HTMLElement;
+            let menuEl: HTMLElement;
+
+            beforeEach(async () => {
+                renderResult = renderContent();
+                const { getByLabelText } = renderResult;
+                buttonEl = await waitFor(() =>
+                    getByLabelText(commonLabels.moreOptionsButton)
+                );
+                fireEvent.click(buttonEl);
+                menuEl = await waitFor(() =>
+                    getByLabelText(commonLabels.moreOptionsMenu)
+                );
+            });
+
+            it('renders a clone option', () => {
+                const { getByText } = renderResult;
+                expect(
+                    getByText(executionActionStrings.clone)
+                ).toBeInTheDocument();
+            });
+        });
+    });
+
+    describe('for terminal executions', () => {
+        beforeEach(() => {
+            execution.closure.phase = WorkflowExecutionPhase.SUCCEEDED;
+        });
+
+        it('does not render an overflow menu', async () => {
+            const { queryByLabelText } = renderContent();
+            expect(queryByLabelText(commonLabels.moreOptionsButton)).toBeNull();
+        });
+    });
+});
diff --git a/src/components/common/MoreOptionsMenu.tsx b/src/components/common/MoreOptionsMenu.tsx
new file mode 100644
index 000000000..dddefb85a
--- /dev/null
+++ b/src/components/common/MoreOptionsMenu.tsx
@@ -0,0 +1,79 @@
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MoreVert from '@material-ui/icons/MoreVert';
+import * as React from 'react';
+import { labels } from './constants';
+
+export interface MoreOptionsMenuItem {
+    label: string;
+    onClick: () => void;
+}
+
+export interface MoreOptionsMenuProps {
+    className?: string;
+    options: MoreOptionsMenuItem[];
+}
+/** Renders a vertical three-dots menu button with the provided options.
+ * Each option should have a label and corresponding onClick handler, which will
+ * be invoked when the item is clicked.
+ */
+export const MoreOptionsMenu: React.FC<MoreOptionsMenuProps> = ({
+    className,
+    options
+}) => {
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const {
+        handleClose,
+        handleClickMenuButton,
+        listItems
+    } = React.useMemo(() => {
+        const handleClickMenuButton = (
+            event: React.MouseEvent<HTMLButtonElement>
+        ) => {
+            setAnchorEl(event.currentTarget);
+        };
+
+        const handleClose = () => {
+            setAnchorEl(null);
+        };
+
+        const listItems = options.map(({ label, onClick: handleItemClick }) => {
+            const onClick = () => {
+                setAnchorEl(null);
+                handleItemClick();
+            };
+
+            return (
+                <MenuItem key={label} onClick={onClick}>
+                    {label}
+                </MenuItem>
+            );
+        });
+
+        return { handleClickMenuButton, handleClose, listItems };
+    }, [options, setAnchorEl]);
+
+    return (
+        <div className={className}>
+            <IconButton
+                aria-controls="more-options-menu"
+                aria-haspopup="true"
+                aria-label={labels.moreOptionsButton}
+                color="inherit"
+                onClick={handleClickMenuButton}
+            >
+                <MoreVert />
+            </IconButton>
+            <Menu
+                aria-label={labels.moreOptionsMenu}
+                id="more-options-menu"
+                anchorEl={anchorEl}
+                open={!!anchorEl}
+                onClose={handleClose}
+            >
+                {listItems}
+            </Menu>
+        </div>
+    );
+};
diff --git a/src/components/common/constants.ts b/src/components/common/constants.ts
index 72a611b4a..209e6ff36 100644
--- a/src/components/common/constants.ts
+++ b/src/components/common/constants.ts
@@ -1 +1,6 @@
 export const detailsPanelWidth = 432;
+
+export const labels = {
+    moreOptionsButton: 'Display more options',
+    moreOptionsMenu: 'More options menu'
+};
diff --git a/src/components/common/test/MoreOptionsMenu.test.tsx b/src/components/common/test/MoreOptionsMenu.test.tsx
new file mode 100644
index 000000000..05a3b3472
--- /dev/null
+++ b/src/components/common/test/MoreOptionsMenu.test.tsx
@@ -0,0 +1,72 @@
+import {
+    fireEvent,
+    getByText,
+    render,
+    RenderResult,
+    waitFor,
+    waitForElementToBeRemoved
+} from '@testing-library/react';
+import * as React from 'react';
+import { labels } from '../constants';
+import { MoreOptionsMenu, MoreOptionsMenuItem } from '../MoreOptionsMenu';
+
+describe('MoreOptionsMenu', () => {
+    let options: MoreOptionsMenuItem[];
+    beforeEach(() => {
+        options = [
+            {
+                label: 'Option 1',
+                onClick: jest.fn()
+            },
+            {
+                label: 'Option 2',
+                onClick: jest.fn()
+            }
+        ];
+    });
+
+    const renderMenu = () => render(<MoreOptionsMenu options={options} />);
+
+    const getMenu = async (renderResult: RenderResult) => {
+        const { getByLabelText } = renderResult;
+        const buttonEl = await waitFor(() =>
+            getByLabelText(labels.moreOptionsButton)
+        );
+        fireEvent.click(buttonEl);
+        return waitFor(() => getByLabelText(labels.moreOptionsMenu));
+    };
+
+    it('shows menu when button is clicked', async () => {
+        await getMenu(renderMenu());
+    });
+
+    it('renders element for each option', async () => {
+        const result = renderMenu();
+        const menuEl = await getMenu(result);
+        expect(getByText(menuEl, options[0].label)).toBeInTheDocument();
+        expect(getByText(menuEl, options[1].label)).toBeInTheDocument();
+    });
+
+    it('calls handler for item when clicked', async () => {
+        const result = renderMenu();
+        const menuEl = await getMenu(result);
+        const itemEl = getByText(menuEl, options[0].label);
+        fireEvent.click(itemEl);
+        expect(options[0].onClick).toHaveBeenCalled();
+    });
+
+    it('hides menu when item is selected', async () => {
+        const result = renderMenu();
+        const menuEl = await getMenu(result);
+        const itemEl = getByText(menuEl, options[0].label);
+        fireEvent.click(itemEl);
+        await waitForElementToBeRemoved(menuEl);
+    });
+
+    it('hides menu on escape', async () => {
+        const result = renderMenu();
+        const menuEl = await getMenu(result);
+        fireEvent.keyDown(menuEl, { key: 'Escape', code: 'Escape' });
+        await waitForElementToBeRemoved(menuEl);
+    });
+});
diff --git a/src/test/utils.ts b/src/test/utils.ts
index 988d6b92d..4f107091b 100644
--- a/src/test/utils.ts
+++ b/src/test/utils.ts
@@ -6,7 +6,7 @@ export function pendingPromise<T = any>(): Promise<T> {
     return new Promise(() => {});
 }
 
-interface DelayedPromiseResult<T> {
+export interface DelayedPromiseResult<T> {
     promise: Promise<T>;
     resolve: (value: T) => void;
     reject: (value: any) => void;