fix: remove old query keys from url when deleted

Author: PeterYurkovich

web/src/components/MetricsPage.tsx

@@ -1136,7 +1136,7 @@ const QueryBrowserWrapper: FC<{
     if (isFirstRender) {
       return;
     }
-    const newParams = new URLSearchParams(queryParams);
+    const newParams = new URLSearchParams(removeQueryKeys(queryParams));
     queryStrings.forEach((query, i) => newParams.set(`query${i}`, query || ''));
     if (customDataSourceName) {
       newParams.set(QueryParams.Datasource, customDataSourceName);
@@ -1215,6 +1215,16 @@ const QueryBrowserWrapper: FC<{
   );
 };
 
+const removeQueryKeys = (searchParams: URLSearchParams): URLSearchParams => {
+  const newParams = new URLSearchParams(searchParams);
+  for (const key of searchParams.keys()) {
+    if (key.startsWith('query')) {
+      newParams.delete(key);
+    }
+  }
+  return newParams;
+};
+
 const AddQueryButton: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);