Feature/improve 404 handling

app/components/errors/index.tsx

@@ -2,6 +2,8 @@ import { useLocation, useRouteError } from "@remix-run/react";
 
 import { isRouteError } from "~/utils/http";
 import { Button } from "../shared/button";
+import { parseSpecialErrorData } from "./utils";
+import SpecialErrorHandler from "./special-error-handler";
 
 export const ErrorContent = () => {
   const loc = useLocation();
@@ -18,6 +20,11 @@ export const ErrorContent = () => {
     traceId = response.data.error.traceId;
   }
 
+  const specialError = parseSpecialErrorData(response);
+  if (specialError.success) {
+    return <SpecialErrorHandler additionalData={specialError.additionalData} />;
+  }
+
   // Creating a string with <br/> tags for line breaks
   const messageHtml = { __html: message.split("\n").join("<br/>") };
 

app/components/errors/special-error-handler.tsx

@@ -0,0 +1,57 @@
+import { tw } from "~/utils/tw";
+import { SpecialErrorAdditionalData } from "./utils";
+import { useMemo } from "react";
+import { ErrorIcon } from ".";
+import { Button } from "../shared/button";
+
+export type SpecialErrorHandlerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  additionalData: SpecialErrorAdditionalData;
+};
+
+export default function SpecialErrorHandler({
+  className,
+  style,
+  additionalData,
+}: SpecialErrorHandlerProps) {
+  const content = useMemo(() => {
+    switch (additionalData.type) {
+      case "asset-from-other-org": {
+        return (
+          <div className="w-full md:max-w-screen-sm">
+            <h2 className="mb-2">Asset belongs to other workspace.</h2>
+            <p className="mb-4">
+              The asset you are trying to view belongs to a different workspace
+              you are part of. Would you like to switch to workspace{" "}
+              <span className="font-bold">
+                "{additionalData.assetOrganization.organization.name}"
+              </span>{" "}
+              to view the asset?
+            </p>
+
+            <Button>Switch workspace</Button>
+          </div>
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  }, []);
+
+  return (
+    <div
+      className={tw("flex size-full items-center justify-center", className)}
+      style={style}
+    >
+      <div className="flex flex-col items-center text-center">
+        <span className="mb-5 size-[56px] text-primary">
+          <ErrorIcon />
+        </span>
+        {content}
+      </div>
+    </div>
+  );
+}

app/components/errors/utils.ts

@@ -0,0 +1,39 @@
+import { z } from "zod";
+import { isRouteError } from "~/utils/http";
+
+export const specialErrorAdditionalData = z.discriminatedUnion("type", [
+  z.object({
+    type: z.literal("asset-from-other-org"),
+    assetOrganization: z.object({
+      organization: z.object({
+        id: z.string(),
+        name: z.string(),
+      }),
+    }),
+  }),
+]);
+
+export type SpecialErrorAdditionalData = z.infer<
+  typeof specialErrorAdditionalData
+>;
+
+export function parseSpecialErrorData(response: unknown):
+  | { success: false; additionalData: null }
+  | {
+      success: true;
+      additionalData: SpecialErrorAdditionalData;
+    } {
+  if (!isRouteError(response)) {
+    return { success: false, additionalData: null };
+  }
+
+  const parsedDataResponse = specialErrorAdditionalData.safeParse(
+    response.data.error.additionalData
+  );
+
+  if (!parsedDataResponse.success) {
+    return { success: false, additionalData: null };
+  }
+
+  return { success: true, additionalData: parsedDataResponse.data };
+}

app/modules/asset/service.server.ts

@@ -11,6 +11,7 @@ import type {
   Booking,
   Kit,
   AssetIndexSettings,
+  UserOrganization,
 } from "@prisma/client";
 import {
   AssetStatus,
@@ -101,25 +102,59 @@ type AssetWithInclude<T extends Prisma.AssetInclude | undefined> =
 export async function getAsset<T extends Prisma.AssetInclude | undefined>({
   id,
   organizationId,
+  userOrganizations,
   include,
 }: Pick<Asset, "id"> & {
   organizationId: Asset["organizationId"];
+  userOrganizations: Pick<UserOrganization, "organizationId">[];
   include?: T;
 }): Promise<AssetWithInclude<T>> {
   try {
+    const otherOrganizationIds = userOrganizations.map(
+      (org) => org.organizationId
+    );
+
     const asset = await db.asset.findFirstOrThrow({
-      where: { id, organizationId },
+      where: {
+        OR: [
+          { id, organizationId },
+          { id, organizationId: { in: otherOrganizationIds } },
+        ],
+      },
       include: { ...include },
     });
 
+    /* User is accessing the asset in the wrong organization. In that case we need special 404 handling. */
+    if (
+      asset.organizationId !== organizationId &&
+      otherOrganizationIds.includes(asset.organizationId)
+    ) {
+      throw new ShelfError({
+        cause: null,
+        title: "Asset not found",
+        message: "",
+        additionalData: {
+          type: "asset-from-other-org",
+          assetOrganization: userOrganizations.find(
+            (org) => org.organizationId === asset.organizationId
+          ),
+        },
+        label,
+      });
+    }
+
     return asset as AssetWithInclude<T>;
   } catch (cause) {
     throw new ShelfError({
       cause,
       title: "Asset not found",
       message:
         "The asset you are trying to access does not exist or you do not have permission to access it.",
-      additionalData: { id, organizationId },
+      additionalData: {
+        id,
+        organizationId,
+        ...(cause instanceof ShelfError ? cause.additionalData : {}),
+      },
       label,
       shouldBeCaptured: !isNotFoundError(cause),
     });

app/modules/organization/service.server.ts

@@ -270,6 +270,7 @@ export async function getUserOrganizations({ userId }: { userId: string }) {
     return await db.userOrganization.findMany({
       where: { userId },
       select: {
+        organizationId: true,
         roles: true,
         organization: {
           select: {

app/routes/_layout+/assets.$assetId.activity.tsx

@@ -28,7 +28,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -38,6 +38,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const asset = await getAsset({
       id,
       organizationId,
+      userOrganizations,
       include: {
         notes: {
           orderBy: { createdAt: "desc" },

app/routes/_layout+/assets.$assetId.overview.duplicate.tsx

@@ -33,14 +33,18 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
       action: PermissionAction.create,
     });
 
-    const asset = await getAsset({ id: assetId, organizationId });
+    const asset = await getAsset({
+      id: assetId,
+      organizationId,
+      userOrganizations,
+    });
 
     return json(
       data({
@@ -75,7 +79,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -85,6 +89,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
     const asset = await getAsset({
       id: assetId,
       organizationId,
+      userOrganizations,
       include: {
         custody: { include: { custodian: true } },
         tags: true,

app/routes/_layout+/assets.$assetId.overview.tsx

@@ -70,7 +70,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -82,6 +82,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const asset = await getAsset({
       id,
       organizationId,
+      userOrganizations,
       include: ASSET_OVERVIEW_FIELDS,
     });
 

app/routes/_layout+/assets.$assetId.overview.update-location.tsx

@@ -30,13 +30,13 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
       action: PermissionAction.update,
     });
-    const asset = await getAsset({ organizationId, id });
+    const asset = await getAsset({ organizationId, id, userOrganizations });
 
     const { locations } = await getAllEntriesForCreateAndEdit({
       organizationId,

app/routes/_layout+/assets.$assetId.tsx

@@ -55,7 +55,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -65,6 +65,7 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
     const asset = await getAsset({
       id,
       organizationId,
+      userOrganizations,
       include: {
         custody: { include: { custodian: true } },
         kit: true,

app/routes/_layout+/assets.$assetId_.edit.tsx

@@ -52,17 +52,19 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
   });
 
   try {
-    const { organizationId, currentOrganization } = await requirePermission({
-      userId,
-      request,
-      entity: PermissionEntity.asset,
-      action: PermissionAction.update,
-    });
+    const { organizationId, currentOrganization, userOrganizations } =
+      await requirePermission({
+        userId,
+        request,
+        entity: PermissionEntity.asset,
+        action: PermissionAction.update,
+      });
 
     const asset = await getAsset({
       organizationId,
       id,
       include: { tags: true, customFields: true },
+      userOrganizations,
     });
 
     const { categories, totalCategories, tags, locations, totalLocations } =

app/routes/api+/asset.scan.ts

@@ -19,7 +19,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
   const { userId } = authSession;
 
   try {
-    const { organizationId } = await requirePermission({
+    const { organizationId, userOrganizations } = await requirePermission({
       userId,
       request,
       entity: PermissionEntity.asset,
@@ -42,6 +42,7 @@ export async function action({ context, request }: ActionFunctionArgs) {
     const asset = await getAsset({
       id: assetId,
       organizationId,
+      userOrganizations,
       include: { qrCodes: true },
     });
     /** WE get the first qrCode as the app only supports 1 code per asset for now */

app/utils/roles.server.ts

@@ -90,6 +90,7 @@ export async function requirePermission({
     isSelfServiceOrBase:
       role === OrganizationRoles.SELF_SERVICE ||
       role === OrganizationRoles.BASE,
+    userOrganizations,
   };
 }