Add ability to configure borders in quick pick items list on plugin side

packages/plugin-ext/src/common/plugin-api-rpc.ts

@@ -286,6 +286,8 @@ export interface PickOpenItem {
     description?: string;
     detail?: string;
     picked?: boolean;
+    groupLabel?: string;
+    showBorder?: boolean;
 }
 
 export enum MainMessageType {

packages/plugin-ext/src/main/browser/quick-open-main.ts

@@ -41,7 +41,7 @@ import { ThemeIcon, QuickInputButton } from '../../plugin/types-impl';
 import { QuickPickService, QuickPickItem, QuickPickValue } from '@theia/core/lib/common/quick-pick-service';
 import { QuickTitleBar } from '@theia/core/lib/browser/quick-open/quick-title-bar';
 import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
-import { QuickTitleButtonSide } from '@theia/core/lib/common/quick-open-model';
+import { QuickTitleButtonSide, QuickOpenGroupItem } from '@theia/core/lib/common/quick-open-model';
 
 export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposable {
 
@@ -104,11 +104,13 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
     $setItems(items: PickOpenItem[]): Promise<any> {
         this.items = [];
         for (const i of items) {
-            this.items.push(new QuickOpenItem({
+            let item: QuickOpenItem | QuickOpenGroupItem;
+            // tslint:disable-next-line: no-any
+            const options: any = {
                 label: i.label,
                 description: i.description,
                 detail: i.detail,
-                run: mode => {
+                run: (mode: QuickOpenMode) => {
                     if (mode === QuickOpenMode.OPEN) {
                         this.proxy.$onItemSelected(i.handle);
                         this.doResolve(i.handle);
@@ -117,7 +119,17 @@ export class QuickOpenMainImpl implements QuickOpenMain, QuickOpenModel, Disposa
                     }
                     return false;
                 }
-            }));
+            };
+
+            if (i.groupLabel !== undefined || i.showBorder !== undefined) {
+                options.groupLabel = i.groupLabel;
+                options.showBorder = i.showBorder;
+                item = new QuickOpenGroupItem(options);
+            } else {
+                item = new QuickOpenItem(options);
+            }
+
+            this.items.push(item);
         }
         if (this.acceptor) {
             this.acceptor(this.items);

packages/plugin-ext/src/plugin/type-converters.ts

@@ -954,17 +954,22 @@ export function quickPickItemToPickOpenItem(items: Item[]): PickOpenItem[] {
         let description: string | undefined;
         let detail: string | undefined;
         let picked: boolean | undefined;
+        let groupLabel: string | undefined;
+        let showBorder: boolean | undefined;
         if (typeof item === 'string') {
             label = item;
         } else {
-            ({ label, description, detail, picked } = item);
+            ({ label, description, detail, picked, groupLabel, showBorder } = item);
         }
+
         pickItems.push({
             label,
             description,
             handle,
             detail,
-            picked
+            picked,
+            groupLabel,
+            showBorder
         });
     }
     return pickItems;

packages/plugin/src/theia.d.ts

@@ -1991,6 +1991,16 @@ declare module '@theia/plugin' {
          * not implemented yet
          */
         picked?: boolean;
+
+        /**
+         * Used to display the group label in the right corner of item
+         */
+        groupLabel?: string;
+
+        /**
+         * Used to display border after item
+         */
+        showBorder?: boolean;
     }
 
     /**