thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: refactor and improve project member settings (#2625)

Browse Source 
* fix: project member setting improvement and refactor

* fix: typo fix in automations setting
This commit is contained in:
Anmol Singh Bhatia 2023-11-03 17:20:49 +05:30 committed by GitHub
parent 4c1aee0cfc
commit 737fea28c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/automation/auto-archive-automation.tsx
View File

@ -38,7 +38,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
<div className=""> <div className="">
<h4 className="text-sm font-medium">Auto-archive closed issues</h4> <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
<p className="text-sm text-custom-text-200 tracking-tight"> <p className="text-sm text-custom-text-200 tracking-tight">
Plane will auto archive issues that have been completed or canceled. Plane will auto archive issues that have been completed or cancelled.
</p> </p>
</div> </div>
</div> </div>

2
web/components/automation/auto-close-automation.tsx
View File

@ -82,7 +82,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
<div className=""> <div className="">
<h4 className="text-sm font-medium">Auto-close issues</h4> <h4 className="text-sm font-medium">Auto-close issues</h4>
<p className="text-sm text-custom-text-200 tracking-tight"> <p className="text-sm text-custom-text-200 tracking-tight">
Plane will automatically close issue that haven’t been completed or canceled. Plane will automatically close issue that haven’t been completed or cancelled.
</p> </p>
</div> </div>
</div> </div>

111
web/components/project/member-list-item.tsx
View File

@ -11,9 +11,9 @@ import useToast from "hooks/use-toast";
// components // components
import { ConfirmProjectMemberRemove } from "components/project"; import { ConfirmProjectMemberRemove } from "components/project";
// ui // ui
import { CustomMenu, CustomSelect } from "@plane/ui"; import { CustomSelect, Tooltip } from "@plane/ui";
// icons // icons
import { ChevronDown, X } from "lucide-react"; import { ChevronDown, XCircle } from "lucide-react";
// constants // constants
import { ROLE } from "constants/workspace"; import { ROLE } from "constants/workspace";
import { TUserProjectRole } from "types"; import { TUserProjectRole } from "types";
@ -46,9 +46,8 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
); );
// derived values // derived values
const user = userStore.currentUser; const user = userStore.currentUser;
const { currentProjectRole } = userStore; const { currentProjectMemberInfo, currentProjectRole } = userStore;
const isAdmin = currentProjectRole === 20; const isAdmin = currentProjectRole === 20;
const isOwner = currentProjectRole === 20;
const projectMembers = projectStore.members?.[projectId?.toString()!]; const projectMembers = projectStore.members?.[projectId?.toString()!];
const currentUser = projectMembers?.find((item) => item.member.id === user?.id); const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
@ -69,7 +68,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
await projectStore.removeMemberFromProject( await projectStore.removeMemberFromProject(
workspaceSlug.toString(), workspaceSlug.toString(),
projectId.toString(), projectId.toString(),
selectedRemoveMember selectedRemoveMember.id
); );
} }
// if the user is an invite // if the user is an invite
@ -77,7 +76,7 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
await projectInvitationService.deleteProjectInvitation( await projectInvitationService.deleteProjectInvitation(
workspaceSlug.toString(), workspaceSlug.toString(),
projectId.toString(), projectId.toString(),
selectedInviteRemoveMember selectedInviteRemoveMember.id
); );
mutate(`PROJECT_INVITATIONS_${projectId.toString()}`); mutate(`PROJECT_INVITATIONS_${projectId.toString()}`);
} }
@ -89,59 +88,62 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
}); });
}} }}
/> />
<div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
<div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]"> <div className="flex items-center gap-x-4 gap-y-2">
<div className="flex items-center gap-x-6 gap-y-2">
{member.avatar && member.avatar !== "" ? ( {member.avatar && member.avatar !== "" ? (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white"> <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<img <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize text-white">
src={member.avatar} <img
alt={member.display_name} src={member.avatar}
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg" alt={member.display_name || member.email}
/> className="absolute top-0 left-0 h-full w-full object-cover rounded"
</div> />
) : member.display_name || member.email ? ( </a>
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white"> </Link>
{(member.display_name || member.email)?.charAt(0)}
</div>
) : ( ) : (
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-gray-700 p-4 capitalize text-white"> <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
? <a className="relative flex h-10 w-10 items-center justify-center rounded p-4 capitalize bg-gray-700 text-white">
</div> {(member.display_name ?? member.email ?? "?")[0]}
</a>
</Link>
)} )}
<div> <div>
{member.member ? ( {member.member ? (
<Link href={`/${workspaceSlug}/profile/${member.memberId}`}> <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
<a className="text-sm"> <a className="text-sm font-medium">
<span> {member.first_name} {member.last_name}
{member.first_name} {member.last_name}
</span>
<span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
</a> </a>
</Link> </Link>
) : ( ) : (
<h4 className="text-sm">{member.display_name || member.email}</h4> <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
)} )}
{isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>} <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email ?? member.display_name}</p>
</div> </div>
</div> </div>
<div className="flex items-center gap-3 text-xs">
{!member.member && ( <div className="flex items-center gap-2 text-xs">
<div className="mr-2 flex items-center justify-center rounded-full bg-yellow-500/20 px-2 py-1 text-center text-xs text-yellow-500"> {!member?.status && (
Pending <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs text-yellow-500 font-medium">
<p>Pending</p>
</div> </div>
)} )}
<CustomSelect <CustomSelect
customButton={ customButton={
<div className="flex item-center gap-1"> <div className="flex item-center gap-1 px-2 py-0.5 rounded">
<span <span
className={`flex items-center text-sm font-medium ${ className={`flex items-center text-xs font-medium rounded ${
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400" member.memberId !== currentProjectMemberInfo?.id ? "" : "text-custom-sidebar-text-400"
}`} }`}
> >
{ROLE[member.role as keyof typeof ROLE]} {ROLE[member.role as keyof typeof ROLE]}
</span> </span>
{member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />} {member.memberId !== currentProjectMemberInfo?.id && (
<span className="grid place-items-center">
<ChevronDown className="h-3 w-3" />
</span>
)}
</div> </div>
} }
value={member.role} value={member.role}
@ -168,31 +170,34 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
!member.member || !member.member ||
(currentUser && currentUser.role !== 20 && currentUser.role < member.role) (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
} }
placement="bottom-end"
> >
{Object.keys(ROLE).map((key) => { {Object.keys(ROLE).map((key) => {
if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null; if (currentProjectRole && currentProjectRole !== 20 && currentProjectRole < parseInt(key)) return null;
return ( return (
<CustomSelect.Option key={key} value={key}> <CustomSelect.Option key={key} value={parseInt(key, 10)}>
<>{ROLE[parseInt(key) as keyof typeof ROLE]}</> <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
</CustomSelect.Option> </CustomSelect.Option>
); );
})} })}
</CustomSelect> </CustomSelect>
<CustomMenu ellipsis disabled={!isAdmin}> {isAdmin && (
<CustomMenu.MenuItem <Tooltip
onClick={() => { tooltipContent={member.memberId === currentProjectMemberInfo?.member ? "Leave project" : "Remove member"}
if (member.member) setSelectedRemoveMember(member.id);
else setSelectedInviteRemoveMember(member.id);
}}
> >
<span className="flex items-center justify-start gap-2"> <button
<X className="h-4 w-4" /> type="button"
onClick={() => {
<span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span> if (member.member) setSelectedRemoveMember(member);
</span> else setSelectedInviteRemoveMember(member);
</CustomMenu.MenuItem> }}
</CustomMenu> className="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
>
<XCircle className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={2} />
</button>
</Tooltip>
)}
</div> </div>
</div> </div>
</> </>