Revert "Give Setup webview a single section (#3441)"

This reverts commit a376e19.
iterative · Mar 12, 2023 · ed802aa · ed802aa
1 parent a376e19
commit ed802aa
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 170 deletions.
diff --git a/extension/src/setup/webview/contract.ts b/extension/src/setup/webview/contract.ts
@@ -8,13 +8,3 @@ export type SetupData = {
   projectInitialized: boolean
   pythonBinPath: string | undefined
 }
-
-export enum Section {
-  EXPERIMENTS = 'experiments'
-}
-
-export const DEFAULT_SECTION_COLLAPSED = {
-  [Section.EXPERIMENTS]: false
-}
-
-export type SectionCollapsed = typeof DEFAULT_SECTION_COLLAPSED
diff --git a/webview/src/setup/components/App.tsx b/webview/src/setup/components/App.tsx
@@ -1,14 +1,19 @@
+import { SetupData } from 'dvc/src/setup/webview/contract'
 import {
-  DEFAULT_SECTION_COLLAPSED,
-  Section,
-  SetupData
-} from 'dvc/src/setup/webview/contract'
-import { MessageToWebview } from 'dvc/src/webview/contract'
+  MessageFromWebviewType,
+  MessageToWebview
+} from 'dvc/src/webview/contract'
 import React, { useCallback, useState } from 'react'
-import { SetupExperiments } from './Experiments'
-import { SectionContainer } from '../../shared/components/sectionContainer/SectionContainer'
+import { CliIncompatible } from './CliIncompatible'
+import { CliUnavailable } from './CliUnavailable'
+import { ProjectUninitialized } from './ProjectUninitialized'
+import { NoData } from './NoData'
+import { NeedsGitCommit } from './NeedsGitCommit'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
+import { sendMessage } from '../../shared/vscode'
+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export const App: React.FC = () => {
   const [cliCompatible, setCliCompatible] = useState<boolean | undefined>(
     undefined
@@ -27,9 +32,6 @@ export const App: React.FC = () => {
   const [isPythonExtensionInstalled, setIsPythonExtensionInstalled] =
     useState<boolean>(false)
   const [hasData, setHasData] = useState<boolean | undefined>(false)
-  const [sectionCollapsed, setSectionCollapsed] = useState<
-    typeof DEFAULT_SECTION_COLLAPSED
-  >(DEFAULT_SECTION_COLLAPSED)
 
   useVsCodeMessaging(
     useCallback(
@@ -56,28 +58,76 @@ export const App: React.FC = () => {
     )
   )
 
-  return (
-    <SectionContainer
-      sectionCollapsed={sectionCollapsed[Section.EXPERIMENTS]}
-      sectionKey={Section.EXPERIMENTS}
-      title={'Experiments'}
-      onToggleSection={() =>
-        setSectionCollapsed({
-          ...sectionCollapsed,
-          [Section.EXPERIMENTS]: !sectionCollapsed[Section.EXPERIMENTS]
-        })
-      }
-    >
-      <SetupExperiments
-        canGitInitialize={canGitInitialize}
-        cliCompatible={cliCompatible}
-        hasData={hasData}
+  const checkCompatibility = () => {
+    sendMessage({ type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE })
+  }
+
+  const initializeGit = () => {
+    sendMessage({
+      type: MessageFromWebviewType.INITIALIZE_GIT
+    })
+  }
+
+  const initializeDvc = () => {
+    sendMessage({
+      type: MessageFromWebviewType.INITIALIZE_DVC
+    })
+  }
+
+  const showScmPanel = () => {
+    sendMessage({ type: MessageFromWebviewType.SHOW_SCM_PANEL })
+  }
+
+  const installDvc = () => {
+    sendMessage({ type: MessageFromWebviewType.INSTALL_DVC })
+  }
+
+  const selectPythonInterpreter = () => {
+    sendMessage({ type: MessageFromWebviewType.SELECT_PYTHON_INTERPRETER })
+  }
+
+  const setupWorkspace = () => {
+    sendMessage({ type: MessageFromWebviewType.SETUP_WORKSPACE })
+  }
+
+  if (cliCompatible === false) {
+    return <CliIncompatible checkCompatibility={checkCompatibility} />
+  }
+
+  if (cliCompatible === undefined) {
+    return (
+      <CliUnavailable
+        installDvc={installDvc}
         isPythonExtensionInstalled={isPythonExtensionInstalled}
-        needsGitInitialized={needsGitInitialized}
-        needsGitCommit={needsGitCommit}
-        projectInitialized={projectInitialized}
         pythonBinPath={pythonBinPath}
+        selectPythonInterpreter={selectPythonInterpreter}
+        setupWorkspace={setupWorkspace}
       />
-    </SectionContainer>
-  )
+    )
+  }
+
+  if (!projectInitialized) {
+    return (
+      <ProjectUninitialized
+        canGitInitialize={canGitInitialize}
+        initializeDvc={initializeDvc}
+        initializeGit={initializeGit}
+        needsGitInitialized={needsGitInitialized}
+      />
+    )
+  }
+
+  if (needsGitCommit) {
+    return <NeedsGitCommit showScmPanel={showScmPanel} />
+  }
+
+  if (hasData === undefined) {
+    return <EmptyState>Loading Project...</EmptyState>
+  }
+
+  if (!hasData) {
+    return <NoData />
+  }
+
+  return null
 }
diff --git a/webview/src/setup/components/Experiments.tsx b/webview/src/setup/components/Experiments.tsx
diff --git a/webview/src/setup/components/messages.ts b/webview/src/setup/components/messages.ts
diff --git a/webview/src/shared/components/sectionContainer/SectionContainer.tsx b/webview/src/shared/components/sectionContainer/SectionContainer.tsx
@@ -1,6 +1,5 @@
 import React, { MouseEvent } from 'react'
 import { Section as PlotsSection } from 'dvc/src/plots/webview/contract'
-import { Section as SetupSection } from 'dvc/src/setup/webview/contract'
 import styles from './styles.module.scss'
 import { Icon } from '../Icon'
 import { ChevronDown, ChevronRight, Info } from '../icons'
@@ -55,22 +54,12 @@ export const SectionDescription = {
       </a>
       .
     </span>
-  ),
-  // Setup Experiments
-  [SetupSection.EXPERIMENTS]: (
-    <span data-testid="tooltip-setup-experiments">
-      Configure the extension to start tracking and visualizing{' '}
-      <a href="https://dvc.org/doc/start/experiment-management/experiments">
-        experiments
-      </a>
-      .
-    </span>
   )
 } as const
 
-export interface SectionContainerProps<T extends PlotsSection | SetupSection> {
+export interface SectionContainerProps<T extends PlotsSection> {
   children: React.ReactNode
-  menuItems?: IconMenuItemProps[]
+  menuItems: IconMenuItemProps[]
   onToggleSection: () => void
   sectionCollapsed: boolean
   sectionKey: T
@@ -82,10 +71,10 @@ const InfoIcon = () => (
 )
 
 export const SectionContainer: React.FC<
-  SectionContainerProps<PlotsSection | SetupSection>
+  SectionContainerProps<PlotsSection>
 > = ({
   children,
-  menuItems = [],
+  menuItems,
   onToggleSection,
   sectionCollapsed,
   sectionKey,