From 7df876cb5147800cd3e489d563bc6dcd67188621 Mon Sep 17 00:00:00 2001
From: Matt Seddon <37993418+mattseddon@users.noreply.github.com>
Date: Thu, 1 Jun 2023 06:28:05 +1000
Subject: [PATCH] Add capabilities to text mentioning storage provider
 extensions (#4015)

---
 webview/src/setup/components/remotes/AmazonS3.tsx   |  6 +++++-
 .../setup/components/remotes/AzureBlobStorage.tsx   |  1 +
 .../setup/components/remotes/GoogleCloudStorage.tsx |  6 +++++-
 .../src/setup/components/remotes/ShowExtension.tsx  | 13 +++++++------
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/webview/src/setup/components/remotes/AmazonS3.tsx b/webview/src/setup/components/remotes/AmazonS3.tsx
index 4d59df6fbe..ec74749409 100644
--- a/webview/src/setup/components/remotes/AmazonS3.tsx
+++ b/webview/src/setup/components/remotes/AmazonS3.tsx
@@ -14,7 +14,11 @@ export const AmazonS3 = () => (
       </a>
       . This reads the default AWS credentials file (if available) or env vars.
     </p>
-    <ShowExtension id="AmazonWebServices.aws-toolkit-vscode" name="AWS" />
+    <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.
diff --git a/webview/src/setup/components/remotes/AzureBlobStorage.tsx b/webview/src/setup/components/remotes/AzureBlobStorage.tsx
index e237a059f8..4b0ff94f05 100644
--- a/webview/src/setup/components/remotes/AzureBlobStorage.tsx
+++ b/webview/src/setup/components/remotes/AzureBlobStorage.tsx
@@ -13,6 +13,7 @@ export const AzureBlobStorage = () => (
       for details on how to authenticate.
     </p>
     <ShowExtension
+      capabilities="create storage accounts and manage blob containers"
       id="ms-azuretools.vscode-azurestorage"
       name="Azure Storage"
     />
diff --git a/webview/src/setup/components/remotes/GoogleCloudStorage.tsx b/webview/src/setup/components/remotes/GoogleCloudStorage.tsx
index f8fa16c1ab..3e4b53d77c 100644
--- a/webview/src/setup/components/remotes/GoogleCloudStorage.tsx
+++ b/webview/src/setup/components/remotes/GoogleCloudStorage.tsx
@@ -15,7 +15,11 @@ export const GoogleCloudStorage: React.FC = () => (
       </a>
       . This reads the default GCP key file.
     </p>
-    <ShowExtension id="GoogleCloudTools.cloudcode" name="Google Cloud Code" />
+    <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{' '}
diff --git a/webview/src/setup/components/remotes/ShowExtension.tsx b/webview/src/setup/components/remotes/ShowExtension.tsx
index 97cd43c735..543d1dcb4f 100644
--- a/webview/src/setup/components/remotes/ShowExtension.tsx
+++ b/webview/src/setup/components/remotes/ShowExtension.tsx
@@ -3,10 +3,11 @@ 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
-}) => {
+export const ShowExtension: React.FC<{
+  capabilities: string
+  id: string
+  name: string
+}> = ({ capabilities, id, name }) => {
   const idQuery = `"@id:${id}"`
 
   return (
@@ -17,7 +18,7 @@ export const ShowExtension: React.FC<{ id: string; name: string }> = ({
         height={16}
         className={styles.infoIcon}
       />{' '}
-      View the{' '}
+      The{' '}
       <a
         href={`command:workbench.extensions.search?${encodeURIComponent(
           idQuery
@@ -25,7 +26,7 @@ export const ShowExtension: React.FC<{ id: string; name: string }> = ({
       >
         {name}
       </a>{' '}
-      extension.
+      extension can be used to <span>{capabilities}</span>.
     </p>
   )
 }