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

* fix: css issue + no pending issues handled

* fix: type issues

* fix: css changes

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:

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;
 }

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"

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>

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>

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>

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) => (
-                ? searchedInvitationsIds?.map((invitationId) => (
+                <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
-                    <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
+              ))}
-                  ))
-                : null}
             </div>
           </Disclosure.Panel>
         </Collapsible>