feat: Static URL Support for Applications and Pages

app/client/src/PluginActionEditor/components/PluginActionResponse/components/BindDataButton.tsx

@@ -17,6 +17,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import {
   getCurrentApplicationId,
+  getCurrentBasePageId,
   getPageList,
   getPagePermissions,
 } from "selectors/editorSelectors";
@@ -247,11 +248,11 @@ function BindDataButton(props: BindDataButtonProps) {
   const pagePermissions = useSelector(getPagePermissions);
 
   const params = useParams<{
-    basePageId: string;
     baseApiId?: string;
     baseQueryId?: string;
     moduleInstanceId?: string;
   }>();
+  const currentBasePageId = useSelector(getCurrentBasePageId);
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
@@ -346,7 +347,7 @@ function BindDataButton(props: BindDataButtonProps) {
           params.baseQueryId ||
           params.moduleInstanceId) as string,
         applicationId: applicationId as string,
-        basePageId: params.basePageId,
+        basePageId: currentBasePageId,
       }),
     );
 

app/client/src/actions/initActions.ts

@@ -14,6 +14,8 @@ export interface InitEditorActionPayload {
   branch?: string;
   mode: APP_MODE;
   shouldInitialiseUserDetails?: boolean;
+  staticApplicationSlug?: string;
+  staticPageSlug?: string;
 }
 
 export const initEditorAction = (
@@ -26,9 +28,11 @@ export const initEditorAction = (
 export interface InitAppViewerPayload {
   branch: string;
   baseApplicationId?: string;
-  basePageId: string;
+  basePageId?: string;
   mode: APP_MODE;
   shouldInitialiseUserDetails?: boolean;
+  staticApplicationSlug?: string;
+  staticPageSlug?: string;
 }
 
 export const initAppViewerAction = ({
@@ -37,6 +41,8 @@ export const initAppViewerAction = ({
   branch,
   mode,
   shouldInitialiseUserDetails,
+  staticApplicationSlug,
+  staticPageSlug,
 }: InitAppViewerPayload) => ({
   type: ReduxActionTypes.INITIALIZE_PAGE_VIEWER,
   payload: {
@@ -45,6 +51,8 @@ export const initAppViewerAction = ({
     basePageId,
     mode,
     shouldInitialiseUserDetails,
+    staticApplicationSlug,
+    staticPageSlug,
   },
 });
 

app/client/src/actions/pageActions.tsx

@@ -705,3 +705,23 @@ export const navigateToAnotherPage = (
   type: ReduxActionTypes.NAVIGATE_TO_ANOTHER_PAGE,
   payload,
 });
+
+export const persistPageSlug = (pageId: string, slug: string) => {
+  return {
+    type: ReduxActionTypes.PERSIST_PAGE_SLUG,
+    payload: {
+      pageId,
+      slug,
+    },
+  };
+};
+
+export const validatePageSlug = (pageId: string, slug: string) => {
+  return {
+    type: ReduxActionTypes.VALIDATE_PAGE_SLUG,
+    payload: {
+      pageId,
+      slug,
+    },
+  };
+};

app/client/src/api/PageApi.tsx

@@ -89,6 +89,7 @@ export interface UpdatePageRequest {
   name?: string;
   isHidden?: boolean;
   customSlug?: string;
+  uniqueSlug?: string;
 }
 
 export interface UpdatePageResponse {
@@ -97,6 +98,7 @@ export interface UpdatePageResponse {
   name: string;
   slug: string;
   customSlug?: string;
+  uniqueSlug?: string;
   applicationId: string;
   layouts: Array<PageLayout>;
   isHidden: boolean;
@@ -300,6 +302,20 @@ class PageApi extends Api {
   ): Promise<AxiosPromise<FetchApplicationResponse>> {
     return Api.get(PageApi.url, params);
   }
+
+  static async persistPageSlug(request: {
+    branchedPageId: string;
+    uniquePageSlug: string;
+  }): Promise<AxiosPromise<ApiResponse>> {
+    return Api.patch(`${PageApi.url}/static-url`, request);
+  }
+
+  static async validatePageSlug(
+    pageId: string,
+    uniqueSlug: string,
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.get(`${PageApi.url}/${pageId}/static-url/verify/${uniqueSlug}`);
+  }
 }
 
 export default PageApi;

app/client/src/api/services/ConsolidatedPageLoadApi/types.ts

@@ -2,4 +2,6 @@ export interface ConsolidatedApiParams {
   applicationId?: string;
   defaultPageId?: string;
   branchName?: string;
+  staticApplicationSlug?: string;
+  staticPageSlug?: string;
 }

app/client/src/ce/AppRouter.tsx

@@ -14,6 +14,7 @@ import {
   BUILDER_PATCH_PATH,
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
+  BUILDER_PATH_STATIC,
   CUSTOM_WIDGETS_DEPRECATED_EDITOR_ID_PATH,
   CUSTOM_WIDGETS_EDITOR_ID_PATH,
   CUSTOM_WIDGETS_EDITOR_ID_PATH_CUSTOM,
@@ -27,6 +28,7 @@ import {
   VIEWER_PATCH_PATH,
   VIEWER_PATH,
   VIEWER_PATH_DEPRECATED,
+  VIEWER_PATH_STATIC,
   WORKSPACE_URL,
 } from "constants/routes";
 import WorkspaceLoader from "pages/workspace/loader";
@@ -135,6 +137,9 @@ export function Routes() {
       {/*
        * End Note: When making changes to the order of the paths above
        */}
+      {/* Static URL routes that accept any page slug - must be after more specific routes */}
+      <SentryRoute component={AppIDE} path={BUILDER_PATH_STATIC} />
+      <SentryRoute component={AppViewerLoader} path={VIEWER_PATH_STATIC} />
       <Redirect from={BUILDER_PATCH_PATH} to={BUILDER_PATH} />
       <Redirect from={VIEWER_PATCH_PATH} to={VIEWER_PATH} />
       <SentryRoute component={PageNotFound} />
@@ -175,14 +180,14 @@ export default function AppRouter() {
   return (
     <Router history={history}>
       <Suspense fallback={loadingIndicator}>
-        <RouteChangeListener />
         {safeCrash && safeCrashCode ? (
           <>
             <ErrorPageHeader />
             <ErrorPage code={safeCrashCode} />
           </>
         ) : (
           <>
+            <RouteChangeListener />
             <Walkthrough>
               <AppHeader />
               <Routes />

app/client/src/ce/IDE/constants/routes.ts

@@ -5,6 +5,7 @@ import {
   BUILDER_CUSTOM_PATH,
   BUILDER_PATH,
   BUILDER_PATH_DEPRECATED,
+  BUILDER_PATH_STATIC,
   DATA_SOURCES_EDITOR_ID_PATH,
   ENTITY_PATH,
   INTEGRATION_EDITOR_PATH,
@@ -40,6 +41,11 @@ export const EntityPaths: string[] = [
 ];
 export const IDEBasePaths: Readonly<Record<IDEType, string[]>> = {
   [IDE_TYPE.None]: [],
-  [IDE_TYPE.App]: [BUILDER_PATH, BUILDER_PATH_DEPRECATED, BUILDER_CUSTOM_PATH],
+  [IDE_TYPE.App]: [
+    BUILDER_PATH,
+    BUILDER_PATH_DEPRECATED,
+    BUILDER_CUSTOM_PATH,
+    BUILDER_PATH_STATIC,
+  ],
   [IDE_TYPE.UIPackage]: [],
 };

app/client/src/ce/actions/applicationActions.ts

@@ -79,6 +79,34 @@ export const updateApplication = (
   };
 };
 
+export const persistAppSlug = (slug: string, onSuccess?: () => void) => {
+  return {
+    type: ReduxActionTypes.PERSIST_APP_SLUG,
+    payload: {
+      slug,
+      onSuccess,
+    },
+  };
+};
+
+export const validateAppSlug = (slug: string) => {
+  return {
+    type: ReduxActionTypes.VALIDATE_APP_SLUG,
+    payload: {
+      slug,
+    },
+  };
+};
+
+export const fetchAppSlugSuggestion = (applicationId: string) => {
+  return {
+    type: ReduxActionTypes.FETCH_APP_SLUG_SUGGESTION,
+    payload: {
+      applicationId,
+    },
+  };
+};
+
 export const updateCurrentApplicationIcon = (icon: IconNames) => {
   return {
     type: ReduxActionTypes.CURRENT_APPLICATION_ICON_UPDATE,
@@ -290,3 +318,28 @@ export const setIsAppSidebarPinned = (payload: boolean) => ({
 export const fetchAllPackages = () => {
   return {};
 };
+
+export const enableStaticUrl = (slug: string, onSuccess?: () => void) => {
+  return {
+    type: ReduxActionTypes.ENABLE_STATIC_URL,
+    payload: {
+      slug,
+      onSuccess,
+    },
+  };
+};
+
+export const disableStaticUrl = (onSuccess?: () => void) => {
+  return {
+    type: ReduxActionTypes.DISABLE_STATIC_URL,
+    payload: {
+      onSuccess,
+    },
+  };
+};
+
+export const resetAppSlugValidation = () => {
+  return {
+    type: ReduxActionTypes.RESET_APP_SLUG_VALIDATION,
+  };
+};

app/client/src/ce/api/ApplicationApi.tsx

@@ -35,6 +35,7 @@ export interface ApplicationPagePayload {
   slug: string;
   isHidden?: boolean;
   customSlug?: string;
+  uniqueSlug?: string;
   userPermissions?: string[];
 }
 
@@ -517,6 +518,52 @@ export class ApplicationApi extends Api {
   > {
     return Api.post(`${ApplicationApi.baseURL}/import/partial/block`, request);
   }
+
+  static async persistAppSlug(
+    applicationId: string,
+    request: {
+      branchedApplicationId: string;
+      uniqueApplicationSlug: string;
+    },
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.patch(
+      `${ApplicationApi.baseURL}/${applicationId}/static-url`,
+      request,
+    );
+  }
+
+  static async validateAppSlug(
+    applicationId: string,
+    uniqueSlug: string,
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.get(
+      `${ApplicationApi.baseURL}/${applicationId}/static-url/${uniqueSlug}`,
+    );
+  }
+
+  static async enableStaticUrl(
+    applicationId: string,
+    request: { uniqueApplicationSlug: string },
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.post(
+      `${ApplicationApi.baseURL}/${applicationId}/static-url`,
+      request,
+    );
+  }
+
+  static async disableStaticUrl(
+    applicationId: string,
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.delete(`${ApplicationApi.baseURL}/${applicationId}/static-url`);
+  }
+
+  static async fetchAppSlugSuggestion(
+    applicationId: string,
+  ): Promise<AxiosPromise<ApiResponse>> {
+    return Api.get(
+      `${ApplicationApi.baseURL}/${applicationId}/static-url/suggest-app-slug`,
+    );
+  }
 }
 
 export default ApplicationApi;

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -636,9 +636,28 @@ const PageActionErrorTypes = {
 };
 
 const ApplicationActionTypes = {
+  ENABLE_STATIC_URL: "ENABLE_STATIC_URL",
+  ENABLE_STATIC_URL_SUCCESS: "ENABLE_STATIC_URL_SUCCESS",
+  DISABLE_STATIC_URL: "DISABLE_STATIC_URL",
+  DISABLE_STATIC_URL_SUCCESS: "DISABLE_STATIC_URL_SUCCESS",
   UPDATE_APPLICATION: "UPDATE_APPLICATION",
   UPDATE_APP_LAYOUT: "UPDATE_APP_LAYOUT",
   UPDATE_APPLICATION_SUCCESS: "UPDATE_APPLICATION_SUCCESS",
+  PERSIST_APP_SLUG: "PERSIST_APP_SLUG",
+  PERSIST_APP_SLUG_SUCCESS: "PERSIST_APP_SLUG_SUCCESS",
+  PERSIST_APP_SLUG_ERROR: "PERSIST_APP_SLUG_ERROR",
+  RESET_APP_SLUG_VALIDATION: "RESET_APP_SLUG_VALIDATION",
+  VALIDATE_APP_SLUG: "VALIDATE_APP_SLUG",
+  VALIDATE_APP_SLUG_SUCCESS: "VALIDATE_APP_SLUG_SUCCESS",
+  VALIDATE_APP_SLUG_ERROR: "VALIDATE_APP_SLUG_ERROR",
+  PERSIST_PAGE_SLUG: "PERSIST_PAGE_SLUG",
+  PERSIST_PAGE_SLUG_SUCCESS: "PERSIST_PAGE_SLUG_SUCCESS",
+  PERSIST_PAGE_SLUG_ERROR: "PERSIST_PAGE_SLUG_ERROR",
+  VALIDATE_PAGE_SLUG: "VALIDATE_PAGE_SLUG",
+  VALIDATE_PAGE_SLUG_SUCCESS: "VALIDATE_PAGE_SLUG_SUCCESS",
+  VALIDATE_PAGE_SLUG_ERROR: "VALIDATE_PAGE_SLUG_ERROR",
+  FETCH_APP_SLUG_SUGGESTION: "FETCH_APP_SLUG_SUGGESTION",
+  FETCH_APP_SLUG_SUGGESTION_SUCCESS: "FETCH_APP_SLUG_SUGGESTION_SUCCESS",
   FETCH_APPLICATION_INIT: "FETCH_APPLICATION_INIT",
   FETCH_APPLICATION_SUCCESS: "FETCH_APPLICATION_SUCCESS",
   CREATE_APPLICATION_INIT: "CREATE_APPLICATION_INIT",
@@ -670,6 +689,9 @@ const ApplicationActionErrorTypes = {
   DELETE_APPLICATION_ERROR: "DELETE_APPLICATION_ERROR",
   SET_DEFAULT_APPLICATION_PAGE_ERROR: "SET_DEFAULT_APPLICATION_PAGE_ERROR",
   FORK_APPLICATION_ERROR: "FORK_APPLICATION_ERROR",
+  FETCH_APP_SLUG_SUGGESTION_ERROR: "FETCH_APP_SLUG_SUGGESTION_ERROR",
+  ENABLE_STATIC_URL_ERROR: "ENABLE_STATIC_URL_ERROR",
+  DISABLE_STATIC_URL_ERROR: "DISABLE_STATIC_URL_ERROR",
 };
 
 const IDEDebuggerActionTypes = {