Revert "[WEB-4959]chore: refactor project member page #8464" (#8476)

This reverts commit c97e418515.

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

@@ -9,7 +9,7 @@ import { SettingsMobileNav } from "@/components/settings/mobile";
 import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants";
 import type { EUserWorkspaceRoles } from "@plane/types";
 // plane web components
-import { SettingsRightSidebar } from "@/plane-web/components/settings/right-sidebar";
+import { WorkspaceSettingsRightSidebar } from "@/plane-web/components/workspace/right-sidebar";
 // hooks
 import { useUserPermissions } from "@/hooks/store/user";
 // local components
@@ -48,7 +48,7 @@ const WorkspaceSettingLayout = observer(function WorkspaceSettingLayout({ params
             <div className="w-full h-full overflow-y-scroll md:pt-page-y">
               <Outlet />
             </div>
-            <SettingsRightSidebar workspaceSlug={workspaceSlug} />
+            <WorkspaceSettingsRightSidebar workspaceSlug={workspaceSlug} />
           </div>
         )}
       </div>

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

@@ -40,7 +40,7 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
   const {
     workspace: { workspaceMemberIds, inviteMembersToWorkspace, filtersStore },
   } = useMember();
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, mutateWorkspaceMembersActivity } = useWorkspace();
   const { t } = useTranslation();
 
   // derived values
@@ -53,6 +53,7 @@ const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsP
   const handleWorkspaceInvite = async (data: IWorkspaceBulkInviteFormData) => {
     try {
       await inviteMembersToWorkspace(workspaceSlug, data);
+      void mutateWorkspaceMembersActivity(workspaceSlug);
 
       setInviteModal(false);
 

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

@@ -7,13 +7,10 @@ import { SettingsMobileNav } from "@/components/settings/mobile";
 import { ProjectSettingsSidebar } from "@/components/settings/project/sidebar";
 // plane web imports
 import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
-import { SettingsRightSidebar } from "@/plane-web/components/settings/right-sidebar";
 // types
 import type { Route } from "./+types/layout";
 
-export const ProjectDetailSettingsLayout = observer(function ProjectDetailSettingsLayout({
+function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
-  params,
-}: Route.ComponentProps) {
   const { workspaceSlug, projectId } = params;
   // router
   const pathname = usePathname();
@@ -27,11 +24,10 @@ export const ProjectDetailSettingsLayout = observer(function ProjectDetailSettin
           <div className="w-full h-full overflow-y-scroll md:pt-page-y">
             <Outlet />
           </div>
-          <SettingsRightSidebar workspaceSlug={workspaceSlug} projectId={projectId} />
         </ProjectAuthWrapper>
       </div>
     </>
   );
-});
+}
 
-export default ProjectDetailSettingsLayout;
+export default observer(ProjectDetailSettingsLayout);

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

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

apps/web/ce/components/settings/right-sidebar.tsx

@@ -1,10 +0,0 @@
-import { observer } from "mobx-react";
-
-type TSettingsRightSidebarProps = { workspaceSlug: string; projectId?: string };
-
-export const SettingsRightSidebar = observer(function SettingsRightSidebar(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  props: TSettingsRightSidebarProps
-) {
-  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 <></>;
+});

apps/web/ce/store/member/project-member.store.ts

@@ -41,13 +41,4 @@ export class ProjectMemberStore extends BaseProjectMemberStore implements IProje
    * @param userId - The ID of the user to remove from the project
    */
   processMemberRemoval = (projectId: string, userId: string) => this.handleMemberRemoval(projectId, userId);
-
-  /**
-   * @description Mutate project members activity
-   * @param workspaceSlug
-   * @param projectId
-   */
-  mutateProjectMembersActivity = async (_workspaceSlug: string, _projectId: string) => {
-    // No-op in default/CE version
-  };
 }

apps/web/core/components/project/member-list.tsx

@@ -14,8 +14,6 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { MemberListFiltersDropdown } from "./dropdowns/filters/member-list";
 import { ProjectMemberListItem } from "./member-list-item";
 import { SendProjectInvitationModal } from "./send-project-invitation-modal";
-// plane web components
-import { ProjectMembersActivityButton } from "@/plane-web/components/projects/members/members-activity-button";
 
 type TProjectMemberListProps = {
   projectId: string;
@@ -86,7 +84,6 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
               className="w-full max-w-[234px] border-none bg-transparent text-13 focus:outline-none placeholder:text-placeholder"
               placeholder="Search"
               value={searchQuery}
-              // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus
               onChange={(e) => setSearchQuery(e.target.value)}
             />
@@ -96,11 +93,9 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
             handleUpdate={handleRoleFilterUpdate}
             memberType="project"
           />
-          {isAdmin && <ProjectMembersActivityButton workspaceSlug={workspaceSlug} projectId={projectId} />}
           {isAdmin && (
             <Button
               variant="primary"
-              size="lg"
               onClick={() => {
                 setInviteModal(true);
               }}

apps/web/core/components/workspace/settings/invitations-list-item.tsx

@@ -14,6 +14,7 @@ import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-wor
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspace } from "@/hooks/store/use-workspace";
 
 type Props = {
   invitationId: string;
@@ -29,6 +30,7 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
   const { t } = useTranslation();
   // store hooks
   const { allowPermissions, workspaceInfoBySlug } = useUserPermissions();
+  const { mutateWorkspaceMembersActivity } = useWorkspace();
   const {
     workspace: { updateMemberInvitation, deleteMemberInvitation, getWorkspaceInvitationDetails },
   } = useMember();
@@ -57,6 +59,7 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio
         title: "Success!",
         message: "Invitation removed successfully.",
       });
+      void mutateWorkspaceMembersActivity(workspaceSlug);
     } catch (err: unknown) {
       const error = err as { error?: string };
       setToast({

apps/web/core/components/workspace/settings/member-columns.tsx

@@ -16,6 +16,7 @@ import { getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web constants
 
 export interface RowData {
@@ -120,6 +121,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
   const {
     workspace: { updateMember },
   } = useMember();
+  const { mutateWorkspaceMembersActivity } = useWorkspace();
   const { data: currentUser } = useUser();
 
   // derived values
@@ -154,6 +156,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
                   await updateMember(workspaceSlug.toString(), rowData.member.id, {
                     role: value as unknown as EUserPermissions,
                   });
+                  void mutateWorkspaceMembersActivity(workspaceSlug);
                 } catch (err: unknown) {
                   const error = err as { error?: string | string[] };
                   const errorString = Array.isArray(error?.error) ? error.error[0] : error?.error;

apps/web/core/components/workspace/settings/members-list-item.tsx

@@ -32,7 +32,7 @@ export const WorkspaceMembersListItem = observer(function WorkspaceMembersListIt
     workspace: { removeMemberFromWorkspace },
   } = useMember();
   const { leaveWorkspace } = useUserPermissions();
-  const { getWorkspaceRedirectionUrl } = useWorkspace();
+  const { getWorkspaceRedirectionUrl, mutateWorkspaceMembersActivity } = useWorkspace();
   const { fetchCurrentUserSettings } = useUserSettings();
   const { t } = useTranslation();
   // derived values
@@ -59,6 +59,7 @@ export const WorkspaceMembersListItem = observer(function WorkspaceMembersListIt
 
     try {
       await removeMemberFromWorkspace(workspaceSlug.toString(), memberId);
+      void mutateWorkspaceMembersActivity(workspaceSlug);
     } catch (err: unknown) {
       const error = err as { error?: string };
       setToast({

apps/web/core/constants/fetch-keys.ts

@@ -154,10 +154,10 @@ export const APPLICATION_BY_CLIENT_ID = (clientId: string) => `APPLICATION_BY_CL
 export const APPLICATION_CATEGORIES_LIST = () => `APPLICATION_CATEGORIES_LIST`;
 
 // project level keys
-export const PROJECT_DETAILS = (_workspaceSlug: string, projectId: string) =>
+export const PROJECT_DETAILS = (workspaceSlug: string, projectId: string) =>
   `PROJECT_DETAILS_${projectId.toString().toUpperCase()}`;
 
-export const PROJECT_ME_INFORMATION = (_workspaceSlug: string, projectId: string) =>
+export const PROJECT_ME_INFORMATION = (workspaceSlug: string, projectId: string) =>
   `PROJECT_ME_INFORMATION_${projectId.toString().toUpperCase()}`;
 
 export const PROJECT_LABELS = (projectId: string, projectRole: EUserPermissions | undefined) =>
@@ -166,8 +166,6 @@ export const PROJECT_LABELS = (projectId: string, projectRole: EUserPermissions
 export const PROJECT_MEMBERS = (projectId: string, projectRole: EUserPermissions | undefined) =>
   `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_MEMBER_ACTIVITY = (projectId: string) => `PROJECT_MEMBER_ACTIVITY_${projectId.toUpperCase()}`;
-
 export const PROJECT_STATES = (projectId: string, projectRole: EUserPermissions | undefined) =>
   `PROJECT_STATES_${projectId.toString().toUpperCase()}_${projectRole}`;
 

apps/web/core/store/member/project/base-project-member.store.ts

@@ -81,7 +81,6 @@ export interface IBaseProjectMemberStore {
     role: EUserProjectRoles
   ) => Promise<TProjectMembership>;
   removeMemberFromProject: (workspaceSlug: string, projectId: string, userId: string) => Promise<void>;
-  mutateProjectMembersActivity: (workspaceSlug: string, projectId: string) => Promise<void>;
 }
 
 export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore {
@@ -316,13 +315,13 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
           });
         });
       });
-      update(this.projectRoot.projectMap, [projectId, "members"], (memberIds: string[]) =>
+      update(this.projectRoot.projectMap, [projectId, "members"], (memberIds) =>
         uniq([...memberIds, ...data.members.map((m) => m.member_id)])
       );
       this.projectRoot.projectMap[projectId].members = this.projectRoot.projectMap?.[projectId]?.members?.concat(
         data.members.map((m) => m.member_id)
       );
-      void this.mutateProjectMembersActivity(workspaceSlug, projectId);
+
       return response;
     });
 
@@ -376,7 +375,6 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
           role,
         }
       );
-      void this.mutateProjectMembersActivity(workspaceSlug, projectId);
       return response;
     } catch (error) {
       // revert back to original members in case of error
@@ -431,11 +429,11 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
   removeMemberFromProject = async (workspaceSlug: string, projectId: string, userId: string) => {
     const memberDetails = this.getProjectMemberDetails(userId, projectId);
     if (!memberDetails || !memberDetails?.id) throw new Error("Member not found");
-    await this.projectMemberService.deleteProjectMember(workspaceSlug, projectId, memberDetails?.id);
+    await this.projectMemberService.deleteProjectMember(workspaceSlug, projectId, memberDetails?.id).then(() => {
-    runInAction(() => {
+      runInAction(() => {
-      this.processMemberRemoval(projectId, userId);
+        this.processMemberRemoval(projectId, userId);
+      });
     });
-    void this.mutateProjectMembersActivity(workspaceSlug, projectId);
   };
 
   /**
@@ -503,11 +501,4 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
       throw error;
     }
   };
-
-  /**
-   * Mutate project members activity
-   * @param workspaceSlug
-   * @param projectId
-   */
-  abstract mutateProjectMembersActivity(workspaceSlug: string, projectId: string): Promise<void>;
 }

apps/web/core/store/member/workspace/workspace-member.store.ts

@@ -4,14 +4,14 @@ import { computedFn } from "mobx-utils";
 // types
 import type { EUserPermissions } from "@plane/constants";
 import type { IWorkspaceBulkInviteFormData, IWorkspaceMember, IWorkspaceMemberInvitation } from "@plane/types";
-// plane-web imports
+// plane-web constants
-import type { RootStore } from "@/plane-web/store/root.store";
 // services
 import { WorkspaceService } from "@/plane-web/services";
 // types
 import type { IRouterStore } from "@/store/router.store";
 import type { IUserStore } from "@/store/user";
 // store
+import type { CoreRootStore } from "../../root.store";
 import type { IMemberRootStore } from "../index.ts";
 import type { IWorkspaceMemberFiltersStore } from "./workspace-member-filters.store";
 import { WorkspaceMemberFiltersStore } from "./workspace-member-filters.store";
@@ -69,11 +69,10 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
   routerStore: IRouterStore;
   userStore: IUserStore;
   memberRoot: IMemberRootStore;
-  rootStore: RootStore;
   // services
   workspaceService;
 
-  constructor(_memberRoot: IMemberRootStore, _rootStore: RootStore) {
+  constructor(_memberRoot: IMemberRootStore, _rootStore: CoreRootStore) {
     makeObservable(this, {
       // observables
       workspaceMemberMap: observable,
@@ -96,7 +95,6 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
     this.routerStore = _rootStore.router;
     this.userStore = _rootStore.user;
     this.memberRoot = _memberRoot;
-    this.rootStore = _rootStore;
     // services
     this.workspaceService = new WorkspaceService();
   }
@@ -261,7 +259,6 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
         set(this.workspaceMemberMap, [workspaceSlug, userId, "role"], data.role);
       });
       await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberDetails.id, data);
-      void this.rootStore.workspaceRoot.mutateWorkspaceMembersActivity(workspaceSlug);
     } catch (error) {
       // revert back to original members in case of error
       runInAction(() => {
@@ -279,11 +276,11 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
   removeMemberFromWorkspace = async (workspaceSlug: string, userId: string) => {
     const memberDetails = this.getWorkspaceMemberDetails(userId);
     if (!memberDetails) throw new Error("Member not found");
-    await this.workspaceService.deleteWorkspaceMember(workspaceSlug, memberDetails?.id);
+    await this.workspaceService.deleteWorkspaceMember(workspaceSlug, memberDetails?.id).then(() => {
-    runInAction(() => {
+      runInAction(() => {
-      set(this.workspaceMemberMap, [workspaceSlug, userId, "is_active"], false);
+        set(this.workspaceMemberMap, [workspaceSlug, userId, "is_active"], false);
+      });
     });
-    void this.rootStore.workspaceRoot.mutateWorkspaceMembersActivity(workspaceSlug);
   };
 
   /**
@@ -304,9 +301,9 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @param data
    */
   inviteMembersToWorkspace = async (workspaceSlug: string, data: IWorkspaceBulkInviteFormData) => {
-    await this.workspaceService.inviteWorkspace(workspaceSlug, data);
+    const response = await this.workspaceService.inviteWorkspace(workspaceSlug, data);
     await this.fetchWorkspaceMemberInvitations(workspaceSlug);
-    void this.rootStore.workspaceRoot.mutateWorkspaceMembersActivity(workspaceSlug);
+    return response;
   };
 
   /**
@@ -320,7 +317,7 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
     invitationId: string,
     data: Partial<IWorkspaceMemberInvitation>
   ) => {
-    const originalMemberInvitations = [...(this.workspaceMemberInvitations?.[workspaceSlug] ?? [])]; // in case of error, we will revert back to original members
+    const originalMemberInvitations = [...this.workspaceMemberInvitations?.[workspaceSlug]]; // in case of error, we will revert back to original members
     try {
       const memberInvitations = originalMemberInvitations?.map((invitation) => ({
         ...invitation,
@@ -345,15 +342,14 @@ export class WorkspaceMemberStore implements IWorkspaceMemberStore {
    * @param workspaceSlug
    * @param memberId
    */
-  deleteMemberInvitation = async (workspaceSlug: string, invitationId: string) => {
+  deleteMemberInvitation = async (workspaceSlug: string, invitationId: string) =>
-    await this.workspaceService.deleteWorkspaceInvitations(workspaceSlug.toString(), invitationId);
+    await this.workspaceService.deleteWorkspaceInvitations(workspaceSlug.toString(), invitationId).then(() => {
-    runInAction(() => {
+      runInAction(() => {
-      this.workspaceMemberInvitations[workspaceSlug] = this.workspaceMemberInvitations[workspaceSlug].filter(
+        this.workspaceMemberInvitations[workspaceSlug] = this.workspaceMemberInvitations[workspaceSlug].filter(
-        (inv) => inv.id !== invitationId
+          (inv) => inv.id !== invitationId
-      );
+        );
+      });
     });
-    void this.rootStore.workspaceRoot.mutateWorkspaceMembersActivity(workspaceSlug);
-  };
 
   isUserSuspended = computedFn((userId: string, workspaceSlug: string) => {
     if (!workspaceSlug) return false;