## Description Updating generate page interaction to show it in a modal following the IDE 2.0 interaction pattern Fixes [#32952](https://github.com/appsmithorg/appsmith/issues/32952) ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11900113834> > Commit: 3903c44fe5a6c7db0d22d9cf982c28a1380f4546 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11900113834&attempt=2" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Mon, 18 Nov 2024 21:26:44 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced a modal for generating pages, enhancing user interaction. - Added new action types and constants for managing page generation processes. - Updated UI messages for clarity in the page generation context. - Improved handling of datasource selection and page generation in various components. - **Bug Fixes** - Improved error handling in various components to prevent silent failures. - **Refactor** - Streamlined routing logic by removing deprecated paths and functions. - Transitioned from direct navigation to modal-based interactions for page generation. - Enhanced control flow and error handling within components. - **Chores** - Updated import paths for better organization of action-related functions within the Redux architecture. - **Tests** - Enhanced test cases for CRUD operations, ensuring better validation and error handling. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
208 lines
4.8 KiB
TypeScript
208 lines
4.8 KiB
TypeScript
import {
|
|
ADD_PATH,
|
|
ADMIN_SETTINGS_PATH,
|
|
getViewerCustomPath,
|
|
getViewerPath,
|
|
TEMPLATES_PATH,
|
|
} from "constants/routes";
|
|
import { APP_MODE } from "entities/App";
|
|
import urlBuilder from "ee/entities/URLRedirect/URLAssembly";
|
|
import type { URLBuilderParams } from "ee/entities/URLRedirect/URLAssembly";
|
|
import type { Page } from "entities/Page";
|
|
import type { ApplicationPayload } from "entities/Application";
|
|
|
|
export const fillPathname = (
|
|
pathname: string,
|
|
application: ApplicationPayload,
|
|
page: Page,
|
|
) => {
|
|
const replaceValue = page.customSlug
|
|
? getViewerCustomPath(page.customSlug, page.basePageId)
|
|
: getViewerPath(application.slug, page.slug, page.basePageId);
|
|
|
|
return pathname.replace(
|
|
`/applications/${application.baseId}/pages/${page.basePageId}`,
|
|
replaceValue,
|
|
);
|
|
};
|
|
|
|
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 interface WithAddView {
|
|
add?: boolean;
|
|
}
|
|
|
|
export const jsCollectionIdURL = (
|
|
props: URLBuilderParams &
|
|
WithAddView & {
|
|
baseCollectionId: string;
|
|
// Pass a function name to set the cursor directly on the function
|
|
functionName?: string;
|
|
},
|
|
): string => {
|
|
return urlBuilder.build({
|
|
...props,
|
|
suffix: `jsObjects/${props.baseCollectionId}${props.add ? ADD_PATH : ""}`,
|
|
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 &
|
|
WithAddView & {
|
|
baseQueryId: string;
|
|
},
|
|
): string =>
|
|
urlBuilder.build({
|
|
...props,
|
|
suffix: `queries/${props.baseQueryId}${props.add ? ADD_PATH : ""}`,
|
|
});
|
|
|
|
export const apiEditorIdURL = (
|
|
props: URLBuilderParams &
|
|
WithAddView & {
|
|
baseApiId: string;
|
|
},
|
|
): string =>
|
|
urlBuilder.build({
|
|
...props,
|
|
suffix: `api/${props.baseApiId}${props.add ? ADD_PATH : ""}`,
|
|
});
|
|
|
|
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 &
|
|
WithAddView & {
|
|
pluginPackageName: string;
|
|
baseApiId: string;
|
|
},
|
|
): string =>
|
|
urlBuilder.build({
|
|
...props,
|
|
suffix: `saas/${props.pluginPackageName}/api/${props.baseApiId}${
|
|
props.add ? ADD_PATH : ""
|
|
}`,
|
|
});
|
|
|
|
export const onboardingCheckListUrl = (props: URLBuilderParams): string =>
|
|
urlBuilder.build({
|
|
...props,
|
|
suffix: "checklist",
|
|
});
|
|
|
|
export const builderURL = (props: URLBuilderParams): string => {
|
|
return urlBuilder.build(props);
|
|
};
|
|
export const globalAddURL = (props: URLBuilderParams): string => {
|
|
return urlBuilder.build({
|
|
...props,
|
|
suffix: "add",
|
|
});
|
|
};
|
|
|
|
export const widgetURL = (
|
|
props: URLBuilderParams & WithAddView & { selectedWidgets: string[] },
|
|
) => {
|
|
return urlBuilder.build({
|
|
...props,
|
|
suffix: `widgets/${props.selectedWidgets.join(",")}${
|
|
props.add ? ADD_PATH : ""
|
|
}`,
|
|
});
|
|
};
|
|
|
|
export const widgetListURL = (props: URLBuilderParams) => {
|
|
return urlBuilder.build({
|
|
...props,
|
|
suffix: `widgets`,
|
|
});
|
|
};
|
|
|
|
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}`;
|
|
|
|
export const jsCollectionListURL = (props: URLBuilderParams): string => {
|
|
return urlBuilder.build({
|
|
...props,
|
|
suffix: `jsObjects`,
|
|
});
|
|
};
|
|
|
|
export const jsCollectionAddURL = (props: URLBuilderParams): string => {
|
|
return urlBuilder.build({
|
|
...props,
|
|
suffix: "jsObjects/add",
|
|
});
|
|
};
|
|
|
|
export const queryListURL = (props: URLBuilderParams): string =>
|
|
urlBuilder.build({
|
|
...props,
|
|
suffix: `queries`,
|
|
});
|
|
|
|
export const queryAddURL = (props: URLBuilderParams): string =>
|
|
urlBuilder.build({
|
|
...props,
|
|
suffix: `queries/add`,
|
|
});
|
|
|
|
export const appLibrariesURL = (): string =>
|
|
urlBuilder.build({
|
|
suffix: "libraries",
|
|
});
|
|
export const appPackagesURL = (): string =>
|
|
urlBuilder.build({
|
|
suffix: "packages",
|
|
});
|