From f27c25821c0a2a7c122302b3f88d6f352946ff56 Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Thu, 18 Jul 2024 20:50:25 +0530
Subject: [PATCH] [WEB-1959]: Fix/member page revamp (#5163)

* fix: css issue + no pending issues handled

* fix: type issues

* fix: css changes
---
 web/app/layout.tsx                                   |  3 ++-
 .../projects/settings/useProjectColumns.tsx          |  2 +-
 web/core/components/project/member-list-item.tsx     |  3 ++-
 web/core/components/project/member-list.tsx          |  6 +++---
 .../components/project/settings/member-columns.tsx   |  2 +-
 .../components/workspace/settings/member-columns.tsx |  2 +-
 .../components/workspace/settings/members-list.tsx   | 12 +++++-------
 7 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 4647a099b..e1690a17c 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -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:
diff --git a/web/ce/components/projects/settings/useProjectColumns.tsx b/web/ce/components/projects/settings/useProjectColumns.tsx
index c02a144d4..7f450ae65 100644
--- a/web/ce/components/projects/settings/useProjectColumns.tsx
+++ b/web/ce/components/projects/settings/useProjectColumns.tsx
@@ -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;
 }
diff --git a/web/core/components/project/member-list-item.tsx b/web/core/components/project/member-list-item.tsx
index a3d19cd0d..ae831cc8f 100644
--- a/web/core/components/project/member-list-item.tsx
+++ b/web/core/components/project/member-list-item.tsx
@@ -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"
diff --git a/web/core/components/project/member-list.tsx b/web/core/components/project/member-list.tsx
index 8ff6ed284..a2dc81dbe 100644
--- a/web/core/components/project/member-list.tsx
+++ b/web/core/components/project/member-list.tsx
@@ -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>
diff --git a/web/core/components/project/settings/member-columns.tsx b/web/core/components/project/settings/member-columns.tsx
index 835f13cfa..c4d1ca954 100644
--- a/web/core/components/project/settings/member-columns.tsx
+++ b/web/core/components/project/settings/member-columns.tsx
@@ -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>
diff --git a/web/core/components/workspace/settings/member-columns.tsx b/web/core/components/workspace/settings/member-columns.tsx
index d8b52cb9d..4c2cd4339 100644
--- a/web/core/components/workspace/settings/member-columns.tsx
+++ b/web/core/components/workspace/settings/member-columns.tsx
@@ -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>
diff --git a/web/core/components/workspace/settings/members-list.tsx b/web/core/components/workspace/settings/members-list.tsx
index 1becc38e6..008acab20 100644
--- a/web/core/components/workspace/settings/members-list.tsx
+++ b/web/core/components/workspace/settings/members-list.tsx
@@ -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>