fix major build errors

web/components/core/modals/bulk-delete-issues-modal-item.tsx

@@ -1,13 +1,18 @@
 import { observer } from "mobx-react-lite";
 import { Combobox } from "@headlessui/react";
 // hooks
-import { useProjectState } from "@/hooks/store";
+import { ISearchIssueResponse } from "@plane/types";
 
-export const BulkDeleteIssuesModalItem: React.FC<any> = observer((props) => {
+interface Props {
-  const { issue, delete_issue_ids, identifier } = props;
+  issue: ISearchIssueResponse;
-  const { getStateById } = useProjectState();
+  canDeleteIssueIds: boolean;
+  identifier: string | undefined;
+}
 
-  const color = getStateById(issue.state_id)?.color;
+export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props) => {
+  const { issue, canDeleteIssueIds, identifier } = props;
+
+  const color = issue.state__color;
 
   return (
     <Combobox.Option
@@ -21,7 +26,7 @@ export const BulkDeleteIssuesModalItem: React.FC<any> = observer((props) => {
       }
     >
       <div className="flex items-center gap-2">
-        <input type="checkbox" checked={delete_issue_ids} readOnly />
+        <input type="checkbox" checked={canDeleteIssueIds} readOnly />
         <span
           className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
           style={{

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

@@ -127,7 +127,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
             <BulkDeleteIssuesModalItem
               issue={issue}
               identifier={projectDetails?.identifier}
-              delete_issue_ids={watch("delete_issue_ids").includes(issue.id)}
+              canDeleteIssueIds={watch("delete_issue_ids").includes(issue.id)}
               key={issue.id}
             />
           ))}

web/components/inbox/modals/select-duplicate.tsx

@@ -1,20 +1,21 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import useSWR from "swr";
 import { Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-// hooks
 // icons
 // components
+// types
+import { ISearchIssueResponse } from "@plane/types";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 import { EmptyState } from "@/components/empty-state";
-// services
 // constants
 import { EmptyStateType } from "@/constants/empty-state";
-import { PROJECT_ISSUES_LIST } from "@/constants/fetch-keys";
+// hooks
-import { useProject, useProjectState } from "@/hooks/store";
+import { useProject } from "@/hooks/store";
-import { IssueService } from "@/services/issue";
+import useDebounce from "@/hooks/use-debounce";
+// services
+import { ProjectService } from "@/services/project";
 
 type Props = {
   isOpen: boolean;
@@ -23,7 +24,7 @@ type Props = {
   onSubmit: (issueId: string) => void;
 };
 
-const issueService = new IssueService();
+const projectService = new ProjectService();
 
 export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { isOpen, onClose, onSubmit, value } = props;
@@ -35,18 +36,27 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, issueId } = router.query;
 
   // hooks
-  const { getProjectStates } = useProjectState();
   const { getProjectById } = useProject();
 
-  const { data: issues } = useSWR(
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+  const [isSearching, setIsSearching] = useState(false);
-    workspaceSlug && projectId
+
-      ? () =>
+  const debouncedSearchTerm: string = useDebounce(query, 500);
-          issueService
+
-            .getIssues(workspaceSlug as string, projectId as string)
+  useEffect(() => {
-            .then((res) => Object.values(res ?? {}).filter((issue) => issue.id !== issueId))
+    if (!isOpen || !workspaceSlug || !projectId) return;
-      : null
+
-  );
+    setIsSearching(true);
+    projectService
+      .projectIssuesSearch(workspaceSlug.toString(), projectId.toString(), {
+        search: debouncedSearchTerm,
+        workspace_search: false,
+      })
+      .then((res: ISearchIssueResponse[]) => setIssues(res))
+      .finally(() => setIsSearching(false));
+  }, [debouncedSearchTerm, isOpen, projectId, workspaceSlug]);
+
+  const filteredIssues = issues.filter((issue) => issue.id !== issueId);
 
   useEffect(() => {
     if (!value) {
@@ -69,7 +79,52 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
     handleClose();
   };
 
-  const filteredIssues = (query === "" ? issues : issues?.filter((issue) => issue.name.includes(query))) ?? [];
+  const issueList =
+    filteredIssues.length > 0 ? (
+      <li className="p-2">
+        {query === "" && <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select issue</h2>}
+        <ul className="text-sm text-custom-text-100">
+          {filteredIssues.map((issue) => {
+            const stateColor = issue.state__color || "";
+
+            return (
+              <Combobox.Option
+                key={issue.id}
+                as="div"
+                value={issue.id}
+                className={({ active, selected }) =>
+                  `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
+                    active || selected ? "bg-custom-background-80 text-custom-text-100" : ""
+                  } `
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <span
+                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: stateColor,
+                    }}
+                  />
+                  <span className="flex-shrink-0 text-xs text-custom-text-200">
+                    {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
+                  </span>
+                  <span className="text-custom-text-200">{issue.name}</span>
+                </div>
+              </Combobox.Option>
+            );
+          })}
+        </ul>
+      </li>
+    ) : (
+      <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+        <EmptyState
+          type={
+            query === "" ? EmptyStateType.ISSUE_RELATION_EMPTY_STATE : EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
+          }
+          layout="screen-simple"
+        />
+      </div>
+    );
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
@@ -122,56 +177,15 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       static
                       className="max-h-80 scroll-py-2 divide-y divide-custom-border-200 overflow-y-auto"
                     >
-                      {filteredIssues.length > 0 ? (
+                      {isSearching ? (
-                        <li className="p-2">
+                        <Loader className="space-y-3 p-3">
-                          {query === "" && (
+                          <Loader.Item height="40px" />
-                            <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select issue</h2>
+                          <Loader.Item height="40px" />
-                          )}
+                          <Loader.Item height="40px" />
-                          <ul className="text-sm text-custom-text-100">
+                          <Loader.Item height="40px" />
-                            {filteredIssues.map((issue) => {
+                        </Loader>
-                              const stateColor =
-                                getProjectStates(issue?.project_id ?? "")?.find((state) => state?.id == issue?.state_id)
-                                  ?.color || "";
-
-                              return (
-                                <Combobox.Option
-                                  key={issue.id}
-                                  as="div"
-                                  value={issue.id}
-                                  className={({ active, selected }) =>
-                                    `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                      active || selected ? "bg-custom-background-80 text-custom-text-100" : ""
-                                    } `
-                                  }
-                                >
-                                  <div className="flex items-center gap-2">
-                                    <span
-                                      className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                      style={{
-                                        backgroundColor: stateColor,
-                                      }}
-                                    />
-                                    <span className="flex-shrink-0 text-xs text-custom-text-200">
-                                      {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
-                                    </span>
-                                    <span className="text-custom-text-200">{issue.name}</span>
-                                  </div>
-                                </Combobox.Option>
-                              );
-                            })}
-                          </ul>
-                        </li>
                       ) : (
-                        <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+                        <>{issueList}</>
-                          <EmptyState
-                            type={
-                              query === ""
-                                ? EmptyStateType.ISSUE_RELATION_EMPTY_STATE
-                                : EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
-                            }
-                            layout="screen-simple"
-                          />
-                        </div>
                       )}
                     </Combobox.Options>
                   </Combobox>

web/components/profile/profile-issues.tsx

@@ -3,13 +3,10 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
-import { EmptyState } from "@/components/empty-state";
 import { IssuePeekOverview, ProfileIssuesAppliedFiltersRoot } from "@/components/issues";
 import { ProfileIssuesKanBanLayout } from "@/components/issues/issue-layouts/kanban/roots/profile-issues-root";
 import { ProfileIssuesListLayout } from "@/components/issues/issue-layouts/list/roots/profile-issues-root";
-import { KanbanLayoutLoader, ListLayoutLoader } from "@/components/ui";
 // hooks
-import { EMPTY_STATE_DETAILS } from "@/constants/empty-state";
 import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 // constants
@@ -28,7 +25,7 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
   };
   // store hooks
   const {
-    issues: { loader, groupedIssueIds, fetchIssues, setViewId },
+    issues: { setViewId },
     issuesFilter: { issueFilters, fetchFilters },
   } = useIssues(EIssuesStoreType.PROFILE);
 
@@ -41,7 +38,6 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
     async () => {
       if (workspaceSlug && userId) {
         await fetchFilters(workspaceSlug, userId);
-        await fetchIssues(workspaceSlug, undefined, groupedIssueIds ? "mutation" : "init-loader", userId, type);
       }
     },
     { revalidateIfStale: false, revalidateOnFocus: false }
@@ -49,15 +45,6 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
 
   const activeLayout = issueFilters?.displayFilters?.layout || undefined;
 
-  const emptyStateType = `profile-${type}`;
-
-  if (!groupedIssueIds || loader === "init-loader")
-    return <>{activeLayout === "list" ? <ListLayoutLoader /> : <KanbanLayoutLoader />}</>;
-
-  if (groupedIssueIds.length === 0) {
-    return <EmptyState type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS} size="sm" />;
-  }
-
   return (
     <>
       <ProfileIssuesAppliedFiltersRoot />