Skip to content
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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(clerk-js): Remove custom Alert from invitation page and display error as global #1903

Merged
merged 2 commits into from
Oct 18, 2023
Merged

chore(clerk-js): Remove custom Alert from invitation page and display error as global #1903

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
72be957
chore(clerk-js): Remove custom Alert from invitation page and display…
panteliselef Oct 17, 2023
ee5f7d0
chore(clerk-js): Remove custom Alert from invitation page and display…
panteliselef Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shiny-experts-notice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/clerk-js': patch
---

Remove custom Alert from invitation page and display it as a global error instead (at the top of the component).
138 changes: 62 additions & 76 deletions packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import React from 'react';

import { Flex, Text } from '../../customizables';
import {
Alert,
Form,
FormButtonContainer,
Select,
Expand Down Expand Up @@ -34,7 +33,6 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
const card = useCardState();
const { t, locale } = useLocalizations();
const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = React.useState(false);
const [localizedEmails, setLocalizedEmails] = React.useState<string | null>(null);

if (!organization) {
return null;
Expand All @@ -45,7 +43,6 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
const roles: Array<{ label: string; value: MembershipRole }> = [
{ label: t(roleLocalizationKey('admin')), value: 'admin' },
{ label: t(roleLocalizationKey('basic_member')), value: 'basic_member' },
// { label: t(roleLocalizationKey('guest_member')), value: 'guest_member' },
];

const emailAddressField = useFormControl('emailAddress', '', {
Expand Down Expand Up @@ -75,8 +72,7 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {

const roleField = useFormControl('role', 'basic_member', {
options: roles,
// label: localizationKeys('formFieldLabel__firstName'),
// placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),
// TODO: localize this
Copy link
Member

Choose a reason for hiding this comment

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

What's the level of effort to localize these values? Do we have a task for it?

Copy link
Member Author

Choose a reason for hiding this comment

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

The value is already localized, i updated the code to reflect the correct state.

label: 'Role',
placeholder: '',
});
Expand All @@ -95,12 +91,15 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {

if (isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'duplicate_record') {
const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses || [];

// Create a localized list of email addresses
const localizedList = createListFormat(unlocalizedEmailsList, locale);
setLocalizedEmails(localizedList);
card.setError(
t(
localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {
// Create a localized list of email addresses
email_addresses: createListFormat(unlocalizedEmailsList, locale),
}),
),
);
} else {
setLocalizedEmails(null);
handleError(err, [], card.setError);
}
});
Expand All @@ -113,74 +112,61 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
};

return (
<>
{localizedEmails && (
<Alert
variant='danger'
align='start'
title={localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {
email_addresses: localizedEmails,
})}
sx={{ border: 0 }}
/>
)}
<Form.Root onSubmit={onSubmit}>
<Form.ControlRow elementId={emailAddressField.id}>
<Flex
direction='col'
gap={2}
sx={{ width: '100%' }}
>
<Text localizationKey={localizationKeys('formFieldLabel__emailAddresses')} />

<Text
localizationKey={localizationKeys('formFieldInputPlaceholder__emailAddresses')}
colorScheme='neutral'
sx={t => ({ fontSize: t.fontSizes.$xs })}
/>

<Form.Root onSubmit={onSubmit}>
<Form.ControlRow elementId={emailAddressField.id}>
<Flex
direction='col'
gap={2}
<TagInput
{...restEmailAddressProps}
autoFocus
validate={isEmail}
sx={{ width: '100%' }}
>
<Text localizationKey={localizationKeys('formFieldLabel__emailAddresses')} />

<Text
localizationKey={localizationKeys('formFieldInputPlaceholder__emailAddresses')}
colorScheme='neutral'
sx={t => ({ fontSize: t.fontSizes.$xs })}
/>

<TagInput
{...restEmailAddressProps}
autoFocus
validate={isEmail}
sx={{ width: '100%' }}
validateUnsubmittedEmail={validateUnsubmittedEmail}
/>
</Flex>
</Form.ControlRow>
<Form.ControlRow elementId={roleField.id}>
<Flex
direction='col'
gap={2}
>
<Text localizationKey={localizationKeys('formFieldLabel__role')} />
{/*// @ts-expect-error */}
<Select
elementId='role'
{...roleField.props}
onChange={option => roleField.setValue(option.value)}
>
<SelectButton sx={t => ({ width: t.sizes.$48, justifyContent: 'space-between', display: 'flex' })}>
{roleField.props.options?.find(o => o.value === roleField.value)?.label}
</SelectButton>
<SelectOptionList sx={t => ({ minWidth: t.sizes.$48 })} />
</Select>
</Flex>
</Form.ControlRow>
<FormButtonContainer>
<Form.SubmitButton
block={false}
isDisabled={!canSubmit}
localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}
validateUnsubmittedEmail={validateUnsubmittedEmail}
/>
<Form.ResetButton
localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}
block={false}
onClick={onReset}
/>
</FormButtonContainer>
</Form.Root>
</>
</Flex>
</Form.ControlRow>
<Form.ControlRow elementId={roleField.id}>
<Flex
direction='col'
gap={2}
>
<Text localizationKey={localizationKeys('formFieldLabel__role')} />
{/* @ts-expect-error */}
Copy link
Member

Choose a reason for hiding this comment

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

❓ Why are we expecting an error? Can we address it or add a description?

Copy link
Member Author

Choose a reason for hiding this comment

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

Added the comments, stuff like that is what i am to solve when refactoring our forms

<Select
elementId='role'
{...roleField.props}
onChange={option => roleField.setValue(option.value)}
>
<SelectButton sx={t => ({ width: t.sizes.$48, justifyContent: 'space-between', display: 'flex' })}>
{roleField.props.options?.find(o => o.value === roleField.value)?.label}
</SelectButton>
<SelectOptionList sx={t => ({ minWidth: t.sizes.$48 })} />
</Select>
</Flex>
</Form.ControlRow>
<FormButtonContainer>
<Form.SubmitButton
block={false}
isDisabled={!canSubmit}
localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}
/>
<Form.ResetButton
localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}
block={false}
onClick={onReset}
/>
</FormButtonContainer>
</Form.Root>
);
};
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const useCardState = () => {
const { translateError } = useLocalizations();

const setIdle = (metadata?: Metadata) => setState(s => ({ ...s, status: 'idle', metadata }));
const setError = (metadata: ClerkRuntimeError | ClerkAPIError | Metadata) =>
const setError = (metadata: ClerkRuntimeError | ClerkAPIError | Metadata | string) =>
setState(s => ({ ...s, error: translateError(metadata) }));
const setLoading = (metadata?: Metadata) => setState(s => ({ ...s, status: 'loading', metadata }));
const runAsync = async <T = unknown,>(cb: Promise<T> | (() => Promise<T>), metadata?: Metadata) => {
Expand Down
Loading