Minor Registry UX enhancements (#4089)

* sort registry items by alphabetical order

* show not available message when there no registries provider available

* add prompt for registry provider selection

* make sort more robust

* use package from npm com

package-lock.json

@@ -18,7 +18,7 @@
                 "@microsoft/vscode-azext-azureutils": "^2.0.0",
                 "@microsoft/vscode-azext-utils": "^2.1.1",
                 "@microsoft/vscode-container-client": "^0.1.0",
-                "@microsoft/vscode-docker-registries": "^0.1.0",
+                "@microsoft/vscode-docker-registries": "^0.1.1",
                 "dayjs": "^1.11.7",
                 "dockerfile-language-server-nodejs": "^0.11.0",
                 "fs-extra": "^11.1.1",
@@ -812,9 +812,9 @@
             }
         },
         "node_modules/@microsoft/vscode-docker-registries": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/@microsoft/vscode-docker-registries/-/vscode-docker-registries-0.1.0.tgz",
-            "integrity": "sha512-d9LXqxs0JDDz0RnORfPy6ouECEA3ujxdOiXYUjysP8qaADnFfaVeOmDJylAFtwEqlz3UwmXDp+SRaOLk10BViQ==",
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/@microsoft/vscode-docker-registries/-/vscode-docker-registries-0.1.1.tgz",
+            "integrity": "sha512-cDO8iMTtx0wsBfN4MHWJimv8JQggx1SjRsbksaJoU3VUmsR55EypSKenSAZf9TvNLy2kKQzguihYzAQCNXQedw==",
             "dependencies": {
                 "dayjs": "^1.11.7",
                 "node-fetch": "^2.6.11"

package.json

@@ -3007,7 +3007,7 @@
         "@microsoft/vscode-azext-azureutils": "^2.0.0",
         "@microsoft/vscode-azext-utils": "^2.1.1",
         "@microsoft/vscode-container-client": "^0.1.0",
-        "@microsoft/vscode-docker-registries": "^0.1.0",
+        "@microsoft/vscode-docker-registries": "^0.1.1",
         "dayjs": "^1.11.7",
         "dockerfile-language-server-nodejs": "^0.11.0",
         "fs-extra": "^11.1.1",

src/tree/registries/UnifiedRegistryTreeDataProvider.ts

@@ -1,4 +1,4 @@
-import { CommonRegistry, CommonRegistryRoot, RegistryDataProvider, isRegistry } from '@microsoft/vscode-docker-registries';
+import { CommonRegistry, CommonRegistryRoot, RegistryDataProvider, isCommonRegistryItem, isRegistry } from '@microsoft/vscode-docker-registries';
 import * as vscode from 'vscode';
 import { ext } from '../../extensionVariables';
 import { isAzureSubscriptionRegistryItem } from './Azure/AzureRegistryDataProvider';
@@ -35,6 +35,8 @@ export class UnifiedRegistryTreeDataProvider implements vscode.TreeDataProvider<
     }
 
     public async getChildren(element?: UnifiedRegistryItem<unknown> | undefined): Promise<UnifiedRegistryItem<unknown>[]> {
+        const unifiedRegistryItems: UnifiedRegistryItem<unknown>[] = [];
+
         if (element) {
             const elements = await element.provider.getChildren(element.wrappedItem);
 
@@ -42,8 +44,6 @@ export class UnifiedRegistryTreeDataProvider implements vscode.TreeDataProvider<
                 return [];
             }
 
-            const results: UnifiedRegistryItem<unknown>[] = [];
-
             for (const child of elements) {
                 const wrapper = {
                     provider: element.provider,
@@ -55,13 +55,9 @@ export class UnifiedRegistryTreeDataProvider implements vscode.TreeDataProvider<
                     child._urtdp_wrapper = wrapper;
                 }
 
-                results.push(wrapper);
+                unifiedRegistryItems.push(wrapper);
             }
-
-            return results;
         } else {
-            const unifiedRoots: UnifiedRegistryItem<unknown>[] = [];
-
             const connectedProviderIds = this.storageMemento.get<string[]>(ConnectedRegistryProvidersKey, []);
 
             for (const provider of this.providers.values()) {
@@ -74,7 +70,7 @@ export class UnifiedRegistryTreeDataProvider implements vscode.TreeDataProvider<
                     continue;
                 }
 
-                unifiedRoots.push(...roots.map(r => {
+                unifiedRegistryItems.push(...roots.map(r => {
                     return {
                         provider,
                         wrappedItem: r,
@@ -82,9 +78,14 @@ export class UnifiedRegistryTreeDataProvider implements vscode.TreeDataProvider<
                     };
                 }));
             }
-
-            return unifiedRoots;
         }
+
+        return unifiedRegistryItems.sort((a, b) => {
+            if (isCommonRegistryItem(a.wrappedItem) && isCommonRegistryItem(b.wrappedItem)) {
+                return a.wrappedItem.label.localeCompare(b.wrappedItem.label);
+            }
+            return a.toString().localeCompare(b.toString());
+        });
     }
 
     public getParent(element: UnifiedRegistryItem<unknown>): UnifiedRegistryItem<unknown> | undefined {
@@ -131,7 +132,8 @@ export class UnifiedRegistryTreeDataProvider implements vscode.TreeDataProvider<
                 });
             }
 
-            const picked = await vscode.window.showQuickPick(picks, { placeHolder: vscode.l10n.t('Select a registry provider to use') });
+            const pickPrompt = picks && picks.length > 0 ? vscode.l10n.t('Select a registry provider to use') : vscode.l10n.t('No registry providers are available for connection');
+            const picked = await vscode.window.showQuickPick(picks, { placeHolder: pickPrompt });
             if (!picked) {
                 return;
             }

src/utils/registryExperience.ts

@@ -5,7 +5,7 @@
 
 import { AzureWizardPromptStep, ContextValueFilterQuickPickOptions, GenericQuickPickStep, IActionContext, PickFilter, QuickPickWizardContext, RecursiveQuickPickStep, runQuickPickWizard } from '@microsoft/vscode-azext-utils';
 import { CommonRegistryItem } from '@microsoft/vscode-docker-registries';
-import { TreeItem } from 'vscode';
+import { TreeItem, l10n } from 'vscode';
 import { ext } from '../extensionVariables';
 import { UnifiedRegistryItem, UnifiedRegistryTreeDataProvider } from '../tree/registries/UnifiedRegistryTreeDataProvider';
 
@@ -77,7 +77,7 @@ export class RegistryQuickPickStep extends GenericQuickPickStep<QuickPickWizardC
         protected readonly treeDataProvider: UnifiedRegistryTreeDataProvider,
         protected readonly pickOptions: RegistryExperienceOptions,
     ) {
-        super(treeDataProvider, pickOptions);
+        super(treeDataProvider, pickOptions, { placeHolder: l10n.t('Select registry provider') });
         this.pickFilter = new RegistryPickFilter(pickOptions);
     }
 }