fix: check create member permission for invite ability

This commit is contained in:
Scott Wilson
2025-02-11 16:37:25 -08:00
parent c4da0305ba
commit 72780c61b4
@@ -7,7 +7,13 @@ import { z } from "zod";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2"; import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2";
import { CreatableSelect } from "@app/components/v2/CreatableSelect"; import { CreatableSelect } from "@app/components/v2/CreatableSelect";
import { useOrganization, useWorkspace } from "@app/context"; import {
OrgPermissionActions,
OrgPermissionSubjects,
useOrganization,
useOrgPermission,
useWorkspace
} from "@app/context";
import { import {
useAddUsersToOrg, useAddUsersToOrg,
useGetOrgUsers, useGetOrgUsers,
@@ -42,6 +48,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { currentOrg } = useOrganization(); const { currentOrg } = useOrganization();
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const { permission } = useOrgPermission();
const orgId = currentOrg?.id || ""; const orgId = currentOrg?.id || "";
const workspaceId = currentWorkspace?.id || ""; const workspaceId = currentWorkspace?.id || "";
@@ -140,6 +147,11 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
const { append } = useFieldArray<TAddMemberForm>({ control, name: "orgMemberships" }); const { append } = useFieldArray<TAddMemberForm>({ control, name: "orgMemberships" });
const canInviteNewMembers = permission.can(
OrgPermissionActions.Create,
OrgPermissionSubjects.Member
);
return ( return (
<Modal <Modal
isOpen={popUp?.addMember?.isOpen} isOpen={popUp?.addMember?.isOpen}
@@ -161,53 +173,69 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
isError={!!errors.orgMemberships?.length} isError={!!errors.orgMemberships?.length}
errorText={errors.orgMemberships?.[0]?.message} errorText={errors.orgMemberships?.[0]?.message}
label="Invite users to project" label="Invite users to project"
helperText="You can invite new users to your organzation by typing out their email address" helperText={
canInviteNewMembers
? "You can invite new users to your organization by typing out their email address"
: undefined
}
> >
<CreatableSelect {canInviteNewMembers ? (
/* eslint-disable-next-line react/no-unstable-nested-components */ <CreatableSelect
noOptionsMessage={() => ( /* eslint-disable-next-line react/no-unstable-nested-components */
<> noOptionsMessage={() => (
<p> <>
{!filteredOrgUsers.length && ( <p>
<p>All organization members are already assigned to this project.</p> {!filteredOrgUsers.length && (
)} <p>All organization members are already assigned to this project.</p>
</p> )}
<p> </p>
Invite new users to your organization by typing out their email address. <p>
</p> Invite new users to your organization by typing out their email address.
</> </p>
)} </>
onCreateOption={(inputValue) => )}
append({ label: inputValue, value: inputValue, isNewInvitee: true }) onCreateOption={(inputValue) =>
} append({ label: inputValue, value: inputValue, isNewInvitee: true })
formatCreateLabel={(inputValue) => `Invite "${inputValue}"`} }
isValidNewOption={(input) => formatCreateLabel={(inputValue) => `Invite "${inputValue}"`}
Boolean(input) && isValidNewOption={(input) =>
z.string().email().safeParse(input).success && Boolean(input) &&
!orgUsers z.string().email().safeParse(input).success &&
?.flatMap(({ user }) => { !orgUsers
const emails: string[] = []; ?.flatMap(({ user }) => {
const emails: string[] = [];
if (user.email) { if (user.email) {
emails.push(user.email); emails.push(user.email);
} }
if (user.username) { if (user.username) {
emails.push(user.username); emails.push(user.username);
} }
return emails; return emails;
}) })
.includes(input) .includes(input)
} }
className="w-full" className="w-full"
placeholder="Add one or more users..." placeholder="Add one or more users..."
isMulti isMulti
name="members" name="members"
options={filteredOrgUsers} options={filteredOrgUsers}
value={field.value} value={field.value}
onChange={field.onChange} onChange={field.onChange}
/> />
) : (
<FilterableSelect
className="w-full"
placeholder="Add one or more users..."
isMulti
name="members"
options={filteredOrgUsers}
value={field.value}
onChange={field.onChange}
/>
)}
</FormControl> </FormControl>
)} )}
/> />