plugins: sort plugins in the plugins-view

The following commit adds a comparator method to the `plugins-view`
so that plugins are sorted based on `name`, and `publisher` if required.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

Author: vince-fugnitto

packages/plugin-ext/src/main/browser/plugin-ext-widget.tsx

@@ -78,7 +78,7 @@ export class PluginWidget extends ReactWidget {
 
     protected renderPlugins(plugins: PluginMetadata[]): React.ReactNode {
         return <div id='pluginListContainer'>
-            {plugins.map(plugin => this.renderPlugin(plugin))}
+            {plugins.sort((a, b) => this.compareMetadata(a, b)).map(plugin => this.renderPlugin(plugin))}
         </div>;
     }
 
@@ -106,4 +106,23 @@ export class PluginWidget extends ReactWidget {
         const classNames = ['pluginHeaderContainer'];
         return classNames.join(' ');
     }
+
+    /**
+     * Compare two plugins based on their names, and publishers.
+     * @param a the first plugin metadata.
+     * @param b the second plugin metadata.
+     */
+    protected compareMetadata(a: PluginMetadata, b: PluginMetadata): number {
+        // Determine the name of the plugins.
+        const nameA = a.model.name.toLowerCase();
+        const nameB = b.model.name.toLowerCase();
+
+        // Determine the publisher of the plugin (when names are equal).
+        const publisherA = a.model.publisher.toLowerCase();
+        const publisherB = b.model.publisher.toLowerCase();
+
+        return (nameA === nameA)
+            ? nameA.localeCompare(nameB)
+            : publisherA.localeCompare(publisherB);
+    }
 }