made binding optional

re-added mock response

app/client/src/api/ActionAPI.tsx

@@ -1,7 +1,7 @@
 import API, { HttpMethod } from "./Api";
 import { ApiResponse } from "./ApiResponses";
 import { APIRequest } from "./ApiRequests";
-import _ from "lodash";
+import { mapToPropList } from "../utils/AppsmithUtils";
 
 export interface CreateActionRequest<T> extends APIRequest {
   resourceId: string;
@@ -48,7 +48,7 @@ export interface ActionCreateUpdateResponse extends ApiResponse {
 
 export interface ExecuteActionRequest extends APIRequest {
   actionId: string;
-  dynamicBindingMap: Record<string, any>;
+  dynamicBindingList?: Property[];
 }
 
 export interface ExecuteActionResponse extends ApiResponse {
@@ -67,12 +67,8 @@ class ActionAPI extends API {
         httpMethod: apiConfig.method,
         path: apiConfig.path,
         body: apiConfig.body,
-        headers: _.map(apiConfig.requestHeaders, (value, key) => {
+        headers: mapToPropList(apiConfig.requestHeaders),
-          return { key: key, value: value };
+        queryParameters: mapToPropList(apiConfig.queryParams),
-        }),
-        queryParameters: _.map(apiConfig.queryParams, (value, key) => {
-          return { key: key, value: value };
-        }),
       },
     };
     return API.post(ActionAPI.url, createAPI);
@@ -87,12 +83,8 @@ class ActionAPI extends API {
         httpMethod: apiConfig.method,
         path: apiConfig.path,
         body: apiConfig.body,
-        headers: _.map(apiConfig.requestHeaders, (value, key) => {
+        headers: mapToPropList(apiConfig.requestHeaders),
-          return { key: key, value: value };
+        queryParameters: mapToPropList(apiConfig.queryParams),
-        }),
-        queryParameters: _.map(apiConfig.queryParams, (value, key) => {
-          return { key: key, value: value };
-        }),
       },
     };
     return API.post(ActionAPI.url, updateAPI);
@@ -113,7 +105,7 @@ class ActionAPI extends API {
   static executeAction(
     executeAction: ExecuteActionRequest,
   ): Promise<ActionCreateUpdateResponse> {
-    return API.post(ActionAPI.url, executeAction);
+    return API.post(ActionAPI.url + "/execute", executeAction);
   }
 }
 

app/client/src/api/Api.tsx

@@ -47,7 +47,7 @@ class Api {
     );
   }
 
-  static post(url: string, queryParams?: any, body?: any) {
+  static post(url: string, body?: any, queryParams?: any) {
     return axiosInstance.post(
       url + this.convertObjectToQueryParams(queryParams),
       body,

app/client/src/api/PageApi.tsx

@@ -14,7 +14,7 @@ export interface SavePageRequest {
 }
 
 export interface PageLayout {
-  dsl: ContainerWidgetProps<any>;
+  dsl: Partial<ContainerWidgetProps<any>>;
   actions: PageAction[];
 }
 

app/client/src/constants/ActionConstants.tsx

@@ -22,18 +22,11 @@ export type ActionType =
   | "DOWNLOAD";
 
 export interface ActionPayload {
+  actionId: string;
   actionType: ActionType;
   contextParams: Record<string, string>;
 }
 
-export interface APIActionPayload extends ActionPayload {
-  apiId: string;
-}
-
-export interface QueryActionPayload extends ActionPayload {
-  queryId: string;
-}
-
 export type NavigationType = "NEW_TAB" | "INLINE";
 
 export interface NavigateActionPayload extends ActionPayload {
@@ -71,5 +64,5 @@ export interface PageAction {
   actionId: string;
   actionType: ActionType;
   actionName: string;
-  dynamicBindings: string[];
+  dynamicBindings?: string[];
 }

app/client/src/constants/ApiConstants.tsx

@@ -9,9 +9,8 @@ export type EncodingType = "gzip";
 export const PROD_BASE_URL = "https://mobtools.com/api/";
 export const MOCK_BASE_URL =
   "https://f78ff9dd-2c08-45f1-9bf9-8c670a1bb696.mock.pstmn.io";
-export const STAGE_BASE_URL =
+export const STAGE_BASE_URL = "https://appsmith-test.herokuapp.com";
-  "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io";
+export const BASE_URL = STAGE_BASE_URL;
-export const BASE_URL = MOCK_BASE_URL;
 export const REQUEST_TIMEOUT_MS = 2000;
 export const REQUEST_HEADERS: APIHeaders = {
   Accept: "application/json",

app/client/src/constants/ReduxActionConstants.tsx

@@ -2,7 +2,7 @@
 import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
 
 export type ReduxActionType =
-  | "LOAD_CANVAS_WIDGETS"
+  | "UPDATE_CANVAS"
   | "FETCH_CANVAS"
   | "CLEAR_CANVAS"
   | "DROP_WIDGET_CANVAS"
@@ -29,7 +29,7 @@ export type ReduxActionType =
   | "SHOW_PROPERTY_PANE";
 
 export const ReduxActionTypes: { [id: string]: ReduxActionType } = {
-  LOAD_CANVAS_WIDGETS: "LOAD_CANVAS_WIDGETS",
+  UPDATE_CANVAS: "UPDATE_CANVAS",
   FETCH_CANVAS: "FETCH_CANVAS",
   CLEAR_CANVAS: "CLEAR_CANVAS",
   FETCH_PAGE: "FETCH_PAGE",

app/client/src/mockResponses/PageMockResponse.tsx

@@ -0,0 +1,44 @@
+import { PageResponse } from "../api/PageApi";
+
+const PageMockResponse: PageResponse = {
+  responseMeta: {
+    responseCode: "SUCCESS",
+  },
+  layout: {
+    dsl: {
+      widgetId: "0",
+      widgetType: "CONTAINER_WIDGET",
+      topRow: 2,
+      leftColumn: 2,
+      rightColumn: 10,
+      bottomRow: 10,
+      children: [
+        {
+          widgetId: "1",
+          widgetType: "BUTTON_WIDGET",
+          topRow: 2,
+          leftColumn: 2,
+          text: "submit",
+          rightColumn: 10,
+          bottomRow: 10,
+          onClick: [
+            {
+              actionId: "5d8082e2795dc6000482bc84",
+              actionType: "API",
+            },
+          ],
+        },
+      ],
+    },
+    actions: [
+      {
+        actionId: "5d8082e2795dc6000482bc84",
+        actionType: "API",
+        actionName: "getUsers",
+        dynamicBindings: ["$.apiData.0.name"],
+      },
+    ],
+  },
+};
+
+export default PageMockResponse;

app/client/src/sagas/ActionSagas.tsx

@@ -3,16 +3,15 @@ import {
   ReduxAction,
 } from "../constants/ReduxActionConstants";
 import { call, takeEvery, select, all } from "redux-saga/effects";
-import {
+import { PageAction, ActionPayload } from "../constants/ActionConstants";
-  APIActionPayload,
+import ActionAPI, {
-  QueryActionPayload,
+  ActionCreateUpdateResponse,
-  PageAction,
+  ExecuteActionRequest,
-  ActionPayload,
+} from "../api/ActionAPI";
-} from "../constants/ActionConstants";
-import ActionAPI, { ActionCreateUpdateResponse } from "../api/ActionAPI";
 import { AppState } from "../reducers";
 import { JSONPath } from "jsonpath-plus";
 import _ from "lodash";
+import { mapToPropList } from "../utils/AppsmithUtils";
 
 const getDataTree = (state: AppState) => {
   return state.entities;
@@ -31,8 +30,12 @@ export function* evaluateJSONPathSaga(jsonPath: string): any {
   return result;
 }
 
-export function* executeAPIActionSaga(apiAction: APIActionPayload) {
+export function* executeAPIQueryActionSaga(apiAction: ActionPayload) {
-  const api: PageAction = yield select(getAction, apiAction.apiId);
+  const api: PageAction = yield select(getAction, apiAction.actionId);
+  const executeActionRequest: ExecuteActionRequest = {
+    actionId: apiAction.actionId,
+  };
+  if (!_.isNil(api.dynamicBindings)) {
     const responses: any = yield all(
       api.dynamicBindings.map((jsonPath: string) => {
         return call(evaluateJSONPathSaga, jsonPath);
@@ -41,42 +44,23 @@ export function* executeAPIActionSaga(apiAction: APIActionPayload) {
     const dynamicBindingMap: Record<string, any> = _.keyBy(
       responses,
       (response: string, index: number) => {
-      return api.dynamicBindings[index];
+        return api.dynamicBindings ? api.dynamicBindings[index] : undefined;
       },
     );
-  yield ActionAPI.executeAction({
+    executeActionRequest.dynamicBindingList = mapToPropList(dynamicBindingMap);
-    actionId: apiAction.apiId,
+  }
-    dynamicBindingMap: dynamicBindingMap,
+  yield ActionAPI.executeAction(executeActionRequest);
-  });
-}
-
-export function* executeQueryActionSaga(queryAction: QueryActionPayload) {
-  const query: PageAction = yield select(getAction, queryAction.queryId);
-  const responses: any = yield all(
-    query.dynamicBindings.map((jsonPath: string) => {
-      return call(evaluateJSONPathSaga, jsonPath);
-    }),
-  );
-  const dynamicBindingMap: Record<string, any> = _.keyBy(
-    responses,
-    (response: string, index: number) => {
-      return query.dynamicBindings[index];
-    },
-  );
-  yield ActionAPI.executeAction({
-    actionId: query.actionId,
-    dynamicBindingMap: dynamicBindingMap,
-  });
 }
 
 export function* executeActionSaga(action: ReduxAction<ActionPayload[]>) {
   if (!_.isNil(action.payload)) {
     yield all(
-      action.payload.map((actionPayload: ActionPayload) => {
+      _.map(action.payload, (actionPayload: ActionPayload) => {
         switch (actionPayload.actionType) {
           case "API":
-            const apiActionPaylod: APIActionPayload = actionPayload as APIActionPayload;
+            return call(executeAPIQueryActionSaga, actionPayload);
-            return call(executeAPIActionSaga, apiActionPaylod);
+          case "QUERY":
+            return call(executeAPIQueryActionSaga, actionPayload);
         }
         return undefined;
       }),

app/client/src/sagas/PageSagas.tsx

@@ -24,7 +24,10 @@ export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
         widgets: normalizedResponse.entities.canvasWidgets,
       };
       yield all([
-        put({ type: ReduxActionTypes.UPDATE_CANVAS, canvasWidgetsPayload }),
+        put({
+          type: ReduxActionTypes.UPDATE_CANVAS,
+          payload: canvasWidgetsPayload,
+        }),
         put({
           type: ReduxActionTypes.LOAD_CANVAS_ACTIONS,
           payload: pageResponse.layout.actions,

app/client/src/utils/AppsmithUtils.tsx

@@ -11,6 +11,8 @@ import netlifyIdentity from "netlify-identity-widget";
 import FontFaceObserver from "fontfaceobserver";
 import PropertyControlRegistry from "./PropertyControlRegistry";
 import WidgetBuilderRegistry from "./WidgetRegistry";
+import { Property } from "../api/ActionAPI";
+import _ from "lodash";
 
 export const createReducer = (
   initialState: any,
@@ -52,3 +54,9 @@ export const appInitializer = () => {
       console.log(err);
     });
 };
+
+export const mapToPropList = (map: Record<string, string>): Property[] => {
+  return _.map(map, (value, key) => {
+    return { key: key, value: value };
+  });
+};