From 43cbe44a353a4d3ae5b97d2283cdc22a9d5f3001 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 12 Dec 2023 11:49:43 +0530
Subject: [PATCH] chore: issue layout quick add issue button permission
 validation

---
 web/components/gantt-chart/sidebar/sidebar.tsx     | 14 ++++++++++++--
 .../issues/issue-layouts/calendar/calendar.tsx     | 13 ++++++++++++-
 .../issues/issue-layouts/calendar/day-tile.tsx     |  4 +++-
 .../issues/issue-layouts/calendar/week-days.tsx    |  3 +++
 .../issues/issue-layouts/gantt/base-gantt-root.tsx |  2 ++
 .../issue-layouts/kanban/base-kanban-root.tsx      |  2 +-
 .../issues/issue-layouts/kanban/default.tsx        |  2 +-
 .../issues/issue-layouts/list/default.tsx          |  2 +-
 .../spreadsheet/base-spreadsheet-root.tsx          |  3 ++-
 .../issue-layouts/spreadsheet/spreadsheet-view.tsx |  4 +++-
 10 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/web/components/gantt-chart/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
index d163f8a89..23f8f8d76 100644
--- a/web/components/gantt-chart/sidebar/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/sidebar.tsx
@@ -27,11 +27,21 @@ type Props = {
     viewId?: string
   ) => Promise<IIssue | undefined>;
   viewId?: string;
+  disableIssueCreation?: boolean;
 };
 
 export const IssueGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, enableReorder, enableQuickIssueCreate, quickAddCallback, viewId } = props;
+  const {
+    title,
+    blockUpdateHandler,
+    blocks,
+    enableReorder,
+    enableQuickIssueCreate,
+    quickAddCallback,
+    viewId,
+    disableIssueCreation,
+  } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -160,7 +170,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
               )}
               {droppableProvided.placeholder}
             </>
-            {enableQuickIssueCreate && (
+            {enableQuickIssueCreate && !disableIssueCreation && (
               <GanttInlineCreateIssueForm quickAddCallback={quickAddCallback} viewId={viewId} />
             )}
           </div>
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index afcbee3f9..a2626b023 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -16,6 +16,8 @@ import {
   IProjectIssuesFilterStore,
   IViewIssuesFilterStore,
 } from "store/issues";
+// constants
+import { EUserWorkspaceRoles } from "constants/workspace";
 
 type Props = {
   issuesFilterStore:
@@ -41,7 +43,14 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
     props;
 
-  const { calendar: calendarStore } = useMobxStore();
+  const {
+    calendar: calendarStore,
+    projectIssues: issueStore,
+    user: { currentProjectRole },
+  } = useMobxStore();
+
+  const { enableIssueCreation } = issueStore?.viewFlags || {};
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   const calendarPayload = calendarStore.calendarPayload;
 
@@ -71,6 +80,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                     issues={issues}
                     groupedIssueIds={groupedIssueIds}
                     enableQuickIssueCreate
+                    disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
                     quickActions={quickActions}
                     quickAddCallback={quickAddCallback}
                     viewId={viewId}
@@ -85,6 +95,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               issues={issues}
               groupedIssueIds={groupedIssueIds}
               enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
               quickActions={quickActions}
               quickAddCallback={quickAddCallback}
               viewId={viewId}
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index b999f6155..c9f022ebe 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -26,6 +26,7 @@ type Props = {
   groupedIssueIds: IGroupedIssues;
   quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -43,6 +44,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     groupedIssueIds,
     quickActions,
     enableQuickIssueCreate,
+    disableIssueCreation,
     quickAddCallback,
     viewId,
   } = props;
@@ -86,7 +88,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                 ref={provided.innerRef}
               >
                 <CalendarIssueBlocks issues={issues} issueIdList={issueIdList} quickActions={quickActions} />
-                {enableQuickIssueCreate && (
+                {enableQuickIssueCreate && !disableIssueCreation && (
                   <div className="px-2 py-1">
                     <CalendarQuickAddIssueForm
                       formKey="target_date"
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
index caa9fb239..1d7c4de3d 100644
--- a/web/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -25,6 +25,7 @@ type Props = {
   week: ICalendarWeek | undefined;
   quickActions: (issue: IIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,
@@ -42,6 +43,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     week,
     quickActions,
     enableQuickIssueCreate,
+    disableIssueCreation,
     quickAddCallback,
     viewId,
   } = props;
@@ -69,6 +71,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             groupedIssueIds={groupedIssueIds}
             quickActions={quickActions}
             enableQuickIssueCreate={enableQuickIssueCreate}
+            disableIssueCreation={disableIssueCreation}
             quickAddCallback={quickAddCallback}
             viewId={viewId}
           />
diff --git a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index f467df208..62df8fc79 100644
--- a/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -51,6 +51,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
 
   const issuesResponse = issueStore.getIssues;
   const issueIds = (issueStore.getIssuesIds ?? []) as TUnGroupedIssues;
+  const { enableIssueCreation } = issueStore?.viewFlags || {};
 
   const issues = issueIds.map((id) => issuesResponse?.[id]);
 
@@ -87,6 +88,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
               quickAddCallback={issueStore.quickAddIssue}
               viewId={viewId}
               enableQuickIssueCreate
+              disableIssueCreation={!enableIssueCreation || !isAllowed}
             />
           )}
           enableBlockLeftResize={isAllowed}
diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 05799f728..057ba0b87 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -330,7 +330,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               projects={workspaceProjects}
               showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
               isDragStarted={isDragStarted}
-              disableIssueCreation={true}
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
               enableQuickIssueCreate={enableQuickAdd}
               currentStore={currentStore}
               quickAddCallback={issueStore?.quickAddIssue}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 2f14ca3ab..87fb98bf7 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -149,7 +149,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
               </Droppable>
 
               <div className="sticky bottom-0 z-[0] w-full flex-shrink-0 bg-custom-background-90 py-1">
-                {enableQuickIssueCreate && (
+                {enableQuickIssueCreate && !disableIssueCreation && (
                   <KanBanQuickAddIssueForm
                     formKey="name"
                     groupId={getValueFromObject(_list, listKey) as string}
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index fe3b05e86..24781bb41 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -109,7 +109,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                   />
                 )}
 
-                {enableIssueQuickAdd && (
+                {enableIssueQuickAdd && !disableIssueCreation && (
                   <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
                     <ListQuickAddIssueForm
                       prePopulatedData={prePopulateQuickAddData(group_by, getValueFromObject(_list, listKey))}
diff --git a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index 090522cb0..42c40ceee 100644
--- a/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -50,7 +50,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
     user: userStore,
   } = useMobxStore();
 
-  const { enableInlineEditing, enableQuickAdd } = issueStore?.viewFlags || {};
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
 
   const { currentProjectRole } = userStore;
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
@@ -120,6 +120,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
       quickAddCallback={issueStore.quickAddIssue}
       viewId={viewId}
       enableQuickCreateIssue={enableQuickAdd}
+      disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
     />
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 69ac625e8..370bbfa0f 100644
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -33,6 +33,7 @@ type Props = {
   viewId?: string;
   canEditProperties: (projectId: string | undefined) => boolean;
   enableQuickCreateIssue?: boolean;
+  disableIssueCreation?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -50,6 +51,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     viewId,
     canEditProperties,
     enableQuickCreateIssue,
+    disableIssueCreation,
   } = props;
   // states
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
@@ -147,7 +149,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
         <div className="border-t border-custom-border-100">
           <div className="z-5 sticky bottom-0 left-0 mb-3">
-            {enableQuickCreateIssue && (
+            {enableQuickCreateIssue && !disableIssueCreation && (
               <SpreadsheetQuickAddIssueForm formKey="name" quickAddCallback={quickAddCallback} viewId={viewId} />
             )}
           </div>