diff --git a/hermes-console/src/router/index.ts b/hermes-console/src/router/index.ts
index 50603c1e2b..0c39398ad4 100644
--- a/hermes-console/src/router/index.ts
+++ b/hermes-console/src/router/index.ts
@@ -96,6 +96,11 @@ const router = createRouter({
path: '/ui/search',
name: 'search',
component: () => import('@/views/search/SearchView.vue'),
+ props: (route) => ({
+ collection: route.query.collection,
+ filter: route.query.filter,
+ pattern: route.query.pattern,
+ }),
},
],
});
diff --git a/hermes-console/src/views/search/SearchView.spec.ts b/hermes-console/src/views/search/SearchView.spec.ts
index 97fd2247ab..084a7617cb 100644
--- a/hermes-console/src/views/search/SearchView.spec.ts
+++ b/hermes-console/src/views/search/SearchView.spec.ts
@@ -1,9 +1,13 @@
import { computed, ref } from 'vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { createTestingPiniaWithState } from '@/dummy/store';
import { dummySubscription } from '@/dummy/subscription';
import { dummyTopic } from '@/dummy/topic';
import { expect } from 'vitest';
+import { fireEvent, waitFor } from '@testing-library/vue';
import { render } from '@/utils/test-utils';
import { useSearch } from '@/composables/search/useSearch';
+import router from '@/router';
import SearchView from '@/views/search/SearchView.vue';
import type { UseSearch } from '@/composables/search/useSearch';
@@ -21,6 +25,11 @@ const useSearchStub: UseSearch = {
};
describe('SearchView', () => {
+ beforeEach(() => {
+ vi.mocked(useSearch).mockReturnValue(useSearchStub);
+ setActivePinia(createPinia());
+ });
+
it('should render subscriptions table when subscriptions are present', () => {
// given
vi.mocked(useSearch).mockReturnValueOnce({
@@ -110,4 +119,38 @@ describe('SearchView', () => {
expect(queryByText('search.connectionError.title')).not.toBeInTheDocument();
expect(queryByText('search.connectionError.text')).not.toBeInTheDocument();
});
+
+ it('should modify form inputs based on passed query parameters', async () => {
+ await router.push({
+ path: '/ui/search',
+ query: { collection: 'topics', filter: 'name', pattern: 'test' },
+ });
+
+ const { getByLabelText } = render(SearchView, {
+ testPinia: createTestingPiniaWithState(),
+ global: { plugins: [router] },
+ });
+
+ expect(getByLabelText('collection').value).toBe('topics');
+ expect(getByLabelText('filter').value).toBe('name');
+ expect(getByLabelText('regex pattern').value).toBe('test');
+ });
+
+ it('should update query parameters in URL when form inputs are modified', async () => {
+ const { getByLabelText, getByRole } = render(SearchView, {
+ testPinia: createTestingPiniaWithState(),
+ global: { plugins: [router] },
+ });
+
+ await fireEvent.update(getByLabelText('regex pattern'), 'newPattern');
+ await fireEvent.click(getByRole('button'));
+
+ await waitFor(() => {
+ expect(router.currentRoute.value.query).toEqual({
+ collection: 'subscriptions',
+ filter: 'endpoint',
+ pattern: 'newPattern',
+ });
+ });
+ });
});
diff --git a/hermes-console/src/views/search/SearchView.vue b/hermes-console/src/views/search/SearchView.vue
index 1028e14d70..fca3feaee5 100644
--- a/hermes-console/src/views/search/SearchView.vue
+++ b/hermes-console/src/views/search/SearchView.vue
@@ -1,5 +1,6 @@
@@ -57,11 +111,12 @@
Search
-
+
@@ -69,6 +124,7 @@