Merge pull request #1775 from MetRonnie/mutation-menu

Simplify mutation menu

Author: MetRonnie

src/components/cylc/GraphNode.vue

@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :modifierSize="0.5"
       :startTime="startTime"
       viewBox="-40 -40 140 140"
-      v-cylc-object="task"
+      v-command-menu="task"
       x="0" y="0"
     />
 
@@ -64,7 +64,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :svg="true"
           :status="job.node.state"
           viewBox="0 0 100 100"
-          v-cylc-object="job"
+          v-command-menu="job"
         />
       </g>
       <!-- overflow indicator if there are surplus jobs -->

src/components/cylc/cylcObject/Menu.vue renamed to src/components/cylc/commandMenu/Menu.vue

@@ -18,27 +18,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div>
     <!-- dropdown menu -->
-    <component :is="menuTransition" :target="target">
-      <v-card
-        ref="menuContent"
-        v-if="node"
-        v-show="showMenu"
-        @show-mutations-menu="showMutationsMenu"
-        :key="node.id"
-        v-click-outside="{ handler: onClickOutside, closeConditional: () => !dialog }"
-        class="c-mutation-menu elevation-10 overflow-y-auto"
-        max-height="90vh"
-        width="max-content"
-        max-width="min(600px, 100%)"
-        theme="dark"
-        position="absolute"
-        :style="{
-          left: `${x}px`,
-          top: `${y}px`,
-          // Set transition origin relative to clicked target:
-          '--v-overlay-anchor-origin': 'bottom right',
-        }"
-      >
+    <v-menu
+      v-if="node"
+      :key="target.dataset.cInteractive"
+      v-model="showMenu"
+      :target="target"
+      :close-on-content-click="false"
+      content-class="c-mutation-menu"
+      max-width="600px"
+      theme="dark"
+    >
+      <v-card>
         <v-card-title class="pb-1 pt-3">
           {{ node.id }}
         </v-card-title>
@@ -89,7 +79,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <v-list-item v-if="canExpand">
             <v-btn
               id="less-more-button"
-              @click="expandCollapse"
+              @click="() => expanded = !expanded"
               block
               variant="tonal"
             >
@@ -98,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </v-list-item>
         </v-list>
       </v-card>
-    </component>
+    </v-menu>
     <v-dialog
       v-if="dialogMutation"
       v-model="dialog"
@@ -111,7 +101,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :cylcObject="node"
         :initialData="initialData(dialogMutation, node.tokens)"
         @close="() => dialog = false"
-        @success="closeMenu"
+        @success="() => showMenu = false"
         :types="types"
         :key="dialogKey /* Enables re-render of component each time dialog opened */"
         ref="mutationComponent"
@@ -121,23 +111,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { computed, nextTick } from 'vue'
+import { nextTick } from 'vue'
 import {
   filterAssociations,
   getMutationArgsFromTokens,
   mutate
 } from '@/utils/aotf'
-import { useReducedAnimation } from '@/composables/localStorage'
 import Mutation from '@/components/cylc/Mutation.vue'
 import {
   mdiPencil
 } from '@mdi/js'
 import { mapGetters, mapState } from 'vuex'
 import WorkflowState from '@/model/WorkflowState.model'
-import { VDialogTransition } from 'vuetify/components/transitions'
 
 export default {
-  name: 'CylcObjectMenu',
+  name: 'CommandMenu',
 
   components: {
     Mutation
@@ -151,15 +139,6 @@ export default {
     }
   },
 
-  setup () {
-    const reducedAnimation = useReducedAnimation()
-    return {
-      menuTransition: computed(
-        () => reducedAnimation.value ? 'slot' : VDialogTransition
-      ),
-    }
-  },
-
   data () {
     return {
       dialog: false,
@@ -171,20 +150,16 @@ export default {
       isLoadingMutations: true,
       showMenu: false,
       types: [],
-      x: 0,
-      y: 0,
       target: null,
     }
   },
 
   mounted () {
     this.$eventBus.on('show-mutations-menu', this.showMutationsMenu)
-    document.addEventListener('keydown', this.onKeydown)
   },
 
   beforeUnmount () {
     this.$eventBus.off('show-mutations-menu', this.showMutationsMenu)
-    document.removeEventListener('keydown', this.onKeydown)
   },
 
   computed: {
@@ -268,66 +243,6 @@ export default {
       this.dialogKey = !this.dialogKey
     },
 
-    closeMenu () {
-      this.showMenu = false
-      this.expanded = false
-    },
-
-    /**
-     * Handler for clicking outside menu (close it).
-     *
-     * We override vuetify default handling because we don't want to
-     * close when clicking on another cylc object.
-     *
-     * @param {Event} e - the click event
-     */
-    onClickOutside (e) {
-      this.closeMenu()
-
-      // check if the thing being clicked on is a child of the thing that the
-      // menu is open for
-      let target = e.target
-      while (target) {
-        if (target?.getAttribute('data-c-interactive')) {
-          // keep the menu open
-          this.showMenu = true
-          break
-        }
-        target = target.parentElement
-      }
-    },
-
-    onKeydown (e) {
-      if (!this.dialog && e.key === 'Escape') {
-        this.closeMenu()
-      }
-    },
-
-    expandCollapse () {
-      this.expanded = !this.expanded
-      this.reposition()
-    },
-
-    /**
-     * Place the menu in a way that prevents it overflowing off screen and
-     * so it takes up the full width as needed on narrow viewports.
-     *
-     * @param {number} x - preferred x coordinate
-     * @param {number} y - preferred y coordinate
-     */
-    reposition (x = null, y = null) {
-      x ??= this.x
-      y ??= this.y
-      nextTick(() => {
-        this.x = x + this.$refs.menuContent.$el.clientWidth > document.body.clientWidth
-          ? document.body.clientWidth - this.$refs.menuContent.$el.clientWidth
-          : x
-        this.y = y + this.$refs.menuContent.$el.clientHeight > document.body.clientHeight
-          ? document.body.clientHeight - this.$refs.menuContent.$el.clientHeight - 5
-          : y
-      })
-    },
-
     /* Call a mutation using only the tokens for args. */
     callMutationFromContext (mutation) {
       this.showMenu = false
@@ -362,32 +277,32 @@ export default {
       }
     },
 
-    showMutationsMenu ({ node, event }) {
-      this.target = event.target
+    async showMutationsMenu ({ node, target }) {
+      this.target = target
       this.node = node
+      this.expanded = false
+      // show the menu after it's rendered to ensure animation works properly
+      await nextTick()
       this.showMenu = true
-      this.reposition(event.clientX, event.clientY)
-      // await graphql query to get mutations
-      this.$workflowService.introspection.then(({ mutations, types }) => {
-        // if mutations are slow to load then there will be a delay before they are reactively
-        // displayed in the menu (this is what the skeleton-loader is for)
-        this.isLoadingMutations = false
-        this.types = types
-        let type = this.node.type
-        if (type === 'family') {
-          // show the same mutation list for families as for tasks
-          type = 'task'
-        }
-        this.mutations = filterAssociations(
-          type,
-          this.node.tokens,
-          mutations,
-          this.user.permissions
-        ).sort(
-          (a, b) => a.mutation.name.localeCompare(b.mutation.name)
-        )
-        this.reposition(event.clientX, event.clientY)
-      })
+      // ensure graphql query to get mutations has completed
+      const { mutations, types } = await this.$workflowService.introspection
+      // if mutations are slow to load then there will be a delay before they are reactively
+      // displayed in the menu (this is what the skeleton-loader is for)
+      this.isLoadingMutations = false
+      this.types = types
+      let type = this.node.type
+      if (type === 'family') {
+        // show the same mutation list for families as for tasks
+        type = 'task'
+      }
+      this.mutations = filterAssociations(
+        type,
+        this.node.tokens,
+        mutations,
+        this.user.permissions
+      ).sort(
+        (a, b) => a.mutation.name.localeCompare(b.mutation.name)
+      )
     },
 
     initialData (mutation, tokens) {

src/components/cylc/cylcObject/plugin.js renamed to src/components/cylc/commandMenu/plugin.js

@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,19 +15,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// reference to closure listeners (needed as we are using variables from another scope)
+import { uniqueId } from 'lodash-es'
+
+/** Reference to closure listeners (needed as we are using variables from another scope) */
 const listeners = new WeakMap()
 
 function bind (el, binding, vnode) {
+  // Set data-c-interactive = <unique identifier> for every element that opens the menu.
+  // This allows the menu component to tell apart every activating element.
+  el.dataset.cInteractive = uniqueId()
   const listener = function (e) {
     e.stopPropagation() // prevents click event from bubbling up to parents
     binding.instance.$eventBus.emit('show-mutations-menu', {
       node: binding.value,
-      event: e
+      target: el,
     })
   }
   el.addEventListener('click', listener)
-  el.dataset.cInteractive = true
   listeners.set(el, listener)
 }
 
@@ -55,7 +59,7 @@ export default {
    */
   install (app, options) {
     // add a global directive
-    app.directive('cylc-object', {
+    app.directive('command-menu', {
       beforeMount: bind,
       unmounted: unbind,
       updated

src/components/cylc/table/Table.vue

@@ -31,15 +31,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <div class="d-flex align-content-center flex-nowrap">
         <div style="width: 2em;">
           <Task
-            v-cylc-object="item.task"
+            v-command-menu="item.task"
             :task="item.task.node"
             :startTime="item.latestJob?.node?.startedTime"
           />
         </div>
         <div style="width: 2em;">
           <Job
             v-if="item.latestJob"
-            v-cylc-object="item.latestJob"
+            v-command-menu="item.latestJob"
             :status="item.latestJob.node.state"
             :previous-state="item.previousJob?.node?.state"
           />
@@ -77,7 +77,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <div class="d-flex align-content-center flex-nowrap">
             <div class="d-flex" style="margin-left: 2em;">
               <Job
-                v-cylc-object="job"
+                v-command-menu="job"
                 :key="`${job.id}-summary-${index}`"
                 :status="job.node.state"
               />

src/components/cylc/tree/GScanTreeItem.vue

@@ -25,7 +25,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <WorkflowIcon
       v-if="node.type === 'workflow'"
       :status="node.node.status"
-      v-cylc-object="node"
+      v-command-menu="node"
       :class="nodeClass"
       class="flex-shrink-0"
     />

src/components/cylc/tree/TreeItem.vue

@@ -45,10 +45,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-if="node.type === 'cycle'">
             <!-- NOTE: cycle point nodes don't have any data associated with them
               at present so we must use the root family node for the task icon.
-              We don't use this for the v-cylc-object as that would set the node
+              We don't use this for the v-command-menu as that would set the node
               type to family. -->
             <Task
-              v-cylc-object="node"
+              v-command-menu="node"
               v-if="node.familyTree?.length"
               :key="node.id"
               :task="node.familyTree[0].node"
@@ -57,7 +57,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
           <template v-else-if="node.type === 'family'">
             <Task
-              v-cylc-object="node"
+              v-command-menu="node"
               :key="node.id"
               :task="node.node"
             />
@@ -66,7 +66,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <template v-else-if="node.type === 'task'">
             <!-- Task summary -->
             <Task
-              v-cylc-object="node"
+              v-command-menu="node"
               :key="node.id"
               :task="node.node"
               :startTime="latestJob(node)?.startedTime"
@@ -78,7 +78,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <!-- most recent job summary -->
               <Job
                 v-for="(job, index) in node.children.slice(0, 1)"
-                v-cylc-object="job"
+                v-command-menu="job"
                 :key="`${job.id}-summary-${index}`"
                 :status="job.node.state"
                 :previous-state="node.children.length > 1 ? node.children[1].node.state : ''"
@@ -88,7 +88,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           </template>
           <template v-else-if="node.type === 'job'">
             <Job
-              v-cylc-object="node"
+              v-command-menu="node"
               :key="node.id"
               :status="node.node.state"
             />