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

chanioxaris · 2023-10-12T09:28:38Z

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

Packages affected

changeset-bot · 2023-10-12T09:28:42Z

🦋 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

dimkl · 2023-10-12T09:54:37Z

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

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


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

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

dimkl · 2023-10-12T09:57:07Z

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

        } else {
          setLocalizedEmails(null);
          handleError(err, [], card.setError);
        }
      });
  };

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


❓ 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?

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

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

panteliselef · 2023-10-12T10:52:22Z

packages/types/src/api.ts

@@ -9,6 +9,7 @@ export interface ClerkAPIError {
    paramName?: string;
    sessionId?: string;
    emailAddresses?: string[];
+    identifiers?: string[];


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

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

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

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

panteliselef · 2023-10-12T10:55:23Z

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

        } else {
          setLocalizedEmails(null);
          handleError(err, [], card.setError);
        }
      });
  };

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


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

panteliselef · 2023-10-12T10:55:40Z

packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

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


packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx

…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.

panteliselef

🔥

clerk-cookie · 2024-10-16T00:01:40Z

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.

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

clerk-cookie added types clerk-js labels Oct 12, 2023

dimkl approved these changes Oct 12, 2023

View reviewed changes

dimkl reviewed Oct 12, 2023

View reviewed changes

panteliselef reviewed Oct 12, 2023

View reviewed changes

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

chanioxaris requested review from dimkl and panteliselef October 13, 2023 19:14

panteliselef approved these changes Oct 16, 2023

View reviewed changes

desiprisg approved these changes Oct 16, 2023

View reviewed changes

chanioxaris added this pull request to the merge queue Oct 16, 2023

Merged via the queue into main with commit a46d6fe Oct 16, 2023
11 of 12 checks passed

chanioxaris deleted the haris/org-257-improve-behavior-of-orgprofile-invite-members-screen branch October 16, 2023 13:10

clerk-cookie mentioned this pull request Oct 16, 2023

Version Packages #1867

Merged

clerk locked as resolved and limited conversation to collaborators Oct 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

chanioxaris commented Oct 12, 2023 •

edited

Loading

changeset-bot bot commented Oct 12, 2023 •

edited

Loading

dimkl Oct 12, 2023

panteliselef Oct 12, 2023

chanioxaris Oct 13, 2023

dimkl Oct 12, 2023

panteliselef Oct 12, 2023

chanioxaris Oct 13, 2023

panteliselef Oct 12, 2023

chanioxaris Oct 13, 2023

panteliselef Oct 16, 2023

chanioxaris Oct 16, 2023

panteliselef Oct 12, 2023

panteliselef Oct 12, 2023

panteliselef left a comment

clerk-cookie commented Oct 16, 2024

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

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

Conversation

chanioxaris commented Oct 12, 2023 • edited Loading

Description

Before

After

Checklist

Type of change

Packages affected

changeset-bot bot commented Oct 12, 2023 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

panteliselef left a comment

Choose a reason for hiding this comment

clerk-cookie commented Oct 16, 2024

chanioxaris commented Oct 12, 2023 •

edited

Loading

changeset-bot bot commented Oct 12, 2023 •

edited

Loading