fix: Query and data source page - 404 error on reload (#19833)

app/client/src/ce/AppRouter.tsx

@@ -115,10 +115,18 @@ export function Routes() {
       />
       <SentryRoute component={EditorLoader} path={BUILDER_PATH_DEPRECATED} />
       <SentryRoute component={AppViewerLoader} path={VIEWER_PATH_DEPRECATED} />
+      {/*
+       * Note: When making changes to the order of these paths
+       * Be sure to check if it is sync with the order of checks in getUpdatedRoute helper method
+       * Context: https://github.com/appsmithorg/appsmith/pull/19833
+       */}
       <SentryRoute component={EditorLoader} path={BUILDER_PATH} />
       <SentryRoute component={EditorLoader} path={BUILDER_CUSTOM_PATH} />
       <SentryRoute component={AppViewerLoader} path={VIEWER_PATH} />
       <SentryRoute component={AppViewerLoader} path={VIEWER_CUSTOM_PATH} />
+      {/*
+       * End Note: When making changes to the order of the paths above
+       */}
       <Redirect from={BUILDER_PATCH_PATH} to={BUILDER_PATH} />
       <Redirect from={VIEWER_PATCH_PATH} to={VIEWER_PATH} />
       <SentryRoute component={Spinner} path={LICENSE_CHECK_PATH} />

app/client/src/pages/tests/slug.test.tsx

@@ -5,7 +5,12 @@ import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants";
 import { selectURLSlugs } from "selectors/editorSelectors";
 import store from "store";
 import { render } from "test/testUtils";
-import { getUpdatedRoute, isURLDeprecated } from "utils/helpers";
+import {
+  getUpdatedRoute,
+  isURLDeprecated,
+  matchPath_BuilderCustomSlug,
+  matchPath_ViewerSlug,
+} from "utils/helpers";
 import {
   fetchApplicationMockResponse,
   setMockApplication,
@@ -175,4 +180,28 @@ describe("URL slug names", () => {
       }),
     ).toBe("/app/my-app/page-605c435a91dea93f0eaf91ba/edit");
   });
+
+  it("getUpdatedRoute - handles pattern match overlap with slug url and custom slug url", () => {
+    // this path will match with VIEWER_PATH and BUILDER_CUSTOM_PATH
+    const customSlug_pathname =
+      "/app/custom-63c63d944ae4345e31af12a7/edit/saas/google-sheets-plugin/api/63c63d984ae4345e31af12e5";
+
+    // verify path match overlap
+    const matchBuilderCustomPath = matchPath_BuilderCustomSlug(
+      customSlug_pathname,
+    );
+    const matchViewerSlugPath = matchPath_ViewerSlug(customSlug_pathname);
+    expect(matchViewerSlugPath).not.toBeNull();
+    expect(matchBuilderCustomPath).not.toBeNull();
+
+    // verify proper url is returned regarless of match overlap
+    expect(
+      getUpdatedRoute(customSlug_pathname, {
+        applicationSlug: "gsheetreleasetesting-copy",
+        customSlug: "custom",
+        pageId: "63c63d944ae4345e31af12a7",
+        pageSlug: "basicpagination",
+      }),
+    ).toBe(customSlug_pathname);
+  });
 });

app/client/src/utils/helpers.tsx

@@ -827,51 +827,117 @@ export const isURLDeprecated = (url: string) => {
   });
 };
 
+export const matchPath_BuilderSlug = (path: string) =>
+  matchPath<{ applicationSlug: string; pageSlug: string; pageId: string }>(
+    path,
+    {
+      path: trimQueryString(BUILDER_PATH),
+      strict: false,
+      exact: false,
+    },
+  );
+
+export const matchPath_ViewerSlug = (path: string) =>
+  matchPath<{ applicationSlug: string; pageSlug: string; pageId: string }>(
+    path,
+    {
+      path: trimQueryString(VIEWER_PATH),
+      strict: false,
+      exact: false,
+    },
+  );
+
+export const matchPath_BuilderCustomSlug = (path: string) =>
+  matchPath<{ customSlug: string }>(path, {
+    path: trimQueryString(BUILDER_CUSTOM_PATH),
+  });
+
+export const matchPath_ViewerCustomSlug = (path: string) =>
+  matchPath<{ customSlug: string }>(path, {
+    path: trimQueryString(VIEWER_CUSTOM_PATH),
+  });
+
 export const getUpdatedRoute = (
   path: string,
   params: Record<string, string>,
+) => {
+  const updatedPath = path;
+
+  const matchBuilderSlugPath = matchPath_BuilderSlug(path);
+  const matchBuilderCustomPath = matchPath_BuilderCustomSlug(path);
+  const matchViewerSlugPath = matchPath_ViewerSlug(path);
+  const matchViewerCustomPath = matchPath_ViewerCustomSlug(path);
+
+  /*
+   * Note: When making changes to the order of these conditions
+   * Be sure to check if it is sync with the order of paths AppRouter.ts
+   * Context: https://github.com/appsmithorg/appsmith/pull/19833
+   */
+  if (matchBuilderSlugPath?.params) {
+    return getUpdateRouteForSlugPath(
+      path,
+      matchBuilderSlugPath.params.applicationSlug,
+      matchBuilderSlugPath.params.pageSlug,
+      params,
+    );
+  } else if (matchBuilderCustomPath?.params) {
+    return getUpdatedRouteForCustomSlugPath(
+      path,
+      matchBuilderCustomPath.params.customSlug,
+      params,
+    );
+  } else if (matchViewerSlugPath) {
+    return getUpdateRouteForSlugPath(
+      path,
+      matchViewerSlugPath.params.applicationSlug,
+      matchViewerSlugPath.params.pageSlug,
+      params,
+    );
+  } else if (matchViewerCustomPath) {
+    return getUpdatedRouteForCustomSlugPath(
+      path,
+      matchViewerCustomPath.params.customSlug,
+      params,
+    );
+  }
+  return updatedPath;
+};
+
+const getUpdatedRouteForCustomSlugPath = (
+  path: string,
+  customSlug: string,
+  params: Record<string, string>,
 ) => {
   let updatedPath = path;
-  const match = matchPath<{ applicationSlug: string; pageSlug: string }>(path, {
-    path: [trimQueryString(BUILDER_PATH), trimQueryString(VIEWER_PATH)],
-    strict: false,
-    exact: false,
-  });
-  if (match?.params) {
-    const { applicationSlug, pageSlug } = match?.params;
-    if (params.customSlug) {
-      updatedPath = updatedPath.replace(
-        `${applicationSlug}/${pageSlug}`,
-        `${params.customSlug}-`,
-      );
-      return updatedPath;
-    }
-    if (params.applicationSlug)
-      updatedPath = updatedPath.replace(
-        applicationSlug,
-        params.applicationSlug,
-      );
-    if (params.pageSlug)
-      updatedPath = updatedPath.replace(pageSlug, `${params.pageSlug}-`);
+  if (params.customSlug) {
+    updatedPath = updatedPath.replace(`${customSlug}`, `${params.customSlug}-`);
+  } else if (params.applicationSlug && params.pageSlug) {
+    updatedPath = updatedPath.replace(
+      `${customSlug}`,
+      `${params.applicationSlug}/${params.pageSlug}-`,
+    );
+  }
+  return updatedPath;
+};
+
+const getUpdateRouteForSlugPath = (
+  path: string,
+  applicationSlug: string,
+  pageSlug: string,
+  params: Record<string, string>,
+) => {
+  let updatedPath = path;
+  if (params.customSlug) {
+    updatedPath = updatedPath.replace(
+      `${applicationSlug}/${pageSlug}`,
+      `${params.customSlug}-`,
+    );
     return updatedPath;
   }
-  const matchCustomPath = matchPath<{ customSlug: string }>(path, {
-    path: [BUILDER_CUSTOM_PATH, VIEWER_CUSTOM_PATH],
-  });
-  if (matchCustomPath?.params) {
-    const { customSlug } = matchCustomPath.params;
-    if (params.customSlug) {
-      updatedPath = updatedPath.replace(
-        `${customSlug}`,
-        `${params.customSlug}-`,
-      );
-    } else if (params.applicationSlug && params.pageSlug) {
-      updatedPath = updatedPath.replace(
-        `${customSlug}`,
-        `${params.applicationSlug}/${params.pageSlug}-`,
-      );
-    }
-  }
+  if (params.applicationSlug)
+    updatedPath = updatedPath.replace(applicationSlug, params.applicationSlug);
+  if (params.pageSlug)
+    updatedPath = updatedPath.replace(pageSlug, `${params.pageSlug}-`);
   return updatedPath;
 };