fix: horizontal scroll in gantt chart while dragging (#3664)

* fix horizontal scroll in gantt chart while dragging

* add aline indicator for quick add

* add border color for line above quick add in gantt to make it look better in dark mode

web/components/gantt-chart/chart/main-content.tsx

@@ -33,6 +33,7 @@ type Props = {
   sidebarToRender: (props: any) => React.ReactNode;
   title: string;
   updateCurrentViewRenderPayload: (direction: "left" | "right", currentView: TGanttViews) => void;
+  quickAdd?: React.JSX.Element | undefined;
 };
 
 export const GanttChartMainContent: React.FC<Props> = (props) => {
@@ -52,6 +53,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
     sidebarToRender,
     title,
     updateCurrentViewRenderPayload,
+    quickAdd,
   } = props;
   // chart hook
   const { currentView, currentViewData, updateScrollLeft } = useChart();
@@ -101,6 +103,7 @@ export const GanttChartMainContent: React.FC<Props> = (props) => {
         enableReorder={enableReorder}
         sidebarToRender={sidebarToRender}
         title={title}
+        quickAdd={quickAdd}
       />
       <div className="relative min-h-full h-max flex-shrink-0 flex-grow">
         <ActiveChartView />

web/components/gantt-chart/chart/root.tsx

@@ -31,6 +31,7 @@ type ChartViewRootProps = {
   enableAddBlock: boolean;
   bottomSpacing: boolean;
   showAllBlocks: boolean;
+  quickAdd?: React.JSX.Element | undefined;
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
@@ -49,6 +50,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
     enableAddBlock,
     bottomSpacing,
     showAllBlocks,
+    quickAdd,
   } = props;
   // states
   const [itemsContainerWidth, setItemsContainerWidth] = useState(0);
@@ -200,6 +202,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
         sidebarToRender={sidebarToRender}
         title={title}
         updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
+        quickAdd={quickAdd}
       />
     </div>
   );

web/components/gantt-chart/root.tsx

@@ -12,6 +12,7 @@ type GanttChartRootProps = {
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blockToRender: (data: any) => React.ReactNode;
   sidebarToRender: (props: any) => React.ReactNode;
+  quickAdd?: React.JSX.Element | undefined;
   enableBlockLeftResize?: boolean;
   enableBlockRightResize?: boolean;
   enableBlockMove?: boolean;
@@ -37,6 +38,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
     enableAddBlock = false,
     bottomSpacing = false,
     showAllBlocks = false,
+    quickAdd,
   } = props;
 
   return (
@@ -56,6 +58,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
         enableAddBlock={enableAddBlock}
         bottomSpacing={bottomSpacing}
         showAllBlocks={showAllBlocks}
+        quickAdd={quickAdd}
       />
     </ChartContextProvider>
   );

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

@@ -7,42 +7,23 @@ import { useIssueDetail } from "hooks/store";
 // ui
 import { Loader } from "@plane/ui";
 // components
-import { GanttQuickAddIssueForm, IssueGanttSidebarBlock } from "components/issues";
+import { IssueGanttSidebarBlock } from "components/issues";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 import { cn } from "helpers/common.helper";
 // types
 import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
-import { TIssue } from "@plane/types";
 import { BLOCK_HEIGHT } from "../constants";
 
 type Props = {
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
   blocks: IGanttBlock[] | null;
   enableReorder: boolean;
-  enableQuickIssueCreate?: boolean;
-  quickAddCallback?: (
-    workspaceSlug: string,
-    projectId: string,
-    data: TIssue,
-    viewId?: string
-  ) => Promise<TIssue | undefined>;
-  viewId?: string;
-  disableIssueCreation?: boolean;
   showAllBlocks?: boolean;
 };
 
-export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
-  const {
-    blockUpdateHandler,
-    blocks,
-    enableReorder,
-    enableQuickIssueCreate,
-    quickAddCallback,
-    viewId,
-    disableIssueCreation,
-    showAllBlocks = false,
-  } = props;
+export const IssueGanttSidebar: React.FC<Props> = observer((props: Props) => {
+  const { blockUpdateHandler, blocks, enableReorder, showAllBlocks = false } = props;
 
   const { activeBlock, dispatch } = useChart();
   const { peekIssue } = useIssueDetail();
@@ -187,9 +168,6 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
           )}
         </Droppable>
       </DragDropContext>
-      {enableQuickIssueCreate && !disableIssueCreation && (
-        <GanttQuickAddIssueForm quickAddCallback={quickAddCallback} viewId={viewId} />
-      )}
     </>
   );
 });

web/components/gantt-chart/sidebar/root.tsx

@@ -9,16 +9,17 @@ type Props = {
   enableReorder: boolean;
   sidebarToRender: (props: any) => React.ReactNode;
   title: string;
+  quickAdd?: React.JSX.Element | undefined;
 };
 
 export const GanttChartSidebar: React.FC<Props> = (props) => {
-  const { blocks, blockUpdateHandler, enableReorder, sidebarToRender, title } = props;
+  const { blocks, blockUpdateHandler, enableReorder, sidebarToRender, title, quickAdd } = props;
 
   return (
     <div
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
-      className="sticky top-0 left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
+      className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}
@@ -33,9 +34,10 @@ export const GanttChartSidebar: React.FC<Props> = (props) => {
         <h6>Duration</h6>
       </div>
 
-      <div className="min-h-full h-max bg-custom-background-100">
+      <div className="min-h-full h-max bg-custom-background-100 overflow-x-hidden overflow-y-auto">
         {sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
       </div>
+      {quickAdd ? quickAdd : null}
     </div>
   );
 };

web/components/issues/issue-layouts/gantt/base-gantt-root.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // hooks
 import { useIssues, useUser } from "hooks/store";
 // components
-import { IssueGanttBlock } from "components/issues";
+import { GanttQuickAddIssueForm, IssueGanttBlock } from "components/issues";
 import {
   GanttChartRoot,
   IBlockUpdateData,
@@ -70,21 +70,17 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           blocks={issues ? renderIssueBlocksStructure(issues as TIssue[]) : null}
           blockUpdateHandler={updateIssueBlockStructure}
           blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} />}
-          sidebarToRender={(props) => (
-            <IssueGanttSidebar
-              {...props}
-              quickAddCallback={issueStore.quickAddIssue}
-              viewId={viewId}
-              enableQuickIssueCreate
-              disableIssueCreation={!enableIssueCreation || !isAllowed}
-              showAllBlocks
-            />
-          )}
+          sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks />}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
           enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
           enableAddBlock={isAllowed}
+          quickAdd={
+            enableIssueCreation && isAllowed ? (
+              <GanttQuickAddIssueForm quickAddCallback={issueStore.quickAddIssue} viewId={viewId} />
+            ) : undefined
+          }
           showAllBlocks
         />
       </div>

web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx

@@ -159,7 +159,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
       ) : (
         <button
           type="button"
-          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100 bg-custom-background-100"
+          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 p-3 py-3 text-custom-primary-100 bg-custom-background-100 border-custom-border-200 border-t-[1px]"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />