Edit Runtime: handle changes to task run mode schema (#2057)

* Update mock data

Introspection query response etc.

* Edit Runtime: handle `TaskRunMode` enum now including simulation & dummy modes

Author: oliver-sanders

src/components/graphqlFormGenerator/EditRuntimeForm.vue

@@ -57,6 +57,7 @@ import { cloneDeep, isArray, isEqual, snakeCase, startCase } from 'lodash'
 import { VTextarea } from 'vuetify/components/VTextarea'
 import VuetifyConfig, { getComponentProps, RUNTIME_SETTING } from '@/components/graphqlFormGenerator/components/vuetify'
 import { findByName, mutate, mutationStatus } from '@/utils/aotf'
+import GEnum from '@/components/graphqlFormGenerator/components/Enum.vue'
 
 const NamedTypes = {
   ...VuetifyConfig.namedTypes,
@@ -65,7 +66,12 @@ const NamedTypes = {
     rows: '1',
     autoGrow: true,
     style: 'font-family: monospace;'
-  }
+  },
+  TaskRunMode: {
+    is: GEnum,
+    // Workaround https://github.com/cylc/cylc-flow/pull/6554#discussion_r1922563421
+    allowedValues: ['Live', 'Skip'],
+  },
 }
 
 export default {

src/components/graphqlFormGenerator/components/Enum.vue

@@ -17,13 +17,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <v-select
-    persistent-hint
     v-model="model"
     v-bind="$attrs"
-    :items="type.enumValues"
+    :items="enumValues"
     item-title="name"
     :hint="itemDesc"
     placeholder="Select an option"
+    persistent-hint
   />
 </template>
 
@@ -32,13 +32,31 @@ import { formElement } from '@/components/graphqlFormGenerator/mixins'
 
 export default {
   name: 'g-enum',
+
   mixins: [formElement],
+
+  props: {
+    /** Specify a subset of the type's enum values that will be displayed. */
+    allowedValues: {
+      type: Array,
+      required: false,
+    },
+  },
+
   computed: {
+    enumValues () {
+      return this.allowedValues?.length
+        ? this.type.enumValues.filter(
+          ({ name }) => this.allowedValues.includes(name)
+        )
+        : this.type.enumValues
+    },
+
     itemDesc () {
       return this.type.enumValues.find(
         ({ name }) => name === this.modelValue
       )?.description ?? ''
-    }
+    },
   }
 }
 </script>

src/services/mock/json/IntrospectionQuery.json

@@ -5,7 +5,7 @@ The files in this directory include:
 - `*.json` these a [json-server](https://github.com/typicode/json-server) database
   files. For each of these, when exported, you should have an entry in the `/db`
   endpoint.
-- `data.js` this is a JS module that exports the imported JSON files. The names
+- `index.cjs` this is a JS module that exports the imported JSON files. The names
   used in the export section drive the value that appears in the `json-server`
   endpoints (see `/db` to inspect what values are available).
 

src/services/mock/json/README.md

@@ -19,6 +19,7 @@
         "directives": [],
         "environment": [],
         "outputs": [],
+        "runMode": "Live",
         "__typename": "Runtime"
       }
     }

src/services/mock/json/familyProxy.json

@@ -37,6 +37,7 @@
           }
         ],
         "outputs": [],
+        "runMode": "Live",
         "__typename": "Runtime"
       }
     }

src/services/mock/json/taskProxy.json

@@ -45,14 +45,8 @@ describe('Edit Runtime form', () => {
    * @param {string} nodeName - the tree node name, to search for and open the mutations form
    */
   const openMenu = (nodeName) => {
-    cy.get('[data-cy=tree-view]').as('treeView')
-      .find('.c-task')
-      .should('be.visible')
-    cy.get('@treeView')
-      .find('span')
-      .contains(nodeName)
-      .parent()
-      .find('.c-task')
+    cy.get(`[data-node-name=${nodeName}]`)
+      .find('[data-c-interactive]:first')
       .click({ force: true })
     cy.get('#less-more-button')
       .click()
@@ -65,6 +59,15 @@ describe('Edit Runtime form', () => {
       .contains('.c-mutation', 'Edit Runtime')
   }
 
+  /**
+   * Open the Edit Runtime form for a particular node
+   * @param {string} nodeName
+   */
+  const openForm = (nodeName) => {
+    openMenu(nodeName)
+    getMenuItem().click()
+  }
+
   /**
    * Get the form input v-list-item element for a given label.
    *
@@ -79,8 +82,7 @@ describe('Edit Runtime form', () => {
   }
 
   it('handles editing and submitting the form', () => {
-    openMenu('retrying')
-    getMenuItem().click()
+    openForm('retrying')
 
     getInputListItem('Init Script')
       .find('.v-input')
@@ -132,8 +134,7 @@ describe('Edit Runtime form', () => {
   })
 
   it('handles a form with zero diff', () => {
-    openMenu('retrying')
-    getMenuItem().click()
+    openForm('retrying')
 
     getInputListItem('Outputs')
       // Add an empty item
@@ -185,4 +186,19 @@ describe('Edit Runtime form', () => {
       .should('not.exist') // if this does deliberately exist in future, change to .click()
     getMenuItem().should('not.exist')
   })
+
+  it('only offers live & skip run modes', () => {
+    openForm('retrying')
+    getInputListItem('Run Mode')
+      .find('.v-field')
+      .click()
+      .invoke('attr', 'aria-controls').then((dropdownID) => {
+        cy.get(`#${dropdownID}`)
+          .find('[role=option]')
+          .then(
+            (items) => Array.from(items, (x) => x.innerText).sort()
+          )
+          .should('deep.equal', ['Live', 'Skip'])
+      })
+  })
 })

tests/e2e/specs/editRuntimeForm.cy.js

@@ -62,7 +62,8 @@ const INITIAL_DATA = {
       frozenKey: true
     }
   ],
-  outputs: []
+  outputs: [],
+  runMode: 'Live',
 }
 
 const $workflowService = {