Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Revert "Merge branch 'feature/server-side-pagination' into 'release'"

Browse Source 
This reverts merge request !271
This commit is contained in:
Satbir Singh 2020-02-04 09:41:12 +00:00
parent 60726a69b5
commit 6987b392d7
18 changed files with 80 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/client/src/actions/actionActions.ts
View File

@ -1,9 +1,9 @@
import { RestAction, PaginationField } from "api/ActionAPI";
import { import {
ReduxActionTypes, ReduxActionTypes,
ReduxAction, ReduxAction,
ReduxActionErrorTypes, ReduxActionErrorTypes,
} from "constants/ReduxActionConstants"; } from "constants/ReduxActionConstants";
import { RestAction } from "api/ActionAPI";
export const createActionRequest = (payload: Partial<RestAction>) => { export const createActionRequest = (payload: Partial<RestAction>) => {
return { return {
@ -32,13 +32,10 @@ export const fetchActions = (
}; };
}; };
export const runApiAction = (id: string, paginationField?: PaginationField) => { export const runApiAction = (id: string) => {
return { return {
type: ReduxActionTypes.RUN_API_REQUEST, type: ReduxActionTypes.RUN_API_REQUEST,
payload: { payload: id,
id: id,
paginationField: paginationField,
},
}; };
}; };

13
app/client/src/actions/widgetActions.tsx
View File

@ -3,8 +3,6 @@ import {
ReduxAction, ReduxAction,
ReduxActionErrorTypes, ReduxActionErrorTypes,
} from "constants/ReduxActionConstants"; } from "constants/ReduxActionConstants";
import { PaginationField } from "api/ActionAPI";
import { import {
ActionPayload, ActionPayload,
ExecuteErrorPayload, ExecuteErrorPayload,
@ -13,17 +11,10 @@ import {
export const executeAction = ( export const executeAction = (
actionPayloads: ActionPayload[], actionPayloads: ActionPayload[],
paginationField?: PaginationField, ): ReduxAction<ActionPayload[]> => {
): ReduxAction<{
actions: ActionPayload[];
paginationField: PaginationField;
}> => {
return { return {
type: ReduxActionTypes.EXECUTE_ACTION, type: ReduxActionTypes.EXECUTE_ACTION,
payload: { payload: actionPayloads,
actions: actionPayloads,
paginationField: paginationField,
},
}; };
}; };

4
app/client/src/api/ActionAPI.tsx
View File

@ -38,7 +38,6 @@ export interface APIConfigRequest {
path: string; path: string;
body: JSON | string | Record<string, any> | null; body: JSON | string | Record<string, any> | null;
queryParameters: Property[]; queryParameters: Property[];
isPaginated: boolean;
} }
export interface QueryConfig { export interface QueryConfig {
@ -61,12 +60,9 @@ export interface RestAction {
cacheResponse?: string; cacheResponse?: string;
} }
export type PaginationField = "PREV" | "NEXT" | undefined;
export interface ExecuteActionRequest extends APIRequest { export interface ExecuteActionRequest extends APIRequest {
action: Pick<RestAction, "id"> | Omit<RestAction, "id">; action: Pick<RestAction, "id"> | Omit<RestAction, "id">;
params?: Property[]; params?: Property[];
paginationField: PaginationField;
} }
export interface ExecuteActionResponse extends ApiResponse { export interface ExecuteActionResponse extends ApiResponse {

73
app/client/src/components/designSystems/appsmith/TablePagination.tsx
View File

@ -1,73 +0,0 @@
import React from "react";
import { Icon, IconName } from "@blueprintjs/core";
import styled from "styled-components";
const PagerContainer = styled.div<{
visible: boolean;
}>`
&&&&& {
height: 49px;
display: ${props => (props.visible ? "flex" : "none")};
}
`;
function PagerIcon(props: { icon: IconName; onClick: Function }) {
return (
<Icon
className={"e-next e-icons e-icon-next e-nextpage"}
style={{
padding: 14,
marginTop: 5,
}}
icon={props.icon}
iconSize={14}
onClick={props.onClick as any}
></Icon>
);
}
interface PagerProps {
pageNo: number;
prevPageClick: Function;
nextPageClick: Function;
visible: boolean;
}
const PageWrapper = styled.div`
&&&&& {
width: 140px;
display: flex;
margin: 0 auto;
}
`;
export function TablePagination(props: PagerProps) {
return (
<PagerContainer
className={"e-control e-pager e-lib"}
visible={props.visible}
>
<PageWrapper>
<PagerIcon
icon={"chevron-left"}
onClick={props.prevPageClick}
></PagerIcon>
<div
className={"e-numericcontainer"}
style={{
marginTop: 12,
marginLeft: 6,
}}
>
<a
className={"e-link e-numericitem e-spacing e-currentitem e-active"}
>
{props.pageNo}
</a>
</div>
<PagerIcon
icon={"chevron-right"}
onClick={props.nextPageClick}
></PagerIcon>
</PageWrapper>
</PagerContainer>
);
}

23
app/client/src/components/designSystems/blueprint/Checkbox.tsx
View File

@ -1,4 +1,4 @@
import React, { FormEvent } from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { import {
Checkbox as BlueprintCheckbox, Checkbox as BlueprintCheckbox,
@ -13,12 +13,6 @@ import {
export type CheckboxProps = ICheckboxProps & { export type CheckboxProps = ICheckboxProps & {
intent: Intent; intent: Intent;
align: "left" | "right"; align: "left" | "right";
input?: {
onChange?: (value: boolean) => void;
value?: boolean;
checked?: boolean;
};
label: string;
}; };
export const StyledCheckbox = styled(BlueprintCheckbox)<CheckboxProps>` export const StyledCheckbox = styled(BlueprintCheckbox)<CheckboxProps>`
@ -41,20 +35,7 @@ export const StyledCheckbox = styled(BlueprintCheckbox)<CheckboxProps>`
`; `;
export const Checkbox = (props: CheckboxProps) => { export const Checkbox = (props: CheckboxProps) => {
const handleChange = (e: any) => { return <StyledCheckbox {...props} alignIndicator={props.align} />;
props.input &&
props.input.onChange &&
props.input.onChange(e.target.checked);
};
return (
<StyledCheckbox
{...props}
alignIndicator={props.align}
onChange={handleChange}
checked={props.input ? !!props.input.checked : false}
label={props.label}
/>
);
}; };
export default Checkbox; export default Checkbox;

37
app/client/src/components/designSystems/syncfusion/TableComponent.tsx
View File

@ -21,7 +21,6 @@ import styled from "constants/DefaultTheme";
import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl"; import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
import { ActionPayload } from "constants/ActionConstants"; import { ActionPayload } from "constants/ActionConstants";
import { Classes } from "@blueprintjs/core"; import { Classes } from "@blueprintjs/core";
import { TablePagination } from "../appsmith/TablePagination";
export interface TableComponentProps { export interface TableComponentProps {
data: object[]; data: object[];
@ -33,28 +32,13 @@ export interface TableComponentProps {
columnActions?: ColumnAction[]; columnActions?: ColumnAction[];
onCommandClick: (actions: ActionPayload[]) => void; onCommandClick: (actions: ActionPayload[]) => void;
disableDrag: (disable: boolean) => void; disableDrag: (disable: boolean) => void;
nextPageClick: Function;
prevPageClick: Function;
pageNo: number;
serverSidePaginationEnabled: boolean;
} }
const StyledGridComponent = styled(GridComponent)` const StyledGridComponent = styled(GridComponent)`
&&& { .e-altrow {
height: calc(100% - 49px); background-color: #fafafa;
.e-altrow {
background-color: #fafafa;
}
.e-gridcontent {
height: calc(100% - 50px);
overflow: auto;
}
} }
`; `;
const TableContainer = styled.div`
height: 100%;
`;
const settings: SelectionSettingsModel = { const settings: SelectionSettingsModel = {
type: "Multiple", type: "Multiple",
}; };
@ -180,15 +164,15 @@ const TableComponent = memo(
} }
return ( return (
<TableContainer className={props.isLoading ? Classes.SKELETON : ""}> <div className={props.isLoading ? Classes.SKELETON : ""}>
<StyledGridComponent <StyledGridComponent
selectionSettings={settings} selectionSettings={settings}
dataSource={props.data} dataSource={props.data}
rowSelected={rowSelected} rowSelected={rowSelected}
ref={grid} ref={grid}
width={"100%"} width={"100%"}
allowPaging={!props.serverSidePaginationEnabled}
height={"100%"} height={"100%"}
allowPaging={true}
allowReordering={true} allowReordering={true}
allowResizing={true} allowResizing={true}
showColumnMenu={true} showColumnMenu={true}
@ -196,6 +180,7 @@ const TableComponent = memo(
columnDrop={columnDrop} columnDrop={columnDrop}
commandClick={onCommandClick} commandClick={onCommandClick}
columnMenuOpen={columnMenuOpen} columnMenuOpen={columnMenuOpen}
// queryCellInfo={customizeCell}
> >
<Inject <Inject
services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]} services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]}
@ -215,13 +200,7 @@ const TableComponent = memo(
)} )}
</ColumnsDirective> </ColumnsDirective>
</StyledGridComponent> </StyledGridComponent>
<TablePagination </div>
visible={props.serverSidePaginationEnabled}
pageNo={props.pageNo}
prevPageClick={props.prevPageClick}
nextPageClick={props.nextPageClick}
></TablePagination>
</TableContainer>
); );
}, },
(prevProps, nextProps) => { (prevProps, nextProps) => {
@ -230,9 +209,7 @@ const TableComponent = memo(
JSON.stringify(nextProps.data) !== JSON.stringify(prevProps.data) || JSON.stringify(nextProps.data) !== JSON.stringify(prevProps.data) ||
nextProps.height !== prevProps.height || nextProps.height !== prevProps.height ||
JSON.stringify(nextProps.columnActions) !== JSON.stringify(nextProps.columnActions) !==
JSON.stringify(prevProps.columnActions) || JSON.stringify(prevProps.columnActions);
nextProps.serverSidePaginationEnabled !==
prevProps.serverSidePaginationEnabled;
return !propsNotEqual; return !propsNotEqual;
}, },

2
app/client/src/components/editorComponents/ApiResponseView.tsx
View File

@ -16,7 +16,7 @@ import { getActionResponses } from "selectors/entitiesSelector";
const ResponseWrapper = styled.div` const ResponseWrapper = styled.div`
position: relative; position: relative;
flex: 1; flex: 4;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
`; `;

24
app/client/src/components/editorComponents/EditorContextProvider.tsx
View File

@ -13,17 +13,10 @@ import { ActionPayload } from "constants/ActionConstants";
import { RenderModes } from "constants/WidgetConstants"; import { RenderModes } from "constants/WidgetConstants";
import { OccupiedSpace } from "constants/editorConstants"; import { OccupiedSpace } from "constants/editorConstants";
import { import { getOccupiedSpaces } from "selectors/editorSelectors";
getOccupiedSpaces,
getPaginatedWidgets,
} from "selectors/editorSelectors";
import { PaginationField, RestAction } from "api/ActionAPI";
export type EditorContextType = { export type EditorContextType = {
executeAction?: ( executeAction?: (actionPayloads: ActionPayload[]) => void;
actionPayloads: ActionPayload[],
paginationField?: PaginationField,
) => void;
updateWidget?: ( updateWidget?: (
operation: WidgetOperation, operation: WidgetOperation,
widgetId: string, widgetId: string,
@ -36,7 +29,6 @@ export type EditorContextType = {
) => void; ) => void;
disableDrag?: (disable: boolean) => void; disableDrag?: (disable: boolean) => void;
occupiedSpaces?: { [containerWidgetId: string]: OccupiedSpace[] }; occupiedSpaces?: { [containerWidgetId: string]: OccupiedSpace[] };
paginatedWidgets?: string[];
}; };
export const EditorContext: Context<EditorContextType> = createContext({}); export const EditorContext: Context<EditorContextType> = createContext({});
@ -50,7 +42,6 @@ const EditorContextProvider = (props: EditorContextProviderProps) => {
updateWidget, updateWidget,
updateWidgetProperty, updateWidgetProperty,
occupiedSpaces, occupiedSpaces,
paginatedWidgets,
disableDrag, disableDrag,
children, children,
} = props; } = props;
@ -61,7 +52,6 @@ const EditorContextProvider = (props: EditorContextProviderProps) => {
updateWidget, updateWidget,
updateWidgetProperty, updateWidgetProperty,
occupiedSpaces, occupiedSpaces,
paginatedWidgets,
disableDrag, disableDrag,
}} }}
> >
@ -72,10 +62,6 @@ const EditorContextProvider = (props: EditorContextProviderProps) => {
const mapStateToProps = (state: AppState) => { const mapStateToProps = (state: AppState) => {
return { return {
paginatedWidgets: getPaginatedWidgets(
state.entities.actions.map(action => action.config),
state.entities.canvasWidgets,
),
occupiedSpaces: getOccupiedSpaces(state), occupiedSpaces: getOccupiedSpaces(state),
}; };
}; };
@ -95,10 +81,8 @@ const mapDispatchToProps = (dispatch: any) => {
RenderModes.CANVAS, RenderModes.CANVAS,
), ),
), ),
executeAction: ( executeAction: (actionPayloads: ActionPayload[]) =>
actionPayloads: ActionPayload[], dispatch(executeAction(actionPayloads)),
paginationField?: PaginationField,
) => dispatch(executeAction(actionPayloads, paginationField)),
updateWidget: ( updateWidget: (
operation: WidgetOperation, operation: WidgetOperation,
widgetId: string, widgetId: string,

5
app/client/src/components/editorComponents/form/fields/CheckboxField.tsx
View File

@ -3,11 +3,8 @@ import { Field, BaseFieldProps } from "redux-form";
import Checkbox, { import Checkbox, {
CheckboxProps, CheckboxProps,
} from "components/designSystems/blueprint/Checkbox"; } from "components/designSystems/blueprint/Checkbox";
export const CheckboxField = (props: BaseFieldProps & CheckboxProps) => { export const CheckboxField = (props: BaseFieldProps & CheckboxProps) => {
return ( return <Field type="checkbox" component={Checkbox} {...props} />;
<Field type="checkbox" component={Checkbox} name={props.name} {...props} />
);
}; };
export default CheckboxField; export default CheckboxField;

4
app/client/src/index.css
View File

@ -118,7 +118,3 @@ div.bp3-popover-arrow {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.display-none {
display: none;
}

7
app/client/src/pages/AppViewer/index.tsx
View File

@ -27,7 +27,6 @@ import { RenderModes } from "constants/WidgetConstants";
import { EditorContext } from "components/editorComponents/EditorContextProvider"; import { EditorContext } from "components/editorComponents/EditorContextProvider";
import AppViewerPageContainer from "./AppViewerPageContainer"; import AppViewerPageContainer from "./AppViewerPageContainer";
import AppViewerSideNavWrapper from "./viewer/AppViewerSideNavWrapper"; import AppViewerSideNavWrapper from "./viewer/AppViewerSideNavWrapper";
import { PaginationField } from "api/ActionAPI";
const AppViewWrapper = styled.div` const AppViewWrapper = styled.div`
margin-top: ${props => props.theme.headerHeight}; margin-top: ${props => props.theme.headerHeight};
@ -114,10 +113,8 @@ const mapStateToProps = (state: AppState) => ({
}); });
const mapDispatchToProps = (dispatch: any) => ({ const mapDispatchToProps = (dispatch: any) => ({
executeAction: ( executeAction: (actionPayloads: ActionPayload[]) =>
actionPayloads: ActionPayload[], dispatch(executeAction(actionPayloads)),
paginationField?: PaginationField,
) => dispatch(executeAction(actionPayloads, paginationField)),
updateWidgetProperty: ( updateWidgetProperty: (
widgetId: string, widgetId: string,
propertyName: string, propertyName: string,

81
app/client/src/pages/Editor/APIEditor/Form.tsx
View File

@ -5,7 +5,7 @@ import styled from "styled-components";
import FormLabel from "components/editorComponents/FormLabel"; import FormLabel from "components/editorComponents/FormLabel";
import FormRow from "components/editorComponents/FormRow"; import FormRow from "components/editorComponents/FormRow";
import { BaseButton } from "components/designSystems/blueprint/ButtonComponent"; import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
import { RestAction, PaginationField } from "api/ActionAPI"; import { RestAction } from "api/ActionAPI";
import TextField from "components/editorComponents/form/fields/TextField"; import TextField from "components/editorComponents/form/fields/TextField";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField"; import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import DropdownField from "components/editorComponents/form/fields/DropdownField"; import DropdownField from "components/editorComponents/form/fields/DropdownField";
@ -15,8 +15,6 @@ import ApiResponseView from "components/editorComponents/ApiResponseView";
import { API_EDITOR_FORM_NAME } from "constants/forms"; import { API_EDITOR_FORM_NAME } from "constants/forms";
import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen"; import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
import { FormIcons } from "icons/FormIcons"; import { FormIcons } from "icons/FormIcons";
import { BaseTabbedView } from "components/designSystems/appsmith/TabbedView";
import Pagination from "./Pagination";
const Form = styled.form` const Form = styled.form`
display: flex; display: flex;
@ -77,18 +75,13 @@ const DatasourceWrapper = styled.div`
max-width: 320px; max-width: 320px;
`; `;
const TabbedViewContainer = styled.div`
flex: 1;
padding-top: 12px;
`;
interface APIFormProps { interface APIFormProps {
pluginId: string; pluginId: string;
allowSave: boolean; allowSave: boolean;
allowPostBody: boolean; allowPostBody: boolean;
onSubmit: FormSubmitHandler<RestAction>; onSubmit: FormSubmitHandler<RestAction>;
onSaveClick: () => void; onSaveClick: () => void;
onRunClick: (paginationField?: PaginationField) => void; onRunClick: () => void;
onDeleteClick: () => void; onDeleteClick: () => void;
isSaving: boolean; isSaving: boolean;
isRunning: boolean; isRunning: boolean;
@ -130,9 +123,7 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
<ActionButton <ActionButton
text="Run" text="Run"
accent="secondary" accent="secondary"
onClick={() => { onClick={onRunClick}
onRunClick();
}}
loading={isRunning} loading={isRunning}
/> />
<ActionButton <ActionButton
@ -162,49 +153,29 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
</FormRow> </FormRow>
</MainConfiguration> </MainConfiguration>
<SecondaryWrapper> <SecondaryWrapper>
<TabbedViewContainer> <RequestParamsWrapper>
<BaseTabbedView <KeyValueFieldArray
tabs={[ name="actionConfiguration.headers"
{ label="Headers"
key: "apiInput", />
title: "API Input", <KeyValueFieldArray
panelComponent: ( name="actionConfiguration.queryParameters"
<RequestParamsWrapper> label="Params"
<KeyValueFieldArray />
name="actionConfiguration.headers" {allowPostBody && (
label="Headers" <React.Fragment>
/> <FormLabel>{"Post Body"}</FormLabel>
<KeyValueFieldArray <JSONEditorFieldWrapper>
name="actionConfiguration.queryParameters" <DynamicTextField
label="Params" name="actionConfiguration.body"
/> height={300}
{allowPostBody && ( showLineNumbers
<React.Fragment> allowTabIndent
<FormLabel>{"Post Body"}</FormLabel> />
<JSONEditorFieldWrapper> </JSONEditorFieldWrapper>
<DynamicTextField </React.Fragment>
name="actionConfiguration.body" )}
height={300} </RequestParamsWrapper>
showLineNumbers
allowTabIndent
/>
</JSONEditorFieldWrapper>
</React.Fragment>
)}
</RequestParamsWrapper>
),
},
{
key: "pagination",
title: "Pagination",
panelComponent: (
<Pagination onTestClick={props.onRunClick}></Pagination>
),
},
]}
></BaseTabbedView>
</TabbedViewContainer>
<ApiResponseView /> <ApiResponseView />
</SecondaryWrapper> </SecondaryWrapper>
</Form> </Form>

47
app/client/src/pages/Editor/APIEditor/Pagination.tsx
View File

@ -1,47 +0,0 @@
import React from "react";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import { Button } from "@blueprintjs/core";
import styled from "constants/DefaultTheme";
import CheckboxField from "components/editorComponents/form/fields/CheckboxField";
interface PaginationProps {
onTestClick: Function;
}
const PaginationFieldWrapper = styled.div`
display: flex;
`;
export default function Pagination(props: PaginationProps) {
return (
<div>
<div>
<CheckboxField
name="actionConfiguration.isPaginated"
intent={"primary"}
align={"left"}
label={"Is Paginated?"}
></CheckboxField>
</div>
<label>Previous url</label>
<PaginationFieldWrapper>
<DynamicTextField name="actionConfiguration.prev" />
<Button
onClick={() => {
props.onTestClick("PREV");
}}
text={"Test"}
rightIcon={"play"}
></Button>
</PaginationFieldWrapper>
<label>Next url</label>
<PaginationFieldWrapper>
<DynamicTextField name="actionConfiguration.next" />
<Button
onClick={() => {
props.onTestClick("NEXT");
}}
text={"Test"}
rightIcon={"play"}
></Button>
</PaginationFieldWrapper>
</div>
);
}

11
app/client/src/pages/Editor/APIEditor/index.tsx
View File

@ -8,7 +8,7 @@ import {
deleteAction, deleteAction,
updateAction, updateAction,
} from "actions/actionActions"; } from "actions/actionActions";
import { RestAction, PaginationField } from "api/ActionAPI"; import { RestAction } from "api/ActionAPI";
import { AppState } from "reducers"; import { AppState } from "reducers";
import { RouteComponentProps } from "react-router"; import { RouteComponentProps } from "react-router";
import { API_EDITOR_FORM_NAME } from "constants/forms"; import { API_EDITOR_FORM_NAME } from "constants/forms";
@ -28,7 +28,7 @@ interface ReduxStateProps {
interface ReduxActionProps { interface ReduxActionProps {
submitForm: (name: string) => void; submitForm: (name: string) => void;
createAction: (values: RestAction) => void; createAction: (values: RestAction) => void;
runAction: (id: string, paginationField: PaginationField) => void; runAction: (id: string) => void;
deleteAction: (id: string) => void; deleteAction: (id: string) => void;
updateAction: (data: RestAction) => void; updateAction: (data: RestAction) => void;
} }
@ -57,8 +57,8 @@ class ApiEditor extends React.Component<Props> {
handleDeleteClick = () => { handleDeleteClick = () => {
this.props.deleteAction(this.props.match.params.apiId); this.props.deleteAction(this.props.match.params.apiId);
}; };
handleRunClick = (paginationField?: PaginationField) => { handleRunClick = () => {
this.props.runAction(this.props.match.params.apiId, paginationField); this.props.runAction(this.props.match.params.apiId);
}; };
render() { render() {
@ -112,8 +112,7 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({
const mapDispatchToProps = (dispatch: any): ReduxActionProps => ({ const mapDispatchToProps = (dispatch: any): ReduxActionProps => ({
submitForm: (name: string) => dispatch(submit(name)), submitForm: (name: string) => dispatch(submit(name)),
createAction: (action: RestAction) => dispatch(createActionRequest(action)), createAction: (action: RestAction) => dispatch(createActionRequest(action)),
runAction: (id: string, paginationField: PaginationField) => runAction: (id: string) => dispatch(runApiAction(id)),
dispatch(runApiAction(id, paginationField)),
deleteAction: (id: string) => dispatch(deleteAction({ id })), deleteAction: (id: string) => dispatch(deleteAction({ id })),
updateAction: (data: RestAction) => dispatch(updateAction({ data })), updateAction: (data: RestAction) => dispatch(updateAction({ data })),
}); });

60
app/client/src/sagas/ActionSagas.ts
View File

@ -25,7 +25,6 @@ import ActionAPI, {
ExecuteActionRequest, ExecuteActionRequest,
Property, Property,
RestAction, RestAction,
PaginationField,
} from "api/ActionAPI"; } from "api/ActionAPI";
import { AppState } from "reducers"; import { AppState } from "reducers";
import _ from "lodash"; import _ from "lodash";
@ -125,10 +124,7 @@ function* executeJSActionSaga(jsAction: ExecuteJSActionPayload) {
}); });
} }
export function* executeAPIQueryActionSaga( export function* executeAPIQueryActionSaga(apiAction: ActionPayload) {
apiAction: ActionPayload,
paginationField: PaginationField,
) {
try { try {
const api: PageAction = yield select(getAction, apiAction.actionId); const api: PageAction = yield select(getAction, apiAction.actionId);
if (!api) { if (!api) {
@ -144,7 +140,6 @@ export function* executeAPIQueryActionSaga(
const executeActionRequest: ExecuteActionRequest = { const executeActionRequest: ExecuteActionRequest = {
action: { id: apiAction.actionId }, action: { id: apiAction.actionId },
params, params,
paginationField: paginationField,
}; };
const response: ActionApiResponse = yield ActionAPI.executeAction( const response: ActionApiResponse = yield ActionAPI.executeAction(
executeActionRequest, executeActionRequest,
@ -207,10 +202,7 @@ function validateActionPayload(actionPayload: ActionPayload) {
return validation; return validation;
} }
export function* executeActionSaga( export function* executeActionSaga(actionPayloads: ActionPayload[]): any {
actionPayloads: ActionPayload[],
paginationField: PaginationField,
): any {
yield all( yield all(
_.map(actionPayloads, (actionPayload: ActionPayload) => { _.map(actionPayloads, (actionPayload: ActionPayload) => {
const actionValidation = validateActionPayload(actionPayload); const actionValidation = validateActionPayload(actionPayload);
@ -221,17 +213,9 @@ export function* executeActionSaga(
switch (actionPayload.actionType) { switch (actionPayload.actionType) {
case "API": case "API":
return call( return call(executeAPIQueryActionSaga, actionPayload);
executeAPIQueryActionSaga,
actionPayload,
paginationField,
);
case "QUERY": case "QUERY":
return call( return call(executeAPIQueryActionSaga, actionPayload);
executeAPIQueryActionSaga,
actionPayload,
paginationField,
);
case "JS_FUNCTION": case "JS_FUNCTION":
return call( return call(
executeJSActionSaga, executeJSActionSaga,
@ -244,17 +228,9 @@ export function* executeActionSaga(
); );
} }
export function* executeReduxActionSaga( export function* executeReduxActionSaga(action: ReduxAction<ActionPayload[]>) {
action: ReduxAction<{
actions: ActionPayload[];
paginationField: PaginationField;
}>,
) {
if (!_.isNil(action.payload)) { if (!_.isNil(action.payload)) {
yield* executeActionSaga( yield* executeActionSaga(action.payload);
action.payload.actions,
action.payload.paginationField,
);
} else { } else {
yield put( yield put(
executeActionError({ executeActionError({
@ -355,22 +331,16 @@ export function* deleteActionSaga(actionPayload: ReduxAction<{ id: string }>) {
} }
} }
export function* runApiActionSaga( export function* runApiActionSaga(action: ReduxAction<string>) {
reduxAction: ReduxAction<{
id: string;
paginationField: PaginationField;
}>,
) {
try { try {
const { const {
values, values,
dirty, dirty,
valid, valid,
}: { }: { values: RestAction; dirty: boolean; valid: boolean } = yield select(
values: RestAction; getFormData,
dirty: boolean; API_EDITOR_FORM_NAME,
valid: boolean; );
} = yield select(getFormData, API_EDITOR_FORM_NAME);
const actionObject: PageAction = yield select(getAction, values.id); const actionObject: PageAction = yield select(getAction, values.id);
let action: ExecuteActionRequest["action"] = { id: values.id }; let action: ExecuteActionRequest["action"] = { id: values.id };
let jsonPathKeys = actionObject.jsonPathKeys; let jsonPathKeys = actionObject.jsonPathKeys;
@ -379,8 +349,7 @@ export function* runApiActionSaga(
return; return;
} }
if (dirty) { if (dirty) {
action = _.omit(transformRestAction(values), "id") as RestAction; action = _.omit(transformRestAction(values), "id");
const actionString = JSON.stringify(action); const actionString = JSON.stringify(action);
if (isDynamicValue(actionString)) { if (isDynamicValue(actionString)) {
const { paths } = getDynamicBindings(actionString); const { paths } = getDynamicBindings(actionString);
@ -390,13 +359,10 @@ export function* runApiActionSaga(
jsonPathKeys = []; jsonPathKeys = [];
} }
} }
const { paginationField } = reduxAction.payload;
const params = yield call(getActionParams, jsonPathKeys); const params = yield call(getActionParams, jsonPathKeys);
const response: ActionApiResponse = yield ActionAPI.executeAction({ const response: ActionApiResponse = yield ActionAPI.executeAction({
action, action,
params, params,
paginationField,
}); });
let payload = createActionResponse(response); let payload = createActionResponse(response);
if (response.responseMeta && response.responseMeta.error) { if (response.responseMeta && response.responseMeta.error) {
@ -410,7 +376,7 @@ export function* runApiActionSaga(
} catch (error) { } catch (error) {
yield put({ yield put({
type: ReduxActionErrorTypes.RUN_API_ERROR, type: ReduxActionErrorTypes.RUN_API_ERROR,
payload: { error, id: reduxAction.payload }, payload: { error, id: action.payload },
}); });
} }
} }

24
app/client/src/selectors/editorSelectors.tsx
View File

@ -18,7 +18,6 @@ import { OccupiedSpace } from "constants/editorConstants";
import { WidgetTypes } from "constants/WidgetConstants"; import { WidgetTypes } from "constants/WidgetConstants";
import { getParsedDataTree } from "./nameBindingsWithDataSelector"; import { getParsedDataTree } from "./nameBindingsWithDataSelector";
import _ from "lodash"; import _ from "lodash";
import { RestAction } from "api/ActionAPI";
const getEditorState = (state: AppState) => state.ui.editor; const getEditorState = (state: AppState) => state.ui.editor;
const getWidgetConfigs = (state: AppState) => state.entities.widgetConfig; const getWidgetConfigs = (state: AppState) => state.entities.widgetConfig;
@ -172,29 +171,6 @@ const getOccupiedSpacesForContainer = (
}); });
}; };
export const getPaginatedWidgets = (
actions: RestAction[],
widgets: Record<string, FlattenedWidgetProps>,
): string[] => {
const paginatedActions = actions.filter(
action => action.actionConfiguration.isPaginated,
);
const paginatedWidgets: string[] = [];
Object.keys(widgets).forEach((key: string) => {
const widget = widgets[key];
if (widget.dynamicBindings) {
Object.keys(widget.dynamicBindings).forEach(db => {
paginatedActions.forEach(pApi => {
if (widget[db].indexOf(pApi.name) !== -1) {
paginatedWidgets.push(widget.widgetId);
}
});
});
}
});
return paginatedWidgets;
};
export const getOccupiedSpaces = createSelector( export const getOccupiedSpaces = createSelector(
getWidgets, getWidgets,
( (

10
app/client/src/widgets/BaseWidget.tsx
View File

@ -29,7 +29,6 @@ import { PositionTypes } from "constants/WidgetConstants";
import ErrorBoundary from "components/editorComponents/ErrorBoundry"; import ErrorBoundary from "components/editorComponents/ErrorBoundry";
import { WidgetPropertyValidationType } from "utils/ValidationFactory"; import { WidgetPropertyValidationType } from "utils/ValidationFactory";
import { DerivedPropertiesMap } from "utils/WidgetFactory"; import { DerivedPropertiesMap } from "utils/WidgetFactory";
import { PaginationField } from "api/ActionAPI";
/*** /***
* BaseWidget * BaseWidget
* *
@ -83,14 +82,9 @@ abstract class BaseWidget<
* Widgets can execute actions using this `executeAction` method. * Widgets can execute actions using this `executeAction` method.
* Triggers may be specific to the widget * Triggers may be specific to the widget
*/ */
executeAction( executeAction(actionPayloads?: ActionPayload[]): void {
actionPayloads?: ActionPayload[],
paginationField?: PaginationField,
): void {
const { executeAction } = this.context; const { executeAction } = this.context;
executeAction && executeAction && !_.isNil(actionPayloads) && executeAction(actionPayloads);
!_.isNil(actionPayloads) &&
executeAction(actionPayloads, paginationField);
} }
disableDrag(disable: boolean) { disableDrag(disable: boolean) {

24
app/client/src/widgets/TableWidget.tsx
View File

@ -45,10 +45,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
getPageView() { getPageView() {
const { tableData } = this.props; const { tableData } = this.props;
const columns = constructColumns(tableData); const columns = constructColumns(tableData);
const serverSidePaginationEnabled = this.context.paginatedWidgets.includes(
this.props.widgetId,
);
return ( return (
<TableComponent <TableComponent
data={this.props.tableData} data={this.props.tableData}
@ -67,18 +63,22 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
super.executeAction(onRowSelected); super.executeAction(onRowSelected);
}} }}
serverSidePaginationEnabled={serverSidePaginationEnabled}
pageNo={1}
nextPageClick={() => {
super.executeAction(this.props.onPageChange, "NEXT");
}}
prevPageClick={() => {
super.executeAction(this.props.onPageChange, "PREV");
}}
/> />
); );
} }
// componentDidUpdate(prevProps: TableWidgetProps) {
// super.componentDidUpdate(prevProps);
// if (
// !_.isEqual(prevProps.tableData, this.props.tableData) &&
// prevProps.selectedRow
// ) {
// this.updateSelectedRowProperty(
// this.props.tableData[prevProps.selectedRow.rowIndex],
// prevProps.selectedRow.rowIndex,
// );
// }
// }
onCommandClick = (actions: ActionPayload[]) => { onCommandClick = (actions: ActionPayload[]) => {
super.executeAction(actions); super.executeAction(actions);
}; };