From e02ed47f9c2d909971808f1dce2f4c9886f95864 Mon Sep 17 00:00:00 2001
From: Matt Seddon <mattseddon@hotmail.com>
Date: Tue, 30 May 2023 13:22:30 +1000
Subject: [PATCH] Create shared panels component

---
 .../components/experiments/CodeSlider.tsx     | 37 --------------
 .../experiments/DvcLiveExamples.tsx           | 25 ++++++----
 .../components/experiments/styles.module.scss |  2 +-
 .../src/setup/components/remotes/Connect.tsx  |  4 +-
 .../components/remotes/DvcUninitialized.tsx   |  4 +-
 .../components/remotes/RemoteDetails.tsx      |  4 +-
 .../src/setup/components/remotes/Remotes.tsx  |  4 +-
 .../components/remotes/StorageSlider.tsx      | 50 -------------------
 .../components/remotes/SupportedStorage.tsx   | 31 ++++++++++++
 .../components/remotes/styles.module.scss     | 17 +++----
 .../src/setup/components/shared/CodeBlock.tsx |  2 +-
 .../src/setup/components/shared/Panels.tsx    | 30 +++++++++++
 12 files changed, 92 insertions(+), 118 deletions(-)
 delete mode 100644 webview/src/setup/components/experiments/CodeSlider.tsx
 delete mode 100644 webview/src/setup/components/remotes/StorageSlider.tsx
 create mode 100644 webview/src/setup/components/remotes/SupportedStorage.tsx
 create mode 100644 webview/src/setup/components/shared/Panels.tsx

diff --git a/webview/src/setup/components/experiments/CodeSlider.tsx b/webview/src/setup/components/experiments/CodeSlider.tsx
deleted file mode 100644
index 74abeaffb9..0000000000
--- a/webview/src/setup/components/experiments/CodeSlider.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  VSCodePanels,
-  VSCodePanelTab,
-  VSCodePanelView
-} from '@vscode/webview-ui-toolkit/react'
-import React from 'react'
-import styles from './styles.module.scss'
-import { CodeBlock, CodeBlockProps } from '../shared/CodeBlock'
-
-interface CodeBlockWithTitle extends CodeBlockProps {
-  title: string
-}
-
-interface CodeSliderProps {
-  codeBlocks: CodeBlockWithTitle[]
-}
-
-export const CodeSlider: React.FC<CodeSliderProps> = ({ codeBlocks }) => {
-  return (
-    <div className={styles.codeSlider}>
-      <VSCodePanels>
-        {codeBlocks.map(codeBlock => (
-          <VSCodePanelTab key={`tab-${codeBlock.title}`}>
-            {codeBlock.title}
-          </VSCodePanelTab>
-        ))}
-        {codeBlocks.map(codeBlock => (
-          <VSCodePanelView key={`view-${codeBlock.title}`}>
-            <CodeBlock language={codeBlock.language}>
-              {codeBlock.children}
-            </CodeBlock>
-          </VSCodePanelView>
-        ))}
-      </VSCodePanels>
-    </div>
-  )
-}
diff --git a/webview/src/setup/components/experiments/DvcLiveExamples.tsx b/webview/src/setup/components/experiments/DvcLiveExamples.tsx
index 9be9aabd85..fa562a64e7 100644
--- a/webview/src/setup/components/experiments/DvcLiveExamples.tsx
+++ b/webview/src/setup/components/experiments/DvcLiveExamples.tsx
@@ -1,33 +1,36 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import React from 'react'
-import { CodeSlider } from './CodeSlider'
+import styles from './styles.module.scss'
 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'
+import { Panels } from '../shared/Panels'
+
+const PythonCodeBlock = ({ children }: { children: string }) => (
+  <CodeBlock language="python">{children}</CodeBlock>
+)
 
 export const DvcLiveExamples: React.FC = () => {
   return (
-    <CodeSlider
-      codeBlocks={[
+    <Panels
+      className={styles.dvcLiveExamples}
+      panels={[
         {
-          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'
         }
       ]}
diff --git a/webview/src/setup/components/experiments/styles.module.scss b/webview/src/setup/components/experiments/styles.module.scss
index 0688812ac4..23ef8ed11b 100644
--- a/webview/src/setup/components/experiments/styles.module.scss
+++ b/webview/src/setup/components/experiments/styles.module.scss
@@ -1,6 +1,6 @@
 @import '../../../shared/variables';
 
-.codeSlider {
+.dvcLiveExamples {
   margin-top: 40px;
 
   vscode-panels {
diff --git a/webview/src/setup/components/remotes/Connect.tsx b/webview/src/setup/components/remotes/Connect.tsx
index 6e6470633d..e7506c0789 100644
--- a/webview/src/setup/components/remotes/Connect.tsx
+++ b/webview/src/setup/components/remotes/Connect.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StorageSlider } from './StorageSlider'
+import { SupportedStorage } from './SupportedStorage'
 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 />
+    <SupportedStorage />
   </EmptyState>
 )
diff --git a/webview/src/setup/components/remotes/DvcUninitialized.tsx b/webview/src/setup/components/remotes/DvcUninitialized.tsx
index 7f6c353ada..d49ccfe2a2 100644
--- a/webview/src/setup/components/remotes/DvcUninitialized.tsx
+++ b/webview/src/setup/components/remotes/DvcUninitialized.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StorageSlider } from './StorageSlider'
+import { SupportedStorage } from './SupportedStorage'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { FocusDvcSection } from '../shared/FocusDvcSection'
 
@@ -7,6 +7,6 @@ export const DvcUninitialized: React.FC<{}> = () => (
   <EmptyState isFullScreen={false}>
     <h1>DVC is not initialized</h1>
     <FocusDvcSection />
-    <StorageSlider />
+    <SupportedStorage />
   </EmptyState>
 )
diff --git a/webview/src/setup/components/remotes/RemoteDetails.tsx b/webview/src/setup/components/remotes/RemoteDetails.tsx
index 61e91f9169..ca53d32e6b 100644
--- a/webview/src/setup/components/remotes/RemoteDetails.tsx
+++ b/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 { SupportedStorage } from './SupportedStorage'
 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 />
+      <SupportedStorage />
     </EmptyState>
   )
 }
diff --git a/webview/src/setup/components/remotes/Remotes.tsx b/webview/src/setup/components/remotes/Remotes.tsx
index f5a37397ae..12d9de3367 100644
--- a/webview/src/setup/components/remotes/Remotes.tsx
+++ b/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 { SupportedStorage } from './SupportedStorage'
 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 />
+        <SupportedStorage />
       </CliIncompatible>
     )
   }
diff --git a/webview/src/setup/components/remotes/StorageSlider.tsx b/webview/src/setup/components/remotes/StorageSlider.tsx
deleted file mode 100644
index 0560f4dd81..0000000000
--- a/webview/src/setup/components/remotes/StorageSlider.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import {
-  VSCodePanels,
-  VSCodePanelTab,
-  VSCodePanelView
-} from '@vscode/webview-ui-toolkit/react'
-import styles from './styles.module.scss'
-import { AmazonS3 } from './AmazonS3'
-import { GoogleCloudStorage } from './GoogleCloudStorage'
-import { AzureBlobStorage } from './AzureBlobStorage'
-import { OtherStorageTypes } from './OtherStorageTypes'
-
-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 StorageSlider: React.FC = () => (
-  <div className={styles.storageSlider}>
-    <VSCodePanels>
-      {storageTypes.map(storageType => (
-        <VSCodePanelTab key={`tab-${storageType.title}`}>
-          {storageType.title}
-        </VSCodePanelTab>
-      ))}
-      {storageTypes.map(storageType => (
-        <VSCodePanelView
-          key={`view-${storageType.title}`}
-          className={styles.storageView}
-        >
-          {storageType.children}
-        </VSCodePanelView>
-      ))}
-    </VSCodePanels>
-  </div>
-)
diff --git a/webview/src/setup/components/remotes/SupportedStorage.tsx b/webview/src/setup/components/remotes/SupportedStorage.tsx
new file mode 100644
index 0000000000..284880b67c
--- /dev/null
+++ b/webview/src/setup/components/remotes/SupportedStorage.tsx
@@ -0,0 +1,31 @@
+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'
+
+export const SupportedStorage: React.FC = () => (
+  <Panels
+    panels={[
+      {
+        children: <AmazonS3 />,
+        title: 'Amazon S3'
+      },
+      {
+        children: <GoogleCloudStorage />,
+        title: 'Google Cloud Storage'
+      },
+      {
+        children: <AzureBlobStorage />,
+        title: 'Azure Blob Storage'
+      },
+      {
+        children: <OtherStorageTypes />,
+        title: 'Other'
+      }
+    ]}
+    className={styles.supportedStorage}
+  />
+)
diff --git a/webview/src/setup/components/remotes/styles.module.scss b/webview/src/setup/components/remotes/styles.module.scss
index 95f0b28267..aaa01ec77f 100644
--- a/webview/src/setup/components/remotes/styles.module.scss
+++ b/webview/src/setup/components/remotes/styles.module.scss
@@ -34,8 +34,8 @@
   text-align: center;
 }
 
-.storageSlider {
-  margin-top: 40px;
+.supportedStorage {
+  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 {
diff --git a/webview/src/setup/components/shared/CodeBlock.tsx b/webview/src/setup/components/shared/CodeBlock.tsx
index 0f54239603..46328c8ee1 100644
--- a/webview/src/setup/components/shared/CodeBlock.tsx
+++ b/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
diff --git a/webview/src/setup/components/shared/Panels.tsx b/webview/src/setup/components/shared/Panels.tsx
new file mode 100644
index 0000000000..f491211ab6
--- /dev/null
+++ b/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>
+  )
+}