[WEB-1959]: Chore/settings member page (#5144)

* chore: implemented table component in ui library

* chore: added export in the UI package

* chore/member-page-revamp

* fix: added custom popover className

* fix: updated ui for projects

* fix: hide pending invites for members

* fix: added ee component

* removed unwanted logging

* fix: seperated components

* fix: used collapsible instead of disclosure

* fix: removed commented code

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

packages/types/src/workspace.d.ts

@@ -1,192 +1,199 @@
-import { EUserWorkspaceRoles } from "@/constants/workspace";
+import {EUserWorkspaceRoles} from "@/constants/workspace";
 import type {
-  IProjectMember,
-  IUser,
-  IUserLite,
-  IWorkspaceViewProps,
+	IProjectMember,
+	IUser,
+	IUserLite,
+	IWorkspaceViewProps,
 } from "@plane/types";
 
 export interface IWorkspace {
-  readonly id: string;
-  readonly owner: IUser;
-  readonly created_at: Date;
-  readonly updated_at: Date;
-  name: string;
-  url: string;
-  logo: string | null;
-  slug: string;
-  readonly total_members: number;
-  readonly slug: string;
-  readonly created_by: string;
-  readonly updated_by: string;
-  organization_size: string;
-  total_issues: number;
+	readonly id: string;
+	readonly owner: IUser;
+	readonly created_at: Date;
+	readonly updated_at: Date;
+	name: string;
+	url: string;
+	logo: string | null;
+	slug: string;
+	readonly total_members: number;
+	readonly slug: string;
+	readonly created_by: string;
+	readonly updated_by: string;
+	organization_size: string;
+	total_issues: number;
 }
 
 export interface IWorkspaceLite {
-  readonly id: string;
-  name: string;
-  slug: string;
+	readonly id: string;
+	name: string;
+	slug: string;
 }
 
 export interface IWorkspaceMemberInvitation {
-  accepted: boolean;
-  email: string;
-  id: string;
-  message: string;
-  responded_at: Date;
-  role: EUserWorkspaceRoles;
-  token: string;
-  workspace: {
-    id: string;
-    logo: string;
-    name: string;
-    slug: string;
-  };
+	accepted: boolean;
+	email: string;
+	id: string;
+	message: string;
+	responded_at: Date;
+	role: EUserWorkspaceRoles;
+	token: string;
+	workspace: {
+		id: string;
+		logo: string;
+		name: string;
+		slug: string;
+	};
 }
 
 export interface IWorkspaceBulkInviteFormData {
-  emails: { email: string; role: EUserWorkspaceRoles }[];
+	emails: {email: string; role: EUserWorkspaceRoles}[];
 }
 
 export type Properties = {
-  assignee: boolean;
-  start_date: boolean;
-  due_date: boolean;
-  labels: boolean;
-  key: boolean;
-  priority: boolean;
-  state: boolean;
-  sub_issue_count: boolean;
-  link: boolean;
-  attachment_count: boolean;
-  estimate: boolean;
-  created_on: boolean;
-  updated_on: boolean;
+	assignee: boolean;
+	start_date: boolean;
+	due_date: boolean;
+	labels: boolean;
+	key: boolean;
+	priority: boolean;
+	state: boolean;
+	sub_issue_count: boolean;
+	link: boolean;
+	attachment_count: boolean;
+	estimate: boolean;
+	created_on: boolean;
+	updated_on: boolean;
 };
 
 export interface IWorkspaceMember {
-  id: string;
-  member: IUserLite;
-  role: EUserWorkspaceRoles;
+	id: string;
+	member: IUserLite;
+	role: EUserWorkspaceRoles;
+	created_at: string;
+	avatar?: string;
+	email?: string;
+	first_name?: string;
+	last_name?: string;
+	joining_date: string;
+	display_name?: string;
 }
 
 export interface IWorkspaceMemberMe {
-  company_role: string | null;
-  created_at: Date;
-  created_by: string;
-  default_props: IWorkspaceViewProps;
-  id: string;
-  member: string;
-  role: EUserWorkspaceRoles;
-  updated_at: Date;
-  updated_by: string;
-  view_props: IWorkspaceViewProps;
-  workspace: string;
+	company_role: string | null;
+	created_at: Date;
+	created_by: string;
+	default_props: IWorkspaceViewProps;
+	id: string;
+	member: string;
+	role: EUserWorkspaceRoles;
+	updated_at: Date;
+	updated_by: string;
+	view_props: IWorkspaceViewProps;
+	workspace: string;
 }
 
 export interface ILastActiveWorkspaceDetails {
-  workspace_details: IWorkspace;
-  project_details?: IProjectMember[];
+	workspace_details: IWorkspace;
+	project_details?: IProjectMember[];
 }
 
 export interface IWorkspaceDefaultSearchResult {
-  id: string;
-  name: string;
-  project_id: string;
-  project__identifier: string;
-  workspace__slug: string;
+	id: string;
+	name: string;
+	project_id: string;
+	project__identifier: string;
+	workspace__slug: string;
 }
 export interface IWorkspaceSearchResult {
-  id: string;
-  name: string;
-  slug: string;
+	id: string;
+	name: string;
+	slug: string;
 }
 
 export interface IWorkspaceIssueSearchResult {
-  id: string;
-  name: string;
-  project__identifier: string;
-  project_id: string;
-  sequence_id: number;
-  workspace__slug: string;
+	id: string;
+	name: string;
+	project__identifier: string;
+	project_id: string;
+	sequence_id: number;
+	workspace__slug: string;
 }
 
 export interface IWorkspacePageSearchResult {
-  id: string;
-  name: string;
-  project_ids: string[];
-  project__identifiers: string[];
-  workspace__slug: string;
+	id: string;
+	name: string;
+	project_ids: string[];
+	project__identifiers: string[];
+	workspace__slug: string;
 }
 
 export interface IWorkspaceProjectSearchResult {
-  id: string;
-  identifier: string;
-  name: string;
-  workspace__slug: string;
+	id: string;
+	identifier: string;
+	name: string;
+	workspace__slug: string;
 }
 
 export interface IWorkspaceSearchResults {
-  results: {
-    workspace: IWorkspaceSearchResult[];
-    project: IWorkspaceProjectSearchResult[];
-    issue: IWorkspaceIssueSearchResult[];
-    cycle: IWorkspaceDefaultSearchResult[];
-    module: IWorkspaceDefaultSearchResult[];
-    issue_view: IWorkspaceDefaultSearchResult[];
-    page: IWorkspacePageSearchResult[];
-  };
+	results: {
+		workspace: IWorkspaceSearchResult[];
+		project: IWorkspaceProjectSearchResult[];
+		issue: IWorkspaceIssueSearchResult[];
+		cycle: IWorkspaceDefaultSearchResult[];
+		module: IWorkspaceDefaultSearchResult[];
+		issue_view: IWorkspaceDefaultSearchResult[];
+		page: IWorkspacePageSearchResult[];
+	};
 }
 
 export interface IProductUpdateResponse {
-  url: string;
-  assets_url: string;
-  upload_url: string;
-  html_url: string;
-  id: number;
-  author: {
-    login: string;
-    id: string;
-    node_id: string;
-    avatar_url: string;
-    gravatar_id: "";
-    url: string;
-    html_url: string;
-    followers_url: string;
-    following_url: string;
-    gists_url: string;
-    starred_url: string;
-    subscriptions_url: string;
-    organizations_url: string;
-    repos_url: string;
-    events_url: string;
-    received_events_url: string;
-    type: string;
-    site_admin: false;
-  };
-  node_id: string;
-  tag_name: string;
-  target_commitish: string;
-  name: string;
-  draft: boolean;
-  prerelease: true;
-  created_at: string;
-  published_at: string;
-  assets: [];
-  tarball_url: string;
-  zipball_url: string;
-  body: string;
-  reactions: {
-    url: string;
-    total_count: number;
-    "+1": number;
-    "-1": number;
-    laugh: number;
-    hooray: number;
-    confused: number;
-    heart: number;
-    rocket: number;
-    eyes: number;
-  };
+	url: string;
+	assets_url: string;
+	upload_url: string;
+	html_url: string;
+	id: number;
+	author: {
+		login: string;
+		id: string;
+		node_id: string;
+		avatar_url: string;
+		gravatar_id: "";
+		url: string;
+		html_url: string;
+		followers_url: string;
+		following_url: string;
+		gists_url: string;
+		starred_url: string;
+		subscriptions_url: string;
+		organizations_url: string;
+		repos_url: string;
+		events_url: string;
+		received_events_url: string;
+		type: string;
+		site_admin: false;
+	};
+	node_id: string;
+	tag_name: string;
+	target_commitish: string;
+	name: string;
+	draft: boolean;
+	prerelease: true;
+	created_at: string;
+	published_at: string;
+	assets: [];
+	tarball_url: string;
+	zipball_url: string;
+	body: string;
+	reactions: {
+		url: string;
+		total_count: number;
+		"+1": number;
+		"-1": number;
+		laugh: number;
+		hooray: number;
+		confused: number;
+		heart: number;
+		rocket: number;
+		eyes: number;
+	};
 }

packages/ui/src/dropdowns/custom-select.tsx

@@ -82,11 +82,16 @@ const CustomSelect = (props: ICustomSelectProps) => {
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
-                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
-              } ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
+              className={cn(
+                "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300",
+                {
+                  "px-3 py-2 text-sm": input,
+                  "px-2 py-1 text-xs": !input,
+                  "cursor-not-allowed text-custom-text-200": disabled,
+                  "cursor-pointer hover:bg-custom-background-80": !disabled,
+                },
+                buttonClassName
+              )}
               onClick={toggleDropdown}
             >
               {label}

packages/ui/src/popovers/popover-menu.tsx

@@ -14,6 +14,7 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
     button,
     panelClassName = "",
     data,
+    popoverClassName = "",
     keyExtractor,
     render,
   } = props;
@@ -28,6 +29,7 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
         "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2 text-xs shadow-custom-shadow-rg focus:outline-none",
         panelClassName
       )}
+      popoverClassName={popoverClassName}
     >
       <Fragment>
         {data.map((item, index) => (

packages/ui/src/popovers/popover.tsx

@@ -12,6 +12,7 @@ export const Popover = (props: TPopover) => {
     popperPosition = "bottom-end",
     popperPadding = 0,
     buttonClassName = "",
+    popoverClassName = "",
     button,
     panelClassName = "",
     children,
@@ -34,7 +35,7 @@ export const Popover = (props: TPopover) => {
   });
 
   return (
-    <HeadlessReactPopover className="relative flex h-full w-full items-center justify-center">
+    <HeadlessReactPopover className={cn("relative flex h-full w-full items-center justify-center", popoverClassName)}>
       <HeadlessReactPopover.Button ref={setReferenceElement} className="flex justify-center items-center">
         {button ? (
           button

packages/ui/src/popovers/types.ts

@@ -13,6 +13,7 @@ export type TPopoverDefaultOptions = TPopoverButtonDefaultOptions & {
   popperPadding?: number | undefined;
   // panel styling
   panelClassName?: string;
+  popoverClassName?: string;
 };
 
 export type TPopover = TPopoverDefaultOptions & {

packages/ui/src/tables/table.tsx

@@ -29,7 +29,7 @@ export const Table = <T,>(props: TTableData<T>) => {
           ))}
         </tr>
       </thead>
-      <tbody className={cn("divide-y divide-x divide-custom-border-200", tBodyClassName)}>
+      <tbody className={cn("divide-y divide-custom-border-200", tBodyClassName)}>
         {data.map((item) => (
           <tr
             key={keyExtractor(item)}