## Description Widget selection is driven by URL changes. This would fix browser navigation for users as they can use browser back/forward buttons to travel across older contexts on Appsmith. > Fixing browser URL navigation for widgets Fixes #19571 Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual - Jest - Cypress ### Test Plan > Add Testsmith [test cases](https://github.com/appsmithorg/TestSmith/issues/2171) links that relate to this PR ### Issues raised during DP testing - [X] When a selected widget is below viewport and user refreshes the page, then the widget property pane is open but the page does not navigate to the selected widget https://loom.com/share/09f1eda2f02d474981a0d48e4a6419ec - [ ] Drop 2 widgets one at a time > Delete both the widgets > Now click on back button of the browser > Observe the url it shows the widget id in the URL but the canvas remains empty https://loom.com/share/53cae28a5d224e67b783c8ccf53745f5 Dev Response: This issue is valid but not a major inconvenience. We will try to track it and see if it needed to be addressed. Many other web tools do not handle such cases - [X] Canvas scrolls down when all widgets are selected. https://loom.com/share/c8a68dadcdb040779abd3a73bde2b06c - [X] Widget is not getting highlighted when added from the API editor page. Please refer to the attached video:-https://jiju8jbmwa.vmaker.com/record/IkwiAqFgafK9dVmu ## Checklist: ### Dev activity - [ ] My code follows the style guidelines of this project - [ ] 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 - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] 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 - [x] 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 --------- Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
196 lines
4.5 KiB
TypeScript
196 lines
4.5 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 {
|
|
ApplicationPayload,
|
|
Page,
|
|
} from "@appsmith/constants/ReduxActionConstants";
|
|
|
|
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) => {
|
|
const value = 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}`;
|