fix(admin-ui): Preset filters preserve query parameters (#3176)

packages/admin-ui/src/lib/core/src/shared/components/data-table-filter-presets/data-table-filter-presets.component.html

@@ -19,7 +19,7 @@
             </div>
             <a
                 [routerLink]="['./']"
-                [queryParams]="preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }"
+                [queryParams]="getQueryParamsForPreset(preset.value, serializedActiveFilters)"
             >
                 <div>{{ preset.name }}</div>
             </a>

packages/admin-ui/src/lib/core/src/shared/components/data-table-filter-presets/data-table-filter-presets.component.ts

@@ -51,6 +51,28 @@ export class DataTableFilterPresetsComponent implements OnInit, OnDestroy {
         this.filterPresets$ = this.filterPresetService.presetChanges$.pipe(
             startWith(this.filterPresetService.getFilterPresets(this.dataTableId)),
         );
+        // When any query param changes, we want to trigger change detection
+        // so that the links for each preset are updated.
+        this.route.queryParamMap
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
+    }
+
+    getQueryParamsForPreset(preset: string, serializedActiveFilters: string): Record<string, string> {
+        // Clone the current query params to avoid mutating them directly
+        const currentParams = { ...this.route.snapshot.queryParams };
+
+        if (preset === serializedActiveFilters) {
+            // Toggling off: remove 'filters' and 'page' params
+            delete currentParams['filters'];
+            delete currentParams['page'];
+        } else {
+            // Toggling on: set 'filters' and 'page' params
+            currentParams['filters'] = preset;
+            currentParams['page'] = 1;
+        }
+
+        return currentParams;
     }
 
     ngOnDestroy() {