Merge branch 'main' into update-setup-install-button

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.9.1] - 2023-05-31
+
+### 🚀 New Features and Enhancements
+
+- Add storage types details to remote setup page [#3996](https://github.com/iterative/vscode-dvc/pull/3996) by [@mattseddon](https://github.com/mattseddon)
+- Add link to show applicable extension for each storage provider [#4004](https://github.com/iterative/vscode-dvc/pull/4004) by [@mattseddon](https://github.com/mattseddon)
+
+### 🔨 Maintenance
+
+- Move CodeSlider into Setup folder [#4005](https://github.com/iterative/vscode-dvc/pull/4005) by [@mattseddon](https://github.com/mattseddon)
+- Create shared panels component [#4006](https://github.com/iterative/vscode-dvc/pull/4006) by [@mattseddon](https://github.com/mattseddon)
+- Fix styles of supported storage panels [#4007](https://github.com/iterative/vscode-dvc/pull/4007) by [@mattseddon](https://github.com/mattseddon)
+
 ## [0.9.0] - 2023-05-28
 
 ### 🚀 New Features and Enhancements

extension/package.json

@@ -9,7 +9,7 @@
   "extensionDependencies": [
     "vscode.git"
   ],
-  "version": "0.9.0",
+  "version": "0.9.1",
   "license": "Apache-2.0",
   "readme": "./README.md",
   "repository": {

extension/src/webview/factory.ts

@@ -35,6 +35,7 @@ export const createWebview = async (
     title,
     viewColumn || ViewColumn.Active,
     {
+      enableCommandUris: true,
       enableScripts: true,
       localResourceRoots: [Uri.file(distPath), ...getWorkspaceRootUris()],
       retainContextWhenHidden: true

webview/icons/codicons.mjs

@@ -10,6 +10,7 @@ export const codicons = [
   'copy',
   'ellipsis',
   'error',
+  'extensions',
   'filter',
   'git-commit',
   'git-merge',

webview/package.json

@@ -39,14 +39,14 @@
     "vega-util": "1.17.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.0.15",
-    "@storybook/addon-interactions": "7.0.15",
-    "@storybook/addons": "7.0.15",
-    "@storybook/builder-webpack5": "7.0.15",
+    "@storybook/addon-essentials": "7.0.17",
+    "@storybook/addon-interactions": "7.0.17",
+    "@storybook/addons": "7.0.17",
+    "@storybook/builder-webpack5": "7.0.17",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "7.0.15",
-    "@storybook/react-webpack5": "7.0.15",
+    "@storybook/react": "7.0.17",
+    "@storybook/react-webpack5": "7.0.17",
     "@storybook/testing-library": "0.1.0",
     "@svgr/core": "^8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
@@ -76,7 +76,7 @@
     "raw-loader": "4.0.2",
     "sass": "1.62.1",
     "sass-loader": "13.3.0",
-    "storybook": "7.0.15",
+    "storybook": "7.0.17",
     "storybook-addon-themes": "6.1.0",
     "style-loader": "3.3.3",
     "ts-loader": "9.4.3",

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'
         }
       ]}

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

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

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

@@ -3,6 +3,7 @@ import styles from './styles.module.scss'
 import { InfoText } from './InfoText'
 import { CloudVersioning } from './CloudVersioning'
 import { CustomAuth } from './CustomAuth'
+import { ShowExtension } from './ShowExtension'
 
 export const AmazonS3 = () => (
   <div className={styles.storageDetails}>
@@ -11,15 +12,13 @@ export const AmazonS3 = () => (
       <a href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html">
         AWS CLI config
       </a>
-      .{'\n'}This reads the default AWS credentials file (if available) or env
-      vars.
-    </p>
-    <p>
-      <InfoText>
-        The AWS user needs the following permissions:{'\n'} s3:ListBucket,
-        s3:GetObject, s3:PutObject, s3:DeleteObject.
-      </InfoText>
+      . This reads the default AWS credentials file (if available) or env vars.
     </p>
+    <ShowExtension id="AmazonWebServices.aws-toolkit-vscode" name="AWS" />
+    <InfoText>
+      The AWS user needs the following permissions: s3:ListBucket, s3:GetObject,
+      s3:PutObject, s3:DeleteObject.
+    </InfoText>
     <CloudVersioning>
       <a href="https://docs.aws.amazon.com/AmazonS3/latest/userguide/Versioning.html">
         S3 versioning

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import styles from './styles.module.scss'
 import { CloudVersioning } from './CloudVersioning'
+import { ShowExtension } from './ShowExtension'
 
 export const AzureBlobStorage = () => (
   <div className={styles.storageDetails}>
@@ -11,6 +12,10 @@ export const AzureBlobStorage = () => (
       </a>{' '}
       for details on how to authenticate.
     </p>
+    <ShowExtension
+      id="ms-azuretools.vscode-azurestorage"
+      name="Azure Storage"
+    />
     <CloudVersioning>
       <a href="https://learn.microsoft.com/en-us/azure/storage/blobs/versioning-overview">
         Blob versioning

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

@@ -6,8 +6,7 @@ import { CodeBlock } from '../shared/CodeBlock'
 export const CloudVersioning: React.FC<PropsWithChildren> = ({ children }) => (
   <>
     <InfoText>
-      <CloudVersioningLink /> requires {children}
-      {'\n'} To enable run:
+      <CloudVersioningLink /> requires <span>{children}</span> To enable run:
     </InfoText>
     <CodeBlock language="bash">
       dvc remote modify myremote version_aware true

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>
 )

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

@@ -1,12 +1,12 @@
 import React from 'react'
-import { StorageSlider } from './StorageSlider'
+import { SupportedStorage } from './SupportedStorage'
 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 />
+    <SupportedStorage />
   </EmptyState>
 )

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

@@ -2,6 +2,7 @@ import React from 'react'
 import styles from './styles.module.scss'
 import { CloudVersioning } from './CloudVersioning'
 import { CustomAuth } from './CustomAuth'
+import { ShowExtension } from './ShowExtension'
 import { Icon } from '../../../shared/components/Icon'
 import { Warning } from '../../../shared/components/icons'
 
@@ -12,16 +13,16 @@ export const GoogleCloudStorage: React.FC = () => (
       <a href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html">
         glcoud CLI authorization
       </a>
-      .{'\n'}This reads the default GCP key file.
+      . This reads the default GCP key file.
     </p>
+    <ShowExtension id="GoogleCloudTools.cloudcode" name="Google Cloud Code" />
     <p>
       <Icon icon={Warning} width={16} height={16} className={styles.warnIcon} />{' '}
       Make sure to run{' '}
       <a href="https://cloud.google.com/sdk/gcloud/reference/auth/application-default/login">
         gcloud auth application-default login
       </a>{' '}
-      unless{'\n'}
-      you use a service account or other ways to authenticate (
+      unless you use a service account or other ways to authenticate (
       <a href="https://stackoverflow.com/a/53307505/298182">more info</a>).
     </p>
     <CloudVersioning>

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

@@ -38,11 +38,9 @@ export const OtherStorageTypes: React.FC = () => (
         </a>
       </li>
     </ul>
-    <p>
-      <InfoText>
-        <CloudVersioningLink /> is not currently supported by any of these
-        remotes.
-      </InfoText>
-    </p>
+    <InfoText>
+      <CloudVersioningLink /> is not currently supported by any of these
+      remotes.
+    </InfoText>
   </div>
 )

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>
   )
 }

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>
     )
   }

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

@@ -0,0 +1,31 @@
+import React from 'react'
+import styles from './styles.module.scss'
+import { Icon } from '../../../shared/components/Icon'
+import { Extensions } from '../../../shared/components/icons'
+
+export const ShowExtension: React.FC<{ id: string; name: string }> = ({
+  id,
+  name
+}) => {
+  const idQuery = `"@id:${id}"`
+
+  return (
+    <p>
+      <Icon
+        icon={Extensions}
+        width={16}
+        height={16}
+        className={styles.infoIcon}
+      />{' '}
+      View the{' '}
+      <a
+        href={`command:workbench.extensions.search?${encodeURIComponent(
+          idQuery
+        )}`}
+      >
+        {name}
+      </a>{' '}
+      extension.
+    </p>
+  )
+}