chore: files restructure (#4766)

* chore: bulk operations folder restructuring.

* fix: build errors

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx

@@ -9,11 +9,11 @@ import { PageHead } from "@/components/core";
 import { CycleDetailsSidebar } from "@/components/cycles";
 import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
+// import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCycle, useIssues, useProject } from "@/hooks/store";
+import { useCycle, useProject } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyCycle from "@/public/empty-state/cycle.svg";
@@ -25,7 +25,7 @@ const CycleDetailPage = observer(() => {
   // store hooks
   const { fetchCycleDetails, getCycleById } = useCycle();
   const { getProjectById } = useProject();
-  const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  // const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   // hooks
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
   // fetching cycle details
@@ -46,7 +46,7 @@ const CycleDetailPage = observer(() => {
    */
   const toggleSidebar = () => setValue(`${!isSidebarCollapsed}`);
 
-  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+  // const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
   return (
     <>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx

@@ -9,11 +9,11 @@ import { PageHead } from "@/components/core";
 import { ModuleLayoutRoot } from "@/components/issues";
 import { ModuleDetailsSidebar } from "@/components/modules";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
+// import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useIssues, useModule, useProject } from "@/hooks/store";
+import { useModule, useProject } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyModule from "@/public/empty-state/module.svg";
@@ -25,7 +25,7 @@ const ModuleIssuesPage = observer(() => {
   // store hooks
   const { fetchModuleDetails, getModuleById } = useModule();
   const { getProjectById } = useProject();
-  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+  // const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   // local storage
   const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@@ -47,7 +47,7 @@ const ModuleIssuesPage = observer(() => {
 
   if (!workspaceSlug || !projectId || !moduleId) return <></>;
 
-  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+  // const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
 
   return (
     <>

web/ce/components/issues/bulk-operations/index.ts

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

web/ce/components/issues/index.ts

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

web/ce/constants/issue.ts

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

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

@@ -19,9 +19,12 @@ import {
   WeekChartView,
   YearChartView,
 } from "@/components/gantt-chart";
-import { IssueBulkOperationsRoot } from "@/components/issues";
-// helpers
 import { cn } from "@/helpers/common.helper";
+// plane web components
+import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
+// plane web constants
+import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
+// helpers
 // constants
 import { GANTT_SELECT_GROUP } from "../constants";
 // hooks
@@ -123,7 +126,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
       entities={{
         [GANTT_SELECT_GROUP]: blockIds ?? [],
       }}
-      disabled
+      disabled={!ENABLE_BULK_OPERATIONS}
     >
       {(helpers) => (
         <>

web/core/components/issues/bulk-operations/actions/archive.tsx

@@ -1,67 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-// ui
-import { ArchiveIcon, Tooltip } from "@plane/ui";
-// components
-// constants
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
-// helpers
-import { cn } from "@/helpers/common.helper";
-// hooks
-import { useAppRouter, useIssueDetail, useProjectState } from "@/hooks/store";
-import { BulkArchiveConfirmationModal } from "../bulk-archive-modal";
-
-type Props = {
-  handleClearSelection: () => void;
-  selectedEntityIds: string[];
-};
-
-export const BulkArchiveIssues: React.FC<Props> = observer((props) => {
-  const { handleClearSelection, selectedEntityIds } = props;
-  // states
-  const [isBulkArchiveModalOpen, setIsBulkArchiveModalOpen] = useState(false);
-  // store hooks
-  const { projectId, workspaceSlug } = useAppRouter();
-  const {
-    issue: { getIssueById },
-  } = useIssueDetail();
-  const { getStateById } = useProjectState();
-  const canAllIssuesBeArchived = selectedEntityIds.every((issueId) => {
-    const issueDetails = getIssueById(issueId);
-    if (!issueDetails) return false;
-    const stateDetails = getStateById(issueDetails.state_id);
-    if (!stateDetails) return false;
-    return ARCHIVABLE_STATE_GROUPS.includes(stateDetails.group);
-  });
-
-  return (
-    <>
-      {projectId && workspaceSlug && (
-        <BulkArchiveConfirmationModal
-          isOpen={isBulkArchiveModalOpen}
-          handleClose={() => setIsBulkArchiveModalOpen(false)}
-          issueIds={selectedEntityIds}
-          onSubmit={handleClearSelection}
-          projectId={projectId.toString()}
-          workspaceSlug={workspaceSlug.toString()}
-        />
-      )}
-      <Tooltip
-        tooltipHeading="Archive"
-        tooltipContent={canAllIssuesBeArchived ? "" : "The selected issues are not in the right state group to archive"}
-      >
-        <button
-          type="button"
-          className={cn("outline-none grid place-items-center", {
-            "cursor-not-allowed text-custom-text-400": !canAllIssuesBeArchived,
-          })}
-          onClick={() => {
-            if (canAllIssuesBeArchived) setIsBulkArchiveModalOpen(true);
-          }}
-        >
-          <ArchiveIcon className="size-4" />
-        </button>
-      </Tooltip>
-    </>
-  );
-});

web/core/components/issues/bulk-operations/actions/delete.tsx

@@ -1,45 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { Trash2 } from "lucide-react";
-// ui
-import { Tooltip } from "@plane/ui";
-// hooks
-import { useAppRouter } from "@/hooks/store";
-import { BulkDeleteConfirmationModal } from "../bulk-delete-modal";
-
-type Props = {
-  handleClearSelection: () => void;
-  selectedEntityIds: string[];
-};
-
-export const BulkDeleteIssues: React.FC<Props> = observer((props) => {
-  const { handleClearSelection, selectedEntityIds } = props;
-  // states
-  const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
-  // store hooks
-  const { projectId, workspaceSlug } = useAppRouter();
-
-  return (
-    <>
-      {projectId && workspaceSlug && (
-        <BulkDeleteConfirmationModal
-          isOpen={isBulkDeleteModalOpen}
-          handleClose={() => setIsBulkDeleteModalOpen(false)}
-          issueIds={selectedEntityIds}
-          onSubmit={handleClearSelection}
-          projectId={projectId.toString()}
-          workspaceSlug={workspaceSlug.toString()}
-        />
-      )}
-      <Tooltip tooltipHeading="Delete" tooltipContent="">
-        <button
-          type="button"
-          className="outline-none grid place-items-center"
-          onClick={() => setIsBulkDeleteModalOpen(true)}
-        >
-          <Trash2 className="size-4" />
-        </button>
-      </Tooltip>
-    </>
-  );
-});

web/core/components/issues/bulk-operations/actions/index.ts

@@ -1,3 +0,0 @@
-export * from "./archive";
-export * from "./delete";
-export * from "./root";

web/core/components/issues/bulk-operations/actions/root.tsx

@@ -1,18 +0,0 @@
-import { BulkArchiveIssues } from "./archive";
-import { BulkDeleteIssues } from "./delete";
-
-type Props = {
-  handleClearSelection: () => void;
-  selectedEntityIds: string[];
-};
-
-export const BulkOperationsActionsRoot: React.FC<Props> = (props) => {
-  const { handleClearSelection, selectedEntityIds } = props;
-
-  return (
-    <div className="h-7 px-3 flex items-center gap-3 flex-shrink-0">
-      <BulkArchiveIssues handleClearSelection={handleClearSelection} selectedEntityIds={selectedEntityIds} />
-      <BulkDeleteIssues handleClearSelection={handleClearSelection} selectedEntityIds={selectedEntityIds} />
-    </div>
-  );
-};

web/core/components/issues/bulk-operations/bulk-archive-modal.tsx

@@ -1,83 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-// ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore, EModalPosition, EModalWidth } from "@/components/core";
-// constants
-import { EErrorCodes, ERROR_DETAILS } from "@/constants/errors";
-// hooks
-import { useIssues } from "@/hooks/store";
-import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
-
-type Props = {
-  handleClose: () => void;
-  isOpen: boolean;
-  issueIds: string[];
-  onSubmit?: () => void;
-  projectId: string;
-  workspaceSlug: string;
-};
-
-export const BulkArchiveConfirmationModal: React.FC<Props> = observer((props) => {
-  const { handleClose, isOpen, issueIds, onSubmit, projectId, workspaceSlug } = props;
-  // states
-  const [isArchiving, setIsDeleting] = useState(false);
-  // store hooks
-  const storeType = useIssueStoreType();
-  const {
-    issues: { archiveBulkIssues },
-  } = useIssues(storeType);
-
-  const handleSubmit = async () => {
-    setIsDeleting(true);
-
-    archiveBulkIssues &&
-      (await archiveBulkIssues(workspaceSlug, projectId, issueIds)
-        .then(() => {
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Issues archived successfully.",
-          });
-          onSubmit?.();
-          handleClose();
-        })
-        .catch((error) => {
-          const errorInfo = ERROR_DETAILS[error?.error_code as EErrorCodes] ?? undefined;
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: errorInfo?.title ?? "Error!",
-            message: errorInfo?.message ?? "Something went wrong. Please try again.",
-          });
-        })
-        .finally(() => setIsDeleting(false)));
-  };
-
-  const issueVariant = issueIds.length > 1 ? "issues" : "issue";
-
-  return (
-    <AlertModalCore
-      handleClose={handleClose}
-      handleSubmit={handleSubmit}
-      isSubmitting={isArchiving}
-      isOpen={isOpen}
-      variant="primary"
-      position={EModalPosition.CENTER}
-      width={EModalWidth.XL}
-      title={`Archive ${issueVariant}`}
-      content={
-        <>
-          Are you sure you want to archive {issueIds.length} {issueVariant}? Sub issues of selected {issueVariant} will
-          also be archived. Once archived {issueIds.length > 1 ? "they" : "it"} can be restored later via the archives
-          section.
-        </>
-      }
-      primaryButtonText={{
-        loading: "Archiving",
-        default: `Archive ${issueVariant}`,
-      }}
-      hideIcon
-    />
-  );
-});

web/core/components/issues/bulk-operations/bulk-delete-modal.tsx

@@ -1,79 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-// ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore, EModalPosition, EModalWidth } from "@/components/core";
-// constants
-// hooks
-import { useIssues } from "@/hooks/store";
-import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
-
-type Props = {
-  handleClose: () => void;
-  isOpen: boolean;
-  issueIds: string[];
-  onSubmit?: () => void;
-  projectId: string;
-  workspaceSlug: string;
-};
-
-export const BulkDeleteConfirmationModal: React.FC<Props> = observer((props) => {
-  const { handleClose, isOpen, issueIds, onSubmit, projectId, workspaceSlug } = props;
-  // states
-  const [isDeleting, setIsDeleting] = useState(false);
-  // store hooks
-  const storeType = useIssueStoreType();
-  const {
-    issues: { removeBulkIssues },
-  } = useIssues(storeType);
-
-  const handleSubmit = async () => {
-    setIsDeleting(true);
-
-    await removeBulkIssues(workspaceSlug, projectId, issueIds)
-      .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Issues deleted successfully.",
-        });
-        onSubmit?.();
-        handleClose();
-      })
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        })
-      )
-      .finally(() => setIsDeleting(false));
-  };
-
-  const issueVariant = issueIds.length > 1 ? "issues" : "issue";
-
-  return (
-    <AlertModalCore
-      handleClose={handleClose}
-      handleSubmit={handleSubmit}
-      isSubmitting={isDeleting}
-      isOpen={isOpen}
-      variant="danger"
-      position={EModalPosition.CENTER}
-      width={EModalWidth.XL}
-      title={`Delete ${issueVariant}`}
-      content={
-        <>
-          Are you sure you want to delete {issueIds.length} {issueVariant}? Sub issues of selected {issueVariant} will
-          also be deleted. All of the data related to the {issueVariant} will be permanently removed. This action cannot
-          be undone.
-        </>
-      }
-      primaryButtonText={{
-        loading: "Deleting",
-        default: `Delete ${issueVariant}`,
-      }}
-    />
-  );
-});

web/core/components/issues/bulk-operations/exrtra-properties.tsx

@@ -1 +0,0 @@
-export const BulkOperationsExtraProperties = () => null;

web/core/components/issues/bulk-operations/index.ts

@@ -1,2 +1 @@
-export * from "./root";
 export * from "./upgrade-banner";

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

@@ -14,6 +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
+import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
 
 import { IssueLayoutHOC } from "../issue-layout-HOC";
 
@@ -97,7 +99,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           enableBlockMove={isAllowed}
           enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
           enableAddBlock={isAllowed}
-          enableSelection={false}
+          enableSelection={ENABLE_BULK_OPERATIONS && isAllowed}
           quickAdd={
             enableIssueCreation && isAllowed ? <GanttQuickAddIssueForm quickAddCallback={quickAddIssue} /> : undefined
           }

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

@@ -15,12 +15,15 @@ import {
 } from "@plane/types";
 // components
 import { MultipleSelectGroup } from "@/components/core";
-import { IssueBulkOperationsRoot } from "@/components/issues";
 // constants
 import { ALL_ISSUES } from "@/constants/issue";
 // hooks
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+// plane web components
+import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
+// plane web constants
+import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
 // utils
 import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
 import { ListGroup } from "./list-group";
@@ -126,7 +129,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>
+        <MultipleSelectGroup containerRef={containerRef} entities={entities} disabled={!ENABLE_BULK_OPERATIONS}>
           {(helpers) => (
             <>
               <div

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

@@ -5,11 +5,15 @@ import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@pl
 // components
 import { LogoSpinner } from "@/components/common";
 import { MultipleSelectGroup } from "@/components/core";
-import { IssueBulkOperationsRoot, SpreadsheetQuickAddIssueForm } from "@/components/issues";
+import { SpreadsheetQuickAddIssueForm } from "@/components/issues";
 // constants
 import { SPREADSHEET_PROPERTY_LIST, SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
 // hooks
 import { useProject } from "@/hooks/store";
+// plane web components
+import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
+// plane web constants
+import { ENABLE_BULK_OPERATIONS } from "@/plane-web/constants/issue";
 // types
 import { TRenderQuickActions } from "../list/list-view-types";
 import { SpreadsheetTable } from "./spreadsheet-table";
@@ -78,7 +82,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
         entities={{
           [SPREADSHEET_SELECT_GROUP]: issueIds,
         }}
-        disabled
+        disabled={!ENABLE_BULK_OPERATIONS}
       >
         {(helpers) => (
           <>

web/ee/components/issues/bulk-operations/index.ts

@@ -0,0 +1 @@
+export * from "ce/components/issues/bulk-operations/index";

web/ee/constants/issue.ts

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

web/tsconfig.json

@@ -11,7 +11,7 @@
       "@/helpers/*": ["helpers/*"],
       "@/public/*": ["public/*"],
       "@/styles/*": ["styles/*"],
-      "@split/*": ["ce/*"]
+      "@/plane-web/*": ["ce/*"]
     },
     "plugins": [
       {