From b17cdf58480f7929fed4f13499b97fe631d53a72 Mon Sep 17 00:00:00 2001
From: Greg Schueler <greg.schueler@gmail.com>
Date: Fri, 1 Dec 2023 17:11:06 -0800
Subject: [PATCH 1/6] local storage job filters

---
 .../src/library/stores/JobListFilterStore.ts  | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobListFilterStore.ts

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobListFilterStore.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobListFilterStore.ts
new file mode 100644
index 00000000000..420c767987b
--- /dev/null
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobListFilterStore.ts
@@ -0,0 +1,102 @@
+import { InjectionKey } from "vue";
+
+export const STORAGE_JOB_FILTER_KEY = "job-filters";
+
+export type JobListFilter = {
+    name: string;
+    query: { [key: string]: string };
+};
+export type StoredJobFilters = {
+    [project: string]: JobListFilter[];
+};
+
+export interface JobListFilterLoader {
+    load(): Promise<StoredJobFilters>;
+
+    store(filters: StoredJobFilters): Promise<void>;
+}
+
+export class JobListFilterLocalStorage implements JobListFilterLoader {
+    async load(): Promise<StoredJobFilters> {
+        const settings = localStorage.getItem(STORAGE_JOB_FILTER_KEY);
+
+        if (settings) {
+            try {
+                return JSON.parse(settings);
+            } catch (e) {
+                localStorage.removeItem(STORAGE_JOB_FILTER_KEY);
+            }
+        }
+        return {};
+    }
+
+    async store(jobFilters: StoredJobFilters): Promise<void> {
+        localStorage.setItem(
+            STORAGE_JOB_FILTER_KEY,
+            JSON.stringify(jobFilters)
+        );
+    }
+}
+
+export class JobListFilterStore {
+    private readonly project: string;
+    private readonly jobStorageLoader: JobListFilterLoader;
+    loaded: boolean = false;
+    filters: StoredJobFilters = {};
+
+    constructor(project: string, jobStorageLoader: JobListFilterLoader) {
+        this.project = project;
+        this.jobStorageLoader = jobStorageLoader;
+    }
+
+    async load(): Promise<StoredJobFilters> {
+        if (!this.loaded) {
+            this.filters = await this.jobStorageLoader.load();
+            this.loaded = true;
+        }
+        return this.filters;
+    }
+
+    async modified() {
+        await this.jobStorageLoader.store(this.filters);
+    }
+
+    getFilters(): JobListFilter[] {
+        return this.filters[this.project] || [];
+    }
+
+    hasFilter(name: string): boolean {
+        return (
+            this.filters[this.project]?.some((f) => f.name === name) || false
+        );
+    }
+
+    getFilter(name: string): JobListFilter|null {
+        return this.filters[this.project]?.find((f) => f.name === name) || null;
+    }
+
+    saveFilter(filter: JobListFilter) {
+        if (!this.filters[this.project]) {
+            this.filters[this.project] = [filter];
+        } else {
+            this.filters[this.project].push(filter);
+        }
+
+        this.modified();
+    }
+
+    deleteFilter(name: string) {
+        if (!this.filters[this.project]) {
+            return;
+        } else {
+            this.filters[this.project] = this.filters[this.project].filter(
+                (f) => f.name !== name
+            );
+        }
+
+        this.modified();
+    }
+}
+
+export const JobListFilterStoreInjectionKey: InjectionKey<JobListFilterStore> =
+    Symbol("jobListFilterStore");

From 3b3e96dbe4056546cc005f6927758b4c18359a7a Mon Sep 17 00:00:00 2001
From: Greg Schueler <greg.schueler@gmail.com>
Date: Fri, 1 Dec 2023 17:12:20 -0800
Subject: [PATCH 2/6] Add job filters to next-ui for job list page

---
 .../pages/job/browse/JobFilterSaveModal.vue   |  77 ++++++++++++
 .../pages/job/browse/JobPageFiltersPopup.vue  |  88 +++++++++++++
 .../app/pages/job/browse/JobSearchModal.vue   |  14 ++-
 .../app/pages/job/browse/JobsPageHeader.vue   | 118 ++++++++++++++----
 .../src/app/pages/job/browse/main.ts          |  11 +-
 .../src/app/utilities/locales/en_US.js        |   4 +
 .../src/library/stores/JobPageStore.ts        |   1 +
 7 files changed, 287 insertions(+), 26 deletions(-)
 create mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobFilterSaveModal.vue
 create mode 100644 rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobPageFiltersPopup.vue

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobFilterSaveModal.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobFilterSaveModal.vue
new file mode 100644
index 00000000000..1094aedc5d7
--- /dev/null
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobFilterSaveModal.vue
@@ -0,0 +1,77 @@
+<template>
+    <modal v-model="visible" :title="$t('job.list.filter.save.modal.title')">
+        <div class="form-horizontal">
+            <div class="form-group">
+                <label class="col-sm-2 control-label" for="jobFilter">
+                    {{ $t("jobquery.title.jobFilter") }}:
+                </label>
+                <div class="col-sm-10">
+                    <input
+                        type="text"
+                        name="jobFilter"
+                        id="jobFilter"
+                        v-model="filterName"
+                        class="form-control"
+                    />
+                </div>
+            </div>
+            <div class="errors" v-if="error">
+              {{error}}
+            </div>
+        </div>
+        <template #footer>
+            <btn @click="doClose">
+                {{ $t("cancel") }}
+            </btn>
+            <btn type="primary" @click="doSave" :disabled="!filterName">
+                {{ $t("job.list.filter.save.button") }}
+            </btn>
+        </template>
+    </modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+    name: "JobFilterSaveModal",
+    props: {
+        modelValue: {
+            type: Boolean,
+            required: true,
+        },
+        error: {
+          type: String,
+          default: false,
+        },
+    },
+    emits: ["save", "update:modelValue"],
+    setup(props) {
+        return {
+            visible: ref(props.modelValue),
+            filterName: ref(""),
+        };
+    },
+    watch: {
+      visible(value) {
+        this.$emit("update:modelValue", value);
+      },
+      modelValue(value) {
+        this.visible = value;
+      },
+    },
+    methods: {
+        doClose() {
+            this.visible = false;
+            this.$emit("update:modelValue", false);
+        },
+        doSave() {
+            this.$emit("save", this.filterName);
+            this.filterName=''
+            this.doClose()
+        },
+    },
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobPageFiltersPopup.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobPageFiltersPopup.vue
new file mode 100644
index 00000000000..84e3a32e5eb
--- /dev/null
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobPageFiltersPopup.vue
@@ -0,0 +1,88 @@
+<template>
+    <dropdown v-if="filters">
+        <btn class="dropdown-toggle" size="sm">
+            Filters
+            <i class="caret" />
+        </btn>
+        <template #dropdown>
+            <template v-if="jobPageStore.selectedFilter">
+                <li>
+                    <a role="button" @click="deleteSelectedFilter">
+                        <b class="glyphicon glyphicon-trash"></b>
+                        {{
+                            $t("job.list.filter.delete.filter.link.text", [
+                                jobPageStore.selectedFilter,
+                            ])
+                        }}
+                    </a>
+                </li>
+                <li role="separator" class="divider"></li>
+            </template>
+            <li class="dropdown-header">
+              <i class="glyphicon glyphicon-filter"></i>
+              {{$t('saved.filters')}}
+            </li>
+            <li v-for="item in filters" :key="item.name">
+                <a
+                    role="button"
+                    :class="{ active: item.active }"
+                    @click.prevent="selectFilter(item.name)"
+                >
+                    <i
+                        class="glyphicon glyphicon-check"
+                        v-if="jobPageStore.selectedFilter === item.name"
+                    >
+                    </i>
+                    {{ item.name }}
+                </a>
+            </li>
+        </template>
+    </dropdown>
+</template>
+
+<script lang="ts">
+import {
+    JobListFilter,
+    JobListFilterStore,
+    JobListFilterStoreInjectionKey,
+} from "@/library/stores/JobListFilterStore";
+import {
+    JobPageStore,
+    JobPageStoreInjectionKey,
+} from "@/library/stores/JobPageStore";
+import { defineComponent, inject, ref } from "vue";
+
+export default defineComponent({
+    name: "JobPageFiltersPopup",
+    emits: ["select","delete"],
+    setup(props) {
+        const jobListFilterStore: JobListFilterStore = inject(
+            JobListFilterStoreInjectionKey
+        ) as JobListFilterStore;
+        const jobPageStore: JobPageStore = inject(
+            JobPageStoreInjectionKey
+        ) as JobPageStore;
+        return {
+            jobListFilterStore,
+            jobPageStore,
+            filters: ref<JobListFilter[]>([]),
+        };
+    },
+    methods: {
+        selectFilter(name: string) {
+            this.$emit("select", name);
+        },
+        deleteSelectedFilter(){
+          this.$emit("delete", this.jobPageStore.selectedFilter);
+          this.filters = this.jobListFilterStore.getFilters();
+        }
+    },
+    computed: {},
+    async mounted() {
+        await this.jobListFilterStore.load();
+        this.filters = this.jobListFilterStore.getFilters();
+    },
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
index 34794fb22f3..55bf9b6c4a3 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
@@ -170,12 +170,17 @@
             <btn type="primary" @click="doSearch">
                 {{ $t("job.filter.apply.button.title") }}
             </btn>
+            <btn type="success" class="pull-right" @click="doSave">
+              <i class="glyphicon glyphicon-plus"></i>
+              {{ $t("job.filter.save.button.title") }}
+            </btn>
         </template>
     </modal>
 </template>
 
 <script lang="ts">
 import UiSocket from '@/library/components/utils/UiSocket.vue'
+import {JobListFilterStore, JobListFilterStoreInjectionKey} from '@/library/stores/JobListFilterStore'
 import {
     JobPageStore,
     JobPageStoreInjectionKey,
@@ -185,7 +190,7 @@ import { defineComponent, inject, ref } from "vue";
 export default defineComponent({
     name: "JobSearchModal",
     components: { UiSocket },
-    emits: ["close", "search", "clear", "update:modelValue"],
+    emits: ["close", "search", "clear", "save", "update:modelValue"],
     props: {
         modelValue: {
             type: Boolean,
@@ -196,8 +201,12 @@ export default defineComponent({
         const jobPageStore: JobPageStore = inject(
             JobPageStoreInjectionKey
         ) as JobPageStore;
+        const jobListFilterStore: JobListFilterStore = inject(
+          JobListFilterStoreInjectionKey
+        ) as JobListFilterStore
         return {
             jobPageStore,
+            jobListFilterStore,
             visible: ref(props.modelValue),
         };
     },
@@ -232,6 +241,9 @@ export default defineComponent({
         doSearch() {
             this.$emit("search");
         },
+        doSave() {
+            this.$emit("save");
+        },
     },
 });
 </script>
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue
index 3d026bc899d..1563d7e6c2d 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue
@@ -3,7 +3,7 @@
         <div
             class="subtitle-head-item flex-container flex-align-items-baseline"
         >
-            <div class="flex-item-auto text-h3">
+            <div class="flex-item-auto text-h3 jobs-page-header">
                 <span v-if="groupPath">
                     <job-groups-breadcrumbs
                         :groupPath="groupPath"
@@ -16,18 +16,26 @@
                 </span>
                 <span v-else class="query-section">
                     <i class="fas fa-tasks query-item"></i>
-                    <a class="link-quiet" href="#" @click="advancedSearchModalVisible = true">
+                    <a
+                        class="link-quiet"
+                        href="#"
+                        @click="advancedSearchModalVisible = true"
+                    >
                         <template v-if="wasFiltered && wasFiltered.length > 0">
-                            <template v-for="qparam in wasFiltered">
-                              <template v-if="jobPageStore.query[qparam]">
-                                <span class="text-secondary query-item"
-                                    >{{ $t(`jobquery.title.${qparam}`) }}:
-                                </span>
+                            <template v-if="jobPageStore.selectedFilter">
+                                <i class="glyphicon glyphicon-filter" />
+                                {{ jobPageStore.selectedFilter }}
+                            </template>
+                            <template v-for="qparam in wasFiltered" v-else>
+                                <template v-if="jobPageStore.query[qparam]">
+                                    <span class="text-secondary query-item"
+                                        >{{ $t(`jobquery.title.${qparam}`) }}:
+                                    </span>
 
-                                <span class="text-info query-item">
-                                    {{ jobPageStore.query[qparam] }}
-                                </span>
-                              </template>
+                                    <span class="text-info query-item">
+                                        {{ jobPageStore.query[qparam] }}
+                                    </span>
+                                </template>
                             </template>
                         </template>
                         <template v-else>
@@ -35,15 +43,10 @@
                         </template>
                     </a>
                 </span>
-
-                <!--        <span-->
-                <!--          class="label label-secondary has_tooltip"-->
-                <!--          data-container="#section-content"-->
-                <!--          data-placement="auto bottom"-->
-                <!--          title="${totalauthorized} Jobs Found">-->
-                <!--&lt;!&ndash;                        <g:enc>${totalauthorized}</g:enc>&ndash;&gt;-->
-                <!--          0-->
-                <!--                </span>-->
+                <job-page-filters-popup
+                    @select="selectedFilter"
+                    @delete="deleteSelectedFilter"
+                />
             </div>
 
             <div class="flex">
@@ -74,13 +77,25 @@
             @close="advancedSearchModalVisible = false"
             @search="doSearch"
             @clear="doClear"
+            @save="doSave"
+        />
+        <job-filter-save-modal
+            v-model="saveFilterModal"
+            :error="saveFilterError"
+            @save="doFinishSave"
         />
     </div>
 </template>
 
 <script lang="ts">
+import JobFilterSaveModal from "@/app/pages/job/browse/JobFilterSaveModal.vue";
 import JobGroupsBreadcrumbs from "@/app/pages/job/browse/JobGroupsBreadcrumbs.vue";
+import JobPageFiltersPopup from "@/app/pages/job/browse/JobPageFiltersPopup.vue";
 import { getRundeckContext } from "@/library";
+import {
+    JobListFilterStore,
+    JobListFilterStoreInjectionKey,
+} from "@/library/stores/JobListFilterStore";
 import {
     JobPageStore,
     JobPageStoreInjectionKey,
@@ -94,6 +109,8 @@ export default defineComponent({
     components: {
         JobGroupsBreadcrumbs,
         JobSearchModal,
+        JobFilterSaveModal,
+        JobPageFiltersPopup,
     },
     props: {
         queryParams: {
@@ -107,11 +124,17 @@ export default defineComponent({
         const jobPageStore: JobPageStore = inject(
             JobPageStoreInjectionKey
         ) as JobPageStore;
+        const jobListFilterStore: JobListFilterStore = inject(
+            JobListFilterStoreInjectionKey
+        ) as JobListFilterStore;
         return {
             jobPageStore,
+            jobListFilterStore,
             advancedSearchModalVisible: ref(false),
             groupPath: ref(props.queryParams?.groupPath || ""),
             wasFiltered: ref([]),
+            saveFilterModal: ref(false),
+            saveFilterError: ref(""),
         };
     },
     methods: {
@@ -121,7 +144,43 @@ export default defineComponent({
         },
         doClear() {
             this.jobPageStore.query = {};
-            this.doSearch()
+            this.doSearch();
+        },
+        doSave() {
+            this.advancedSearchModalVisible = false;
+            this.saveFilterModal = true;
+        },
+        async doFinishSave(name: string) {
+            if (this.jobListFilterStore.hasFilter(name)) {
+                this.saveFilterError = this.$t(
+                    "job.list.filter.save.error.exists",
+                    { name }
+                ).toString();
+                return;
+            }
+            this.saveFilterModal = false;
+            this.saveFilterError = "";
+            this.jobListFilterStore.saveFilter({
+                name,
+                query: this.jobPageStore.query,
+            });
+            this.selectedFilter(name);
+        },
+        selectedFilter(name: string) {
+            let filter = this.jobListFilterStore.getFilter(name);
+            if (!filter) {
+                return;
+            }
+            this.jobPageStore.query = Object.assign({}, filter.query);
+            eventBus.emit("job-list-page:search", name);
+        },
+        deleteSelectedFilter(name: string) {
+            let filter = this.jobListFilterStore.getFilter(name);
+            if (!filter) {
+                return;
+            }
+            this.jobListFilterStore.deleteFilter(name);
+            this.jobPageStore.selectedFilter = "";
         },
         doSearchQuick() {
             this.doSearch();
@@ -129,19 +188,24 @@ export default defineComponent({
         doRootBrowse(path: string, href: string) {
             eventBus.emit("job-list-page:rootBrowse", { path, href });
         },
-        updateFilters() {
+        updateFilters(name: string) {
             let keys = Object.keys(this.jobPageStore.query).filter(
                 (key) => key !== "groupPath" && this.jobPageStore.query[key]
             );
             this.wasFiltered = keys;
+            if (name) {
+                this.jobPageStore.selectedFilter = name;
+            } else {
+                this.jobPageStore.selectedFilter = "";
+            }
         },
     },
     mounted() {
         eventBus.on("job-list-page:browsed", (path: string) => {
             this.groupPath = path;
         });
-        eventBus.on("job-list-page:search", () => {
-          this.updateFilters();
+        eventBus.on("job-list-page:search", (name: string) => {
+            this.updateFilters(name);
         });
     },
 });
@@ -158,4 +222,10 @@ export default defineComponent({
         margin-right: var(--spacing-2);
     }
 }
+.jobs-page-header {
+    .query-section + .btn-group,
+    .query-section + .btn {
+        margin-left: var(--spacing-2);
+    }
+}
 </style>
\ No newline at end of file
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts
index b9d67bea47e..71681a11125 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts
@@ -5,6 +5,11 @@ import {
     JobBrowserStoreInjectionKey
 } from "../../../../library/stores/JobBrowser";
 import moment from 'moment'
+import {
+  JobListFilterStore,
+  JobListFilterLocalStorage,
+  JobListFilterStoreInjectionKey
+} from '../../../../library/stores/JobListFilterStore'
 import {JobPageStore, JobPageStoreInjectionKey} from '../../../../library/stores/JobPageStore'
 import {loadJsonData} from '../../../utilities/loadJsonData'
 import JobListPage from './JobListPage.vue'
@@ -38,7 +43,10 @@ function init() {
   moment.locale(getRundeckContext().locale||'en_US')
   const page = rootStore.jobPageStore
   const browse = page.getJobBrowser()
-
+  const jobListFilterStoreObj = new JobListFilterStore(
+    getRundeckContext().projectName,
+    new JobListFilterLocalStorage()
+  );
   const jobPageStore = reactive(page);
   const jobBrowserStore = reactive(browse)
   rootStore.ui.addItems([
@@ -73,6 +81,7 @@ function init() {
           setup() {
             provide(JobBrowserStoreInjectionKey, jobBrowserStore);
             provide(JobPageStoreInjectionKey, jobPageStore);
+            provide(JobListFilterStoreInjectionKey, jobListFilterStoreObj);
             return {
               pageQueryParams
             }
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/utilities/locales/en_US.js b/rundeckapp/grails-spa/packages/ui-trellis/src/app/utilities/locales/en_US.js
index b891217ac5e..4d6939ea913 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/utilities/locales/en_US.js
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/utilities/locales/en_US.js
@@ -532,6 +532,10 @@ const messages = {
     "all":"All",
     "job.tree.breakpoint.hit.info":"Notice: Not all Job detail was loaded because this group contains too many jobs. Click the button to load missing detail.",
     "job.tree.breakpoint.load.button.title":"Load All Job Detail",
+    'job.list.filter.save.modal.title':'Save Filter',
+    'job.filter.save.button.title':'Save as a Filter…',
+    'job.list.filter.save.button':'Save Filter',
+    'job.list.filter.delete.filter.link.text':'Delete Filter "{0}"'
 }
 
 export default messages;
\ No newline at end of file
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts
index 10edcbb5818..7367601bf9d 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts
@@ -21,6 +21,7 @@ export class JobPageStore {
   projectSchedulesEnabled: boolean = false
   groupExpandLevel: number = 0
   query:{[key:string]:string} = {}
+  selectedFilter: string = ''
   selectedJobs: JobBrowseItem[] = []
   meta: JobBrowseMeta[] = []
   browser!: JobBrowserStore

From 3b2d3e4ffe0281f2cf08164565c50f06f7155081 Mon Sep 17 00:00:00 2001
From: Greg Schueler <greg.schueler@gmail.com>
Date: Fri, 1 Dec 2023 17:12:56 -0800
Subject: [PATCH 3/6] fix: js error when filter applied and a group is removed

---
 .../ui-trellis/src/app/pages/job/browse/tree/Browser.vue    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/tree/Browser.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/tree/Browser.vue
index b32071ab2f9..b912454f2f9 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/tree/Browser.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/tree/Browser.vue
@@ -192,7 +192,6 @@ export default defineComponent({
         async refresh(initial:boolean=false) {
             this.loading = true;
             this.items = await this.jobBrowserStore.loadItems(this.browsePath);
-            this.breakpointHit = this.jobBrowserStore.findPath(this.browsePath).bpHit
             this.loading = false;
             if(initial){
               //expand children if expand level is greater than 0
@@ -206,6 +205,11 @@ export default defineComponent({
             }
             if(this.items.length<1){
               this.$emit('empty')
+            }else{
+              let found = this.jobBrowserStore.findPath(this.browsePath)
+              if(found){
+                this.breakpointHit = found.bpHit
+              }
             }
         },
         modifiedPaths(paths:string[]){

From 9d074ffe18bd9a1729ae73e9bb490656cbc9a573 Mon Sep 17 00:00:00 2001
From: Greg Schueler <greg.schueler@gmail.com>
Date: Thu, 4 Jan 2024 11:43:43 -0800
Subject: [PATCH 4/6] fix: groupPath query should change browse path

add browsePath to the JobPageStore.ts
ensure browsePath and query.groupPath are in sync
don't pass path directly to component, use the jobPageStore.browsePath
---
 .../src/app/pages/job/browse/JobListPage.vue  | 20 ++++++++++++-------
 .../src/app/pages/job/browse/JobsPage.vue     |  4 +---
 .../app/pages/job/browse/JobsPageHeader.vue   | 17 +++++++---------
 .../src/app/pages/job/browse/main.ts          |  7 +++++++
 .../src/library/stores/JobPageStore.ts        |  1 +
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobListPage.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobListPage.vue
index b2b253ad6a6..88e135e32f4 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobListPage.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobListPage.vue
@@ -1,7 +1,7 @@
 <template>
     <JobBulkEditControls />
     <Browser
-        :path="browsePath"
+        :path="jobPageStore.browsePath"
         :root="true"
         @rootBrowse="rootBrowse"
         class="job_list_browser"
@@ -62,16 +62,16 @@ export default defineComponent({
         return {
             jobBrowserStore,
             jobPageStore,
-            browsePath: ref(props.path || ""),
             loaded: ref(false),
             queryRefresh: ref(false),
         };
     },
     methods: {
-        rootBrowse(path: string, href: string) {
+        async rootBrowse(path: string, href: string) {
             //deselect any jobs
             this.jobPageStore.selectedJobs = [];
-            this.browsePath = path;
+            this.jobPageStore.browsePath = path;
+            this.jobPageStore.query['groupPath'] = path;
             eventBus.emit("job-list-page:browsed", path);
             if(href) {
               window.history.pushState(
@@ -84,8 +84,14 @@ export default defineComponent({
     },
     async mounted() {
         eventBus.on("job-list-page:search", async () => {
-            this.queryRefresh = !this.queryRefresh;
-            await this.jobBrowserStore.reload();
+            if(this.jobPageStore.query['groupPath']!==this.jobPageStore.browsePath) {
+              this.jobPageStore.browsePath = this.jobPageStore.query['groupPath']||''
+              await this.jobBrowserStore.reload();
+              await this.rootBrowse(this.jobPageStore.browsePath, null)
+            }else{
+              await this.jobBrowserStore.reload();
+              this.queryRefresh = !this.queryRefresh;
+            }
         });
         eventBus.on("job-list-page:rootBrowse", async (evt) => {
             let { path, href } = evt;
@@ -94,7 +100,7 @@ export default defineComponent({
         if (typeof history.replaceState == "function") {
             if (!history.state) {
                 //set first page load state
-                let state = this.browsePath?{ start: true, browsePath: this.browsePath }:{ start: true };
+                let state = this.jobPageStore.browsePath?{ start: true, browsePath: this.jobPageStore.browsePath }:{ start: true };
                 history.replaceState(state, null, document.location.toString());
             }
         }
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPage.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPage.vue
index ace06e812be..0ba5c058dcb 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPage.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPage.vue
@@ -5,9 +5,7 @@
                 <div class="card">
                     <div class="card-content">
                         <div class="runbox primary jobs" id="indexMain">
-                            <job-list-page
-                                :path="queryParams?.groupPath || ''"
-                            />
+                            <job-list-page />
                         </div>
                     </div>
                 </div>
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue
index 1563d7e6c2d..8d78b731471 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPageHeader.vue
@@ -4,9 +4,9 @@
             class="subtitle-head-item flex-container flex-align-items-baseline"
         >
             <div class="flex-item-auto text-h3 jobs-page-header">
-                <span v-if="groupPath">
+                <span v-if="jobPageStore.browsePath">
                     <job-groups-breadcrumbs
-                        :groupPath="groupPath"
+                        :groupPath="jobPageStore.browsePath"
                         @browse-to="doRootBrowse"
                     >
                         <template #root>
@@ -14,8 +14,8 @@
                         </template>
                     </job-groups-breadcrumbs>
                 </span>
-                <span v-else class="query-section">
-                    <i class="fas fa-tasks query-item"></i>
+                <span  class="query-section">
+                    <i class="fas fa-tasks query-item" v-if="!jobPageStore.browsePath"></i>
                     <a
                         class="link-quiet"
                         href="#"
@@ -38,7 +38,7 @@
                                 </template>
                             </template>
                         </template>
-                        <template v-else>
+                        <template v-else-if="!jobPageStore.browsePath">
                             {{ $t("page.section.title.AllJobs") }}
                         </template>
                     </a>
@@ -131,7 +131,6 @@ export default defineComponent({
             jobPageStore,
             jobListFilterStore,
             advancedSearchModalVisible: ref(false),
-            groupPath: ref(props.queryParams?.groupPath || ""),
             wasFiltered: ref([]),
             saveFilterModal: ref(false),
             saveFilterError: ref(""),
@@ -143,7 +142,8 @@ export default defineComponent({
             eventBus.emit("job-list-page:search");
         },
         doClear() {
-            this.jobPageStore.query = {};
+            this.jobPageStore.query = {groupPath:''};
+            this.jobPageStore.browsePath = ''
             this.doSearch();
         },
         doSave() {
@@ -201,9 +201,6 @@ export default defineComponent({
         },
     },
     mounted() {
-        eventBus.on("job-list-page:browsed", (path: string) => {
-            this.groupPath = path;
-        });
         eventBus.on("job-list-page:search", (name: string) => {
             this.updateFilters(name);
         });
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts
index 71681a11125..4ba0fc5a80e 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/main.ts
@@ -42,6 +42,13 @@ function init() {
 
   moment.locale(getRundeckContext().locale||'en_US')
   const page = rootStore.jobPageStore
+  if (pageQueryParams?.queryParams?.groupPath) {
+    page.browsePath = pageQueryParams.queryParams.groupPath;
+    page.query['groupPath'] = pageQueryParams.queryParams.groupPath;
+  }else{
+    page.browsePath = '';
+    page.query['groupPath'] = '';
+  }
   const browse = page.getJobBrowser()
   const jobListFilterStoreObj = new JobListFilterStore(
     getRundeckContext().projectName,
diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts b/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts
index 7367601bf9d..c443f834c89 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/library/stores/JobPageStore.ts
@@ -26,6 +26,7 @@ export class JobPageStore {
   meta: JobBrowseMeta[] = []
   browser!: JobBrowserStore
   filters: Array<JobPageFilter> = []
+  browsePath: string = ''
 
   addBulkJob(job: JobBrowseItem) {
     if (!this.selectedJobs.find((j) => j.id === job.id)) {

From ea1022d50a1a93a5f3f09602597ac91c6139b344 Mon Sep 17 00:00:00 2001
From: Greg Schueler <greg.schueler@gmail.com>
Date: Thu, 4 Jan 2024 11:44:05 -0800
Subject: [PATCH 5/6] fix: breadcrumb should not be block element

---
 .../src/app/pages/job/browse/JobGroupsBreadcrumbs.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobGroupsBreadcrumbs.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobGroupsBreadcrumbs.vue
index 899e23d15d0..44d8b59389f 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobGroupsBreadcrumbs.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobGroupsBreadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-    <section class="job-breadcrumbs">
+    <span class="job-breadcrumbs">
         <span class="job-breadcrumb-item">
             <a @click.prevent="browsePath('')" :href="browseHref('')">
                 <slot name="root">&larr;</slot>
@@ -22,7 +22,7 @@
                 {{ part }}
             </a>
         </template>
-    </section>
+    </span>
 </template>
 
 <script lang="ts">

From f06b0a9532fa728f2c59c17b10f8d58c92f0bbff Mon Sep 17 00:00:00 2001
From: Greg Schueler <greg.schueler@gmail.com>
Date: Thu, 4 Jan 2024 11:44:32 -0800
Subject: [PATCH 6/6] cleanup: dom element ids

---
 .../app/pages/job/browse/JobSearchModal.vue   | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
index 55bf9b6c4a3..639b6951fec 100644
--- a/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
+++ b/rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
@@ -17,14 +17,14 @@
             <div class="form-group" v-if="jobPageStore.query['idlist']">
                 <label
                     class="col-sm-2 control-label"
-                    for="${enc(attr:rkey)}idlist"
+                    for="_idlist"
                     >{{ $t("jobquery.title.idlist") }}</label
                 >
                 <div class="col-sm-10">
                     <input
                         type="text"
                         name="idlist"
-                        id="${rkey}idlist"
+                        id="_idlist"
                         v-model="jobPageStore.query['idlist']"
                         class="form-control"
                     />
@@ -34,14 +34,14 @@
             <div class="form-group">
                 <label
                     class="col-sm-2 control-label"
-                    for="${enc(attr:rkey)}jobFilter"
+                    for="_jobFilter"
                     >{{ $t("jobquery.title.jobFilter") }}</label
                 >
                 <div class="col-sm-10">
                     <input
                         type="text"
                         name="jobFilter"
-                        id="${rkey}jobFilter"
+                        id="_jobFilter"
                         v-model="jobPageStore.query['jobFilter']"
                         class="form-control"
                     />
@@ -50,7 +50,7 @@
             <div class="form-group">
                 <label
                     class="col-sm-2 control-label"
-                    for="${enc(attr:rkey)}groupPath"
+                    for="_groupPath"
                     >{{ $t("jobquery.title.groupPath") }}</label
                 >
                 <div class="col-sm-10">
@@ -61,7 +61,7 @@
                         <input
                             type="text"
                             name="groupPath"
-                            id="${rkey}groupPath"
+                            id="_groupPath"
                             v-model="jobPageStore.query['groupPath']"
                             class="form-control"
                         />
@@ -71,14 +71,14 @@
             <div class="form-group">
                 <label
                     class="col-sm-2 control-label"
-                    for="${enc(attr:rkey)}descFilter"
+                    for="_descFilter"
                     >{{ $t("jobquery.title.descFilter") }}</label
                 >
                 <div class="col-sm-10">
                     <input
                         type="text"
                         name="descFilter"
-                        id="${rkey}descFilter"
+                        id="_descFilter"
                         v-model="jobPageStore.query['descFilter']"
                         class="form-control"
                     />
@@ -87,7 +87,7 @@
             <div class="form-group">
                 <label
                     class="col-sm-2 control-label"
-                    for="${enc(attr:rkey)}scheduledFilter"
+                    for="_scheduledFilter"
                     >{{ $t("jobquery.title.scheduledFilter") }}</label
                 >
                 <div class="col-sm-10">
@@ -124,14 +124,14 @@
             <div class="form-group">
                 <label
                     class="col-sm-2 control-label"
-                    for="${enc(attr:rkey)}serverNodeUUIDFilter"
+                    for="_serverNodeUUIDFilter"
                     >{{ $t("jobquery.title.serverNodeUUIDFilter") }}</label
                 >
                 <div class="col-sm-10">
                     <input
                         type="text"
                         name="serverNodeUUIDFilter"
-                        id="${rkey}serverUuid"
+                        id="_serverUuid"
                         v-model="jobPageStore.query['serverNodeUUIDFilter']"
                         class="form-control"
                     />