[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

Author: b-saikrishnakanth

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() {
             <div className="w-full h-full overflow-y-scroll md:pt-page-y">
               <Outlet />
             </div>
+            <WorkspaceSettingsRightSidebar workspaceSlug={workspaceSlug} />
           </div>
         )}
       </div>
     </>
   );
-}
+});
 
-export default observer(WorkspaceSettingLayout);
+export default WorkspaceSettingLayout;

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<string>("");
@@ -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"
             />
+            <MembersActivityButton workspaceSlug={workspaceSlug} />
             {canPerformWorkspaceAdminActions && (
               <Button
                 variant="primary"
@@ -163,6 +169,6 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
       </section>
     </SettingsContentWrapper>
   );
-}
+});
 
-export default observer(WorkspaceMembersSettingsPage);
+export default WorkspaceMembersSettingsPage;

apps/web/ce/components/workspace/members/index.ts

@@ -0,0 +1,2 @@
+export * from "./invite-modal";
+export * from "./members-activity-button";

apps/web/ce/components/workspace/members/members-activity-button.tsx

@@ -0,0 +1,6 @@
+import { observer } from "mobx-react";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MembersActivityButton = observer(function MembersActivityButton(props: { workspaceSlug: string }) {
+  return <></>;
+});

apps/web/ce/components/workspace/right-sidebar/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/ce/components/workspace/right-sidebar/root.tsx

@@ -0,0 +1,10 @@
+import { observer } from "mobx-react";
+
+type TWorkspaceSettingsRightSidebarProps = { workspaceSlug: string };
+
+export const WorkspaceSettingsRightSidebar = observer(function WorkspaceSettingsRightSidebar(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  props: TWorkspaceSettingsRightSidebarProps
+) {
+  return <></>;
+});