[WEB-1843] chore: minor file restructuring. (#5044)

packages/editor/src/core/types/index.ts

@@ -3,3 +3,4 @@ export * from "./embed";
 export * from "./image";
 export * from "./mention-suggestion";
 export * from "./slash-commands-suggestion";
+export * from "@/plane-editor/types";

packages/types/src/pages.d.ts

@@ -46,3 +46,5 @@ export type TPageFilters = {
   sortBy: TPageFiltersSortBy;
   filters?: TPageFilterProps;
 };
+
+export type TPageEmbedType = "mention" | "issue";

web/ce/components/pages/editor/embed/index.ts

@@ -1 +1 @@
-export * from "./issue-embed";
+export * from "./issue-embed-upgrade-card";

web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx

@@ -2,10 +2,9 @@ import { Crown } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 
-export const IssueEmbedCard: React.FC<any> = (props) => (
+export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
   <div
-    className={`${
+    className={`${props.selected ? "border-custom-primary-200 border-[2px]" : ""
-      props.selected ? "border-custom-primary-200 border-[2px]" : ""
       } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
   >
     <h5 className="h-[20%] text-xs text-custom-text-300 p-2">

web/ce/constants/issue.ts

@@ -1 +0,0 @@
-export const ENABLE_BULK_OPERATIONS = false;

web/ce/hooks/use-bulk-operation-status.ts

@@ -0,0 +1 @@
+export const useBulkOperationStatus = () => false;

web/ce/hooks/use-issue-embed.tsx

@@ -0,0 +1,24 @@
+// editor
+import { TEmbedConfig, TReadOnlyEmbedConfig } from "@plane/editor";
+// types
+import { TPageEmbedType } from "@plane/types";
+// plane web components
+import { IssueEmbedUpgradeCard } from "@/plane-web/components/pages";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useIssueEmbed = (workspaceSlug: string, projectId: string, queryType: TPageEmbedType = "issue") => {
+  const widgetCallback = () => <IssueEmbedUpgradeCard />;
+
+  const issueEmbedProps: TEmbedConfig["issue"] = {
+    widgetCallback,
+  };
+
+  const issueEmbedReadOnlyProps: TReadOnlyEmbedConfig["issue"] = {
+    widgetCallback,
+  };
+
+  return {
+    issueEmbedProps,
+    issueEmbedReadOnlyProps,
+  };
+};

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

@@ -22,8 +22,8 @@ import {
 import { cn } from "@/helpers/common.helper";
 // plane web components
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
-// plane web constants
+// plane web hooks
-import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
+import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status";
 // helpers
 // constants
 import { GANTT_SELECT_GROUP } from "../constants";
@@ -78,6 +78,8 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
   const ganttContainerRef = useRef<HTMLDivElement>(null);
   // chart hook
   const { currentView, currentViewData } = useGanttChart();
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
 
   // Enable Auto Scroll for Ganttlist
   useEffect(() => {
@@ -126,7 +128,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
       entities={{
         [GANTT_SELECT_GROUP]: blockIds ?? [],
       }}
-      disabled={!ENABLE_BULK_OPERATIONS}
+      disabled={!isBulkOperationsEnabled}
     >
       {(helpers) => (
         <>

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

@@ -14,8 +14,8 @@ import { getIssueBlocksStructure } from "@/helpers/issue.helper";
 import { useIssues, useUser } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
-// plane web constants
+// plane web hooks
-import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
+import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status";
 
 import { IssueLayoutHOC } from "../issue-layout-HOC";
 
@@ -42,6 +42,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
     membership: { currentProjectRole },
   } = useUser();
   const appliedDisplayFilters = issuesFilter.issueFilters?.displayFilters;
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
 
   useEffect(() => {
     fetchIssues("init-loader", { canGroup: false, perPageCount: 100 }, viewId);
@@ -99,7 +101,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           enableBlockMove={isAllowed}
           enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
           enableAddBlock={isAllowed}
-          enableSelection={ENABLE_BULK_OPERATIONS && isAllowed}
+          enableSelection={isBulkOperationsEnabled && isAllowed}
           quickAdd={
             enableIssueCreation && isAllowed ? <GanttQuickAddIssueForm quickAddCallback={quickAddIssue} /> : undefined
           }

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

@@ -22,8 +22,8 @@ import { useCycle, useLabel, useMember, useModule, useProject, useProjectState }
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // plane web components
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
-// plane web constants
+// plane web hooks
-import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
+import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status";
 // utils
 import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation, isSubGrouped } from "../utils";
 import { ListGroup } from "./list-group";
@@ -76,6 +76,8 @@ export const List: React.FC<IList> = observer((props) => {
   const projectState = useProjectState();
   const cycle = useCycle();
   const projectModule = useModule();
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
@@ -129,7 +131,7 @@ export const List: React.FC<IList> = observer((props) => {
   return (
     <div className="relative size-full flex flex-col">
       {groups && (
-        <MultipleSelectGroup containerRef={containerRef} entities={entities} disabled={!ENABLE_BULK_OPERATIONS}>
+        <MultipleSelectGroup containerRef={containerRef} entities={entities} disabled={!isBulkOperationsEnabled}>
           {(helpers) => (
             <>
               <div

web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -12,8 +12,8 @@ import { SPREADSHEET_PROPERTY_LIST, SPREADSHEET_SELECT_GROUP } from "@/constants
 import { useProject } from "@/hooks/store";
 // plane web components
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
-// plane web constants
+// plane web hooks
-import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
+import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status";
 // types
 import { TRenderQuickActions } from "../list/list-view-types";
 import { SpreadsheetTable } from "./spreadsheet-table";
@@ -54,8 +54,10 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
   // refs
   const containerRef = useRef<HTMLTableElement | null>(null);
   const portalRef = useRef<HTMLDivElement | null>(null);
-
+  // store hooks
   const { currentProjectDetails } = useProject();
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
 
   const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
 
@@ -82,7 +84,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
         entities={{
           [SPREADSHEET_SELECT_GROUP]: issueIds,
         }}
-        disabled={!ENABLE_BULK_OPERATIONS}
+        disabled={!isBulkOperationsEnabled}
       >
         {(helpers) => (
           <>

web/core/components/pages/editor/editor-body.tsx

@@ -18,8 +18,8 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
 import { usePageFilters } from "@/hooks/use-page-filters";
-// plane web components
+// plane web hooks
-import { IssueEmbedCard } from "@/plane-web/components/pages";
+import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
 // services
 import { FileService } from "@/services/file.service";
 // store
@@ -80,14 +80,21 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     members: projectMemberDetails,
     user: currentUser ?? undefined,
   });
+
   // page filters
   const { isFullWidth } = usePageFilters();
+  // issue-embed
+  const { issueEmbedProps, issueEmbedReadOnlyProps } = useIssueEmbed(
+    workspaceSlug?.toString() ?? "",
+    projectId?.toString() ?? ""
+  );
 
   useEffect(() => {
     updateMarkings(pageDescription ?? "<p></p>");
   }, [pageDescription, updateMarkings]);
 
-  if (pageId === undefined || !pageDescriptionYJS || !isDescriptionReady) return <PageContentLoader />;
+  if (pageId === undefined || pageDescription === undefined || !pageDescriptionYJS || !isDescriptionReady)
+    return <PageContentLoader />;
 
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
@@ -140,9 +147,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 suggestions: mentionSuggestions,
               }}
               embedHandler={{
-                issue: {
+                issue: issueEmbedProps,
-                  widgetCallback: () => <IssueEmbedCard />,
-                },
               }}
             />
           ) : (
@@ -156,9 +161,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 highlights: mentionHighlights,
               }}
               embedHandler={{
-                issue: {
+                issue: issueEmbedReadOnlyProps,
-                  widgetCallback: () => <IssueEmbedCard />,
-                },
               }}
             />
           )}

web/ee/constants/issue.ts

@@ -1 +0,0 @@
-export * from "ce/constants/issue";

web/ee/hooks/use-issue-embed.tsx

@@ -0,0 +1 @@
+export * from "ce/hooks/use-issue-embed";