code refactor and improvement

packages/constants/src/issue.ts

@@ -39,3 +39,8 @@ export enum EServerGroupByToFilterOptions {
   "project_id" = "project",
   "created_by" = "created_by",
 }
+
+export enum EIssueServiceType {
+  ISSUES = "issues",
+  EPICS = "epics",
+}

packages/types/src/issues/issue.d.ts

@@ -1,3 +1,4 @@
+import { EIssueServiceType } from "@plane/constants";
 import { TIssuePriorities } from "../issues";
 import { TIssueAttachment } from "./issue_attachment";
 import { TIssueLink } from "./issue_link";
@@ -39,6 +40,7 @@ export type TBaseIssue = {
   updated_by: string;
 
   is_draft: boolean;
+  is_epic?: boolean;
 };
 
 export type IssueRelation = {
@@ -121,3 +123,7 @@ export type TIssueDetailWidget =
   | "relations"
   | "links"
   | "attachments";
+
+export type TIssueServiceType =
+  | EIssueServiceType.ISSUES
+  | EIssueServiceType.EPICS;

packages/types/src/project/projects.d.ts

@@ -136,6 +136,7 @@ export type TProjectIssuesSearchParams = {
   issue_id?: string;
   workspace_search: boolean;
   target_date?: string;
+  epic?: boolean;
 };
 
 export interface ISearchIssueResponse {

web/ce/components/epics/epic-modal/index.ts

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

web/ce/components/epics/epic-modal/modal.tsx

@@ -0,0 +1,19 @@
+"use client";
+import React, { FC } from "react";
+import { TIssue } from "@plane/types";
+
+export interface EpicModalProps {
+  data?: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  beforeFormSubmit?: () => Promise<void>;
+  onSubmit?: (res: TIssue) => Promise<void>;
+  fetchIssueDetails?: boolean;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
+  isProjectSelectionDisabled?: boolean;
+}
+
+export const CreateUpdateEpicModal: FC<EpicModalProps> = (props) => <></>;

web/ce/components/epics/index.ts

@@ -0,0 +1 @@
+export * from "./epic-modal";

web/ce/components/gantt-chart/dependency/dependency-paths.tsx

@@ -1 +1,9 @@
-export const TimelineDependencyPaths = () => <></>;
+import { FC } from "react";
+
+type Props = {
+  isEpic?: boolean;
+};
+export const TimelineDependencyPaths: FC<Props> = (props) => {
+  const { isEpic = false } = props;
+  return <></>;
+};

web/ce/components/issue-types/values/update.tsx

@@ -1,9 +1,12 @@
+import { TIssueServiceType } from "@plane/types";
+
 export type TIssueAdditionalPropertyValuesUpdateProps = {
   issueId: string;
   issueTypeId: string;
   projectId: string;
   workspaceSlug: string;
   isDisabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAdditionalPropertyValuesUpdate: React.FC<TIssueAdditionalPropertyValuesUpdateProps> = () => <></>;

web/ce/hooks/use-debounced-duplicate-issues.tsx

@@ -1,6 +1,7 @@
 import { TDeDupeIssue } from "@plane/types";
 
 export const useDebouncedDuplicateIssues = (
+  workspaceSlug: string | undefined,
   workspaceId: string | undefined,
   projectId: string | undefined,
   formData: { name: string | undefined; description_html?: string | undefined; issueId?: string | undefined }

web/ce/store/issue/epic/filter.store.ts

@@ -0,0 +1,15 @@
+import { IProjectIssuesFilter, ProjectIssuesFilter } from "@/store/issue/project";
+import { IIssueRootStore } from "@/store/issue/root.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export type IProjectEpicsFilter = IProjectIssuesFilter;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class ProjectEpicsFilter extends ProjectIssuesFilter implements IProjectEpicsFilter {
+  constructor(_rootStore: IIssueRootStore) {
+    super(_rootStore);
+
+    // root store
+    this.rootIssueStore = _rootStore;
+  }
+}

web/ce/store/issue/epic/index.ts

@@ -0,0 +1,2 @@
+export * from "./filter.store";
+export * from "./issue.store";

web/ce/store/issue/epic/issue.store.ts

@@ -0,0 +1,14 @@
+import { IProjectIssues, ProjectIssues } from "@/store/issue/project";
+import { IIssueRootStore } from "@/store/issue/root.store";
+import { IProjectEpicsFilter } from "./filter.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+
+export type IProjectEpics = IProjectIssues;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class ProjectEpics extends ProjectIssues implements IProjectEpics {
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IProjectEpicsFilter) {
+    super(_rootStore, issueFilterStore);
+  }
+}

web/ce/store/issue/issue-details/activity.store.ts

@@ -7,7 +7,14 @@ import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-import { TIssueActivityComment, TIssueActivity, TIssueActivityMap, TIssueActivityIdMap } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import {
+  TIssueActivityComment,
+  TIssueActivity,
+  TIssueActivityMap,
+  TIssueActivityIdMap,
+  TIssueServiceType,
+} from "@plane/types";
 // plane web constants
 import { EActivityFilterType } from "@/plane-web/constants/issues";
 // services
@@ -29,28 +36,32 @@ export interface IIssueActivityStoreActions {
 
 export interface IIssueActivityStore extends IIssueActivityStoreActions {
   // observables
-  sortOrder: 'asc' | 'desc'
+  sortOrder: "asc" | "desc";
   loader: TActivityLoader;
   activities: TIssueActivityIdMap;
   activityMap: TIssueActivityMap;
   // helper methods
   getActivitiesByIssueId: (issueId: string) => string[] | undefined;
   getActivityById: (activityId: string) => TIssueActivity | undefined;
   getActivityCommentByIssueId: (issueId: string) => TIssueActivityComment[] | undefined;
-  toggleSortOrder: ()=>void;
+  toggleSortOrder: () => void;
 }
 
 export class IssueActivityStore implements IIssueActivityStore {
   // observables
-  sortOrder: "asc" | "desc" = 'asc';
+  sortOrder: "asc" | "desc" = "asc";
   loader: TActivityLoader = "fetch";
   activities: TIssueActivityIdMap = {};
   activityMap: TIssueActivityMap = {};
 
   // services
+  serviceType;
   issueActivityService;
 
-  constructor(protected store: CoreRootStore) {
+  constructor(
+    protected store: CoreRootStore,
+    serviceType: TIssueServiceType = EIssueServiceType.ISSUES
+  ) {
     makeObservable(this, {
       // observables
       sortOrder: observable.ref,
@@ -59,10 +70,11 @@ export class IssueActivityStore implements IIssueActivityStore {
       activityMap: observable,
       // actions
       fetchActivities: action,
-      toggleSortOrder: action
+      toggleSortOrder: action,
     });
+    this.serviceType = serviceType;
     // services
-    this.issueActivityService = new IssueActivityService();
+    this.issueActivityService = new IssueActivityService(this.serviceType);
   }
 
   // helper methods
@@ -81,8 +93,10 @@ export class IssueActivityStore implements IIssueActivityStore {
 
     let activityComments: TIssueActivityComment[] = [];
 
+    const currentStore = this.serviceType === EIssueServiceType.EPICS ? this.store.epic : this.store.issue;
+
     const activities = this.getActivitiesByIssueId(issueId) || [];
-    const comments = this.store.issue.issueDetail.comment.getCommentsByIssueId(issueId) || [];
+    const comments = currentStore.issueDetail.comment.getCommentsByIssueId(issueId) || [];
 
     activities.forEach((activityId) => {
       const activity = this.getActivityById(activityId);
@@ -95,7 +109,7 @@ export class IssueActivityStore implements IIssueActivityStore {
     });
 
     comments.forEach((commentId) => {
-      const comment = this.store.issue.issueDetail.comment.getCommentById(commentId);
+      const comment = currentStore.issueDetail.comment.getCommentById(commentId);
       if (!comment) return;
       activityComments.push({
         id: comment.id,
@@ -104,14 +118,14 @@ export class IssueActivityStore implements IIssueActivityStore {
       });
     });
 
-    activityComments = orderBy(activityComments, (e)=>new Date(e.created_at || 0), this.sortOrder);
+    activityComments = orderBy(activityComments, (e) => new Date(e.created_at || 0), this.sortOrder);
 
     return activityComments;
   });
 
-  toggleSortOrder = ()=>{
-    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-  }
+  toggleSortOrder = () => {
+    this.sortOrder = this.sortOrder === "asc" ? "desc" : "asc";
+  };
 
   // actions
   public async fetchActivities(

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

@@ -56,6 +56,7 @@ type Props = {
     targetDate?: Date
   ) => ChartDataType | undefined;
   quickAdd?: React.JSX.Element | undefined;
+  isEpic?: boolean;
 };
 
 export const GanttChartMainContent: React.FC<Props> = observer((props) => {
@@ -79,6 +80,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
     updateCurrentViewRenderPayload,
     quickAdd,
     updateBlockDates,
+    isEpic = false,
   } = props;
   // refs
   const ganttContainerRef = useRef<HTMLDivElement>(null);
@@ -159,7 +161,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
         entities={{
           [GANTT_SELECT_GROUP]: blockIds ?? [],
         }}
-        disabled={!isBulkOperationsEnabled}
+        disabled={!isBulkOperationsEnabled || isEpic}
       >
         {(helpers) => (
           <>
@@ -187,6 +189,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                 title={title}
                 quickAdd={quickAdd}
                 selectionHelpers={helpers}
+                isEpic={isEpic}
               />
               <div className="relative min-h-full h-max flex-shrink-0 flex-grow">
                 <ActiveChartView />
@@ -208,7 +211,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                       selectionHelpers={helpers}
                       ganttContainerRef={ganttContainerRef}
                     />
-                    <TimelineDependencyPaths />
+                    <TimelineDependencyPaths isEpic={isEpic} />
                     <TimelineDraggablePath />
                     <GanttChartBlocksList
                       blockIds={blockIds}

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

@@ -41,6 +41,7 @@ type ChartViewRootProps = {
   canLoadMoreBlocks?: boolean;
   quickAdd?: React.JSX.Element | undefined;
   showToday: boolean;
+  isEpic?: boolean;
 };
 
 const timelineViewHelpers = {
@@ -71,6 +72,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     quickAdd,
     showToday,
     updateBlockDates,
+    isEpic = false,
   } = props;
   // states
   const [itemsContainerWidth, setItemsContainerWidth] = useState(0);
@@ -204,6 +206,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
         updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
         quickAdd={quickAdd}
         updateBlockDates={updateBlockDates}
+        isEpic={isEpic}
       />
     </div>
   );

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

@@ -26,6 +26,7 @@ type GanttChartRootProps = {
   bottomSpacing?: boolean;
   showAllBlocks?: boolean;
   showToday?: boolean;
+  isEpic?: boolean;
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
@@ -50,6 +51,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
     showToday = true,
     quickAdd,
     updateBlockDates,
+    isEpic = false,
   } = props;
 
   const { setBlockIds } = useTimeLineChartStore();
@@ -81,6 +83,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
       quickAdd={quickAdd}
       showToday={showToday}
       updateBlockDates={updateBlockDates}
+      isEpic={isEpic}
     />
   );
 });

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

@@ -19,10 +19,11 @@ type Props = {
   enableSelection: boolean;
   isDragging: boolean;
   selectionHelpers?: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const IssuesSidebarBlock = observer((props: Props) => {
-  const { block, enableSelection, isDragging, selectionHelpers } = props;
+  const { block, enableSelection, isDragging, selectionHelpers, isEpic = false } = props;
   // store hooks
   const { updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
   const { getIsIssuePeeked } = useIssueDetail();
@@ -73,7 +74,7 @@ export const IssuesSidebarBlock = observer((props: Props) => {
         )}
         <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
           <div className="flex-grow truncate">
-            <IssueGanttSidebarBlock issueId={block.data.id} />
+            <IssueGanttSidebarBlock issueId={block.data.id} isEpic={isEpic} />
           </div>
           {duration && (
             <div className="flex-shrink-0 text-sm text-custom-text-200">

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

@@ -29,6 +29,7 @@ type Props = {
   enableSelection: boolean;
   showAllBlocks?: boolean;
   selectionHelpers?: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
@@ -42,6 +43,7 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
     ganttContainerRef,
     showAllBlocks = false,
     selectionHelpers,
+    isEpic = false,
   } = props;
 
   const { getBlockById } = useTimeLineChart(ETimeLineTypeType.ISSUE);
@@ -101,6 +103,7 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
                       enableSelection={enableSelection}
                       isDragging={isDragging}
                       selectionHelpers={selectionHelpers}
+                      isEpic={isEpic}
                     />
                   )}
                 </GanttDnDHOC>

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

@@ -23,6 +23,7 @@ type Props = {
   title: string;
   quickAdd?: React.JSX.Element | undefined;
   selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const GanttChartSidebar: React.FC<Props> = observer((props) => {
@@ -38,6 +39,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
     title,
     quickAdd,
     selectionHelpers,
+    isEpic = false,
   } = props;
 
   const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(GANTT_SELECT_GROUP) === "empty";
@@ -90,6 +92,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
             ganttContainerRef,
             loadMoreBlocks,
             selectionHelpers,
+            isEpic,
           })}
       </Row>
       {quickAdd ? quickAdd : null}