[WEB-1007] chore: invalid issue error empty state added (#4372)

web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -1,33 +1,44 @@
 import React, { ReactElement, useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { useTheme } from "next-themes";
 import useSWR from "swr";
-// layouts
+// ui
 import { Loader } from "@plane/ui";
-import { PageHead } from "@/components/core";
 // components
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
 import { ProjectIssueDetailsHeader } from "@/components/headers";
 import { IssueDetailRoot } from "@/components/issues";
-// ui
-// types
-// store hooks
+// hooks
 import { useApplication, useIssueDetail, useProject } from "@/hooks/store";
+// layouts
 import { AppLayout } from "@/layouts/app-layout";
+// types
 import { NextPageWithLayout } from "@/lib/types";
+// assets
+import emptyIssueDark from "public/empty-state/search/issue-dark.webp";
+import emptyIssueLight from "public/empty-state/search/issues-light.webp";
 
 const IssueDetailsPage: NextPageWithLayout = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
   // hooks
+  const { resolvedTheme } = useTheme();
+  // store hooks
   const {
     fetchIssue,
     issue: { getIssueById },
   } = useIssueDetail();
   const { getProjectById } = useProject();
   const { theme: themeStore } = useApplication();
   // fetching issue details
-  const { isLoading, data: swrIssueDetails } = useSWR(
+  const {
+    isLoading,
+    data: swrIssueDetails,
+    error,
+  } = useSWR(
     workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
     workspaceSlug && projectId && issueId
       ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
@@ -57,7 +68,17 @@ const IssueDetailsPage: NextPageWithLayout = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      {issueLoader ? (
+      {error ? (
+        <EmptyState
+          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+          title="Issue does not exist"
+          description="The issue you are looking for does not exist or has been deleted."
+          primaryButton={{
+            text: "View other issues",
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+          }}
+        />
+      ) : issueLoader ? (
         <Loader className="flex h-full gap-5 p-5">
           <div className="basis-2/3 space-y-2">
             <Loader.Item height="30px" width="40%" />