chore: code refactor and build fix

web/core/components/issues/delete-issue-modal.tsx

@@ -11,18 +11,18 @@ import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 import { useIssues, useProject, useUser, useUserPermissions } from "@/hooks/store";
 // plane-web
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   dataId?: string | null | undefined;
   data?: TIssue | TDeDupeIssue;
   isSubIssue?: boolean;
   onSubmit?: () => Promise<void>;
+  isEpic?: boolean;
 };
 
 export const DeleteIssueModal: React.FC<Props> = (props) => {
-  const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit } = props;
+  const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit, isEpic = false } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
@@ -70,12 +70,14 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
-            message: `${isSubIssue ? "Sub-issue" : "Issue"} deleted successfully`,
+            message: `${isSubIssue ? "Sub-issue" : isEpic ? "Epic" : "Issue"} deleted successfully`,
           });
           onClose();
         })
         .catch((errors) => {
-          const isPermissionError = errors?.error === "Only admin or creator can delete the issue";
+          const isPermissionError =
+            errors?.error ===
+            `Only admin or creator can delete the ${isSubIssue ? "sub-issue" : isEpic ? "epic" : "issue"}`;
           const currentError = isPermissionError
             ? PROJECT_ERROR_MESSAGES.permissionError
             : PROJECT_ERROR_MESSAGES.issueDeleteError;
@@ -94,14 +96,14 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
       handleSubmit={handleIssueDelete}
       isSubmitting={isDeleting}
       isOpen={isOpen}
-      title="Delete issue"
+      title={`Delete ${isEpic ? "epic" : "issue"}`}
       content={
         <>
-          Are you sure you want to delete issue{" "}
+          {`Are you sure you want to delete ${isEpic ? "epic" : "issue"} `}
           <span className="break-words font-medium text-custom-text-100">
             {projectDetails?.identifier}-{issue?.sequence_id}
           </span>
-          {""}? All of the data related to the issue will be permanently removed. This action cannot be undone.
+          {` ? All of the data related to the ${isEpic ? "epic" : "issue"} will be permanently removed. This action cannot be undone.`}
         </>
       }
     />

web/core/components/issues/filters.tsx

@@ -123,6 +123,7 @@ const HeaderFilters = observer((props: Props) => {
           states={projectStates}
           cycleViewDisabled={!currentProjectDetails?.cycle_view}
           moduleViewDisabled={!currentProjectDetails?.module_view}
+          isEpic={storeType === EIssuesStoreType.EPIC}
         />
       </FiltersDropdown>
       <FiltersDropdown title="Display" placement="bottom-end">
@@ -134,6 +135,7 @@ const HeaderFilters = observer((props: Props) => {
           handleDisplayPropertiesUpdate={handleDisplayProperties}
           cycleViewDisabled={!currentProjectDetails?.cycle_view}
           moduleViewDisabled={!currentProjectDetails?.module_view}
+          isEpic={storeType === EIssuesStoreType.EPIC}
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (

web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx

@@ -53,11 +53,10 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
     },
   });
   // store hooks
+  const { toggleCreateIssueModal, toggleDeleteIssueModal } = useIssueDetail();
   const {
     subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
-    toggleCreateIssueModal,
-    toggleDeleteIssueModal,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // helpers
   const subIssueOperations = useSubIssueOperations(issueServiceType);

web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx

@@ -38,7 +38,7 @@ export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
   return (
     <CollapsibleButton
       isOpen={isOpen}
-      title="Sub-issues"
+      title={`${issueServiceType === EIssueServiceType.EPICS ? "Issues" : "Sub-issues"}`}
       indicatorElement={
         <div className="flex items-center gap-1.5 text-custom-text-300 text-sm">
           <CircularProgressIndicator size={18} percentage={percentage} strokeWidth={3} />

web/core/components/issues/issue-detail/issue-activity/sort-root.tsx

@@ -9,18 +9,24 @@ import { cn } from "@/helpers/common.helper";
 export type TActivitySortRoot = {
   sortOrder: "asc" | "desc";
   toggleSort: () => void;
+  className?: string;
+  iconClassName?: string;
 };
 export const ActivitySortRoot: FC<TActivitySortRoot> = memo((props) => (
   <div
-    className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300 cursor-pointer")}
+    className={cn(
+      getButtonStyling("neutral-primary", "sm"),
+      "px-2 text-custom-text-300 cursor-pointer",
+      props.className
+    )}
     onClick={() => {
       props.toggleSort();
     }}
   >
     {props.sortOrder === "asc" ? (
-      <ArrowUpWideNarrow className="size-4 " />
+      <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
     ) : (
-      <ArrowDownWideNarrow className="size-4 " />
+      <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
     )}
   </div>
 ));

web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -50,7 +50,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   const { workspaceSlug } = useParams();
 
   // hooks
-  const storeType = useIssueStoreType() as CalendarStoreType;
+  const storeType = isEpic ? EIssuesStoreType.EPIC : (useIssueStoreType() as CalendarStoreType);
   const { allowPermissions } = useUserPermissions();
   const { issues, issuesFilter, issueMap } = useIssues(storeType);
   const {

web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -87,6 +87,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
             }}
             quickAddCallback={quickAddCallback}
             addIssuesToView={addIssuesToView}
+            isEpic={isEpic}
           />
         </div>
       )}

web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx

@@ -25,6 +25,7 @@ type Props = {
   ignoreGroupedFilters?: Partial<TIssueGroupByOptions>[];
   cycleViewDisabled?: boolean;
   moduleViewDisabled?: boolean;
+  isEpic?: boolean;
 };
 
 export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
@@ -37,6 +38,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
     ignoreGroupedFilters = [],
     cycleViewDisabled = false,
     moduleViewDisabled = false,
+    isEpic = false,
   } = props;
 
   const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
@@ -61,6 +63,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
             handleUpdate={handleDisplayPropertiesUpdate}
             cycleViewDisabled={cycleViewDisabled}
             moduleViewDisabled={moduleViewDisabled}
+            isEpic={isEpic}
           />
         </div>
       )}

web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx

@@ -16,6 +16,7 @@ type Props = {
   handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
   cycleViewDisabled?: boolean;
   moduleViewDisabled?: boolean;
+  isEpic?: boolean;
 };
 
 export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
@@ -25,6 +26,7 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
     handleUpdate,
     cycleViewDisabled = false,
     moduleViewDisabled = false,
+    isEpic = false,
   } = props;
   // router
   const { workspaceSlug, projectId: routerProjectId } = useParams();
@@ -45,6 +47,11 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
       default:
         return shouldRenderDisplayProperty({ workspaceSlug: workspaceSlug?.toString(), projectId, key: property.key });
     }
+  }).map((property) => {
+    if (isEpic && property.key === "sub_issue_count") {
+      return { ...property, title: "Issue count" };
+    }
+    return property;
   });
 
   return (

web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx

@@ -11,10 +11,11 @@ import { ISSUE_FILTER_OPTIONS } from "@/constants/issue";
 type Props = {
   selectedIssueType: TIssueGroupingFilters | undefined;
   handleUpdate: (val: TIssueGroupingFilters) => void;
+  isEpic?: boolean;
 };
 
 export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
-  const { selectedIssueType, handleUpdate } = props;
+  const { selectedIssueType, handleUpdate, isEpic = false } = props;
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
@@ -23,7 +24,7 @@ export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title="Issue Grouping"
+        title={`${isEpic ? "Epic" : "Issue"} Grouping`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -34,7 +35,7 @@ export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
               key={issueType?.key}
               isChecked={activeIssueType === issueType?.key ? true : false}
               onClick={() => handleUpdate(issueType?.key)}
-              title={issueType.title}
+              title={`${issueType.title} ${isEpic ? "Epics" : "Issues"}`}
               multiple={false}
             />
           ))}

web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx

@@ -42,6 +42,7 @@ type Props = {
   states?: IState[] | undefined;
   cycleViewDisabled?: boolean;
   moduleViewDisabled?: boolean;
+  isEpic?: boolean;
 };
 
 export const FilterSelection: React.FC<Props> = observer((props) => {
@@ -56,6 +57,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     states,
     cycleViewDisabled = false,
     moduleViewDisabled = false,
+    isEpic = false,
   } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -234,6 +236,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
                   type: val,
                 })
               }
+              isEpic={isEpic}
             />
           </div>
         )}

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

@@ -111,6 +111,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           target_date: renderFormattedPayloadDate(targetDate),
         }}
         quickAddCallback={quickAddIssue}
+        isEpic={isEpic}
       />
     ) : undefined;
 
@@ -120,8 +121,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
         <div className="h-full w-full">
           <GanttChartRoot
             border={false}
-            title="Issues"
-            loaderTitle="Issues"
+            title={isEpic ? "Epics" : "Issues"}
+            loaderTitle={isEpic ? "Epics" : "Issues"}
             blockIds={issuesIds}
             blockUpdateHandler={updateIssueBlockStructure}
             blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} isEpic={isEpic} />}

web/core/components/issues/issue-layouts/group-drag-overlay.tsx

@@ -16,6 +16,7 @@ type Props = {
   dropErrorMessage?: string;
   orderBy: TIssueOrderByOptions | undefined;
   isDraggingOverColumn: boolean;
+  isEpic?: boolean;
 };
 
 export const GroupDragOverlay = (props: Props) => {
@@ -27,6 +28,7 @@ export const GroupDragOverlay = (props: Props) => {
     dropErrorMessage,
     orderBy,
     isDraggingOverColumn,
+    isEpic = false,
   } = props;
 
   const shouldOverlayBeVisible = isDraggingOverColumn && canOverlayBeVisible;
@@ -68,7 +70,7 @@ export const GroupDragOverlay = (props: Props) => {
                   The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
                 </span>
               )}
-              <span>Drop here to move the issue.</span>
+              <span>{`Drop here to move the ${isEpic ? "epic" : "issue"}.`}</span>
             </>
           )}
         </div>

web/core/components/issues/issue-layouts/list/list-group.tsx

@@ -284,6 +284,7 @@ export const ListGroup = observer((props: Props) => {
             dropErrorMessage={group.dropErrorMessage}
             orderBy={orderBy}
             isDraggingOverColumn={isDraggingOverColumn}
+            isEpic={isEpic}
           />
           {groupIssueIds && (
             <IssueBlocksList
@@ -312,6 +313,7 @@ export const ListGroup = observer((props: Props) => {
                 prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
                 containerClassName="border-b border-t border-custom-border-200 bg-custom-background-100 "
                 quickAddCallback={quickAddCallback}
+                isEpic={isEpic}
               />
             </div>
           )}