[Kedro-viz-890]/run-export-modal

src/components/experiment-tracking/details/details.js

@@ -3,6 +3,8 @@ import classnames from 'classnames';
 import RunMetadata from '../run-metadata';
 import RunDataset from '../run-dataset';
 import RunDetailsModal from '../run-details-modal';
+import RunExportModal from '../run-export-modal.js';
+import { ButtonTimeoutContextProvider } from '../../../utils/button-timeout-context';
 
 import './details.css';
 
@@ -21,6 +23,8 @@ const Details = ({
   sidebarVisible,
   theme,
   trackingDataError,
+  showRunExportModal,
+  setShowRunExportModal,
 }) => {
   const [runMetadataToEdit, setRunMetadataToEdit] = useState(null);
 
@@ -40,13 +44,22 @@ const Details = ({
 
   return (
     <>
-      <RunDetailsModal
-        runMetadataToEdit={runMetadataToEdit}
-        runs={runMetadata}
-        setShowRunDetailsModal={setShowRunDetailsModal}
-        theme={theme}
-        visible={showRunDetailsModal}
-      />
+      <ButtonTimeoutContextProvider>
+        <RunDetailsModal
+          runMetadataToEdit={runMetadataToEdit}
+          runs={runMetadata}
+          setShowRunDetailsModal={setShowRunDetailsModal}
+          theme={theme}
+          visible={showRunDetailsModal}
+        />
+        <RunExportModal
+          theme={theme}
+          visible={showRunExportModal}
+          setShowRunExportModal={setShowRunExportModal}
+          runMetadata={runMetadata}
+          runTrackingData={runTrackingData}
+        />
+      </ButtonTimeoutContextProvider>
       <div
         className={classnames('kedro', 'details-mainframe', {
           'details-mainframe--sidebar-visible': sidebarVisible,

src/components/experiment-tracking/experiment-primary-toolbar/experiment-primary-toolbar.js

@@ -1,5 +1,4 @@
-import React, { useCallback, useState } from 'react';
-import { CSVLink } from 'react-csv';
+import React from 'react';
 import { useUpdateRunDetails } from '../../../apollo/mutations';
 import IconButton from '../../ui/icon-button';
 import PencilIcon from '../../icons/pencil';
@@ -8,23 +7,20 @@ import ExportIcon from '../../icons/export';
 import BookmarkStrokeIcon from '../../icons/bookmark-stroke';
 import PrimaryToolbar from '../../primary-toolbar';
 import ShowChangesIcon from '../../icons/show-changes';
-import { constructExportData } from '../../../utils/experiment-tracking-utils';
 
 export const ExperimentPrimaryToolbar = ({
   displaySidebar,
   enableComparisonView,
   enableShowChanges,
-  runMetadata,
-  runTrackingData,
   selectedRunData,
   setEnableShowChanges,
   setSidebarVisible,
   showChangesIconDisabled,
   showRunDetailsModal,
   sidebarVisible,
+  setShowRunExportModal,
 }) => {
   const { updateRunDetails } = useUpdateRunDetails();
-  const [exportData, setExportData] = useState([]);
 
   const toggleBookmark = () => {
     updateRunDetails({
@@ -33,10 +29,6 @@ export const ExperimentPrimaryToolbar = ({
     });
   };
 
-  const updateExportData = useCallback(() => {
-    setExportData(constructExportData(runMetadata, runTrackingData));
-  }, [runMetadata, runTrackingData]);
-
   return (
     <PrimaryToolbar
       displaySidebar={displaySidebar}
@@ -72,19 +64,13 @@ export const ExperimentPrimaryToolbar = ({
         visible={enableComparisonView}
         disabled={showChangesIconDisabled}
       />
-      <CSVLink
-        data={exportData}
-        asyncOnClick={true}
-        onClick={updateExportData}
-        filename="run-data.csv"
-      >
-        <IconButton
-          ariaLabel="Export graph as SVG or PNG"
-          className={'pipeline-menu-button--export'}
-          icon={ExportIcon}
-          labelText="Export run data"
-        />
-      </CSVLink>
+      <IconButton
+        ariaLabel="Export Run Data"
+        className={'pipeline-menu-button--export-runs'}
+        icon={ExportIcon}
+        labelText="Export run data"
+        onClick={() => setShowRunExportModal(true)}
+      />
     </PrimaryToolbar>
   );
 };

src/components/experiment-tracking/run-details-modal/run-details-modal.js

@@ -1,6 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { useUpdateRunDetails } from '../../../apollo/mutations';
 
+import { ButtonTimeoutContext } from '../../../utils/button-timeout-context';
+
 import Button from '../../ui/button';
 import Modal from '../../ui/modal';
 import Input from '../../ui/input';
@@ -15,18 +17,26 @@ const RunDetailsModal = ({
   visible,
 }) => {
   const [valuesToUpdate, setValuesToUpdate] = useState({});
-  const [hasNotInteracted, setHasNotInteracted] = useState(true);
-  const [editsAreSuccessful, setEditsAreSuccessful] = useState(false);
   const { updateRunDetails, error, reset } = useUpdateRunDetails();
+  const {
+    isSuccessful,
+    showModal,
+    hasInteracted,
+    handleClick,
+    setHasInteracted,
+    setIsSuccessful,
+  } = useContext(ButtonTimeoutContext);
 
   const onApplyChanges = () => {
     updateRunDetails({
       runId: runMetadataToEdit.id,
       runInput: { notes: valuesToUpdate.notes, title: valuesToUpdate.title },
     });
 
+    handleClick();
+
     if (!error) {
-      setEditsAreSuccessful(true);
+      setIsSuccessful(true);
     }
   };
 
@@ -36,33 +46,15 @@ const RunDetailsModal = ({
         [key]: value,
       })
     );
-    setHasNotInteracted(false);
-  };
-
-  const resetState = () => {
-    setHasNotInteracted(true);
-    setEditsAreSuccessful(false);
+    setHasInteracted(true);
   };
 
+  // only if the component is visible first, then apply isSuccessful to show or hide modal
   useEffect(() => {
-    let modalTimeout, resetTimeout;
-
-    if (editsAreSuccessful) {
-      modalTimeout = setTimeout(() => {
-        setShowRunDetailsModal(false);
-      }, 1500);
-
-      // Delay the reset so the user can't see the button text change.
-      resetTimeout = setTimeout(() => {
-        resetState();
-      }, 2000);
+    if (visible && isSuccessful) {
+      setShowRunDetailsModal(showModal);
     }
-
-    return () => {
-      clearTimeout(modalTimeout);
-      clearTimeout(resetTimeout);
-    };
-  }, [editsAreSuccessful, setShowRunDetailsModal]);
+  }, [showModal, setShowRunDetailsModal, isSuccessful, visible]);
 
   useEffect(() => {
     setValuesToUpdate({
@@ -78,8 +70,7 @@ const RunDetailsModal = ({
      * the next time the modal opens.
      */
     reset();
-    setHasNotInteracted(true);
-  }, [reset, runMetadataToEdit, visible]);
+  }, [runMetadataToEdit, visible, setHasInteracted, reset]);
 
   return (
     <div className="pipeline-settings-modal pipeline-settings-modal--experiment-tracking">
@@ -122,12 +113,12 @@ const RunDetailsModal = ({
             Cancel
           </Button>
           <Button
-            disabled={hasNotInteracted}
+            disabled={!hasInteracted}
             onClick={onApplyChanges}
-            mode={editsAreSuccessful ? 'success' : 'primary'}
+            mode={isSuccessful ? 'success' : 'primary'}
             size="small"
           >
-            {editsAreSuccessful ? (
+            {isSuccessful ? (
               <>
                 Changes applied <span className="success-check-mark">✅</span>
               </>

src/components/experiment-tracking/run-details-modal/run-details-modal.test.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import RunDetailsModal from './index';
 import Adapter from 'enzyme-adapter-react-16';
-import { configure, mount, shallow } from 'enzyme';
+import { configure, mount } from 'enzyme';
 import { render } from '@testing-library/react';
+import { ButtonTimeoutContext } from '../../../utils/button-timeout-context';
 
 configure({ adapter: new Adapter() });
 
@@ -22,27 +23,46 @@ jest.mock('../../../apollo/mutations', () => {
   };
 });
 
+const mockValue = {
+  isSuccessful: false,
+  showModal: false,
+  hasInteracted: false,
+  handleClick: jest.fn(),
+  setIsSuccessful: jest.fn(),
+  setHasInteracted: jest.fn(),
+};
+
 // Tests
 
 describe('RunDetailsModal', () => {
   it('renders without crashing', () => {
-    const wrapper = shallow(<RunDetailsModal visible />);
+    const wrapper = mount(
+      <ButtonTimeoutContext.Provider value={mockValue}>
+        <RunDetailsModal visible />
+      </ButtonTimeoutContext.Provider>
+    );
 
     expect(
       wrapper.find('.pipeline-settings-modal--experiment-tracking').length
     ).toBe(1);
   });
 
   it('renders with a disabled primary button', () => {
-    const { getByText } = render(<RunDetailsModal visible />);
+    const { getByText } = render(
+      <ButtonTimeoutContext.Provider value={mockValue}>
+        <RunDetailsModal visible />
+      </ButtonTimeoutContext.Provider>
+    );
 
     expect(getByText(/Apply changes and close/i)).toBeDisabled();
   });
 
   it('modal closes when cancel button is clicked', () => {
     const setVisible = jest.fn();
     const wrapper = mount(
-      <RunDetailsModal setShowRunDetailsModal={() => setVisible(true)} />
+      <ButtonTimeoutContext.Provider value={mockValue}>
+        <RunDetailsModal setShowRunDetailsModal={() => setVisible(true)} />
+      </ButtonTimeoutContext.Provider>
     );
     const onClick = jest.spyOn(React, 'useState');
     const closeButton = wrapper.find(

src/components/experiment-tracking/run-export-modal.js/index.js

@@ -0,0 +1,3 @@
+import RunExportModal from './run-export-modal';
+
+export default RunExportModal;

src/components/experiment-tracking/run-export-modal.js/run-export-modal.js

@@ -0,0 +1,71 @@
+import React, { useState, useCallback, useContext, useEffect } from 'react';
+import { CSVLink } from 'react-csv';
+
+import { constructExportData } from '../../../utils/experiment-tracking-utils';
+import { ButtonTimeoutContext } from '../../../utils/button-timeout-context';
+
+import Button from '../../ui/button';
+import Modal from '../../ui/modal';
+
+import './run-export-modal.css';
+
+const RunExportModal = ({
+  theme,
+  visible,
+  setShowRunExportModal,
+  runMetadata,
+  runTrackingData,
+}) => {
+  const [exportData, setExportData] = useState([]);
+  const { isSuccessful, showModal, handleClick } =
+    useContext(ButtonTimeoutContext);
+
+  const updateExportData = useCallback(() => {
+    setExportData(constructExportData(runMetadata, runTrackingData));
+  }, [runMetadata, runTrackingData]);
+
+  // only if the component is visible first, then apply isSuccessful to show or hide modal
+  useEffect(() => {
+    if (visible && isSuccessful) {
+      setShowRunExportModal(showModal);
+    }
+  }, [showModal, setShowRunExportModal, isSuccessful, visible]);
+
+  return (
+    <div className="pipeline-run-export-modal pipeline-run-export-modal--experiment-tracking">
+      <Modal
+        closeModal={() => setShowRunExportModal(false)}
+        theme={theme}
+        title="Export experiment run"
+        visible={visible}
+      >
+        <div className="run-export-modal-button-wrapper">
+          <Button mode="secondary" onClick={() => setShowRunExportModal(false)}>
+            Cancel
+          </Button>
+          <CSVLink
+            data={exportData}
+            asyncOnClick={true}
+            onClick={updateExportData}
+            filename="run-data.csv"
+          >
+            <Button
+              onClick={handleClick}
+              mode={isSuccessful ? 'success' : 'primary'}
+            >
+              {isSuccessful ? (
+                <>
+                  Done <span className="success-check-mark">✅</span>
+                </>
+              ) : (
+                'Export all and close'
+              )}
+            </Button>
+          </CSVLink>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default RunExportModal;

src/components/experiment-tracking/run-export-modal.js/run-export-modal.scss

@@ -0,0 +1,16 @@
+.pipeline-run-export-modal--experiment-tracking .modal__title {
+  text-align: left;
+  margin-left: 30px;
+}
+
+.run-export-modal-button-wrapper {
+  display: flex;
+  justify-content: space-around;
+
+  width: 100%;
+}
+
+// set fix width for export button for when the text is shorter, eg "Done"
+.pipeline-run-export-modal--experiment-tracking .button__btn--primary {
+  width: 160px;
+}