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

chore: deactivate user option added (#2841)

Browse source 
* dev: deactivate user option added

* chore: new layout for profile settings

* fix: build errors

* fix: user profile activity
This commit is contained in:
Aaryan Khandelwal 2023-11-23 14:44:06 +05:30 • committed by sriram veeraghanta
parent 3c89ef8cc3
commit db75eced0a
53 changed files with 799 additions and 625 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/components/workspace/confirm-workspace-member-remove.tsx
View file

@ -8,14 +8,14 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { Button } from "@plane/ui";
type Props = {
data?: any;
isOpen: boolean;
onClose: () => void;
onSubmit: () => Promise<void>;
data?: any;
};
export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) => {
const { isOpen, onClose, data, onSubmit } = props;
const { data, isOpen, onClose, onSubmit } = props;
const [isRemoving, setIsRemoving] = useState(false);
@ -62,8 +62,8 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
<div className="bg-custom-background-100 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<Dialog.Panel className="relative transform overflow-hidden rounded-lg text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem] bg-custom-background-100">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
@ -89,12 +89,18 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
</div>
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6 bg-custom-background-100">
<div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
Cancel
</Button>
<Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
{isRemoving ? "Removing..." : "Remove"}
{currentUser?.id === data?.memberId
? isRemoving
? "Leaving..."
: "Leave"
: isRemoving
? "Removing..."
: "Remove"}
</Button>
</div>
</Dialog.Panel>

14
web/components/workspace/help-section.tsx
View file

@ -2,7 +2,6 @@ import React, { useRef, useState } from "react";
import Link from "next/link";
import { Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@ -43,7 +42,10 @@ export interface WorkspaceHelpSectionProps {
export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
// store
const { theme: themeStore, commandPalette: commandPaletteStore } = useMobxStore();
const {
theme: { sidebarCollapsed, toggleSidebar },
commandPalette: { toggleShortcutModal },
} = useMobxStore();
// states
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
// refs
@ -51,7 +53,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
const isCollapsed = themeStore.sidebarCollapsed || false;
const isCollapsed = sidebarCollapsed || false;
return (
<>
@ -71,7 +73,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => commandPaletteStore.toggleShortcutModal(true)}
onClick={() => toggleShortcutModal(true)}
>
<Zap className="h-3.5 w-3.5" />
</button>
@ -87,7 +89,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
<button
type="button"
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
onClick={() => themeStore.toggleSidebar()}
onClick={() => toggleSidebar()}
>
<MoveLeft className="h-3.5 w-3.5" />
</button>
@ -96,7 +98,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
isCollapsed ? "w-full" : ""
}`}
onClick={() => themeStore.toggleSidebar()}
onClick={() => toggleSidebar()}
>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
</button>

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

@ -12,9 +12,10 @@ import { ConfirmWorkspaceMemberRemove } from "components/workspace";
import { CustomSelect, Tooltip } from "@plane/ui";
// icons
import { ChevronDown, Dot, XCircle } from "lucide-react";
// types
import { TUserWorkspaceRole } from "types";
// constants
import { ROLE } from "constants/workspace";
import { TUserWorkspaceRole } from "types";
type Props = {
member: {
@ -40,7 +41,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
// store
const {
workspaceMember: { removeMember, updateMember, deleteWorkspaceInvitation },
user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings },
user: { currentWorkspaceMemberInfo, currentWorkspaceRole, currentUser, currentUserSettings, leaveWorkspace },
} = useMobxStore();
const isAdmin = currentWorkspaceRole === 20;
// states
@ -48,49 +49,69 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
// hooks
const { setToastAlert } = useToast();
const handleLeaveWorkspace = async () => {
if (!workspaceSlug || !currentUserSettings) return;
await leaveWorkspace(workspaceSlug.toString())
.then(() => {
if (currentUserSettings.workspace?.invites > 0) router.push("/invitations");
else router.push("/create-workspace");
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error",
message: err?.error || "Something went wrong. Please try again.",
})
);
};
const handleRemoveMember = async () => {
if (!workspaceSlug) return;
if (member.member)
await removeMember(workspaceSlug.toString(), member.id)
.then(() => {
const memberId = member.memberId;
await removeMember(workspaceSlug.toString(), member.id).catch((err) =>
setToastAlert({
type: "error",
title: "Error",
message: err?.error || "Something went wrong. Please try again.",
})
);
};
if (memberId === currentUser?.id && currentUserSettings) {
if (currentUserSettings.workspace?.invites > 0) router.push("/invitations");
else router.push("/create-workspace");
}
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error",
message: err?.error || "Something went wrong",
});
});
else
await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id)
.then(() => {
setToastAlert({
type: "success",
title: "Success",
message: "Member removed successfully",
});
})
.catch((err) => {
setToastAlert({
type: "error",
title: "Error",
message: err?.error || "Something went wrong",
});
})
.finally(() => {
mutate(`WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`, (prevData: any) => {
if (!prevData) return prevData;
const handleRemoveInvitation = async () => {
if (!workspaceSlug) return;
return prevData.filter((item: any) => item.id !== member.id);
});
});
await deleteWorkspaceInvitation(workspaceSlug.toString(), member.id)
.then(() =>
setToastAlert({
type: "success",
title: "Success",
message: "Invitation removed successfully.",
})
)
.catch((err) =>
setToastAlert({
type: "error",
title: "Error",
message: err?.error || "Something went wrong. Please try again.",
})
)
.finally(() =>
mutate(`WORKSPACE_INVITATIONS_${workspaceSlug.toString()}`, (prevData: any) => {
if (!prevData) return prevData;
return prevData.filter((item: any) => item.id !== member.id);
})
);
};
const handleRemove = async () => {
if (member.member) {
const memberId = member.memberId;
if (memberId === currentUser?.id) await handleLeaveWorkspace();
else await handleRemoveMember();
} else await handleRemoveInvitation();
};
if (!currentWorkspaceMemberInfo) return null;
@ -101,7 +122,7 @@ export const WorkspaceMembersListItem: FC<Props> = (props) => {
isOpen={removeMemberModal}
onClose={() => setRemoveMemberModal(false)}
data={member}
onSubmit={handleRemoveMember}
onSubmit={handleRemove}
/>
<div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90">
<div className="flex items-center gap-x-4 gap-y-2">

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

@ -33,11 +33,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
const displayName = member.display_name.toLowerCase();
const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
return (
displayName.includes(searchQuery.toLowerCase()) ||
fullName.includes(searchQuery.toLowerCase()) ||
email?.includes(searchQuery.toLowerCase())
);
return `${email}${displayName}${fullName}`.includes(searchQuery.toLowerCase());
});
if (
@ -61,7 +57,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string }> = observer(({ sea
? searchedMembers?.map((member) => <WorkspaceMembersListItem key={member.id} member={member} />)
: null}
{searchedMembers?.length === 0 && (
<h4 className="text-md text-custom-text-400 text-center mt-20">No matching member</h4>
<h4 className="text-sm text-custom-text-400 text-center mt-16">No matching members</h4>
)}
</div>
);

6
web/components/workspace/sidebar-dropdown.tsx
View file

@ -42,7 +42,7 @@ const profileLinks = (workspaceSlug: string, userId: string) => [
{
name: "Settings",
icon: Settings,
link: `/${workspaceSlug}/me/profile`,
link: "/me/profile",
},
];
@ -99,7 +99,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
<Menu as="div" className="relative col-span-4 text-left flex-grow h-full truncate">
{({ open }) => (
<>
<Menu.Button className="text-custom-sidebar-text-200 rounded-md hover:bg-custom-sidebar-background-80 text-sm font-medium focus:outline-none w-full h-full truncate">
<Menu.Button className="group/menu-button text-custom-sidebar-text-200 rounded-md hover:bg-custom-sidebar-background-80 text-sm font-medium focus:outline-none w-full h-full truncate">
<div
className={`flex items-center justify-between gap-x-2 rounded p-1 truncate ${
sidebarCollapsed ? "justify-center" : ""
@ -131,7 +131,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{!sidebarCollapsed && (
<ChevronDown
className={`h-4 w-4 mx-1 flex-shrink-0 ${
className={`hidden group-hover/menu-button:block h-4 w-4 mx-1 flex-shrink-0 ${
open ? "rotate-180" : ""
} text-custom-sidebar-text-400 duration-300`}
/>