Skip to content

feat(clerk-js,shared,types): Remove invalid email addresses from input for Organization Invitation - #1869

Merged
chanioxaris merged 1 commit into
mainfrom
haris/org-257-improve-behavior-of-orgprofile-invite-members-screen
Oct 16, 2023
Merged

feat(clerk-js,shared,types): Remove invalid email addresses from input for Organization Invitation#1869
chanioxaris merged 1 commit into
mainfrom
haris/org-257-improve-behavior-of-orgprofile-invite-members-screen

Conversation

@chanioxaris

@chanioxaris chanioxaris commented Oct 12, 2023

Copy link
Copy Markdown
Contributor

Description

In invite members screen of the component, consume any invalid email addresses as they are returned in the API error and remove them from the input automatically.

Before

Screen.Recording.2023-10-12.at.12.08.40.PM.mov

After

Screen.Recording.2023-10-12.at.12.12.54.PM.mov

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

@chanioxaris
chanioxaris requested a review from a team as a code owner October 12, 2023 09:28
@changeset-bot

changeset-bot Bot commented Oct 12, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7397bed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@clerk/clerk-js Patch
@clerk/shared Patch
@clerk/types Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
@clerk/backend Patch
@clerk/fastify Patch
@clerk/nextjs Patch
@clerk/clerk-react Patch
@clerk/remix Patch
@clerk/clerk-sdk-node Patch
gatsby-plugin-clerk Patch
@clerk/localizations Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR


const invalidEmails = new Set([
...(err.errors[0].meta?.emailAddresses ?? []),
...(err.errors[0].meta?.identifiers ?? []),

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.

❓ where is the meta.identifiers returned? Do we need this? If so, let's add a test to verify that we handle that.

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.

👆

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.

It's included in the API error. Well i was aiming to test it as part of the removes blocked/not allowed emails from input after error test, but apparently used the old emailAddresses parameter. I will update it accordingly

};

const removeInvalidEmails = (err: any) => {
if (!isClerkAPIResponseError(err)) {

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.

❓ the removal of invalid email addresses was executed only when the error code was duplicate_code but after this change, it's executed for all error codes. Is this intentional?

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.

invalid email addresses will be return in meta.emailAddresses and we want to remove them from the text field despite the error code returned

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.

We would like to remove any email addresses included in the meta.emailAddresses & meta.identifiers properties regardless the error code

Comment thread packages/types/src/api.ts
paramName?: string;
sessionId?: string;
emailAddresses?: string[];
identifiers?: string[];

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.

@chanioxaris Did we introduced that to FAPI ? I don't think we support any other identifier than emails, so is this even useful ?

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.

Allowlist & Blocklist are working for every identifier type (email_address, phone_number, web3_wallet). So in such an api error we can't limit them to only email addresses or reuse the existing meta parameter emailAddresses

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.

@chanioxaris Shall we update the copy here ? (Happy to do it as part of another PR)
image

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.

In the case of Organization Invitations, only email addresses can be provided. Although the API error is used in general for the Allowlist/Blocklist feature

};

const removeInvalidEmails = (err: any) => {
if (!isClerkAPIResponseError(err)) {

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.

invalid email addresses will be return in meta.emailAddresses and we want to remove them from the text field despite the error code returned


const invalidEmails = new Set([
...(err.errors[0].meta?.emailAddresses ?? []),
...(err.errors[0].meta?.identifiers ?? []),

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.

👆

Comment thread packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx Outdated
…t for Organization Invitation

In invite members screen of the <OrganizationProfile /> component, consume
any invalid email addresses as they are returned in the API error and remove
them from the input automatically.
@chanioxaris
chanioxaris force-pushed the haris/org-257-improve-behavior-of-orgprofile-invite-members-screen branch from 86cc9c4 to 7397bed Compare October 13, 2023 19:14

@panteliselef panteliselef left a comment

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.

🔥

@chanioxaris
chanioxaris added this pull request to the merge queue Oct 16, 2023
Merged via the queue into main with commit a46d6fe Oct 16, 2023
@chanioxaris
chanioxaris deleted the haris/org-257-improve-behavior-of-orgprofile-invite-members-screen branch October 16, 2023 13:10
@clerk-cookie clerk-cookie mentioned this pull request Oct 16, 2023
@clerk-cookie

Copy link
Copy Markdown
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerk clerk locked as resolved and limited conversation to collaborators Oct 16, 2024
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.

5 participants