fix(checkboxState): Update useListItemCheckboxContext to not rely on ApiQueryKEy directly, only QueryKeyEndpointOptions

[ryan953]

This PR has 4 layers to look at

Start with the change to static/app/utils/list/useListItemCheckboxState.tsx

1. The main thing in here that drives all the other file changes is this:

- type ListCheckboxQueryKeyValue = undefined | ApiQueryKey | InfiniteApiQueryKey;
- export type ListCheckboxQueryKeyRef = RefObject<ListCheckboxQueryKeyValue>;
+ export type ListCheckboxQueryKeyRef = RefObject<undefined | QueryKeyEndpointOptions>;

We've changed from ApiQueryKey | InfiniteApiQueryKey to QueryKeyEndpointOptions and re-wrote it a little to be more concise.

2. Other changes in this file are also type consolidation. I noticed that we re-wrote things when a union would work.

Files passing values into useListItemCheckboxState or the Provider.

With the change to ListCheckboxQueryKeyValue and ListCheckboxQueryKeyRef we need to pass in a different object to the provider.
Instead of queryKey={queryOptions.queryKey} there's queryKey={safeParseQueryKey(queryOptions.queryKey)?.options} in these 4 files:

• static/app/components/feedback/list/feedbackList.tsx
• static/app/views/explore/replays/list/replayIndexTable.tsx
• static/gsApp/views/seerAutomation/components/projectTable/seerProjectTable.tsx
• static/gsApp/views/seerAutomation/components/repoTable/seerRepoTable.tsx

We also read from the useListItemCheckboxState

When we read from the state hook we need to make sure we're assuming the new object type. That's what these files are updated to do:

• static/app/components/replays/table/replayTableHeader.tsx
  • call into: static/app/components/replays/table/replayBulkViewedActions.tsx
• static/gsApp/views/seerAutomation/components/projectTable/seerProjectTableHeader.tsx
• static/gsApp/views/seerAutomation/components/repoTable/seerRepoTableHeader.tsx

Final layer

Along the way I noticed that ListItemCheckboxProvider wasn't part of the FeedbackList component tree. It was passing props into the hook and doing weird things. So i added the provider, and moved the calls to useListItemCheckboxContext into the sub-components. I forget the reasons why it wasn't like this before, probably because feedback was the first one and got left behind.

[github-actions]

📊 Type Coverage Diff

✅ No new type safety issues introduced. Coverage: 93.44%

[TkDodo]

nice work 🙌

[TkDodo]

I think there’s some more cleanup missing:

1. the param here is not queryKey anymore - it’s endpointOptions
2. we’re still constructing a “fake” query key just to safeParse it and pass options from it, but we can just pass options naturally. The queryKey is not used anywhere else:

endpointOptions={{query: {query: searchTerm, sort, agent: agentFilter}}

[TkDodo]

we already parseQueryKey in line 63:

  const {options} = parseQueryKey(queryKey);
  const needsSDKUpdateForClickSearch = useNeedsSDKUpdateForClickSearch({
    search: options?.query?.query as string | undefined,
  });

I think you’d want to change that to safeParseQueryKey too (as we use it as options?.query?.query anyways, it can be undefined), thus getting rid of parseQueryKey here altogether and we’d only parse once not twice.

[TkDodo]

naming wise this should really be endpointOptions as queryOptions is already a term we use for react-query queryOptions() and it’s quite confusing that this is something different 😅

[TkDodo]

same naming thought here:

Suggested change

	const queryOptions = queryKeyRef.current;
	const endpointOptions = endpointOptionsRef.current;