chore: user permission related fix (#3066)

* chore: page action user permission validation

* chore: cycle & module action user permission validation

* chore: issue quick action user permission validation

* chore: spreadsheet layout improvement

web/components/cycles/cycles-board-card.tsx

@@ -23,6 +23,7 @@ import { ICycle } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -36,6 +37,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const {
     cycle: cycleStore,
     trackEvent: { setTrackElement },
+    user: userStore,
   } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
@@ -49,6 +51,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const startDate = new Date(cycle.start_date ?? "");
   const isDateValid = cycle.start_date || cycle.end_date;
 
+  const { currentProjectRole } = userStore;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const router = useRouter();
 
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
@@ -235,7 +240,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
               <div className="z-10 flex items-center gap-1.5">
-                {cycle.is_favorite ? (
+                {isEditingAllowed &&
+                  (cycle.is_favorite ? (
                     <button type="button" onClick={handleRemoveFromFavorites}>
                       <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                     </button>
@@ -243,9 +249,9 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                     <button type="button" onClick={handleAddToFavorites}>
                       <Star className="h-3.5 w-3.5 text-custom-text-200" />
                     </button>
-                )}
+                  ))}
                 <CustomMenu width="auto" ellipsis className="z-10">
-                  {!isCompleted && (
+                  {!isCompleted && isEditingAllowed && (
                     <>
                       <CustomMenu.MenuItem onClick={handleEditCycle}>
                         <span className="flex items-center justify-start gap-2">

web/components/cycles/cycles-list-item.tsx

@@ -24,6 +24,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICycle } from "types";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type TCyclesListItem = {
   cycle: ICycle;
@@ -41,6 +42,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const {
     cycle: cycleStore,
     trackEvent: { setTrackElement },
+    user: userStore,
   } = useMobxStore();
   // toast
   const { setToastAlert } = useToast();
@@ -53,6 +55,9 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
 
+  const { currentProjectRole } = userStore;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const router = useRouter();
 
   const cycleTotalIssues =
@@ -226,8 +231,8 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 )}
               </div>
             </Tooltip>
-
+            {isEditingAllowed &&
-            {cycle.is_favorite ? (
+              (cycle.is_favorite ? (
                 <button type="button" onClick={handleRemoveFromFavorites}>
                   <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                 </button>
@@ -235,10 +240,10 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 <button type="button" onClick={handleAddToFavorites}>
                   <Star className="h-3.5 w-3.5 text-custom-text-200" />
                 </button>
-            )}
+              ))}
 
             <CustomMenu width="auto" ellipsis>
-              {!isCompleted && (
+              {!isCompleted && isEditingAllowed && (
                 <>
                   <CustomMenu.MenuItem onClick={handleEditCycle}>
                     <span className="flex items-center justify-start gap-2">

web/components/issues/issue-layouts/properties/state.tsx

@@ -94,7 +94,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
 
   const label = (
     <Tooltip tooltipHeading="State" tooltipContent={selectedOption?.name ?? ""} position="top">
-      <div className="flex w-full cursor-pointer items-center gap-2 text-custom-text-200">
+      <div className="flex w-full items-center gap-2 text-custom-text-200">
         {selectedOption && <StateGroupIcon stateGroup={selectedOption?.group as any} color={selectedOption?.color} />}
         <span className="line-clamp-1 inline-block truncate">{selectedOption?.name ?? "State"}</span>
       </div>

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -12,6 +14,8 @@ import { copyUrlToClipboard } from "helpers/string.helper";
 import { IIssue } from "types";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EProjectStore } from "store/command-palette.store";
+// constant
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   const { issue, handleDelete, handleUpdate, customActionButton } = props;
@@ -24,6 +28,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   const [issueToEdit, setIssueToEdit] = useState<IIssue | null>(null);
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
+  const { user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   const { setToastAlert } = useToast();
 
   const handleCopyIssueLink = () => {
@@ -71,6 +81,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
+        {isEditingAllowed && (
+          <>
             <CustomMenu.MenuItem
               onClick={(e) => {
                 e.preventDefault();
@@ -108,6 +120,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
                 Delete issue
               </div>
             </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );

web/components/modules/module-card-item.tsx

@@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
 import { IModule } from "types";
 // constants
 import { MODULE_STATUS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   module: IModule;
@@ -35,7 +36,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const moduleTotalIssues =
     module.backlog_issues +
@@ -217,7 +222,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               )}
 
               <div className="z-10 flex items-center gap-1.5">
-                {module.is_favorite ? (
+                {isEditingAllowed &&
+                  (module.is_favorite ? (
                     <button type="button" onClick={handleRemoveFromFavorites}>
                       <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                     </button>
@@ -225,8 +231,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                     <button type="button" onClick={handleAddToFavorites}>
                       <Star className="h-3.5 w-3.5 text-custom-text-200" />
                     </button>
-                )}
+                  ))}
+
                 <CustomMenu width="auto" ellipsis className="z-10">
+                  {isEditingAllowed && (
+                    <>
                       <CustomMenu.MenuItem onClick={handleEditModule}>
                         <span className="flex items-center justify-start gap-2">
                           <Pencil className="h-3 w-3" />
@@ -239,6 +248,8 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                           <span>Delete module</span>
                         </span>
                       </CustomMenu.MenuItem>
+                    </>
+                  )}
                   <CustomMenu.MenuItem onClick={handleCopyText}>
                     <span className="flex items-center justify-start gap-2">
                       <LinkIcon className="h-3 w-3" />

web/components/modules/module-list-item.tsx

@@ -19,6 +19,7 @@ import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper"
 import { IModule } from "types";
 // constants
 import { MODULE_STATUS } from "constants/module";
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   module: IModule;
@@ -35,7 +36,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { module: moduleStore } = useMobxStore();
+  const { module: moduleStore, user: userStore } = useMobxStore();
+
+  const { currentProjectRole } = userStore;
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
 
@@ -194,7 +199,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
               </div>
             </Tooltip>
 
-            {module.is_favorite ? (
+            {isEditingAllowed &&
+              (module.is_favorite ? (
                 <button type="button" onClick={handleRemoveFromFavorites} className="z-[1]">
                   <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
                 </button>
@@ -202,9 +208,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                 <button type="button" onClick={handleAddToFavorites} className="z-[1]">
                   <Star className="h-3.5 w-3.5 text-custom-text-300" />
                 </button>
-            )}
+              ))}
 
             <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+              {isEditingAllowed && (
+                <>
                   <CustomMenu.MenuItem onClick={handleEditModule}>
                     <span className="flex items-center justify-start gap-2">
                       <Pencil className="h-3 w-3" />
@@ -217,6 +225,8 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                       <span>Delete module</span>
                     </span>
                   </CustomMenu.MenuItem>
+                </>
+              )}
               <CustomMenu.MenuItem onClick={handleCopyText}>
                 <span className="flex items-center justify-start gap-2">
                   <LinkIcon className="h-3 w-3" />

web/components/pages/pages-list/list-item.tsx

@@ -154,6 +154,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
   const userCanChangeAccess = isCurrentUserOwner;
   const userCanArchive = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
   const userCanDelete = isCurrentUserOwner || currentProjectRole === EUserWorkspaceRoles.ADMIN;
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>
@@ -208,6 +209,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                     <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
                   </Tooltip>
                 )}
+                {isEditingAllowed && (
                   <Tooltip tooltipContent={`${page.is_favorite ? "Remove from favorites" : "Mark as favorite"}`}>
                     {page.is_favorite ? (
                       <button type="button" onClick={handleRemoveFromFavorites}>
@@ -219,6 +221,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                       </button>
                     )}
                   </Tooltip>
+                )}
                 {userCanChangeAccess && (
                   <Tooltip
                     tooltipContent={`${
@@ -255,7 +258,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                           </div>
                         </CustomMenu.MenuItem>
                       )}
-                      {userCanDelete && (
+                      {userCanDelete && isEditingAllowed && (
                         <CustomMenu.MenuItem onClick={handleDeletePage}>
                           <div className="flex items-center gap-2">
                             <Trash2 className="h-3 w-3" />
@@ -266,7 +269,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                     </>
                   ) : (
                     <>
-                      {userCanEdit && (
+                      {userCanEdit && isEditingAllowed && (
                         <CustomMenu.MenuItem onClick={handleEditPage}>
                           <div className="flex items-center gap-2">
                             <Pencil className="h-3 w-3" />
@@ -274,7 +277,7 @@ export const PagesListItem: FC<IPagesListItem> = observer((props) => {
                           </div>
                         </CustomMenu.MenuItem>
                       )}
-                      {userCanArchive && (
+                      {userCanArchive && isEditingAllowed && (
                         <CustomMenu.MenuItem onClick={handleArchivePage}>
                           <div className="flex items-center gap-2">
                             <Archive className="h-3 w-3" />