[WEB-4117] refactor: work item widgets code split (#7078)

* refactor: work item widget code split

* fix: types

web/core/components/issues/issue-detail-widgets/action-buttons.tsx

@@ -4,7 +4,7 @@ import React, { FC } from "react";
 import { Layers, Link, Paperclip, Waypoints } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { TIssueServiceType } from "@plane/types";
+import { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // components
 import {
   IssueAttachmentActionButton,
@@ -12,8 +12,9 @@ import {
   RelationActionButton,
   SubIssuesActionButton,
   IssueDetailWidgetButton,
-  TWorkItemWidgets,
 } from "@/components/issues/issue-detail-widgets";
+// plane web imports
+import { WorkItemAdditionalWidgetActionButtons } from "@/plane-web/components/issues/issue-detail-widgets/action-buttons";
 
 type Props = {
   workspaceSlug: string;
@@ -88,6 +89,14 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
           issueServiceType={issueServiceType}
         />
       )}
+      <WorkItemAdditionalWidgetActionButtons
+        disabled={disabled}
+        hideWidgets={hideWidgets ?? []}
+        issueServiceType={issueServiceType}
+        projectId={projectId}
+        workItemId={issueId}
+        workspaceSlug={workspaceSlug}
+      />
     </div>
   );
 };

web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx

@@ -2,19 +2,18 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { TIssueServiceType } from "@plane/types";
+import { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // components
 import {
   AttachmentsCollapsible,
   LinksCollapsible,
   RelationsCollapsible,
   SubIssuesCollapsible,
-  TWorkItemWidgets,
 } from "@/components/issues/issue-detail-widgets";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // Plane-web
-import { WorkItemAdditionalWidgets } from "@/plane-web/components/issues/issue-detail-widgets";
+import { WorkItemAdditionalWidgetCollapsibles } from "@/plane-web/components/issues/issue-detail-widgets/collapsibles";
 import { useTimeLineRelationOptions } from "@/plane-web/components/relations";
 
 type Props = {
@@ -87,11 +86,13 @@ export const IssueDetailWidgetCollapsibles: FC<Props> = observer((props) => {
           issueServiceType={issueServiceType}
         />
       )}
-      <WorkItemAdditionalWidgets
-        workspaceSlug={workspaceSlug}
+      <WorkItemAdditionalWidgetCollapsibles
+        disabled={disabled}
+        hideWidgets={hideWidgets ?? []}
+        issueServiceType={issueServiceType}
         projectId={projectId}
         workItemId={issueId}
-        disabled={disabled}
+        workspaceSlug={workspaceSlug}
       />
     </div>
   );

web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx

@@ -1,18 +1,19 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
-import { ISearchIssueResponse, TIssue, TIssueServiceType } from "@plane/types";
+import { ISearchIssueResponse, TIssue, TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 import { setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "@/components/core";
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
-
+// plane web imports
+import { WorkItemAdditionalWidgetModals } from "@/plane-web/components/issues/issue-detail-widgets/modals";
+// local imports
 import { IssueLinkCreateUpdateModal } from "../issue-detail/links/create-update-link-modal";
 // helpers
 import { useLinkOperations } from "./links/helper";
 import { useSubIssueOperations } from "./sub-issues/helper";
-import { TWorkItemWidgets } from ".";
 
 type Props = {
   workspaceSlug: string;
@@ -65,7 +66,7 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
 
   const handleExistingIssuesModalClose = () => {
     handleIssueCrudState("existing", null, null);
-    setLastWidgetAction("sub-issues");
+    setLastWidgetAction("sub-work-items");
     toggleSubIssuesModal(null);
   };
 
@@ -80,7 +81,7 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
   const handleCreateUpdateModalClose = () => {
     handleIssueCrudState("create", null, null);
     toggleCreateIssueModal(false);
-    setLastWidgetAction("sub-issues");
+    setLastWidgetAction("sub-work-items");
   };
 
   const handleCreateUpdateModalOnSubmit = async (_issue: TIssue) => {
@@ -190,6 +191,14 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
           workspaceLevelToggle
         />
       )}
+
+      <WorkItemAdditionalWidgetModals
+        hideWidgets={hideWidgets ?? []}
+        issueServiceType={issueServiceType}
+        projectId={projectId}
+        workItemId={issueId}
+        workspaceSlug={workspaceSlug}
+      />
     </>
   );
 });

web/core/components/issues/issue-detail-widgets/root.tsx

@@ -2,7 +2,7 @@
 
 import React, { FC } from "react";
 // plane imports
-import { TIssueServiceType } from "@plane/types";
+import { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // components
 import {
   IssueDetailWidgetActionButtons,
@@ -10,8 +10,6 @@ import {
   IssueDetailWidgetModals,
 } from "@/components/issues/issue-detail-widgets";
 
-export type TWorkItemWidgets = "sub-work-items" | "relations" | "links" | "attachments";
-
 type Props = {
   workspaceSlug: string;
   projectId: string;

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

@@ -22,12 +22,12 @@ export const SubIssuesCollapsible: FC<Props> = observer((props) => {
   // store hooks
   const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
   // derived values
-  const isCollapsibleOpen = openWidgets.includes("sub-issues");
+  const isCollapsibleOpen = openWidgets.includes("sub-work-items");
 
   return (
     <Collapsible
       isOpen={isCollapsibleOpen}
-      onToggle={() => toggleOpenWidget("sub-issues")}
+      onToggle={() => toggleOpenWidget("sub-work-items")}
       title={
         <SubIssuesCollapsibleTitle
           isOpen={isCollapsibleOpen}