Add link to show applicable extension for each storage provider (#4004)

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/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}>
@@ -13,7 +14,7 @@ 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" />
     <InfoText>
       The AWS user needs the following permissions: s3:ListBucket, s3:GetObject,
       s3:PutObject, s3:DeleteObject.

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/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'
 
@@ -14,6 +15,7 @@ export const GoogleCloudStorage: React.FC = () => (
       </a>
       . 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{' '}

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

webview/src/shared/components/icons/Extensions.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+const Extensions = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.5 1.5L15 0h7.5L24 1.5V9l-1.5 1.5H15L13.5 9V1.5zm1.5 0V9h7.5V1.5H15zM0 15V6l1.5-1.5H9L10.5 6v7.5H18l1.5 1.5v7.5L18 24H1.5L0 22.5V15zm9-1.5V6H1.5v7.5H9zM9 15H1.5v7.5H9V15zm1.5 7.5H18V15h-7.5v7.5z"
+    />
+  </svg>
+)
+export default Extensions

webview/src/shared/components/icons/index.ts

@@ -10,6 +10,7 @@ export { default as Close } from './Close'
 export { default as Copy } from './Copy'
 export { default as Ellipsis } from './Ellipsis'
 export { default as Error } from './Error'
+export { default as Extensions } from './Extensions'
 export { default as Filter } from './Filter'
 export { default as GitCommit } from './GitCommit'
 export { default as GitMerge } from './GitMerge'