From 81b706b4f5f7dc7c8f039979713b02fbf050a957 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 27 Sep 2023 13:17:38 +0530
Subject: [PATCH 1/2] chore: gantt empty state

---
 web/components/gantt-chart/chart/index.tsx |  4 +-
 web/components/gantt-chart/sidebar.tsx     | 80 ++++++++++------------
 2 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index a8f541b0b0f..d9c3ae1a49b 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -304,7 +304,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       >
         <div
           id="gantt-sidebar"
-          className="h-full w-1/4 flex flex-col border-r border-custom-border-200 space-y-3"
+          className="h-full w-1/4 flex flex-col border-r border-custom-border-200"
         >
           <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0" />
           <GanttSidebar
@@ -315,7 +315,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             enableReorder={enableReorder}
           />
           {chartBlocks && (
-            <div className="pl-2.5">
+            <div className="pl-2.5 py-3">
               <GanttInlineCreateIssueForm
                 isOpen={isCreateIssueFormOpen}
                 handleClose={() => setIsCreateIssueFormOpen(false)}
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index 4a804f79563..1cc2b052684 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -86,59 +86,53 @@ export const GanttSidebar: React.FC<Props> = (props) => {
         {(droppableProvided) => (
           <div
             id={`gantt-sidebar-${cycleId}`}
-            className="max-h-full overflow-y-auto pl-2.5"
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
             ref={droppableProvided.innerRef}
             {...droppableProvided.droppableProps}
           >
             <>
               {blocks ? (
-                blocks.length > 0 ? (
-                  blocks.map((block, index) => (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
+                blocks.map((block, index) => (
+                  <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
-                          className={`h-11 ${
-                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
+                          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" : ""
                           }`}
-                          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}
-                              >
-                                <EllipsisVerticalIcon className="h-4" />
-                                <EllipsisVerticalIcon className="h-4 -ml-5" />
-                              </button>
-                            )}
-                            <div className="flex-grow truncate w-full h-full">
-                              <SidebarBlockRender data={block.data} />
-                            </div>
+                          {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}
+                            >
+                              <EllipsisVerticalIcon className="h-4" />
+                              <EllipsisVerticalIcon className="h-4 -ml-5" />
+                            </button>
+                          )}
+                          <div className="flex-grow truncate w-full h-full">
+                            <SidebarBlockRender data={block.data} />
                           </div>
                         </div>
-                      )}
-                    </Draggable>
-                  ))
-                ) : (
-                  <div className="text-custom-text-200 text-sm text-center mt-8">
-                    No <span className="lowercase">{title}</span> found
-                  </div>
-                )
+                      </div>
+                    )}
+                  </Draggable>
+                ))
               ) : (
                 <Loader className="pr-2 space-y-3">
                   <Loader.Item height="34px" />

From 962d171784ec745735ec9f5e525df77272a28ef3 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 27 Sep 2023 13:37:00 +0530
Subject: [PATCH 2/2] chore: Add heading to the gantt sidebar

---
 web/components/gantt-chart/chart/index.tsx   |  5 +-
 web/components/gantt-chart/sidebar.tsx       | 87 ++++++++++++--------
 web/components/issues/gantt-chart/blocks.tsx | 11 +--
 3 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index d9c3ae1a49b..c564f69f2d4 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -306,7 +306,10 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           id="gantt-sidebar"
           className="h-full w-1/4 flex flex-col border-r border-custom-border-200"
         >
-          <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0" />
+          <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0 flex items-end justify-between gap-2 text-sm text-custom-text-300 font-medium pb-2 pl-10 pr-4">
+            <h6>{title}</h6>
+            <h6>Duration</h6>
+          </div>
           <GanttSidebar
             title={title}
             blockUpdateHandler={blockUpdateHandler}
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index 1cc2b052684..2aec274d9e2 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -8,6 +8,8 @@ import { useChart } from "./hooks";
 import { Loader } from "components/ui";
 // icons
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
 
@@ -92,47 +94,60 @@ export const GanttSidebar: React.FC<Props> = (props) => {
           >
             <>
               {blocks ? (
-                blocks.map((block, index) => (
-                  <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}
-                      >
+                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
-                          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" : ""
+                          className={`h-11 ${
+                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
                           }`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
                         >
-                          {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}
-                            >
-                              <EllipsisVerticalIcon className="h-4" />
-                              <EllipsisVerticalIcon className="h-4 -ml-5" />
-                            </button>
-                          )}
-                          <div className="flex-grow truncate w-full h-full">
-                            <SidebarBlockRender data={block.data} />
+                          <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}
+                              >
+                                <EllipsisVerticalIcon className="h-4" />
+                                <EllipsisVerticalIcon className="h-4 -ml-5" />
+                              </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-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    )}
-                  </Draggable>
-                ))
+                      )}
+                    </Draggable>
+                  );
+                })
               ) : (
                 <Loader className="pr-2 space-y-3">
                   <Loader.Item height="34px" />
diff --git a/web/components/issues/gantt-chart/blocks.tsx b/web/components/issues/gantt-chart/blocks.tsx
index ef4919780cb..3364565a3aa 100644
--- a/web/components/issues/gantt-chart/blocks.tsx
+++ b/web/components/issues/gantt-chart/blocks.tsx
@@ -5,7 +5,7 @@ import { Tooltip } from "components/ui";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
-import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper";
+import { renderShortDate } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
 
@@ -52,8 +52,6 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
 export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
   const router = useRouter();
 
-  const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true);
-
   const openPeekOverview = () => {
     const { query } = router;
 
@@ -72,12 +70,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
       <div className="text-xs text-custom-text-300 flex-shrink-0">
         {data?.project_detail?.identifier} {data?.sequence_id}
       </div>
-      <div className="flex items-center justify-between gap-2 w-full flex-grow truncate">
-        <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
-        <span className="flex-shrink-0 text-sm text-custom-text-200">
-          {duration} day{duration > 1 ? "s" : ""}
-        </span>
-      </div>
+      <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
     </div>
   );
 };