import { useState, ReactElement } from "react"; import { observer } from "mobx-react-lite"; import { useRouter } from "next/router"; import { Search } from "lucide-react"; // hooks import { Button, TOAST_TYPE, setToast } from "@plane/ui"; import { PageHead } from "components/core"; import { WorkspaceSettingHeader } from "components/headers"; import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace"; import { MEMBER_INVITED } from "constants/event-tracker"; import { EUserWorkspaceRoles } from "constants/workspace"; import { getUserRole } from "helpers/user.helper"; import { useEventTracker, useMember, useUser, useWorkspace } from "hooks/store"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/settings-layout"; // components // ui // types import { NextPageWithLayout } from "lib/types"; import { IWorkspaceBulkInviteFormData } from "@plane/types"; // helpers // constants const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => { // states const [inviteModal, setInviteModal] = useState(false); const [searchQuery, setSearchQuery] = useState(""); // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { captureEvent } = useEventTracker(); const { membership: { currentWorkspaceRole }, } = useUser(); const { workspace: { inviteMembersToWorkspace }, } = useMember(); const { currentWorkspace } = useWorkspace(); const handleWorkspaceInvite = (data: IWorkspaceBulkInviteFormData) => { if (!workspaceSlug) return; return inviteMembersToWorkspace(workspaceSlug.toString(), data) .then(() => { setInviteModal(false); captureEvent(MEMBER_INVITED, { emails: [ ...data.emails.map((email) => ({ email: email.email, role: getUserRole(email.role), })), ], project_id: undefined, state: "SUCCESS", element: "Workspace settings member page", }); setToast({ type: TOAST_TYPE.SUCCESS, title: "Success!", message: "Invitations sent successfully.", }); }) .catch((err) => { captureEvent(MEMBER_INVITED, { emails: [ ...data.emails.map((email) => ({ email: email.email, role: getUserRole(email.role), })), ], project_id: undefined, state: "FAILED", element: "Workspace settings member page", }); setToast({ type: TOAST_TYPE.ERROR, title: "Error!", message: `${err.error ?? "Something went wrong. Please try again."}`, }); }); }; // derived values const hasAddMemberPermission = currentWorkspaceRole && [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER].includes(currentWorkspaceRole); const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Members` : undefined; return ( <> setInviteModal(false)} onSubmit={handleWorkspaceInvite} />

Members

setSearchQuery(e.target.value)} />
{hasAddMemberPermission && ( )}
); }); WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) { return ( }> {page} ); }; export default WorkspaceMembersSettingsPage;