From c8dc1398fe1c9427f2d28b3c16049eeab8f6cb80 Mon Sep 17 00:00:00 2001 From: Vincent Fugnitto Date: Thu, 20 Jun 2019 21:44:27 -0400 Subject: [PATCH] Sort the extension names in the 'about' dialog Fixes #3886 Add minor enhancement to the example `about` dialog present in the example applications to display the list of sorted extension names. Previously the list was unsorted which meant it was harder to identify which extensions were in fact present, and a sorted list is more adherent with good UI practices. Signed-off-by: Vincent Fugnitto --- packages/core/src/browser/about-dialog.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/core/src/browser/about-dialog.ts b/packages/core/src/browser/about-dialog.ts index e17f236472f6e..fc15538634752 100644 --- a/packages/core/src/browser/about-dialog.ts +++ b/packages/core/src/browser/about-dialog.ts @@ -16,7 +16,7 @@ import { inject, injectable, postConstruct } from 'inversify'; import { AbstractDialog, DialogProps } from './dialogs'; -import { ApplicationServer } from '../common/application-protocol'; +import { ApplicationServer, ExtensionInfo } from '../common/application-protocol'; export const ABOUT_CONTENT_CLASS = 'theia-aboutDialog'; export const ABOUT_EXTENSIONS_CLASS = 'theia-aboutExtensions'; @@ -62,17 +62,20 @@ export class AboutDialog extends AbstractDialog { extensionInfoContent.classList.add(ABOUT_EXTENSIONS_CLASS); messageNode.appendChild(extensionInfoContent); - const extensionsInfos = await this.appServer.getExtensionsInfos(); + const extensionsInfos: ExtensionInfo[] = await this.appServer.getExtensionsInfos(); - extensionsInfos.forEach(extension => { - const extensionInfo = document.createElement('li'); - extensionInfo.textContent = extension.name + ' ' + extension.version; - extensionInfoContent.appendChild(extensionInfo); - }); + extensionsInfos + .sort((a: ExtensionInfo, b: ExtensionInfo) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())) + .forEach((extension: ExtensionInfo) => { + const extensionInfo = document.createElement('li'); + extensionInfo.textContent = extension.name + ' ' + extension.version; + extensionInfoContent.appendChild(extensionInfo); + }); messageNode.setAttribute('style', 'flex: 1 100%; padding-bottom: calc(var(--theia-ui-padding)*3);'); this.contentNode.appendChild(messageNode); this.appendAcceptButton('Ok'); } get value(): undefined { return undefined; } + }