PromucFlow_constructor/app/client/src/ce/RouteBuilder.ts
Ankita Kinger 72eb2cd4cb
chore: Updating generate page interaction to show it in a modal following the IDE 2.0 interaction pattern (#37414)
## 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 -->
2024-11-19 12:05:10 +05:30

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",
});