feat: add core feature flag parameter handling (#1894)

* feat: add core feature flag parameter handling

- Add EnableFeature and DisableFeature query parameters
- Create SYSTEM_PARAMS constant for feature flag preservation
- Enhance carryOverFilterParams to preserve system parameters
- Prevent duplication of parameters during navigation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat: add feature flag parameter preservation for internal links

- Add preserveFeatureFlagParams utility function to maintain feature flags across navigation
- Update Link component to automatically preserve feature flag parameters
- Add comprehensive test coverage for feature flag parameter handling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: Updated [rdev] values.yaml image tags to sha-a522005

* Update frontend/packages/data-portal/app/state/filterHistory.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* chore: Updated [rdev] values.yaml image tags to sha-0bbce09

* fix: resolve TypeScript error in feature flag parameter handling

- Change SYSTEM_PARAMS from 'as const' to 'as QueryParams[]' to fix type compatibility
- Auto-format SYSTEM_PARAMS.includes() call in filterHistory.ts

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: Updated [rdev] values.yaml image tags to sha-1246611

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: czi-github-helper[bot] <+czi-github-helper[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 4 people

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     frontend:
       image:
-        tag: sha-b628ed0
+        tag: sha-1246611
       replicaCount: 1
       env:
         - name: API_URL_V2

frontend/packages/data-portal/app/components/BrowseData/BrowseDataTabs.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from '@remix-run/react'
+import { useLocation, useNavigate, useSearchParams } from '@remix-run/react'
 import { useTypedLoaderData } from 'remix-typedjson'
 
 import { GetToolbarDataQuery } from 'app/__generated_v2__/graphql'
@@ -12,13 +12,15 @@ export function BrowseDataTabs() {
   const { t } = useI18n()
   const navigate = useNavigate()
   const { pathname } = useLocation()
+  const [searchParams] = useSearchParams()
   const data = useTypedLoaderData<GetToolbarDataQuery>()
 
   return (
     <Tabs
       onChange={(nextTab) => {
         plausible(Events.ClickBrowseDataTab, { tab: nextTab })
-        navigate(`/browse-data/${nextTab}`)
+        const search = searchParams.toString()
+        navigate(`/browse-data/${nextTab}${search ? `?${search}` : ''}`)
       }}
       value={
         pathname.includes('/browse-data/depositions')

frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx

@@ -34,6 +34,7 @@ import { cnsNoMerge } from 'app/utils/cns'
 import { useFeatureFlag } from 'app/utils/featureFlags'
 import { sendLogs } from 'app/utils/logging'
 import { getErrorMessage } from 'app/utils/string'
+import { carryOverFilterParams, createUrl } from 'app/utils/url'
 
 const LOADING_DEPOSITIONS = range(0, MAX_PER_PAGE).map(
   (value) =>
@@ -392,7 +393,13 @@ export function DepositionTable() {
       columns={columns}
       onTableRowClick={(row) => {
         plausible(Events.ClickDeposition, { id: row.original.id })
-        navigate(`/depositions/${row.original.id}`)
+        const url = createUrl(`/depositions/${row.original.id}`)
+        carryOverFilterParams({
+          filters: [],
+          params: url.searchParams,
+          prevParams: searchParams,
+        })
+        navigate(`${url.pathname}${url.search}`)
       }}
       hoverType="group"
     />

frontend/packages/data-portal/app/components/Link/Link.tsx

@@ -1,12 +1,12 @@
-import { Link as RemixLink, LinkProps } from '@remix-run/react'
+import { Link as RemixLink, LinkProps, useSearchParams } from '@remix-run/react'
 import { ForwardedRef, forwardRef } from 'react'
 
 import {
   DASHED_BORDERED_CLASSES,
   DASHED_UNDERLINED_CLASSES,
 } from 'app/utils/classNames'
 import { cnsNoMerge } from 'app/utils/cns'
-import { isExternalUrl } from 'app/utils/url'
+import { isExternalUrl, preserveFeatureFlagParams } from 'app/utils/url'
 
 export type VariantLinkProps = LinkProps & {
   newTab?: boolean
@@ -26,8 +26,15 @@ function BaseLink(
   }: VariantLinkProps & { href?: string },
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
+  const [searchParams] = useSearchParams()
   let newTabProps: Partial<LinkProps> = {}
-  const url = href ?? to
+  const originalUrl = href ?? to
+
+  // Preserve feature flag parameters for internal links
+  const url =
+    typeof originalUrl === 'string'
+      ? preserveFeatureFlagParams(originalUrl, searchParams)
+      : originalUrl
 
   if (newTab || (typeof url === 'string' && isExternalUrl(url))) {
     // For new tabs, add rel=noreferrer for security:

frontend/packages/data-portal/app/constants/filterQueryParams.ts

@@ -50,3 +50,8 @@ export const DEPOSITION_FILTERS = [
   ...COMMON_DATASET_FILTERS,
   QueryParams.ObjectId,
 ] as const
+
+export const SYSTEM_PARAMS = [
+  QueryParams.EnableFeature,
+  QueryParams.DisableFeature,
+] as QueryParams[]

frontend/packages/data-portal/app/constants/query.ts

@@ -42,4 +42,6 @@ export enum QueryParams {
   TomogramProcessing = 'tomogram-processing',
   TomogramSampling = 'tomogram-sampling',
   TomogramsPage = 'tomograms-page',
+  EnableFeature = 'enable-feature',
+  DisableFeature = 'disable-feature',
 }

frontend/packages/data-portal/app/state/filterHistory.ts

@@ -2,6 +2,7 @@ import { useSearchParams } from '@remix-run/react'
 import { atom, useAtom } from 'jotai'
 import { useEffect } from 'react'
 
+import { SYSTEM_PARAMS } from 'app/constants/filterQueryParams'
 import { QueryParams } from 'app/constants/query'
 
 export const previousBrowseDatasetParamsAtom = atom('')
@@ -64,8 +65,12 @@ export function useSyncParamsWithState({
   useEffect(() => {
     const newParams = new URLSearchParams(searchParams)
 
+    // Keep only allowed filters and system parameters
     for (const key of newParams.keys()) {
-      if (!filters.includes(key as QueryParams)) {
+      const isAllowedFilter = filters.includes(key as QueryParams)
+      const isSystemParam = SYSTEM_PARAMS.includes(key as QueryParams)
+
+      if (!isAllowedFilter && !isSystemParam) {
         newParams.delete(key)
       }
     }