[WEB-2442] fix : Timeline layout bugs

apiserver/plane/app/views/issue/relation.py

@@ -318,7 +318,7 @@ def create(self, request, slug, project_id, issue_id):
             origin=request.META.get("HTTP_ORIGIN"),
         )
 
-        if relation_type == "blocking":
+        if relation_type in ["blocking", "start_after", "finish_after"]:
             return Response(
                 RelatedIssueSerializer(issue_relation, many=True).data,
                 status=status.HTTP_201_CREATED,
@@ -333,7 +333,7 @@ def remove_relation(self, request, slug, project_id, issue_id):
         relation_type = request.data.get("relation_type", None)
         related_issue = request.data.get("related_issue", None)
 
-        if relation_type == "blocking":
+        if relation_type in ["blocking", "start_after", "finish_after"]:
             issue_relation = IssueRelation.objects.get(
                 workspace__slug=slug,
                 project_id=project_id,

web/ce/components/relations/activity.ts

@@ -0,0 +1,20 @@
+import { TIssueActivity } from "@plane/types";
+
+export const getRelationActivityContent = (activity: TIssueActivity | undefined): string | undefined => {
+  if (!activity) return;
+
+  switch (activity.field) {
+    case "blocking":
+      return activity.old_value === "" ? `marked this issue is blocking issue ` : `removed the blocking issue `;
+    case "blocked_by":
+      return activity.old_value === ""
+        ? `marked this issue is being blocked by `
+        : `removed this issue being blocked by issue `;
+    case "duplicate":
+      return activity.old_value === "" ? `marked this issue as duplicate of ` : `removed this issue as a duplicate of `;
+    case "relates_to":
+      activity.old_value === "" ? `marked that this issue relates to ` : `removed the relation from `;
+  }
+
+  return;
+};

web/ce/components/relations/index.tsx

@@ -3,6 +3,8 @@ import { RelatedIcon } from "@plane/ui";
 import { TRelationObject } from "@/components/issues";
 import { TIssueRelationTypes } from "../../types";
 
+export * from "./activity";
+
 export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject> = {
   relates_to: {
     key: "relates_to",
@@ -33,3 +35,5 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
     placeholder: "None",
   },
 };
+
+export const useTimeLineRelationOptions = () => ISSUE_RELATION_OPTIONS;

web/core/components/gantt-chart/blocks/block-row-list.tsx

@@ -5,20 +5,29 @@ import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 // types
 import { BLOCK_HEIGHT } from "../constants";
-import { IBlockUpdateData } from "../types";
+import { IBlockUpdateData, IGanttBlock } from "../types";
 import { BlockRow } from "./block-row";
 
 export type GanttChartBlocksProps = {
   blockIds: string[];
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  handleScrollToBlock: (block: IGanttBlock) => void;
   enableAddBlock: boolean | ((blockId: string) => boolean);
   showAllBlocks: boolean;
   selectionHelpers: TSelectionHelper;
   ganttContainerRef: React.RefObject<HTMLDivElement>;
 };
 
 export const GanttChartRowList: FC<GanttChartBlocksProps> = (props) => {
-  const { blockIds, blockUpdateHandler, enableAddBlock, showAllBlocks, selectionHelpers, ganttContainerRef } = props;
+  const {
+    blockIds,
+    blockUpdateHandler,
+    handleScrollToBlock,
+    enableAddBlock,
+    showAllBlocks,
+    selectionHelpers,
+    ganttContainerRef,
+  } = props;
 
   return (
     <div className="absolute top-0 left-0 min-w-full w-max">
@@ -37,6 +46,7 @@ export const GanttChartRowList: FC<GanttChartBlocksProps> = (props) => {
               blockId={blockId}
               showAllBlocks={showAllBlocks}
               blockUpdateHandler={blockUpdateHandler}
+              handleScrollToBlock={handleScrollToBlock}
               enableAddBlock={typeof enableAddBlock === "function" ? enableAddBlock(blockId) : enableAddBlock}
               selectionHelpers={selectionHelpers}
               ganttContainerRef={ganttContainerRef}

web/core/components/gantt-chart/blocks/block-row.tsx

@@ -10,19 +10,20 @@ import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 //
 import { BLOCK_HEIGHT, SIDEBAR_WIDTH } from "../constants";
 import { ChartAddBlock } from "../helpers";
-import { IBlockUpdateData } from "../types";
+import { IBlockUpdateData, IGanttBlock } from "../types";
 
 type Props = {
   blockId: string;
   showAllBlocks: boolean;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  handleScrollToBlock: (block: IGanttBlock) => void;
   enableAddBlock: boolean;
   selectionHelpers: TSelectionHelper;
   ganttContainerRef: React.RefObject<HTMLDivElement>;
 };
 
 export const BlockRow: React.FC<Props> = observer((props) => {
-  const { blockId, showAllBlocks, blockUpdateHandler, enableAddBlock, selectionHelpers } = props;
+  const { blockId, showAllBlocks, blockUpdateHandler, handleScrollToBlock, enableAddBlock, selectionHelpers } = props;
   // states
   const [isHidden, setIsHidden] = useState(false);
   const [isBlockHiddenOnLeft, setIsBlockHiddenOnLeft] = useState(false);
@@ -67,14 +68,6 @@ export const BlockRow: React.FC<Props> = observer((props) => {
   // hide the block if it doesn't have start and target dates and showAllBlocks is false
   if (!block || !block.data || (!showAllBlocks && !(block.start_date && block.target_date))) return null;
 
-  // scroll to a hidden block
-  const handleScrollToBlock = () => {
-    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
-    if (!scrollContainer || !block.position) return;
-    // update container's scroll position to the block's position
-    scrollContainer.scrollLeft = block.position.marginLeft - 4;
-  };
-
   const isBlockVisibleOnChart = block.start_date && block.target_date;
   const isBlockSelected = selectionHelpers.getIsEntitySelected(block.id);
   const isBlockFocused = selectionHelpers.getIsEntityActive(block.id);
@@ -106,7 +99,7 @@ export const BlockRow: React.FC<Props> = observer((props) => {
                 style={{
                   left: `${SIDEBAR_WIDTH + 4}px`,
                 }}
-                onClick={handleScrollToBlock}
+                onClick={() => handleScrollToBlock(block)}
               >
                 <ArrowRight
                   className={cn("h-3.5 w-3.5", {

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

@@ -5,17 +5,20 @@ import { observer } from "mobx-react";
 // components
 import { MultipleSelectGroup } from "@/components/core";
 import {
+  ChartDataType,
   GanttChartBlocksList,
   GanttChartSidebar,
   IBlockUpdateData,
   IBlockUpdateDependencyData,
+  IGanttBlock,
   MonthChartView,
   QuarterChartView,
   TGanttViews,
   WeekChartView,
 } from "@/components/gantt-chart";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { getDate } from "@/helpers/date-time.helper";
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 // plane web components
@@ -26,6 +29,7 @@ import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-sta
 //
 import { GanttChartRowList } from "../blocks/block-row-list";
 import { GANTT_SELECT_GROUP, HEADER_HEIGHT } from "../constants";
+import { getItemPositionWidth } from "../views";
 import { TimelineDragHelper } from "./timeline-drag-helper";
 
 type Props = {
@@ -46,7 +50,11 @@ type Props = {
   showAllBlocks: boolean;
   sidebarToRender: (props: any) => React.ReactNode;
   title: string;
-  updateCurrentViewRenderPayload: (direction: "left" | "right", currentView: TGanttViews) => void;
+  updateCurrentViewRenderPayload: (
+    direction: "left" | "right",
+    currentView: TGanttViews,
+    targetDate?: Date
+  ) => ChartDataType | undefined;
   quickAdd?: React.JSX.Element | undefined;
 };
 
@@ -105,6 +113,26 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
     if (approxRangeLeft < clientWidth) updateCurrentViewRenderPayload("left", currentView);
   };
 
+  const handleScrollToBlock = (block: IGanttBlock) => {
+    const scrollContainer = ganttContainerRef.current as HTMLDivElement;
+    const scrollToDate = getDate(block.start_date);
+    let chartData;
+
+    if (!scrollContainer || !currentViewData || !scrollToDate) return;
+
+    if (scrollToDate.getTime() < currentViewData.data.startDate.getTime()) {
+      chartData = updateCurrentViewRenderPayload("left", currentView, scrollToDate);
+    } else if (scrollToDate.getTime() > currentViewData.data.endDate.getTime()) {
+      chartData = updateCurrentViewRenderPayload("right", currentView, scrollToDate);
+    }
+    // update container's scroll position to the block's position
+    const updatedPosition = getItemPositionWidth(chartData ?? currentViewData, block);
+
+    setTimeout(() => {
+      if (updatedPosition) scrollContainer.scrollLeft = updatedPosition.marginLeft - 4;
+    });
+  };
+
   const CHART_VIEW_COMPONENTS: {
     [key in TGanttViews]: React.FC;
   } = {
@@ -166,6 +194,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                     <GanttChartRowList
                       blockIds={blockIds}
                       blockUpdateHandler={blockUpdateHandler}
+                      handleScrollToBlock={handleScrollToBlock}
                       enableAddBlock={enableAddBlock}
                       showAllBlocks={showAllBlocks}
                       selectionHelpers={helpers}

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

@@ -86,7 +86,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     updateAllBlocksOnChartChangeWhileDragging,
   } = useTimeLineChartStore();
 
-  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews, targetDate?: Date) => {
     const selectedCurrentView: TGanttViews = view;
     const selectedCurrentViewData: ChartDataType | undefined =
       selectedCurrentView && selectedCurrentView === currentViewData?.key
@@ -96,7 +96,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     if (selectedCurrentViewData === undefined) return;
 
     const currentViewHelpers = timelineViewHelpers[selectedCurrentView];
-    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side);
+    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side, targetDate);
     const mergeRenderPayloads = currentViewHelpers.mergeRenderPayloads as (
       a: IWeekBlock[] | IMonthView | IMonthBlock[],
       b: IWeekBlock[] | IMonthView | IMonthBlock[]
@@ -109,7 +109,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
       if (side === "left") {
         updateCurrentView(selectedCurrentView);
         updateRenderView(mergeRenderPayloads(currentRender.payload, renderView));
-        updatingCurrentLeftScrollPosition(currentRender.scrollWidth);
+        updateItemsContainerWidth(currentRender.scrollWidth);
+        if (!targetDate) updateCurrentLeftScrollPosition(currentRender.scrollWidth);
         updateAllBlocksOnChartChangeWhileDragging(currentRender.scrollWidth);
         setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
       } else if (side === "right") {
@@ -125,6 +126,8 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
         }, 50);
       }
     }
+
+    return currentRender.state;
   };
 
   const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
@@ -135,12 +138,17 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const updatingCurrentLeftScrollPosition = (width: number) => {
+  const updateItemsContainerWidth = (width: number) => {
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    if (!scrollContainer) return;
+    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
+  };
+
+  const updateCurrentLeftScrollPosition = (width: number) => {
     const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
     if (!scrollContainer) return;
 
     scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
-    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
   };
 
   const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {

web/core/components/gantt-chart/chart/views/month.tsx

@@ -67,7 +67,7 @@ export const MonthChartView: FC<any> = observer(() => {
                   className={cn(
                     "flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline outline-custom-border-200",
                     {
-                      "bg-custom-primary-10": weekBlock.today,
+                      "bg-custom-primary-100/20": weekBlock.today,
                     }
                   )}
                   style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
@@ -92,7 +92,7 @@ export const MonthChartView: FC<any> = observer(() => {
               <div
                 key={`column-${weekBlock.startDate}-${weekBlock.endDate}`}
                 className={cn("h-full overflow-hidden outline-[0.25px] outline outline-custom-border-100", {
-                  "bg-custom-primary-10": weekBlock.today,
+                  "bg-custom-primary-100/20": weekBlock.today,
                 })}
                 style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
               />

web/core/components/gantt-chart/chart/views/quarter.tsx

@@ -56,7 +56,7 @@ export const QuarterChartView: FC<any> = observer(() => {
                     className={cn(
                       "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline outline-custom-border-200",
                       {
-                        "bg-custom-primary-10": monthBlock.today,
+                        "bg-custom-primary-100/20": monthBlock.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
@@ -80,7 +80,7 @@ export const QuarterChartView: FC<any> = observer(() => {
                 <div
                   key={`column-${rootIndex}-${index}`}
                   className={cn("h-full overflow-hidden outline-[0.25px] outline outline-custom-border-100", {
-                    "bg-custom-primary-10": monthBlock.today,
+                    "bg-custom-primary-100/20": monthBlock.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
                 />

web/core/components/gantt-chart/chart/views/week.tsx

@@ -49,7 +49,7 @@ export const WeekChartView: FC<any> = observer(() => {
                     className={cn(
                       "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline outline-custom-border-200",
                       {
-                        "bg-custom-primary-10": weekDay.today,
+                        "bg-custom-primary-100/20": weekDay.today,
                       }
                     )}
                     style={{ width: `${currentViewData?.data.dayWidth}px` }}
@@ -71,12 +71,12 @@ export const WeekChartView: FC<any> = observer(() => {
               </div>
             </div>
             {/** Day Columns */}
-            <div className="h-full w-full flex-grow flex">
+            <div className="h-full w-full flex-grow flex bg-custom-background-100">
               {block?.children?.map((weekDay, index) => (
                 <div
                   key={`column-${rootIndex}-${index}`}
                   className={cn("h-full overflow-hidden outline-[0.25px] outline outline-custom-border-100", {
-                    "bg-custom-primary-10": weekDay.today,
+                    "bg-custom-primary-100/20": weekDay.today,
                   })}
                   style={{ width: `${currentViewData?.data.dayWidth}px` }}
                 >

web/core/components/gantt-chart/views/month-view.ts

@@ -30,7 +30,7 @@ export interface IMonthView {
  * @param side
  * @returns
  */
-const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | "right") => {
+const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | "right", targetDate?: Date) => {
   let renderState = cloneDeep(monthPayload);
 
   const range: number = renderState.data.approxFilterRange || 6;
@@ -63,30 +63,32 @@ const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | "
   }
   // When side is left, generate more months on the left side of the start date
   else if (side === "left") {
-    const currentDate = renderState.data.startDate;
+    const chartStartDate = renderState.data.startDate;
+    const currentDate = targetDate ? targetDate : chartStartDate;
 
-    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
-    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1);
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
 
     if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate);
 
     startDate = filteredDates.weeks[0]?.startDate;
-    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1);
+    endDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
     renderState = {
       ...renderState,
       data: { ...renderState.data, startDate },
     };
   }
   // When side is right, generate more months on the right side of the end date
   else if (side === "right") {
-    const currentDate = renderState.data.endDate;
+    const chartEndDate = renderState.data.endDate;
+    const currentDate = targetDate ? targetDate : chartEndDate;
 
-    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1);
-    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
+    minusDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 1);
 
     if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate);
 
-    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1);
+    startDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
     endDate = filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate;
     renderState = {
       ...renderState,