[WEB-4531]chore: refactor for timeline chart (#7440)

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

@@ -3,10 +3,10 @@ import { FC } from "react";
 import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 // hooks
+import { BlockRow } from "@/components/gantt-chart/blocks/block-row";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 // types
-import { BLOCK_HEIGHT } from "../constants";
-import { BlockRow } from "./block-row";
 
 export type GanttChartBlocksProps = {
   blockIds: string[];

apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 //
 import type { IBlockUpdateDependencyData } from "@plane/types";
-import { GanttChartBlock } from "./block";
+import { GanttChartBlock } from "@/components/gantt-chart/blocks/block";
 
 export type GanttChartBlocksProps = {
   blockIds: string[];

apps/web/ce/store/timeline/base-timeline.store.ts

@@ -3,7 +3,13 @@ import set from "lodash/set";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // components
-import type { ChartDataType, IBlockUpdateDependencyData, IGanttBlock, TGanttViews } from "@plane/types";
+import type {
+  ChartDataType,
+  IBlockUpdateDependencyData,
+  IGanttBlock,
+  TGanttViews,
+  EGanttBlockType,
+} from "@plane/types";
 import { renderFormattedPayloadDate } from "@plane/utils";
 import { currentViewDataWithView } from "@/components/gantt-chart/data";
 import {
@@ -177,7 +183,7 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
    * @param getDataById
    * @returns
    */
-  updateBlocks(getDataById: (id: string) => BlockData | undefined | null) {
+  updateBlocks(getDataById: (id: string) => BlockData | undefined | null, type?: EGanttBlockType, index?: number) {
     if (!this.blockIds || !Array.isArray(this.blockIds) || this.isDragging) return true;
 
     const updatedBlockMaps: { path: string[]; value: any }[] = [];
@@ -195,7 +201,11 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
         sort_order: blockData?.sort_order ?? undefined,
         start_date: blockData?.start_date ?? undefined,
         target_date: blockData?.target_date ?? undefined,
-        project_id: blockData?.project_id ?? undefined,
+        meta: {
+          type,
+          index,
+          project_id: blockData?.project_id,
+        },
       };
       if (this.currentViewData && (this.currentViewData?.data?.startDate || this.currentViewData?.data?.dayWidth)) {
         block.position = getItemPositionWidth(this.currentViewData, block);
@@ -285,7 +295,7 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
 
     if (!currBlock?.position || !this.currentViewData) return [];
 
-    const updatePayload: IBlockUpdateDependencyData = { id };
+    const updatePayload: IBlockUpdateDependencyData = { id, meta: currBlock.meta };
 
     // If shouldUpdateHalfBlock or the start date is available then update start date
     if (shouldUpdateHalfBlock || currBlock.start_date) {

apps/web/ce/store/timeline/index.ts

@@ -7,17 +7,20 @@ export interface ITimelineStore {
   issuesTimeLineStore: IIssuesTimeLineStore;
   modulesTimeLineStore: IModulesTimeLineStore;
   projectTimeLineStore: IBaseTimelineStore;
+  groupedTimeLineStore: IBaseTimelineStore;
 }
 
 export class TimeLineStore implements ITimelineStore {
   issuesTimeLineStore: IIssuesTimeLineStore;
   modulesTimeLineStore: IModulesTimeLineStore;
   projectTimeLineStore: IBaseTimelineStore;
+  groupedTimeLineStore: IBaseTimelineStore;
 
   constructor(rootStore: RootStore) {
     this.issuesTimeLineStore = new IssuesTimeLineStore(rootStore);
     this.modulesTimeLineStore = new ModulesTimeLineStore(rootStore);
     // Dummy store
     this.projectTimeLineStore = new BaseTimeLineStore(rootStore);
+    this.groupedTimeLineStore = new BaseTimeLineStore(rootStore);
   }
 }

apps/web/core/components/gantt-chart/blocks/index.ts

@@ -1 +0,0 @@
-export * from "./blocks-list";

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

@@ -6,23 +6,18 @@ import { ChartDataType, IBlockUpdateData, IBlockUpdateDependencyData, IGanttBloc
 import { cn, getDate } from "@plane/utils";
 // components
 import { MultipleSelectGroup } from "@/components/core";
-import {
+import { GanttChartSidebar, MonthChartView, QuarterChartView, WeekChartView } from "@/components/gantt-chart";
-  GanttChartBlocksList,
-  GanttChartSidebar,
-  MonthChartView,
-  QuarterChartView,
-  WeekChartView,
-} from "@/components/gantt-chart";
 // helpers
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 // plane web components
 import { TimelineDependencyPaths, TimelineDraggablePath } from "@/plane-web/components/gantt-chart";
+import { GanttChartRowList } from "@/plane-web/components/gantt-chart/blocks/block-row-list";
+import { GanttChartBlocksList } from "@/plane-web/components/gantt-chart/blocks/blocks-list";
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
 // plane web hooks
 import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status";
 //
-import { GanttChartRowList } from "../blocks/block-row-list";
 import { DEFAULT_BLOCK_WIDTH, GANTT_SELECT_GROUP, HEADER_HEIGHT } from "../constants";
 import { getItemPositionWidth } from "../views";
 import { TimelineDragHelper } from "./timeline-drag-helper";

apps/web/core/components/gantt-chart/contexts/index.tsx

@@ -4,6 +4,7 @@ export enum ETimeLineTypeType {
   ISSUE = "ISSUE",
   MODULE = "MODULE",
   PROJECT = "PROJECT",
+  GROUPED = "GROUPED",
 }
 
 export const TimeLineTypeContext = createContext<ETimeLineTypeType | undefined>(undefined);

apps/web/core/components/gantt-chart/helpers/add-block.tsx

@@ -48,6 +48,7 @@ export const ChartAddBlock: React.FC<Props> = observer((props) => {
     blockUpdateHandler(block.data, {
       start_date: renderFormattedPayloadDate(startDate) ?? undefined,
       target_date: renderFormattedPayloadDate(endDate) ?? undefined,
+      meta: block.meta,
     });
   };
 

apps/web/core/components/gantt-chart/helpers/draggable.tsx

@@ -53,7 +53,7 @@ export const ChartDraggable: React.FC<Props> = observer((props) => {
         })}
         onMouseDown={(e) => enableBlockMove && handleBlockDrag(e, "move")}
       >
-        {blockToRender(block.data)}
+        {blockToRender({ ...block.data, meta: block.meta })}
       </div>
       {/* right resize drag handle */}
       <RightResizable

apps/web/core/components/gantt-chart/index.ts

@@ -1,4 +1,3 @@
-export * from "./blocks";
 export * from "./chart";
 export * from "./helpers";
 export * from "./root";

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

@@ -2,7 +2,7 @@ import { RefObject } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // components
-import type { ChartDataType, IBlockUpdateData, IGanttBlock } from "@plane/types";
+import type { IBlockUpdateData } from "@plane/types";
 import { Row, ERowVariant } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { MultipleSelectGroupAction } from "@/components/core";
@@ -82,7 +82,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
         <h6>{t("common.duration")}</h6>
       </Row>
 
-      <Row variant={ERowVariant.HUGGING} className="min-h-full h-max bg-custom-background-100 overflow-hidden">
+      <Row variant={ERowVariant.HUGGING} className="min-h-full h-max bg-custom-background-100">
         {sidebarToRender &&
           sidebarToRender({
             title,

apps/web/core/hooks/use-timeline-chart.ts

@@ -17,6 +17,8 @@ export const useTimeLineChart = (timeLineType: ETimeLineTypeType): IBaseTimeline
       return context.timelineStore.modulesTimeLineStore as IBaseTimelineStore;
     case ETimeLineTypeType.PROJECT:
       return context.timelineStore.projectTimeLineStore as IBaseTimelineStore;
+    case ETimeLineTypeType.GROUPED:
+      return context.timelineStore.groupedTimeLineStore as IBaseTimelineStore;
   }
 };
 

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

@@ -0,0 +1 @@
+export * from "ce/components/gantt-chart/blocks/block-row-list";

apps/web/ee/components/gantt-chart/blocks/blocks-list.tsx

@@ -0,0 +1 @@
+export * from "ce/components/gantt-chart/blocks/blocks-list";

packages/types/src/layout/gantt.ts

@@ -1,3 +1,8 @@
+export enum EGanttBlockType {
+  EPIC = "epic",
+  PROJECT = "project",
+  ISSUE = "issue",
+}
 export interface IGanttBlock {
   data: any;
   id: string;
@@ -9,7 +14,7 @@ export interface IGanttBlock {
   sort_order: number | undefined;
   start_date: string | undefined;
   target_date: string | undefined;
-  project_id: string | undefined;
+  meta?: Record<string, any>;
 }
 
 export interface IBlockUpdateData {
@@ -20,13 +25,14 @@ export interface IBlockUpdateData {
   };
   start_date?: string;
   target_date?: string;
+  meta?: Record<string, any>;
 }
 
 export interface IBlockUpdateDependencyData {
   id: string;
   start_date?: string;
   target_date?: string;
-  project_id?: string;
+  meta?: Record<string, any>;
 }
 
 export type TGanttViews = "week" | "month" | "quarter";

packages/utils/src/work-item/base.ts

@@ -190,7 +190,9 @@ export const getIssueBlocksStructure = (block: TIssue): IGanttBlock => ({
   sort_order: block?.sort_order,
   start_date: block?.start_date ?? undefined,
   target_date: block?.target_date ?? undefined,
-  project_id: block?.project_id ?? undefined,
+  meta: {
+    project_id: block?.project_id ?? undefined,
+  },
 });
 
 export const formatTextList = (TextArray: string[]): string => {