asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(dashboard): Wrap each route in an ErrorBoundary (#8674)

Browse Source 
**What**
- Updates the copy of the different error types
- Wraps each route (+ custom routes) in an ErrorBoundary to preserve app layout on error (sidebar and topbar)

![Skærmbillede 2024-08-20 kl  12 35 53](https://github.com/user-attachments/assets/0c589fc4-b279-4b66-9d66-1b99a7406696)

**Note**
If the user goes to a route that does not exist at all, e.g. `/some-weird-url`, then we have no way of knowing if the user is inside of a context where we can render the sidebar and topbar (as they require the user to be authenticated). So in this case we still show an ErrorBoundary where the two aren't included (see second picture), and include a button that takes the user to "/", which depending on whether the user is logged in will take them to "/login" or "/orders".

![image](https://github.com/user-attachments/assets/08dde48a-3bb8-41a1-9a0e-2c41716baf0b)

Resolves CC-248
This commit is contained in:
Kasper Fabricius Kristensen
2024-08-20 13:09:30 +00:00
committed by GitHub
parent b4d8e265e3
commit 3706bf51af
7 changed files with 106 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/admin-next/dashboard/src/providers/router-provider/index.ts
+1 -1
View File
@@ -1 +1 @@
export * from "./router-provider";
export * from "./router-provider"
packages/admin-next/dashboard/src/providers/router-provider/route-map.tsx
+31 -4
View File
@@ -26,10 +26,6 @@ export const RouteMap: RouteObject[] = [
path: "/login",
lazy: () => import("../../routes/login"),
},
{
path: "/",
lazy: () => import("../../routes/home"),
},
{
path: "*",
lazy: () => import("../../routes/no-match"),
@@ -46,8 +42,14 @@ export const RouteMap: RouteObject[] = [
path: "/",
element: <MainLayout />,
children: [
{
index: true,
errorElement: <ErrorBoundary />,
lazy: () => import("../../routes/home"),
},
{
path: "/products",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Products",
},
@@ -158,6 +160,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/categories",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Categories",
},
@@ -206,6 +209,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/orders",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Orders",
},
@@ -264,6 +268,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/promotions",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Promotions",
},
@@ -305,6 +310,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/campaigns",
errorElement: <ErrorBoundary />,
handle: { crumb: () => "Campaigns" },
children: [
{
@@ -341,6 +347,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/collections",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Collections",
},
@@ -383,6 +390,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/price-lists",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Price Lists",
},
@@ -434,6 +442,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/customers",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Customers",
},
@@ -479,6 +488,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/customer-groups",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Customer Groups",
},
@@ -534,6 +544,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/reservations",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Reservations",
},
@@ -577,6 +588,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "/inventory",
errorElement: <ErrorBoundary />,
handle: {
crumb: () => "Inventory",
},
@@ -660,10 +672,12 @@ export const RouteMap: RouteObject[] = [
children: [
{
index: true,
errorElement: <ErrorBoundary />,
lazy: () => import("../../routes/settings"),
},
{
path: "profile",
errorElement: <ErrorBoundary />,
lazy: () => import("../../routes/profile/profile-detail"),
handle: {
crumb: () => "Profile",
@@ -677,6 +691,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "regions",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Regions",
@@ -715,6 +730,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "store",
errorElement: <ErrorBoundary />,
lazy: () => import("../../routes/store/store-detail"),
handle: {
crumb: () => "Store",
@@ -736,6 +752,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "users",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Users",
@@ -768,6 +785,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "sales-channels",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Sales Channels",
@@ -814,6 +832,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "locations",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Locations & Shipping",
@@ -865,6 +884,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "shipping-option-types",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Shipping Option Types",
@@ -962,6 +982,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "product-tags",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Product Tags",
@@ -999,6 +1020,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "workflows",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Workflows",
@@ -1031,6 +1053,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "product-types",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Product Types",
@@ -1069,6 +1092,7 @@ export const RouteMap: RouteObject[] = [
{
path: "publishable-api-keys",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Publishable API Keys",
@@ -1128,6 +1152,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "secret-api-keys",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Secret API Keys",
@@ -1180,6 +1205,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "tax-regions",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Tax Regions",
@@ -1298,6 +1324,7 @@ export const RouteMap: RouteObject[] = [
},
{
path: "return-reasons",
errorElement: <ErrorBoundary />,
element: <Outlet />,
handle: {
crumb: () => "Return Reasons",