chore: add authorization to the gantt chart (#2074)

web/components/cycles/gantt-chart/cycle-issues-layout.tsx

@@ -5,6 +5,7 @@ import useIssuesView from "hooks/use-issues-view";
 import useUser from "hooks/use-user";
 import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -18,6 +19,7 @@ export const CycleIssuesGanttChartView = () => {
   const { orderBy } = useIssuesView();
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
     workspaceSlug as string,
@@ -25,6 +27,8 @@ export const CycleIssuesGanttChartView = () => {
     cycleId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -37,7 +41,10 @@ export const CycleIssuesGanttChartView = () => {
         }
         SidebarBlockRender={IssueGanttSidebarBlock}
         BlockRender={IssueGanttBlock}
-        enableReorder={orderBy === "sort_order"}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={orderBy === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>

web/components/cycles/gantt-chart/cycles-list-layout.tsx

@@ -8,6 +8,7 @@ import { KeyedMutator } from "swr";
 import cyclesService from "services/cycles.service";
 // hooks
 import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
 import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
@@ -24,6 +25,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
   const { workspaceSlug } = router.query;
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
@@ -71,6 +73,8 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
           }))
       : [];
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full overflow-y-auto">
       <GanttChartRoot
@@ -83,6 +87,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         enableBlockLeftResize={false}
         enableBlockRightResize={false}
         enableBlockMove={false}
+        enableReorder={isAllowed}
       />
     </div>
   );

web/components/issues/gantt-chart/layout.tsx

@@ -5,6 +5,7 @@ import useIssuesView from "hooks/use-issues-view";
 import useUser from "hooks/use-user";
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -18,12 +19,15 @@ export const IssueGanttChartView = () => {
   const { orderBy } = useIssuesView();
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartIssues(
     workspaceSlug as string,
     projectId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -36,7 +40,10 @@ export const IssueGanttChartView = () => {
         }
         BlockRender={IssueGanttBlock}
         SidebarBlockRender={IssueGanttSidebarBlock}
-        enableReorder={orderBy === "sort_order"}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={orderBy === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>

web/components/modules/gantt-chart/module-issues-layout.tsx

@@ -7,6 +7,7 @@ import useIssuesView from "hooks/use-issues-view";
 import useUser from "hooks/use-user";
 import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -22,6 +23,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
   const { orderBy } = useIssuesView();
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
     workspaceSlug as string,
@@ -29,6 +31,8 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
     moduleId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -41,7 +45,10 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
         }
         SidebarBlockRender={IssueGanttSidebarBlock}
         BlockRender={IssueGanttBlock}
-        enableReorder={orderBy === "sort_order"}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={orderBy === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>

web/components/modules/gantt-chart/modules-list-layout.tsx

@@ -1,7 +1,6 @@
 import { FC } from "react";
 
 import { useRouter } from "next/router";
-import Link from "next/link";
 
 import { KeyedMutator } from "swr";
 
@@ -9,6 +8,7 @@ import { KeyedMutator } from "swr";
 import modulesService from "services/modules.service";
 // hooks
 import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
 import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
@@ -25,6 +25,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
   const { workspaceSlug } = router.query;
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
@@ -78,6 +79,8 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
           }))
       : [];
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full overflow-y-auto">
       <GanttChartRoot
@@ -87,6 +90,10 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
         SidebarBlockRender={ModuleGanttSidebarBlock}
         BlockRender={ModuleGanttBlock}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed}
       />
     </div>
   );

web/components/views/gantt-chart.tsx

@@ -6,6 +6,7 @@ import { useRouter } from "next/router";
 import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
 import useUser from "hooks/use-user";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
@@ -19,6 +20,7 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
   const { workspaceSlug, projectId, viewId } = router.query;
 
   const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
 
   const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
     workspaceSlug as string,
@@ -26,6 +28,8 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
     viewId as string
   );
 
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -38,6 +42,10 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
         }
         SidebarBlockRender={IssueGanttSidebarBlock}
         BlockRender={IssueGanttBlock}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed}
       />
     </div>
   );