PromucFlow_constructor/app/client/src/actions/pageActions.tsx
rahulramesha 6cefc6dbea
feat: Undo/Redo (#6654)
* Scaffolding for undo-redo

* undo redo working Poc commit

* memory performance improvements by diffing

* dont run update on undo/redo"

* merging widget postion update and canvas bottom row update into one dsl update.

* fix tabs widget

* Visible updates per undo redo action (#6838)

Co-authored-by: Rahul R <rahulramesha@Rahuls-MacBook-Pro.local>

* resize atomic operation

* fix switch control state issue

* disallow undo/redo for snipping and comment mode

* disallow undo/redo for snipping and comment mode

* fix color picker issue in undo/redo

* add test for replayDSL

* option control fix, adding logs

* minor position change undo redo updates

* add test cases for replayHelpers

* property Upade visual change

* remove unused code

* global hot key jest test for undo redo

* Fixing batch updates on property change..

* add tests for toggle control in property pane

* unwanted utils.

* add tests for text control

* add tests for deletion

* add tests for dropping a new widget

* adding jest test for replayUtils

* add move widget tests

* add tests for color picker control

* add analytics for undo/redo

* add analytics for undo/redo

* tab addition atomic

* cypress tests for propertyPane, toasts and radiowidget optionControl

* replayDSL end of redo stack fix

* property update changes

* menu option control debounce input

* color picker empty undo fix

* fix cypress tests

* widget add/remove atomic

* revert alternative approach to handle atomic operations

* update replayDSL test

* add some comments

* addressing review comments

* flash color for property pane controls

* Fixing adding of tabs widget as well.

* code review comments.

* merging widget postion update and canvas bottom row update into one dsl update.

* fix ordering of tabs property control

* meta property update canvas min height.

* fixing failed specs.

* Fixing entity explorer update on deleting tab from entity explorer.

* address review comments and minor property update changes

* fixing failing tests

* merge conflicts

* changes to cater widget api.

* fix suggested widget table issue

* draggable list for undo redo

* fix widget name focus

* excluding canvas updates.

* fixing codeEditor update on propertySection collapse

* fixed failing test case

Co-authored-by: Abhinav Jha <abhinav@appsmith.com>
Co-authored-by: Rahul R <rahulramesha@Rahuls-MacBook-Pro.local>
Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain>
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
2021-09-21 13:25:56 +05:30

455 lines
9.1 KiB
TypeScript

import { WidgetType } from "constants/WidgetConstants";
import {
EvaluationReduxAction,
ReduxAction,
ReduxActionTypes,
ReduxActionWithoutPayload,
UpdateCanvasPayload,
ReduxActionErrorTypes,
} from "constants/ReduxActionConstants";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { WidgetOperation } from "widgets/BaseWidget";
import { FetchPageRequest, PageLayout, SavePageResponse } from "api/PageApi";
import { UrlDataState } from "reducers/entityReducers/appReducer";
import { APP_MODE } from "entities/App";
import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
import { GenerateTemplatePageRequest } from "../api/PageApi";
import {
WidgetReduxActionTypes,
ReplayReduxActionTypes,
} from "../constants/ReduxActionConstants";
export interface FetchPageListPayload {
applicationId: string;
mode: APP_MODE;
}
export interface ClonePageActionPayload {
id: string;
blockNavigation?: boolean;
}
export interface CreatePageActionPayload {
applicationId: string;
name: string;
layouts: Partial<PageLayout>[];
blockNavigation?: boolean;
}
export const fetchPageList = (
applicationId: string,
mode: APP_MODE,
): ReduxAction<FetchPageListPayload> => {
return {
type: ReduxActionTypes.FETCH_PAGE_LIST_INIT,
payload: {
applicationId,
mode,
},
};
};
export const fetchPage = (
pageId: string,
isFirstLoad = false,
): ReduxAction<FetchPageRequest> => {
return {
type: ReduxActionTypes.FETCH_PAGE_INIT,
payload: {
id: pageId,
isFirstLoad,
},
};
};
export const fetchPublishedPage = (pageId: string, bustCache = false) => ({
type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_INIT,
payload: {
pageId,
bustCache,
},
});
export const fetchPageSuccess = (
postEvalActions: Array<ReduxAction<unknown> | ReduxActionWithoutPayload>,
): EvaluationReduxAction<undefined> => {
return {
type: ReduxActionTypes.FETCH_PAGE_SUCCESS,
postEvalActions,
payload: undefined,
};
};
export const fetchPublishedPageSuccess = (
postEvalActions: Array<ReduxAction<unknown> | ReduxActionWithoutPayload>,
): EvaluationReduxAction<undefined> => ({
type: ReduxActionTypes.FETCH_PUBLISHED_PAGE_SUCCESS,
postEvalActions,
payload: undefined,
});
export const updateCurrentPage = (id: string) => ({
type: ReduxActionTypes.SWITCH_CURRENT_PAGE_ID,
payload: { id },
});
export const initCanvasLayout = (
payload: UpdateCanvasPayload,
): ReduxAction<UpdateCanvasPayload> => {
return {
type: ReduxActionTypes.INIT_CANVAS_LAYOUT,
payload,
};
};
export const setLastUpdatedTime = (payload: number): ReduxAction<number> => ({
type: ReduxActionTypes.SET_LAST_UPDATED_TIME,
payload,
});
export const savePageSuccess = (payload: SavePageResponse) => {
return {
type: ReduxActionTypes.SAVE_PAGE_SUCCESS,
payload,
};
};
export const updateWidgetNameSuccess = () => {
return {
type: ReduxActionTypes.UPDATE_WIDGET_NAME_SUCCESS,
};
};
export const deletePageSuccess = () => {
return {
type: ReduxActionTypes.DELETE_PAGE_SUCCESS,
};
};
export const updateAndSaveLayout = (
widgets: CanvasWidgetsReduxState,
isRetry?: boolean,
shouldReplay?: boolean,
) => {
return {
type: ReduxActionTypes.UPDATE_LAYOUT,
payload: { widgets, isRetry, shouldReplay },
};
};
export const saveLayout = (isRetry?: boolean) => {
return {
type: ReduxActionTypes.SAVE_PAGE_INIT,
payload: { isRetry },
};
};
export const createPage = (
applicationId: string,
pageName: string,
layouts: Partial<PageLayout>[],
blockNavigation?: boolean,
) => {
AnalyticsUtil.logEvent("CREATE_PAGE", {
pageName,
});
return {
type: ReduxActionTypes.CREATE_PAGE_INIT,
payload: {
applicationId,
name: pageName,
layouts,
blockNavigation,
},
};
};
/**
* action to clone page
*
* @param pageId
* @param blockNavigation
* @returns
*/
export const clonePageInit = (pageId: string, blockNavigation?: boolean) => {
return {
type: ReduxActionTypes.CLONE_PAGE_INIT,
payload: {
id: pageId,
blockNavigation,
},
};
};
export const clonePageSuccess = (
pageId: string,
pageName: string,
layoutId: string,
) => {
return {
type: ReduxActionTypes.CLONE_PAGE_SUCCESS,
payload: {
pageId,
pageName,
layoutId,
},
};
};
export const updatePage = (id: string, name: string, isHidden: boolean) => {
return {
type: ReduxActionTypes.UPDATE_PAGE_INIT,
payload: {
id,
name,
isHidden,
},
};
};
export type WidgetAddChild = {
widgetId: string;
widgetName?: string;
type: WidgetType;
leftColumn: number;
topRow: number;
columns: number;
rows: number;
parentRowSpace: number;
parentColumnSpace: number;
newWidgetId: string;
tabId: string;
props?: Record<string, any>;
};
export type WidgetRemoveChild = {
widgetId: string;
childWidgetId: string;
};
export type WidgetDelete = {
widgetId?: string;
parentId?: string;
disallowUndo?: boolean;
isShortcut?: boolean;
};
export type MultipleWidgetDeletePayload = {
widgetIds: string[];
disallowUndo?: boolean;
isShortcut?: boolean;
};
export type WidgetResize = {
widgetId: string;
parentId: string;
leftColumn: number;
rightColumn: number;
topRow: number;
bottomRow: number;
};
export type ModalWidgetResize = {
height: number;
width: number;
widgetId: string;
canvasWidgetId: string;
};
export type WidgetAddChildren = {
widgetId: string;
children: Array<{
type: WidgetType;
widgetId: string;
parentId: string;
parentRowSpace: number;
parentColumnSpace: number;
leftColumn: number;
rightColumn: number;
topRow: number;
bottomRow: number;
isLoading: boolean;
}>;
};
export type WidgetUpdateProperty = {
widgetId: string;
propertyPath: string;
propertyValue: any;
};
export const updateWidget = (
operation: WidgetOperation,
widgetId: string,
payload: any,
): ReduxAction<
| WidgetAddChild
| WidgetResize
| WidgetDelete
| WidgetAddChildren
| WidgetUpdateProperty
> => {
return {
type: WidgetReduxActionTypes["WIDGET_" + operation],
payload: { widgetId, ...payload },
};
};
export const setUrlData = (
payload: UrlDataState,
): ReduxAction<UrlDataState> => {
return {
type: ReduxActionTypes.SET_URL_DATA,
payload,
};
};
export const setAppMode = (payload: APP_MODE): ReduxAction<APP_MODE> => {
return {
type: ReduxActionTypes.SET_APP_MODE,
payload,
};
};
export const updateAppTransientStore = (
payload: Record<string, unknown>,
): ReduxAction<Record<string, unknown>> => ({
type: ReduxActionTypes.UPDATE_APP_TRANSIENT_STORE,
payload,
});
export const updateAppPersistentStore = (
payload: Record<string, unknown>,
): ReduxAction<Record<string, unknown>> => {
return {
type: ReduxActionTypes.UPDATE_APP_PERSISTENT_STORE,
payload,
};
};
export interface ReduxActionWithExtraParams<T> extends ReduxAction<T> {
extraParams: Record<any, any>;
}
export type GenerateCRUDSuccess = {
page: {
layouts: Array<any>;
id: string;
name: string;
isDefault?: boolean;
};
isNewPage: boolean;
};
export const generateTemplateSuccess = (payload: GenerateCRUDSuccess) => {
return {
type: ReduxActionTypes.GENERATE_TEMPLATE_PAGE_SUCCESS,
payload,
};
};
export const generateTemplateError = () => {
return {
type: ReduxActionErrorTypes.GENERATE_TEMPLATE_PAGE_ERROR,
};
};
export const generateTemplateToUpdatePage = ({
applicationId,
columns,
datasourceId,
mode,
pageId,
pluginSpecificParams,
searchColumn,
tableName,
}: GenerateTemplatePageRequest): ReduxActionWithExtraParams<GenerateTemplatePageRequest> => {
return {
type: ReduxActionTypes.GENERATE_TEMPLATE_PAGE_INIT,
payload: {
pageId,
tableName,
datasourceId,
applicationId,
columns,
searchColumn,
pluginSpecificParams,
},
extraParams: {
mode,
},
};
};
export function undoAction() {
return {
type: ReduxActionTypes.UNDO_REDO_OPERATION,
payload: {
operation: ReplayReduxActionTypes.UNDO,
},
};
}
export function redoAction() {
return {
type: ReduxActionTypes.UNDO_REDO_OPERATION,
payload: {
operation: ReplayReduxActionTypes.REDO,
},
};
}
/**
* action for delete page
*
* @param pageId
* @param pageName
* @returns
*/
export const deletePage = (pageId: string) => {
return {
type: ReduxActionTypes.DELETE_PAGE_INIT,
payload: {
id: pageId,
},
};
};
/**
* action for set page as default
*
* @param pageId
* @param applicationId
* @returns
*/
export const setPageAsDefault = (pageId: string, applicationId?: string) => {
return {
type: ReduxActionTypes.SET_DEFAULT_APPLICATION_PAGE_INIT,
payload: {
id: pageId,
applicationId,
},
};
};
/**
* action for updating order of a page
*
* @param pageId
* @param applicationId
* @returns
*/
export const setPageOrder = (
applicationId: string,
pageId: string,
order: number,
) => {
return {
type: ReduxActionTypes.SET_PAGE_ORDER_INIT,
payload: {
pageId: pageId,
order: order,
applicationId,
},
};
};