update navigations relative to base path

raheeliftikhar5 · ludomikula · commit cbd7ab4f7a00 · 2025-07-16T10:14:10.000+02:00
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -26,6 +26,7 @@ import { DEFAULT_ROW_COUNT } from "@lowcoder-ee/layout/calculateUtils";
 import { AppSettingContext } from "../utils/appSettingContext";
 import { currentApplication, isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
 import { isAggregationApp } from "util/appUtils";
+import history from "@lowcoder-ee/util/history";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -422,7 +423,7 @@ function AppCanvasSettingsModal(props: ChildrenInstance) {
             preNode={() => (
               isPublicApp ? <></> : (
                 <>
-                  <CreateDiv onClick={() => window.open(THEME_SETTING)}>
+                  <CreateDiv onClick={() => window.open(history.createHref({pathname: THEME_SETTING}))}>
                     <StyledAddIcon />
                     {trans("appSetting.themeCreate")}
                   </CreateDiv>
diff --git a/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx b/client/packages/lowcoder/src/comps/controls/iconscoutControl.tsx
@@ -32,6 +32,7 @@ import { CrownFilled } from "@ant-design/icons";
 import { SUBSCRIPTION_SETTING } from "@lowcoder-ee/constants/routesURL";
 import { useSimpleSubscriptionContext } from "@lowcoder-ee/util/context/SimpleSubscriptionContext";
 import { SubscriptionProductsEnum } from "@lowcoder-ee/constants/subscriptionConstants";
+import history from "@lowcoder-ee/util/history";
 
 const ButtonWrapper = styled.div`
   width: 100%;
@@ -397,7 +398,7 @@ export const IconPicker = (props: {
                       title: trans("iconScout.buySubscriptionTitle"),
                       content: trans("iconScout.buySubscriptionContent"),
                       onConfirm: () => {
-                        window.open(SUBSCRIPTION_SETTING, "_blank");
+                        window.open(history.createHref({pathname: SUBSCRIPTION_SETTING}), "_blank");
                       },
                       confirmBtnType: "primary",
                       okText: trans("iconScout.buySubscriptionButton"),
diff --git a/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts b/client/packages/lowcoder/src/comps/utils/gridCompOperator.ts
@@ -28,6 +28,7 @@ import { pasteKey, undoKey } from "util/keyUtils";
 import { genRandomKey } from "./idGenerator";
 import { getLatestVersion, getRemoteCompType, parseCompType } from "./remote";
 import { APPLICATION_VIEW_URL } from "@lowcoder-ee/constants/routesURL";
+import history from "@lowcoder-ee/util/history";
 
 export type CopyCompType = {
   layout: LayoutItem;
@@ -195,7 +196,7 @@ export class GridCompOperator {
   static editComp(editorState: EditorState) {
     const selectedComp = Object.values(editorState.selectedComps())[0];
     const applicationId = selectedComp.children.comp.children.appId.value
-    window.open(APPLICATION_VIEW_URL(applicationId, "edit"))
+    window.open(history.createHref({pathname: APPLICATION_VIEW_URL(applicationId, "edit")}))
   }
 
   static cutComp(editorState: EditorState, compRecords: Record<string, Comp>) {
diff --git a/client/packages/lowcoder/src/pages/common/copyModal.tsx b/client/packages/lowcoder/src/pages/common/copyModal.tsx
@@ -10,6 +10,7 @@ import { foldersSelector } from "redux/selectors/folderSelector";
 import { AppTypeEnum } from "constants/applicationConstants";
 import { TypeName } from "./headerStartDropdown";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import history from "@lowcoder-ee/util/history";
 
 type CopyModalProps = {
   visible: boolean;
@@ -62,7 +63,7 @@ export function CopyModal(props: CopyModalProps) {
             .then(async (response) => {
               if (validateResponse(response) && response.data.data) {
                 window.open(
-                  APPLICATION_VIEW_URL(response.data.data.applicationInfoView.applicationId, "edit")
+                  history.createHref({pathname: APPLICATION_VIEW_URL(response.data.data.applicationInfoView.applicationId, "edit")})
                 );
                 window.location.reload();
                 return response.data.data;
diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -203,7 +203,7 @@ const PreviewHeaderComp = () => {
           onClick={() =>
             // redirection to app by JS will cause the problem that queries don't execute on initialization
             // so just open a new window.
-            window.open(APPLICATION_VIEW_URL(applicationId, "edit"))
+            window.open(history.createHref({pathname: APPLICATION_VIEW_URL(applicationId, "edit")}))
           }
         >
           <EditIcon />
@@ -215,7 +215,7 @@ const PreviewHeaderComp = () => {
           style={{ marginRight: !user.isAnonymous ? "24px" : "" }}
           buttonType="primary"
           onClick={() => {
-            window.open(trans("template.cloneUrl") + templateId);
+            window.open(history.createHref({pathname: trans("template.cloneUrl") + templateId}));
           }}
         >
           {trans("header.clone")}
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditorPublic.tsx b/client/packages/lowcoder/src/pages/editor/AppEditorPublic.tsx
@@ -61,13 +61,13 @@ const AppEditorPublic = React.memo(() => {
   );
   const applicationId = useMemo(
     () => {
-      const appId = params.applicationId || window.location.pathname.split("/")[2];
+      const appId = params.applicationId || history.location.pathname.split("/")[2];
       return appId === 'public' ? PUBLIC_APP_ID : appId;
-    }, [params.applicationId, window.location.pathname]
+    }, [params.applicationId, history.location.pathname]
   );
   const paramViewMode = useMemo(
-    () => params.viewMode || window.location.pathname.split("/")[3],
-    [params.viewMode, window.location.pathname]
+    () => params.viewMode || history.location.pathname.split("/")[3],
+    [params.viewMode, history.location.pathname]
   );
   const viewMode = useMemo(
     () => (paramViewMode === "view" || paramViewMode === "admin")
diff --git a/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx b/client/packages/lowcoder/src/pages/editor/appEditorInternal.tsx
@@ -27,6 +27,7 @@ import { getCurrentUser } from "redux/selectors/usersSelectors";
 import React from "react";
 import { isEqual } from "lodash";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import history from "@lowcoder-ee/util/history";
 
 /**
  * FIXME: optimize the logic of saving comps
@@ -187,7 +188,7 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
       readOnly,
       appType: appInfo.appType,
       applicationId: appInfo.id,
-      hideHeader: window.location.pathname.split("/")[3] === "admin",
+      hideHeader: history.location.pathname.split("/")[3] === "admin",
       blockEditing,
       fetchApplication: fetchApplication,
       exportPublicAppToJson: isPublicApp ? exportPublicAppToJson : undefined,
@@ -232,7 +233,7 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
   });
 
   return loading ? (
-    window.location.pathname.split("/")[3] === "admin" ? <div></div> : 
+    history.location.pathname.split("/")[3] === "admin" ? <div></div> : 
     <EditorSkeletonView />
   ) : (
     <ConfigProvider
diff --git a/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx b/client/packages/lowcoder/src/pages/editor/right/ModulePanel.tsx
@@ -31,6 +31,7 @@ import {DraggableTreeNode, DraggableTreeNodeItemRenderProps} from "@lowcoder-ee/
 import { EmptyContent } from "components/EmptyContent";
 import {deleteFolder, moveToFolder, updateFolder} from "@lowcoder-ee/redux/reduxActions/folderActions";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import history from "@lowcoder-ee/util/history";
 const ItemWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -736,7 +737,7 @@ export default function ModulePanel() {
                                     type={AppTypeEnum.Module}
                                     onSuccess={(app) => {
                                         const appId = app.applicationInfoView.applicationId;
-                                        const url = APPLICATION_VIEW_URL(appId, "edit");
+                                        const url = history.createHref({pathname: APPLICATION_VIEW_URL(appId, "edit")});
                                         window.open(url);
                                     }}
                                 />
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/AppsTab.tsx
@@ -225,7 +225,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {
               icon={<AuditOutlined />}
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&appId=${app.applicationId}&pageSize=100&pageNum=1`;
+                const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&appId=${app.applicationId}&pageSize=100&pageNum=1`});
                 window.open(auditUrl, '_blank');
               }}
             >
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/DataSourcesTab.tsx
@@ -215,7 +215,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI
               icon={<AuditOutlined />}
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`;
+                const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`});
                 window.open(auditUrl, '_blank');
               }}
             >
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx
@@ -5,6 +5,7 @@ import { Environment } from '../types/environment.types';
 import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
 import { getAPICallsStatusColor } from '../services/license.service';
 import { trans } from 'i18n';
+import history from '@lowcoder-ee/util/history';
 
 const { Text, Title } = Typography;
 
@@ -25,7 +26,7 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
   // Open audit page in new tab
   const openAuditPage = (environmentId: string, e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent row click from triggering
-    const auditUrl = `/setting/audit?environmentId=${environmentId}`;
+    const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environmentId}`});
     window.open(auditUrl, '_blank');
   };
 
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/QueriesTab.tsx
@@ -233,7 +233,7 @@ const QueriesTab: React.FC<QueriesTabProps> = ({ environment, workspaceId }) =>
               icon={<AuditOutlined />}
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&queryId=${query.id}&pageSize=100&pageNum=1`;
+                const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&queryId=${query.id}&pageSize=100&pageNum=1`});
                 window.open(auditUrl, '_blank');
               }}
             >
diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/WorkspacesTab.tsx
@@ -197,7 +197,7 @@ const WorkspacesTab: React.FC<WorkspacesTabProps> = ({ environment }) => {
               size="small"
               onClick={(e) => {
                 e.stopPropagation();
-                const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&pageSize=100&pageNum=1`;
+                const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspace.id}&pageSize=100&pageNum=1`});
                 window.open(auditUrl, '_blank');
               }}
             >
diff --git a/client/packages/lowcoder/src/redux/sagas/applicationSagas.ts b/client/packages/lowcoder/src/redux/sagas/applicationSagas.ts
@@ -190,7 +190,7 @@ export function* publishApplicationSaga(action: ReduxAction<PublishApplicationPa
         payload: action.payload,
       });
       messageInstance.success(trans("api.publishSuccess"));
-      window.open(APPLICATION_VIEW_URL(action.payload.applicationId, "view"));
+      window.open(history.createHref({pathname: APPLICATION_VIEW_URL(action.payload.applicationId, "view")}));
     }
   } catch (error: any) {
     messageInstance.error(error.message);
diff --git a/client/packages/lowcoder/src/util/appUtils.tsx b/client/packages/lowcoder/src/util/appUtils.tsx
@@ -37,7 +37,7 @@ export function openApp(props: {
   if (!m || !props.applicationId) {
     return;
   }
-  let targetURL = APPLICATION_VIEW_URL(props.applicationId, m.params.viewMode);
+  let targetURL = history.createHref({pathname: APPLICATION_VIEW_URL(props.applicationId, m.params.viewMode)});
   // query
   if (props.queryParams && !isEmpty(props.queryParams)) {
     targetURL += `?${props.queryParams}`;
diff --git a/client/packages/lowcoder/src/util/history.ts b/client/packages/lowcoder/src/util/history.ts
@@ -1,2 +1,6 @@
 import { createBrowserHistory } from "history";
-export default createBrowserHistory({basename: "/__LOWCODER_BASEPATH_PLACEHOLDER__"});
+const nodeEnv = process.env.NODE_ENV ?? "development";
+const isDev = nodeEnv === "development";
+const basename = isDev ? "/" : "/__LOWCODER_BASEPATH_PLACEHOLDER__";
+
+export default createBrowserHistory({basename});
diff --git a/client/packages/lowcoder/src/util/homeResUtils.tsx b/client/packages/lowcoder/src/util/homeResUtils.tsx
@@ -59,12 +59,12 @@ export const handleAppEditClick = (e: any, id: string): void => {
   } else {
     history.push(APPLICATION_VIEW_URL(id, "edit"), '_blank');
   } */
-  window.open(APPLICATION_VIEW_URL(id, "edit"), '_blank');
+  window.open(history.createHref({pathname: APPLICATION_VIEW_URL(id, "edit")}), '_blank');
 };
 
-export const handleAppViewClick = (id: string) => window.open(APPLICATION_VIEW_URL(id, "view"), '_blank');
+export const handleAppViewClick = (id: string) => window.open(history.createHref({pathname: APPLICATION_VIEW_URL(id, "view")}), '_blank');
 
-export const handleMarketplaceAppViewClick = (id: string, isLocalMarketplace?: boolean) => isLocalMarketplace == true ? window.open(APPLICATION_VIEW_URL(id, "view_marketplace"), '_blank') : window.open(APPLICATION_MARKETPLACE_VIEW_URL(id, "view_marketplace"), '_blank');
+export const handleMarketplaceAppViewClick = (id: string, isLocalMarketplace?: boolean) => isLocalMarketplace == true ? window.open(history.createHref({pathname: APPLICATION_VIEW_URL(id, "view_marketplace")}), '_blank') : window.open(history.createHref({pathname: APPLICATION_MARKETPLACE_VIEW_URL(id, "view_marketplace")}), '_blank');
 
 export const handleFolderViewClick = (id: string) => history.push(buildFolderUrl(id));
 
diff --git a/client/packages/lowcoder/src/util/urlUtils.ts b/client/packages/lowcoder/src/util/urlUtils.ts
@@ -1,5 +1,6 @@
 import { PHONE_NUMBER_PATTERN } from "./stringUtils";
 import { SERVER_HOST } from "constants/apiConstants";
+import history from "./history";
 
 export const isSafeRedirectURL = (redirectURL: string) => {
   try {
@@ -32,7 +33,8 @@ export const genInviteLink = (inviteCode?: string) => {
   if (!inviteCode) {
     return "";
   }
-  return `${window.location.origin}/invite/${inviteCode}`;
+  const inviteUrl = history.createHref({pathname: `/invite/${inviteCode}`});
+  return `${window.location.origin}${inviteUrl}`;
 };
 
 export const hasQueryParam = (name: string) => {

Original file line number	Diff line number	Diff line change
`@@ -203,7 +203,7 @@ const PreviewHeaderComp = () => {`
`203`	`203`	`onClick={() =>`
`204`	`204`	`// redirection to app by JS will cause the problem that queries don't execute on initialization`
`205`	`205`	`// so just open a new window.`
`206`		`- window.open(APPLICATION_VIEW_URL(applicationId, "edit"))`
	`206`	`+ window.open(history.createHref({pathname: APPLICATION_VIEW_URL(applicationId, "edit")}))`
`207`	`207`	`}`
`208`	`208`	`>`
`209`	`209`	`<EditIcon />`
`@@ -215,7 +215,7 @@ const PreviewHeaderComp = () => {`
`215`	`215`	`style={{ marginRight: !user.isAnonymous ? "24px" : "" }}`
`216`	`216`	`buttonType="primary"`
`217`	`217`	`onClick={() => {`
`218`		`- window.open(trans("template.cloneUrl") + templateId);`
	`218`	`+ window.open(history.createHref({pathname: trans("template.cloneUrl") + templateId}));`
`219`	`219`	`}}`
`220`	`220`	`>`
`221`	`221`	`{trans("header.clone")}`
Original file line number	Diff line number	Diff line change
`@@ -225,7 +225,7 @@ const AppsTab: React.FC<AppsTabProps> = ({ environment, workspaceId }) => {`
`225`	`225`	`icon={<AuditOutlined />}`
`226`	`226`	`onClick={(e) => {`
`227`	`227`	`e.stopPropagation();`
`228`		- const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&appId=${app.applicationId}&pageSize=100&pageNum=1`;
	`228`	+ const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&appId=${app.applicationId}&pageSize=100&pageNum=1`});
`229`	`229`	`window.open(auditUrl, '_blank');`
`230`	`230`	`}}`
`231`	`231`	`>`
Original file line number	Diff line number	Diff line change
`@@ -215,7 +215,7 @@ const DataSourcesTab: React.FC<DataSourcesTabProps> = ({ environment, workspaceI`
`215`	`215`	`icon={<AuditOutlined />}`
`216`	`216`	`onClick={(e) => {`
`217`	`217`	`e.stopPropagation();`
`218`		- const auditUrl = `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`;
	`218`	+ const auditUrl = history.createHref({pathname: `/setting/audit?environmentId=${environment.environmentId}&orgId=${workspaceId}&datasourceId=${dataSource.id}&pageSize=100&pageNum=1`});
`219`	`219`	`window.open(auditUrl, '_blank');`
`220`	`220`	`}}`
`221`	`221`	`>`