Disable exp push when experiment is running in the workspace (#4343)

Author: mattseddon

webview/src/experiments/components/App.test.tsx

@@ -1956,4 +1956,28 @@ describe('App', () => {
       })
     })
   })
+
+  describe('Experiment git remote status indicator', () => {
+    it('should not allow pushing an experiment when an experiment is running in the workspace', () => {
+      renderTable()
+
+      fireEvent.click(screen.getByTestId('exp-f13bca-push-experiment'))
+
+      expect(mockPostMessage).not.toHaveBeenCalledWith({
+        payload: ['exp-f13bca'],
+        type: MessageFromWebviewType.PUSH_EXPERIMENT
+      })
+    })
+
+    it('should allow pushing an experiment when an experiment is not running in the workspace', () => {
+      renderTableWithoutRunningExperiments()
+
+      fireEvent.click(screen.getByTestId('exp-f13bca-push-experiment'))
+
+      expect(mockPostMessage).toHaveBeenCalledWith({
+        payload: ['exp-f13bca'],
+        type: MessageFromWebviewType.PUSH_EXPERIMENT
+      })
+    })
+  })
 })

webview/src/experiments/components/table/body/Cell.tsx

@@ -35,7 +35,7 @@ const RowExpansionButton: React.FC<RowProp> = ({ row }) =>
       />
     </button>
   ) : (
-    <span className={styles.rowArrowContainer} />
+    <span className={styles.emptyRowArrowContainer} />
   )
 
 export const StubCell: React.FC<

webview/src/experiments/components/table/body/ExperimentStatusIndicator.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { VSCodeProgressRing } from '@vscode/webview-ui-toolkit/react'
 import cx from 'classnames'
+import { useSelector } from 'react-redux'
 import {
   ExperimentStatus,
   GitRemoteStatus,
@@ -12,6 +13,7 @@ import { clickAndEnterProps } from '../../../../util/props'
 import { pushExperiment } from '../../../util/messages'
 import { Cloud, CloudUpload } from '../../../../shared/components/icons'
 import { Icon } from '../../../../shared/components/Icon'
+import { ExperimentsState } from '../../../store'
 
 type ExperimentStatusIndicatorProps = {
   status: ExperimentStatus | undefined
@@ -22,22 +24,35 @@ type ExperimentStatusIndicatorProps = {
 export const ExperimentStatusIndicator: React.FC<
   ExperimentStatusIndicatorProps
 > = ({ id, status, gitRemoteStatus }) => {
+  const { hasRunningWorkspaceExperiment } = useSelector(
+    (state: ExperimentsState) => state.tableData
+  )
+
   if (isRunning(status) || gitRemoteStatus === GitRemoteStatus.PUSHING) {
     return (
       <VSCodeProgressRing className={cx(styles.running, 'chromatic-ignore')} />
     )
   }
 
   if (gitRemoteStatus === GitRemoteStatus.NOT_ON_REMOTE) {
+    const tooltipContent =
+      'Experiment not found on remote' +
+      (hasRunningWorkspaceExperiment ? '' : '\nClick to push')
+
     return (
-      <CellHintTooltip
-        tooltipContent={'Experiment not found on remote\nClick to push'}
-      >
+      <CellHintTooltip tooltipContent={tooltipContent}>
         <div
           className={styles.upload}
-          {...clickAndEnterProps(() => pushExperiment(id))}
+          {...clickAndEnterProps(
+            () => !hasRunningWorkspaceExperiment && pushExperiment(id)
+          )}
         >
-          <Icon className={styles.cloudBox} icon={CloudUpload} />
+          <Icon
+            data-testid={`${id}-push-experiment`}
+            aria-disabled={false}
+            className={styles.cloudBox}
+            icon={CloudUpload}
+          />
         </div>
       </CellHintTooltip>
     )

webview/src/experiments/components/table/styles.module.scss

@@ -30,6 +30,18 @@ $badge-size: 0.85rem;
   margin: 12px 6px;
 }
 
+%rowArrowContainer {
+  width: 20px;
+  height: 32px;
+  padding: 0;
+  flex: 0 0 20px;
+  right: 6px;
+  display: inline-block;
+  position: relative;
+  border: none;
+  background: none;
+}
+
 %truncateLeftParent {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -657,6 +669,11 @@ $badge-size: 0.85rem;
   @extend %iconBox;
 
   padding: 1px;
+
+  &[aria-disabled='true'] {
+    cursor: default;
+    opacity: 0.4;
+  }
 }
 
 .cloudIndicator {
@@ -690,18 +707,17 @@ $badge-size: 0.85rem;
 }
 
 .rowArrowContainer {
-  width: 20px;
-  height: 32px;
-  padding: 0;
-  flex: 0 0 20px;
-  right: 6px;
-  display: inline-block;
-  position: relative;
-  border: none;
-  background: none;
+  @extend %rowArrowContainer;
+
   cursor: pointer;
 }
 
+.emptyRowArrowContainer {
+  @extend %rowArrowContainer;
+
+  cursor: default;
+}
+
 .expandedRowArrow {
   @extend %expandableRowArrow;