Condense information on storage types for remote onboarding (#4051)

Author: mattseddon

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

@@ -1,34 +1,30 @@
 import React from 'react'
 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}>
+    <ShowExtension
+      id="AmazonWebServices.aws-toolkit-vscode"
+      name="AWS Toolkit"
+      capabilities="manage AWS profiles and S3 buckets"
+    />
     <p>
       When needed, DVC will try to authenticate using your{' '}
       <a href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html">
         AWS CLI config
       </a>
       . This reads the default AWS credentials file (if available) or env vars.
+      For custom authentication see the{' '}
+      <a href="https://dvc.org/doc/user-guide/data-management/remote-storage/amazon-s3#custom-authentication">
+        docs
+      </a>
+      .
     </p>
-    <ShowExtension
-      id="AmazonWebServices.aws-toolkit-vscode"
-      name="AWS Toolkit"
-      capabilities="manage AWS profiles and S3 buckets"
-    />
     <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
-      </a>{' '}
-      enabled on the bucket.
-    </CloudVersioning>
-    <CustomAuth href="https://dvc.org/doc/user-guide/data-management/remote-storage/amazon-s3#custom-authentication" />
   </div>
 )

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

@@ -1,27 +1,20 @@
 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}>
+    <ShowExtension
+      capabilities="create storage accounts and manage blob containers"
+      id="ms-azuretools.vscode-azurestorage"
+      name="Azure Storage"
+    />
     <p>
       See the{' '}
       <a href="https://dvc.org/doc/user-guide/data-management/remote-storage/azure-blob-storage#authentication">
         docs
       </a>{' '}
       for details on how to authenticate.
     </p>
-    <ShowExtension
-      capabilities="create storage accounts and manage blob containers"
-      id="ms-azuretools.vscode-azurestorage"
-      name="Azure Storage"
-    />
-    <CloudVersioning>
-      <a href="https://learn.microsoft.com/en-us/azure/storage/blobs/versioning-overview">
-        Blob versioning
-      </a>{' '}
-      enabled on the storage account and container.
-    </CloudVersioning>
   </div>
 )

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

@@ -1,25 +1,27 @@
 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'
 
 export const GoogleCloudStorage: React.FC = () => (
   <div className={styles.storageDetails}>
+    <ShowExtension
+      id="GoogleCloudTools.cloudcode"
+      name="Google Cloud Code"
+      capabilities="create projects and provides snippets for working with the Cloud Storage API"
+    />
     <p>
       When needed, DVC will try to authenticate using your{' '}
       <a href="https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html">
         glcoud CLI authorization
       </a>
-      . This reads the default GCP key file.
+      . This reads the default GCP key file. For custom authentication see the{' '}
+      <a href="https://dvc.org/doc/user-guide/data-management/remote-storage/google-cloud-storage#custom-authentication">
+        docs
+      </a>
+      .
     </p>
-    <ShowExtension
-      id="GoogleCloudTools.cloudcode"
-      name="Google Cloud Code"
-      capabilities="create projects and provides snippets for working with the Cloud Storage API"
-    />
     <p>
       <Icon icon={Warning} width={16} height={16} className={styles.warnIcon} />{' '}
       Make sure to run{' '}
@@ -29,12 +31,5 @@ export const GoogleCloudStorage: React.FC = () => (
       unless you use a service account or other ways to authenticate (
       <a href="https://stackoverflow.com/a/53307505/298182">more info</a>).
     </p>
-    <CloudVersioning>
-      <a href="https://cloud.google.com/storage/docs/object-versioning">
-        Object versioning
-      </a>{' '}
-      enabled on the bucket.
-    </CloudVersioning>
-    <CustomAuth href="https://dvc.org/doc/user-guide/data-management/remote-storage/google-cloud-storage#custom-authentication" />
   </div>
 )

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

@@ -1,7 +1,5 @@
 import React from 'react'
 import styles from './styles.module.scss'
-import { InfoText } from './InfoText'
-import { CloudVersioningLink } from './CloudVersioningLink'
 
 export const OtherStorageTypes: React.FC = () => (
   <div className={styles.storageDetails}>
@@ -38,9 +36,5 @@ export const OtherStorageTypes: React.FC = () => (
         </a>
       </li>
     </ul>
-    <InfoText>
-      <CloudVersioningLink /> is not currently supported by any of these
-      remotes.
-    </InfoText>
   </div>
 )