Move workspace changes indicator from bullet onto text (#2890)

Author: mattseddon

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

@@ -31,10 +31,9 @@ const RowExpansionButton: React.FC<RowProp> = ({ row }) =>
     <span className={styles.rowArrowContainer} />
   )
 
-export const FirstCell: React.FC<CellProp & CellRowActionsProps> = ({
-  cell,
-  ...rowActionsProps
-}) => {
+export const FirstCell: React.FC<
+  CellProp & CellRowActionsProps & { changesIfWorkspace: boolean }
+> = ({ cell, changesIfWorkspace, ...rowActionsProps }) => {
   const { row, isPlaceholder } = cell
   const {
     original: { error, status, label, displayNameOrParent = '' }
@@ -53,10 +52,10 @@ export const FirstCell: React.FC<CellProp & CellRowActionsProps> = ({
         {isPlaceholder ? null : (
           <ErrorTooltip error={error}>
             <div
-              className={cx(
-                styles.experimentCellContentsContainer,
-                error && styles.error
-              )}
+              className={cx(styles.experimentCellContentsContainer, {
+                [styles.workspaceChange]: changesIfWorkspace,
+                [styles.error]: error
+              })}
               {...clickAndEnterProps(toggleExperiment, [
                 label,
                 displayNameOrParent

webview/src/experiments/components/table/Row.tsx

@@ -39,8 +39,7 @@ const getRowClassNames = (
   isRowFocused: boolean,
   isRowSelected: boolean,
   isWorkspace: boolean,
-  className?: string,
-  changes?: string[]
+  className?: string
 ) => {
   return cx(
     className,
@@ -55,7 +54,6 @@ const getRowClassNames = (
     isWorkspace ? styles.workspaceRow : styles.normalRow,
     styles.row,
     isRowSelected && styles.rowSelected,
-    isWorkspace && changes?.length && styles.workspaceWithChanges,
     isRowFocused && styles.rowFocused
   )
 }
@@ -165,8 +163,7 @@ export const RowContent: React.FC<
             menuActive,
             isRowSelected,
             isWorkspace,
-            className,
-            changes
+            className
           )
         })}
         tabIndex={0}
@@ -176,6 +173,7 @@ export const RowContent: React.FC<
       >
         <FirstCell
           cell={firstCell}
+          changesIfWorkspace={!!changesIfWorkspace?.length}
           bulletColor={displayColor}
           starred={starred}
           isRowSelected={isRowSelected}

webview/src/experiments/components/table/Table.test.tsx

@@ -279,20 +279,24 @@ describe('Table', () => {
   })
 
   describe('Changes', () => {
-    it('should not have the workspaceWithChanges class on a row if there are no workspace changes', async () => {
+    it("should not have the workspaceChange class on the workspace's first cell (text) workspace changes", async () => {
       renderTable()
 
-      const row = await screen.findByTestId('workspace-row')
+      const workspaceCell = await screen.findByText(EXPERIMENT_WORKSPACE_ID)
 
-      expect(row?.className.includes(styles.workspaceWithChanges)).toBe(false)
+      expect(workspaceCell?.className.includes(styles.workspaceChange)).toBe(
+        false
+      )
     })
 
-    it('should have the workspaceWithChanges class on a row if there are workspace changes', async () => {
+    it("should have the workspaceChange class on the workspace's first cell (text) if there are workspace changes", async () => {
       renderTable({ changes: ['something_changed'] })
 
-      const row = await screen.findByTestId('workspace-row')
+      const workspaceCell = await screen.findByText(EXPERIMENT_WORKSPACE_ID)
 
-      expect(row?.className.includes(styles.workspaceWithChanges)).toBe(true)
+      expect(workspaceCell?.className.includes(styles.workspaceChange)).toBe(
+        true
+      )
     })
 
     it('should not have the workspaceChange class on a cell if there are no changes', async () => {

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

@@ -131,10 +131,6 @@ $bullet-size: calc(var(--design-unit) * 4px);
       border-radius: 100%;
     }
 
-    .workspaceWithChanges.normalExperiment & {
-      background-color: $changed-color;
-    }
-
     .unselectedExperiment & {
       width: 4px;
       height: 4px;
@@ -143,10 +139,6 @@ $bullet-size: calc(var(--design-unit) * 4px);
       background-color: $checkbox-background;
     }
 
-    .workspaceWithChanges.unselectedExperiment & {
-      border: 1px solid $changed-color;
-    }
-
     .runningExperiment & {
       width: 4px;
       height: 4px;
@@ -158,11 +150,6 @@ $bullet-size: calc(var(--design-unit) * 4px);
       animation: spin 1s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
       background-color: $checkbox-background;
     }
-
-    .workspaceWithChanges.runningExperiment & {
-      border-right-color: $changed-color;
-      border-top-color: $changed-color;
-    }
   }
 }