Rework add layer toolbar menu

packages/base/src/toolbar/widget.tsx

@@ -1,20 +1,22 @@
 import { IJGISExternalCommand, JupyterGISModel } from '@jupytergis/schema';
 import { CommandToolbarButton } from '@jupyterlab/apputils';
 import {
+  MenuSvg,
   ReactWidget,
-  Toolbar,
   ReactiveToolbar,
+  Toolbar,
   ToolbarButton,
   addIcon,
   redoIcon,
-  undoIcon,
-  terminalIcon
+  terminalIcon,
+  undoIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Menu, Widget } from '@lumino/widgets';
 
 import * as React from 'react';
 import { CommandIDs } from '../constants';
+import { rasterIcon } from '../icons';
 import { UsersItem } from './usertoolbaritem';
 
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
@@ -98,56 +100,66 @@ export class ToolbarWidget extends ReactiveToolbar {
         })
       );
 
-      const NewButton = new ToolbarButton({
-        icon: addIcon,
-        noFocusOnClick: false,
-        onClick: () => {
-          if (!options.commands) {
-            return;
-          }
+      // vector sub menu
+      const vectorSubMenu = new Menu({ commands: options.commands });
 
-          const bbox = NewButton.node.getBoundingClientRect();
-          const NewSubMenu = new Menu({ commands: options.commands });
-          NewSubMenu.title.label = 'New Layer';
+      vectorSubMenu.title.label = 'Add Vector Layer';
+      vectorSubMenu.title.iconClass = 'fa fa-vector-square';
+      vectorSubMenu.id = 'jp-gis-toolbar-vector-menu';
 
-          NewSubMenu.addItem({
-            type: 'command',
-            command: CommandIDs.newHillshadeEntry
-          });
+      vectorSubMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoJSONEntry
+      });
 
-          NewSubMenu.addItem({
-            type: 'separator'
-          });
+      vectorSubMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newShapefileLayer
+      });
 
-          NewSubMenu.addItem({
-            type: 'command',
-            command: CommandIDs.newImageEntry
-          });
+      //raster submenu
+      const rasterSubMenu = new Menu({ commands: options.commands });
 
-          NewSubMenu.addItem({
-            type: 'separator'
-          });
+      rasterSubMenu.title.label = 'Add Raster Layer';
+      rasterSubMenu.title.icon = rasterIcon;
+      rasterSubMenu.id = 'jp-gis-toolbar-raster-menu';
 
-          NewSubMenu.addItem({
-            type: 'command',
-            command: CommandIDs.newShapefileLayer
-          });
+      rasterSubMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newHillshadeEntry
+      });
 
-          NewSubMenu.addItem({
-            type: 'command',
-            command: CommandIDs.newGeoTiffEntry
-          });
+      rasterSubMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newImageEntry
+      });
+
+      rasterSubMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoTiffEntry
+      });
+
+      const NewSubMenu = new MenuSvg({ commands: options.commands });
+      NewSubMenu.title.label = 'Add Layer';
+
+      NewSubMenu.addItem({ type: 'submenu', submenu: rasterSubMenu });
+      NewSubMenu.addItem({ type: 'submenu', submenu: vectorSubMenu });
+
+      const NewEntryButton = new ToolbarButton({
+        icon: addIcon,
+        noFocusOnClick: false,
+        onClick: () => {
+          if (!options.commands) {
+            return;
+          }
 
-          NewSubMenu.addItem({
-            type: 'command',
-            command: CommandIDs.newGeoJSONEntry
-          });
+          const bbox = NewEntryButton.node.getBoundingClientRect();
 
           NewSubMenu.open(bbox.x, bbox.bottom);
         }
       });
 
-      this.addItem('New', NewButton);
+      this.addItem('New', NewEntryButton);
 
       this.addItem('separator2', new Separator());
 

ui-tests/tests/geojson-layers.spec.ts

@@ -1,8 +1,8 @@
 import {
+  IJupyterLabPageFixture,
   expect,
-  test,
   galata,
-  IJupyterLabPageFixture
+  test
 } from '@jupyterlab/galata';
 import { Locator } from '@playwright/test';
 import path from 'path';
@@ -48,12 +48,14 @@ test.describe('#geoJSONLayer', () => {
 
   test('Add a GeoJSON layer', async ({ page, tmpPath }) => {
     const panel = await openGIS(page, tmpPath, FILENAME);
-    const button = panel?.locator('.jp-ToolbarButton[data-jp-item-name="New"]');
     const main = panel?.locator('.jGIS-Mainview');
 
-    await button?.click();
     await page
-      .locator('.lm-Menu-itemLabel')
+      .locator('div:nth-child(9) > .jp-ToolbarButtonComponent > .control')
+      .click();
+    await page.getByText('Add Vector Layer').hover();
+    await page
+      .locator('#jp-gis-toolbar-vector-menu')
       .getByText('New GeoJSON layer')
       .click();