diff --git a/app/client/src/ce/AppRouter.tsx b/app/client/src/ce/AppRouter.tsx index 3c33637f1b..d1fd9951ca 100644 --- a/app/client/src/ce/AppRouter.tsx +++ b/app/client/src/ce/AppRouter.tsx @@ -115,10 +115,18 @@ export function Routes() { /> + {/* + * 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 + */} + {/* + * End Note: When making changes to the order of the paths above + */} diff --git a/app/client/src/pages/tests/slug.test.tsx b/app/client/src/pages/tests/slug.test.tsx index cc0e81bbd7..2ea2613a7a 100644 --- a/app/client/src/pages/tests/slug.test.tsx +++ b/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); + }); }); diff --git a/app/client/src/utils/helpers.tsx b/app/client/src/utils/helpers.tsx index 9cd7021f1a..63ffd55a2c 100644 --- a/app/client/src/utils/helpers.tsx +++ b/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, +) => { + 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, ) => { 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, +) => { + 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; };