workflow: open new tabs on top (#1177)

When a new tab (i.e. Cylc view) is opened it should be activated (i.e. put on top).

CHANGES.md

@@ -29,6 +29,9 @@ Tree view: Task messages are now shown along with outputs.
 [#1124](https://github.com/cylc/cylc-ui/pull/1075) - Table view: More options
 for number of tasks per page.
 
+[#1177](https://github.com/cylc/cylc-ui/pull/1177) -
+New tabs now open on top.
+
 ### Fixes
 
 [#1108](https://github.com/cylc/cylc-ui/pull/1108) -

src/components/cylc/workflow/Lumino.vue

@@ -126,16 +126,19 @@ export default {
      * Create a widget.
      *
      */
-    addWidget (id, name) {
+    addWidget (id, name, onTop = true) {
       this.widgets.push(id)
       const luminoWidget = new LuminoWidget(id, name, /* closable */ true)
-      this.dock.addWidget(luminoWidget)
+      this.dock.addWidget(luminoWidget, { mode: 'tab-after' })
       // give time for Lumino's widget DOM element to be created
       this.$nextTick(() => {
         document.getElementById(id)
           .addEventListener('lumino:activated', this.onWidgetActivated)
         document.getElementById(id)
           .addEventListener('lumino:deleted', this.onWidgetDeleted)
+        if (onTop) {
+          luminoWidget.parent.selectWidget(luminoWidget)
+        }
       })
     },
 

tests/e2e/specs/workflow.cy.js

@@ -55,10 +55,28 @@ describe('Workflow view and component/widget', () => {
 
   it('Should be able to add two widgets of different types', () => {
     cy.visit('/#/workflows/one')
-    cy.get('.lm-TabBar-tabLabel').should('have.length', 1)
+
+    // there should be one widget open by default (tree)
+    cy.get('.lm-TabBar-tabLabel')
+      // there should be a tab representing the widget
+      .should('have.length', 1)
+      // the tab should contain the name of the widget
+      .contains('tree')
+      // the tab should be active (that is to say on top)
+      .parent()
+      .should('have.class', 'lm-mod-current')
+
     cy.get('a.add-view').click()
     cy.get('#toolbar-add-Table-view').click()
-    cy.get('.lm-TabBar-tabLabel').should('have.length', 2)
+    cy.get('.lm-TabBar-tabLabel')
+      // there should be two tabs (tree + table)
+      .should('have.length', 2)
+      // the new tab should be last
+      .last()
+      .contains('table')
+      // the new tab should be active (that is to say on top)
+      .parent()
+      .should('have.class', 'lm-mod-current')
   })
 
   it('Should remove widgets added successfully', () => {