- Notifications
You must be signed in to change notification settings - Fork927
refactor: move required external auth buttons to the submit side#18586
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I think it would make sense to make the new component have parity with the previous one (or make the previous one reusable) but it looks good to me otherwise.
<Spinnerloading={isLoadingExternalAuth}> | ||
<ExternalImagesrc={auth.display_icon}/> | ||
</Spinner> | ||
Login with{auth.display_name} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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 theSlack Notify
external auth,Connect Slack Notify
makes more sense to me thanLogin with Slack Notify
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Makes sense. Wdyt about the "Connect to $name"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I like it!
startPollingExternalAuth(); | ||
}} | ||
> | ||
<Spinnerloading={isLoadingExternalAuth}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
BrunoQuaresmaJun 26, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Same as previous, a bug! 🐛
missedExternalAuth:TemplateVersionExternalAuth[]; | ||
}; | ||
constExternalAuthButtons:FC<ExternalAuthButtonProps>=({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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?
BrunoQuaresmaJun 26, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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 theuseExternalAuth
hook.
BrunoQuaresmaJun 26, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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 😆
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Hm... ok 👍
Run task | ||
</Button> | ||
<divclassName="flex items-center gap-2"> | ||
{missedExternalAuth&&isMissingExternalAuth&&( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
isMissingExternalAuth
has no effect here, right? It is already implied bymissedExternalAuth
and because the component only renders something ifmissedExternalAuth.length > 0
.
BrunoQuaresmaJun 26, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I think so! Lets see what TS thinks about your logic.
Before:

After:
