web: deprecate FilteredConnection (#52823)

Deprecate `FilteredConnection` and add examples of how to use the
recommended approach.
This commit is contained in:
Valery Bugakov 2023-06-02 01:43:13 -07:00 committed by GitHub
parent ff3ce9fe93
commit 4a7033d667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -143,16 +143,16 @@ interface FilteredConnectionState<C extends Connection<N>, N> extends Connection
visible?: number
}
export function FilteredConnection<N, NP = {}, HP = {}, C extends Connection<N> = Connection<N>>(
props: Omit<FilteredConnectionProps<C, N, NP, HP>, 'location' | 'navigate'>
): JSX.Element | null {
const location = useLocation()
const navigate = useNavigate()
return <InnerFilteredConnection<N, NP, HP, C> {...props} location={location} navigate={navigate} />
}
/**
* @deprecated Prefer using lower-level connection components exported from `./ui/index.ts`
*
* Check out usage examples:
* 1. https://sourcegraph.com/github.com/sourcegraph/sourcegraph@4794d2ff1669a83bb15aa4e2ee8c448e53eae754/-/blob/client/web/src/team/list/TeamListPage.tsx?L106-148
* 2. https://sourcegraph.com/github.com/sourcegraph/sourcegraph@4794d2ff1669a83bb15aa4e2ee8c448e53eae754/-/blob/client/web/src/repo/commits/RepositoryCommitsPage.tsx?L230-269
* 3. https://sourcegraph.com/github.com/sourcegraph/sourcegraph@4794d2ff1669a83bb15aa4e2ee8c448e53eae754/-/blob/client/web/src/site-admin/SiteAdminPackagesPage.tsx?L340-381
*
* ------------------------------------------
*
* Displays a collection of items with filtering and pagination. It is called
* "connection" because it is intended for use with GraphQL, which calls it that
* (see http://graphql.org/learn/pagination/).
@ -162,6 +162,15 @@ export function FilteredConnection<N, NP = {}, HP = {}, C extends Connection<N>
* @template HP Props passed to `headComponent` in addition to `{ nodes: N[]; totalCount?: number | null }`.
* @template C The GraphQL connection type, such as `GQL.IRepositoryConnection`.
*/
export function FilteredConnection<N, NP = {}, HP = {}, C extends Connection<N> = Connection<N>>(
props: Omit<FilteredConnectionProps<C, N, NP, HP>, 'location' | 'navigate'>
): JSX.Element | null {
const location = useLocation()
const navigate = useNavigate()
return <InnerFilteredConnection<N, NP, HP, C> {...props} location={location} navigate={navigate} />
}
class InnerFilteredConnection<N, NP = {}, HP = {}, C extends Connection<N> = Connection<N>> extends React.PureComponent<
FilteredConnectionProps<C, N, NP, HP>,
FilteredConnectionState<C, N>