From 97e33fd4b4c8dc3ab3b3728e6f6f6cc0718fda88 Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Tue, 13 Feb 2024 17:16:59 +0000
Subject: [PATCH 1/7] Use `initialOptions` prop to save view state

This is saved along with the Lumino layout for restoring after navigation.

Implemented for the log view only so far.
---
 src/components/cylc/cylcObject/Menu.vue |   2 +-
 src/components/cylc/workflow/Lumino.vue |  14 +--
 src/views/Log.vue                       | 124 +++++++++++++++---------
 src/views/initialOptions.js             |  62 ++++++++++++
 tests/e2e/specs/log.cy.js               |  49 ++++++++++
 tests/unit/views/initialOptions.spec.js |  51 ++++++++++
 tests/unit/views/log.vue.spec.js        |  45 +++++++--
 7 files changed, 283 insertions(+), 64 deletions(-)
 create mode 100644 src/views/initialOptions.js
 create mode 100644 tests/unit/views/initialOptions.spec.js

diff --git a/src/components/cylc/cylcObject/Menu.vue b/src/components/cylc/cylcObject/Menu.vue
index 8c6f2c293..a62b6e75a 100644
--- a/src/components/cylc/cylcObject/Menu.vue
+++ b/src/components/cylc/cylcObject/Menu.vue
@@ -279,7 +279,7 @@ export default {
           {
             name: 'Log',
             initialOptions: {
-              relativeID: this.node.tokens.relativeID
+              relativeID: this.node.tokens.relativeID || null
             }
           }
         )
diff --git a/src/components/cylc/workflow/Lumino.vue b/src/components/cylc/workflow/Lumino.vue
index 65151f188..61cea3d87 100644
--- a/src/components/cylc/workflow/Lumino.vue
+++ b/src/components/cylc/workflow/Lumino.vue
@@ -19,14 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Lumino box panel gets inserted here -->
   </div>
   <template
-    v-for="[id, { name, initialOptions }] in views"
+    v-for="[id, { name }] in views"
     :key="id"
   >
     <Teleport :to="`#${id}`">
       <component
         :is="props.allViews.get(name).component"
         :workflow-name="workflowName"
-        :initial-options="initialOptions"
+        v-model:initial-options="views.get(id).initialOptions"
         class="h-100"
       />
     </Teleport>
@@ -62,7 +62,7 @@ import { useDefaultView } from '@/views/views'
  * Mitt event for adding a view to the workspace.
  * @typedef {Object} AddViewEvent
  * @property {string} name - the view to add
- * @property {Object=} initialOptions - prop passed to the view component
+ * @property {Record<string,*>} initialOptions - prop passed to the view component
  */
 
 const $eventBus = inject('eventBus')
@@ -135,16 +135,16 @@ onBeforeUnmount(() => {
 /**
  * Create a widget and add it to the dock.
  *
- * @param {AddViewEvent} view
+ * @param {AddViewEvent} event
  * @param {boolean} onTop
  */
-const addView = (view, onTop = true) => {
+const addView = ({ name, initialOptions = {} }, onTop = true) => {
   const id = uniqueId('widget')
-  const luminoWidget = new LuminoWidget(id, startCase(view.name), /* closable */ true)
+  const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
   dockPanel.addWidget(luminoWidget, { mode: 'tab-after' })
   // give time for Lumino's widget DOM element to be created
   nextTick(() => {
-    views.value.set(id, view)
+    views.value.set(id, { name, initialOptions })
     addWidgetEventListeners(id)
     if (onTop) {
       dockPanel.selectWidget(luminoWidget)
diff --git a/src/views/Log.vue b/src/views/Log.vue
index 39ff79307..ea89a51a5 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -56,7 +56,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="jobLog"
           data-cy="job-id-input"
           class="flex-grow-1 flex-column"
-          v-model="relativeID"
+          :model-value="relativeID"
+          @update:modelValue="debouncedUpdateRelativeID"
           placeholder="cycle/task/job"
           clearable
         />
@@ -143,6 +144,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import { ref } from 'vue'
+import { usePrevious } from '@vueuse/core'
 import {
   mdiClockOutline,
   mdiFileAlertOutline,
@@ -153,6 +156,11 @@ import {
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/views/initialOptions'
 import LogComponent from '@/components/cylc/log/Log.vue'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import { Tokens } from '@/utils/uid'
@@ -227,6 +235,8 @@ export const getDefaultFile = (logFiles) => {
   return null // rather than undefined
 }
 
+const getFileLabel = (id) => id ? `No log files for ${id}` : 'Enter a task/job ID'
+
 class Results {
   constructor () {
     /** @type {string[]} */
@@ -287,34 +297,59 @@ export default {
     }
   },
 
+  emits: [
+    updateInitialOptionsEvent,
+  ],
+
   props: {
-    initialOptions: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    }
+    initialOptions,
   },
 
-  data () {
+  setup (props, { emit }) {
+    /**
+     * The task/job ID input.
+     * @type {import('vue').Ref<string>}
+     */
+    const relativeID = useInitialOptions('relativeID', { props, emit })
+
+    const previousRelativeID = usePrevious(relativeID)
+
+    /**
+     * The selected log file name.
+     * @type {import('vue').Ref<string>}
+     */
+    const file = useInitialOptions('file', { props, emit })
+
+    /** Set the value of relativeID at most every 0.5 seconds, used for text input */
+    const debouncedUpdateRelativeID = debounce((value) => {
+      relativeID.value = value
+    }, 500)
+
     return {
       // the log subscription query
-      query: null,
+      query: ref(null),
       // list of log files for the selected workflow/task/job
-      logFiles: [],
+      logFiles: ref([]),
       // the log file as a list of lines
-      results: new Results(),
-      // the task/job ID input
-      relativeID: null,
-      // the selected log file name
-      file: null,
+      results: ref(new Results()),
+      relativeID,
+      previousRelativeID,
+      file,
       // the label for the file input
-      fileLabel: 'Select File',
+      fileLabel: ref('Select File'),
       // turns the file input off (e.g. when the file list is being loaded)
-      fileDisabled: false,
-      // toggle between viewing workflow logs (0) and job logs (1)
-      jobLog: 0, // default to displaying workflow logs
+      fileDisabled: ref(false),
+      // toggle between viewing workflow logs (0) and job logs (1).
+      // default to displaying workflow logs unless initial task/job ID is provided.
+      jobLog: ref(relativeID.value == null ? 0 : 1),
       // toggle timestamps in log files
-      timestamps: true,
+      timestamps: ref(true),
+      debouncedUpdateRelativeID,
+    }
+  },
+
+  data () {
+    return {
       controlGroups: [
         {
           title: 'Log',
@@ -338,19 +373,23 @@ export default {
     }
   },
 
-  created () {
-    // set the ID/file if specified in initialOptions
-    if (this.initialOptions?.tokens?.task) {
-      this.relativeID = this.initialOptions.tokens.relativeID
-    }
-    if (this.initialOptions?.file) {
-      this.file = this.initialOptions.file
-    }
-  },
-
-  async mounted () {
-    // load the log file list and subscribe on startup
-    await this.updateLogFileList()
+  mounted () {
+    // Watch id & file together:
+    this.$watch(
+      () => ({
+        id: this.id ?? undefined, // (treat null as undefined)
+        file: this.file ?? undefined
+      }),
+      async ({ id }, old) => {
+        // update the query when the id or file change
+        this.updateQuery()
+        // refresh the file list when the id changes
+        if (id !== old?.id) {
+          await this.updateLogFileList()
+        }
+      },
+      { immediate: true }
+    )
   },
 
   computed: {
@@ -422,7 +461,7 @@ export default {
       } catch (err) {
         // the query failed
         console.warn(err)
-        this.fileLabel = this.id ? `No log files for ${this.id}` : 'Enter a task/job ID'
+        this.fileLabel = getFileLabel(this.id)
         this.fileDisabled = true
         return
       }
@@ -445,7 +484,7 @@ export default {
         this.fileDisabled = false
         this.logFiles = logFiles
       } else {
-        this.fileLabel = `No log files for ${this.id}`
+        this.fileLabel = getFileLabel(this.id)
         this.fileDisabled = true
         this.logFiles = []
       }
@@ -453,23 +492,12 @@ export default {
   },
 
   watch: {
-    id: debounce(
-      // refresh the file list and update the query when the id changes
-      async function () {
-        await this.updateLogFileList()
-        this.updateQuery()
-      },
-      // only re-run this once every 0.5 seconds
-      500
-    ),
-    jobLog () {
+    jobLog (val, old) {
       // reset the filename when the log mode changes
       this.file = null
+      // go back to last chosen job if we are switching back to job logs
+      this.relativeID = val ? this.previousRelativeID : null
     },
-    file () {
-      // update the query when the file changes
-      this.updateQuery()
-    }
   },
 
   // Misc options
diff --git a/src/views/initialOptions.js b/src/views/initialOptions.js
new file mode 100644
index 000000000..59198a37f
--- /dev/null
+++ b/src/views/initialOptions.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* The `initialOptions` prop is used by views to specify any options such as
+filters, inputs, toggles etc. that can be loaded when creating the view.
+This is used for saving the view state along with the tab layout. */
+
+import { ref, watch } from 'vue'
+
+/**
+ * @callback emitter
+ * @param {updateInitialOptionsEvent} event
+ * @param {...any} args
+ */
+
+/** initialOptions prop */
+export const initialOptions = {
+  type: Object,
+  required: false,
+  default: () => ({})
+}
+
+export const updateInitialOptionsEvent = 'update:initialOptions'
+
+/**
+ * Return a ref that is bound to a sub-property of the initialOptions prop for a view.
+ *
+ * When the ref's value changes, the initialOptions prop is updated with the new value.
+ *
+ * @param {string} name
+ * @param {{
+ *   props: { initialOptions: Record<string,T> },
+ *   emit: emitter,
+ * }} param1
+ * @returns {import('vue').Ref<T>}
+ */
+export const useInitialOptions = (name, { props, emit }) => {
+  const _ref = ref(props.initialOptions[name])
+  watch(
+    _ref,
+    (val, old) => emit(
+      updateInitialOptionsEvent,
+      { ...props.initialOptions, [name]: val }
+    ),
+    { immediate: true, deep: true }
+  )
+  return _ref
+}
diff --git a/tests/e2e/specs/log.cy.js b/tests/e2e/specs/log.cy.js
index a38a4b53a..fcb23a400 100644
--- a/tests/e2e/specs/log.cy.js
+++ b/tests/e2e/specs/log.cy.js
@@ -134,3 +134,52 @@ describe('Log View', () => {
       .should('be.visible')
   })
 })
+
+describe('Log command in menu', () => {
+  it('opens a log view tab', () => {
+    cy.visit('/#/workspace/one')
+      .get('.lm-DockPanel-widget')
+      .should('have.length', 1)
+      .get('.c-tree .c-job:first')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+      .get('.lm-DockPanel-widget')
+      .should('have.length', 2)
+      .get('[data-cy=log-viewer]')
+      .contains(jobLogLines.join(''))
+  })
+})
+
+describe('Log view in workspace', () => {
+  it('remembers job ID and file when switching between workflows', () => {
+    const jobFile = 'job.out'
+    const jobID = '4/avocet'
+    cy.visit('/#/workspace/one')
+      .get('#workflow-mutate-button')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+      .get('[data-cy=job-toggle]')
+      .click()
+      .get('.c-log [data-cy=job-id-input] input').as('jobIDInput')
+      .type(jobID)
+      .get('[data-cy=log-viewer]')
+      .should('be.visible')
+      .get('.c-log [data-cy=file-input] input').as('fileInput')
+      .invoke('val')
+      .should('eq', jobFile)
+    // Navigate away
+    cy.visit('/#/workspace/two')
+      .get('.c-log')
+      .should('not.exist')
+    // Navigate back
+    cy.visit('/#/workspace/one')
+      .get('@jobIDInput')
+      .invoke('val')
+      .should('eq', jobID)
+      .get('@fileInput')
+      .invoke('val')
+      .should('eq', jobFile)
+  })
+})
diff --git a/tests/unit/views/initialOptions.spec.js b/tests/unit/views/initialOptions.spec.js
new file mode 100644
index 000000000..36519e316
--- /dev/null
+++ b/tests/unit/views/initialOptions.spec.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { nextTick } from 'vue'
+import { vi } from 'vitest'
+import {
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/views/initialOptions'
+
+describe('useInitialOptions', () => {
+  it('updates the initialOptions prop when the ref changes', async () => {
+    const emit = vi.fn()
+    const initialOptions = {
+      name: 'Isaac Clarke',
+      ship: 'USG Ishimura',
+    }
+    const props = { initialOptions }
+    const name = useInitialOptions('name', { props, emit })
+    // Should be called immediately
+    expect(emit).toHaveBeenCalledWith(
+      updateInitialOptionsEvent,
+      initialOptions
+    )
+    emit.mockClear()
+    // Change the value of the ref
+    name.value = 'Nicole Brennan'
+    await nextTick()
+    expect(emit).toHaveBeenCalledWith(
+      updateInitialOptionsEvent,
+      {
+        name: 'Nicole Brennan',
+        ship: 'USG Ishimura',
+      }
+    )
+  })
+})
diff --git a/tests/unit/views/log.vue.spec.js b/tests/unit/views/log.vue.spec.js
index fdae3178d..6e3f7506b 100644
--- a/tests/unit/views/log.vue.spec.js
+++ b/tests/unit/views/log.vue.spec.js
@@ -24,7 +24,6 @@ import sinon from 'sinon'
 import Log, { getDefaultFile } from '@/views/Log.vue'
 import WorkflowService from '@/services/workflow.service'
 import User from '@/model/User.model'
-import { Tokens } from '@/utils/uid'
 
 describe('getDefaultFile()', () => {
   it.each([
@@ -89,7 +88,6 @@ describe('Log view', () => {
     props: {
       workflowName,
       initialOptions: {
-        tokens: new Tokens(workflowID),
         file: initialFile,
       },
     },
@@ -103,6 +101,15 @@ describe('Log view', () => {
       new User('cylc', [], new Date(), true, 'localhost', owner)
     )
     $workflowService = sinon.createStubInstance(WorkflowService)
+    $workflowService.apolloClient = {
+      query: () => ({
+        data: {
+          logFiles: {
+            files: ['a.log', 'b.log']
+          }
+        }
+      }),
+    }
   })
 
   it('issues the subscription', async () => {
@@ -119,17 +126,17 @@ describe('Log view', () => {
     // old file & log lines should be wiped
     expect(wrapper.vm.file).toBe(null)
     expect(wrapper.vm.results.lines).toEqual([])
+    expect(wrapper.vm.id).toBe(null)
     // should have unsubscribed
     expect(wrapper.vm.$workflowService.unsubscribe.calledOnce).toBe(true)
   })
 
   it('does not issue subscription for incomplete task ID', async () => {
-    const wrapper = mountFunction({
-      data: () => ({
-        jobLog: 1,
-        relativeID: '2000', // cycle point only is invalid
-      })
-    })
+    const wrapper = mountFunction()
+    wrapper.vm.jobLog = 1
+    await nextTick()
+    wrapper.vm.relativeID = '2000' // cycle point only is invalid
+    await nextTick()
     expect(wrapper.vm.id).toBe(null)
     expect(wrapper.vm.query).toBe(null)
     // type in complete task ID
@@ -144,4 +151,26 @@ describe('Log view', () => {
       file: 'job.out',
     })
   })
+
+  it('goes back to previous job when toggling job->workflow->job', async () => {
+    const relativeID = '2000/angua'
+    const expectedJobID = `${workflowID}//${relativeID}`
+    const wrapper = mountFunction({
+      props: {
+        workflowName,
+        initialOptions: {
+          file: 'job.out',
+          relativeID,
+        },
+      },
+    })
+    expect(wrapper.vm.jobLog).toEqual(1)
+    expect(wrapper.vm.id).toEqual(expectedJobID)
+    wrapper.vm.jobLog = 0
+    await nextTick()
+    expect(wrapper.vm.id).toEqual(workflowID)
+    wrapper.vm.jobLog = 1
+    await nextTick()
+    expect(wrapper.vm.id).toEqual(expectedJobID)
+  })
 })

From 0152228ad97bf66627f0481a4974b0d4f02598af Mon Sep 17 00:00:00 2001
From: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
Date: Wed, 14 Feb 2024 17:49:21 +0000
Subject: [PATCH 2/7] Log view: don't query files in job log mode when no ID
 given

---
 src/views/Log.vue | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/Log.vue b/src/views/Log.vue
index ea89a51a5..073a7f5d2 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -235,8 +235,6 @@ export const getDefaultFile = (logFiles) => {
   return null // rather than undefined
 }
 
-const getFileLabel = (id) => id ? `No log files for ${id}` : 'Enter a task/job ID'
-
 class Results {
   constructor () {
     /** @type {string[]} */
@@ -448,6 +446,10 @@ export default {
       // if reset===true then the this.file will be reset
       // otherwise it will be left alone
 
+      if (!this.id) {
+        this.handleNoLogFiles()
+        return
+      }
       // update the list of log files
       this.fileLabel = 'Updating available files...'
       this.fileDisabled = true
@@ -461,8 +463,7 @@ export default {
       } catch (err) {
         // the query failed
         console.warn(err)
-        this.fileLabel = getFileLabel(this.id)
-        this.fileDisabled = true
+        this.handleNoLogFiles()
         return
       }
       const logFiles = result.data.logFiles?.files ?? []
@@ -484,11 +485,14 @@ export default {
         this.fileDisabled = false
         this.logFiles = logFiles
       } else {
-        this.fileLabel = getFileLabel(this.id)
-        this.fileDisabled = true
-        this.logFiles = []
+        this.handleNoLogFiles()
       }
-    }
+    },
+    handleNoLogFiles () {
+      this.fileLabel = this.id ? `No log files for ${this.id}` : 'Enter a task/job ID'
+      this.fileDisabled = true
+      this.logFiles = []
+    },
   },
 
   watch: {

From 38d42668482a829287cf174f3046104a1801e385 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Thu, 7 Mar 2024 10:19:23 +0000
Subject: [PATCH 3/7] use initial options prop to save view state

---
 src/views/Tree.vue | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index 0c283e176..0504022e9 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -88,10 +88,15 @@ import gql from 'graphql-tag'
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import {
+  initialOptions,
+  useInitialOptions
+} from '@/utils/initialOptions'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import TaskFilter from '@/components/cylc/TaskFilter.vue'
 import TreeComponent from '@/components/cylc/tree/Tree.vue'
 import { matchID, matchState } from '@/components/cylc/common/filter'
+import { ref } from 'vue'
 
 const QUERY = gql`
 subscription Workflow ($workflowId: ID) {
@@ -216,13 +221,26 @@ export default {
     }
   },
 
-  data: () => ({
-    expandAll: null,
-    tasksFilter: {
-      id: null,
-      states: null,
-    },
-  }),
+  props: { initialOptions },
+
+  setup (props, { emit }) {
+    /**
+     * The selection expand/collapse option.
+     * @type {import('vue').Ref<string>}
+     */
+    const expandAll = useInitialOptions('expandAll', { props, emit }, ref(null))
+
+    /**
+     * The job id input and selected task filter state.
+     * @type {import('vue').Ref<string>}
+     */
+    const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, ref({ id: null, states: null }))
+
+    return {
+      expandAll,
+      tasksFilter
+    }
+  },
 
   computed: {
     ...mapState('workflows', ['cylcTree']),

From 83c91e29ffd706cce199aebace760862e4932847 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Thu, 7 Mar 2024 10:32:25 +0000
Subject: [PATCH 4/7] removed views/initialOptions.js

---
 src/views/initialOptions.js | 62 -------------------------------------
 1 file changed, 62 deletions(-)
 delete mode 100644 src/views/initialOptions.js

diff --git a/src/views/initialOptions.js b/src/views/initialOptions.js
deleted file mode 100644
index 59198a37f..000000000
--- a/src/views/initialOptions.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-/* The `initialOptions` prop is used by views to specify any options such as
-filters, inputs, toggles etc. that can be loaded when creating the view.
-This is used for saving the view state along with the tab layout. */
-
-import { ref, watch } from 'vue'
-
-/**
- * @callback emitter
- * @param {updateInitialOptionsEvent} event
- * @param {...any} args
- */
-
-/** initialOptions prop */
-export const initialOptions = {
-  type: Object,
-  required: false,
-  default: () => ({})
-}
-
-export const updateInitialOptionsEvent = 'update:initialOptions'
-
-/**
- * Return a ref that is bound to a sub-property of the initialOptions prop for a view.
- *
- * When the ref's value changes, the initialOptions prop is updated with the new value.
- *
- * @param {string} name
- * @param {{
- *   props: { initialOptions: Record<string,T> },
- *   emit: emitter,
- * }} param1
- * @returns {import('vue').Ref<T>}
- */
-export const useInitialOptions = (name, { props, emit }) => {
-  const _ref = ref(props.initialOptions[name])
-  watch(
-    _ref,
-    (val, old) => emit(
-      updateInitialOptionsEvent,
-      { ...props.initialOptions, [name]: val }
-    ),
-    { immediate: true, deep: true }
-  )
-  return _ref
-}

From 947a509141d9f7da951bba1416e706a6829bc207 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Thu, 7 Mar 2024 10:52:29 +0000
Subject: [PATCH 5/7] removed views/initialOptions.spec

---
 tests/unit/views/initialOptions.spec.js | 51 -------------------------
 1 file changed, 51 deletions(-)
 delete mode 100644 tests/unit/views/initialOptions.spec.js

diff --git a/tests/unit/views/initialOptions.spec.js b/tests/unit/views/initialOptions.spec.js
deleted file mode 100644
index 36519e316..000000000
--- a/tests/unit/views/initialOptions.spec.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { nextTick } from 'vue'
-import { vi } from 'vitest'
-import {
-  updateInitialOptionsEvent,
-  useInitialOptions
-} from '@/views/initialOptions'
-
-describe('useInitialOptions', () => {
-  it('updates the initialOptions prop when the ref changes', async () => {
-    const emit = vi.fn()
-    const initialOptions = {
-      name: 'Isaac Clarke',
-      ship: 'USG Ishimura',
-    }
-    const props = { initialOptions }
-    const name = useInitialOptions('name', { props, emit })
-    // Should be called immediately
-    expect(emit).toHaveBeenCalledWith(
-      updateInitialOptionsEvent,
-      initialOptions
-    )
-    emit.mockClear()
-    // Change the value of the ref
-    name.value = 'Nicole Brennan'
-    await nextTick()
-    expect(emit).toHaveBeenCalledWith(
-      updateInitialOptionsEvent,
-      {
-        name: 'Nicole Brennan',
-        ship: 'USG Ishimura',
-      }
-    )
-  })
-})

From f5bf707679b4212d1bf026c4df85e6e26d60ddfa Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Mon, 11 Mar 2024 12:50:23 +0000
Subject: [PATCH 6/7] added e2e test

---
 tests/e2e/specs/tree.cy.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index 00d73e177..ec399afbb 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -250,6 +250,30 @@ describe('Tree view', () => {
         .should('have.length', 1)
         .contains('retrying')
     })
+    it('remembers job ID and file when switching between workflows', () => {
+      cy.visit('/#/workspace/one')
+      cy
+        .get('.node-data-task')
+        .contains('failed')
+        .should('be.visible')
+      cy
+        .get('[data-cy=filter-id]')
+        .type('i')
+      cy
+        .get('[data-cy="filter task state"]')
+        .click()
+        .get('.v-list-item')
+        .contains(TaskState.WAITING.name)
+        .click({ force: true })
+      // Navigate away
+      cy.visit('/#/')
+      cy.title().should('eq', 'Cylc UI | Dashboard')
+      // Navigate back
+      cy.visit('/#/workspace/one')
+        .get('.node-data-task:visible')
+        .should('have.length', 1)
+        .contains('retrying')
+    })
   })
 
   describe('Expand/collapse all buttons', () => {

From 385ad561b28bc641a24f443c962173df2261bd6f Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Mon, 11 Mar 2024 13:06:35 +0000
Subject: [PATCH 7/7] review amends

---
 src/views/Log.vue  |  2 +-
 src/views/Tree.vue | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/views/Log.vue b/src/views/Log.vue
index 58030e8a1..c0d5b8ed6 100644
--- a/src/views/Log.vue
+++ b/src/views/Log.vue
@@ -401,7 +401,7 @@ export default {
       if (this.jobLog) {
         try {
           const taskTokens = new Tokens(this.relativeID, true)
-          if (!taskTokens || !taskTokens.task) {
+          if (!taskTokens?.task) {
             return null
           }
           return this.workflowTokens.clone({ cycle: taskTokens.cycle, task: taskTokens.task, job: taskTokens.job }).id
diff --git a/src/views/Tree.vue b/src/views/Tree.vue
index 0504022e9..b0fbbc849 100644
--- a/src/views/Tree.vue
+++ b/src/views/Tree.vue
@@ -224,24 +224,21 @@ export default {
   props: { initialOptions },
 
   setup (props, { emit }) {
-    /**
-     * The selection expand/collapse option.
-     * @type {import('vue').Ref<string>}
-     */
-    const expandAll = useInitialOptions('expandAll', { props, emit }, ref(null))
-
     /**
      * The job id input and selected task filter state.
-     * @type {import('vue').Ref<string>}
+     * @type {import('vue').Ref<Object>}
      */
     const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, ref({ id: null, states: null }))
 
     return {
-      expandAll,
       tasksFilter
     }
   },
 
+  data: () => ({
+    expandAll: null,
+  }),
+
   computed: {
     ...mapState('workflows', ['cylcTree']),
     ...mapGetters('workflows', ['getNodes']),