feat: enhance workspace settings layout and members page with new components

Author: b-saikrishnakanth

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx

@@ -8,12 +8,14 @@ import type { EUserWorkspaceRoles } from "@plane/types";
 import { NotAuthorizedView } from "@/components/auth-screens/not-authorized-view";
 import { getWorkspaceActivePath, pathnameToAccessKey } from "@/components/settings/helper";
 import { SettingsMobileNav } from "@/components/settings/mobile";
+// plane web components
+import { WorkspaceSettingsSidebarDetails } from "@/plane-web/components/workspace/sidebar-details";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
 // local components
 import { WorkspaceSettingsSidebar } from "./sidebar";
 
-function WorkspaceSettingLayout() {
+export const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout() {
   // store hooks
   const { workspaceUserInfo, getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
   // next hooks
@@ -42,11 +44,10 @@ function WorkspaceSettingLayout() {
             <div className="w-full h-full overflow-y-scroll md:pt-page-y">
               <Outlet />
             </div>
+            <WorkspaceSettingsSidebarDetails />
           </div>
         )}
       </div>
     </>
   );
-}
-
-export default observer(WorkspaceSettingLayout);
+});

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx

@@ -28,10 +28,12 @@ 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) {
+export const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsPage({
+  params,
+}: Route.ComponentProps) {
   // states
   const [inviteModal, setInviteModal] = useState(false);
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -70,23 +72,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 +143,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 +153,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
               handleUpdate={handleRoleFilterUpdate}
               memberType="workspace"
             />
+            <MembersActivityButton workspaceSlug={workspaceSlug} />
             {canPerformWorkspaceAdminActions && (
               <Button
                 variant="primary"
@@ -163,6 +171,4 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
       </section>
     </SettingsContentWrapper>
   );
-}
-
-export default observer(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/sidebar-details/index.ts

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

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

@@ -0,0 +1,5 @@
+import { observer } from "mobx-react";
+
+export const WorkspaceSettingsSidebarDetails = observer(function WorkspaceSettingsSidebarDetails() {
+  return <></>;
+});