-
-
- No issues found. Create a new issue with{" "}
- C
.
-
+
+
)}
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 79f134b31..b3f81b6ee 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -2,12 +2,14 @@ import React, { useEffect, useState } from "react";
import { Combobox, Dialog, Transition } from "@headlessui/react";
import { Rocket, Search, X } from "lucide-react";
// services
-import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
-
+import { ProjectService } from "services/project";
+// hooks
import useDebounce from "hooks/use-debounce";
import { usePlatformOS } from "hooks/use-platform-os";
-import { ProjectService } from "services/project";
+// components
+import { IssueSearchModalEmptyState } from "./issue-search-modal-empty-state";
// ui
+import { Button, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
// types
import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
@@ -40,7 +42,7 @@ export const ExistingIssuesListModal: React.FC
= (props) => {
const [isSearching, setIsSearching] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
- const { isMobile } = usePlatformOS();
+ const { isMobile } = usePlatformOS();
const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
const handleClose = () => {
@@ -192,15 +194,12 @@ export const ExistingIssuesListModal: React.FC = (props) => {
)}
- {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
-
-
-
- No issues found. Create a new issue with{" "}
- C
.
-
-
- )}
+
{isSearching ? (
diff --git a/web/components/core/modals/index.ts b/web/components/core/modals/index.ts
index cf72365f5..a95c22114 100644
--- a/web/components/core/modals/index.ts
+++ b/web/components/core/modals/index.ts
@@ -4,3 +4,4 @@ export * from "./gpt-assistant-popover";
export * from "./link-modal";
export * from "./user-image-upload-modal";
export * from "./workspace-image-upload-modal";
+export * from "./issue-search-modal-empty-state";
diff --git a/web/components/core/modals/issue-search-modal-empty-state.tsx b/web/components/core/modals/issue-search-modal-empty-state.tsx
new file mode 100644
index 000000000..00dcc03bb
--- /dev/null
+++ b/web/components/core/modals/issue-search-modal-empty-state.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+// components
+import { EmptyState } from "components/empty-state";
+// types
+import { ISearchIssueResponse } from "@plane/types";
+// constants
+import { EmptyStateType } from "constants/empty-state";
+
+interface EmptyStateProps {
+ issues: ISearchIssueResponse[];
+ searchTerm: string;
+ debouncedSearchTerm: string;
+ isSearching: boolean;
+}
+
+export const IssueSearchModalEmptyState: React.FC = ({
+ issues,
+ searchTerm,
+ debouncedSearchTerm,
+ isSearching,
+}) => {
+ const renderEmptyState = (type: EmptyStateType) => (
+
+
+
+ );
+
+ const emptyState =
+ issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && !isSearching
+ ? renderEmptyState(EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE)
+ : issues.length === 0
+ ? renderEmptyState(EmptyStateType.ISSUE_RELATION_EMPTY_STATE)
+ : null;
+
+ return emptyState;
+};
diff --git a/web/components/empty-state/empty-state.tsx b/web/components/empty-state/empty-state.tsx
index e718c065a..783025679 100644
--- a/web/components/empty-state/empty-state.tsx
+++ b/web/components/empty-state/empty-state.tsx
@@ -16,7 +16,7 @@ import { cn } from "helpers/common.helper";
export type EmptyStateProps = {
type: EmptyStateType;
size?: "sm" | "md" | "lg";
- layout?: "widget-simple" | "screen-detailed" | "screen-simple";
+ layout?: "screen-detailed" | "screen-simple";
additionalPath?: string;
primaryButtonOnClick?: () => void;
primaryButtonLink?: string;
@@ -149,6 +149,28 @@ export const EmptyState: React.FC = (props) => {
)}
+ {layout === "screen-simple" && (
+