Skip to content

Commit

Permalink
fix(console,phrases): fix a batch of organization invitation console …
Browse files Browse the repository at this point in the history
…ui issues
  • Loading branch information
charIeszhao committed Apr 2, 2024
1 parent d1c41a2 commit 507a0e9
Show file tree
Hide file tree
Showing 27 changed files with 90 additions and 43 deletions.
2 changes: 1 addition & 1 deletion packages/console/src/assets/icons/invitation.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
flex-direction: column;
height: 100%;
min-height: 600px;
background: var(--color-surface-1);
background: var(--color-base);
align-items: center;
justify-content: center;
overflow-y: auto;
Expand All @@ -16,17 +16,11 @@
width: 540px;
padding: _.unit(20) _.unit(17.5);
gap: _.unit(6);
background: var(--color-bg-float);
background: var(--color-layer-1);
border-radius: 16px;
box-shadow: var(--shadow-1);
white-space: pre-wrap;

.icon {
width: 40px;
height: 40px;
flex-shrink: 0;
}

.title {
font: var(--font-headline-2);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import { OrganizationInvitationStatus, getTenantIdFromOrganizationId } from '@lo
import { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';

import Icon from '@/assets/icons/organization-preview.svg';
import OrganizationIcon from '@/assets/icons/organization-preview.svg';
import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
import { type TenantResponse, type InvitationListResponse } from '@/cloud/types/router';
import CreateTenantModal from '@/components/CreateTenantModal';
import TenantEnvTag from '@/components/TenantEnvTag';
import ThemedIcon from '@/components/ThemedIcon';
import { TenantsContext } from '@/contexts/TenantsProvider';
import Button from '@/ds-components/Button';
import Spacer from '@/ds-components/Spacer';
Expand All @@ -32,7 +33,7 @@ function InvitationList({ invitations }: Props) {
<div className={styles.description}>{t('invitation.find_tenants_description')}</div>
{invitations.map(({ id, organizationId, tenantName, tenantTag }) => (
<div key={id} className={styles.tenant}>
<Icon className={styles.icon} />
<ThemedIcon for={OrganizationIcon} size={40} />
<span className={styles.name}>{tenantName}</span>
<TenantEnvTag isAbbreviated className={styles.tag} tag={tenantTag} />
<Spacer />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,12 @@
.title {
display: block;
font: var(--font-body-2);
color: var(--color-text-link);
text-decoration: none;
@include _.text-ellipsis;

&.withLink {
color: var(--color-text-link);
}
}

.subtitle {
Expand Down
2 changes: 1 addition & 1 deletion packages/console/src/components/ItemPreview/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function ItemPreview({ title, subtitle, icon, to, size = 'default', suffix, toTa
<div className={styles.meta}>
{to && (
<Link
className={styles.title}
className={classNames(styles.title, styles.withLink)}
to={getTo(to)}
target={toTarget}
onClick={(event) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ $dropdown-item-height: 40px;
position: relative;
border: none;
background-color: transparent;
gap: _.unit(2);

&:hover {
cursor: pointer;
Expand All @@ -31,12 +32,14 @@ $dropdown-item-height: 40px;

.name {
font: var(--font-title-2);
margin-right: _.unit(1.5);
@include _.text-ellipsis;
}

.tag {
margin-right: _.unit(2);
.redDot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-on-error-container);
}

.arrowIcon {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ export default function TenantSelector() {
}}
>
<div className={styles.name}>{currentTenantInfo.name}</div>
<TenantEnvTag className={styles.tag} tag={currentTenantInfo.tag} />
<TenantEnvTag tag={currentTenantInfo.tag} />
{Boolean(pendingInvitations?.length) && <div className={styles.redDot} />}
<KeyboardArrowDown className={styles.arrowIcon} />
</div>
<Dropdown
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
flex-direction: column;
height: 100%;
min-height: 600px;
background: var(--color-surface-1);
background: var(--color-base);
align-items: center;
justify-content: center;
overflow-y: auto;
Expand All @@ -17,7 +17,7 @@
width: 540px;
padding: _.unit(35) _.unit(17.5);
gap: _.unit(6);
background: var(--color-bg-float);
background: var(--color-layer-1);
border-radius: 16px;
box-shadow: var(--shadow-1);
text-align: center;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useTranslation } from 'react-i18next';

import Logo from '@/assets/images/logo.svg';
import AppLoading from '@/components/AppLoading';
import Button from '@/ds-components/Button';
import useCurrentUser from '@/hooks/use-current-user';

Expand All @@ -12,9 +13,13 @@ type Props = {

function SwitchAccount({ onClickSwitch }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { user } = useCurrentUser();
const { user, isLoading } = useCurrentUser();
const { id, primaryEmail, username } = user ?? {};

if (isLoading) {
return <AppLoading />;
}

return (
<div className={styles.container}>
<div className={styles.wrapper}>
Expand Down
8 changes: 6 additions & 2 deletions packages/console/src/pages/AcceptInvitation/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ function AcceptInvitation() {
resetTenants(data);
navigateTenant(getTenantIdFromOrganizationId(organizationId));
})();
}, [cloudApi, error, invitation, navigateTenant, t]);
}, [cloudApi, error, invitation, navigateTenant, resetTenants, t]);

// No invitation returned, indicating the current signed-in user is not the invitee.
if (error?.status === 404) {
if (error?.status === 403) {
return (
<SwitchAccount
onClickSwitch={() => {
Expand All @@ -63,6 +63,10 @@ function AcceptInvitation() {
);
}

if (error?.status === 404) {
return <AppError errorMessage={t('invitation.invitation_not_found')} />;
}

if (invitation && invitation.status !== OrganizationInvitationStatus.Pending) {
return <AppError errorMessage={t('invitation.invalid_invitation_status')} />;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ReservedPlanId, TenantRole } from '@logto/schemas';
import { useContext, useMemo, useState } from 'react';
import { useContext, useEffect, useMemo, useState } from 'react';
import { Controller, FormProvider, useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -50,9 +50,16 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
control,
handleSubmit,
setError,
reset,
formState: { errors },
} = formMethods;

useEffect(() => {
return () => {
reset();
};
}, [isOpen, reset]);

const roleOptions: Array<Option<TenantRole>> = useMemo(
() => [
{ value: TenantRole.Admin, title: t('admin') },
Expand Down
10 changes: 5 additions & 5 deletions packages/console/src/pages/TenantSettings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@ function TenantSettings() {
<TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Settings}`}>
<DynamicT forKey="tenants.tabs.settings" />
</TabNavItem>
{isDevFeaturesEnabled && (
<TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Members}`}>
<DynamicT forKey="tenants.tabs.members" />
</TabNavItem>
)}
{canManageTenant && (
<TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Domains}`}>
<DynamicT forKey="tenants.tabs.domains" />
</TabNavItem>
)}
{isDevFeaturesEnabled && (
<TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Members}`}>
<DynamicT forKey="tenants.tabs.members" />
</TabNavItem>
)}
{!isDevTenant && canManageTenant && (
<>
<TabNavItem href={`/tenant-settings/${TenantSettingsTabs.Subscription}`}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ const invitation = {
find_tenants_description:
'Your email address may already be registered with multiple tenants. You can choose to join the existing ones or continue create a new one.',
create_new_tenant: 'Create a new tenant',
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
switch_account: 'Sign in to another account',
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const invitation = {
/** UNTRANSLATED */
create_new_tenant: 'Create a new tenant',
/** UNTRANSLATED */
email_not_match_title: 'You are currently signed in as\n{{email}}.',
email_not_match_title: 'You are currently signed in as\n{{email}}',
/** UNTRANSLATED */
email_not_match_description:
'You do not currently have access to this organization.\nPlease sign in with the correct account to accept the invitation and become a member of the organization.',
/** UNTRANSLATED */
switch_account: 'Sign in to another account',
/** UNTRANSLATED */
invalid_invitation_status: 'Invalid invitation. Please contact the administrator and try again.',
/** UNTRANSLATED */
invitation_not_found: 'Invitation not found. Please contact the administrator.',
};

export default Object.freeze(invitation);
Loading

0 comments on commit 507a0e9

Please sign in to comment.