feat: search endpoint (#1317)

* feat: search endpoint for parent issue selection

* feat: blocker and blocked by search endpoint

* refactor: blocker and blocked by components and types

* refactor: blocker and blocked by components, feeat: cycle and module new search endpoints

* chore: sub-issues param change

* style: show selected issues list

apps/app/components/command-palette/command-pallette.tsx

@@ -81,7 +81,7 @@ export const CommandPalette: React.FC = () => {
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [isCreateUpdatePageModalOpen, setIsCreateUpdatePageModalOpen] = useState(false);
 
-  const [searchTerm, setSearchTerm] = React.useState<string>("");
+  const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<IWorkspaceSearchResults>({
     results: {
       workspace: [],

apps/app/components/core/existing-issues-list-modal.tsx

@@ -1,23 +1,24 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
-// react-hook-form
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+// services
+import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
+import useDebounce from "hooks/use-debounce";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // types
-import { IIssue } from "types";
+import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
 // fetch-keys
 import {
   CYCLE_DETAILS,
@@ -26,27 +27,30 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
 } from "constants/fetch-keys";
 
-type FormInput = {
-  issues: string[];
-};
-
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
-  issues: IIssue[];
+  searchParams: Partial<TProjectIssuesSearchParams>;
-  handleOnSubmit: any;
+  handleOnSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
 };
 
 export const ExistingIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
-  issues,
+  searchParams,
   handleOnSubmit,
 }) => {
-  const [query, setQuery] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
   const router = useRouter();
-  const { cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -54,23 +58,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
   const handleClose = () => {
     onClose();
-    setQuery("");
+    setSearchTerm("");
-    reset();
+    setSelectedIssues([]);
   };
 
-  const {
+  const onSubmit = async () => {
-    handleSubmit,
+    if (selectedIssues.length === 0) {
-    reset,
-    control,
-    formState: { isSubmitting },
-  } = useForm<FormInput>({
-    defaultValues: {
-      issues: [],
-    },
-  });
-
-  const onSubmit: SubmitHandler<FormInput> = async (data) => {
-    if (!data.issues || data.issues.length === 0) {
       setToastAlert({
         type: "error",
         title: "Error!",
@@ -80,11 +73,15 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
       return;
     }
 
-    await handleOnSubmit(data);
+    setIsSubmitting(true);
+
+    await handleOnSubmit(selectedIssues).finally(() => setIsSubmitting(false));
+
     if (cycleId) {
       mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
       mutate(CYCLE_DETAILS(cycleId as string));
     }
+
     if (moduleId) {
       mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
       mutate(MODULE_DETAILS(moduleId as string));
@@ -95,18 +92,45 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
     setToastAlert({
       title: "Success",
       type: "success",
-      message: `Issue${data.issues.length > 1 ? "s" : ""} added successfully`,
+      message: `Issue${selectedIssues.length > 1 ? "s" : ""} added successfully`,
     });
   };
 
-  const filteredIssues: IIssue[] =
+  useEffect(() => {
-    query === ""
+    if (!workspaceSlug || !projectId) return;
-      ? issues ?? []
+
-      : issues.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+    setIsLoading(true);
+
+    if (debouncedSearchTerm) {
+      setIsSearching(true);
+
+      projectService
+        .projectIssuesSearch(workspaceSlug as string, projectId as string, {
+          search: debouncedSearchTerm,
+          ...searchParams,
+        })
+        .then((res) => {
+          setIssues(res);
+        })
+        .finally(() => {
+          setIsLoading(false);
+          setIsSearching(false);
+        });
+    } else {
+      setIssues([]);
+      setIsLoading(false);
+      setIsSearching(false);
+    }
+  }, [debouncedSearchTerm, workspaceSlug, projectId, searchParams]);
 
   return (
     <>
-      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+      <Transition.Root
+        show={isOpen}
+        as={React.Fragment}
+        afterLeave={() => setSearchTerm("")}
+        appear
+      >
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -131,12 +155,14 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
-                <form>
+                <Combobox
-                  <Controller
+                  as="div"
-                    control={control}
+                  onChange={(val: ISearchIssueResponse) => {
-                    name="issues"
+                    if (selectedIssues.some((i) => i.id === val.id))
-                    render={({ field }) => (
+                      setSelectedIssues((prevData) => prevData.filter((i) => i.id !== val.id));
-                      <Combobox as="div" {...field} multiple>
+                    else setSelectedIssues((prevData) => [...prevData, val]);
+                  }}
+                >
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
@@ -144,77 +170,121 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                     />
                     <Combobox.Input
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
-                            placeholder="Search..."
+                      placeholder="Type to search..."
-                            onChange={(e) => setQuery(e.target.value)}
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
                     />
                   </div>
 
-                        <Combobox.Options
+                  <div className="text-brand-secondary text-[0.825rem] p-2">
-                          static
+                    {selectedIssues.length > 0 ? (
-                          className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
+                      <div className="flex items-center gap-2 flex-wrap mt-1">
+                        {selectedIssues.map((issue) => (
+                          <div
+                            key={issue.id}
+                            className="flex items-center gap-1 text-xs border border-brand-base bg-brand-surface-2 pl-2 py-1 rounded-md text-brand-base whitespace-nowrap"
                           >
-                          {filteredIssues.length > 0 ? (
+                            {issue.project__identifier}-{issue.sequence_id}
-                            <li className="p-2">
+                            <button
-                              {query === "" && (
+                              type="button"
-                                <h2 className="mb-2 px-3 text-xs font-medium text-brand-base">
+                              className="group p-1"
-                                  Select issues to add
+                              onClick={() =>
-                                </h2>
+                                setSelectedIssues((prevData) =>
+                                  prevData.filter((i) => i.id !== issue.id)
+                                )
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3 text-brand-secondary group-hover:text-brand-base" />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="w-min text-xs border border-brand-base bg-brand-surface-2 p-2 rounded-md whitespace-nowrap">
+                        No issues selected
+                      </div>
                     )}
-                              <ul className="text-sm text-brand-base">
+                  </div>
-                                {filteredIssues.map((issue) => (
+
+                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
+                    {debouncedSearchTerm !== "" && (
+                      <h5 className="text-[0.825rem] text-brand-secondary mx-2">
+                        Search results for{" "}
+                        <span className="text-brand-base">
+                          {'"'}
+                          {debouncedSearchTerm}
+                          {'"'}
+                        </span>{" "}
+                        in project:
+                      </h5>
+                    )}
+
+                    {!isLoading &&
+                      issues.length === 0 &&
+                      searchTerm !== "" &&
+                      debouncedSearchTerm !== "" && (
+                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                          <LayerDiagonalIcon height="52" width="52" />
+                          <h3 className="text-brand-secondary">
+                            No issues found. Create a new issue with{" "}
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                              C
+                            </pre>
+                            .
+                          </h3>
+                        </div>
+                      )}
+
+                    {isLoading || isSearching ? (
+                      <Loader className="space-y-3 p-3">
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                      </Loader>
+                    ) : (
+                      <ul className={`text-sm text-brand-base ${issues.length > 0 ? "p-2" : ""}`}>
+                        {issues.map((issue) => {
+                          const selected = selectedIssues.some((i) => i.id === issue.id);
+
+                          return (
                             <Combobox.Option
                               key={issue.id}
                               as="label"
                               htmlFor={`issue-${issue.id}`}
-                                    value={issue.id}
+                              value={issue}
-                                    className={({ active, selected }) =>
+                              className={({ active }) =>
                                 `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
                                   active ? "bg-brand-surface-2 text-brand-base" : ""
                                 } ${selected ? "text-brand-base" : ""}`
                               }
                             >
-                                    {({ selected }) => (
-                                      <>
                               <input type="checkbox" checked={selected} readOnly />
                               <span
                                 className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
                                 style={{
-                                            backgroundColor: issue.state_detail.color,
+                                  backgroundColor: issue.state__color,
                                 }}
                               />
                               <span className="flex-shrink-0 text-xs">
-                                          {issue.project_detail.identifier}-{issue.sequence_id}
+                                {issue.project__identifier}-{issue.sequence_id}
                               </span>
                               {issue.name}
-                                      </>
-                                    )}
                             </Combobox.Option>
-                                ))}
+                          );
+                        })}
                       </ul>
-                            </li>
-                          ) : (
-                            <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                              <LayerDiagonalIcon height="52" width="52" />
-                              <h3 className="text-sm text-brand-secondary">
-                                No issues found. Create a new issue with{" "}
-                                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>
-                                .
-                              </h3>
-                            </div>
                     )}
                   </Combobox.Options>
                 </Combobox>
-                    )}
+                {selectedIssues.length > 0 && (
-                  />
-                  {filteredIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+                    <PrimaryButton onClick={onSubmit} loading={isSubmitting}>
                       {isSubmitting ? "Adding..." : "Add selected issues"}
                     </PrimaryButton>
                   </div>
                 )}
-                </form>
               </Dialog.Panel>
             </Transition.Child>
           </div>

apps/app/components/issues/parent-issues-list-modal.tsx

@@ -1,23 +1,28 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+
+import { useRouter } from "next/router";
 
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-// icons
+// services
-import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
+import projectService from "services/project.service";
-// ui
+// hooks
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import useDebounce from "hooks/use-debounce";
-// types
+// components
-import { IIssue } from "types";
 import { LayerDiagonalIcon } from "components/icons";
+// ui
+import { Loader } from "components/ui";
+// icons
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+// types
+import { ISearchIssueResponse } from "types";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   value?: any;
   onChange: (...event: any[]) => void;
-  issues: IIssue[];
+  issueId?: string;
-  title?: string;
-  multiple?: boolean;
   customDisplay?: JSX.Element;
 };
 
@@ -26,28 +31,60 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   handleClose: onClose,
   value,
   onChange,
-  issues,
+  issueId,
-  title = "Issues",
-  multiple = false,
   customDisplay,
 }) => {
-  const [query, setQuery] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
-  const [values, setValues] = useState<string[]>([]);
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
 
   const handleClose = () => {
     onClose();
-    setQuery("");
+    setSearchTerm("");
-    setValues([]);
   };
 
-  const filteredIssues: IIssue[] =
+  useEffect(() => {
-    query === ""
+    if (!workspaceSlug || !projectId) return;
-      ? issues ?? []
+
-      : issues?.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+    setIsLoading(true);
+
+    if (debouncedSearchTerm) {
+      setIsSearching(true);
+
+      projectService
+        .projectIssuesSearch(workspaceSlug as string, projectId as string, {
+          search: debouncedSearchTerm,
+          parent: true,
+          issue_id: issueId,
+        })
+        .then((res) => {
+          setIssues(res);
+        })
+        .finally(() => {
+          setIsLoading(false);
+          setIsSearching(false);
+        });
+    } else {
+      setIssues([]);
+      setIsLoading(false);
+      setIsSearching(false);
+    }
+  }, [debouncedSearchTerm, workspaceSlug, projectId, issueId]);
 
   return (
     <>
-      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+      <Transition.Root
+        show={isOpen}
+        as={React.Fragment}
+        afterLeave={() => setSearchTerm("")}
+        appear
+      >
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -72,82 +109,6 @@ export const ParentIssuesListModal: React.FC<Props> = ({
               leaveTo="opacity-0 scale-95"
             >
               <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
-                {multiple ? (
-                  <>
-                    <Combobox value={value} onChange={() => ({})} multiple>
-                      <div className="relative m-1">
-                        <MagnifyingGlassIcon
-                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
-                          aria-hidden="true"
-                        />
-                        <Combobox.Input
-                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
-                          placeholder="Search..."
-                          onChange={(e) => setQuery(e.target.value)}
-                          displayValue={() => ""}
-                        />
-                      </div>
-                      {customDisplay && <div className="p-3">{customDisplay}</div>}
-                      <Combobox.Options
-                        static
-                        className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
-                      >
-                        {filteredIssues.length > 0 && (
-                          <li className="p-2">
-                            {query === "" && (
-                              <h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
-                            )}
-                            <ul className="text-sm">
-                              {filteredIssues.map((issue) => (
-                                <Combobox.Option
-                                  key={issue.id}
-                                  value={issue.id}
-                                  className={({ active, selected }) =>
-                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                      active ? "bg-brand-surface-2 text-brand-base" : ""
-                                    } ${selected ? "text-brand-base" : ""}`
-                                  }
-                                >
-                                  {({ selected }) => (
-                                    <>
-                                      <input type="checkbox" checked={selected} readOnly />
-                                      <span
-                                        className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                        style={{
-                                          backgroundColor: issue.state_detail.color,
-                                        }}
-                                      />
-                                      <span className="flex-shrink-0 text-xs">
-                                        {issue.project_detail?.identifier}-{issue.sequence_id}
-                                      </span>{" "}
-                                      {issue.id}
-                                    </>
-                                  )}
-                                </Combobox.Option>
-                              ))}
-                            </ul>
-                          </li>
-                        )}
-                      </Combobox.Options>
-
-                      {query !== "" && filteredIssues.length === 0 && (
-                        <div className="py-14 px-6 text-center sm:px-14">
-                          <RectangleStackIcon
-                            className="mx-auto h-6 w-6 text-brand-base text-opacity-40"
-                            aria-hidden="true"
-                          />
-                          <p className="mt-4 text-sm text-brand-base">
-                            We couldn{"'"}t find any issue with that term. Please try again.
-                          </p>
-                        </div>
-                      )}
-                    </Combobox>
-                    <div className="flex items-center justify-end gap-2 p-3">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton onClick={() => onChange(values)}>Add issues</PrimaryButton>
-                    </div>
-                  </>
-                ) : (
                 <Combobox value={value} onChange={onChange}>
                   <div className="relative m-1">
                     <MagnifyingGlassIcon
@@ -156,20 +117,52 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                     />
                     <Combobox.Input
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
-                        placeholder="Search..."
+                      placeholder="Type to search..."
-                        onChange={(e) => setQuery(e.target.value)}
+                      value={searchTerm}
+                      onChange={(e) => setSearchTerm(e.target.value)}
                       displayValue={() => ""}
                     />
                   </div>
-                    {customDisplay && <div className="p-3">{customDisplay}</div>}
+                  {customDisplay && <div className="p-2">{customDisplay}</div>}
-                    <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
+                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto mt-2">
-                      {filteredIssues.length > 0 ? (
+                    {debouncedSearchTerm !== "" && (
-                        <li className="p-2">
+                      <h5 className="text-[0.825rem] text-brand-secondary mx-2">
-                          {query === "" && (
+                        Search results for{" "}
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
+                        <span className="text-brand-base">
+                          {'"'}
+                          {debouncedSearchTerm}
+                          {'"'}
+                        </span>{" "}
+                        in project:
+                      </h5>
                     )}
-                          <ul className="text-sm">
+
-                            {filteredIssues.map((issue) => (
+                    {!isLoading &&
+                      issues.length === 0 &&
+                      searchTerm !== "" &&
+                      debouncedSearchTerm !== "" && (
+                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                          <LayerDiagonalIcon height="52" width="52" />
+                          <h3 className="text-brand-secondary">
+                            No issues found. Create a new issue with{" "}
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                              C
+                            </pre>
+                            .
+                          </h3>
+                        </div>
+                      )}
+
+                    {isLoading || isSearching ? (
+                      <Loader className="space-y-3 p-3">
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                        <Loader.Item height="40px" />
+                      </Loader>
+                    ) : (
+                      <ul className={`text-sm ${issues.length > 0 ? "p-2" : ""}`}>
+                        {issues.map((issue) => (
                           <Combobox.Option
                             key={issue.id}
                             value={issue.id}
@@ -184,33 +177,20 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                               <span
                                 className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
                                 style={{
-                                      backgroundColor: issue.state_detail.color,
+                                  backgroundColor: issue.state__color,
                                 }}
                               />
                               <span className="flex-shrink-0 text-xs">
-                                    {issue.project_detail?.identifier}-{issue.sequence_id}
+                                {issue.project__identifier}-{issue.sequence_id}
                               </span>{" "}
                               {issue.name}
                             </>
                           </Combobox.Option>
                         ))}
                       </ul>
-                        </li>
-                      ) : (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-brand-secondary">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
                     )}
                   </Combobox.Options>
                 </Combobox>
-                )}
               </Dialog.Panel>
             </Transition.Child>
           </div>

apps/app/components/issues/select/parent.tsx

@@ -21,7 +21,6 @@ export const IssueParentSelect: React.FC<Props> = ({ control, isOpen, setIsOpen,
         isOpen={isOpen}
         handleClose={() => setIsOpen(false)}
         onChange={onChange}
-        issues={issues}
       />
     )}
   />

apps/app/components/issues/sidebar-select/blocked.tsx

@@ -3,107 +3,82 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
-
 // react-hook-form
-import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
+import { UseFormWatch } from "react-hook-form";
-// headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
 // hooks
 import useToast from "hooks/use-toast";
-// services
+import useProjectDetails from "hooks/use-project-details";
-import issuesService from "services/issues.service";
+// components
-// ui
+import { ExistingIssuesListModal } from "components/core";
-import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
+import { BlockedIcon } from "components/icons";
 // types
-import { IIssue, UserAuth } from "types";
+import { BlockeIssue, IIssue, ISearchIssueResponse, UserAuth } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
-
-type FormInput = {
-  blocked_issue_ids: string[];
-};
 
 type Props = {
+  issueId?: string;
   submitChanges: (formData: Partial<IIssue>) => void;
-  issuesList: IIssue[];
   watch: UseFormWatch<IIssue>;
   userAuth: UserAuth;
 };
 
 export const SidebarBlockedSelect: React.FC<Props> = ({
+  issueId,
   submitChanges,
-  issuesList,
   watch,
   userAuth,
 }) => {
-  const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
   const { setToastAlert } = useToast();
+  const { projectDetails } = useProjectDetails();
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const {
-    handleSubmit,
-    reset,
-    watch: watchBlocked,
-    setValue,
-  } = useForm<FormInput>({
-    defaultValues: {
-      blocked_issue_ids: [],
-    },
-  });
-
   const handleClose = () => {
     setIsBlockedModalOpen(false);
-    reset();
   };
 
-  const onSubmit: SubmitHandler<FormInput> = (data) => {
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
-    if (!data.blocked_issue_ids || data.blocked_issue_ids.length === 0) {
+    if (data.length === 0) {
       setToastAlert({
         title: "Error",
         type: "error",
-        message: "Please select atleast one issue",
+        message: "Please select at least one issue",
       });
+
       return;
     }
 
-    if (!Array.isArray(data.blocked_issue_ids)) data.blocked_issue_ids = [data.blocked_issue_ids];
+    const selectedIssues: BlockeIssue[] = data.map((i) => ({
+      blocked_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+      },
+    }));
 
-    const newBlocked = [...watch("blocked_list"), ...data.blocked_issue_ids];
+    const newBlocked = [...watch("blocked_issues"), ...selectedIssues];
-    submitChanges({ blocks_list: newBlocked });
+
+    submitChanges({
+      blocked_issues: newBlocked,
+      blocks_list: newBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
+    });
     handleClose();
   };
 
-  const filteredIssues: IIssue[] =
-    query === ""
-      ? issuesList
-      : issuesList.filter(
-          (issue) =>
-            issue.name.toLowerCase().includes(query.toLowerCase()) ||
-            `${issue.project_detail.identifier}-${issue.sequence_id}`
-              .toLowerCase()
-              .includes(query.toLowerCase())
-        );
-
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isBlockedModalOpen}
+        handleClose={() => setIsBlockedModalOpen(false)}
+        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+      />
       <div className="flex flex-wrap items-start py-2">
         <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
           <BlockedIcon height={16} width={16} />
@@ -111,33 +86,31 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         </div>
         <div className="space-y-1 sm:basis-1/2">
           <div className="flex flex-wrap gap-1">
-          {watch("blocked_list") && watch("blocked_list").length > 0
+            {watch("blocked_issues") && watch("blocked_issues").length > 0
-            ? watch("blocked_list").map((issue) => (
+              ? watch("blocked_issues").map((issue) => (
                   <div
-                  key={issue}
+                    key={issue.blocked_issue_detail?.id}
                     className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <Link
-                    href={`/${workspaceSlug}/projects/${projectId}/issues/${
+                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocked_issue_detail?.id}`}
-                      issues?.find((i) => i.id === issue)?.id
-                    }`}
                     >
                       <a className="flex items-center gap-1">
                         <BlockedIcon height={10} width={10} />
-                      {`${issues?.find((i) => i.id === issue)?.project_detail?.identifier}-${
+                        {`${projectDetails?.identifier}-${issue.blocked_issue_detail?.sequence_id}`}
-                        issues?.find((i) => i.id === issue)?.sequence_id
-                      }`}
                       </a>
                     </Link>
                     <button
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                      const updatedBlocked: string[] = watch("blocked_list").filter(
+                        const updatedBlocked = watch("blocked_issues").filter(
-                        (i) => i !== issue
+                          (i) => i.blocked_issue_detail?.id !== issue.blocked_issue_detail?.id
                         );
+
                         submitChanges({
-                        blocks_list: updatedBlocked,
+                          blocked_issues: updatedBlocked,
+                          blocks_list: updatedBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
                         });
                       }}
                     >
@@ -147,144 +120,6 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                 ))
               : null}
           </div>
-        <Transition.Root
-          show={isBlockedModalOpen}
-          as={React.Fragment}
-          afterLeave={() => setQuery("")}
-          appear
-        >
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
-                  <form>
-                    <Combobox
-                      onChange={(val: string) => {
-                        const selectedIssues = watchBlocked("blocked_issue_ids");
-                        if (selectedIssues.includes(val))
-                          setValue(
-                            "blocked_issue_ids",
-                            selectedIssues.filter((i) => i !== val)
-                          );
-                        else setValue("blocked_issue_ids", [...selectedIssues, val]);
-                      }}
-                    >
-                      <div className="relative m-1">
-                        <MagnifyingGlassIcon
-                          className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
-                          aria-hidden="true"
-                        />
-                        <input
-                          type="text"
-                          className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
-                          placeholder="Search..."
-                          onChange={(e) => setQuery(e.target.value)}
-                        />
-                      </div>
-
-                      <Combobox.Options
-                        static
-                        className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
-                      >
-                        {filteredIssues.length > 0 ? (
-                          <li className="p-2">
-                            {query === "" && (
-                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
-                                Select blocked issues
-                              </h2>
-                            )}
-                            <ul className="text-sm text-brand-base">
-                              {filteredIssues.map((issue) => {
-                                if (
-                                  !watch("blocked_list").includes(issue.id) &&
-                                  !watch("blockers_list").includes(issue.id)
-                                ) {
-                                  return (
-                                    <Combobox.Option
-                                      key={issue.id}
-                                      as="div"
-                                      value={issue.id}
-                                      className={({ active }) =>
-                                        `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                          active ? "bg-brand-surface-2 text-brand-base" : ""
-                                        }`
-                                      }
-                                    >
-                                      <div className="flex items-center gap-2">
-                                        <input
-                                          type="checkbox"
-                                          checked={watchBlocked("blocked_issue_ids").includes(
-                                            issue.id
-                                          )}
-                                          readOnly
-                                        />
-                                        <span
-                                          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                          style={{
-                                            backgroundColor: issue.state_detail.color,
-                                          }}
-                                        />
-                                        <span className="flex-shrink-0 text-xs text-brand-secondary">
-                                          {
-                                            issues?.find((i) => i.id === issue.id)?.project_detail
-                                              ?.identifier
-                                          }
-                                          -{issue.sequence_id}
-                                        </span>
-                                        <span>{issue.name}</span>
-                                      </div>
-                                    </Combobox.Option>
-                                  );
-                                }
-                              })}
-                            </ul>
-                          </li>
-                        ) : (
-                          <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                            <LayerDiagonalIcon height="56" width="56" />
-                            <h3 className="text-sm text-brand-secondary">
-                              No issues found. Create a new issue with{" "}
-                              <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
-                            </h3>
-                          </div>
-                        )}
-                      </Combobox.Options>
-                    </Combobox>
-
-                    {filteredIssues.length > 0 && (
-                      <div className="flex items-center justify-end gap-2 p-3">
-                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                        <PrimaryButton onClick={handleSubmit(onSubmit)}>
-                          Add selected issues
-                        </PrimaryButton>
-                      </div>
-                    )}
-                  </form>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
           <button
             type="button"
             className={`flex w-full text-brand-secondary ${
@@ -297,5 +132,6 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
           </button>
         </div>
       </div>
+    </>
   );
 };

apps/app/components/issues/sidebar-select/blocker.tsx

@@ -3,107 +3,82 @@ import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
-
 // react-hook-form
-import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
+import { UseFormWatch } from "react-hook-form";
-// headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
 // hooks
 import useToast from "hooks/use-toast";
-// services
+import useProjectDetails from "hooks/use-project-details";
-import issuesServices from "services/issues.service";
+// components
-// ui
+import { ExistingIssuesListModal } from "components/core";
-import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
+import { BlockerIcon } from "components/icons";
 // types
-import { IIssue, UserAuth } from "types";
+import { BlockeIssue, IIssue, ISearchIssueResponse, UserAuth } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
-
-type FormInput = {
-  blocker_issue_ids: string[];
-};
 
 type Props = {
+  issueId?: string;
   submitChanges: (formData: Partial<IIssue>) => void;
-  issuesList: IIssue[];
   watch: UseFormWatch<IIssue>;
   userAuth: UserAuth;
 };
 
 export const SidebarBlockerSelect: React.FC<Props> = ({
+  issueId,
   submitChanges,
-  issuesList,
   watch,
   userAuth,
 }) => {
-  const [query, setQuery] = useState("");
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
   const { setToastAlert } = useToast();
+  const { projectDetails } = useProjectDetails();
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const {
-    handleSubmit,
-    reset,
-    watch: watchBlocker,
-    setValue,
-  } = useForm<FormInput>({
-    defaultValues: {
-      blocker_issue_ids: [],
-    },
-  });
-
   const handleClose = () => {
     setIsBlockerModalOpen(false);
-    reset();
   };
 
-  const onSubmit: SubmitHandler<FormInput> = (data) => {
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
-    if (!data.blocker_issue_ids || data.blocker_issue_ids.length === 0) {
+    if (data.length === 0) {
       setToastAlert({
-        title: "Error",
         type: "error",
-        message: "Please select atleast one issue",
+        title: "Error!",
+        message: "Please select at least one issue.",
       });
+
       return;
     }
 
-    if (!Array.isArray(data.blocker_issue_ids)) data.blocker_issue_ids = [data.blocker_issue_ids];
+    const selectedIssues: BlockeIssue[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+      },
+    }));
 
-    const newBlockers = [...watch("blockers_list"), ...data.blocker_issue_ids];
+    const newBlockers = [...watch("blocker_issues"), ...selectedIssues];
-    submitChanges({ blockers_list: newBlockers });
+
+    submitChanges({
+      blocker_issues: newBlockers,
+      blockers_list: newBlockers.map((i) => i.blocker_issue_detail?.id ?? ""),
+    });
     handleClose();
   };
 
-  const filteredIssues: IIssue[] =
-    query === ""
-      ? issuesList
-      : issuesList.filter(
-          (issue) =>
-            issue.name.toLowerCase().includes(query.toLowerCase()) ||
-            `${issue.project_detail.identifier}-${issue.sequence_id}`
-              .toLowerCase()
-              .includes(query.toLowerCase())
-        );
-
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isBlockerModalOpen}
+        handleClose={() => setIsBlockerModalOpen(false)}
+        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+      />
       <div className="flex flex-wrap items-start py-2">
         <div className="flex items-center gap-x-2 text-sm text-brand-secondary sm:basis-1/2">
           <BlockerIcon height={16} width={16} />
@@ -111,33 +86,33 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         </div>
         <div className="space-y-1 sm:basis-1/2">
           <div className="flex flex-wrap gap-1">
-          {watch("blockers_list") && watch("blockers_list").length > 0
+            {watch("blocker_issues") && watch("blocker_issues").length > 0
-            ? watch("blockers_list").map((issue) => (
+              ? watch("blocker_issues").map((issue) => (
                   <div
-                  key={issue}
+                    key={issue.blocker_issue_detail?.id}
                     className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-brand-base px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <Link
-                    href={`/${workspaceSlug}/projects/${projectId}/issues/${
+                      href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.blocker_issue_detail?.id}`}
-                      issues?.find((i) => i.id === issue)?.id
-                    }`}
                     >
                       <a className="flex items-center gap-1">
                         <BlockerIcon height={10} width={10} />
-                      {`${issues?.find((i) => i.id === issue)?.project_detail?.identifier}-${
+                        {`${projectDetails?.identifier}-${issue.blocker_issue_detail?.sequence_id}`}
-                        issues?.find((i) => i.id === issue)?.sequence_id
-                      }`}
                       </a>
                     </Link>
                     <button
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                      const updatedBlockers: string[] = watch("blockers_list").filter(
+                        const updatedBlockers = watch("blocker_issues").filter(
-                        (i) => i !== issue
+                          (i) => i.blocker_issue_detail?.id !== issue.blocker_issue_detail?.id
                         );
+
                         submitChanges({
-                        blockers_list: updatedBlockers,
+                          blocker_issues: updatedBlockers,
+                          blockers_list: updatedBlockers.map(
+                            (i) => i.blocker_issue_detail?.id ?? ""
+                          ),
                         });
                       }}
                     >
@@ -147,141 +122,6 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                 ))
               : null}
           </div>
-        <Transition.Root
-          show={isBlockerModalOpen}
-          as={React.Fragment}
-          afterLeave={() => setQuery("")}
-          appear
-        >
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0"
-              enterTo="opacity-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
-            </Transition.Child>
-
-            <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
-                  <Combobox
-                    onChange={(val: string) => {
-                      const selectedIssues = watchBlocker("blocker_issue_ids");
-                      if (selectedIssues.includes(val))
-                        setValue(
-                          "blocker_issue_ids",
-                          selectedIssues.filter((i) => i !== val)
-                        );
-                      else setValue("blocker_issue_ids", [...selectedIssues, val]);
-                    }}
-                  >
-                    <div className="relative m-1">
-                      <MagnifyingGlassIcon
-                        className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-brand-base text-opacity-40"
-                        aria-hidden="true"
-                      />
-                      <input
-                        type="text"
-                        className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-brand-base placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
-                        placeholder="Search..."
-                        onChange={(e) => setQuery(e.target.value)}
-                      />
-                    </div>
-
-                    <Combobox.Options
-                      static
-                      className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
-                    >
-                      {filteredIssues.length > 0 ? (
-                        <li className="p-2">
-                          {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
-                              Select blocker issues
-                            </h2>
-                          )}
-                          <ul className="text-sm text-brand-base">
-                            {filteredIssues.map((issue) => {
-                              if (
-                                !watch("blockers_list").includes(issue.id) &&
-                                !watch("blocked_list").includes(issue.id)
-                              )
-                                return (
-                                  <Combobox.Option
-                                    key={issue.id}
-                                    as="div"
-                                    value={issue.id}
-                                    className={({ active }) =>
-                                      `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
-                                        active ? "bg-brand-surface-2 text-brand-base" : ""
-                                      } `
-                                    }
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      <input
-                                        type="checkbox"
-                                        checked={watchBlocker("blocker_issue_ids").includes(
-                                          issue.id
-                                        )}
-                                        readOnly
-                                      />
-                                      <span
-                                        className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                        style={{
-                                          backgroundColor: issue.state_detail.color,
-                                        }}
-                                      />
-                                      <span className="flex-shrink-0 text-xs text-brand-secondary">
-                                        {
-                                          issues?.find((i) => i.id === issue.id)?.project_detail
-                                            ?.identifier
-                                        }
-                                        -{issue.sequence_id}
-                                      </span>
-                                      <span className="text-brand-muted-1">{issue.name}</span>
-                                    </div>
-                                  </Combobox.Option>
-                                );
-                            })}
-                          </ul>
-                        </li>
-                      ) : (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="56" width="56" />
-                          <h3 className="text-sm text-brand-secondary">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
-                          </h3>
-                        </div>
-                      )}
-                    </Combobox.Options>
-                  </Combobox>
-
-                  {filteredIssues.length > 0 && (
-                    <div className="flex items-center justify-end gap-2 p-3">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton onClick={handleSubmit(onSubmit)}>
-                        Add selected issues
-                      </PrimaryButton>
-                    </div>
-                  )}
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
           <button
             type="button"
             className={`flex w-full text-brand-secondary ${
@@ -294,5 +134,6 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
           </button>
         </div>
       </div>
+    </>
   );
 };

apps/app/components/issues/sidebar-select/parent.tsx

@@ -20,7 +20,6 @@ import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 type Props = {
   control: Control<IIssue, any>;
   submitChanges: (formData: Partial<IIssue>) => void;
-  issuesList: IIssue[];
   customDisplay: JSX.Element;
   watch: UseFormWatch<IIssue>;
   userAuth: UserAuth;
@@ -29,7 +28,6 @@ type Props = {
 export const SidebarParentSelect: React.FC<Props> = ({
   control,
   submitChanges,
-  issuesList,
   customDisplay,
   watch,
   userAuth,
@@ -37,7 +35,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { data: issues } = useSWR(
     workspaceSlug && projectId
@@ -68,8 +66,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
                 submitChanges({ parent: val });
                 onChange(val);
               }}
-              issues={issuesList}
+              issueId={issueId as string}
-              title="Select Parent"
               value={value}
               customDisplay={customDisplay}
             />

apps/app/components/issues/sidebar.tsx

@@ -370,14 +370,6 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 <SidebarParentSelect
                   control={control}
                   submitChanges={submitChanges}
-                  issuesList={
-                    issues?.filter(
-                      (i) =>
-                        i.id !== issueDetail?.id &&
-                        i.id !== issueDetail?.parent &&
-                        i.parent !== issueDetail?.id
-                    ) ?? []
-                  }
                   customDisplay={
                     issueDetail?.parent_detail ? (
                       <button
@@ -385,11 +377,12 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                         className="flex items-center gap-2 rounded bg-brand-surface-2 px-3 py-2 text-xs"
                         onClick={() => submitChanges({ parent: null })}
                       >
+                        <span className="text-brand-secondary">Selected:</span>{" "}
                         {issueDetail.parent_detail?.name}
                         <XMarkIcon className="h-3 w-3" />
                       </button>
                     ) : (
-                      <div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs">
+                      <div className="inline-block rounded bg-brand-surface-1 px-3 py-2 text-xs text-brand-secondary">
                         No parent selected
                       </div>
                     )
@@ -400,16 +393,16 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
                 <SidebarBlockerSelect
+                  issueId={issueId as string}
                   submitChanges={submitChanges}
-                  issuesList={issues?.filter((i) => i.id !== issueDetail?.id) ?? []}
                   watch={watchIssue}
                   userAuth={memberRole}
                 />
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
                 <SidebarBlockedSelect
+                  issueId={issueId as string}
                   submitChanges={submitChanges}
-                  issuesList={issues?.filter((i) => i.id !== issueDetail?.id) ?? []}
                   watch={watchIssue}
                   userAuth={memberRole}
                 />

apps/app/components/issues/sub-issues-list.tsx

@@ -21,7 +21,7 @@ import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outli
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { ICurrentUserResponse, IIssue, ISubIssueResponse } from "types";
+import { ICurrentUserResponse, IIssue, ISearchIssueResponse, ISubIssueResponse } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
 
@@ -58,14 +58,16 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
       : null
   );
 
-  const addAsSubIssue = async (data: { issues: string[] }) => {
+  const addAsSubIssue = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId) return;
 
+    const payload = {
+      sub_issue_ids: data.map((i) => i.id),
+    };
+
     await issuesService
-      .addSubIssues(workspaceSlug as string, projectId as string, parentIssue?.id ?? "", {
+      .addSubIssues(workspaceSlug as string, projectId as string, parentIssue?.id ?? "", payload)
-        sub_issue_ids: data.issues,
+      .then(() => {
-      })
-      .then((res) => {
         mutate<ISubIssueResponse>(
           SUB_ISSUES(parentIssue?.id ?? ""),
           (prevData) => {
@@ -74,10 +76,12 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
 
             const stateDistribution = { ...prevData.state_distribution };
 
-            data.issues.forEach((issueId: string) => {
+            payload.sub_issue_ids.forEach((issueId: string) => {
               const issue = issues?.find((i) => i.id === issueId);
+
               if (issue) {
                 newSubIssues.push(issue);
+
                 const issueGroup = issue.state_detail.group;
                 stateDistribution[issueGroup] = stateDistribution[issueGroup] + 1;
               }
@@ -96,7 +100,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
           PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
           (prevData) =>
             (prevData ?? []).map((p) => {
-              if (data.issues.includes(p.id))
+              if (payload.sub_issue_ids.includes(p.id))
                 return {
                   ...p,
                   parent: parentIssue.id,
@@ -188,14 +192,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue, user }) => {
       <ExistingIssuesListModal
         isOpen={subIssuesListModal}
         handleClose={() => setSubIssuesListModal(false)}
-        issues={
+        searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
-          issues?.filter(
-            (i) =>
-              (i.parent === "" || i.parent === null) &&
-              i.id !== parentIssue?.id &&
-              i.id !== parentIssue?.parent
-          ) ?? []
-        }
         handleOnSubmit={addAsSubIssue}
       />
       {subIssuesResponse &&

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 // icons
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { CyclesIcon } from "components/icons";
@@ -16,7 +16,6 @@ import { CycleDetailsSidebar } from "components/cycles";
 // services
 import issuesService from "services/issues.service";
 import cycleServices from "services/cycles.service";
-import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -28,14 +27,10 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { getDateRangeStatus } from "helpers/date-time.helper";
+// types
+import { ISearchIssueResponse } from "types";
 // fetch-keys
-import {
+import { CYCLES_LIST, CYCLE_DETAILS } from "constants/fetch-keys";
-  CYCLE_ISSUES,
-  CYCLES_LIST,
-  PROJECT_DETAILS,
-  CYCLE_DETAILS,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
 
 const SingleCycle: React.FC = () => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
@@ -49,13 +44,6 @@ const SingleCycle: React.FC = () => {
 
   const { setToastAlert } = useToast();
 
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: cycles } = useSWR(
     workspaceSlug && projectId ? CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -75,15 +63,6 @@ const SingleCycle: React.FC = () => {
       : null
   );
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const cycleStatus =
     cycleDetails?.start_date && cycleDetails?.end_date
       ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
@@ -93,14 +72,21 @@ const SingleCycle: React.FC = () => {
     setCycleIssuesListModal(true);
   };
 
-  const handleAddIssuesToCycle = async (data: { issues: string[] }) => {
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId) return;
 
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
     await issuesService
-      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, data, user)
+      .addIssueToCycle(
-      .then(() => {
+        workspaceSlug as string,
-        mutate(CYCLE_ISSUES(cycleId as string));
+        projectId as string,
-      })
+        cycleId as string,
+        payload,
+        user
+      )
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -115,15 +101,15 @@ const SingleCycle: React.FC = () => {
       <ExistingIssuesListModal
         isOpen={cycleIssuesListModal}
         handleClose={() => setCycleIssuesListModal(false)}
-        issues={issues?.filter((i) => !i.cycle_id) ?? []}
+        searchParams={{ cycle: true }}
         handleOnSubmit={handleAddIssuesToCycle}
       />
       <ProjectAuthorizationWrapper
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${activeProject?.name ?? "Project"} Cycles`}
+              title={`${cycleDetails?.project_detail.name ?? "Project"} Cycles`}
-              link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
+              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
             />
           </Breadcrumbs>
         }
@@ -142,7 +128,7 @@ const SingleCycle: React.FC = () => {
               <CustomMenu.MenuItem
                 key={cycle.id}
                 renderAs="a"
-                href={`/${workspaceSlug}/projects/${activeProject?.id}/cycles/${cycle.id}`}
+                href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}
               >
                 {truncateText(cycle.name, 40)}
               </CustomMenu.MenuItem>

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -31,8 +31,6 @@ const defaultValues = {
   state: "",
   assignees_list: [],
   priority: "low",
-  blockers_list: [],
-  blocked_list: [],
   target_date: new Date().toString(),
   issue_cycle: null,
   issue_module: null,
@@ -65,6 +63,7 @@ const IssueDetailsPage: NextPage = () => {
         ISSUE_DETAILS(issueId as string),
         (prevData) => {
           if (!prevData) return prevData;
+
           return {
             ...prevData,
             ...formData,
@@ -73,10 +72,13 @@ const IssueDetailsPage: NextPage = () => {
         false
       );
 
-      const payload = { ...formData };
+      const payload: Partial<IIssue> = {
+        ...formData,
+      };
+
       await issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-        .then((res) => {
+        .then(() => {
           mutateIssueDetails();
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
         })
@@ -93,12 +95,6 @@ const IssueDetailsPage: NextPage = () => {
     mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
     reset({
       ...issueDetails,
-      blockers_list:
-        issueDetails.blockers_list ??
-        issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id),
-      blocked_list:
-        issueDetails.blocks_list ??
-        issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id),
       assignees_list:
         issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
       labels_list: issueDetails.labels_list ?? issueDetails.labels,

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -2,13 +2,12 @@ import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 
 // icons
 import { ArrowLeftIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
 // services
 import modulesService from "services/modules.service";
-import issuesService from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -21,20 +20,14 @@ import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "component
 import { ModuleDetailsSidebar } from "components/modules";
 import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, EmptySpace, EmptySpaceItem, SecondaryButton, Spinner } from "components/ui";
+import { CustomMenu, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
-import { IModule } from "types";
+import { ISearchIssueResponse } from "types";
-
 // fetch-keys
-import {
+import { MODULE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
-  MODULE_DETAILS,
-  MODULE_ISSUES,
-  MODULE_LIST,
-  PROJECT_ISSUES_LIST,
-} from "constants/fetch-keys";
 
 const SingleModule: React.FC = () => {
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
@@ -48,15 +41,6 @@ const SingleModule: React.FC = () => {
 
   const { setToastAlert } = useToast();
 
-  const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssues(workspaceSlug as string, projectId as string)
-      : null
-  );
-
   const { data: modules } = useSWR(
     workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
     workspaceSlug && projectId
@@ -76,7 +60,7 @@ const SingleModule: React.FC = () => {
       : null
   );
 
-  const { data: moduleDetails } = useSWR<IModule>(
+  const { data: moduleDetails } = useSWR(
     moduleId ? MODULE_DETAILS(moduleId as string) : null,
     workspaceSlug && projectId
       ? () =>
@@ -88,18 +72,21 @@ const SingleModule: React.FC = () => {
       : null
   );
 
-  const handleAddIssuesToModule = async (data: { issues: string[] }) => {
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId) return;
 
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
     await modulesService
       .addIssuesToModule(
         workspaceSlug as string,
         projectId as string,
         moduleId as string,
-        data,
+        payload,
         user
       )
-      .then(() => mutate(MODULE_ISSUES(moduleId as string)))
       .catch(() =>
         setToastAlert({
           type: "error",
@@ -118,7 +105,7 @@ const SingleModule: React.FC = () => {
       <ExistingIssuesListModal
         isOpen={moduleIssuesListModal}
         handleClose={() => setModuleIssuesListModal(false)}
-        issues={issues?.filter((i) => !i.module_id) ?? []}
+        searchParams={{ module: true }}
         handleOnSubmit={handleAddIssuesToModule}
       />
       <ProjectAuthorizationWrapper

apps/app/services/project.service.ts

@@ -10,7 +10,9 @@ import type {
   IProject,
   IProjectMember,
   IProjectMemberInvitation,
+  ISearchIssueResponse,
   ProjectViewTheme,
+  TProjectIssuesSearchParams,
 } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@@ -323,6 +325,20 @@ class ProjectServices extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async projectIssuesSearch(
+    workspaceSlug: string,
+    projectId: string,
+    params: TProjectIssuesSearchParams
+  ): Promise<ISearchIssueResponse[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/search-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new ProjectServices();

apps/app/types/issues.d.ts

@@ -69,12 +69,8 @@ export interface IIssue {
   assignees_list: string[];
   attachment_count: number;
   attachments: any[];
-  blocked_by_issue_details: any[];
-  blocked_issue_details: any[];
   blocked_issues: BlockeIssue[];
-  blocked_list: string[];
   blocker_issues: BlockeIssue[];
-  blockers: any[];
   blockers_list: string[];
   blocks_list: string[];
   bridge_id?: string | null;
@@ -141,26 +137,14 @@ export interface ISubIssueResponse {
 }
 
 export interface BlockeIssue {
-  id: string;
   blocked_issue_detail?: BlockeIssueDetail;
-  created_at: Date;
-  updated_at: Date;
-  created_by: string;
-  updated_by: string;
-  project: string;
-  workspace: string;
-  block: string;
-  blocked_by: string;
   blocker_issue_detail?: BlockeIssueDetail;
 }
 
 export interface BlockeIssueDetail {
   id: string;
   name: string;
-  description: string;
+  sequence_id: number;
-  priority: null;
-  start_date: null;
-  target_date: null;
 }
 
 export interface IIssueComment {

apps/app/types/projects.d.ts

@@ -124,3 +124,25 @@ export interface GithubRepositoriesResponse {
   repositories: IGithubRepository[];
   total_count: number;
 }
+
+export type TProjectIssuesSearchParams = {
+  search: string;
+  parent?: boolean;
+  blocker_blocked_by?: boolean;
+  cycle?: boolean;
+  module?: boolean;
+  sub_issue?: boolean;
+  issue_id?: string;
+};
+
+export interface ISearchIssueResponse {
+  id: string;
+  name: string;
+  project_id: string;
+  project__identifier: string;
+  sequence_id: number;
+  state__color: string;
+  state__group: string;
+  state__name: string;
+  workspace__slug: string;
+}