Move member remove button to dropdown

apps/client/src/components/Organization/OrganizationMemberDropdown/OrganizationMemberDropdown.tsx

@@ -0,0 +1,46 @@
+import { BsArrowRight, BsThreeDotsVertical } from 'react-icons/bs';
+import { OrganizationDto, SecurityRuleDto } from 'shared-types';
+import ActionButton from '../../ActionButton';
+import Dropdown from '../../Dropdown/Dropdown';
+import DropdownItem from '../../Dropdown/DropdownItem';
+import DropdownMenu from '../../Dropdown/DropdownMenu';
+import DropdownToggle from '../../Dropdown/DropdownToggle';
+import RemoveMemberOption from './RemoveMemberOption';
+
+export interface OrganizationMemberDropdownProps {
+	organization: OrganizationDto;
+	rule: SecurityRuleDto;
+	disabled: boolean;
+}
+
+function OrganizationMemberDropdown({
+	organization,
+	rule,
+	disabled = false,
+}: OrganizationMemberDropdownProps) {
+	return (
+		<Dropdown>
+			<DropdownToggle disabled={disabled}>
+				<ActionButton
+					icon={BsThreeDotsVertical}
+					title="More options"
+					disabled={disabled}
+				/>
+			</DropdownToggle>
+			<DropdownMenu>
+				<DropdownItem
+					icon={BsArrowRight}
+					disabled={true}
+				>
+					Transfer Ownership
+				</DropdownItem>
+				<RemoveMemberOption
+					organization={organization}
+					rule={rule}
+				/>
+			</DropdownMenu>
+		</Dropdown>
+	);
+}
+
+export default OrganizationMemberDropdown;

apps/client/src/components/Organization/OrganizationMemberDropdown/RemoveMemberOption.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { BsPersonXFill } from 'react-icons/bs';
+import { OrganizationDto, SecurityRuleDto } from 'shared-types';
+import useUserRole from '../../../hooks/useUserRole';
+import { SecurityUtils } from '../../../utils/securityUtils';
+import { ActionButtonProps } from '../../ActionButton';
+import DropdownItem from '../../Dropdown/DropdownItem';
+import ConfirmMemberDeleteModal from '../ConfirmMemberDeleteModal';
+
+export interface RemoveMemberOptionProps extends Omit<ActionButtonProps, 'icon' | 'onClick'> {
+	organization: OrganizationDto;
+	rule: SecurityRuleDto;
+}
+
+function RemoveMemberOption({ rule, organization, ...props }: RemoveMemberOptionProps) {
+	const [open, setOpen] = useState(false);
+
+	const { role } = useUserRole(organization.id);
+	const canManage = role && SecurityUtils.canManageRole(role, rule.role);
+
+	return (
+		<>
+			{createPortal(
+				<ConfirmMemberDeleteModal
+					open={open}
+					handleClose={() => setOpen(false)}
+					organization={organization}
+					rule={rule}
+				/>,
+				document.body,
+			)}
+			<DropdownItem
+				icon={BsPersonXFill}
+				title="Remove from organization"
+				disabled={!canManage || props.disabled}
+				onClick={() => setOpen(true)}
+			>
+				Remove
+			</DropdownItem>
+		</>
+	);
+}
+export default RemoveMemberOption;

apps/client/src/components/Organization/OrganizationMemberRow.tsx

@@ -5,7 +5,7 @@ import useUser from '../../hooks/useUser';
 import useUserData from '../../hooks/useUserData';
 import RealtimeOrgRoleSelect from '../RealtimeOrgRoleSelect';
 import UserAvatar from '../UserAvatar';
-import DeleteMemberButton from './DeleteMemberButton';
+import OrganizationMemberDropdown from './OrganizationMemberDropdown/OrganizationMemberDropdown';
 
 export interface OrganizationMemberRow {
 	organization: OrganizationDto;
@@ -32,13 +32,13 @@ function OrganizationMemberRow({ organization, rule }: OrganizationMemberRow) {
 				</span>
 			</div>
 			<div className="flex gap-2">
-				<DeleteMemberButton
-					disabled={isOwnRow}
+				<RealtimeOrgRoleSelect
+					isDisabled={isOwnRow || !user}
 					organization={organization}
 					rule={rule}
 				/>
-				<RealtimeOrgRoleSelect
-					isDisabled={isOwnRow || !user}
+				<OrganizationMemberDropdown
+					disabled={isOwnRow || !user}
 					organization={organization}
 					rule={rule}
 				/>