Merge branch 'fix-process-filters' into 'master'

Fix process filters reset on back button

Closes #1072

See merge request teklia/arkindex/frontend!1341

src/components/Process/Status/Main.vue

@@ -76,7 +76,11 @@
           </div>
         </div>
       </div>
-      <Workflow />
+      <Workflow
+        :process-id="id"
+        :selected-run="selectedRun"
+        v-on:update:selected-run="updateSelectedRun"
+      />
     </div>
     <div class="notification is-danger" v-else-if="error">
       An error occurred during an API request: {{ error }}
@@ -158,6 +162,19 @@ export default {
       } finally {
         this.loading = false
       }
+    },
+    updateSelectedRun (newRun) {
+      if (newRun === this.selectedRun) return
+      const route = {
+        ...this.$route,
+        params: {
+          ...this.$route.params,
+          selectedRun: newRun
+        }
+      }
+      // If we were accessing this route without a selected run, replace the current route, otherwise push a new route
+      if (!Number.isFinite(this.selectedRun) || this.selectedRun < 0) this.$router.replace(route)
+      else this.$router.push(route)
     }
   },
   computed: {

src/components/Process/Status/Workflow.vue

@@ -46,9 +46,20 @@ import { PROCESS_STATES, PROCESS_STATE_COLORS, PROCESS_MODES } from '@/config.js
 import Run from './Run'
 
 export default {
+  emits: ['update:selectedRun'],
   components: {
     Run
   },
+  props: {
+    processId: {
+      type: String,
+      required: true
+    },
+    selectedRun: {
+      type: Number,
+      default: -1
+    }
+  },
   mounted () {
     if ('Notification' in window) Notification.requestPermission()
     if (this.process.workflow) this.startPolling(this.process.id)
@@ -60,9 +71,6 @@ export default {
   },
   computed: {
     ...mapState('process', ['processes', 'workflow', 'tasks']),
-    processId () {
-      return this.$route.params.id
-    },
     process () {
       return this.processes[this.processId]
     },
@@ -73,11 +81,6 @@ export default {
       if (!this.process || !this.process.mode) return 'Process'
       return `${PROCESS_MODES[this.process.mode]} process`
     },
-    selectedRun () {
-      // Ensure selectedRun is always a number; just return an invalid run number if there is none
-      if ([null, undefined, ''].includes(this.$route.params.selectedRun)) return -1
-      return Number(this.$route.params.selectedRun)
-    },
     runs () {
       return groupBy(Object.values(this.tasks), t => t.run)
     },
@@ -90,17 +93,7 @@ export default {
     ...mapMutations('process', ['stopPolling', 'setWorkflow']),
     ...mapActions('process', ['startPolling']),
     select (run) {
-      // No need to navigate to the same page
-      if (Number(run) === this.selectedRun) return
-      const route = {
-        name: this.$route.name,
-        params: {
-          ...this.$route.params,
-          selectedRun: Math.max(0, Math.min(this.lastRun, run))
-        }
-      }
-      if (this.selectedRun < 0 || this.selectedRun > this.lastRun) this.$router.replace(route)
-      else this.$router.push(route)
+      this.$emit('update:selectedRun', run)
     },
     taskClass (task) {
       return task.state === 'unscheduled' ? '' : PROCESS_STATE_COLORS[task.state].cssClass