Merge pull request #3086 from makeplane/fix/issue_layout_permission_validation

chore: issue layout quick add issue button permission validation

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>

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}

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"

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}
           />

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}

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}

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}

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))}

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}
     />
   );
 });

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>