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.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`);
     }