refactor: move required external auth buttons to the submit side #18586
Conversation
| <Spinner loading={isLoadingExternalAuth}> | ||
| <ExternalImage src={auth.display_icon} /> | ||
| </Spinner> | ||
| Login with {auth.display_name} |
There was a problem hiding this comment.
I still find the "Login with $name" buttons confusing without context, if it was "Connect $name" I think it would be clearer, but that could just be me. What do you think?
That would also makes better sense with the Slack Notify external auth, Connect Slack Notify makes more sense to me than Login with Slack Notify.
There was a problem hiding this comment.
Makes sense. Wdyt about the "Connect to $name"?
| startPollingExternalAuth(); | ||
| }} | ||
| > | ||
| <Spinner loading={isLoadingExternalAuth}> |
There was a problem hiding this comment.
Before, we were showing a spinner while polling (externalAuthPollingState === "polling"), but now we only show while loading. Just want to confirm if that was intentional. I do think it makes sense to have some visual indication when the polling is happening.
If it was intentional, we can drop the spinner altogether; isLoadingExternalAuth will always be false here right? Since if we are loading, we have no auth buttons to display.
There was a problem hiding this comment.
Thanks for catching this! definitely a bug.
| variant="outline" | ||
| key={auth.id} | ||
| size="sm" | ||
| disabled={isLoadingExternalAuth || auth.authenticated} |
There was a problem hiding this comment.
isLoadingExternalAuth will always be false here, I think. Also, before we were disabling the buttons while polling. Want to check if dropping that was intentional.
There was a problem hiding this comment.
Same as previous, a bug! 🐛
| missedExternalAuth: TemplateVersionExternalAuth[]; | ||
| }; | ||
|
|
||
| const ExternalAuthButtons: FC<ExternalAuthButtonProps> = ({ |
There was a problem hiding this comment.
This does not handle the abandoned polling state like the previous component does. It seems important to me otherwise you could be waiting for it to connect but nothing ever happens, if the polling was abandoned, with no visual indication as to why or a way to retry (aside from refreshing the browser).
Would it make sense to modify the other component to have a variant so we can reuse it here? Or would it make more sense to duplicate the retry code maybe?
There was a problem hiding this comment.
Another good catch! I will implement it.
Until we have to repeat this 3x I'm in favor of duplication if it is does not lead to a painful maintenance in the future. Maybe we could move some of these reusable logic to the useExternalAuth hook.
There was a problem hiding this comment.
Thinking more on this: When the user abadon, or does not complete the flow, the button gets back to its regular state right? So why would we need to handle this in a special way when the user can just click in the button again?
There was a problem hiding this comment.
It could be that they had to leave their desk or do something for a bit and finished linking their account after one minute. So not actually abandoned, it just took longer than the poll timeout.
A temporary network issue could also result in a similar state, I think.
In these cases we could just let it go back to the regular state, but the user needs to click the button again, and IMO we should be explicit about that rather than wait for the user to figure it out. I could see myself sitting there waiting for the account to link wondering if the dashboard is broken 😆
| Run task | ||
| </Button> | ||
| <div className="flex items-center gap-2"> | ||
| {missedExternalAuth && isMissingExternalAuth && ( |
There was a problem hiding this comment.
isMissingExternalAuth has no effect here, right? It is already implied by missedExternalAuth and because the component only renders something if missedExternalAuth.length > 0.
There was a problem hiding this comment.
I think so! Lets see what TS thinks about your logic.
Before:
After:
