Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

Rename useConnection to useShowMorePagination#44703

Merged
philipp-spiess merged 4 commits into
mainfrom
ps/rn-use-connection
Nov 29, 2022
Merged

Rename useConnection to useShowMorePagination#44703
philipp-spiess merged 4 commits into
mainfrom
ps/rn-use-connection

Conversation

@philipp-spiess

@philipp-spiess philipp-spiess commented Nov 22, 2022

Copy link
Copy Markdown
Contributor

Part of https://github.com/sourcegraph/sourcegraph/issues/44706

From Slack:

We’re working on a replacement for useConnection with better defaults and support for bi-directional pagination. The existing useConnection was added as a replacement for a bit over a year ago and is a drop-in replacement for the older pattern on the frontend (without having to change anything in the backend). It does this very well: It’s currently simple to move from to the new hook implementation.

As part of the strategic scale-testing, I’m currently working with @naman and @Kelli Rockwell to take this one step further: We’re rethinking how we’re doing pagination on the backend as well. This means that we now recommend a fully cursor-based implementation in the backend that supports traversal in both directions and we’re also changing the UI default from being an append-only list to showing individual pages. This will need new front-end components: the hook above and a new pagination UI component.

We want all new paginations to be using this new pattern (a more detailed writeup is following shortly as well) so it should be clear that the existing useConnection is no longer the recommended default. However it’s not easy to migrate from useConnection to the new hook (because it requires backend support and for some views it’s maybe not what we want either) so I assume that both patterns will coexist.

This is the first step to my plan: Rename existing useConnection usages. @felixfbecker proposed the name useShowMorePagination which I find quite fitting. @quinnkeast suggested useInfinitePagination which would also work. Does anyone feel strongly about the name?

Test plan

This is just a large string replace, I’m relying on our tests to break if things are broken.

App preview:

Check out the client app preview documentation to learn more.

@cla-bot cla-bot Bot added the cla-signed label Nov 22, 2022
@github-actions github-actions Bot added the team/code-exploration Issues owned by the Code Exploration team label Nov 22, 2022
@sg-e2e-regression-test-bob

sg-e2e-regression-test-bob commented Nov 22, 2022

Copy link
Copy Markdown

Bundle size report 📦

Initial size Total size Async size Modules
0.00% (0.00 kb) 0.00% (0.00 kb) 0.00% (0.00 kb) 0.00% (0)

Look at the Statoscope report for a full comparison between the commits 03d4fa4 and 5473007 or learn more.

Open explanation
  • Initial size is the size of the initial bundle (the one that is loaded when you open the page)
  • Total size is the size of the initial bundle + all the async loaded chunks
  • Async size is the size of all the async loaded chunks
  • Modules is the number of modules in the initial bundle

@philipp-spiess philipp-spiess changed the title Rename useConnection to useShowMoreConnection Rename useConnection to useShowMorePagination Nov 23, 2022
@philipp-spiess philipp-spiess self-assigned this Nov 23, 2022
@philipp-spiess philipp-spiess marked this pull request as ready for review November 23, 2022 12:39
@sourcegraph-bot

sourcegraph-bot commented Nov 23, 2022

Copy link
Copy Markdown
Contributor

Codenotify: Notifying subscribers in CODENOTIFY files for diff 5473007...03d4fa4.

Notify File(s)
@courier-new client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/ImportingChangesetsPreviewList.tsx
client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/WorkspacesPreviewList.tsx
client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/useImportingChangesets.ts
client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/useWorkspaces.ts
client/web/src/enterprise/batches/detail/BulkOperationsTab.tsx
client/web/src/enterprise/batches/detail/changesets/BatchChangeChangesets.tsx
client/web/src/enterprise/batches/list/BatchChangeListPage.tsx
client/web/src/enterprise/batches/settings/CodeHostConnections.tsx
client/web/src/enterprise/batches/settings/backend.ts
@efritz client/web/src/enterprise/executors/secrets/ExecutorSecretsListPage.tsx
client/web/src/enterprise/executors/secrets/backend.ts
@eseliger client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/ImportingChangesetsPreviewList.tsx
client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/WorkspacesPreviewList.tsx
client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/useImportingChangesets.ts
client/web/src/enterprise/batches/batch-spec/edit/workspaces-preview/useWorkspaces.ts
client/web/src/enterprise/batches/detail/BulkOperationsTab.tsx
client/web/src/enterprise/batches/detail/changesets/BatchChangeChangesets.tsx
client/web/src/enterprise/batches/list/BatchChangeListPage.tsx
client/web/src/enterprise/batches/settings/CodeHostConnections.tsx
client/web/src/enterprise/batches/settings/backend.ts
client/web/src/enterprise/executors/secrets/ExecutorSecretsListPage.tsx
client/web/src/enterprise/executors/secrets/backend.ts
@fkling client/web/src/search/results/sidebar/Revisions.tsx
@limitedmage client/web/src/enterprise/code-monitoring/CodeMonitoringLogs.tsx
client/web/src/search/results/sidebar/Revisions.tsx

@taras-yemets

Copy link
Copy Markdown
Contributor

Another option could be to rename useConnection to useFetchMore (fetchMore is one of the functions returned by the hook) and use usePagination name for a hook returning prev/next page fetchers.

@philipp-spiess

Copy link
Copy Markdown
Contributor Author

I like that but I’m not sure if pagination alone clear enough (we've discussed this with @felixfbecker in the Slack thread).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@philipp-spiess, what do you think about renaming this interface too?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@taras-yemets I forgot to push 🤦

@taras-yemets

Copy link
Copy Markdown
Contributor

I'm still not sure about the naming.
We are going to have two useSomeTypeOfPagination hooks, and we are going to use these and derived hooks to get some kind of connection (e.g., useImportingChangesets, useBulkOperationsListConnection, RepoRevisionSidebarSymbols, etc.).
If I use some hook to get a connection and some functions to manage it, I'd probably expect this hook to have word 'connection' in its name. If I use useSomeTypeOfPagination I'd expect to get a current page number, total pages, and get prev/next page functions (for example these usePagination examples: 1, 2).
Having const { connection, error, loading, hasNextPage, fetchMore } = useShowMorePagination(...args) with connection being the 'main' return value does not seem intuitive to me.

@philipp-spiess

Copy link
Copy Markdown
Contributor Author

@taras-yemets Why is the word connection so important in this case? E.g. cant useBulkOperationsListConnection also be called useBulkOperationsListPagination?

If I use useSomeTypeOfPagination I'd expect to get a current page number, total pages, and get prev/next page functions

In both cases you'd get a 'next page' function (fetchMore and goToNextPage/goToPreviousPage) but yeah we can't show you the current page number because that's not possible with cursor based navigation. I still think that there's not a fundamental difference between this hook, the one I’m adding and the ones you linked.

Having const { connection, error, loading, hasNextPage, fetchMore } = useShowMorePagination(...args) with connection being the 'main' return value does not seem intuitive to me.

I think connection still makes sense as a term here because this is what GraphQL is calling the type of this thing. We can probably also return the current nodes instead because connection must have nodes, would that be better?

@taras-yemets

Copy link
Copy Markdown
Contributor

@philipp-spiess, I don't have name suggestions I'm confident in that seem more suitable than the ones shared by folks in this PR and in the referenced thread.
I'm fine with the selected name.

@vdavid

vdavid commented Nov 28, 2022

Copy link
Copy Markdown
Contributor

@philipp-spiess I'm not intimately familiar with the pagination effort, just saw this PR and was interested. I skimmed through the Slack convo and the related tracking issue, and other PRs, that's pretty much all the context I have. So just leaving my two cents here:

As far as I know, the term "connection" comes from the "GraphQL Cursor Connections" (I'll call it GCC in this message) standard: https://relay.dev/graphql/connections.htm
I guess the name useConnection wants to mean that "this is a hook that connects to a GraphQL API that follows the GCC standard, and returns a connection as defined in the GCC spec."

I understand @thenamankumar is working on back-end changes that improve our pagination. But I'm unsure: does it also mean that we're moving off the GCC standard?

a.) If yes, then renaming the hook to something like useShowMorePagination makes a lot of sense to me because it abstracts away GCC, and basically says that "this is a hook that can handle pagination with some backend (that is not necessarily GCC-compatible)".
b.) If no, then I think keeping the term connection in the hook name is pretty elegant because it compresses a lot of information (a reference to the GCC standard) in a very short term.

Again, just my two cents, I think this rename can't hurt in any case, as it's very easy to change it later.

@philipp-spiess

Copy link
Copy Markdown
Contributor Author

Thanks @vdavid!

I understand @thenamankumar is working on back-end changes that improve our pagination. But I'm unsure: does it also mean that we're moving off the GCC standard?

No! The work that we're doing is to extend upon the GraphQL connection interface and add a helper in Go that makes it easier to: 1) uses proper cursors (the current patterns all show lead to OFFSET .. LIMIT .. based SQL queries which defeats a lot of the purpose here) and 2) allows for forward and backward navigation.

We still expect the GraphQL APIs to implement the Connection type.

If no, then I think keeping the term connection in the hook name is pretty elegant because it compresses a lot of information (a reference to the GCC standard) in a very short term.

That is fair but I wonder how much additional value the knowledge that a hook uses an underlying GraphQL connection really brings: When adding a new usage of the hook, the types already make it clear that this is the required backend structure and when reading the code I feel like this term has just become a synonym for pagination in our codebase.

@lrhacker

Copy link
Copy Markdown
Contributor

Given that we expect this to exist (for at least some period of time) in combination with the new usePageSwitcherPagination hook, it makes sense to me for this one to be named useShowMorePagination. For now, they both are clearly distinguishable about what they should be used for until we are able to support both cases with a single implementation.

We can provide more context/detail about the relevant implementation details (e.g. the use of a "connection") as needed/desired in the JSDoc comments for the hooks (and, like you mentioned @philipp-spiess, the type system also helps us describe this).

@philipp-spiess

Copy link
Copy Markdown
Contributor Author

Thank you all for your feedback! I’m still not sure about the Connection vs Pagination suffix but since nobody felt really strongly I’m going to bias toward action and ship my current proposal. We can always rename things later if we need that 😅

@philipp-spiess philipp-spiess merged commit c6e1005 into main Nov 29, 2022
@philipp-spiess philipp-spiess deleted the ps/rn-use-connection branch November 29, 2022 14:00
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants