yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Update syntax, improve more typing (#1439)

Browse Source 
* chore: <React.Fragment> to <>

* flow types
This commit is contained in:
Tom Moor
2020-08-09 09:48:04 -07:00
committed by GitHub
parent ead55442e0
commit e2bd03494d
55 changed files with 239 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/scenes/Collection.js
View File

@@ -121,7 +121,7 @@ class CollectionScene extends React.Component<Props> {
return (
<Actions align="center" justify="flex-end">
{can.update && (
<React.Fragment>
<>
<Action>
<InputSearch
placeholder="Search in collection…"
@@ -141,7 +141,7 @@ class CollectionScene extends React.Component<Props> {
</Tooltip>
</Action>
<Separator />
</React.Fragment>
</>
)}
<Action>
<CollectionMenu collection={this.collection} />
@@ -165,7 +165,7 @@ class CollectionScene extends React.Component<Props> {
return (
<CenteredContent>
{collection ? (
<React.Fragment>
<>
<PageTitle title={collection.name} />
{collection.isEmpty ? (
<Centered column>
@@ -211,7 +211,7 @@ class CollectionScene extends React.Component<Props> {
</Modal>
</Centered>
) : (
<React.Fragment>
<>
<Heading>
<CollectionIcon collection={collection} size={40} expanded />{" "}
{collection.name}
@@ -228,12 +228,12 @@ class CollectionScene extends React.Component<Props> {
)}
{hasPinnedDocuments && (
<React.Fragment>
<>
<Subheading>
<TinyPinIcon size={18} /> Pinned
</Subheading>
<DocumentList documents={pinnedDocuments} showPin />
</React.Fragment>
</>
)}
<Tabs>
@@ -296,18 +296,18 @@ class CollectionScene extends React.Component<Props> {
/>
</Route>
</Switch>
</React.Fragment>
</>
)}
{this.renderActions()}
</React.Fragment>
</>
) : (
<React.Fragment>
<>
<Heading>
<Mask height={35} />
</Heading>
<ListPlaceholder count={5} />
</React.Fragment>
</>
)}
</CenteredContent>
);

8
app/scenes/CollectionMembers/CollectionMembers.js
View File

@@ -125,7 +125,7 @@ class CollectionMembers extends React.Component<Props> {
return (
<Flex column>
{collection.private ? (
<React.Fragment>
<>
<HelpText>
Choose which groups and team members have access to view and edit
documents in the private <strong>{collection.name}</strong>{" "}
@@ -146,7 +146,7 @@ class CollectionMembers extends React.Component<Props> {
Add groups
</Button>
</span>
</React.Fragment>
</>
) : (
<HelpText>
The <strong>{collection.name}</strong> collection is accessible by
@@ -195,7 +195,7 @@ class CollectionMembers extends React.Component<Props> {
</GroupsWrap>
)}
{collection.private ? (
<React.Fragment>
<>
<span>
<Button
type="button"
@@ -208,7 +208,7 @@ class CollectionMembers extends React.Component<Props> {
</span>
<Subheading>Individual Members</Subheading>
</React.Fragment>
</>
) : (
<Subheading>Members</Subheading>
)}

4
app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
View File

@@ -30,7 +30,7 @@ const MemberListItem = ({
onRemove={onRemove}
onUpdate={onUpdate}
renderActions={({ openMembersModal }) => (
<React.Fragment>
<>
<Select
label="Permissions"
options={PERMISSIONS}
@@ -51,7 +51,7 @@ const MemberListItem = ({
<DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
</DropdownMenu>
</ButtonWrap>
</React.Fragment>
</>
)}
/>
);

8
app/scenes/CollectionMembers/components/MemberListItem.js
View File

@@ -37,17 +37,17 @@ const MemberListItem = ({
<ListItem
title={user.name}
subtitle={
<React.Fragment>
<>
{user.lastActiveAt ? (
<React.Fragment>
<>
Active <Time dateTime={user.lastActiveAt} /> ago
</React.Fragment>
</>
) : (
"Never signed in"
)}
{!user.lastActiveAt && <Badge>Invited</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
</React.Fragment>
</>
}
image={<Avatar src={user.avatarUrl} size={40} />}
actions={

8
app/scenes/CollectionMembers/components/UserListItem.js
View File

@@ -20,17 +20,17 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
title={user.name}
image={<Avatar src={user.avatarUrl} size={40} />}
subtitle={
<React.Fragment>
<>
{user.lastActiveAt ? (
<React.Fragment>
<>
Active <Time dateTime={user.lastActiveAt} /> ago
</React.Fragment>
</>
) : (
"Never signed in"
)}
{!user.lastActiveAt && <Badge>Invited</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
</React.Fragment>
</>
}
actions={
canEdit ? (

9
app/scenes/Document/components/DataLoader.js
View File

@@ -3,7 +3,7 @@ import invariant from "invariant";
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import * as React from "react";
import type { Location, RouterHistory, Match } from "react-router-dom";
import type { RouterHistory, Match } from "react-router-dom";
import { withRouter } from "react-router-dom";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
@@ -18,12 +18,13 @@ import DocumentComponent from "./Document";
import HideSidebar from "./HideSidebar";
import Loading from "./Loading";
import SocketPresence from "./SocketPresence";
import { type LocationWithState } from "types";
import { NotFoundError, OfflineError } from "utils/errors";
import { matchDocumentEdit, updateDocumentUrl } from "utils/routeHelpers";
type Props = {|
match: Match,
location: Location,
location: LocationWithState,
shares: SharesStore,
documents: DocumentsStore,
policies: PoliciesStore,
@@ -166,10 +167,10 @@ class DataLoader extends React.Component<Props> {
if (!document) {
return (
<React.Fragment>
<>
<Loading location={location} />
{this.isEditing && <HideSidebar ui={ui} />}
</React.Fragment>
</>
);
}

12
app/scenes/Document/components/Document.js
View File

@@ -375,7 +375,7 @@ class DocumentScene extends React.Component<Props> {
<Container justify="center" column auto>
{!readOnly && (
<React.Fragment>
<>
<Prompt
when={this.isDirty && !this.isUploading}
message={DISCARD_CHANGES}
@@ -384,7 +384,7 @@ class DocumentScene extends React.Component<Props> {
when={this.isUploading && !this.isDirty}
message={UPLOADING_WARNING}
/>
</React.Fragment>
</>
)}
{!isShare && (
<Header
@@ -427,12 +427,12 @@ class DocumentScene extends React.Component<Props> {
Deleted by {document.updatedBy.name}{" "}
<Time dateTime={document.deletedAt} /> ago
{document.permanentlyDeletedAt && (
<React.Fragment>
<>
<br />
This {document.noun} will be permanently deleted in{" "}
<Time dateTime={document.permanentlyDeletedAt} /> unless
restored.
</React.Fragment>
</>
)}
</Notice>
)}
@@ -473,12 +473,12 @@ class DocumentScene extends React.Component<Props> {
/>
</Flex>
{readOnly && !isShare && !revision && (
<React.Fragment>
<>
<MarkAsViewed document={document} />
<ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
<References document={document} />
</ReferencesWrapper>
</React.Fragment>
</>
)}
</MaxWidth>
</Container>

16
app/scenes/Document/components/Editor.js
View File

@@ -25,23 +25,23 @@ type Props = {
@observer
class DocumentEditor extends React.Component<Props> {
@observable activeLinkEvent: ?MouseEvent;
editor: ?Editor;
editor = React.createRef<typeof Editor>();
focusAtStart = () => {
if (this.editor) {
this.editor.focusAtStart();
if (this.editor.current) {
this.editor.current.focusAtStart();
}
};
focusAtEnd = () => {
if (this.editor) {
this.editor.focusAtEnd();
if (this.editor.current) {
this.editor.current.focusAtEnd();
}
};
getHeadings = () => {
if (this.editor) {
return this.editor.getHeadings();
if (this.editor.current) {
return this.editor.current.getHeadings();
}
return [];
@@ -89,7 +89,7 @@ class DocumentEditor extends React.Component<Props> {
/>
<DocumentMeta isDraft={isDraft} document={document} />
<Editor
ref={(ref) => (this.editor = ref)}
ref={this.editor}
autoFocus={title && !this.props.defaultValue}
placeholder="…the rest is up to you"
onHoverLink={this.handleLinkActive}

16
app/scenes/Document/components/Header.js
View File

@@ -162,7 +162,7 @@ class Header extends React.Component<Props> {
<BreadcrumbAndContents align="center" justify="flex-start">
<Breadcrumb document={document} />
{!isEditing && (
<React.Fragment>
<>
<Slash />
<Tooltip
tooltip={ui.tocVisible ? "Hide contents" : "Show contents"}
@@ -183,7 +183,7 @@ class Header extends React.Component<Props> {
small
/>
</Tooltip>
</React.Fragment>
</>
)}
</BreadcrumbAndContents>
{this.isScrolled && (
@@ -216,10 +216,10 @@ class Header extends React.Component<Props> {
<Tooltip
tooltip={
isPubliclyShared ? (
<React.Fragment>
<>
Anyone with the link <br />
can view this document
</React.Fragment>
</>
) : (
""
)
@@ -239,7 +239,7 @@ class Header extends React.Component<Props> {
</Action>
)}
{isEditing && (
<React.Fragment>
<>
<Action>
<Tooltip
tooltip="Save"
@@ -258,7 +258,7 @@ class Header extends React.Component<Props> {
</Button>
</Tooltip>
</Action>
</React.Fragment>
</>
)}
{canEdit && (
<Action>
@@ -330,7 +330,7 @@ class Header extends React.Component<Props> {
</Action>
)}
{!isEditing && (
<React.Fragment>
<>
<Separator />
<Action>
<DocumentMenu
@@ -340,7 +340,7 @@ class Header extends React.Component<Props> {
showPrint
/>
</Action>
</React.Fragment>
</>
)}
</Wrapper>
</Actions>

4
app/scenes/Document/components/KeyboardShortcutsButton.js
View File

@@ -26,7 +26,7 @@ class KeyboardShortcutsButton extends React.Component<Props> {
render() {
return (
<React.Fragment>
<>
<Modal
isOpen={this.keyboardShortcutsOpen}
onRequestClose={this.handleCloseKeyboardShortcuts}
@@ -44,7 +44,7 @@ class KeyboardShortcutsButton extends React.Component<Props> {
<KeyboardIcon />
</Button>
</Tooltip>
</React.Fragment>
</>
);
}
}

4
app/scenes/Document/components/Loading.js
View File

@@ -1,13 +1,13 @@
// @flow
import * as React from "react";
import type { Location } from "react-router-dom";
import CenteredContent from "components/CenteredContent";
import LoadingPlaceholder from "components/LoadingPlaceholder";
import PageTitle from "components/PageTitle";
import Container from "./Container";
import type { LocationWithState } from "types";
type Props = {|
location: Location,
location: LocationWithState,
|};
export default function Loading({ location }: Props) {

4
app/scenes/DocumentShare.js
View File

@@ -80,7 +80,7 @@ class DocumentShare extends React.Component<Props> {
.
</HelpText>
{canPublish && (
<React.Fragment>
<>
<Switch
id="published"
label="Publish to internet"
@@ -96,7 +96,7 @@ class DocumentShare extends React.Component<Props> {
: "Only team members with access can view this document"}
</PrivacyText>
</Privacy>
</React.Fragment>
</>
)}
<br />
<Input

4
app/scenes/GroupMembers/GroupMembers.js
View File

@@ -62,7 +62,7 @@ class GroupMembers extends React.Component<Props> {
return (
<Flex column>
{can.update ? (
<React.Fragment>
<>
<HelpText>
Add and remove team members in the <strong>{group.name}</strong>{" "}
group. Adding people to the group will give them access to any
@@ -78,7 +78,7 @@ class GroupMembers extends React.Component<Props> {
Add people…
</Button>
</span>
</React.Fragment>
</>
) : (
<HelpText>
Listing team members in the <strong>{group.name}</strong> group.

8
app/scenes/GroupMembers/components/GroupMemberListItem.js
View File

@@ -27,17 +27,17 @@ const GroupMemberListItem = ({
<ListItem
title={user.name}
subtitle={
<React.Fragment>
<>
{user.lastActiveAt ? (
<React.Fragment>
<>
Active <Time dateTime={user.lastActiveAt} /> ago
</React.Fragment>
</>
) : (
"Never signed in"
)}
{!user.lastActiveAt && <Badge>Invited</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
</React.Fragment>
</>
}
image={<Avatar src={user.avatarUrl} size={40} />}
actions={

8
app/scenes/GroupMembers/components/UserListItem.js
View File

@@ -20,17 +20,17 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
title={user.name}
image={<Avatar src={user.avatarUrl} size={32} />}
subtitle={
<React.Fragment>
<>
{user.lastActiveAt ? (
<React.Fragment>
<>
Active <Time dateTime={user.lastActiveAt} /> ago
</React.Fragment>
</>
) : (
"Never signed in"
)}
{!user.lastActiveAt && <Badge>Invited</Badge>}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
</React.Fragment>
</>
}
actions={
canEdit ? (

4
app/scenes/GroupNew.js
View File

@@ -51,7 +51,7 @@ class GroupNew extends React.Component<Props> {
render() {
return (
<React.Fragment>
<>
<form onSubmit={this.handleSubmit}>
<HelpText>
Groups are for organizing your team. They work best when centered
@@ -82,7 +82,7 @@ class GroupNew extends React.Component<Props> {
>
<GroupMembers group={this.group} />
</Modal>
</React.Fragment>
</>
);
}
}

4
app/scenes/Invite.js
View File

@@ -111,10 +111,10 @@ class Invite extends React.Component<Props> {
Invite team members to join your knowledge base. They will need to
sign in with {team.signinMethods}.{" "}
{can.update && (
<React.Fragment>
<>
As an admin you can also{" "}
<Link to="/settings/security">enable email sign-in</Link>.
</React.Fragment>
</>
)}
</HelpText>
)}

4
app/scenes/Login/Notices.js
View File

@@ -8,7 +8,7 @@ type Props = {
export default function Notices({ notice }: Props) {
return (
<React.Fragment>
<>
{notice === "google-hd" && (
<NoticeAlert>
Sorry, Google sign in cannot be used with a personal email. Please try
@@ -51,6 +51,6 @@ export default function Notices({ notice }: Props) {
please contact a team admin.
</NoticeAlert>
)}
</React.Fragment>
</>
);
}

4
app/scenes/Login/Service.js
View File

@@ -72,7 +72,7 @@ class Service extends React.Component<Props, State> {
onSubmit={this.handleSubmitEmail}
>
{this.state.showEmailSignin ? (
<React.Fragment>
<>
<InputLarge
type="email"
name="email"
@@ -87,7 +87,7 @@ class Service extends React.Component<Props, State> {
<ButtonLarge type="submit" disabled={this.state.isSubmitting}>
Sign In →
</ButtonLarge>
</React.Fragment>
</>
) : (
<ButtonLarge type="submit" icon={<EmailIcon />} fullwidth>
Continue with Email

4
app/scenes/Login/index.js
View File

@@ -125,12 +125,12 @@ class Login extends React.Component<Props, State> {
{...defaultService}
/>
{hasMultipleServices && (
<React.Fragment>
<>
<Note>
You signed in with {defaultService.name} last time.
</Note>
<Or />
</React.Fragment>
</>
)}
</React.Fragment>
)}

2
app/scenes/Search/Search.js
View File

@@ -46,7 +46,7 @@ type Props = {
@observer
class Search extends React.Component<Props> {
firstDocument: ?DocumentPreview;
firstDocument: ?typeof DocumentPreview;
@observable
query: string = decodeURIComponent(this.props.match.params.term || "");

4
app/scenes/Settings/Details.js
View File

@@ -117,7 +117,7 @@ class Details extends React.Component<Props> {
short
/>
{env.SUBDOMAINS_ENABLED && (
<React.Fragment>
<>
<Input
label="Subdomain"
name="subdomain"
@@ -134,7 +134,7 @@ class Details extends React.Component<Props> {
<strong>{this.subdomain}.getoutline.com</strong>
</HelpText>
)}
</React.Fragment>
</>
)}
<Button type="submit" disabled={isSaving || !this.isValid}>
{isSaving ? "Saving…" : "Save"}

4
app/scenes/Settings/Events.js
View File

@@ -84,14 +84,14 @@ class Events extends React.Component<Props> {
{showLoading ? (
<ListPlaceholder count={5} />
) : (
<React.Fragment>
<>
{events.orderedData.map((event) => (
<EventListItem event={event} />
))}
{this.allowLoadMore && (
<Waypoint key={this.offset} onEnter={this.loadMoreResults} />
)}
</React.Fragment>
</>
)}
</List>
</CenteredContent>

4
app/scenes/Settings/People.js
View File

@@ -104,12 +104,12 @@ class People extends React.Component<Props> {
</Tab>
{can.invite && (
<React.Fragment>
<>
<Separator />
<Tab to="/settings/people/invited" exact>
Invited
</Tab>
</React.Fragment>
</>
)}
</Tabs>
<PaginatedList

100
app/scenes/Settings/components/EventListItem.js
View File

@@ -16,121 +16,119 @@ const description = (event) => {
switch (event.name) {
case "api_keys.create":
return (
<React.Fragment>
<>
Created the API token <strong>{event.data.name}</strong>
</React.Fragment>
</>
);
case "api_keys.delete":
return (
<React.Fragment>
<>
Revoked the API token <strong>{event.data.name}</strong>
</React.Fragment>
</>
);
case "teams.create":
return "Created the team";
case "shares.create":
case "shares.revoke":
return (
<React.Fragment>
<>
{capitalize(event.verbPastTense)} a{" "}
<Link to={`/share/${event.modelId || ""}`}>share link</Link> to the{" "}
<Link to={`/doc/${event.documentId}`}>{event.data.name}</Link>{" "}
document
</React.Fragment>
</>
);
case "shares.update":
return (
<React.Fragment>
<>
{event.data.published ? (
<React.Fragment>
<>
Published a document{" "}
<Link to={`/share/${event.modelId || ""}`}>share link</Link>
</React.Fragment>
</>
) : (
<React.Fragment>
<>
Unpublished a document{" "}
<Link to={`/share/${event.modelId || ""}`}>share link</Link>
</React.Fragment>
</>
)}
</React.Fragment>
</>
);
case "users.create":
return (
<React.Fragment>{event.data.name} created an account</React.Fragment>
);
return <>{event.data.name} created an account</>;
case "users.invite":
return (
<React.Fragment>
<>
{capitalize(event.verbPastTense)} {event.data.name} (
<a href={`mailto:${event.data.email || ""}`}>
{event.data.email || ""}
</a>
)
</React.Fragment>
</>
);
case "users.suspend":
return (
<React.Fragment>
<>
Suspended <strong>{event.data.name}’s</strong> account
</React.Fragment>
</>
);
case "users.activate":
return (
<React.Fragment>
<>
Unsuspended <strong>{event.data.name}’s</strong> account
</React.Fragment>
</>
);
case "users.promote":
return (
<React.Fragment>
<>
Made <strong>{event.data.name}</strong> an admin
</React.Fragment>
</>
);
case "users.demote":
return (
<React.Fragment>
<>
Made <strong>{event.data.name}</strong> a member
</React.Fragment>
</>
);
case "users.delete":
return "Deleted their account";
case "groups.create":
return (
<React.Fragment>
<>
Created the group <strong>{event.data.name}</strong>
</React.Fragment>
</>
);
case "groups.update":
return (
<React.Fragment>
<>
Update the group <strong>{event.data.name}</strong>
</React.Fragment>
</>
);
case "groups.delete":
return (
<React.Fragment>
<>
Deleted the group <strong>{event.data.name}</strong>
</React.Fragment>
</>
);
case "collections.add_user":
case "collections.add_group":
return (
<React.Fragment>
<>
Granted <strong>{event.data.name}</strong> access to a{" "}
<Link to={`/collections/${event.collectionId || ""}`}>
collection
</Link>
</React.Fragment>
</>
);
case "collections.remove_user":
case "collections.remove_group":
return (
<React.Fragment>
<>
Revoked <strong>{event.data.name}</strong> access to a{" "}
<Link to={`/collections/${event.collectionId || ""}`}>
collection
</Link>
</React.Fragment>
</>
);
default:
}
@@ -138,60 +136,60 @@ const description = (event) => {
if (event.documentId) {
if (event.name === "documents.delete") {
return (
<React.Fragment>
<>
Deleted the <strong>{event.data.title}</strong> document
</React.Fragment>
</>
);
}
if (event.name === "documents.create") {
return (
<React.Fragment>
<>
{capitalize(event.verbPastTense)} the{" "}
<Link to={`/doc/${event.documentId}`}>
{event.data.title || "Untitled"}
</Link>{" "}
document{" "}
{event.data.templateId && (
<React.Fragment>
<>
from a <Link to={`/doc/${event.data.templateId}`}>template</Link>
</React.Fragment>
</>
)}
</React.Fragment>
</>
);
}
return (
<React.Fragment>
<>
{capitalize(event.verbPastTense)} the{" "}
<Link to={`/doc/${event.documentId}`}>
{event.data.title || "Untitled"}
</Link>{" "}
document
</React.Fragment>
</>
);
}
if (event.collectionId) {
if (event.name === "collections.delete") {
return (
<React.Fragment>
<>
Deleted the <strong>{event.data.name}</strong> collection
</React.Fragment>
</>
);
}
return (
<React.Fragment>
<>
{capitalize(event.verbPastTense)} the{" "}
<Link to={`/collections/${event.collectionId || ""}`}>
{event.data.name}
</Link>{" "}
collection
</React.Fragment>
</>
);
}
if (event.userId) {
return (
<React.Fragment>
<>
{capitalize(event.verbPastTense)} the user {event.data.name}
</React.Fragment>
</>
);
}
return "";
@@ -204,10 +202,10 @@ const EventListItem = ({ event }: Props) => {
title={event.actor.name}
image={<Avatar src={event.actor.avatarUrl} size={32} />}
subtitle={
<React.Fragment>
<>
{description(event)} <Time dateTime={event.createdAt} /> ago &middot;{" "}
<strong>{event.name}</strong>
</React.Fragment>
</>
}
actions={
event.actorIpAddress ? (

1
app/scenes/Settings/components/NotificationListItem.js
View File

@@ -16,7 +16,6 @@ const NotificationListItem = ({
setting,
title,
event,
enabled,
onChange,
disabled,
description,

4
app/scenes/Settings/components/ShareListItem.js
View File

@@ -15,10 +15,10 @@ const ShareListItem = ({ share }: Props) => {
key={share.id}
title={share.documentTitle}
subtitle={
<React.Fragment>
<>
Shared <Time dateTime={share.createdAt} /> ago by{" "}
{share.createdBy.name}
</React.Fragment>
</>
}
actions={<ShareMenu share={share} />}
/>

2
app/scenes/Settings/components/TokenListItem.js
View File

@@ -6,7 +6,7 @@ import ListItem from "components/List/Item";
type Props = {
token: ApiKey,
onDelete: (tokenId: string) => void,
onDelete: (tokenId: string) => Promise<void>,
};
const TokenListItem = ({ token, onDelete }: Props) => {

12
app/scenes/Settings/components/UserListItem.js
View File

@@ -35,7 +35,7 @@ class UserListItem extends React.Component<Props> {
<ListItem
title={<Title onClick={this.handleOpenProfile}>{user.name}</Title>}
image={
<React.Fragment>
<>
<Avatar
src={user.avatarUrl}
size={40}
@@ -46,21 +46,21 @@ class UserListItem extends React.Component<Props> {
isOpen={this.profileOpen}
onRequestClose={this.handleCloseProfile}
/>
</React.Fragment>
</>
}
subtitle={
<React.Fragment>
<>
{user.email ? `${user.email} · ` : undefined}
{user.lastActiveAt ? (
<React.Fragment>
<>
Active <Time dateTime={user.lastActiveAt} /> ago
</React.Fragment>
</>
) : (
"Invited"
)}
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
{user.isSuspended && <Badge>Suspended</Badge>}
</React.Fragment>
</>
}
actions={showMenu ? <UserMenu user={user} /> : undefined}
/>