import { Button } from "@humansignal/ui";
|
import { useCallback, useMemo, useRef, useState } from "react";
|
import { useUpdatePageTitle } from "@humansignal/core";
|
import { HeidiTips } from "../../../components/HeidiTips/HeidiTips";
|
import { modal } from "../../../components/Modal/Modal";
|
import { Space } from "../../../components/Space/Space";
|
import { cn } from "../../../utils/bem";
|
import { FF_AUTH_TOKENS, FF_LSDV_E_297, isFF } from "../../../utils/feature-flags";
|
import "./PeopleInvitation.scss";
|
import { PeopleList } from "./PeopleList";
|
import "./PeoplePage.scss";
|
import { TokenSettingsModal } from "@humansignal/app-common/blocks/TokenSettingsModal";
|
import { IconPlus } from "@humansignal/icons";
|
import { useToast } from "@humansignal/ui";
|
import { InviteLink } from "./InviteLink";
|
import { SelectedUser } from "./SelectedUser";
|
|
export const PeoplePage = () => {
|
const apiSettingsModal = useRef();
|
const toast = useToast();
|
const [selectedUser, setSelectedUser] = useState(null);
|
const [invitationOpen, setInvitationOpen] = useState(false);
|
|
useUpdatePageTitle("人员");
|
|
const selectUser = useCallback(
|
(user) => {
|
setSelectedUser(user);
|
|
localStorage.setItem("selectedUser", user?.id);
|
},
|
[setSelectedUser],
|
);
|
|
const apiTokensSettingsModalProps = useMemo(
|
() => ({
|
title: "API 令牌设置",
|
style: { width: 480 },
|
body: () => (
|
<TokenSettingsModal
|
onSaved={() => {
|
toast.show({ message: "API 令牌设置已保存" });
|
apiSettingsModal.current?.close();
|
}}
|
/>
|
),
|
}),
|
[],
|
);
|
|
const showApiTokenSettingsModal = useCallback(() => {
|
apiSettingsModal.current = modal(apiTokensSettingsModalProps);
|
__lsa("organization.token_settings");
|
}, [apiTokensSettingsModalProps]);
|
|
const defaultSelected = useMemo(() => {
|
return localStorage.getItem("selectedUser");
|
}, []);
|
|
return (
|
<div className={cn("people").toClassName()}>
|
<div className={cn("people").elem("controls").toClassName()}>
|
<Space spread>
|
<Space />
|
|
<Space>
|
{isFF(FF_AUTH_TOKENS) && (
|
<Button look="outlined" onClick={showApiTokenSettingsModal} aria-label="Show API token settings">
|
API 令牌设置
|
</Button>
|
)}
|
<Button
|
leading={<IconPlus className="!h-4" />}
|
onClick={() => setInvitationOpen(true)}
|
aria-label="Invite new member"
|
>
|
添加成员
|
</Button>
|
</Space>
|
</Space>
|
</div>
|
<div className={cn("people").elem("content").toClassName()}>
|
<PeopleList
|
selectedUser={selectedUser}
|
defaultSelected={defaultSelected}
|
onSelect={(user) => selectUser(user)}
|
/>
|
|
{selectedUser ? (
|
<SelectedUser user={selectedUser} onClose={() => selectUser(null)} />
|
) : (
|
isFF(FF_LSDV_E_297) && <HeidiTips collection="organizationPage" />
|
)}
|
</div>
|
<InviteLink
|
opened={invitationOpen}
|
onClosed={() => {
|
console.log("hidden");
|
setInvitationOpen(false);
|
}}
|
/>
|
</div>
|
);
|
};
|
|
PeoplePage.title = "人员";
|
PeoplePage.path = "/";
|
