[WEB-1959]: Fix/member page revamp (#5163)

* fix: css issue + no pending issues handled

* fix: type issues

* fix: css changes
This commit is contained in:
Akshita Goyal
2024-07-18 20:50:25 +05:30
committed by GitHub
parent aade07b37a
commit f27c25821c
7 changed files with 15 additions and 15 deletions

View File

@@ -16,7 +16,8 @@ export const metadata: Metadata = {
"Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
openGraph: {
title: "Plane | Simple, extensible, open-source project management tool.",
description: "Plane Deploy is a customer feedback management tool built on top of plane.so",
description:
"Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
url: "https://app.plane.so/",
},
keywords:

View File

@@ -6,7 +6,7 @@ import { AccountTypeColumn, NameColumn } from "@/components/project/settings/mem
import { EUserWorkspaceRoles } from "@/constants/workspace";
import { useUser } from "@/hooks/store";
interface RowData {
export interface RowData {
member: IWorkspaceMember;
role: EUserWorkspaceRoles;
}

View File

@@ -82,7 +82,8 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
columns={columns}
data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
keyExtractor={(rowData) => rowData?.member.id ?? ""}
thClassName="text-left font-medium divide-x-0 border-b border-t divide-custom-border-200"
tHeadClassName="border-b border-custom-border-100"
thClassName="text-left font-medium divide-x-0"
tBodyClassName="divide-y-0"
tBodyTrClassName="divide-x-0"
tHeadTrClassName="divide-x-0"

View File

@@ -42,10 +42,10 @@ export const ProjectMemberList: React.FC = observer(() => {
<div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5 overflow-x-hidden">
<h4 className="text-xl font-medium">Members</h4>
<div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
<div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
<Search className="h-3.5 w-3.5" />
<input
className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none"
className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none placeholder:text-custom-text-400"
placeholder="Search"
value={searchQuery}
autoFocus
@@ -68,7 +68,7 @@ export const ProjectMemberList: React.FC = observer(() => {
<MembersSettingsLoader />
) : (
<div className="divide-y divide-custom-border-100 overflow-scroll">
<ProjectMemberListItem memberDetails={memberDetails ?? []} />
{searchedMembers.length !== 0 && <ProjectMemberListItem memberDetails={memberDetails ?? []} />}
{searchedMembers.length === 0 && (
<h4 className="text-sm mt-16 text-center text-custom-text-400">No matching members</h4>

View File

@@ -28,7 +28,7 @@ type AccountTypeProps = {
projectId: string;
};
export const NameColumn: React.FC<NameProps> = (props: any) => {
export const NameColumn: React.FC<NameProps> = (props) => {
const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
return (
<Disclosure>

View File

@@ -27,7 +27,7 @@ type AccountTypeProps = {
workspaceSlug: string;
};
export const NameColumn: React.FC<NameProps> = (props: any) => {
export const NameColumn: React.FC<NameProps> = (props) => {
const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
return (
<Disclosure>

View File

@@ -50,12 +50,12 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
return (
<>
<div className="divide-y-[0.5px] divide-custom-border-100 overflow-scroll ">
<WorkspaceMembersListItem memberDetails={memberDetails ?? []} />
{searchedMemberIds?.length !== 0 && <WorkspaceMembersListItem memberDetails={memberDetails ?? []} />}
{searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
<h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
)}
</div>
{isAdmin && (
{isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
<Collapsible
isOpen={showPendingInvites}
onToggle={() => setShowPendingInvites((prev) => !prev)}
@@ -74,11 +74,9 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
>
<Disclosure.Panel>
<div className="ml-auto items-center gap-1.5 rounded-md bg-custom-background-100 py-1.5">
{searchedInvitationsIds && searchedInvitationsIds.length > 0
? searchedInvitationsIds?.map((invitationId) => (
<WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
))
: null}
{searchedInvitationsIds?.map((invitationId) => (
<WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
))}
</div>
</Disclosure.Panel>
</Collapsible>