Merge branch 'main' into svgr-list

package.json

@@ -72,7 +72,7 @@
   },
   "resolutions": {
     "decode-uri-component": "0.2.2",
-    "@types/react": "18.2.4",
+    "@types/react": "18.2.5",
     "**/recursive-readdir/minimatch": "6.2.0",
     "fastify": "3.29.5",
     "json5": "2.2.3",

webview/package.json

@@ -58,7 +58,7 @@
     "@types/jest": "29.5.1",
     "@types/jsdom": "21.1.1",
     "@types/node": "16.x",
-    "@types/react": "18.2.4",
+    "@types/react": "18.2.5",
     "@types/react-dom": "18.2.3",
     "@types/react-measure": "2.0.8",
     "@types/react-virtualized": "9.21.21",

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

@@ -1,14 +1,9 @@
 import React, { PropsWithChildren } from 'react'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { Button } from '../../../shared/components/button/Button'
+import { checkCompatibility } from '../messages'
 
-type CliIncompatibleProps = {
-  checkCompatibility: () => void
-}
-
-export const CliIncompatible: React.FC<
-  PropsWithChildren<CliIncompatibleProps>
-> = ({ checkCompatibility, children }) => (
+export const CliIncompatible: React.FC<PropsWithChildren> = ({ children }) => (
   <EmptyState isFullScreen={false}>
     <div>
       <h1>DVC is incompatible</h1>

webview/src/setup/components/dvc/CliUnavailable.tsx

@@ -1,17 +1,15 @@
 import React, { PropsWithChildren } from 'react'
+import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
 import { Button } from '../../../shared/components/button/Button'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { SetupState } from '../../store'
+import { installDvc, setupWorkspace } from '../messages'
 
-type CliUnavailableProps = {
-  installDvc: () => void
-  pythonBinPath: string | undefined
-  setupWorkspace: () => void
-}
-
-export const CliUnavailable: React.FC<
-  PropsWithChildren<CliUnavailableProps>
-> = ({ installDvc, pythonBinPath, setupWorkspace, children }) => {
+export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
+  const pythonBinPath = useSelector(
+    (state: SetupState) => state.dvc.pythonBinPath
+  )
   const canInstall = !!pythonBinPath
 
   const contents = canInstall ? (

webview/src/setup/components/dvc/Dvc.tsx

@@ -5,13 +5,6 @@ import { DvcEnvDetails } from './DvcEnvDetails'
 import { CliIncompatible } from './CliIncompatible'
 import { ProjectUninitialized } from './ProjectUninitialized'
 import { CliUnavailable } from './CliUnavailable'
-import {
-  checkCompatibility,
-  initializeDvc,
-  initializeGit,
-  installDvc,
-  setupWorkspace
-} from '../messages'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { usePrevious } from '../../hooks/usePrevious'
 import { updateSectionCollapsed } from '../../state/webviewSlice'
@@ -22,15 +15,9 @@ export const Dvc: React.FC = () => {
   const hasWebviewData = useSelector(
     (state: SetupState) => state.webview.hasData
   )
-  const {
-    canGitInitialize,
-    cliCompatible,
-    dvcCliDetails,
-    isPythonExtensionUsed,
-    needsGitInitialized,
-    projectInitialized,
-    pythonBinPath
-  } = useSelector((state: SetupState) => state.dvc)
+  const { cliCompatible, dvcCliDetails, projectInitialized } = useSelector(
+    (state: SetupState) => state.dvc
+  )
   const [isComplete, setIsComplete] = useState<boolean | null>(null)
   const previousIsComplete = usePrevious(isComplete)
 
@@ -59,48 +46,22 @@ export const Dvc: React.FC = () => {
     hasWebviewData
   ])
 
-  const children = dvcCliDetails && (
-    <DvcEnvDetails
-      {...dvcCliDetails}
-      isPythonExtensionUsed={isPythonExtensionUsed}
-    />
-  )
+  const children = dvcCliDetails && <DvcEnvDetails {...dvcCliDetails} />
 
   if (!hasWebviewData) {
     return <EmptyState isFullScreen={false}>Loading...</EmptyState>
   }
 
   if (cliCompatible === false) {
-    return (
-      <CliIncompatible checkCompatibility={checkCompatibility}>
-        {children}
-      </CliIncompatible>
-    )
+    return <CliIncompatible>{children}</CliIncompatible>
   }
 
   if (cliCompatible === undefined) {
-    return (
-      <CliUnavailable
-        installDvc={installDvc}
-        pythonBinPath={pythonBinPath}
-        setupWorkspace={setupWorkspace}
-      >
-        {children}
-      </CliUnavailable>
-    )
+    return <CliUnavailable>{children}</CliUnavailable>
   }
 
   if (!projectInitialized) {
-    return (
-      <ProjectUninitialized
-        canGitInitialize={canGitInitialize}
-        initializeDvc={initializeDvc}
-        initializeGit={initializeGit}
-        needsGitInitialized={needsGitInitialized}
-      >
-        {children}
-      </ProjectUninitialized>
-    )
+    return <ProjectUninitialized>{children}</ProjectUninitialized>
   }
   return (
     <EmptyState isFullScreen={false}>

webview/src/setup/components/dvc/DvcEnvCommandRow.tsx

@@ -1,17 +1,20 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import { DvcEnvInfoRow } from './DvcEnvInfoRow'
 import styles from './styles.module.scss'
 import { selectPythonInterpreter, setupWorkspace } from '../messages'
+import { SetupState } from '../../store'
 
 interface DvcEnvCommandRowProps {
   command: string
-  isPythonExtensionUsed: boolean
 }
 
 export const DvcEnvCommandRow: React.FC<DvcEnvCommandRowProps> = ({
-  command,
-  isPythonExtensionUsed
+  command
 }) => {
+  const isPythonExtensionUsed = useSelector(
+    (state: SetupState) => state.dvc.isPythonExtensionUsed
+  )
   const commandText = command || 'Not found'
   const commandValue = (
     <>

webview/src/setup/components/dvc/DvcEnvDetails.tsx

@@ -8,14 +8,9 @@ import { DvcEnvInfoRow } from './DvcEnvInfoRow'
 import styles from './styles.module.scss'
 import { DvcEnvCommandRow } from './DvcEnvCommandRow'
 
-interface DvcEnvDetailsProps extends DvcCliDetails {
-  isPythonExtensionUsed: boolean
-}
-
-export const DvcEnvDetails: React.FC<DvcEnvDetailsProps> = ({
+export const DvcEnvDetails: React.FC<DvcCliDetails> = ({
   command,
-  version,
-  isPythonExtensionUsed
+  version
 }) => {
   const versionText = (
     <span>{`${
@@ -26,12 +21,7 @@ export const DvcEnvDetails: React.FC<DvcEnvDetailsProps> = ({
   return (
     <table data-testid="dvc-env-details" className={styles.envDetails}>
       <tbody>
-        {version && (
-          <DvcEnvCommandRow
-            isPythonExtensionUsed={isPythonExtensionUsed}
-            command={command}
-          />
-        )}
+        {version && <DvcEnvCommandRow command={command} />}
         <DvcEnvInfoRow title="Version" text={versionText} />
       </tbody>
     </table>

webview/src/setup/components/dvc/DvcUnitialized.tsx

@@ -1,12 +1,9 @@
 import React, { PropsWithChildren } from 'react'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { Button } from '../../../shared/components/button/Button'
+import { initializeDvc } from '../messages'
 
-export const DvcUninitialized: React.FC<
-  PropsWithChildren<{
-    initializeDvc: () => void
-  }>
-> = ({ initializeDvc, children }) => (
+export const DvcUninitialized: React.FC<PropsWithChildren> = ({ children }) => (
   <EmptyState isFullScreen={false}>
     <h1>DVC is not initialized</h1>
     {children}

webview/src/setup/components/dvc/GitUnitialized.tsx

@@ -1,15 +1,15 @@
 import React, { PropsWithChildren } from 'react'
+import { useSelector } from 'react-redux'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { Button } from '../../../shared/components/button/Button'
+import { SetupState } from '../../store'
+import { initializeGit } from '../messages'
 
-interface GitUninitializedProps {
-  canGitInitialize: boolean | undefined
-  initializeGit: () => void
-}
+export const GitUninitialized: React.FC<PropsWithChildren> = ({ children }) => {
+  const canGitInitialize = useSelector(
+    (state: SetupState) => state.dvc.canGitInitialize
+  )
 
-export const GitUninitialized: React.FC<
-  PropsWithChildren<GitUninitializedProps>
-> = ({ canGitInitialize, initializeGit, children }) => {
   const conditionalContent = canGitInitialize ? (
     <Button onClick={initializeGit} text="Initialize Git" />
   ) : (

webview/src/setup/components/dvc/ProjectUninitialized.tsx

@@ -1,37 +1,19 @@
 import React, { PropsWithChildren } from 'react'
+import { useSelector } from 'react-redux'
 import { GitUninitialized } from './GitUnitialized'
 import { DvcUninitialized } from './DvcUnitialized'
+import { SetupState } from '../../store'
 
-interface ProjectUninitializedProps {
-  canGitInitialize: boolean | undefined
-  initializeDvc: () => void
-  initializeGit: () => void
-  needsGitInitialized: boolean | undefined
-}
-
-export const ProjectUninitialized: React.FC<
-  PropsWithChildren<ProjectUninitializedProps>
-> = ({
-  initializeDvc,
-  needsGitInitialized,
-  canGitInitialize,
-  initializeGit,
+export const ProjectUninitialized: React.FC<PropsWithChildren> = ({
   children
 }) => {
+  const needsGitInitialized = useSelector(
+    (state: SetupState) => state.dvc.needsGitInitialized
+  )
+
   if (needsGitInitialized) {
-    return (
-      <GitUninitialized
-        initializeGit={initializeGit}
-        canGitInitialize={canGitInitialize}
-      >
-        {children}
-      </GitUninitialized>
-    )
+    return <GitUninitialized>{children}</GitUninitialized>
   }
 
-  return (
-    <DvcUninitialized initializeDvc={initializeDvc}>
-      {children}
-    </DvcUninitialized>
-  )
+  return <DvcUninitialized>{children}</DvcUninitialized>
 }

webview/src/setup/components/experiments/Experiments.tsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { SetupSection } from 'dvc/src/setup/webview/contract'
 import { NoData } from './NoData'
 import { NeedsGitCommit } from './NeedsGitCommit'
-import { showExperiments, showScmPanel } from '../messages'
+import { showExperiments } from '../messages'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { IconButton } from '../../../shared/components/button/IconButton'
 import { Beaker } from '../../../shared/components/icons'
@@ -43,7 +43,7 @@ export const Experiments: React.FC<ExperimentsProps> = ({ isDvcSetup }) => {
   }
 
   if (needsGitCommit) {
-    return <NeedsGitCommit showScmPanel={showScmPanel} />
+    return <NeedsGitCommit />
   }
 
   if (hasData === undefined) {

webview/src/setup/components/experiments/NeedsGitCommit.tsx

@@ -1,12 +1,9 @@
 import React from 'react'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { Button } from '../../../shared/components/button/Button'
+import { showScmPanel } from '../messages'
 
-type NeedsGitCommitProps = { showScmPanel: () => void }
-
-export const NeedsGitCommit: React.FC<NeedsGitCommitProps> = ({
-  showScmPanel
-}) => (
+export const NeedsGitCommit: React.FC = () => (
   <EmptyState isFullScreen={false}>
     <div>
       <h1>No Git commits detected</h1>

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

@@ -1,13 +1,18 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 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'
+import { SetupState } from '../../store'
 
 export const Settings: React.FC<{
-  shareLiveToStudio: boolean
   setShareLiveToStudio: (shareLiveToStudio: boolean) => void
-}> = ({ shareLiveToStudio, setShareLiveToStudio }) => {
+}> = ({ setShareLiveToStudio }) => {
+  const shareLiveToStudio = useSelector(
+    (state: SetupState) => state.studio.shareLiveToStudio
+  )
+
   return (
     <EmptyState isFullScreen={false}>
       <div>

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

@@ -9,19 +9,14 @@ export const Studio: React.FC<{
   cliCompatible: boolean
   setShareLiveToStudio: (shareLiveToStudio: boolean) => void
 }> = ({ cliCompatible, setShareLiveToStudio }) => {
-  const { isStudioConnected, shareLiveToStudio } = useSelector(
-    (state: SetupState) => state.studio
-  )
+  const { isStudioConnected } = useSelector((state: SetupState) => state.studio)
 
   if (!cliCompatible) {
     return <CliIncompatible />
   }
 
   return isStudioConnected ? (
-    <Settings
-      shareLiveToStudio={shareLiveToStudio}
-      setShareLiveToStudio={setShareLiveToStudio}
-    />
+    <Settings setShareLiveToStudio={setShareLiveToStudio} />
   ) : (
     <Connect />
   )

webview/src/setup/state/webviewSlice.ts

@@ -6,8 +6,8 @@ import {
 } from 'dvc/src/setup/webview/contract'
 
 export type WebviewState = {
-  sectionCollapsed: SectionCollapsed
   hasData: boolean
+  sectionCollapsed: SectionCollapsed
 }
 
 export const webviewInitialState: WebviewState = {

yarn.lock

@@ -5408,10 +5408,10 @@
     "@types/prop-types" "*"
     "@types/react" "^17"
 
-"@types/react@*", "@types/[email protected].4", "@types/react@>=16", "@types/react@^16.9.19", "@types/react@^17":
-  version "18.2.4"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.4.tgz#970e6d56f6d3fd8bd2cb1d1f042aef1d0426d08e"
-  integrity sha512-IvAIhJTmKAAJmCIcaa6+5uagjyh+9GvcJ/thPZcw+i+vx+22eHlTy2Q1bJg/prES57jehjebq9DnIhOTtIhmLw==
+"@types/react@*", "@types/[email protected].5", "@types/react@>=16", "@types/react@^16.9.19", "@types/react@^17":
+  version "18.2.5"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.5.tgz#f9403e1113b12b53f7edcdd9a900c10dd4b49a59"
+  integrity sha512-RuoMedzJ5AOh23Dvws13LU9jpZHIc/k90AgmK7CecAYeWmSr3553L4u5rk4sWAPBuQosfT7HmTfG4Rg5o4nGEA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"