From b4f51cb5af7c2eb274773a303a8525968a3f9e39 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 13 Dec 2023 23:05:02 +0530
Subject: [PATCH] chore: cycle and module sidebar permission validation (#3095)

---
 web/components/cycles/sidebar.tsx  | 19 +++++++---
 web/components/modules/sidebar.tsx | 59 ++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 4ae5c9d8b..c99ad9519 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -30,6 +30,8 @@ import {
 } from "helpers/date-time.helper";
 // types
 import { ICycle } from "types";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 // fetch-keys
 import { CYCLE_STATUS } from "constants/cycle";
 
@@ -53,6 +55,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const {
     cycle: cycleDetailsStore,
     trackEvent: { setTrackElement },
+    user: { currentProjectRole },
   } = useMobxStore();
 
   const cycleDetails = cycleDetailsStore.cycle_details[cycleId] ?? undefined;
@@ -286,6 +289,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         : `${cycleDetails.total_issues}`
       : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       {cycleDetails && workspaceSlug && projectId && (
@@ -312,7 +317,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             <button onClick={handleCopyText}>
               <LinkIcon className="h-3 w-3 text-custom-text-300" />
             </button>
-            {!isCompleted && (
+            {!isCompleted && isEditingAllowed && (
               <CustomMenu width="lg" placement="bottom-end" ellipsis>
                 <CustomMenu.MenuItem
                   onClick={() => {
@@ -349,8 +354,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="relative flex h-full w-52 items-center gap-2.5">
               <Popover className="flex h-full items-center justify-center rounded-lg">
                 <Popover.Button
-                  disabled={isCompleted ?? false}
-                  className="cursor-default text-sm font-medium text-custom-text-300"
+                  className={`text-sm font-medium text-custom-text-300 ${
+                    isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                  }`}
+                  disabled={isCompleted || !isEditingAllowed}
                 >
                   {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
                 </Popover.Button>
@@ -385,8 +392,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
               <Popover className="flex h-full items-center justify-center rounded-lg">
                 <>
                   <Popover.Button
-                    disabled={isCompleted ?? false}
-                    className="cursor-default text-sm font-medium text-custom-text-300"
+                    className={`text-sm font-medium text-custom-text-300 ${
+                      isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                    }`}
+                    disabled={isCompleted ?? !isEditingAllowed}
                   >
                     {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
                   </Popover.Button>
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 85e542434..ea7acfbaa 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -261,6 +261,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         : `${moduleDetails.total_issues}`
       : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
 
+  const isEditingAllowed = !!userRole && userRole >= EUserWorkspaceRoles.MEMBER;
+
   return (
     <>
       <LinkModal
@@ -290,14 +292,16 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
             <button onClick={handleCopyText}>
               <LinkIcon className="h-3 w-3 text-custom-text-300" />
             </button>
-            <CustomMenu width="lg" placement="bottom-end" ellipsis>
-              <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
-                <span className="flex items-center justify-start gap-2">
-                  <Trash2 className="h-3 w-3" />
-                  <span>Delete module</span>
-                </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
+            {isEditingAllowed && (
+              <CustomMenu width="lg" placement="bottom-end" ellipsis>
+                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-3 w-3" />
+                    <span>Delete module</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
           </div>
         </div>
 
@@ -311,7 +315,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                 <CustomSelect
                   customButton={
                     <span
-                      className="flex h-6 w-20 cursor-default items-center justify-center rounded-sm text-center text-xs"
+                      className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+                        isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                      }`}
                       style={{
                         color: moduleStatus ? moduleStatus.color : "#a3a3a2",
                         backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
@@ -324,6 +330,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                   onChange={(value: any) => {
                     submitChanges({ status: value });
                   }}
+                  disabled={!isEditingAllowed}
                 >
                   {MODULE_STATUS.map((status) => (
                     <CustomSelect.Option key={status.value} value={status.value}>
@@ -339,7 +346,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="relative flex h-full w-52 items-center gap-2.5">
               <Popover className="flex h-full items-center justify-center rounded-lg">
-                <Popover.Button className="cursor-default text-sm font-medium text-custom-text-300">
+                <Popover.Button
+                  className={`text-sm font-medium text-custom-text-300 ${
+                    isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                  }`}
+                  disabled={!isEditingAllowed}
+                >
                   {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
                 </Popover.Button>
 
@@ -371,7 +383,12 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               <MoveRight className="h-4 w-4 text-custom-text-300" />
               <Popover className="flex h-full items-center justify-center rounded-lg">
                 <>
-                  <Popover.Button className="cursor-default text-sm font-medium text-custom-text-300">
+                  <Popover.Button
+                    className={`text-sm font-medium text-custom-text-300 ${
+                      isEditingAllowed ? "cursor-default" : "cursor-not-allowed"
+                    }`}
+                    disabled={!isEditingAllowed}
+                  >
                     {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
                   </Popover.Button>
 
@@ -553,15 +570,17 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                       <div className="mt-2 flex h-72 w-full flex-col space-y-3 overflow-y-auto">
                         {userRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
                           <>
-                            <div className="flex w-full items-center justify-end">
-                              <button
-                                className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
-                                onClick={() => setModuleLinkModal(true)}
-                              >
-                                <Plus className="h-3 w-3" />
-                                Add link
-                              </button>
-                            </div>
+                            {isEditingAllowed && (
+                              <div className="flex w-full items-center justify-end">
+                                <button
+                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  onClick={() => setModuleLinkModal(true)}
+                                >
+                                  <Plus className="h-3 w-3" />
+                                  Add link
+                                </button>
+                              </div>
+                            )}
 
                             <LinksList
                               links={moduleDetails.link_module}