Add CLI incompatible screen to Studio section

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

@@ -103,9 +103,9 @@ describe('App', () => {
         shareLiveToStudio: false
       })
 
-      expect(
-        screen.getByText('DVC is currently unavailable')
-      ).toBeInTheDocument()
+      expect(screen.getAllByText('DVC is currently unavailable')).toHaveLength(
+        2
+      )
     })
 
     it('should tell the user they cannot install DVC without a Python interpreter', () => {

webview/src/setup/components/App.tsx

@@ -10,7 +10,7 @@ import {
 import React, { useCallback, useState } from 'react'
 import { Dvc } from './Dvc'
 import { Experiments } from './Experiments'
-import { Studio } from './Studio'
+import { Studio } from './studio/Studio'
 import { SetupContainer } from './SetupContainer'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
 import { sendMessage } from '../../shared/vscode'
@@ -44,6 +44,9 @@ export const App: React.FC = () => {
   useVsCodeMessaging(
     useCallback(
       ({ data }: { data: MessageToWebview<SetupData> }) => {
+        if (!data?.data) {
+          return
+        }
         setCanGitInitialized(data.data.canGitInitialize)
         setCliCompatible(data.data.cliCompatible)
         setHasData(data.data.hasData)
@@ -123,7 +126,9 @@ export const App: React.FC = () => {
         <Studio
           isStudioConnected={isStudioConnected}
           shareLiveToStudio={shareLiveToStudio}
+          setSectionCollapsed={setSectionCollapsed}
           setShareLiveToStudio={setShareLiveToStudio}
+          cliCompatible={!!cliCompatible}
         />
       </SetupContainer>
     </>

webview/src/setup/components/studio/CliIncompatible.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { STUDIO_URL, SectionCollapsed } from 'dvc/src/setup/webview/contract'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { Button } from '../../../shared/components/button/Button'
+
+export const CliIncompatible: React.FC<{
+  setSectionCollapsed: (sectionCollapsed: SectionCollapsed) => void
+}> = ({ setSectionCollapsed }) => (
+  <EmptyState isFullScreen={false}>
+    <h1>DVC is currently unavailable</h1>
+    <p>
+      Locate DVC to connect to <a href={STUDIO_URL}>Studio</a>
+    </p>
+    <Button
+      text="Setup DVC"
+      onClick={() =>
+        setSectionCollapsed({
+          dvc: false,
+          experiments: true,
+          studio: true
+        })
+      }
+    />
+  </EmptyState>
+)

webview/src/setup/components/studio/Connect.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { STUDIO_URL } from 'dvc/src/setup/webview/contract'
+import { openStudio, openStudioProfile, saveStudioToken } from '../messages'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { Button } from '../../../shared/components/button/Button'
+
+export const Connect: React.FC = () => {
+  return (
+    <EmptyState isFullScreen={false}>
+      <div data-testid="setup-studio-content">
+        <h1>
+          Connect to <a href={STUDIO_URL}>Studio</a>
+        </h1>
+        <p>
+          Share experiments and plots with collaborators directly from your IDE.
+        </p>
+        <p>
+          An{' '}
+          <a href="https://dvc.org/doc/studio/user-guide/projects-and-experiments/live-metrics-and-plots#set-up-an-access-token">
+            access token
+          </a>{' '}
+          can be generated from your Studio profile page.
+        </p>
+        <Button
+          appearance="primary"
+          isNested={false}
+          text="Sign In"
+          onClick={openStudio}
+        />
+        <Button
+          appearance="secondary"
+          isNested={true}
+          text="Get Token"
+          onClick={openStudioProfile}
+        />
+        <Button
+          appearance="secondary"
+          isNested={true}
+          text="Save"
+          onClick={saveStudioToken}
+        />
+        <p>
+          Don&apos;t Have an account? <a href={STUDIO_URL}>Get Started</a>
+        </p>
+      </div>
+    </EmptyState>
+  )
+}

webview/src/setup/components/studio/Settings.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'
+import { saveStudioToken, removeStudioToken } from '../messages'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { Button } from '../../../shared/components/button/Button'
+
+export const Settings: React.FC<{
+  shareLiveToStudio: boolean
+  setShareLiveToStudio: (shareLiveToStudio: boolean) => void
+}> = ({ shareLiveToStudio, setShareLiveToStudio }) => {
+  return (
+    <EmptyState isFullScreen={false}>
+      <div>
+        <h1>Studio Settings</h1>
+        <p>
+          Experiment metrics and plots logged with DVCLive <br />
+          can be{' '}
+          <a href="https://dvc.org/doc/studio/user-guide/projects-and-experiments/live-metrics-and-plots#send-and-view-live-metrics-and-plots">
+            automatically shared to Studio
+          </a>
+          .
+        </p>
+        <p>
+          <VSCodeCheckbox
+            onClick={() => setShareLiveToStudio(!shareLiveToStudio)}
+            checked={shareLiveToStudio}
+          >
+            Share New Experiments Live
+          </VSCodeCheckbox>
+        </p>
+        <Button
+          appearance="primary"
+          isNested={false}
+          text="Update Token"
+          onClick={saveStudioToken}
+        />
+        <Button
+          appearance="secondary"
+          isNested={true}
+          text="Disconnect"
+          onClick={removeStudioToken}
+        />
+      </div>
+    </EmptyState>
+  )
+}

webview/src/setup/components/studio/Studio.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { SectionCollapsed } from 'dvc/src/setup/webview/contract'
+import { Connect } from './Connect'
+import { Settings } from './Settings'
+import { CliIncompatible } from './CliIncompatible'
+
+export const Studio: React.FC<{
+  isStudioConnected: boolean
+  shareLiveToStudio: boolean
+  cliCompatible: boolean
+  setSectionCollapsed: (sectionCollapsed: SectionCollapsed) => void
+  setShareLiveToStudio: (shareLiveToStudio: boolean) => void
+}> = ({
+  cliCompatible,
+  isStudioConnected,
+  shareLiveToStudio,
+  setSectionCollapsed,
+  setShareLiveToStudio
+}) => {
+  if (!cliCompatible) {
+    return <CliIncompatible setSectionCollapsed={setSectionCollapsed} />
+  }
+
+  return isStudioConnected ? (
+    <Settings
+      shareLiveToStudio={shareLiveToStudio}
+      setShareLiveToStudio={setShareLiveToStudio}
+    />
+  ) : (
+    <Connect />
+  )
+}