PromucFlow_constructor/app/client/src/RouteBuilder.ts
Rimil Dey a91c5e94a3
fix: Encode query params in URLs (#22594)
## Description

URLs created from `navigateTo()` having query params that were
non-string values or special characters were not being displayed in the
URL. To fix this we encoded these values.

Fixes #16918 #12177 


## Media
https://www.loom.com/share/b9a9705770f04172ba1580d4a5b48739

## Type of change

- Bug fix (non-breaking change which fixes an issue)


## How Has This Been Tested?

- Manual
- Jest


### Test Plan


### Issues raised during DP testing


## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
2023-05-03 09:00:27 +05:30

199 lines
4.6 KiB
TypeScript

import {
ADMIN_SETTINGS_PATH,
GEN_TEMPLATE_FORM_ROUTE,
GEN_TEMPLATE_URL,
getViewerCustomPath,
getViewerPath,
TEMPLATES_PATH,
} from "constants/routes";
import { APP_MODE } from "entities/App";
import urlBuilder from "entities/URLRedirect/URLAssembly";
import type {
ApplicationPayload,
Page,
} from "@appsmith/constants/ReduxActionConstants";
import { isNil } from "lodash";
export type URLBuilderParams = {
suffix?: string;
branch?: string;
hash?: string;
params?: Record<string, any>;
pageId: string;
persistExistingParams?: boolean;
};
export const fillPathname = (
pathname: string,
application: ApplicationPayload,
page: Page,
) => {
const replaceValue = page.customSlug
? getViewerCustomPath(page.customSlug, page.pageId)
: getViewerPath(application.slug, page.slug, page.pageId);
return pathname.replace(
`/applications/${application.id}/pages/${page.pageId}`,
replaceValue,
);
};
export function getQueryStringfromObject(
params: Record<string, string> = {},
): string {
const paramKeys = Object.keys(params);
const queryParams: string[] = [];
if (paramKeys) {
paramKeys.forEach((paramKey: string) => {
if (!isNil(params[paramKey])) {
const value = encodeURIComponent(params[paramKey]);
if (paramKey && value) {
queryParams.push(`${paramKey}=${value}`);
}
}
});
}
return queryParams.length ? "?" + queryParams.join("&") : "";
}
export const datasourcesEditorURL = (props: URLBuilderParams): string =>
urlBuilder.build({
...props,
suffix: "datasource",
});
export const datasourcesEditorIdURL = (
props: URLBuilderParams & {
datasourceId: string;
},
): string => {
return urlBuilder.build({
...props,
suffix: `datasource/${props.datasourceId}`,
});
};
export const jsCollectionIdURL = (
props: URLBuilderParams & {
collectionId: string;
// Pass a function name to set the cursor directly on the function
functionName?: string;
},
): string => {
return urlBuilder.build({
...props,
suffix: `jsObjects/${props.collectionId}`,
hash: props.functionName,
});
};
export const integrationEditorURL = (
props: URLBuilderParams & { selectedTab: string },
): string => {
const suffixPath = props.suffix ? `/${props.suffix}` : "";
return urlBuilder.build({
...props,
suffix: `datasources/${props.selectedTab}${suffixPath}`,
});
};
export const queryEditorIdURL = (
props: URLBuilderParams & {
queryId: string;
},
): string =>
urlBuilder.build({
...props,
suffix: `queries/${props.queryId}`,
});
export const apiEditorIdURL = (
props: URLBuilderParams & {
apiId: string;
},
): string =>
urlBuilder.build({
...props,
suffix: `api/${props.apiId}`,
});
export const curlImportPageURL = (props: URLBuilderParams): string =>
urlBuilder.build({
...props,
suffix: "api/curl/curl-import",
});
export const providerTemplatesURL = (
props: URLBuilderParams & {
providerId: string;
},
): string =>
urlBuilder.build({
...props,
suffix: `api/provider/${props.providerId}`,
});
export const saasEditorDatasourceIdURL = (
props: URLBuilderParams & {
pluginPackageName: string;
datasourceId: string;
},
): string =>
urlBuilder.build({
...props,
suffix: `saas/${props.pluginPackageName}/datasources/${props.datasourceId}`,
});
export const saasEditorApiIdURL = (
props: URLBuilderParams & {
pluginPackageName: string;
apiId: string;
},
): string =>
urlBuilder.build({
...props,
suffix: `saas/${props.pluginPackageName}/api/${props.apiId}`,
});
export const generateTemplateFormURL = (props: URLBuilderParams): string =>
urlBuilder.build({
...props,
suffix: `${GEN_TEMPLATE_URL}${GEN_TEMPLATE_FORM_ROUTE}`,
});
export const onboardingCheckListUrl = (props: URLBuilderParams): string =>
urlBuilder.build({
...props,
suffix: "checklist",
});
export const builderURL = (props: URLBuilderParams): string => {
return urlBuilder.build(props);
};
export const widgetURL = (
props: URLBuilderParams & { selectedWidgets: string[] },
) => {
return urlBuilder.build({
...props,
suffix: `widgets/${props.selectedWidgets.join(",")}`,
});
};
export const viewerURL = (props: URLBuilderParams): string => {
return urlBuilder.build(props, APP_MODE.PUBLISHED);
};
export function adminSettingsCategoryUrl({
category,
selected,
}: {
category: string;
selected?: string;
}) {
return `${ADMIN_SETTINGS_PATH}/${category}${selected ? "/" + selected : ""}`;
}
export const templateIdUrl = ({ id }: { id: string }): string =>
`${TEMPLATES_PATH}/${id}`;