fix(InfiniteListItems): Fix types to support non-array based ApiResult objects (#97690)

Before we were hard-coding the assumption about the response shape:
```
# before
  const loadedRows = deduplicateItems(
    data ? data.pages.flatMap(result => result[0]) : []
  );
```
This was assuming that `result` is an ApiResult, which is a tuple.

Now we have better types! These let us extract the list of things from
inside the ApiResult first, it's just basically the do-it-yourself
method, just implement: `(page: Response[]) => ListItem[];`


Example
So if you have some data like this:
```
const fromTheApi: ReplayListResponse = {data: [{replayId: 123}, {replayId: 234}]};
const response:  ApiResult<ReplayListResponse> = [fromTheApi, status, rawResponse];
```
it's possible to extract out the `[{replayId: 123}, {replayId: 234}]`
from inside the ApiResult now with `deduplicateItems={pages =>
uniqBy(pages.flatMap(page => page[0].data), 'replayId')}`

Author: ryan953

static/app/components/feedback/list/feedbackList.tsx

@@ -4,6 +4,7 @@ import uniqBy from 'lodash/uniqBy';
 
 import waitingForEventImg from 'sentry-images/spot/waiting-for-event.svg';
 
+import type {ApiResult} from 'sentry/api';
 import {Tooltip} from 'sentry/components/core/tooltip';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import FeedbackListHeader from 'sentry/components/feedback/list/feedbackListHeader';
@@ -57,8 +58,13 @@ export default function FeedbackList() {
           backgroundUpdatingMessage={() => null}
           loadingMessage={() => <LoadingIndicator />}
         >
-          <InfiniteListItems<FeedbackIssueListItem>
-            deduplicateItems={items => uniqBy(items, 'id')}
+          <InfiniteListItems<FeedbackIssueListItem, ApiResult<FeedbackIssueListItem[]>>
+            deduplicateItems={pages =>
+              uniqBy(
+                pages.flatMap(page => page[0]),
+                'id'
+              )
+            }
             estimateSize={() => 24}
             queryResult={queryResult}
             itemRenderer={({item}) => (

static/app/components/infiniteList/infiniteListItems.tsx

@@ -9,43 +9,53 @@ import {t} from 'sentry/locale';
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
 
-interface Props<Data> {
+/**
+ * Types:
+ *   - ListItem represents the type of a single item in the list, after being extracted and de-duplicated from the response
+ *   - Response represents the type of the response from the API. For example: `ApiResult<ListItem[]>` or `ApiResult<{data: ListItem[]}>`
+ *
+ * `deduplicateItems` is a function to transform Response into an array of ListItem objects. For the most common cases:
+ *   - When `Response = ApiResult<ListItem[]>` then `deduplicateItems={pages => uniqBy(pages.flatMap(page => page[0]), 'id')}`
+ *   - When `Response = ApiResult<{data: ListItem[]}>` then `deduplicateItems={pages => uniqBy(pages.flatMap(page => page[0].data), 'id')}`
+ */
+interface Props<ListItem, Response = Array<ApiResult<ListItem[]>>> {
+  deduplicateItems: (page: Response[]) => ListItem[];
   itemRenderer: ({
     item,
     virtualItem,
   }: {
-    item: Data;
+    item: ListItem;
     virtualItem: VirtualItem;
   }) => React.ReactNode;
   queryResult: Overwrite<
     Pick<
-      UseInfiniteQueryResult<InfiniteData<ApiResult<Data[]>>, Error>,
+      UseInfiniteQueryResult<InfiniteData<Response>, Error>,
       'data' | 'hasNextPage' | 'isFetchingNextPage' | 'fetchNextPage'
     >,
     {fetchNextPage: () => Promise<unknown>}
   >;
-  deduplicateItems?: (items: Data[]) => Data[];
   emptyMessage?: () => React.ReactNode;
   estimateSize?: () => number;
   loadingCompleteMessage?: () => React.ReactNode;
   loadingMoreMessage?: () => React.ReactNode;
   overscan?: number;
 }
 
-export default function InfiniteListItems<Data>({
-  deduplicateItems = _ => _,
+export default function InfiniteListItems<
+  ListItem,
+  Response = Array<ApiResult<ListItem[]>>,
+>({
+  deduplicateItems,
   emptyMessage = EmptyMessage,
   estimateSize,
   itemRenderer,
   loadingCompleteMessage = LoadingCompleteMessage,
   loadingMoreMessage = LoadingMoreMessage,
   overscan,
   queryResult,
-}: Props<Data>) {
+}: Props<ListItem, Response>) {
   const {data, hasNextPage, isFetchingNextPage, fetchNextPage} = queryResult;
-  const loadedRows = deduplicateItems(
-    data ? data.pages.flatMap(result => result[0]) : []
-  );
+  const loadedRows = deduplicateItems(data?.pages ?? []);
   const parentRef = useRef<HTMLDivElement>(null);
 
   const rowVirtualizer = useVirtualizer({