[WEB-1255] fix: edit and delete access control for views (#4964)

web/core/components/views/quick-actions.tsx

@@ -32,9 +32,11 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
   // store hooks
   const {
     membership: { currentProjectRole },
+    data,
   } = useUser();
   // auth
-  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  const isOwner = view?.owned_by === data?.id;
+  const isAdmin = !!currentProjectRole && currentProjectRole == EUserProjectRoles.ADMIN;
 
   const viewLink = `${workspaceSlug}/projects/${projectId}/views/${view.id}`;
   const handleCopyText = () =>
@@ -53,7 +55,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
       action: () => setCreateUpdateViewModal(true),
       title: "Edit",
       icon: Pencil,
-      shouldRender: isEditingAllowed,
+      shouldRender: isOwner,
     },
     {
       key: "open-new-tab",
@@ -72,7 +74,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
       action: () => setDeleteViewModal(true),
       title: "Delete",
       icon: Trash2,
-      shouldRender: isEditingAllowed,
+      shouldRender: isOwner || isAdmin,
     },
   ];
 

web/core/components/views/view-list-item-action.tsx

@@ -56,7 +56,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
     removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
   };
 
-  const createdByDetails = view.created_by ? getUserDetails(view.created_by) : undefined;
+  const ownedByDetails = view.owned_by ? getUserDetails(view.owned_by) : undefined;
 
   return (
     <>
@@ -81,7 +81,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
       </div>
 
       {/* created by */}
-      {<ButtonAvatars showTooltip={false} userIds={createdByDetails?.id ?? []} />}
+      {<ButtonAvatars showTooltip={false} userIds={ownedByDetails?.id ?? []} />}
 
       {isEditingAllowed && (
         <FavoriteStar

web/core/components/workspace/views/quick-action.tsx

@@ -11,8 +11,8 @@ import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from
 // components
 import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "@/components/workspace";
 // constants
-import { EUserProjectRoles } from "@/constants/project";
 import { EViewAccess } from "@/constants/views";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
@@ -35,9 +35,11 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
   // store hooks
   const {
     membership: { currentWorkspaceRole },
+    data,
   } = useUser();
   // auth
-  const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserProjectRoles.MEMBER;
+  const isOwner = view?.owned_by === data?.id;
+  const isAdmin = !!currentWorkspaceRole && currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
 
   const viewLink = `${workspaceSlug}/workspace-views/${view.id}`;
   const handleCopyText = () =>
@@ -56,7 +58,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
       action: () => setUpdateViewModal(true),
       title: "Edit",
       icon: Pencil,
-      shouldRender: isEditingAllowed,
+      shouldRender: isOwner,
     },
     {
       key: "open-new-tab",
@@ -75,7 +77,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
       action: () => setDeleteViewModal(true),
       title: "Delete",
       icon: Trash2,
-      shouldRender: isEditingAllowed,
+      shouldRender: isOwner || isAdmin,
     },
   ];
 

web/core/store/member/index.ts

@@ -1,5 +1,6 @@
-import { action, makeObservable, observable } from "mobx";
-// types
+import { makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// type
 import { IUserLite } from "@plane/types";
 // store
 import { CoreRootStore } from "../root.store";
@@ -27,8 +28,6 @@ export class MemberRootStore implements IMemberRootStore {
     makeObservable(this, {
       // observables
       memberMap: observable,
-      // computed actions
-      getUserDetails: action,
     });
     // sub-stores
     this.workspace = new WorkspaceMemberStore(this, _rootStore);
@@ -39,5 +38,5 @@ export class MemberRootStore implements IMemberRootStore {
    * @description get user details rom userId
    * @param userId
    */
-  getUserDetails = (userId: string): IUserLite | undefined => this.memberMap?.[userId] ?? undefined;
+  getUserDetails = computedFn((userId: string): IUserLite | undefined => this.memberMap?.[userId] ?? undefined);
 }