Add useRunSearchParams hook for pipeline run filtering

[Mbeaulne]

Description

Resolves: https://github.com/Shopify/oasis-frontend/issues/456

Added a new useRunSearchParams hook to manage pipeline run search/filter state with URL synchronization. This hook provides functionality to parse, update, and serialize filter parameters in the URL, making it easier to maintain filter state across page refreshes and navigation.

Type of Change

• New feature
• Improvement

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

1. Run the test suite to verify the hook's functionality: npm test src/hooks/useRunSearchParams.test.ts
2. The hook will be used in upcoming pipeline run filtering components

Additional Comments

This PR also:

• Adds a new .local/ directory to .gitignore for local notes and scratch files
• Adds src/types/pipelineRunFilters.ts to knip.json ignored files
• Enables React Compiler for the new hook

[Mbeaulne]

• Filter Bar #1708 : 2 dependent PRs (#1709 , #1711 )
• Add created by me filter #1713
• Status filter #1707
• Annotation Filter input #1706
• Date picker #1705
• Add useRunSearchParams hook for pipeline run filtering #1704 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

Critical: Stale closure bug causes filter loss

setFilterDebounced captures the current setFilter function which has filters in its closure. If the URL changes between calling setFilterDebounced and the timeout firing (e.g., from another filter update), the stale filters will be used, causing data loss.

Scenario: User has status=RUNNING, calls setFilterDebounced('pipeline_name', 'test'), then immediately sets created_by=user1. When the debounced timeout fires, it uses the old filters without created_by, losing that filter.

Fix by reading fresh filters in the timeout callback:

const setFilterDebounced = <K extends keyof PipelineRunFilters>(
  key: K,
  value: PipelineRunFilters[K],
) => {
  if (debounceTimeoutRef.current) {
    clearTimeout(debounceTimeoutRef.current);
  }

  debounceTimeoutRef.current = setTimeout(() => {
    // Re-parse filters from current URL to avoid stale closure
    const currentFilterParam = isRecord(search)
      ? getStringOrUndefined(search.filter)
      : undefined;
    const currentFilters = parseFiltersFromUrl(currentFilterParam);
    
    const newFilters = { ...currentFilters };
    if (value === undefined || value === null || value === "") {
      delete newFilters[key];
    } else {
      newFilters[key] = value;
    }
    updateUrl(newFilters);
    debounceTimeoutRef.current = null;
  }, DEBOUNCE_MS);
};

Suggested change

	const setFilterDebounced = <K extends keyof PipelineRunFilters>(
	key: K,
	value: PipelineRunFilters[K],
	) => {
	if (debounceTimeoutRef.current) {
	clearTimeout(debounceTimeoutRef.current);
	}
	debounceTimeoutRef.current = setTimeout(() => {
	setFilter(key, value);
	debounceTimeoutRef.current = null;
	}, DEBOUNCE_MS);
	};
	const setFilterDebounced = <K extends keyof PipelineRunFilters>(
	key: K,
	value: PipelineRunFilters[K],
	) => {
	if (debounceTimeoutRef.current) {
	clearTimeout(debounceTimeoutRef.current);
	}
	debounceTimeoutRef.current = setTimeout(() => {
	// Re-parse filters from current URL to avoid stale closure
	const currentFilterParam = isRecord(search)
	? getStringOrUndefined(search.filter)
	: undefined;
	const currentFilters = parseFiltersFromUrl(currentFilterParam);
	const newFilters = { ...currentFilters };
	if (value === undefined || value === null || value === "") {
	delete newFilters[key];
	} else {
	newFilters[key] = value;
	}
	updateUrl(newFilters);
	debounceTimeoutRef.current = null;
	}, DEBOUNCE_MS);
	};

Spotted by Graphite Agent



Is this helpful? React 👍 or 👎 to let us know.