task state filtering: require waiting to be selected for selected modifiers

* Don't allow the waiting state filter to be de-selected if a waiting
  state modifier IS selected.
* This replaces the disabling of the dropdown which previously
  encouraged the correct behaviour.

Author: oliver-sanders

src/components/cylc/ViewToolbar.vue

@@ -82,17 +82,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             >
               <Task :task="item.props" />
             </template>
-            <!-- disable expansion until parent active (for task state filters) -->
-            <template
-              v-slot:toggle="{ props: toggleProps, isActive, isOpen }"
-              v-if="iControl.props['task-state-icons']"
-            >
-              <v-icon
-                :icon="isOpen ? $options.icons.mdiChevronUp : $options.icons.mdiChevronDown"
-                :disabled="!isActive && !isOpen"
-                v-bind="toggleProps"
-              />
-            </template>
           </v-treeview>
         </v-menu>
       </div>
@@ -109,6 +98,7 @@ import {
   mdiFilter,
   mdiMagnify,
 } from '@mdi/js'
+import { TaskState, WaitingStateModifierNames } from '@/model/TaskState.model'
 
 export default {
   name: 'ViewToolbar',
@@ -202,6 +192,7 @@ export default {
       let callback // callback to fire when control is activated
       let disabled // true if control should not be enabled
       let props
+      let action
       const values = this.getValues()
       for (const group of this.groups) {
         iGroup = {
@@ -212,9 +203,10 @@ export default {
           callback = null
           disabled = false
           props = control.props || {}
+          action = control.action
 
           // set callback
-          switch (control.action) {
+          switch (action) {
             case 'toggle': // toggle button
               callback = (e) => this.toggle(control, e)
               break
@@ -224,7 +216,7 @@ export default {
             case 'taskIDFilter': // specialised "input" for filtering tasks
               callback = (value) => this.set(control, value)
               control.icon = mdiMagnify
-              control.action = 'input'
+              action = 'input'
               props = {
                 placeholder: 'Search',
                 ...props,
@@ -234,7 +226,7 @@ export default {
               callback = (value) => this.set(control, value)
               break
             case 'taskStateFilter': // specialised "menu" for filtering tasks
-              control.action = 'menu'
+              action = 'menu'
               control.icon = mdiFilter
               props = {
                 items: taskStateItems,
@@ -266,6 +258,7 @@ export default {
 
           iControl = {
             ...control,
+            action,
             props,
             callback,
             disabled
@@ -308,6 +301,17 @@ export default {
     },
     set (control, value) {
       // update the value
+      if ( // special logic for the taskStateFilter
+        control.action === 'taskStateFilter' &&
+        // if a waiting state modifier is selected
+        value.some((modifier) => WaitingStateModifierNames.includes(modifier)) &&
+        // but the waiting state is not
+        !value.includes(TaskState.WAITING.name)
+      ) {
+        // then add the waiting state (i.e, don't allow the user to de-select
+        // waiting whilst a modifier is in play)
+        value.push(TaskState.WAITING.name)
+      }
       this.$emit('setOption', control.key, value)
     },
     autoResizeInput (e) {

tests/component/specs/viewToolbar.cy.js

@@ -27,7 +27,7 @@ describe('View Toolbar Component', () => {
     cy.vmount(
       ViewToolbar,
       {
-        props: { groups }
+        props: { groups },
       }
     ).as('wrapper')
     // add the classes Vuetify requires
@@ -224,4 +224,93 @@ describe('View Toolbar Component', () => {
     // TODO: visual regression test
     // https://github.com/cylc/cylc-ui/issues/178
   })
+
+  it('filters task states', () => {
+    mountToolbar([
+      {
+        title: 'Group 1',
+        controls: [
+          {
+            title: 'Filter',
+            action: 'taskStateFilter',
+            value: [],
+            key: 'filter'
+          }
+        ]
+      },
+    ])
+    cy.get('button').click()
+    cy.get('.v-list-item').as('menuItems')
+      .filter(':visible')
+      .should('have.length', 10)
+      .contains('.v-list-item', 'waiting').as('waitingItem')
+
+    // 1) select the waiting state and expand the waiting submenu
+    cy.get('@waitingItem')
+      .click()
+      .find('.v-icon--clickable')
+      .click({ force: true })
+
+      // the setOption event should be fired
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal(['waiting'])
+      })
+
+      // the waiting state should be selected
+      .get('@waitingItem')
+      .should('have.class', 'v-list-item--active')
+
+      // the waiting submenu should be open
+      .get('.v-list-item').as('menuItems')
+      .filter(':visible')
+      .should('have.length', 15)
+
+    // 2) select the Retry state
+    cy.get('@menuItems')
+      .contains('Retry')
+      .click({ force: true })
+
+      // the setOption event should be fired
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal(['waiting', 'isRetry'])
+      })
+
+    // 3) unselect the waiting state
+    cy.get('@waitingItem')
+      .click()
+
+      // implementation detail: the setOption event is fired again
+      // but the waiting state is not removed
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal(['isRetry', 'waiting'])
+      })
+
+      // the waiting state should still be selected
+      .get('@waitingItem')
+      .should('have.class', 'v-list-item--active')
+
+    // 3) unselect the retry state THEN the waiting state
+    cy.get('@menuItems')
+      .contains('Retry')
+      .click({ force: true })
+      .get('@waitingItem')
+      .click()
+
+      // the waiting state should NOT be selected
+      .get('@waitingItem')
+      .should('not.have.class', 'v-list-item--active')
+
+      // the setOption event should be fired
+      .get('@wrapper').then(({ wrapper }) => {
+        expect(
+          wrapper.emitted().setOption.at(-1)[1]
+        ).to.deep.equal([])
+      })
+  })
 })