Support icons next to create commands in quick pick (#735)

api/README.md

@@ -140,6 +140,7 @@ commands?: {
     command: string;
     title: string;
     detail: string;
+    type?: string; // Optional: resource type associated with the command. Used to show an icon next to the command.
 }[];
 ```
 

package-lock.json

@@ -30,7 +30,7 @@
                 "@types/node": "^16.18.36",
                 "@types/semver": "^7.3.12",
                 "@types/uuid": "^9.0.1",
-                "@types/vscode": "1.76.0",
+                "@types/vscode": "^1.81.0",
                 "@typescript-eslint/eslint-plugin": "^5.59.11",
                 "@vscode/test-electron": "^2.1.5",
                 "@vscode/vsce": "^2.19.0",
@@ -48,7 +48,7 @@
                 "webpack-cli": "^4.6.0"
             },
             "engines": {
-                "vscode": "^1.76.0"
+                "vscode": "^1.81.0"
             }
         },
         "node_modules/@azure/abort-controller": {
@@ -1181,9 +1181,9 @@
             }
         },
         "node_modules/@types/vscode": {
-            "version": "1.76.0",
-            "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.76.0.tgz",
-            "integrity": "sha512-CQcY3+Fe5hNewHnOEAVYj4dd1do/QHliXaknAEYSXx2KEHUzFibDZSKptCon+HPgK55xx20pR+PBJjf0MomnBA==",
+            "version": "1.81.0",
+            "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.81.0.tgz",
+            "integrity": "sha512-YIaCwpT+O2E7WOMq0eCgBEABE++SX3Yl/O02GoMIF2DO3qAtvw7m6BXFYsxnc6XyzwZgh6/s/UG78LSSombl2w==",
             "dev": true
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
@@ -13040,9 +13040,9 @@
             }
         },
         "@types/vscode": {
-            "version": "1.76.0",
-            "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.76.0.tgz",
-            "integrity": "sha512-CQcY3+Fe5hNewHnOEAVYj4dd1do/QHliXaknAEYSXx2KEHUzFibDZSKptCon+HPgK55xx20pR+PBJjf0MomnBA==",
+            "version": "1.81.0",
+            "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.81.0.tgz",
+            "integrity": "sha512-YIaCwpT+O2E7WOMq0eCgBEABE++SX3Yl/O02GoMIF2DO3qAtvw7m6BXFYsxnc6XyzwZgh6/s/UG78LSSombl2w==",
             "dev": true
         },
         "@typescript-eslint/eslint-plugin": {

package.json

@@ -7,7 +7,7 @@
     "icon": "resources/resourceGroup.png",
     "aiKey": "0c6ae279ed8443289764825290e4f9e2-1a736e7c-1324-4338-be46-fc2a58ae4d14-7255",
     "engines": {
-        "vscode": "^1.76.0"
+        "vscode": "^1.81.0"
     },
     "repository": {
         "type": "git",
@@ -589,7 +589,7 @@
         "@types/node": "^16.18.36",
         "@types/semver": "^7.3.12",
         "@types/uuid": "^9.0.1",
-        "@types/vscode": "1.76.0",
+        "@types/vscode": "^1.81.0",
         "@typescript-eslint/eslint-plugin": "^5.59.11",
         "@vscode/test-electron": "^2.1.5",
         "@vscode/vsce": "^2.19.0",

src/commands/createResource.ts

@@ -5,12 +5,15 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IActionContext, IAzureQuickPickItem } from '@microsoft/vscode-azext-utils';
-import { Command, commands, Extension, extensions } from 'vscode';
+import { Command, Extension, commands, extensions } from 'vscode';
+import { AzExtResourceType } from '../../api/src/AzExtResourceType';
 import { SubscriptionItem } from '../tree/azure/SubscriptionItem';
+import { getIconPath } from '../utils/azureUtils';
 import { getResourceContributions } from '../utils/getResourceContributions';
 
 interface ContributedCreateResourceCommand extends Command {
     detail?: string;
+    type?: AzExtResourceType;
     extensionId: string;
 }
 
@@ -35,6 +38,7 @@ function getPicks(createResourceCommands: ContributedCreateResourceCommand[]): I
             label: command.title,
             data: command,
             detail: command.detail,
+            iconPath: command.type && Object.values(AzExtResourceType).includes(command.type) ? getIconPath(command.type) : undefined,
         }));
 }
 

src/utils/azureUtils.ts

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { getResourceGroupFromId } from '@microsoft/vscode-azext-azureutils';
-import { TreeItemIconPath, nonNullProp } from '@microsoft/vscode-azext-utils';
+import { nonNullProp } from '@microsoft/vscode-azext-utils';
 import { AppResource, GroupNodeConfiguration, GroupingConfig } from '@microsoft/vscode-azext-utils/hostapi';
-import { ThemeIcon } from 'vscode';
+import { ThemeIcon, Uri } from 'vscode';
 import { URI, Utils } from 'vscode-uri';
 import { AzExtResourceType } from '../../api/src/index';
 import { IAzExtMetadata, legacyTypeMap } from '../azureExtensions';
@@ -70,7 +70,7 @@ export function createAzureExtensionsGroupConfig(extensions: IAzExtMetadata[], s
     return azExtGroupConfigs;
 }
 
-export function getIconPath(azExtResourceType?: AzExtResourceType): TreeItemIconPath {
+export function getIconPath(azExtResourceType?: AzExtResourceType): Uri {
     return treeUtils.getIconPath(azExtResourceType ?
         Utils.joinPath(URI.file('azureIcons'), azExtResourceType).path :
         URI.file('resource').path);

src/utils/treeUtils.ts

@@ -8,7 +8,7 @@ import { URI, Utils } from 'vscode-uri';
 import { ext } from '../extensionVariables';
 
 export namespace treeUtils {
-    export function getIconPath(iconName: string): TreeItemIconPath {
+    export function getIconPath(iconName: string): URI {
         return Utils.joinPath(getResourcesPath(), `${iconName}.svg`);
     }