Create shared panels component

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react'
+import styles from './styles.module.scss'
+import { Panels } from '../shared/Panels'
+
+interface CodePanelsProps {
+  codeBlocks: { title: string; children: ReactNode }[]
+}
+
+export const CodePanels: React.FC<CodePanelsProps> = ({ codeBlocks }) => (
+  <Panels panels={codeBlocks} className={styles.codePanels} />
+)

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

@@ -1,33 +1,34 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import React from 'react'
-import { CodeSlider } from './CodeSlider'
+import { CodePanels } from './CodePanels'
 import pyTorch from '../../snippets/pyTorch.py'
 import huggingFace from '../../snippets/huggingFace.py'
 import keras from '../../snippets/keras.py'
 import pythonApi from '../../snippets/pythonApi.py'
+import { CodeBlock } from '../shared/CodeBlock'
+
+const PythonCodeBlock = ({ children }: { children: string }) => (
+  <CodeBlock language="python">{children}</CodeBlock>
+)
 
 export const DvcLiveExamples: React.FC = () => {
   return (
-    <CodeSlider
+    <CodePanels
       codeBlocks={[
         {
-          children: pyTorch.toString(),
-          language: 'python',
+          children: <PythonCodeBlock>{pyTorch.toString()}</PythonCodeBlock>,
           title: 'PyTorch Lightning'
         },
         {
-          children: huggingFace.toString(),
-          language: 'python',
+          children: <PythonCodeBlock>{huggingFace.toString()}</PythonCodeBlock>,
           title: 'Hugging Face'
         },
         {
-          children: keras.toString(),
-          language: 'python',
+          children: <PythonCodeBlock>{keras.toString()}</PythonCodeBlock>,
           title: 'Keras'
         },
         {
-          children: pythonApi.toString(),
-          language: 'python',
+          children: <PythonCodeBlock>{pythonApi.toString()}</PythonCodeBlock>,
           title: 'General Python API'
         }
       ]}

webview/src/setup/components/experiments/styles.module.scss

@@ -1,6 +1,6 @@
 @import '../../../shared/variables';
 
-.codeSlider {
+.codePanels {
   margin-top: 40px;
 
   vscode-panels {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StorageSlider } from './StorageSlider'
+import { StoragePanels } from './StoragePanels'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { StartButton } from '../../../shared/components/button/StartButton'
 import { addRemote } from '../messages'
@@ -22,6 +22,6 @@ export const Connect: React.FC = () => (
       for details on how to connect to a remote
     </p>
     <StartButton onClick={() => addRemote()} text="Add Remote" />
-    <StorageSlider />
+    <StoragePanels />
   </EmptyState>
 )

webview/src/setup/components/remotes/DvcUninitialized.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { StorageSlider } from './StorageSlider'
+import { StoragePanels } from './StoragePanels'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { FocusDvcSection } from '../shared/FocusDvcSection'
 
 export const DvcUninitialized: React.FC<{}> = () => (
   <EmptyState isFullScreen={false}>
     <h1>DVC is not initialized</h1>
     <FocusDvcSection />
-    <StorageSlider />
+    <StoragePanels />
   </EmptyState>
 )

webview/src/setup/components/remotes/RemoteDetails.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { RemoteList } from 'dvc/src/setup/webview/contract'
-import { StorageSlider } from './StorageSlider'
+import { StoragePanels } from './StoragePanels'
 import { MultiProjectRemotes } from './MultiProjectRemotes'
 import { ProjectRemotes } from './ProjectRemotes'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
@@ -34,7 +34,7 @@ export const RemoteDetails: React.FC<{
         onClick={removeRemote}
         text="Remove"
       />
-      <StorageSlider />
+      <StoragePanels />
     </EmptyState>
   )
 }

webview/src/setup/components/remotes/Remotes.tsx

@@ -3,7 +3,7 @@ import { RemoteList } from 'dvc/src/setup/webview/contract'
 import { Connect } from './Connect'
 import { DvcUninitialized } from './DvcUninitialized'
 import { RemoteDetails } from './RemoteDetails'
-import { StorageSlider } from './StorageSlider'
+import { StoragePanels } from './StoragePanels'
 import { CliIncompatible } from '../shared/CliIncompatible'
 
 export const Remotes: React.FC<{
@@ -14,7 +14,7 @@ export const Remotes: React.FC<{
     return (
       <CliIncompatible>
         <p>Locate DVC to connect to a remote</p>
-        <StorageSlider />
+        <StoragePanels />
       </CliIncompatible>
     )
   }

webview/src/setup/components/remotes/StoragePanels.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import styles from './styles.module.scss'
+import { AmazonS3 } from './AmazonS3'
+import { GoogleCloudStorage } from './GoogleCloudStorage'
+import { AzureBlobStorage } from './AzureBlobStorage'
+import { OtherStorageTypes } from './OtherStorageTypes'
+import { Panels } from '../shared/Panels'
+
+const storageTypes = [
+  {
+    children: <AmazonS3 />,
+    title: 'Amazon S3'
+  },
+  {
+    children: <GoogleCloudStorage />,
+    title: 'Google Cloud Storage'
+  },
+  {
+    children: <AzureBlobStorage />,
+    title: 'Azure Blob Storage'
+  },
+  {
+    children: <OtherStorageTypes />,
+    title: 'Other'
+  }
+]
+
+export const StoragePanels: React.FC = () => (
+  <Panels panels={storageTypes} className={styles.storagePanels} />
+)

webview/src/setup/components/remotes/styles.module.scss

@@ -34,8 +34,8 @@
   text-align: center;
 }
 
-.storageSlider {
-  margin-top: 40px;
+.storagePanels {
+  margin-top: 20px;
 
   vscode-panels {
     width: max-content;
@@ -44,19 +44,16 @@
   }
 }
 
-.storageView {
-  text-align: left;
-  padding: 0;
-  width: max-content;
-  margin: 0 50px;
-}
-
 .storageDetails {
   background-color: transparent !important;
-  letter-spacing: 0.04em;
   color: $watermark-color;
   font-family: sans-serif;
+  letter-spacing: 0.04em;
   line-height: 1.6;
+  margin: 0 50px;
+  padding: 0;
+  text-align: left;
+  width: max-content;
 }
 
 .infoIcon {

webview/src/setup/components/shared/CodeBlock.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import Highlight, { defaultProps, Language } from 'prism-react-renderer'
 import styles from './styles.module.scss'
 
-export interface CodeBlockProps {
+interface CodeBlockProps {
   language: Language
   children: string
   inline?: boolean

webview/src/setup/components/shared/Panels.tsx

@@ -0,0 +1,30 @@
+import {
+  VSCodePanelTab,
+  VSCodePanelView,
+  VSCodePanels
+} from '@vscode/webview-ui-toolkit/react'
+import React, { ReactNode } from 'react'
+
+interface PanelProps {
+  panels: { title: string; children: ReactNode }[]
+  className: string
+}
+
+export const Panels: React.FC<PanelProps> = ({ className, panels }) => {
+  return (
+    <div className={className}>
+      <VSCodePanels>
+        {panels.map(panel => (
+          <VSCodePanelTab key={`tab-${panel.title}`}>
+            {panel.title}
+          </VSCodePanelTab>
+        ))}
+        {panels.map(panel => (
+          <VSCodePanelView key={`view-${panel.title}`}>
+            {panel.children}
+          </VSCodePanelView>
+        ))}
+      </VSCodePanels>
+    </div>
+  )
+}