From f70384bff764ea47cccaa5dbb0ea2df9c135838b Mon Sep 17 00:00:00 2001 From: b-saikrishnakanth <130811169+b-saikrishnakanth@users.noreply.github.com> Date: Tue, 9 Dec 2025 21:04:33 +0530 Subject: [PATCH] [WEB-5603] feat: enhance workspace settings layout and members page (#8266) * feat: enhance workspace settings layout and members page with new components * refactor: update workspace settings layout and members page to use default exports * refactor: settings layout import changes * refactor: simplify workspaceSlug usage in settings layout --- .../settings/(workspace)/layout.tsx | 23 +++++++++++------- .../settings/(workspace)/members/page.tsx | 24 ++++++++++++------- .../ce/components/workspace/members/index.ts | 2 ++ .../members/members-activity-button.tsx | 6 +++++ .../workspace/right-sidebar/index.ts | 1 + .../workspace/right-sidebar/root.tsx | 10 ++++++++ 6 files changed, 49 insertions(+), 17 deletions(-) create mode 100644 apps/web/ce/components/workspace/members/index.ts create mode 100644 apps/web/ce/components/workspace/members/members-activity-button.tsx create mode 100644 apps/web/ce/components/workspace/right-sidebar/index.ts create mode 100644 apps/web/ce/components/workspace/right-sidebar/root.tsx diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx index 4412962cc0..783f7a0dd0 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx @@ -1,26 +1,32 @@ import { observer } from "mobx-react"; import { usePathname } from "next/navigation"; import { Outlet } from "react-router"; -// constants -import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants"; -import type { EUserWorkspaceRoles } from "@plane/types"; // components import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view"; import { getWorkspaceActivePath, pathnameToAccessKey } from "@/components/settings/helper"; import { SettingsMobileNav } from "@/components/settings/mobile"; +// plane imports +import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants"; +import type { EUserWorkspaceRoles } from "@plane/types"; +// plane web components +import { WorkspaceSettingsRightSidebar } from "@/plane-web/components/workspace/right-sidebar"; // hooks import { useUserPermissions } from "@/hooks/store/user"; // local components import { WorkspaceSettingsSidebar } from "./sidebar"; -function WorkspaceSettingLayout() { +import type { Route } from "./+types/layout"; + +const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout({ params }: Route.ComponentProps) { + // router + const { workspaceSlug } = params; // store hooks const { workspaceUserInfo, getWorkspaceRoleByWorkspaceSlug } = useUserPermissions(); // next hooks const pathname = usePathname(); // derived values - const { workspaceSlug, accessKey } = pathnameToAccessKey(pathname); - const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug.toString()); + const { accessKey } = pathnameToAccessKey(pathname); + const userWorkspaceRole = getWorkspaceRoleByWorkspaceSlug(workspaceSlug); let isAuthorized: boolean | string = false; if (pathname && workspaceSlug && userWorkspaceRole) { @@ -42,11 +48,12 @@ function WorkspaceSettingLayout() {
+ )} ); -} +}); -export default observer(WorkspaceSettingLayout); +export default WorkspaceSettingLayout; diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx index 609c13c90e..0d1104f83c 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx @@ -28,10 +28,10 @@ import { useWorkspace } from "@/hooks/store/use-workspace"; import { useUserPermissions } from "@/hooks/store/user"; // plane web components import { BillingActionsButton } from "@/plane-web/components/workspace/billing/billing-actions-button"; -import { SendWorkspaceInvitationModal } from "@/plane-web/components/workspace/members/invite-modal"; +import { SendWorkspaceInvitationModal, MembersActivityButton } from "@/plane-web/components/workspace/members"; import type { Route } from "./+types/page"; -function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) { +const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) { // states const [inviteModal, setInviteModal] = useState(false); const [searchQuery, setSearchQuery] = useState(""); @@ -70,23 +70,27 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) { title: "Success!", message: t("workspace_settings.settings.members.invitations_sent_successfully"), }); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } catch (err: any) { + } catch (error: unknown) { + let message = undefined; + if (error instanceof Error) { + const err = error as Error & { error?: string }; + message = err.error; + } captureError({ eventName: MEMBER_TRACKER_EVENTS.invite, payload: { emails: data.emails.map((email) => email.email), }, - error: err, + error: error as Error, }); setToast({ type: TOAST_TYPE.ERROR, title: "Error!", - message: `${err.error ?? t("something_went_wrong_please_try_again")}`, + message: `${message ?? t("something_went_wrong_please_try_again")}`, }); - throw err; + throw error; } }; @@ -137,6 +141,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) { className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400" placeholder={`${t("search")}...`} value={searchQuery} + // eslint-disable-next-line jsx-a11y/no-autofocus autoFocus onChange={(e) => setSearchQuery(e.target.value)} /> @@ -146,6 +151,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) { handleUpdate={handleRoleFilterUpdate} memberType="workspace" /> + {canPerformWorkspaceAdminActions && (