Skip to content

Commit 20ad35f

Browse files
louischan-ourskylouischan-oursky
committed
Introduce AccountStatusMessageBar
1 parent 7a8bb8c commit 20ad35f

File tree

3 files changed

+98
-53
lines changed

3 files changed

+98
-53
lines changed

‎portal/src/graphql/adminapi/UserDetailsAccountStatus.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1756,4 +1756,89 @@ export function AccountStatusBadge(
17561756
);
17571757
}
17581758

1759+
export interface AccountStatusMessageBarProps {
1760+
accountStatus: AccountStatus;
1761+
}
1762+
1763+
export function AccountStatusMessageBar(
1764+
props: AccountStatusMessageBarProps
1765+
): React.ReactElement | null {
1766+
const now = new Date();
1767+
const { accountStatus } = props;
1768+
const { locale } = useContext(Context);
1769+
1770+
let message = null;
1771+
if (accountStatus.deleteAt != null) {
1772+
message = (
1773+
<FormattedMessage
1774+
id="AccountStatusMessageBar.scheduled-deletion"
1775+
values={{
1776+
date: formatDatetime(locale, accountStatus.deleteAt) ?? "",
1777+
}}
1778+
/>
1779+
);
1780+
} else if (accountStatus.isAnonymized) {
1781+
message = <FormattedMessage id="AccountStatusMessageBar.anonymized" />;
1782+
} else if (accountStatus.anonymizeAt != null) {
1783+
message = (
1784+
<FormattedMessage
1785+
id="AccountStatusMessageBar.scheduled-anonymization"
1786+
values={{
1787+
date: formatDatetime(locale, accountStatus.anonymizeAt) ?? "",
1788+
}}
1789+
/>
1790+
);
1791+
} else if (
1792+
accountStatus.accountValidUntil != null &&
1793+
now.getTime() >= new Date(accountStatus.accountValidUntil).getTime()
1794+
) {
1795+
message = (
1796+
<FormattedMessage
1797+
id="AccountStatusMessageBar.account-valid-until"
1798+
values={{
1799+
date: formatDatetime(locale, accountStatus.accountValidUntil) ?? "",
1800+
}}
1801+
/>
1802+
);
1803+
} else if (
1804+
accountStatus.accountValidFrom != null &&
1805+
now.getTime() < new Date(accountStatus.accountValidFrom).getTime()
1806+
) {
1807+
message = (
1808+
<FormattedMessage
1809+
id="AccountStatusMessageBar.account-valid-from"
1810+
values={{
1811+
date: formatDatetime(locale, accountStatus.accountValidFrom) ?? "",
1812+
}}
1813+
/>
1814+
);
1815+
} else if (
1816+
accountStatus.isDisabled &&
1817+
accountStatus.temporarilyDisabledUntil != null
1818+
) {
1819+
message = (
1820+
<FormattedMessage
1821+
id="AccountStatusMessageBar.disabled-tempoararily"
1822+
values={{
1823+
date:
1824+
formatDatetime(locale, accountStatus.temporarilyDisabledUntil) ??
1825+
"",
1826+
}}
1827+
/>
1828+
);
1829+
} else if (accountStatus.isDisabled) {
1830+
message = (
1831+
<FormattedMessage id="AccountStatusMessageBar.disabled-indefinitely" />
1832+
);
1833+
}
1834+
1835+
if (message == null) {
1836+
return null;
1837+
}
1838+
1839+
return (
1840+
<MessageBar messageBarType={MessageBarType.warning}>{message}</MessageBar>
1841+
);
1842+
}
1843+
17591844
export default UserDetailsAccountStatus;

‎portal/src/graphql/adminapi/UserDetailsScreen.tsx‎

Lines changed: 5 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useMemo, useCallback, useContext } from "react";
1+
import React, { useMemo, useCallback } from "react";
22
import { useParams } from "react-router-dom";
33
import { PivotItem, MessageBar, MessageBarType, IStyle } from "@fluentui/react";
44
import { AGPivot } from "../../components/common/AGPivot";
@@ -36,14 +36,15 @@ import {
3636
OAuthClientConfig,
3737
} from "../../types";
3838
import { jsonPointerToString, parseJSONPointer } from "../../util/jsonpointer";
39-
import { formatDateOnly } from "../../util/formatDateOnly";
4039
import { extractRawID } from "../../util/graphql";
4140

4241
import styles from "./UserDetailsScreen.module.css";
4342
import { makeInvariantViolatedErrorParseRule } from "../../error/parse";
4443
import UserDetailsScreenGroupListContainer from "../../components/roles-and-groups/list/UserDetailsScreenGroupListContainer";
4544
import UserDetailsScreenRoleListContainer from "../../components/roles-and-groups/list/UserDetailsScreenRoleListContainer";
46-
import UserDetailsAccountStatus from "./UserDetailsAccountStatus";
45+
import UserDetailsAccountStatus, {
46+
AccountStatusMessageBar,
47+
} from "./UserDetailsAccountStatus";
4748

4849
interface UserDetailsProps {
4950
form: SimpleFormModel<FormState>;
@@ -454,52 +455,6 @@ const UserDetails: React.VFC<UserDetailsProps> = function UserDetails(
454455
);
455456
};
456457

457-
interface WarnScheduledDeletionProps {
458-
user: UserQueryNodeFragment;
459-
}
460-
461-
function WarnScheduledDeletion(props: WarnScheduledDeletionProps) {
462-
const { user } = props;
463-
const { locale } = useContext(Context);
464-
if (user.deleteAt == null) {
465-
return null;
466-
}
467-
468-
return (
469-
<MessageBar messageBarType={MessageBarType.warning}>
470-
<FormattedMessage
471-
id="UserDetailsScreen.scheduled-deletion"
472-
values={{
473-
date: formatDateOnly(locale, user.deleteAt) ?? "",
474-
}}
475-
/>
476-
</MessageBar>
477-
);
478-
}
479-
480-
interface WarnScheduledAnonymizationProps {
481-
user: UserQueryNodeFragment;
482-
}
483-
484-
function WarnScheduledAnonymization(props: WarnScheduledAnonymizationProps) {
485-
const { user } = props;
486-
const { locale } = useContext(Context);
487-
if (user.anonymizeAt == null) {
488-
return null;
489-
}
490-
491-
return (
492-
<MessageBar messageBarType={MessageBarType.warning}>
493-
<FormattedMessage
494-
id="UserDetailsScreen.scheduled-anonymization"
495-
values={{
496-
date: formatDateOnly(locale, user.anonymizeAt) ?? "",
497-
}}
498-
/>
499-
</MessageBar>
500-
);
501-
}
502-
503458
interface UserDetailsScreenContentProps {
504459
user: UserQueryNodeFragment;
505460
refreshUser?: () => void;
@@ -571,8 +526,7 @@ const UserDetailsScreenContent: React.VFC<UserDetailsScreenContentProps> =
571526
hideFooterComponent={true}
572527
messageBar={
573528
<>
574-
<WarnScheduledDeletion user={user} />
575-
<WarnScheduledAnonymization user={user} />
529+
<AccountStatusMessageBar accountStatus={user} />
576530
</>
577531
}
578532
>

‎portal/src/locale-data/en.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -352,8 +352,6 @@
352352
"UserDetailsScreen.disable-user": "Disable User",
353353
"UserDetailsScreen.cancel-removal": "Cancel Removal",
354354
"UserDetailsScreen.cancel-anonymization": "Cancel Anonymization",
355-
"UserDetailsScreen.scheduled-deletion": "This user is disabled and scheduled to be removed on {date}",
356-
"UserDetailsScreen.scheduled-anonymization": "This user is disabled and scheduled to be anonymized on {date}",
357355
"UserDetailsScreen.user-account-security.siwe-enabled": "This tab is not available when the user signs in with Ethereum.",
358356
"UserDetailsScreen.user-anonymized": "User data erased",
359357
"UserDetailsScreen.user-anonymized.message": "This user is anonymized and all data are erased.",
@@ -494,6 +492,14 @@
494492
"AccountStatusBadge.scheduled-deletion": "Removal scheduled",
495493
"AccountStatusBadge.anonymized": "Anonymized",
496494

495+
"AccountStatusMessageBar.scheduled-deletion": "This user is disabled and scheduled to be removed on {date}",
496+
"AccountStatusMessageBar.anonymized": "This user is anonymized",
497+
"AccountStatusMessageBar.scheduled-anonymization": "This user is disabled and scheduled to be anonymized on {date}",
498+
"AccountStatusMessageBar.account-valid-from": "This user is scheduled to become valid on {date}",
499+
"AccountStatusMessageBar.account-valid-until": "This user is outside valid period and has been invalid since {date}",
500+
"AccountStatusMessageBar.disabled-tempoararily": "This user is disabled until {date}",
501+
"AccountStatusMessageBar.disabled-indefinitely": "This user is disabled indefinitely",
502+
497503
"Add2FAScreen.title.phone": "Add 2FA Phone",
498504
"Add2FAScreen.title.email": "Add 2FA Email",
499505
"Add2FAScreen.title.password": "Add 2FA Password",

0 commit comments

Comments
 (0)