From 4ca35db0ba20290b68c7ae15847351111c851681 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 7 Nov 2023 17:36:14 +0530
Subject: [PATCH 1/3] refactor: gantt sidebar

---
 web/components/gantt-chart/chart/index.tsx         | 13 ++++++++++---
 web/components/gantt-chart/root.tsx                |  4 ++++
 .../issues/issue-layouts/gantt/cycle-root.tsx      |  3 ++-
 web/components/issues/issue-layouts/gantt/index.ts |  1 +
 .../issues/issue-layouts/gantt/module-root.tsx     |  3 ++-
 web/components/issues/issue-layouts/gantt/root.tsx |  3 ++-
 .../gantt/sidebar/cycle-issues-sidebar.tsx}        | 14 ++++++--------
 .../issues/issue-layouts/gantt/sidebar/index.ts    |  3 +++
 .../gantt/sidebar/module-issues-sidebar.tsx}       | 14 ++++++--------
 .../issue-layouts/gantt/sidebar}/sidebar.tsx       | 11 +++++------
 10 files changed, 41 insertions(+), 28 deletions(-)
 rename web/components/{gantt-chart/cycle-sidebar.tsx => issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx} (93%)
 create mode 100644 web/components/issues/issue-layouts/gantt/sidebar/index.ts
 rename web/components/{gantt-chart/module-sidebar.tsx => issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx} (93%)
 rename web/components/{gantt-chart => issues/issue-layouts/gantt/sidebar}/sidebar.tsx (95%)

diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index 219f11ebb45..eaa6952e3b1 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from "react";
 // icons
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
-import { GanttSidebar } from "../sidebar";
+// import { GanttSidebar } from "../sidebar";
 // import { HourChartView } from "./hours";
 // import { DayChartView } from "./day";
 // import { WeekChartView } from "./week";
@@ -27,6 +27,7 @@ import {
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
 // types
+import { GanttSidebarProps } from "components/issues";
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
@@ -40,6 +41,7 @@ type ChartViewRootProps = {
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (data: GanttSidebarProps) => React.ReactNode;
   sidebarBlockToRender: (block: any) => React.ReactNode;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
@@ -54,6 +56,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   blocks = null,
   loaderTitle,
   blockUpdateHandler,
+  sidebarToRender,
   sidebarBlockToRender,
   blockToRender,
   enableBlockLeftResize,
@@ -285,13 +288,17 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             <h6>{title}</h6>
             <h6>Duration</h6>
           </div>
-          <GanttSidebar
+
+          {sidebarToRender &&
+            sidebarToRender({ title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder })}
+
+          {/* <GanttSidebar
             title={title}
             blockUpdateHandler={blockUpdateHandler}
             blocks={chartBlocks}
             sidebarBlockToRender={sidebarBlockToRender}
             enableReorder={enableReorder}
-          />
+          /> */}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index 7c1f243d6ff..f815a3dcec6 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -5,6 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
+import { GanttSidebarProps } from "components/issues";
 
 type GanttChartRootProps = {
   border?: boolean;
@@ -13,6 +14,7 @@ type GanttChartRootProps = {
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (data: GanttSidebarProps) => React.ReactNode;
   sidebarBlockToRender: (block: any) => React.ReactNode;
   enableBlockLeftResize?: boolean;
   enableBlockRightResize?: boolean;
@@ -27,6 +29,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
   blocks,
   loaderTitle = "blocks",
   blockUpdateHandler,
+  sidebarToRender,
   sidebarBlockToRender,
   blockToRender,
   enableBlockLeftResize = true,
@@ -42,6 +45,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
       blocks={blocks}
       loaderTitle={loaderTitle}
       blockUpdateHandler={blockUpdateHandler}
+      sidebarToRender={sidebarToRender}
       sidebarBlockToRender={sidebarBlockToRender}
       blockToRender={blockToRender}
       enableBlockLeftResize={enableBlockLeftResize}
diff --git a/web/components/issues/issue-layouts/gantt/cycle-root.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
index 78ba7f2a6c5..281cffd24f3 100644
--- a/web/components/issues/issue-layouts/gantt/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -5,7 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, CycleGanttSidebar } from "components/issues";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
@@ -40,6 +40,7 @@ export const CycleGanttLayout: React.FC = observer(() => {
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(data) => <CycleGanttSidebar {...data} />}
           sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/index.ts b/web/components/issues/issue-layouts/gantt/index.ts
index 87899ae83f0..683a8705037 100644
--- a/web/components/issues/issue-layouts/gantt/index.ts
+++ b/web/components/issues/issue-layouts/gantt/index.ts
@@ -4,3 +4,4 @@ export * from "./module-root";
 export * from "./project-view-root";
 export * from "./root";
 export * from "./inline-create-issue-form";
+export * from "./sidebar";
diff --git a/web/components/issues/issue-layouts/gantt/module-root.tsx b/web/components/issues/issue-layouts/gantt/module-root.tsx
index 7584cc7c6c8..74e052aedf6 100644
--- a/web/components/issues/issue-layouts/gantt/module-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -5,7 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, ModuleGanttSidebar } from "components/issues";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
@@ -39,6 +39,7 @@ export const ModuleGanttLayout: React.FC = observer(() => {
           loaderTitle="Issues"
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
+          sidebarToRender={(data) => <ModuleGanttSidebar {...data} />}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
           sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/root.tsx b/web/components/issues/issue-layouts/gantt/root.tsx
index 77bbc0710df..d0c4e3f438b 100644
--- a/web/components/issues/issue-layouts/gantt/root.tsx
+++ b/web/components/issues/issue-layouts/gantt/root.tsx
@@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock, GanttSidebar } from "components/issues";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
@@ -41,6 +41,7 @@ export const GanttLayout: React.FC = observer(() => {
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(data) => <GanttSidebar {...data} />}
           sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
diff --git a/web/components/gantt-chart/cycle-sidebar.tsx b/web/components/issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx
similarity index 93%
rename from web/components/gantt-chart/cycle-sidebar.tsx
rename to web/components/issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx
index 5ecc1f3ba0d..bf4de5871d6 100644
--- a/web/components/gantt-chart/cycle-sidebar.tsx
+++ b/web/components/issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx
@@ -3,25 +3,25 @@ import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { MoreVertical } from "lucide-react";
 // hooks
-import { useChart } from "./hooks";
+import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
-import { IBlockUpdateData, IGanttBlock } from "./types";
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
 
 type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  SidebarBlockRender: React.FC<any>;
+  sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
 };
 
-export const GanttSidebar: React.FC<Props> = (props) => {
+export const CycleGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -127,9 +127,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
-                              <div className="flex-grow truncate">
-                                <SidebarBlockRender data={block.data} />
-                              </div>
+                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
                               </div>
diff --git a/web/components/issues/issue-layouts/gantt/sidebar/index.ts b/web/components/issues/issue-layouts/gantt/sidebar/index.ts
new file mode 100644
index 00000000000..620a97c5f6b
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from "./cycle-issues-sidebar";
+export * from "./module-issues-sidebar";
+export * from "./sidebar";
diff --git a/web/components/gantt-chart/module-sidebar.tsx b/web/components/issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx
similarity index 93%
rename from web/components/gantt-chart/module-sidebar.tsx
rename to web/components/issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx
index 5ecc1f3ba0d..2ad9507f570 100644
--- a/web/components/gantt-chart/module-sidebar.tsx
+++ b/web/components/issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx
@@ -3,25 +3,25 @@ import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { MoreVertical } from "lucide-react";
 // hooks
-import { useChart } from "./hooks";
+import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
-import { IBlockUpdateData, IGanttBlock } from "./types";
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
 
 type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  SidebarBlockRender: React.FC<any>;
+  sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
 };
 
-export const GanttSidebar: React.FC<Props> = (props) => {
+export const ModuleGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -127,9 +127,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
-                              <div className="flex-grow truncate">
-                                <SidebarBlockRender data={block.data} />
-                              </div>
+                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
                               </div>
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/issues/issue-layouts/gantt/sidebar/sidebar.tsx
similarity index 95%
rename from web/components/gantt-chart/sidebar.tsx
rename to web/components/issues/issue-layouts/gantt/sidebar/sidebar.tsx
index f6c32e0998e..69208dc078b 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/issues/issue-layouts/gantt/sidebar/sidebar.tsx
@@ -3,7 +3,7 @@ import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { MoreVertical } from "lucide-react";
 // hooks
-import { useChart } from "./hooks";
+import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
 // components
@@ -11,20 +11,19 @@ import { GanttInlineCreateIssueForm } from "components/issues";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
-import { IBlockUpdateData, IGanttBlock } from "./types";
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
 
-type Props = {
+export type GanttSidebarProps = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
   sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
-  enableQuickIssueCreate?: boolean;
 };
 
-export const GanttSidebar: React.FC<Props> = (props) => {
+export const GanttSidebar: React.FC<GanttSidebarProps> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder, enableQuickIssueCreate } = props;
+  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;

From 6ca6a76f3faf20a16e7747f2f7b751c3f3fb6d9e Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Tue, 7 Nov 2023 18:10:20 +0530
Subject: [PATCH 2/3] fix: exception error

fix: file placement
---
 .../cycles/gantt-chart/cycles-list-layout.tsx |   3 +-
 web/components/gantt-chart/chart/index.tsx    |   2 +-
 web/components/gantt-chart/index.ts           |   1 +
 web/components/gantt-chart/root.tsx           |   2 +-
 .../sidebar/cycle-sidebar.tsx}                |   0
 web/components/gantt-chart/sidebar/index.ts   |   4 +
 .../sidebar/module-sidebar.tsx}               |   0
 .../sidebar/project-view-sidebar.tsx          | 156 ++++++++++++++++++
 .../gantt => gantt-chart}/sidebar/sidebar.tsx |   0
 .../issues/issue-layouts/gantt/cycle-root.tsx |   9 +-
 .../issues/issue-layouts/gantt/index.ts       |   1 -
 .../issue-layouts/gantt/module-root.tsx       |   9 +-
 .../issue-layouts/gantt/project-view-root.tsx |   8 +-
 .../issues/issue-layouts/gantt/root.tsx       |   6 +-
 .../issue-layouts/gantt/sidebar/index.ts      |   3 -
 .../gantt-chart/modules-list-layout.tsx       |   5 +-
 16 files changed, 192 insertions(+), 17 deletions(-)
 rename web/components/{issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx => gantt-chart/sidebar/cycle-sidebar.tsx} (100%)
 create mode 100644 web/components/gantt-chart/sidebar/index.ts
 rename web/components/{issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx => gantt-chart/sidebar/module-sidebar.tsx} (100%)
 create mode 100644 web/components/gantt-chart/sidebar/project-view-sidebar.tsx
 rename web/components/{issues/issue-layouts/gantt => gantt-chart}/sidebar/sidebar.tsx (100%)
 delete mode 100644 web/components/issues/issue-layouts/gantt/sidebar/index.ts

diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 9526de59c89..ee01a26eeb5 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -10,7 +10,7 @@ import { CycleService } from "services/cycle.service";
 import useUser from "hooks/use-user";
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
 import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
 // types
 import { ICycle } from "types";
@@ -85,6 +85,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         loaderTitle="Cycles"
         blocks={cycles ? blockFormat(cycles) : null}
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
+        sidebarToRender={(props) => <CycleGanttSidebar {...props} />}
         blockToRender={(data: ICycle) => <CycleGanttBlock data={data} />}
         sidebarBlockToRender={(data: ICycle) => <CycleGanttSidebarBlock data={data} />}
         enableBlockLeftResize={false}
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index eaa6952e3b1..a8cb5437ab2 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -27,7 +27,7 @@ import {
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
 // types
-import { GanttSidebarProps } from "components/issues";
+import { GanttSidebarProps } from "../sidebar";
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
diff --git a/web/components/gantt-chart/index.ts b/web/components/gantt-chart/index.ts
index 4520ee194a1..ead6960868b 100644
--- a/web/components/gantt-chart/index.ts
+++ b/web/components/gantt-chart/index.ts
@@ -3,3 +3,4 @@ export * from "./helpers";
 export * from "./hooks";
 export * from "./root";
 export * from "./types";
+export * from "./sidebar";
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index f815a3dcec6..288f05b1383 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -5,7 +5,7 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
-import { GanttSidebarProps } from "components/issues";
+import { GanttSidebarProps } from "./sidebar";
 
 type GanttChartRootProps = {
   border?: boolean;
diff --git a/web/components/issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/gantt/sidebar/cycle-issues-sidebar.tsx
rename to web/components/gantt-chart/sidebar/cycle-sidebar.tsx
diff --git a/web/components/gantt-chart/sidebar/index.ts b/web/components/gantt-chart/sidebar/index.ts
new file mode 100644
index 00000000000..8b1d7223725
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-sidebar";
+export * from "./module-sidebar";
+export * from "./sidebar";
+export * from "./project-view-sidebar";
diff --git a/web/components/issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx b/web/components/gantt-chart/sidebar/module-sidebar.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/gantt/sidebar/module-issues-sidebar.tsx
rename to web/components/gantt-chart/sidebar/module-sidebar.tsx
diff --git a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
new file mode 100644
index 00000000000..73822ffa99d
--- /dev/null
+++ b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
@@ -0,0 +1,156 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "@hello-pangea/dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "components/gantt-chart/hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  sidebarBlockToRender: (block: any) => React.ReactNode;
+  enableReorder: boolean;
+};
+
+export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};
diff --git a/web/components/issues/issue-layouts/gantt/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
similarity index 100%
rename from web/components/issues/issue-layouts/gantt/sidebar/sidebar.tsx
rename to web/components/gantt-chart/sidebar/sidebar.tsx
diff --git a/web/components/issues/issue-layouts/gantt/cycle-root.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
index 281cffd24f3..76f53c9d87a 100644
--- a/web/components/issues/issue-layouts/gantt/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -4,8 +4,13 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock, CycleGanttSidebar } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  CycleGanttSidebar,
+} from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
diff --git a/web/components/issues/issue-layouts/gantt/index.ts b/web/components/issues/issue-layouts/gantt/index.ts
index 683a8705037..87899ae83f0 100644
--- a/web/components/issues/issue-layouts/gantt/index.ts
+++ b/web/components/issues/issue-layouts/gantt/index.ts
@@ -4,4 +4,3 @@ export * from "./module-root";
 export * from "./project-view-root";
 export * from "./root";
 export * from "./inline-create-issue-form";
-export * from "./sidebar";
diff --git a/web/components/issues/issue-layouts/gantt/module-root.tsx b/web/components/issues/issue-layouts/gantt/module-root.tsx
index 74e052aedf6..a4d1a3b7255 100644
--- a/web/components/issues/issue-layouts/gantt/module-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -4,8 +4,13 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock, ModuleGanttSidebar } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  ModuleGanttSidebar,
+} from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
diff --git a/web/components/issues/issue-layouts/gantt/project-view-root.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
index 1be9ad0c3d6..168841189bc 100644
--- a/web/components/issues/issue-layouts/gantt/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -6,8 +6,13 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  ProjectViewGanttSidebar,
+} from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
@@ -42,6 +47,7 @@ export const ProjectViewGanttLayout: React.FC = observer(() => {
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(props) => <ProjectViewGanttSidebar {...props} />}
           sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/root.tsx b/web/components/issues/issue-layouts/gantt/root.tsx
index d0c4e3f438b..136a480fdbb 100644
--- a/web/components/issues/issue-layouts/gantt/root.tsx
+++ b/web/components/issues/issue-layouts/gantt/root.tsx
@@ -5,8 +5,8 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock, GanttSidebar } from "components/issues";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure, GanttSidebar } from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
@@ -41,7 +41,7 @@ export const GanttLayout: React.FC = observer(() => {
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
-          sidebarToRender={(data) => <GanttSidebar {...data} />}
+          sidebarToRender={(props) => <GanttSidebar {...props} />}
           sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/sidebar/index.ts b/web/components/issues/issue-layouts/gantt/sidebar/index.ts
deleted file mode 100644
index 620a97c5f6b..00000000000
--- a/web/components/issues/issue-layouts/gantt/sidebar/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./cycle-issues-sidebar";
-export * from "./module-issues-sidebar";
-export * from "./sidebar";
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index 693aec3a53d..4be68f1f745 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
 import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
 // types
 import { IModule } from "types";
@@ -44,8 +44,9 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         title="Modules"
         loaderTitle="Modules"
         blocks={modules ? blockFormat(modules) : null}
+        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        sidebarBlockToRender={ModuleGanttSidebarBlock}
+        sidebarBlockToRender={(data) => <ModuleGanttSidebarBlock data={data} />}
         blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}

From 34e947529ffbbbb9dd076954ad73fd6665048813 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 8 Nov 2023 12:11:06 +0530
Subject: [PATCH 3/3] refactor: not passing sidebar block as props

---
 .../cycles/gantt-chart/cycles-list-layout.tsx  |  1 -
 web/components/gantt-chart/chart/index.tsx     | 16 ++--------------
 web/components/gantt-chart/root.tsx            |  6 +-----
 .../gantt-chart/sidebar/cycle-sidebar.tsx      |  9 ++++++---
 .../gantt-chart/sidebar/module-sidebar.tsx     |  9 ++++++---
 .../sidebar/project-view-sidebar.tsx           | 10 +++++++---
 web/components/gantt-chart/sidebar/sidebar.tsx | 18 ++++++++++--------
 .../issues/issue-layouts/gantt/cycle-root.tsx  |  7 +++----
 .../issues/issue-layouts/gantt/module-root.tsx |  5 ++---
 .../issue-layouts/gantt/project-view-root.tsx  |  3 +--
 .../issues/issue-layouts/gantt/root.tsx        | 12 ++++++++----
 .../gantt-chart/modules-list-layout.tsx        |  3 +--
 12 files changed, 47 insertions(+), 52 deletions(-)

diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index ee01a26eeb5..d5bd4e14035 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -87,7 +87,6 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
         sidebarToRender={(props) => <CycleGanttSidebar {...props} />}
         blockToRender={(data: ICycle) => <CycleGanttBlock data={data} />}
-        sidebarBlockToRender={(data: ICycle) => <CycleGanttSidebarBlock data={data} />}
         enableBlockLeftResize={false}
         enableBlockRightResize={false}
         enableBlockMove={false}
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index a8cb5437ab2..c6df2945282 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -27,7 +27,6 @@ import {
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
 // types
-import { GanttSidebarProps } from "../sidebar";
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
@@ -41,8 +40,7 @@ type ChartViewRootProps = {
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blockToRender: (data: any) => React.ReactNode;
-  sidebarToRender: (data: GanttSidebarProps) => React.ReactNode;
-  sidebarBlockToRender: (block: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
   enableBlockLeftResize: boolean;
   enableBlockRightResize: boolean;
   enableBlockMove: boolean;
@@ -57,7 +55,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   loaderTitle,
   blockUpdateHandler,
   sidebarToRender,
-  sidebarBlockToRender,
   blockToRender,
   enableBlockLeftResize,
   enableBlockRightResize,
@@ -289,16 +286,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             <h6>Duration</h6>
           </div>
 
-          {sidebarToRender &&
-            sidebarToRender({ title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder })}
-
-          {/* <GanttSidebar
-            title={title}
-            blockUpdateHandler={blockUpdateHandler}
-            blocks={chartBlocks}
-            sidebarBlockToRender={sidebarBlockToRender}
-            enableReorder={enableReorder}
-          /> */}
+          {sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
diff --git a/web/components/gantt-chart/root.tsx b/web/components/gantt-chart/root.tsx
index 288f05b1383..10c00a36322 100644
--- a/web/components/gantt-chart/root.tsx
+++ b/web/components/gantt-chart/root.tsx
@@ -5,7 +5,6 @@ import { ChartViewRoot } from "./chart";
 import { ChartContextProvider } from "./contexts";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
-import { GanttSidebarProps } from "./sidebar";
 
 type GanttChartRootProps = {
   border?: boolean;
@@ -14,8 +13,7 @@ type GanttChartRootProps = {
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blockToRender: (data: any) => React.ReactNode;
-  sidebarToRender: (data: GanttSidebarProps) => React.ReactNode;
-  sidebarBlockToRender: (block: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
   enableBlockLeftResize?: boolean;
   enableBlockRightResize?: boolean;
   enableBlockMove?: boolean;
@@ -30,7 +28,6 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
   loaderTitle = "blocks",
   blockUpdateHandler,
   sidebarToRender,
-  sidebarBlockToRender,
   blockToRender,
   enableBlockLeftResize = true,
   enableBlockRightResize = true,
@@ -46,7 +43,6 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
       loaderTitle={loaderTitle}
       blockUpdateHandler={blockUpdateHandler}
       sidebarToRender={sidebarToRender}
-      sidebarBlockToRender={sidebarBlockToRender}
       blockToRender={blockToRender}
       enableBlockLeftResize={enableBlockLeftResize}
       enableBlockRightResize={enableBlockRightResize}
diff --git a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
index bf4de5871d6..0103c745924 100644
--- a/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/cycle-sidebar.tsx
@@ -6,6 +6,8 @@ import { MoreVertical } from "lucide-react";
 import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
+// components
+import { CycleGanttSidebarBlock } from "components/cycles";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -15,13 +17,12 @@ type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
 };
 
 export const CycleGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -127,7 +128,9 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
-                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
+                              <div className="flex-grow truncate">
+                                <CycleGanttSidebarBlock data={block.data} />
+                              </div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
                               </div>
diff --git a/web/components/gantt-chart/sidebar/module-sidebar.tsx b/web/components/gantt-chart/sidebar/module-sidebar.tsx
index 2ad9507f570..8e076d46330 100644
--- a/web/components/gantt-chart/sidebar/module-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/module-sidebar.tsx
@@ -6,6 +6,8 @@ import { MoreVertical } from "lucide-react";
 import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
+// components
+import { ModuleGanttSidebarBlock } from "components/modules";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -15,13 +17,12 @@ type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
 };
 
 export const ModuleGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -127,7 +128,9 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
-                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
+                              <div className="flex-grow truncate">
+                                <ModuleGanttSidebarBlock data={block.data} />
+                              </div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
                               </div>
diff --git a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
index 73822ffa99d..c327e1eac59 100644
--- a/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/project-view-sidebar.tsx
@@ -6,6 +6,8 @@ import { MoreVertical } from "lucide-react";
 import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
+// components
+import { IssueGanttSidebarBlock } from "components/issues";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -15,13 +17,13 @@ type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, enableReorder } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -127,7 +129,9 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
-                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
+                              <div className="flex-grow truncate">
+                                <IssueGanttSidebarBlock data={block.data} handleIssue={blockUpdateHandler} />
+                              </div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
                               </div>
diff --git a/web/components/gantt-chart/sidebar/sidebar.tsx b/web/components/gantt-chart/sidebar/sidebar.tsx
index 69208dc078b..72fbe126740 100644
--- a/web/components/gantt-chart/sidebar/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar/sidebar.tsx
@@ -7,23 +7,23 @@ import { useChart } from "components/gantt-chart/hooks";
 // ui
 import { Loader } from "@plane/ui";
 // components
-import { GanttInlineCreateIssueForm } from "components/issues";
+import { GanttInlineCreateIssueForm, IssueGanttSidebarBlock } from "components/issues";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
-import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
+import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
 
-export type GanttSidebarProps = {
+type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
-  sidebarBlockToRender: (block: any) => React.ReactNode;
   enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
 };
 
-export const GanttSidebar: React.FC<GanttSidebarProps> = (props) => {
+export const IssueGanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, sidebarBlockToRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, enableReorder, enableQuickIssueCreate } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -129,7 +129,9 @@ export const GanttSidebar: React.FC<GanttSidebarProps> = (props) => {
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
-                              <div className="flex-grow truncate">{sidebarBlockToRender(block.data)}</div>
+                              <div className="flex-grow truncate">
+                                <IssueGanttSidebarBlock data={block.data} handleIssue={blockUpdateHandler} />
+                              </div>
                               <div className="flex-shrink-0 text-sm text-custom-text-200">
                                 {duration} day{duration > 1 ? "s" : ""}
                               </div>
@@ -150,7 +152,7 @@ export const GanttSidebar: React.FC<GanttSidebarProps> = (props) => {
               )}
               {droppableProvided.placeholder}
             </>
-            <GanttInlineCreateIssueForm />
+            {enableQuickIssueCreate && <GanttInlineCreateIssueForm />}
           </div>
         )}
       </StrictModeDroppable>
diff --git a/web/components/issues/issue-layouts/gantt/cycle-root.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
index 76f53c9d87a..56a17db15da 100644
--- a/web/components/issues/issue-layouts/gantt/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -4,12 +4,12 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock } from "components/issues";
 import {
   GanttChartRoot,
   IBlockUpdateData,
   renderIssueBlocksStructure,
-  CycleGanttSidebar,
+  IssueGanttSidebar,
 } from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
@@ -45,8 +45,7 @@ export const CycleGanttLayout: React.FC = observer(() => {
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
-          sidebarToRender={(data) => <CycleGanttSidebar {...data} />}
-          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(props) => <IssueGanttSidebar {...props} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/module-root.tsx b/web/components/issues/issue-layouts/gantt/module-root.tsx
index a4d1a3b7255..c5a880bbea8 100644
--- a/web/components/issues/issue-layouts/gantt/module-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -9,7 +9,7 @@ import {
   GanttChartRoot,
   IBlockUpdateData,
   renderIssueBlocksStructure,
-  ModuleGanttSidebar,
+  IssueGanttSidebar,
 } from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
@@ -44,9 +44,8 @@ export const ModuleGanttLayout: React.FC = observer(() => {
           loaderTitle="Issues"
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
-          sidebarToRender={(data) => <ModuleGanttSidebar {...data} />}
+          sidebarToRender={(data) => <IssueGanttSidebar {...data} />}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
-          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/project-view-root.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
index 168841189bc..c06afd8170e 100644
--- a/web/components/issues/issue-layouts/gantt/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttBlock } from "components/issues";
 import {
   GanttChartRoot,
   IBlockUpdateData,
@@ -48,7 +48,6 @@ export const ProjectViewGanttLayout: React.FC = observer(() => {
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
           sidebarToRender={(props) => <ProjectViewGanttSidebar {...props} />}
-          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
diff --git a/web/components/issues/issue-layouts/gantt/root.tsx b/web/components/issues/issue-layouts/gantt/root.tsx
index 136a480fdbb..d7ddd69b2b8 100644
--- a/web/components/issues/issue-layouts/gantt/root.tsx
+++ b/web/components/issues/issue-layouts/gantt/root.tsx
@@ -5,8 +5,13 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
-import { GanttChartRoot, IBlockUpdateData, renderIssueBlocksStructure, GanttSidebar } from "components/gantt-chart";
+import { IssueGanttBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IBlockUpdateData,
+  renderIssueBlocksStructure,
+  IssueGanttSidebar,
+} from "components/gantt-chart";
 // types
 import { IIssueUnGroupedStructure } from "store/issue";
 import { IIssue } from "types";
@@ -41,8 +46,7 @@ export const GanttLayout: React.FC = observer(() => {
           blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
           blockUpdateHandler={updateIssue}
           blockToRender={(data: IIssue) => <IssueGanttBlock data={data} handleIssue={updateIssue} />}
-          sidebarToRender={(props) => <GanttSidebar {...props} />}
-          sidebarBlockToRender={(data: IIssue) => <IssueGanttSidebarBlock data={data} handleIssue={updateIssue} />}
+          sidebarToRender={(props) => <IssueGanttSidebar {...props} enableQuickIssueCreate />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index 4be68f1f745..ee86cae2776 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
-import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
+import { ModuleGanttBlock } from "components/modules";
 // types
 import { IModule } from "types";
 
@@ -46,7 +46,6 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
         blocks={modules ? blockFormat(modules) : null}
         sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        sidebarBlockToRender={(data) => <ModuleGanttSidebarBlock data={data} />}
         blockToRender={(data: IModule) => <ModuleGanttBlock data={data} />}
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}