Don't update browser history on query param changes in start workflow…

…. preserve order of query params on goto (#2415)

src/lib/pages/start-workflow.svelte

@@ -105,6 +105,7 @@
       value: workflowId,
       url: $page.url,
       allowEmpty: true,
+      options: { keepFocus: true, noScroll: true, replaceState: true },
     });
   };
 
@@ -144,6 +145,7 @@
       value,
       url: $page.url,
       allowEmpty: true,
+      options: { keepFocus: true, noScroll: true, replaceState: true },
     });
   };
 

src/lib/utilities/update-query-parameters.test.ts

@@ -136,7 +136,23 @@ describe('updateQueryParameters', () => {
 
     const [href, options] = goto.mock.calls[0];
 
-    expect(href).toBe('/?other=value&parameter=value');
+    expect(href).toBe('/?parameter=value&other=value');
+    expect(options).toEqual(gotoOptions);
+  });
+
+  it('should call `goto` with the correct path for the updated param and keep order if there are other params', () => {
+    const parameter = 'parameter';
+    const value = 'newValue';
+    const url = new URL(
+      `https://temporal.io/?other1=value1&${parameter}=oldValue&other2=value2`,
+    );
+    const goto = vi.fn().mockImplementation(() => Promise.resolve(null));
+
+    updateQueryParameters({ parameter, value, url, goto });
+
+    const [href, options] = goto.mock.calls[0];
+
+    expect(href).toBe('/?other1=value1&parameter=newValue&other2=value2');
     expect(options).toEqual(gotoOptions);
   });
 

src/lib/utilities/update-query-parameters.ts

@@ -9,11 +9,13 @@ type UpdateQueryParams = {
   goto?: typeof navigateTo;
   allowEmpty?: boolean;
   clearParameters?: string[];
+  options?: typeof gotoOptions;
 };
 
 export const gotoOptions = {
   keepFocus: true,
   noScroll: true,
+  replaceState: false,
 };
 
 export const updateQueryParameters = async ({
@@ -23,19 +25,30 @@ export const updateQueryParameters = async ({
   goto = navigateTo,
   allowEmpty = false,
   clearParameters = [],
+  options = gotoOptions,
 }: UpdateQueryParams): Promise<typeof value> => {
   const next = String(value);
   const params = {};
+  let replaced = false;
+
   url.searchParams.forEach((value, key) => {
     if (key !== parameter) {
       params[key] = value;
+    } else {
+      if (next) {
+        params[key] = next;
+        replaced = true;
+      } else if (allowEmpty) {
+        params[key] = '';
+        replaced = true;
+      }
     }
   });
   const newQuery = new URLSearchParams(params);
 
-  if (value) {
+  if (value && !replaced) {
     newQuery.set(parameter, next);
-  } else if (allowEmpty) {
+  } else if (allowEmpty && !replaced) {
     newQuery.set(parameter, '');
   }
 
@@ -49,7 +62,7 @@ export const updateQueryParameters = async ({
     const query = newQuery?.toString();
     const newUrl = query ? `${url.pathname}?${query}` : url.pathname;
 
-    goto(newUrl, gotoOptions);
+    goto(newUrl, options);
   }
 
   return value;