Add git-commit icon to experiments table and quick pick (#3124)

iterative · Jan 19, 2023 · 05d980e · 05d980e
1 parent b10d2ce
commit 05d980e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/extension/src/experiments/model/quickPick.test.ts b/extension/src/experiments/model/quickPick.test.ts
@@ -199,6 +199,11 @@ describe('pickExperimentsToPlot', () => {
 
     const mockedWorkspace = { label: EXPERIMENT_WORKSPACE_ID, selected: false }
     const mockedBranch = {
+      commit: {
+        author: 'John Smith',
+        date: '3 days ago',
+        message: 'add new feature'
+      },
       displayNameOrParent: 'Update dvc',
       label: 'main',
       selected: false
@@ -254,7 +259,7 @@ describe('pickExperimentsToPlot', () => {
         getExpectedItem(mockedWorkspace),
         {
           ...getExpectedItem(mockedBranch),
-          description: mockedBranch.displayNameOrParent
+          description: `$(git-commit)${mockedBranch.displayNameOrParent}`
         },
         {
           kind: QuickPickItemKind.Separator,

diff --git a/extension/src/experiments/model/quickPick.ts b/extension/src/experiments/model/quickPick.ts
@@ -42,7 +42,9 @@ const getItemWithDescription = (
 ) => {
   const item = getItem(experiment, firstThreeColumnOrder)
   if (!experiment.checkpoints && experiment.displayNameOrParent) {
-    item.description = experiment.displayNameOrParent
+    item.description = `${experiment.commit ? '$(git-commit)' : ''}${
+      experiment.displayNameOrParent
+    }`
   }
   return item
 }
@@ -161,9 +163,11 @@ const getExperimentItems = (
   firstThreeColumnOrder: string[]
 ): ExperimentItem[] =>
   experiments.map(experiment => {
-    const { label, id, name, displayNameOrParent } = experiment
+    const { label, id, name, displayNameOrParent, commit } = experiment
     return {
-      description: displayNameOrParent,
+      description:
+        displayNameOrParent &&
+        `${commit ? '$(git-commit)' : ''}${displayNameOrParent}`,
       detail: getColumnPathsQuickPickDetail(experiment, firstThreeColumnOrder),
       label,
       value: {

diff --git a/webview/src/experiments/components/table/CellSecondaryName.tsx b/webview/src/experiments/components/table/CellSecondaryName.tsx
@@ -3,6 +3,8 @@ import { VSCodeTag } from '@vscode/webview-ui-toolkit/react'
 import { CommitData } from 'dvc/src/experiments/webview/contract'
 import styles from './styles.module.scss'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
+import { Icon } from '../../../shared/components/Icon'
+import { GitCommit } from '../../../shared/components/icons'
 
 export const CellSecondaryName: React.FC<{
   displayNameOrParent: string
@@ -11,6 +13,7 @@ export const CellSecondaryName: React.FC<{
 }> = ({ displayNameOrParent, commit, sha }) => {
   const children = (
     <span className={styles.experimentCellSecondaryName}>
+      {commit && <Icon width={14} height={14} icon={GitCommit} />}{' '}
       {displayNameOrParent}
     </span>
   )
@@ -22,7 +25,9 @@ export const CellSecondaryName: React.FC<{
   const tooltipContent = (
     <div className={styles.experimentCellSecondaryNameTooltip}>
       <div>
-        <p className={styles.sha}>{sha?.slice(0, 7)}</p>
+        <p className={styles.sha}>
+          <Icon width={16} height={16} icon={GitCommit} /> {sha?.slice(0, 7)}
+        </p>
         {tags.length > 0 && (
           <>
             {tags.map(tag => (

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -719,6 +719,14 @@ $bullet-size: calc(var(--design-unit) * 4px);
 .experimentCellSecondaryName {
   color: $meta-cell-color;
   font-size: 0.75em;
+  display: flex;
+  align-items: center;
+
+  svg {
+    min-width: 14px;
+    min-height: 14px;
+    margin-right: 2px;
+  }
 }
 
 .experimentCellSecondaryNameTooltip {
@@ -741,6 +749,11 @@ $bullet-size: calc(var(--design-unit) * 4px);
   .sha {
     margin: 0 auto 0 0;
     font-size: 1em;
+
+    svg {
+      min-width: 14px;
+      min-height: 14px;
+    }
   }
 
   .tag {