Command dialog small fixes

src/components/cylc/commandMenu/Menu.vue

@@ -16,85 +16,83 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div>
-    <!-- dropdown menu -->
-    <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">
-          {{ title }}
-          <CopyBtn :text="title"/>
-        </v-card-title>
-        <v-card-subtitle class="pt-0 pb-2">
-          {{ typeAndStatusText }}
-        </v-card-subtitle>
-        <v-divider v-if="primaryMutations.length || displayMutations.length" />
-        <v-skeleton-loader
-          v-if="isLoadingMutations && primaryMutations.length"
-          type="list-item-avatar-two-line@3"
-          min-width="400"
-          class="my-2"
-          data-cy="skeleton"
-        />
-        <v-list
-          v-if="displayMutations.length"
-          class="c-mutation-menu-list pt-0"
-          :lines="false"
+  <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">
+        {{ title }}
+        <CopyBtn :text="title"/>
+      </v-card-title>
+      <v-card-subtitle class="pt-0 pb-2">
+        {{ typeAndStatusText }}
+      </v-card-subtitle>
+      <v-divider v-if="primaryMutations.length || displayMutations.length" />
+      <v-skeleton-loader
+        v-if="isLoadingMutations && primaryMutations.length"
+        type="list-item-avatar-two-line@3"
+        min-width="400"
+        class="my-2"
+        data-cy="skeleton"
+      />
+      <v-list
+        v-if="displayMutations.length"
+        class="c-mutation-menu-list pt-0"
+        :lines="false"
+      >
+        <v-list-item
+          v-for="{ mutation, requiresInfo, authorised } in displayMutations"
+          :key="mutation.name"
+          :disabled="isDisabled(mutation, authorised)"
+          @click.stop="enact(mutation, requiresInfo)"
+          class="c-mutation-menu-item py-2 pr-2"
+          :title="mutation._title"
+          :subtitle="mutation._shortDescription"
         >
-          <v-list-item
-            v-for="{ mutation, requiresInfo, authorised } in displayMutations"
-            :key="mutation.name"
-            :disabled="isDisabled(mutation, authorised)"
-            @click.stop="enact(mutation, requiresInfo)"
-            class="c-mutation-menu-item py-2 pr-2"
-            :title="mutation._title"
-            :subtitle="mutation._shortDescription"
-          >
-            <template v-slot:prepend>
-              <v-icon
-                :icon="mutation._icon"
-                size="large"
-              />
-            </template>
-            <template v-slot:append>
-              <v-btn
-                icon
-                variant="text"
-                :disabled="!isEditable(mutation, authorised)"
-                @click.stop="openDialog(mutation)"
-                data-cy="mutation-edit"
-                class="ml-2"
-              >
-                <v-icon>{{ icons.mdiPencil }}</v-icon>
-              </v-btn>
-            </template>
-          </v-list-item>
-          <v-list-item v-if="canExpand">
+          <template v-slot:prepend>
+            <v-icon
+              :icon="mutation._icon"
+              size="large"
+            />
+          </template>
+          <template v-slot:append>
             <v-btn
-              id="less-more-button"
-              @click="() => expanded = !expanded"
-              block
-              variant="tonal"
+              icon
+              variant="text"
+              :disabled="!isEditable(mutation, authorised)"
+              @click.stop="openDialog(mutation)"
+              data-cy="mutation-edit"
+              class="ml-2"
             >
-              {{ expanded ? 'See Less' : 'See All' }}
+              <v-icon>{{ icons.mdiPencil }}</v-icon>
             </v-btn>
-          </v-list-item>
-        </v-list>
-      </v-card>
-    </v-menu>
+          </template>
+        </v-list-item>
+        <v-list-item v-if="canExpand">
+          <v-btn
+            id="less-more-button"
+            @click="() => expanded = !expanded"
+            block
+            variant="tonal"
+          >
+            {{ expanded ? 'See Less' : 'See All' }}
+          </v-btn>
+        </v-list-item>
+      </v-list>
+    </v-card>
     <v-dialog
-      v-if="dialog && dialogMutation"
+      v-if="dialogMutation"
       v-model="dialog"
       :width="dialogMutation._dialogWidth ?? '700px'"
       max-width="100%"
+      theme="light"
       content-class="c-mutation-dialog mx-0"
     >
       <Mutation
@@ -107,10 +105,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @close="() => dialog = false"
         @success="() => showMenu = false"
         :key="dialogKey /* Enables re-render of component each time dialog opened */"
-        ref="mutationComponent"
       />
     </v-dialog>
-  </div>
+  </v-menu>
 </template>
 
 <script>

src/components/graphqlFormGenerator/components/MapItem.vue

@@ -30,9 +30,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             v-model="model.key"
             :disabled="model.frozenKey"
             class="c-input-key"
-            v-bind="$attrs"
           />
-          <v-tooltip v-bind="tooltipProps">
+          <v-tooltip v-if="model.frozenKey">
             <span><code>{{ model.key }}</code><br/>(Pre-existing settings cannot be renamed)</span>
           </v-tooltip>
         </div>
@@ -42,20 +41,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-col>
       <v-col>
         <v-textarea
-        rows="1"
-        auto-grow
+          rows="1"
+          auto-grow
           placeholder="value"
           v-model="model.value"
           class="c-input-val"
-          v-bind="$attrs"
         />
       </v-col>
       <v-col cols="auto">
         <slot
           name="append"
           :disabled="model.frozenKey"
         />
-        <v-tooltip v-bind="tooltipProps">
+        <v-tooltip v-if="model.frozenKey">
           <span>Pre-existing settings cannot be removed</span>
         </v-tooltip>
       </v-col>
@@ -64,24 +62,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script setup>
-import { computed } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const model = defineModel({ required: true })
 
-const tooltipProps = computed(() => ({
-  location: 'top',
-  disabled: !model.value.frozenKey,
-  openDelay: 400
-}))
-
 const defaults = {
+  VTooltip: {
+    location: 'top',
+    openDelay: 400
+  },
   VTextField: {
     hideDetails: true,
   },
+  VTextarea: {
+    hideDetails: true,
+  },
 }
 
 </script>

tests/e2e/specs/menu.cy.js

@@ -113,7 +113,14 @@ describe('Command Menu component', () => {
       .click()
       .get('.c-mutation-menu')
       .should('be.visible')
-    // Should close when clicking on task mutation
+    // Should not close when clicking on dialog opened from menu
+    cy.get('.c-mutation-menu-item:not([aria-disabled]) [data-cy=mutation-edit]:first')
+      .click()
+      .get('.c-mutation-dialog [data-cy=cancel]')
+      .click()
+      .get('.c-mutation-menu')
+      .should('be.visible')
+    // Should close when clicking on task mutation without opening a dialog
     cy.get('.c-mutation-menu-list')
       .find('.c-mutation-menu-item:not([aria-disabled]):first')
       .click()