Fix disconnect social auth bugs #1600
Conversation
Fix how the error message is fetched and displayed when disconnecting a social auth account. Refs. TS-2758
WalkthroughConnections.tsx: added a ref (disconnectingProviderRef) to track pending disconnects, uses react-router's revalidator to refresh data after disconnects, computes onlyOneConnected and getConnection helpers, updates onSubmit success/error to show contextual toasts and handle ApiError field messages, removes explicit logged-in throws, and disables connection switches when only one provider remains. Settings.tsx: introduced a server-side loader and clientLoader, switched to a Suspense/Await pattern with SkeletonBox fallback, added tabClass helper, and resolves currentUser before supplying outlet context. Connection.tsx: added a public boolean Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## master #1600 +/- ##
=========================================
- Coverage 9.88% 9.87% -0.02%
=========================================
Files 308 308
Lines 22502 22540 +38
Branches 404 404
=========================================
Hits 2225 2225
- Misses 20277 20315 +38 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx(2 hunks)apps/cyberstorm-remix/app/settings/user/Settings.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/cyberstorm-remix/app/settings/user/Settings.tsx (3)
apps/cyberstorm-remix/app/root.tsx (1)
OutletContextShape(84-89)apps/cyberstorm-remix/cyberstorm/security/publicEnvVariables.ts (1)
getPublicEnvVariables(19-48)packages/dapper-ts/src/index.ts (1)
DapperTs(38-96)
apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx (1)
packages/thunderstore-api/src/errors.ts (1)
ApiError(14-64)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Generate visual diffs
- GitHub Check: Build
Roffenlund
force-pushed
the
fix-disconnect-social-auth-bugs
branch
from
57b7d24 to
1663a1d
Compare
Roffenlund
changed the title
anttimaki
left a comment
anttimaki
left a comment
There was a problem hiding this comment.
I think there's a bug on "prevent removing last connection".
Other comments are not blockers, they're mostly focused on finding common practices that should be made code base wide.
| return { currentUser }; | ||
| } | ||
|
|
||
| export function HydrateFallback() { |
There was a problem hiding this comment.
In #1604 I addressed why using HydrateFallback seems like a suboptimal solution for a page with tabs. Should Suspense+Await be used here too?
There was a problem hiding this comment.
While Suspense+Await is now in place, the main issue isn't fixed yet. If getSessionCurrentUser is changed to sleep a few seconds, when moving between Settings and Account tabs there's no indication of registering the click, like rendering the skeleton box. Instead, the whole section is rendered only after the promise resolves. This is likely caused by the fact that in user settings the currentUser is fetched on the parent component, whereas on the team settings each tab has their own clientLoader implementation.
There was a problem hiding this comment.
I will look into which pattern is recommended for this architecture.
apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx
Outdated
Show resolved
Hide resolved
| const tools = getSessionTools(); | ||
| const currentUser = await tools.getSessionCurrentUser(true); | ||
| return { currentUser }; |
There was a problem hiding this comment.
Only check for the ´currentUser.usernameand thrown an error, if it'sundefined. There's no need to return the currentUser` as it's not used in the layout(template in django).
And it's not used in there, because you are checking for the session already in the clientLoader.
There was a problem hiding this comment.
The currentUser variable is used in several places in the child components of this page.
Implement a flag to disable a connection switch in the common Connection component. Refs. TS-2758
- Implement clientLoader for fetching currentUser - clientLoader always fetches and updates a fresh user from API - Use helper function for getting tab classes - Use HydrateFallback for rendering a loading message Refs. TS-2758
- Disable switching off the last active social auth account - Update success message when user disconnects social auth - Implement helper function for getting connection - Implement helper function for checking if user has only one connection - Simplify component logic Refs. TS-2758
- Remove HydrateFallback - Use Suspense/Await pattern - Return promise from clientLoader instead of resolved data Refs. TS-2758
Roffenlund
force-pushed
the
fix-disconnect-social-auth-bugs
branch
from
1663a1d to
003bebd
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/cyberstorm-remix/app/commonComponents/Connection/Connection.tsx(2 hunks)apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx(3 hunks)apps/cyberstorm-remix/app/settings/user/Settings.tsx(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx (4)
apps/cyberstorm-remix/app/root.tsx (1)
OutletContextShape(84-89)packages/thunderstore-api/src/errors.ts (1)
ApiError(14-64)apps/cyberstorm-remix/app/commonComponents/Connection/Connection.tsx (1)
Connection(17-48)apps/cyberstorm-remix/cyberstorm/utils/ThunderstoreAuth.tsx (1)
buildAuthLoginUrl(8-14)
apps/cyberstorm-remix/app/settings/user/Settings.tsx (4)
apps/cyberstorm-remix/app/root.tsx (1)
OutletContextShape(84-89)apps/cyberstorm-remix/cyberstorm/security/publicEnvVariables.ts (1)
getSessionTools(50-67)packages/cyberstorm/src/index.ts (2)
Tabs(109-109)SkeletonBox(92-92)packages/cyberstorm/src/newComponents/Tabs/Tabs.tsx (1)
Tabs(18-40)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Generate visual diffs
| const getConnection = (provider: ProvidersType) => | ||
| outletContext.currentUser?.connections?.find( | ||
| (c) => c.provider?.toLowerCase() === provider.identifier | ||
| ); |
There was a problem hiding this comment.
Fix provider typing in getConnection.
Parameter is typed as ProvidersType (the whole array), so identifier is missing and the file won’t compile. Please type it as a single provider entry instead.
- const getConnection = (provider: ProvidersType) =>
+ const getConnection = (provider: ProvidersType[number]) =>🤖 Prompt for AI Agents
In apps/cyberstorm-remix/app/settings/user/Connections/Connections.tsx around
lines 54 to 57, the getConnection parameter is incorrectly typed as the whole
ProvidersType array; change the parameter to represent a single provider entry
(e.g. ProvidersType[number] or the specific Provider type used in the codebase)
so provider.identifier exists and the file compiles, then keep the comparison
logic (provider.identifier) as-is.
Uh oh!
There was an error while loading. Please reload this page.