Merge 'upstream/master' into save-layout

MetRonnie · MetRonnie · commit df3359c2446e · 2025-06-11T17:37:59.000+01:00
diff --git a/.yarn/releases/yarn-4.9.2.cjs b/.yarn/releases/yarn-4.9.2.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -10,4 +10,4 @@ networkSettings:
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs
diff --git a/changes.d/2163.fix.md b/changes.d/2163.fix.md
@@ -0,0 +1 @@
+Fixed sorting controls appearing in wrong tab when multiple analysis view tabs are open.
diff --git a/changes.d/2174.fix.md b/changes.d/2174.fix.md
@@ -0,0 +1 @@
+Fixed spurious error when running a command on multiple workflows.
diff --git a/package.json b/package.json
@@ -25,11 +25,11 @@
   },
   "dependencies": {
     "@apollo/client": "3.13.8",
-    "@hpcc-js/wasm": "2.22.4",
+    "@hpcc-js/wasm": "2.23.0",
     "@lumino/default-theme": "2.1.10",
     "@lumino/widgets": "2.7.1",
     "@mdi/js": "7.4.47",
-    "@vueuse/core": "13.1.0",
+    "@vueuse/core": "13.3.0",
     "apexcharts": "3.54.1",
     "axios": "1.9.0",
     "dedent": "1.6.0",
@@ -42,26 +42,26 @@
     "mitt": "3.0.1",
     "nprogress": "1.0.0-1",
     "preact": "10.26.8",
-    "simple-icons": "2.19.0",
+    "simple-icons": "15.1.0",
     "subscriptions-transport-ws": "0.11.0",
     "svg-pan-zoom": "3.6.2",
     "vue": "3.5.16",
     "vue-i18n": "11.1.3",
     "vue-router": "4.5.1",
     "vue-the-mask": "0.11.1",
     "vue3-apexcharts": "1.8.0",
-    "vuetify": "3.8.4",
+    "vuetify": "3.8.8",
     "vuex": "4.1.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "3.14.4",
-    "@vitejs/plugin-react": "4.5.0",
+    "@vitejs/plugin-react": "4.5.1",
     "@vitejs/plugin-vue": "5.2.4",
-    "@vitest/coverage-istanbul": "3.1.4",
+    "@vitest/coverage-istanbul": "3.2.2",
     "@vue/test-utils": "2.4.6",
     "concurrently": "9.1.2",
     "cross-fetch": "4.1.0",
-    "cypress": "14.4.0",
+    "cypress": "14.4.1",
     "cypress-vite": "1.6.0",
     "eslint": "8.57.1",
     "eslint-config-standard": "17.1.0",
@@ -87,7 +87,7 @@
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-istanbul": "7.0.0",
     "vite-plugin-vuetify": "2.1.1",
-    "vitest": "3.1.4"
+    "vitest": "3.2.2"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -100,5 +100,5 @@
   "bugs": {
     "url": "https://github.com/cylc/cylc-ui/issues"
   },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.9.2"
 }
diff --git a/src/components/core/Alert.vue b/src/components/core/Alert.vue
@@ -27,40 +27,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   >
     <template v-slot:actions>
       <v-btn
-        icon
+        :icon="mdiClose"
         @click="closeAlert"
         data-cy="snack-close"
-      >
-        <v-icon>{{ $options.icons.mdiClose }}</v-icon>
-      </v-btn>
+      />
     </template>
-    {{ alert.text }}
+    <p>
+      {{ alert.text }}
+    </p>
+    <p
+      v-if="alert.detail"
+      class="mt-2 opacity-80"
+    >
+      {{ alert.detail }}
+    </p>
   </v-snackbar>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import { mdiClose } from '@mdi/js'
-import { mapActions, mapState } from 'vuex'
 
-export default {
-  name: 'Alert',
+const store = useStore()
+const alert = computed(() => store.state.alert)
 
-  computed: {
-    ...mapState(['alert'])
-  },
-
-  methods: {
-    ...mapActions(['setAlert']),
-    /**
-     * Dismisses the alert from the UI, also removing it from the Vuex store.
-     */
-    closeAlert () {
-      this.setAlert(null)
-    }
-  },
-
-  icons: {
-    mdiClose
-  }
+/**
+ * Dismisses the alert from the UI, also removing it from the Vuex store.
+ */
+function closeAlert () {
+  store.dispatch('setAlert', null)
 }
 </script>
diff --git a/src/components/cylc/analysis/BoxPlot.vue b/src/components/cylc/analysis/BoxPlot.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <Teleport
     v-if="sortInputTeleportTarget"
-    :to="`#${sortInputTeleportTarget}`"
+    :to="sortInputTeleportTarget"
   >
     <div class="d-flex flex-grow-1 col-gap-1">
       <v-select
@@ -102,7 +102,7 @@ export default {
     },
     /** ID of element to teleport the sorting input (or don't render if null) */
     sortInputTeleportTarget: {
-      type: String,
+      type: HTMLElement,
       default: null,
     },
   },
diff --git a/src/components/cylc/analysis/TimeSeries.vue b/src/components/cylc/analysis/TimeSeries.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <Teleport
     v-if="sortInputTeleportTarget"
-    :to="`#${sortInputTeleportTarget}`"
+    :to="sortInputTeleportTarget"
   >
     <div class="d-flex flex-grow-1 col-gap-1">
       <v-autocomplete
@@ -200,7 +200,7 @@ export default {
     },
     /** Where to teleport the sorting input (or don't render if null) */
     sortInputTeleportTarget: {
-      type: String,
+      type: HTMLElement,
       default: null,
     },
   },
diff --git a/src/components/cylc/commandMenu/Menu.vue b/src/components/cylc/commandMenu/Menu.vue
@@ -226,6 +226,9 @@ export default {
         ret += ' • '
         if (this.node.type === 'workflow') {
           ret += upperFirst(this.node.node.statusMsg || this.node.node.status || 'state unknown')
+          if (this.node.node.cylcVersion) {
+            ret += ` • Cylc ${this.node.node.cylcVersion}`
+          }
         } else {
           ret += upperFirst(this.node.node.state || 'state unknown')
           if (this.node.node.isHeld) {
diff --git a/src/components/cylc/workspace/Toolbar.vue b/src/components/cylc/workspace/Toolbar.vue
@@ -85,13 +85,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <!-- n-window selector -->
-      <v-chip
+      <v-btn
         :disabled="isStopped"
-        link
+        variant="tonal"
+        rounded
         size="small"
         data-cy="n-win-selector"
       >
         N={{ nWindow }}
+        <template #append>
+          <v-icon
+            :icon="$options.icons.mdiChevronDown"
+            class="mx-n1"
+          />
+        </template>
         <v-menu
           activator="parent"
           :close-on-content-click="false"
@@ -122,11 +129,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             </v-card-text>
           </v-card>
         </v-menu>
-      </v-chip>
+      </v-btn>
 
       <!-- workflow status message -->
-      <span class="status-msg text-md-body-1 text-body-2">
-        {{ statusMsg }}
+      <span class="status-msg text-body-2">
+        {{ statusAndVersion }}
       </span>
 
       <v-spacer class="mx-0" />
@@ -219,7 +226,8 @@ import {
   mdiStop,
   mdiViewList,
   mdiAccount,
-  mdiArrowULeftTop
+  mdiChevronDown,
+  mdiArrowULeftTop,
 } from '@mdi/js'
 import { startCase } from 'lodash'
 import { until } from '@/utils/reactivity'
@@ -233,6 +241,7 @@ import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import gql from 'graphql-tag'
 import { eventBus } from '@/services/eventBus'
+import { upperFirst } from 'lodash-es'
 
 const QUERY = gql(`
 subscription Workflow ($workflowId: ID) {
@@ -254,6 +263,7 @@ fragment WorkflowData on Workflow {
   status
   statusMsg
   nEdgeDistance
+  cylcVersion
 }
 
 fragment AddedDelta on Added {
@@ -353,8 +363,12 @@ export default {
         this.currentWorkflow.node.status === WorkflowState.STOPPED.name
       )
     },
-    statusMsg () {
-      return this.currentWorkflow.node.statusMsg || ''
+    statusAndVersion () {
+      let ret = upperFirst(this.currentWorkflow.node.statusMsg || '')
+      if (this.currentWorkflow.node.cylcVersion) {
+        ret += ` • Cylc ${this.currentWorkflow.node.cylcVersion}`
+      }
+      return ret
     },
     enabled () {
       // object holding the states of controls that are supposed to be enabled
@@ -469,6 +483,7 @@ export default {
     stop: mdiStop,
     mdiCog,
     mdiAccount,
+    mdiChevronDown,
     mdiArrowULeftTop,
   },
 }
diff --git a/src/model/Alert.model.js b/src/model/Alert.model.js
@@ -21,10 +21,12 @@ export class Alert {
    * @param {Error|string} err - original thrown error to log if possible, or an error message.
    * @param {string} color - color of the displayed alert.
    * @param {?string} msg - a custom message to display in the alert instead of err.
+   * @param {?string} detail - more details to show.
    */
-  constructor (err, color, msg = null) {
+  constructor (err, color, msg = null, detail = null) {
     this.err = err
     this.text = msg || err
     this.color = color
+    this.detail = detail
   }
 }
diff --git a/src/services/mock/json/workflows/multi.json b/src/services/mock/json/workflows/multi.json
@@ -65,6 +65,7 @@
           "statusMsg": "paused",
           "owner": "user",
           "host": "ncc1701.starfleet.gov",
+          "cylcVersion": "8.5.0.dev",
           "port": 43078,
           "stateTotals": {
             "waiting": 2,
diff --git a/src/services/mock/json/workflows/one.json b/src/services/mock/json/workflows/one.json
@@ -7,6 +7,7 @@
         "owner": "user",
         "host": "localhost",
         "port": 43079,
+        "cylcVersion": "8.4.2",
         "status": "running",
         "statusMsg": "running",
         "stateTotals": {
diff --git a/src/utils/aotf.js b/src/utils/aotf.js
@@ -52,6 +52,7 @@ import { Alert } from '@/model/Alert.model'
 import { store } from '@/store/index'
 import { Tokens } from '@/utils/uid'
 import { WorkflowState, WorkflowStateNames } from '@/model/WorkflowState.model'
+import { isBoolean } from 'lodash-es'
 
 /** @typedef {import('@apollo/client').ApolloClient} ApolloClient */
 /** @typedef {import('graphql').IntrospectionInputType} IntrospectionInputType  */
@@ -911,10 +912,16 @@ async function _mutateError (mutationName, err, response) {
     console.error('mutation response', response)
   }
 
+  let detail = ''
+  for (const e of err.cause?.result?.errors ?? []) {
+    console.error(e)
+    detail += `${e.message}\n`
+  }
+
   // open a user alert
   await store.dispatch(
     'setAlert',
-    new Alert(err, 'error', `Command failed: ${mutationName} - ${err}`)
+    new Alert(err, 'error', `Command failed: ${mutationName} - ${err}`, detail)
   )
 
   // format a response
@@ -936,14 +943,10 @@ async function _mutateError (mutationName, err, response) {
  */
 export async function mutate (mutation, variables, apolloClient, cylcID) {
   const mutationStr = constructMutation(mutation)
-  let response = null
   // eslint-disable-next-line no-console
-  console.debug([
-    `mutation(${mutation.name})`,
-    mutationStr,
-    variables
-  ])
+  console.debug(mutationStr, variables)
 
+  let response
   try {
     // call the mutation
     response = await apolloClient.mutate({
@@ -961,23 +964,36 @@ export async function mutate (mutation, variables, apolloClient, cylcID) {
   }
 
   try {
-    const { result } = response.data[mutation.name]
-    if (Array.isArray(result) && result.length === 2) {
-      // regular [commandSucceeded, message] format
-      if (result[0] === true) {
-        // success
-        return _mutateSuccess(result[1])
-      }
-      // failure (Cylc error, e.g. could not find workflow <x>)
-      return _mutateError(mutation.name, result[1], response)
-    }
-    // command in a different format (e.g. info command)
-    return _mutateSuccess(result)
+    return handleMutationResponse(mutation, response)
   } catch (error) {
     return _mutateError(mutation.name, 'invalid response', response)
   }
 }
 
+export function handleMutationResponse (mutation, response) {
+  const { result } = response.data[mutation.name]
+  if (Array.isArray(result)) {
+    if (result.length === 2 && isBoolean(result[0])) {
+      // Expected response format
+      const [success, msg] = result
+      if (success) return _mutateSuccess(msg)
+      // failure (Cylc error, e.g. could not find workflow <x>)
+      return _mutateError(mutation.name, msg, response)
+    }
+    // Handle possible nested response formats (https://github.com/cylc/cylc-ui/issues/1851):
+    const results = result.map(
+      (r) => r[mutation.name]?.result?.[0]?.response ?? r.response
+    )
+    for (const [success, msg] of results) {
+      if (!success) return _mutateError(mutation.name, msg, response)
+    }
+    return _mutateSuccess('Command(s) submitted')
+  }
+  console.warn('Unexpected format for mutation response:', result)
+  // But assume success
+  return _mutateSuccess(result)
+}
+
 /**
  * Send a GraphQL query.
  *
diff --git a/src/utils/icons.js b/src/utils/icons.js
@@ -27,6 +27,6 @@
  * - That fits within a 24px box.
  */
 
-import { Jupyter } from 'simple-icons'
+import { siJupyter } from 'simple-icons'
 
-export const jupyterLogo = Jupyter.svg.replace(/.*d="(.*)".*/, '$1')
+export const jupyterLogo = siJupyter.svg.replace(/.*d="(.*)".*/, '$1')
diff --git a/src/views/Analysis.vue b/src/views/Analysis.vue
diff --git a/tests/e2e/specs/analysis.cy.js b/tests/e2e/specs/analysis.cy.js
diff --git a/tests/unit/services/workflow.service.spec.js b/tests/unit/services/workflow.service.spec.js
diff --git a/tests/unit/utils/aotf.spec.js b/tests/unit/utils/aotf.spec.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,4 @@ networkSettings:`
`10`	`10`
`11`	`11`	`nodeLinker: node-modules`
`12`	`12`
`13`		`-yarnPath: .yarn/releases/yarn-4.9.1.cjs`
	`13`	`+yarnPath: .yarn/releases/yarn-4.9.2.cjs`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Fixed sorting controls appearing in wrong tab when multiple analysis view tabs are open.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Fixed spurious error when running a command on multiple workflows.`