Add completion status to setup sections (#3823)

Author: julieg18

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

@@ -9,6 +9,7 @@ import React from 'react'
 import { SetupSection, SetupData } from 'dvc/src/setup/webview/contract'
 import { App } from './App'
 import { vsCodeApi } from '../../shared/api'
+import { TooltipIconType } from '../../shared/components/sectionContainer/InfoTooltip'
 
 jest.mock('../../shared/api')
 jest.mock('../../shared/components/codeSlider/CodeSlider')
@@ -629,6 +630,58 @@ describe('App', () => {
         type: MessageFromWebviewType.SELECT_PYTHON_INTERPRETER
       })
     })
+
+    it('should show an error icon if DVC is not setup', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: false,
+        isPythonExtensionUsed: false,
+        isStudioConnected: false,
+        needsGitCommit: false,
+        needsGitInitialized: undefined,
+        projectInitialized: false,
+        pythonBinPath: undefined,
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[0]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.ERROR)
+      ).toBeInTheDocument()
+    })
+
+    it('should show a passed icon if DVC CLI is compatible and project is initialized', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: true,
+        isPythonExtensionUsed: true,
+        isStudioConnected: true,
+        needsGitCommit: false,
+        needsGitInitialized: false,
+        projectInitialized: true,
+        pythonBinPath: 'python',
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[0]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.PASSED)
+      ).toBeInTheDocument()
+    })
   })
 
   describe('Experiments', () => {
@@ -823,6 +876,84 @@ describe('App', () => {
         type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW
       })
     })
+
+    it('should show an error icon if experiments are not setup', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: false,
+        isPythonExtensionUsed: false,
+        isStudioConnected: false,
+        needsGitCommit: false,
+        needsGitInitialized: undefined,
+        projectInitialized: true,
+        pythonBinPath: undefined,
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[1]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.ERROR)
+      ).toBeInTheDocument()
+    })
+
+    it('should show an error icon if dvc is not setup', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: false,
+        dvcCliDetails: {
+          command: 'dvc',
+          version: '1.0.0'
+        },
+        hasData: false,
+        isPythonExtensionUsed: false,
+        isStudioConnected: false,
+        needsGitCommit: false,
+        needsGitInitialized: undefined,
+        projectInitialized: false,
+        pythonBinPath: undefined,
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[1]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.ERROR)
+      ).toBeInTheDocument()
+    })
+
+    it('should show a passed icon if experiments are setup', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: true,
+        isPythonExtensionUsed: true,
+        isStudioConnected: true,
+        needsGitCommit: false,
+        needsGitInitialized: false,
+        projectInitialized: true,
+        pythonBinPath: 'python',
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[1]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.PASSED)
+      ).toBeInTheDocument()
+    })
   })
 
   describe('Studio not connected', () => {
@@ -933,6 +1064,58 @@ describe('App', () => {
         type: MessageFromWebviewType.SAVE_STUDIO_TOKEN
       })
     })
+
+    it('should show an error icon if dvc is not compatible', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: false,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: false,
+        isPythonExtensionUsed: false,
+        isStudioConnected: false,
+        needsGitCommit: false,
+        needsGitInitialized: undefined,
+        projectInitialized: true,
+        pythonBinPath: undefined,
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[2]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.ERROR)
+      ).toBeInTheDocument()
+    })
+
+    it('should show an info icon if dvc is compatible but studio is not connected', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: true,
+        isPythonExtensionUsed: true,
+        isStudioConnected: false,
+        needsGitCommit: false,
+        needsGitInitialized: false,
+        projectInitialized: true,
+        pythonBinPath: 'python',
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[2]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.INFO)
+      ).toBeInTheDocument()
+    })
   })
 
   describe('Studio connected', () => {
@@ -990,6 +1173,32 @@ describe('App', () => {
         type: MessageFromWebviewType.SAVE_STUDIO_TOKEN
       })
     })
+
+    it('should show a passed icon if connected', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: '1.0.0'
+        },
+        hasData: false,
+        isPythonExtensionUsed: false,
+        isStudioConnected: true,
+        needsGitCommit: true,
+        needsGitInitialized: false,
+        projectInitialized: true,
+        pythonBinPath: undefined,
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+
+      const iconWrapper = screen.getAllByTestId('info-tooltip-toggle')[2]
+
+      expect(
+        within(iconWrapper).getByTestId(TooltipIconType.PASSED)
+      ).toBeInTheDocument()
+    })
   })
 
   describe('focused section', () => {

webview/src/setup/components/App.tsx

@@ -90,13 +90,16 @@ export const App: React.FC = () => {
     })
   }
 
+  const isDvcSetup = !!cliCompatible && projectInitialized
+
   return (
     <>
       <SetupContainer
         sectionKey={SetupSection.DVC}
         title="DVC"
         sectionCollapsed={sectionCollapsed}
         setSectionCollapsed={setSectionCollapsed}
+        isSetup={isDvcSetup}
       >
         <Dvc
           canGitInitialize={canGitInitialize}
@@ -115,6 +118,7 @@ export const App: React.FC = () => {
         title="Experiments"
         sectionCollapsed={sectionCollapsed}
         setSectionCollapsed={setSectionCollapsed}
+        isSetup={isDvcSetup && !!hasData}
       >
         <Experiments
           needsGitCommit={needsGitCommit}
@@ -128,6 +132,8 @@ export const App: React.FC = () => {
         title="Studio"
         sectionCollapsed={sectionCollapsed}
         setSectionCollapsed={setSectionCollapsed}
+        isSetup={!!cliCompatible}
+        isConnected={isStudioConnected}
       >
         <Studio
           isStudioConnected={isStudioConnected}

webview/src/setup/components/SetupContainer.tsx

@@ -4,24 +4,38 @@ import {
 } from 'dvc/src/setup/webview/contract'
 import React from 'react'
 import { SectionContainer } from '../../shared/components/sectionContainer/SectionContainer'
+import { TooltipIconType } from '../../shared/components/sectionContainer/InfoTooltip'
+
+const getTooltipIconType = (isSetup: boolean, isConnected = true) => {
+  if (!isSetup) {
+    return TooltipIconType.ERROR
+  }
+
+  return isConnected ? TooltipIconType.PASSED : TooltipIconType.INFO
+}
 
 export const SetupContainer: React.FC<{
   children: React.ReactNode
   sectionCollapsed: typeof DEFAULT_SECTION_COLLAPSED
   sectionKey: SetupSection
   setSectionCollapsed: (value: typeof DEFAULT_SECTION_COLLAPSED) => void
   title: string
+  isSetup: boolean
+  isConnected?: boolean
 }> = ({
   children,
   sectionCollapsed,
   sectionKey,
   setSectionCollapsed,
-  title
+  title,
+  isSetup,
+  isConnected
 }) => (
   <SectionContainer
     sectionCollapsed={sectionCollapsed[sectionKey]}
     sectionKey={sectionKey}
     title={title}
+    icon={getTooltipIconType(isSetup, isConnected)}
     onToggleSection={() =>
       setSectionCollapsed({
         ...sectionCollapsed,

webview/src/shared/components/icons/PassFilled.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+function PassFilled(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm-1.02-4.13h-.71L4 8.6l.71-.71 1.92 1.92 4.2-4.21.71.71-4.56 4.56z"
+      />
+    </svg>
+  )
+}
+
+export default PassFilled

webview/src/shared/components/icons/index.ts

@@ -18,6 +18,7 @@ export { default as GraphLine } from './GraphLine'
 export { default as Gripper } from './Gripper'
 export { default as Info } from './Info'
 export { default as Lines } from './Lines'
+export { default as PassFilled } from './PassFilled'
 export { default as Pin } from './Pin'
 export { default as Refresh } from './Refresh'
 export { default as UpArrow } from './UpArrow'