binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2022] fix: handled null state on members page (#5226)

Browse source 
* fix: handled null state on members page

* fix: skeleton loader added
This commit is contained in:
Akshita Goyal 2024-07-25 16:28:03 +05:30 • committed by GitHub
parent 1c155f6cbe
commit 43103a1445
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 23 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
View file

@ -91,7 +91,7 @@ const WorkspaceMembersSettingsPage = observer(() => {
onSubmit={handleWorkspaceInvite}
/>
<section className="w-full overflow-y-auto md:pr-9 pr-4">
<div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5">
<div className="flex items-center justify-between gap-4 py-3.5">
<h4 className="text-xl font-medium">Members</h4>
<div className="ml-auto flex items-center gap-1.5 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 text-custom-text-400" />

14
web/core/components/ui/loader/layouts/members-layout-loader.tsx Normal file
View file

@ -0,0 +1,14 @@
export const MembersLayoutLoader = () => (
<div className="flex gap-5 py-1.5 overflow-x-auto">
{Array.from({ length: 5 }, (_, columnIndex) => (
<div key={columnIndex} className="flex flex-col gap-3">
<div className={`flex items-center justify-between h-9 ${columnIndex === 0 ? "w-80" : "w-36"}`}>
<span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
</div>
{Array.from({ length: 2 }, (_, cardIndex) => (
<span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
))}
</div>
))}
</div>
);

10
web/core/components/workspace/settings/members-list-item.tsx
View file

@ -1,11 +1,13 @@
"use client";
import { FC } from "react";
import { isEmpty } from "lodash";
import { observer } from "mobx-react";
// ui
import { IWorkspaceMember } from "@plane/types";
import { TOAST_TYPE, Table, setToast } from "@plane/ui";
// components
import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
// constants
import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
@ -79,8 +81,10 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
// 2. only admin or member can change role
// 3. user cannot change role of higher role
if (isEmpty(columns)) return <MembersLayoutLoader />;
return (
<>
<div className="border-t border-custom-border-100">
{removeMemberModal && (
<ConfirmWorkspaceMemberRemove
isOpen={removeMemberModal.member.id.length > 0}
@ -93,7 +97,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
/>
)}
<Table
columns={columns}
columns={columns ?? []}
data={(memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []) as any}
keyExtractor={(rowData) => rowData?.member.id ?? ""}
tHeadClassName="border-b border-custom-border-100"
@ -102,6 +106,6 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
tBodyTrClassName="divide-x-0"
tHeadTrClassName="divide-x-0"
/>
</>
</div>
);
});

2
web/core/components/workspace/settings/members-list.tsx
View file

@ -13,7 +13,7 @@ import { useMember } from "@/hooks/store";
export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }> = observer((props) => {
const { searchQuery, isAdmin } = props;
const [showPendingInvites, setShowPendingInvites] = useState<boolean>(false);
const [showPendingInvites, setShowPendingInvites] = useState<boolean>(true);
// router
const { workspaceSlug } = useParams();