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

Add modal to remind users to connect external accounts#61721

Merged
pjlast merged 40 commits into
mainfrom
pjlast/60616-account-connection-ux
May 2, 2024
Merged

Add modal to remind users to connect external accounts#61721
pjlast merged 40 commits into
mainfrom
pjlast/60616-account-connection-ux

Conversation

@pjlast

@pjlast pjlast commented Apr 9, 2024

Copy link
Copy Markdown
Contributor

Closes #60616

Adds a modal that reminds users to connect external accounts for permissions syncing.

The modal does not show accounts that the user has already connected, and once dismissed, the modal won't be shown again unless a new auth provider is added.

The modal also only shows auth providers that would have an effect on permissions syncing. If no authorization is configured for any code host connections, then no modal will be shown.

See the attached Loom for a demo

https://www.loom.com/share/cb5f219bb9f3436fa1bcc1f70d603e67

Corresponding docs entry: sourcegraph/docs#282

Test plan

Lots of manual testing and added a unit test for the resolver. Probably needs a few more tests

@cla-bot cla-bot Bot added the cla-signed label Apr 9, 2024
@github-actions github-actions Bot added team/product-platform team/source Tickets under the purview of Source - the one Source to graph it all labels Apr 9, 2024
@pjlast pjlast changed the title Add external accounts connection modal Add modal to remind users to connect external accounts Apr 23, 2024
@pjlast pjlast requested a review from a team April 23, 2024 13:04
@pjlast pjlast marked this pull request as ready for review April 23, 2024 13:04
@sourcegraph-bot

sourcegraph-bot commented Apr 23, 2024

Copy link
Copy Markdown
Contributor

📖 Storybook live preview

@eseliger eseliger left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

left a few questions inline, will continue review tmr

Comment thread cmd/frontend/graphqlbackend/authz.graphql Outdated
Comment thread cmd/frontend/internal/authz/resolvers/resolver_test.go Outdated
Comment thread client/web/src/LegacyLayout.tsx Outdated
Comment thread client/web/src/LegacyLayout.tsx Outdated
Comment on lines +140 to +148
const [seenAuthzProviders, setSeenAuthzProviders] = useTemporarySetting('user.seenAuthProviders')

useEffect(() => {
const externalAccountsModalVisible = shouldShowExternalAccountsModal(
window.context.authProviders,
seenAuthzProviders
)
setExternalAccountsModalVisible(externalAccountsModalVisible)
}, [seenAuthzProviders])

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

this logic split seems slightly weird to me, we import the shouldShow function from the modal into here, to then not render the modal.

Could we instead move this into the modal and do a !show return null ?

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.

So I don't like this either, but because the Apollo lib uses React hooks, and React hooks can't be called conditionally, it leads to extra GraphQL queries being made when we could determine earlier that we're not going to render the modal.

Perhaps we can pull out the inner component of the modal into a sub-component? And then at least encapsulate all the logic into one file.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Yep I think that's the react-y way to go :)

Comment thread client/web/src/external-account-modal/ExternalAccountsModal.tsx
Comment thread cmd/frontend/graphqlbackend/authz.go Outdated
Comment on lines +177 to +181
type AuthzProviderResolver interface {
URN() string
ServiceType() string
ServiceID() string
}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

The external accounts page lists all auth providers. We're interested in only Authz providers, i.e. auth providers for which there is also a corresponding code host connection that has authorization enabled.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Aha!
I wonder if we could perhaps add a field to the resolver that's linked that indicates "required for authz" or so 🤔 That way, we could also add an info icon on the account security page or so, and it's mostly a backend concern what actually "is required for authz"

Comment thread client/web/src/LegacyLayout.tsx Outdated
userHistory={userHistory}
/>
)}
{props.authenticatedUser && externalAccountsModalVisible && (

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

IMO this new modal is a net-positive improvement, but to be absolutely sure, should we add something to disable the feature?

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.

I'm not in favour of adding yet another "but have you enabled this setting" thing. I can be convinced otherwise, but my gut feeling is that I don't think it is necessary.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I totally hear you :/ I'm just scared we might be missing some edge-case in the initial implementation and that some customer will run into issues with it where we unnecessarily bother every user. For example, what happens with explicit perms?

It could be some temporary stopgap kinda thing?

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.

@eseliger @pjlast Should we still though default this to enabled and just leave the FF as an option to turn this setting off?

Comment thread client/web/src/external-account-modal/ExternalAccountsModal.tsx Outdated
userHistory={userHistory}
/>
)}
{props.authenticatedUser && (

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.

Do we need to do anything with the new svelte app? Or even let code search team know?

@eseliger eseliger left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Approving to unblock for release cut today, I’ll play with it a little more later

Comment thread client/web/src/external-account-modal/ExternalAccountsModal.tsx Outdated
Co-authored-by: Erik Seliger <erikseliger@me.com>
@pjlast pjlast enabled auto-merge (squash) May 2, 2024 12:44
@pjlast pjlast merged commit 70b7b0b into main May 2, 2024
@pjlast pjlast deleted the pjlast/60616-account-connection-ux branch May 2, 2024 13:01
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

cla-signed team/product-platform team/source Tickets under the purview of Source - the one Source to graph it all

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add UX for asking users to connect their external identities

4 participants