chore: updated error pages 404 and project-not-found in plane deploy (#…

…1885)

* dev: custom error messages.

* dev: updated next version in yarn.lock

* dev: updated project-not-published icon

apps/space/app/404/page.tsx

@@ -0,0 +1,30 @@
+// next imports
+import Image from "next/image";
+
+const Custom404Error = () => (
+  <div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
+    <div className="max-w-[700px] space-y-5">
+      <div className="flex items-center flex-col gap-3 text-center">
+        <div className="relative w-[240px] h-[240px]">
+          <Image src={`/404.svg`} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="text-xl font-medium">Oops! Something went wrong.</div>
+        <div className="text-sm text-custom-text-200">
+          Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+          temporarily unavailable.
+        </div>
+      </div>
+
+      <div className="text-center flex justify-center items-center">
+        <a
+          href={`https://app.plane.so/`}
+          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
+        >
+          Go to your Workspace
+        </a>
+      </div>
+    </div>
+  </div>
+);
+
+export default Custom404Error;

apps/space/app/[workspace_slug]/[project_slug]/layout.tsx

@@ -7,6 +7,7 @@ import IssueNavbar from "components/issues/navbar";
 import IssueFilter from "components/issues/filters-render";
 // service
 import ProjectService from "services/project.service";
+import { redirect } from "next/navigation";
 
 type LayoutProps = {
   params: { workspace_slug: string; project_slug: string };
@@ -17,17 +18,26 @@ export async function generateMetadata({ params }: LayoutProps): Promise<Metadat
   const { workspace_slug, project_slug } = params;
   const projectServiceInstance = new ProjectService();
 
-  const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug);
+  try {
+    const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug);
 
-  return {
-    title: `${project?.project_details?.name} | ${workspace_slug}`,
-    description: `${project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}`}`,
-    icons: `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${
-      typeof project?.project_details?.emoji != "object"
-        ? String.fromCodePoint(parseInt(project?.project_details?.emoji))
-        : "✈️"
-    }</text></svg>`,
-  };
+    return {
+      title: `${project?.project_details?.name} | ${workspace_slug}`,
+      description: `${
+        project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}`
+      }`,
+      icons: `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${
+        typeof project?.project_details?.emoji != "object"
+          ? String.fromCodePoint(parseInt(project?.project_details?.emoji))
+          : "✈️"
+      }</text></svg>`,
+    };
+  } catch (error: any) {
+    if (error?.data?.error) {
+      redirect(`/project-not-published`);
+    }
+    return {};
+  }
 }
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (

apps/space/app/project-not-published/page.tsx

@@ -0,0 +1,31 @@
+// next imports
+import Image from "next/image";
+
+const CustomProjectNotPublishedError = () => (
+  <div className="relative w-screen min-h-screen h-full flex justify-center items-center py-5">
+    <div className="max-w-[700px] space-y-5">
+      <div className="flex items-center flex-col gap-3 text-center">
+        <div className="relative w-[240px] h-[240px]">
+          <Image src={`/project-not-published.svg`} layout="fill" alt="404- Page not found" />
+        </div>
+        <div className="text-xl font-medium">
+          Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
+        </div>
+        <div className="text-sm text-custom-text-200">
+          If this is your project, login to your workspace to adjust its visibility settings and make it public.
+        </div>
+      </div>
+
+      <div className="text-center flex justify-center items-center">
+        <a
+          href={`https://app.plane.so/`}
+          className="transition-all border border-gray-200 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-800 cursor-pointer p-1.5 px-2.5 rounded-sm text-sm font-medium hover:scale-105 select-none"
+        >
+          Go to your Workspace
+        </a>
+      </div>
+    </div>
+  </div>
+);
+
+export default CustomProjectNotPublishedError;

apps/space/components/issues/board-views/kanban/block.tsx

@@ -27,7 +27,7 @@ export const IssueListBlock = ({ issue }: { issue: IIssue }) => {
       <div className="font-medium text-gray-800 h-full line-clamp-2">{issue.name}</div>
 
       {/* priority */}
-      <div className="relative flex items-center gap-3 w-full">
+      <div className="relative flex flex-wrap items-center gap-2 w-full">
         {issue?.priority && (
           <div className="flex-shrink-0">
             <IssueBlockPriority priority={issue?.priority} />

apps/space/package.json

@@ -20,7 +20,7 @@
     "js-cookie": "^3.0.1",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
-    "next": "^13.4.13",
+    "next": "^13.4.16",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",