WIP: Fix merge conflicts with release. Add toast to show saving page activity

app/client/.gitignore

@@ -24,5 +24,5 @@ yarn-debug.log*
 yarn-error.log*
 
 /out
-/public/fonts
+/public/fonts/*
-/src/assets/icon/fonts
+/src/assets/icons/fonts/*

app/client/package.json

@@ -10,6 +10,7 @@
     "@blueprintjs/core": "^3.11.0",
     "@blueprintjs/datetime": "^3.6.0",
     "@blueprintjs/icons": "^3.5.0",
+    "@blueprintjs/select": "^3.10.0",
     "@blueprintjs/table": "^3.4.0",
     "@sentry/browser": "^5.6.3",
     "@types/axios": "^0.14.0",
@@ -52,7 +53,7 @@
     "redux-saga": "^1.0.0",
     "styled-components": "^4.1.3",
     "ts-loader": "^6.0.4",
-    "typescript": "^3.2.4"
+    "typescript": "^3.6.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -84,7 +85,8 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
     "icon-font-generator": "^2.1.10",
-    "redux-devtools": "^3.5.0"
+    "redux-devtools": "^3.5.0",
+    "redux-devtools-extension": "^2.13.8"
   },
   "husky": {
     "hooks": {

app/client/src/actions/controlActions.tsx

@@ -0,0 +1,25 @@
+import {
+  ReduxActionTypes,
+  ReduxAction,
+} from "../constants/ReduxActionConstants";
+
+export const updateWidgetProperty = (
+  widgetId: string,
+  propertyName: string,
+  propertyValue: any,
+): ReduxAction<UpdateWidgetPropertyPayload> => {
+  return {
+    type: ReduxActionTypes.UPDATE_WIDGET_PROPERTY,
+    payload: {
+      widgetId,
+      propertyName,
+      propertyValue,
+    },
+  };
+};
+
+export interface UpdateWidgetPropertyPayload {
+  widgetId: string;
+  propertyName: string;
+  propertyValue: any;
+}

app/client/src/actions/pageActions.tsx

@@ -59,11 +59,11 @@ export const removeWidget = (
   };
 };
 
-export const loadCanvasWidgets = (
+export const updateCanvas = (
   payload: LoadCanvasWidgetsPayload,
 ): ReduxAction<LoadCanvasWidgetsPayload> => {
   return {
-    type: ReduxActionTypes.LOAD_CANVAS_WIDGETS,
+    type: ReduxActionTypes.UPDATE_CANVAS,
     payload,
   };
 };

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

@@ -53,7 +53,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

@@ -18,8 +18,8 @@ export interface SavePageRequest {
 
 export interface PageLayout {
   id: string;
-  dsl: ContainerWidgetProps<any>;
+  dsl: Partial<ContainerWidgetProps<any>>;
-  actions?: PageAction[];
+  actions: PageAction[];
 }
 
 export type FetchPageResponse = ApiResponse & {
@@ -36,9 +36,9 @@ export interface SavePageResponse {
 }
 
 class PageApi extends Api {
-  static url = "/pages";
+  static url = "api/v1/pages";
   static getLayoutUpdateURL = (pageId: string, layoutId: string) => {
-    return `/layouts/${layoutId}/pages/${pageId}`;
+    return `api/v1/layouts/${layoutId}/pages/${pageId}`;
   };
 
   static fetchPage(pageRequest: FetchPageRequest): Promise<FetchPageResponse> {

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,9 @@ 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 = "https://appsmith-test.herokuapp.com/api/v1/";
+export const STAGE_BASE_URL = "https://appsmith-test.herokuapp.com";
 export const BASE_URL = STAGE_BASE_URL;
-export const REQUEST_TIMEOUT_MS = 5000;
+export const REQUEST_TIMEOUT_MS = 2000;
 export const REQUEST_HEADERS: APIHeaders = {
   Accept: "application/json",
   "Content-Type": "application/json",

app/client/src/constants/PropertyControlConstants.tsx

@@ -0,0 +1,17 @@
+export type ControlType =
+  | "INPUT_TEXT"
+  | "ICON_PICKER"
+  | "SEGMENT_CONTROL"
+  | "SWITCH"
+  | "CHECKBOX"
+  | "DATE_PICKER"
+  | "DROP_DOWN"
+  | "COLOR_PICKER"
+  | "TIMEZONE_PICKER"
+  | "ACTION_SELECTOR"
+  | "RECORD_ACTION_SELECTOR"
+  | "OPTION_INPUT"
+  | "IMAGE_PICKER"
+  | "SHAPE_PICKER"
+  | "VALIDATION_INPUT"
+  | "ZOOM";

app/client/src/constants/ReduxActionConstants.tsx

@@ -1,7 +1,7 @@
 import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget";
 
 export const ReduxActionTypes: { [key: string]: string } = {
-  LOAD_CANVAS_WIDGETS: "LOAD_CANVAS_WIDGETS",
+  UPDATE_CANVAS: "UPDATE_CANVAS",
   FETCH_CANVAS: "FETCH_CANVAS",
   CLEAR_CANVAS: "CLEAR_CANVAS",
   FETCH_PAGE: "FETCH_PAGE",
@@ -13,6 +13,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
   REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
   LOAD_WIDGET_CONFIG: "LOAD_WIDGET_CONFIG",
+  LOAD_PROPERTY_CONFIG: "LOAD_PROPERTY_CONFIG",
   PUBLISH: "PUBLISH",
   FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
   SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
@@ -33,6 +34,8 @@ export const ReduxActionTypes: { [key: string]: string } = {
   WIDGET_MOVE: "WIDGET_MOVE",
   WIDGET_RESIZE: "WIDGET_RESIZE",
   WIDGET_DELETE: "WIDGET_DELETE",
+  SHOW_PROPERTY_PANE: "SHOW_PROPERTY_PANE",
+  UPDATE_WIDGET_PROPERTY: "UPDATE_WIDGET_PROPERTY",
 };
 
 export type ReduxActionType = (typeof ReduxActionTypes)[keyof typeof ReduxActionTypes];
@@ -48,8 +51,8 @@ export interface LoadCanvasWidgetsPayload {
   layoutId: string;
 }
 
-export interface LoadWidgetConfigPayload {
+export interface ShowPropertyPanePayload {
-  [widgetId: string]: WidgetProps;
+  widgetId: string;
 }
 
 // export interface LoadAPIResponsePayload extends ExecuteActionResponse {}

app/client/src/constants/WidgetConstants.tsx

@@ -10,8 +10,7 @@ export type WidgetType =
   | "CHECKBOX_WIDGET"
   | "RADIO_GROUP_WIDGET"
   | "INPUT_WIDGET"
-  | "SWITCH_WIDGET"
+  | "SWITCH_WIDGET";
-  | "ALERT_WIDGET";
 
 export const WidgetTypes: { [id: string]: WidgetType } = {
   BUTTON_WIDGET: "BUTTON_WIDGET",
@@ -26,7 +25,6 @@ export const WidgetTypes: { [id: string]: WidgetType } = {
   DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
   CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
   RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
-  ALERT_WIDGET: "ALERT_WIDGET",
 };
 
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";

app/client/src/index.tsx

@@ -10,7 +10,6 @@ import * as serviceWorker from "./serviceWorker";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { createStore, applyMiddleware } from "redux";
 import appReducer from "./reducers";
-import WidgetBuilderRegistry from "./utils/WidgetRegistry";
 import { ThemeProvider, theme } from "./constants/DefaultTheme";
 import createSagaMiddleware from "redux-saga";
 import { rootSaga } from "./sagas";
@@ -18,11 +17,14 @@ import { DndProvider } from "react-dnd";
 import HTML5Backend from "react-dnd-html5-backend";
 import { appInitializer } from "./utils/AppsmithUtils";
 import ProtectedRoute from "./pages/common/ProtectedRoute";
+import { composeWithDevTools } from "redux-devtools-extension/logOnlyInProduction";
 
 appInitializer();
-WidgetBuilderRegistry.registerWidgetBuilders();
 const sagaMiddleware = createSagaMiddleware();
-const store = createStore(appReducer, applyMiddleware(sagaMiddleware));
+const store = createStore(
+  appReducer,
+  composeWithDevTools(applyMiddleware(sagaMiddleware)),
+);
 sagaMiddleware.run(rootSaga);
 ReactDOM.render(
   <DndProvider backend={HTML5Backend}>

app/client/src/mockResponses/PageMockResponse.tsx

@@ -0,0 +1,56 @@
+import { FetchPageResponse } from "../api/PageApi";
+import { generateReactKey } from "../utils/generators";
+import { WidgetType } from "../constants/WidgetConstants";
+import { ActionType } from "../constants/ActionConstants";
+
+const PageMockResponse: FetchPageResponse = {
+  responseMeta: {
+    status: 200,
+    success: true,
+  },
+  data: {
+    id: generateReactKey(),
+    applicationId: generateReactKey(),
+    name: "Mock Page",
+    layouts: [
+      {
+        id: generateReactKey(),
+        dsl: {
+          widgetId: "0",
+          type: "CONTAINER_WIDGET" as WidgetType,
+          topRow: 2,
+          leftColumn: 2,
+          rightColumn: 10,
+          bottomRow: 10,
+          children: [
+            {
+              widgetId: "1",
+              type: "BUTTON_WIDGET" as WidgetType,
+              topRow: 2,
+              leftColumn: 2,
+              text: "submit",
+              rightColumn: 10,
+              bottomRow: 10,
+              onClick: [
+                {
+                  actionId: "5d8082e2795dc6000482bc84",
+                  actionType: "API",
+                },
+              ],
+            },
+          ],
+        },
+        actions: [
+          {
+            actionId: "5d8082e2795dc6000482bc84",
+            actionType: "API" as ActionType,
+            actionName: "getUsers",
+            dynamicBindings: ["$.apiData.0.name"],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export default PageMockResponse;

app/client/src/mockResponses/PropertyPaneConfigResponse.tsx

@@ -0,0 +1,555 @@
+import { PropertyPaneConfigState } from "../reducers/entityReducers/propertyPaneConfigReducer";
+
+const PropertyPaneConfigResponse: PropertyPaneConfigState = {
+  config: {
+    BUTTON_WIDGET: [
+      {
+        sectionName: "General",
+        id: "1",
+        children: [
+          {
+            id: "1.1",
+            propertyName: "text",
+            label: "Button Text",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter button text here",
+          },
+          {
+            id: "1.2",
+            propertyName: "buttonStyle",
+            label: "Button Style",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Primary Button", value: "PRIMARY_BUTTON" },
+              { label: "Secondary Button", value: "SECONDARY_BUTTON" },
+            ],
+          },
+          {
+            id: "1.3",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+          {
+            id: "1.4",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "2",
+        children: [
+          {
+            id: "2.1",
+            propertyName: "onClick",
+            label: "onClick",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
+      },
+    ],
+    TEXT_WIDGET: [
+      {
+        sectionName: "General",
+        id: "3",
+        children: [
+          {
+            id: "3.1",
+            propertyName: "text",
+            label: "Text",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter your text here",
+          },
+          {
+            id: "3.2",
+            propertyName: "textStyle",
+            label: "Text Style",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Heading", value: "HEADING" },
+              { label: "Label", value: "LABEL" },
+              { label: "Body", value: "BODY" },
+              { label: "Sub text", value: "SUB_TEXT" },
+            ],
+          },
+          {
+            id: "3.3",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
+    IMAGE_WIDGET: [
+      {
+        sectionName: "General",
+        id: "4",
+        children: [
+          {
+            id: "4.1",
+            propertyName: "image",
+            label: "Image",
+            controlType: "IMAGE_PICKER",
+          },
+          {
+            id: "4.2",
+            propertyName: "defaultImage",
+            label: "Default Image",
+            controlType: "IMAGE_PICKER",
+          },
+          {
+            id: "4.3",
+            propertyName: "imageShape",
+            label: "Shape",
+            controlType: "SHAPE_PICKER",
+          },
+          {
+            id: "4.4",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
+    INPUT_WIDGET: [
+      {
+        sectionName: "General",
+        id: "5",
+        children: [
+          {
+            id: "5.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            inputType: "TEXT",
+            placeholderText: "Label the widget",
+          },
+          {
+            id: "5.2",
+            propertyName: "inputType",
+            label: "Data Type",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Text", value: "TEXT" },
+              { label: "Number", value: "NUMBER" },
+              { label: "Integer", value: "INTEGER" },
+              { label: "Phone Number", value: "PHONE_NUMBER" },
+              { label: "Email", value: "EMAIL" },
+              { label: "Passwork", value: "PASSWORD" },
+              { label: "Currency", value: "CURRENCY" },
+              { label: "Search", value: "SEARCH" },
+            ],
+          },
+          {
+            id: "5.3",
+            propertyName: "placeholderText",
+            label: "Placeholder",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter your text here",
+          },
+          {
+            id: "5.4",
+            propertyName: "maxChars",
+            label: "Max Chars",
+            controlType: "INPUT_TEXT",
+            inputType: "INTEGER",
+            placeholderText: "Maximum character length",
+          },
+          {
+            id: "5.5",
+            propertyName: "validators",
+            label: "Validators",
+            controlType: "VALIDATION_INPUT",
+          },
+          {
+            id: "5.6",
+            children: [
+              {
+                id: "5.6.1",
+                propertyName: "focusIndexx",
+                label: "Focus Index",
+                controlType: "INPUT_TEXT",
+                inputType: "INTEGER",
+                placeholderText: "Enter the order of tab focus",
+              },
+              {
+                id: "5.6.2",
+                propertyName: "autoFocus",
+                label: "Auto Focus",
+                controlType: "SWITCH",
+              },
+            ],
+          },
+          {
+            id: "5.7",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+          {
+            id: "5.8",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
+    SWITCH_WIDGET: [
+      {
+        sectionName: "General",
+        id: "6",
+        children: [
+          {
+            id: "6.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            inputType: "TEXT",
+            placeholderText: "Label the widget",
+          },
+          {
+            id: "6.2",
+            propertyName: "isOn",
+            label: "Default State",
+            controlType: "SWITCH",
+          },
+          {
+            id: "6.3",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+          {
+            id: "6.4",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
+    CONTAINER_WIDGET: [
+      {
+        sectionName: "General",
+        id: "7",
+        children: [
+          {
+            id: "7.1",
+            propertyName: "backgroundColor",
+            label: "Background Color",
+            controlType: "COLOR_PICKER",
+          },
+          {
+            id: "6.3",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
+    SPINNER_WIDGET: [
+      {
+        sectionName: "General",
+        id: "8",
+        children: [
+          {
+            id: "8.1",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
+    DATE_PICKER_WIDGET: [
+      {
+        sectionName: "General",
+        id: "9",
+        children: [
+          {
+            id: "9.1",
+            propertyName: "datePickerType",
+            label: "Picker Type",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Single Date", value: "DATE_PICKER" },
+              { label: "Date Range", value: "DATE_RANGE_PICKER" },
+            ],
+          },
+          {
+            id: "9.4",
+            propertyName: "label",
+            label: "Enter Date Label",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "9.1",
+            propertyName: "defaultDate",
+            label: "Default Date",
+            controlType: "DATE_PICKER",
+          },
+          {
+            id: "9.2",
+            propertyName: "defaultTimezone",
+            label: "Default Timezone",
+            controlType: "TIMEZONE_PICKER",
+          },
+          {
+            id: "9.3",
+            propertyName: "enableTime",
+            label: "Enable Pick Time",
+            controlType: "SWITCH",
+          },
+          {
+            id: "9.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+          {
+            id: "9.6",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "10",
+        children: [
+          {
+            id: "10.1",
+            propertyName: "onDateSelected",
+            label: "onDateSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+          {
+            id: "10.2",
+            propertyName: "onDateRangeSelected",
+            label: "onDateRangeSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
+      },
+    ],
+    TABLE_WIDGET: [
+      {
+        sectionName: "General",
+        id: "11",
+        children: [
+          {
+            id: "11.1",
+            propertyName: "label",
+            label: "Enter Table Label",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.2",
+            propertyName: "tableData",
+            label: "Enter data array",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.3",
+            propertyName: "nextPageKey",
+            label: "Next Pagination Key",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.4",
+            propertyName: "prevPageKey",
+            label: "Previous Pagination Key",
+            controlType: "INPUT_TEXT",
+          },
+          {
+            id: "11.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "12",
+        children: [
+          {
+            id: "12.1",
+            propertyName: "tableActions",
+            label: "Record action",
+            controlType: "RECORD_ACTION_SELECTOR",
+          },
+          {
+            id: "12.2",
+            propertyName: "onRowSelected",
+            label: "onRowSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+          {
+            id: "12.3",
+            propertyName: "onPageChange",
+            label: "onPageChange",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
+      },
+    ],
+    DROP_DOWN_WIDGET: [
+      {
+        sectionName: "General",
+        id: "13",
+        children: [
+          {
+            id: "13.1",
+            propertyName: "type",
+            label: "Selection Type",
+            controlType: "DROP_DOWN",
+            options: [
+              { label: "Single Select", value: "SINGLE_SELECT" },
+              { label: "Multi Select", value: "MULTI_SELECT" },
+            ],
+          },
+          {
+            id: "13.2",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the label",
+          },
+          {
+            id: "13.3",
+            propertyName: "placeholderText",
+            label: "Placeholder",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the placeholder",
+          },
+          {
+            id: "13.4",
+            propertyName: "options",
+            label: "Options",
+            controlType: "OPTION_INPUT",
+          },
+          {
+            id: "13.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "14",
+        children: [
+          {
+            id: "14.1",
+            propertyName: "onOptionSelected",
+            label: "onOptionSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
+      },
+    ],
+    CHECKBOX_WIDGET: [
+      {
+        sectionName: "General",
+        id: "15",
+        children: [
+          {
+            id: "15.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the label",
+          },
+          {
+            id: "15.2",
+            propertyName: "defaultCheckedState",
+            label: "Default State",
+            controlType: "SWITCH",
+          },
+          {
+            id: "13.5",
+            propertyName: "isDisabled",
+            label: "Disabled",
+            controlType: "SWITCH",
+          },
+          {
+            id: "13.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "16",
+        children: [
+          {
+            id: "16.1",
+            propertyName: "onCheckChange",
+            label: "onCheckChange",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
+      },
+    ],
+    RADIO_GROUP_WIDGET: [
+      {
+        sectionName: "General",
+        id: "16",
+        children: [
+          {
+            id: "16.1",
+            propertyName: "label",
+            label: "Label",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter the label",
+          },
+          {
+            id: "16.2",
+            propertyName: "defaultOptionValue",
+            label: "Default Selected Value",
+            controlType: "SWITCH",
+          },
+          {
+            id: "16.3",
+            propertyName: "options",
+            label: "Options",
+            controlType: "OPTION_INPUT",
+          },
+          {
+            id: "13.5",
+            propertyName: "isVisible",
+            label: "Visibile",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "Actions",
+        id: "17",
+        children: [
+          {
+            id: "17.1",
+            propertyName: "onOptionSelected",
+            label: "onOptionSelected",
+            controlType: "ACTION_SELECTOR",
+          },
+        ],
+      },
+    ],
+  },
+  configVersion: 1,
+};
+
+export default PropertyPaneConfigResponse;

app/client/src/mockResponses/WidgetConfigResponse.tsx

@@ -1,89 +1,92 @@
-import { WidgetConfigReducerState } from "../reducers/entityReducers/widgetConfigReducer.tsx";
+import { WidgetConfigReducerState } from "../reducers/entityReducers/widgetConfigReducer";
 
 const WidgetConfigResponse: WidgetConfigReducerState = {
-  BUTTON_WIDGET: {
+  config: {
-    text: "Submit",
+    BUTTON_WIDGET: {
-    buttonStyle: "PRIMARY_BUTTON",
+      text: "Submit",
-    rows: 1,
+      buttonStyle: "PRIMARY_BUTTON",
-    columns: 2,
+      rows: 1,
-  },
+      columns: 2,
-  TEXT_WIDGET: {
+    },
-    text: "Not all labels are bad!",
+    TEXT_WIDGET: {
-    textStyle: "LABEL",
+      text: "Not all labels are bad!",
-    rows: 1,
+      textStyle: "LABEL",
-    columns: 3,
+      rows: 1,
-  },
+      columns: 3,
-  IMAGE_WIDGET: {
+    },
-    defaultImage: "",
+    IMAGE_WIDGET: {
-    imageShape: "RECTANGLE",
+      defaultImage: "",
-    image: "",
+      imageShape: "RECTANGLE",
-    rows: 3,
+      image: "",
-    columns: 3,
+      rows: 3,
-  },
+      columns: 3,
-  INPUT_WIDGET: {
+    },
-    inputType: "TEXT",
+    INPUT_WIDGET: {
-    label: "Label me",
+      inputType: "TEXT",
-    rows: 1,
+      label: "Label me",
-    columns: 3,
+      rows: 1,
-  },
+      columns: 3,
-  SWITCH_WIDGET: {
+    },
-    isOn: false,
+    SWITCH_WIDGET: {
-    label: "Turn me on",
+      isOn: false,
-    rows: 1,
+      label: "Turn me on",
-    columns: 4,
+      rows: 1,
-  },
+      columns: 4,
-  CONTAINER_WIDGET: {
+    },
-    backgroundColor: "#FFFFFF",
+    CONTAINER_WIDGET: {
-    rows: 1,
+      backgroundColor: "#FFFFFF",
-    columns: 4,
+      rows: 1,
-  },
+      columns: 4,
-  SPINNER_WIDGET: {
+    },
-    rows: 1,
+    SPINNER_WIDGET: {
-    columns: 1,
+      rows: 1,
-  },
+      columns: 1,
-  DATE_PICKER_WIDGET: {
+    },
-    enableTime: false,
+    DATE_PICKER_WIDGET: {
-    datePickerType: "DATE_PICKER",
+      enableTime: false,
-    rows: 1,
+      datePickerType: "DATE_PICKER",
-    columns: 3,
+      rows: 1,
-    label: "Date",
+      columns: 3,
-  },
+      label: "Date",
-  TABLE_WIDGET: {
+    },
-    rows: 5,
+    TABLE_WIDGET: {
-    columns: 7,
+      rows: 5,
-    label: "Don't table me!",
+      columns: 7,
-  },
+      label: "Don't table me!",
-  DROP_DOWN_WIDGET: {
+    },
-    rows: 1,
+    DROP_DOWN_WIDGET: {
-    columns: 3,
+      rows: 1,
-    selectionType: "SINGLE_SELECT",
+      columns: 3,
-    label: "Pick me!",
+      selectionType: "SINGLE_SELECT",
-  },
+      label: "Pick me!",
-  CHECKBOX_WIDGET: {
+    },
-    rows: 1,
+    CHECKBOX_WIDGET: {
-    columns: 3,
+      rows: 1,
-    label: "Label - CHECK!",
+      columns: 3,
-    defaultCheckedState: true,
+      label: "Label - CHECK!",
-  },
+      defaultCheckedState: true,
-  RADIO_GROUP_WIDGET: {
+    },
-    rows: 3,
+    RADIO_GROUP_WIDGET: {
-    columns: 3,
+      rows: 3,
-    label: "Alpha - come in!",
+      columns: 3,
-    options: [
+      label: "Alpha - come in!",
-      { label: "Alpha", value: "1" },
+      options: [
-      { label: "Bravo", value: "2" },
+        { label: "Alpha", value: "1" },
-      { label: "Charlie", value: "3" },
+        { label: "Bravo", value: "2" },
-    ],
+        { label: "Charlie", value: "3" },
-    defaultOptionValue: "1",
+      ],
-  },
+      defaultOptionValue: "1",
-  ALERT_WIDGET: {
+    },
-    alertType: "NOTIFICATION",
+    ALERT_WIDGET: {
-    intent: "SUCCESS",
+      alertType: "NOTIFICATION",
-    rows: 3,
+      intent: "SUCCESS",
-    columns: 3,
+      rows: 3,
-    header: "",
+      columns: 3,
-    message: "",
+      header: "",
+      message: "",
+    },
   },
+  configVersion: 1,
 };
 
 export default WidgetConfigResponse;

app/client/src/pages/Editor/PropertyPane.tsx

@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { AppState } from "../../reducers";
+import PropertyControlFactory from "../../utils/PropertyControlFactory";
+import _ from "lodash";
+import { ControlProps } from "../propertyControls/BaseControl";
+import { PropertySection } from "../../reducers/entityReducers/propertyPaneConfigReducer";
+import { updateWidgetProperty } from "../../actions/controlActions";
+
+class PropertyPane extends Component<
+  PropertyPaneProps & PropertyPaneFunctions
+> {
+  constructor(props: PropertyPaneProps & PropertyPaneFunctions) {
+    super(props);
+    this.onPropertyChange = this.onPropertyChange.bind(this);
+  }
+
+  render() {
+    if (this.props.isVisible) {
+      return (
+        <div>
+          {!_.isNil(this.props.propertySections)
+            ? _.map(
+                this.props.propertySections,
+                (propertySection: PropertySection) => {
+                  return this.renderPropertySection(
+                    propertySection,
+                    propertySection.id,
+                  );
+                },
+              )
+            : undefined}
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  renderPropertySection(propertySection: PropertySection, key: string) {
+    return (
+      <div key={key}>
+        {!_.isNil(propertySection) ? (
+          <div>{propertySection.sectionName}</div>
+        ) : (
+          undefined
+        )}
+        <div
+          style={
+            propertySection.orientation === "HORIZONTAL"
+              ? { flexDirection: "row" }
+              : { flexDirection: "column" }
+          }
+        >
+          {_.map(
+            propertySection.children,
+            (propertyControlOrSection: ControlProps | PropertySection) => {
+              if ("children" in propertyControlOrSection) {
+                return this.renderPropertySection(
+                  propertyControlOrSection,
+                  propertyControlOrSection.id,
+                );
+              } else {
+                return PropertyControlFactory.createControl(
+                  propertyControlOrSection,
+                  { onPropertyChange: this.onPropertyChange },
+                );
+              }
+            },
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  onPropertyChange(propertyName: string, propertyValue: any) {
+    this.props.updateWidgetProperty(
+      this.props.widgetId,
+      propertyName,
+      propertyValue,
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState): PropertyPaneProps => {
+  let propertyConfig = undefined;
+  if (!_.isNil(state.ui.propertyPane.widgetId)) {
+    const widget = state.entities.canvasWidgets[state.ui.propertyPane.widgetId];
+    propertyConfig = state.entities.propertyConfig.config[widget.type];
+  }
+  return {
+    propertySections: propertyConfig,
+    widgetId: state.ui.propertyPane.widgetId,
+    isVisible: state.ui.propertyPane.isVisible,
+  };
+};
+
+const mapDispatchToProps = (dispatch: any): PropertyPaneFunctions => {
+  return {
+    updateWidgetProperty: (
+      widgetId: string,
+      propertyName: string,
+      propertyValue: any,
+    ) => dispatch(updateWidgetProperty(widgetId, propertyName, propertyValue)),
+  };
+};
+
+export interface PropertyPaneProps {
+  propertySections?: PropertySection[];
+  widgetId?: string;
+  isVisible: boolean;
+}
+
+export interface PropertyPaneFunctions {
+  updateWidgetProperty: Function;
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(PropertyPane);

app/client/src/pages/Editor/index.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import { Position, Toaster } from "@blueprintjs/core";
 import { connect } from "react-redux";
 import styled from "styled-components";
 import Canvas from "./Canvas";
@@ -17,6 +18,11 @@ import { fetchPage, updateWidget, savePage } from "../../actions/pageActions";
 import { RenderModes } from "../../constants/WidgetConstants";
 import { executeAction } from "../../actions/widgetActions";
 import { ActionPayload } from "../../constants/ActionConstants";
+import PropertyPane from "./PropertyPane";
+
+const SaveToast = Toaster.create({
+  position: Position.TOP,
+});
 
 const CanvasContainer = styled.section`
   height: 100%;
@@ -58,6 +64,7 @@ type EditorProps = {
   page: string;
   currentPageId: string;
   currentLayoutId: string;
+  isSaving: boolean;
 };
 
 class Editor extends Component<EditorProps> {
@@ -65,6 +72,19 @@ class Editor extends Component<EditorProps> {
     this.props.fetchCanvasWidgets(this.props.currentPageId);
   }
 
+  componentDidUpdate(prevProps: EditorProps) {
+    if (this.props.isSaving && prevProps.isSaving !== this.props.isSaving) {
+      SaveToast.clear();
+      SaveToast.show({ message: "Saving Page..." });
+    } else if (
+      !this.props.isSaving &&
+      prevProps.isSaving !== this.props.isSaving
+    ) {
+      SaveToast.clear();
+      SaveToast.show({ message: "Page Saved" });
+    }
+  }
+
   public render() {
     return (
       <React.Fragment>
@@ -82,6 +102,7 @@ class Editor extends Component<EditorProps> {
               }}
             />
           </CanvasContainer>
+          <PropertyPane />
         </EditorWrapper>
       </React.Fragment>
     );
@@ -99,6 +120,7 @@ const mapStateToProps = (state: AppState): EditorReduxState => {
     pageWidgetId: state.ui.editor.pageWidgetId,
     currentPageId: state.ui.editor.currentPageId,
     currentLayoutId: state.ui.editor.currentLayoutId,
+    isSaving: state.ui.editor.isSaving,
   };
 };
 

app/client/src/pages/propertyControls/BaseControl.tsx

@@ -0,0 +1,37 @@
+/***
+ * Controls are rendered in the property panel from the property config
+ * Controls are higher order components that update a widgets property
+ */
+import { Component } from "react";
+import { ControlType } from "../../constants/PropertyControlConstants";
+import _ from "lodash";
+
+abstract class BaseControl<T extends ControlProps> extends Component<T> {
+  updateProperty(propertyName: string, propertyValue: any) {
+    if (!_.isNil(this.props.onPropertyChange))
+      this.props.onPropertyChange(propertyName, propertyValue);
+  }
+
+  abstract getControlType(): ControlType;
+}
+
+export interface ControlBuilder<T extends ControlProps> {
+  buildPropertyControl(controlProps: T): JSX.Element;
+}
+
+export interface ControlProps extends ControlData, ControlFunctions {
+  key?: string;
+}
+
+export interface ControlData {
+  id: string;
+  label: string;
+  propertyName: string;
+  controlType: ControlType;
+}
+
+export interface ControlFunctions {
+  onPropertyChange?: (propertyName: string, propertyValue: string) => void;
+}
+
+export default BaseControl;

app/client/src/pages/propertyControls/DropDownControl.tsx

@@ -0,0 +1,74 @@
+import React, { SyntheticEvent } from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { ControlType } from "../../constants/PropertyControlConstants";
+import { Button, MenuItem } from "@blueprintjs/core";
+import { Select, IItemRendererProps } from "@blueprintjs/select";
+
+class DropDownControl extends BaseControl<DropDownControlProps> {
+  constructor(props: DropDownControlProps) {
+    super(props);
+    this.onItemSelect = this.onItemSelect.bind(this);
+  }
+
+  render() {
+    const DropDown = Select.ofType<DropdownOption>();
+    return (
+      <DropDown
+        items={this.props.options}
+        itemPredicate={this.filterOption}
+        itemRenderer={this.renderItem}
+        onItemSelect={this.onItemSelect}
+        noResults={<MenuItem disabled={true} text="No results." />}
+      >
+        <Button
+          text={this.props.options[0].label}
+          rightIcon="double-caret-vertical"
+        />
+      </DropDown>
+    );
+  }
+
+  onItemSelect(
+    item: DropdownOption,
+    event?: SyntheticEvent<HTMLElement>,
+  ): void {
+    this.updateProperty(this.props.propertyName, item.value);
+  }
+
+  renderItem(option: DropdownOption, itemProps: IItemRendererProps) {
+    if (!itemProps.modifiers.matchesPredicate) {
+      return null;
+    }
+    return (
+      <MenuItem
+        active={itemProps.modifiers.active}
+        key={option.value}
+        label={option.label}
+        onClick={itemProps.handleClick}
+        text={option.label}
+      />
+    );
+  }
+
+  filterOption(query: string, option: DropdownOption): boolean {
+    return (
+      option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
+      option.value.toLowerCase().indexOf(query.toLowerCase()) >= 0
+    );
+  }
+
+  getControlType(): ControlType {
+    return "DROP_DOWN";
+  }
+}
+
+export interface DropdownOption {
+  label: string;
+  value: string;
+}
+
+export interface DropDownControlProps extends ControlProps {
+  options: DropdownOption[];
+}
+
+export default DropDownControl;

app/client/src/pages/propertyControls/InputTextControl.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { ControlType } from "../../constants/PropertyControlConstants";
+import { InputGroup } from "@blueprintjs/core";
+import { InputType } from "../../widgets/InputWidget";
+
+class InputTextControl extends BaseControl<InputControlProps> {
+  render() {
+    return <InputGroup onChange={this.onTextChange} />;
+  }
+
+  onTextChange(event: React.ChangeEvent<HTMLInputElement>) {
+    this.updateProperty(this.props.propertyName, event.target.value);
+  }
+
+  getControlType(): ControlType {
+    return "INPUT_TEXT";
+  }
+}
+
+export interface InputControlProps extends ControlProps {
+  placeholderText: string;
+  inputType: InputType;
+  isDisabled?: boolean;
+}
+
+export default InputTextControl;

app/client/src/reducers/entityReducers/canvasWidgetsReducer.tsx

@@ -6,6 +6,7 @@ import {
 } from "../../constants/ReduxActionConstants";
 import { WidgetProps } from "../../widgets/BaseWidget";
 import { ContainerWidgetProps } from "../../widgets/ContainerWidget";
+import { UpdateWidgetPropertyPayload } from "../../actions/controlActions";
 
 const initialState: CanvasWidgetsReduxState = {};
 
@@ -14,7 +15,7 @@ export type FlattenedWidgetProps = ContainerWidgetProps<WidgetProps> & {
 };
 
 const canvasWidgetsReducer = createReducer(initialState, {
-  [ReduxActionTypes.LOAD_CANVAS_WIDGETS]: (
+  [ReduxActionTypes.UPDATE_CANVAS]: (
     state: CanvasWidgetsReduxState,
     action: ReduxAction<LoadCanvasWidgetsPayload>,
   ) => {
@@ -26,6 +27,19 @@ const canvasWidgetsReducer = createReducer(initialState, {
   ) => {
     return { ...action.payload.widgets };
   },
+  [ReduxActionTypes.UPDATE_WIDGET_PROPERTY]: (
+    state: CanvasWidgetsReduxState,
+    action: ReduxAction<UpdateWidgetPropertyPayload>,
+  ) => {
+    const widget = state[action.payload.widgetId];
+    return {
+      state,
+      [action.payload.widgetId]: {
+        ...widget,
+        [action.payload.propertyName]: action.payload.propertyValue,
+      },
+    };
+  },
 });
 
 export interface CanvasWidgetsReduxState {

app/client/src/reducers/entityReducers/index.tsx

@@ -2,7 +2,7 @@ import { combineReducers } from "redux";
 import canvasWidgetsReducer from "./canvasWidgetsReducer";
 import apiDataReducer from "./apiDataReducer";
 import queryDataReducer from "./queryDataReducer";
-import widgetConfigReducer from "./widgetConfigReducer.tsx";
+import widgetConfigReducer from "./widgetConfigReducer";
 import actionsReducer from "./actionsReducer";
 
 const entityReducer = combineReducers({

app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx

@@ -0,0 +1,57 @@
+import { createReducer } from "../../utils/AppsmithUtils";
+import {
+  ReduxActionTypes,
+  ReduxAction,
+} from "../../constants/ReduxActionConstants";
+import PropertyPaneConfigResponse from "../../mockResponses/PropertyPaneConfigResponse";
+import { InputControlProps } from "../../pages/propertyControls/InputTextControl";
+import { DropDownControlProps } from "../../pages/propertyControls/DropDownControl";
+import { ControlProps } from "../../pages/propertyControls/BaseControl";
+
+const initialState: PropertyPaneConfigState = PropertyPaneConfigResponse;
+
+export type ControlConfig =
+  | InputControlProps
+  | DropDownControlProps
+  | InputControlProps
+  | ControlProps;
+
+export type SectionOrientation = "HORIZONTAL" | "VERTICAL";
+
+export interface PropertySection {
+  id: string;
+  sectionName?: string;
+  orientation?: SectionOrientation;
+  children: (ControlConfig | PropertySection)[];
+}
+
+export interface PropertyConfig {
+  BUTTON_WIDGET: PropertySection[];
+  TEXT_WIDGET: PropertySection[];
+  IMAGE_WIDGET: PropertySection[];
+  INPUT_WIDGET: PropertySection[];
+  SWITCH_WIDGET: PropertySection[];
+  CONTAINER_WIDGET: PropertySection[];
+  SPINNER_WIDGET: PropertySection[];
+  DATE_PICKER_WIDGET: PropertySection[];
+  TABLE_WIDGET: PropertySection[];
+  DROP_DOWN_WIDGET: PropertySection[];
+  CHECKBOX_WIDGET: PropertySection[];
+  RADIO_GROUP_WIDGET: PropertySection[];
+}
+
+export interface PropertyPaneConfigState {
+  config: PropertyConfig;
+  configVersion: number;
+}
+
+const widgetConfigReducer = createReducer(initialState, {
+  [ReduxActionTypes.LOAD_PROPERTY_CONFIG]: (
+    state: PropertyPaneConfigState,
+    action: ReduxAction<PropertyPaneConfigState>,
+  ) => {
+    return { ...action.payload };
+  },
+});
+
+export default widgetConfigReducer;

app/client/src/reducers/entityReducers/widgetConfigReducer.tsx

@@ -2,7 +2,6 @@ import { createReducer } from "../../utils/AppsmithUtils";
 import {
   ReduxActionTypes,
   ReduxAction,
-  LoadWidgetConfigPayload,
 } from "../../constants/ReduxActionConstants";
 import { WidgetProps } from "../../widgets/BaseWidget";
 import WidgetConfigResponse from "../../mockResponses/WidgetConfigResponse";
@@ -28,26 +27,29 @@ export interface WidgetConfigProps {
 }
 
 export interface WidgetConfigReducerState {
-  BUTTON_WIDGET: Partial<ButtonWidgetProps> & WidgetConfigProps;
+  config: {
-  TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps;
+    BUTTON_WIDGET: Partial<ButtonWidgetProps> & WidgetConfigProps;
-  IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps;
+    TEXT_WIDGET: Partial<TextWidgetProps> & WidgetConfigProps;
-  INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
+    IMAGE_WIDGET: Partial<ImageWidgetProps> & WidgetConfigProps;
-  SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
+    INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
-  CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
+    SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
-    WidgetConfigProps;
+    CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
-  SPINNER_WIDGET: Partial<SpinnerWidgetProps> & WidgetConfigProps;
+      WidgetConfigProps;
-  DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
+    SPINNER_WIDGET: Partial<SpinnerWidgetProps> & WidgetConfigProps;
-  TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
+    DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
-  DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
+    TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
-  CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
+    DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
-  RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
+    CHECKBOX_WIDGET: Partial<CheckboxWidgetProps> & WidgetConfigProps;
-  ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
+    RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
+    ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
+  };
+  configVersion: number;
 }
 
 const widgetConfigReducer = createReducer(initialState, {
   [ReduxActionTypes.LOAD_WIDGET_CONFIG]: (
     state: WidgetConfigReducerState,
-    action: ReduxAction<LoadWidgetConfigPayload>,
+    action: ReduxAction<WidgetConfigReducerState>,
   ) => {
     return { ...action.payload };
   },

app/client/src/reducers/index.tsx

@@ -7,6 +7,8 @@ import { EditorReduxState } from "./uiReducers/editorReducer";
 import { APIDataState } from "./entityReducers/apiDataReducer";
 import { QueryDataState } from "./entityReducers/queryDataReducer";
 import { ActionDataState } from "./entityReducers/actionsReducer";
+import { PropertyPaneConfigState } from "./entityReducers/propertyPaneConfigReducer";
+import { PropertyPaneReduxState } from "./uiReducers/propertyPaneReducer";
 
 const appReducer = combineReducers({
   entities: entityReducer,
@@ -19,11 +21,13 @@ export interface AppState {
   ui: {
     widgetCardsPane: WidgetCardsPaneReduxState;
     editor: EditorReduxState;
+    propertyPane: PropertyPaneReduxState;
   };
   entities: {
     canvasWidgets: CanvasWidgetsReduxState;
     apiData: APIDataState;
     queryData: QueryDataState;
     actions: ActionDataState;
+    propertyConfig: PropertyPaneConfigState;
   };
 }

app/client/src/reducers/uiReducers/editorReducer.tsx

@@ -12,6 +12,7 @@ const initialState: EditorReduxState = {
   pageWidgetId: "0",
   currentPageId: "5d807e76795dc6000482bc76",
   currentLayoutId: "5d807e76795dc6000482bc75",
+  isSaving: false,
 };
 
 const editorReducer = createReducer(initialState, {
@@ -27,6 +28,17 @@ const editorReducer = createReducer(initialState, {
   ) => {
     return { ...state, pageWidgetId: action.payload.pageWidgetId };
   },
+  [ReduxActionTypes.SAVE_PAGE_INIT]: (state: EditorReduxState) => {
+    return { ...state, isSaving: true };
+  },
+  [ReduxActionTypes.SAVE_PAGE_SUCCESS]: (state: EditorReduxState) => {
+    return { ...state, isSaving: false };
+  },
+  [ReduxActionTypes.SAVE_PAGE_ERROR]: (state: EditorReduxState) => {
+    // TODO(abhinav): It will be painful to handle all errors like this
+    // make this generic and global toasts to show messages on error.
+    return { ...state, isSaving: false };
+  },
 });
 
 export interface EditorReduxState {
@@ -37,6 +49,7 @@ export interface EditorReduxState {
   pageWidgetId: string;
   currentPageId: string;
   currentLayoutId: string;
+  isSaving: boolean;
 }
 
 export default editorReducer;

app/client/src/reducers/uiReducers/index.tsx

@@ -2,10 +2,12 @@ import { combineReducers } from "redux";
 import widgetCardsPaneReducer from "./widgetCardsPaneReducer";
 import editorHeaderReducer from "./editorHeaderReducer";
 import editorReducer from "./editorReducer";
+import propertyPaneReducer from "./propertyPaneReducer";
 
 const uiReducer = combineReducers({
   widgetCardsPane: widgetCardsPaneReducer,
   editorHeader: editorHeaderReducer,
   editor: editorReducer,
+  propertyPane: propertyPaneReducer,
 });
 export default uiReducer;

app/client/src/reducers/uiReducers/propertyPaneReducer.tsx

@@ -0,0 +1,26 @@
+import { createReducer } from "../../utils/AppsmithUtils";
+import {
+  ReduxActionTypes,
+  ReduxAction,
+  ShowPropertyPanePayload,
+} from "../../constants/ReduxActionConstants";
+
+const initialState: PropertyPaneReduxState = {
+  isVisible: false,
+};
+
+const propertyPaneReducer = createReducer(initialState, {
+  [ReduxActionTypes.SHOW_PROPERTY_PANE]: (
+    state: PropertyPaneReduxState,
+    action: ReduxAction<ShowPropertyPanePayload>,
+  ) => {
+    return { widgetId: action.payload };
+  },
+});
+
+export interface PropertyPaneReduxState {
+  widgetId?: string;
+  isVisible: boolean;
+}
+
+export default propertyPaneReducer;

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,52 +30,37 @@ 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 responses: any = yield all(
+  const executeActionRequest: ExecuteActionRequest = {
-    api.dynamicBindings.map((jsonPath: string) => {
+    actionId: apiAction.actionId,
-      return call(evaluateJSONPathSaga, jsonPath);
+  };
-    }),
+  if (!_.isNil(api.dynamicBindings)) {
-  );
+    const responses: any = yield all(
-  const dynamicBindingMap: Record<string, any> = _.keyBy(
+      api.dynamicBindings.map((jsonPath: string) => {
-    responses,
+        return call(evaluateJSONPathSaga, jsonPath);
-    (response: string, index: number) => {
+      }),
-      return api.dynamicBindings[index];
+    );
-    },
+    const dynamicBindingMap: Record<string, any> = _.keyBy(
-  );
+      responses,
-  yield ActionAPI.executeAction({
+      (response: string, index: number) => {
-    actionId: apiAction.apiId,
+        return api.dynamicBindings ? api.dynamicBindings[index] : undefined;
-    dynamicBindingMap: dynamicBindingMap,
+      },
-  });
+    );
-}
+    executeActionRequest.dynamicBindingList = mapToPropList(dynamicBindingMap);
-
+  }
-export function* executeQueryActionSaga(queryAction: QueryActionPayload) {
+  yield ActionAPI.executeAction(executeActionRequest);
-  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

@@ -5,7 +5,7 @@ import {
   LoadCanvasWidgetsPayload,
 } from "../constants/ReduxActionConstants";
 import {
-  loadCanvasWidgets,
+  updateCanvas,
   savePageError,
   savePageSuccess,
   fetchPageError,
@@ -44,19 +44,19 @@ export function* fetchPageSaga(
       const canvasWidgetsPayload: LoadCanvasWidgetsPayload = {
         pageWidgetId: normalizedResponse.result,
         widgets: normalizedResponse.entities.canvasWidgets,
-        layoutId: fetchPageResponse.data.layouts[0].id,
+        layoutId: fetchPageResponse.data.layouts[0].id, // TODO(abhinav): Handle for multiple layouts
       };
-      yield put(loadCanvasWidgets(canvasWidgetsPayload));
+      yield all([
-      yield put({
+        put(updateCanvas(canvasWidgetsPayload)),
-        type: ReduxActionTypes.LOAD_CANVAS_ACTIONS,
+        put({
-        payload: fetchPageResponse.data.layouts[0].actions, // TODO: Refactor
+          type: ReduxActionTypes.LOAD_CANVAS_ACTIONS,
-      });
+          payload: fetchPageResponse.data.layouts[0].actions, // TODO(abhinav): Handle for multiple layouts
-    } else {
+        }),
-      yield put(fetchPageError(fetchPageResponse.responseMeta));
+      ]);
     }
-  } catch (err) {
+  } catch (error) {
-    console.log(err);
+    console.log(error);
-    //TODO(abhinav): REFACTOR THIS
+    yield put(fetchPageError(error));
   }
 }
 

app/client/src/utils/AppsmithUtils.tsx

@@ -9,6 +9,10 @@ import * as Sentry from "@sentry/browser";
 import AnalyticsUtil from "./AnalyticsUtil";
 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,
@@ -24,6 +28,8 @@ export const createReducer = (
 };
 
 export const appInitializer = () => {
+  WidgetBuilderRegistry.registerWidgetBuilders();
+  PropertyControlRegistry.registerPropertyControlBuilders();
   netlifyIdentity.init();
   switch (process.env.REACT_APP_ENVIRONMENT) {
     case "PRODUCTION":
@@ -48,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 };
+  });
+};

app/client/src/utils/PropertyControlFactory.tsx

@@ -0,0 +1,51 @@
+import { ControlType } from "../constants/PropertyControlConstants";
+import {
+  ControlBuilder,
+  ControlProps,
+  ControlData,
+  ControlFunctions,
+} from "../pages/propertyControls/BaseControl";
+
+class PropertyControlFactory {
+  static controlMap: Map<ControlType, ControlBuilder<ControlProps>> = new Map();
+
+  static registerControlBuilder(
+    controlType: ControlType,
+    controlBuilder: ControlBuilder<ControlProps>,
+  ) {
+    this.controlMap.set(controlType, controlBuilder);
+  }
+
+  static createControl(
+    controlData: ControlData,
+    controlFunctions: ControlFunctions,
+  ): JSX.Element {
+    const controlBuilder = this.controlMap.get(controlData.controlType);
+    if (controlBuilder) {
+      const controlProps: ControlProps = {
+        ...controlData,
+        ...controlFunctions,
+        key: controlData.id,
+      };
+      const control = controlBuilder.buildPropertyControl(controlProps);
+      return control;
+    } else {
+      const ex: ControlCreationException = {
+        message:
+          "Control Builder not registered for control type" +
+          controlData.controlType,
+      };
+      throw ex;
+    }
+  }
+
+  static getControlTypes(): ControlType[] {
+    return Array.from(this.controlMap.keys());
+  }
+}
+
+export interface ControlCreationException {
+  message: string;
+}
+
+export default PropertyControlFactory;

app/client/src/utils/PropertyControlRegistry.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PropertyControlFactory from "./PropertyControlFactory";
+import InputTextControl, {
+  InputControlProps,
+} from "../pages/propertyControls/InputTextControl";
+import DropDownControl, {
+  DropDownControlProps,
+} from "../pages/propertyControls/DropDownControl";
+
+class PropertyControlRegistry {
+  static registerPropertyControlBuilders() {
+    PropertyControlFactory.registerControlBuilder("INPUT_TEXT", {
+      buildPropertyControl(controlProps: InputControlProps): JSX.Element {
+        return <InputTextControl {...controlProps} />;
+      },
+    });
+    PropertyControlFactory.registerControlBuilder("DROP_DOWN", {
+      buildPropertyControl(controlProps: DropDownControlProps): JSX.Element {
+        return <DropDownControl {...controlProps} />;
+      },
+    });
+  }
+}
+
+export default PropertyControlRegistry;

app/client/src/widgets/AlertWidget.tsx

@@ -1,16 +1,12 @@
-import React from "react";
+import React, { Component } from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "../constants/WidgetConstants";
 import { ActionPayload } from "../constants/ActionConstants";
 
-class AlertWidget extends BaseWidget<AlertWidgetProps, WidgetState> {
+class AlertWidget extends Component {
   getPageView() {
     return <div />;
   }
-
-  getWidgetType(): WidgetType {
-    return "ALERT_WIDGET";
-  }
 }
 
 export type AlertType = "DIALOG" | "NOTIFICATION";

app/client/src/widgets/ButtonWidget.tsx

@@ -38,6 +38,7 @@ export interface ButtonWidgetProps extends WidgetProps {
   text?: string;
   buttonStyle?: ButtonStyle;
   onClick?: ActionPayload[];
+  isDisabled?: boolean;
 }
 
 export default ButtonWidget;

app/client/src/widgets/DatePickerWidget.tsx

@@ -19,7 +19,7 @@ export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
 
 export interface DatePickerWidgetProps extends WidgetProps {
   defaultDate?: Date;
-  timezone?: TimeZone;
+  defaultTimezone?: TimeZone;
   enableTime: boolean;
   label: string;
   datePickerType: DatePickerType;

app/client/src/widgets/DropdownWidget.tsx

@@ -20,7 +20,7 @@ export interface DropdownOption {
 }
 
 export interface DropdownWidgetProps extends WidgetProps {
-  placeholder?: string;
+  placeholderText?: string;
   label?: string;
   selectionType: SelectionType;
   options?: DropdownOption[];

app/client/src/widgets/InputWidget.tsx

@@ -22,13 +22,19 @@ export type InputType =
   | "CURRENCY"
   | "SEARCH";
 
+export interface InputValidator {
+  validationRegex: string;
+  errorMessage: string;
+}
 export interface InputWidgetProps extends WidgetProps {
-  errorMessage?: string;
   inputType: InputType;
   defaultText?: string;
-  placeholder?: string;
+  placeholderText?: string;
+  maxChars?: number;
   label: string;
+  inputValidators: InputValidator[];
   focusIndex?: number;
+  isAutoFocusEnabled?: boolean;
 }
 
 export default InputWidget;

app/client/src/widgets/TableWidget.tsx

@@ -15,13 +15,18 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
 
 export type PaginationType = "PAGES" | "INFINITE_SCROLL";
 
+export interface TableAction extends ActionPayload {
+  actionName: string;
+}
+
 export interface TableWidgetProps extends WidgetProps {
-  pageKey?: string;
+  nextPageKey?: string;
+  prevPageKey?: string;
   label: string;
   tableData?: object[];
+  recordActions?: TableAction[];
   onPageChange?: ActionPayload[];
   onRowSelected?: ActionPayload[];
-  onColumnActionClick?: Record<string, ActionPayload[]>;
 }
 
 export default TableWidget;

app/client/src/widgets/TextWidget.tsx

@@ -11,7 +11,6 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
         text={this.props.text}
-        tagName={this.props.tagName}
       />
     );
   }
@@ -26,7 +25,6 @@ export type TextStyle = "BODY" | "HEADING" | "LABEL" | "SUB_TEXT";
 export interface TextWidgetProps extends WidgetProps {
   text?: string;
   textStyle?: TextStyle;
-  tagName?: keyof JSX.IntrinsicElements;
 }
 
 export default TextWidget;

app/client/yarn.lock

@@ -894,7 +894,7 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@blueprintjs/core@^3.11.0", "@blueprintjs/core@^3.18.1":
+"@blueprintjs/core@^3.11.0", "@blueprintjs/core@^3.18.0", "@blueprintjs/core@^3.18.1":
   version "3.18.1"
   resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-3.18.1.tgz#cf180d470710a0e9123fb2449113be06cf0d81ce"
   integrity sha512-G+IhJsN006Mb32NLOrne5TLScxyyd3Id9g2MvfYFq9zuyBcBA5+V/uQy3pTO9vkmuKEz0GLLy8ZbrQ7Us/+zTw==
@@ -928,6 +928,15 @@
     classnames "^2.2"
     tslib "~1.9.0"
 
+"@blueprintjs/select@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-3.10.0.tgz#e5711a25416e62d236afb8a3062af45b3b4206ef"
+  integrity sha512-Akm/L5tndrOUuf05od9IJ0WSQgHdbJ4/i2RRoLLH5ZiI8s1OZiCbKJYDSCbCOTviCdZSuL0qkJsBcYhOI/Czeg==
+  dependencies:
+    "@blueprintjs/core" "^3.18.0"
+    classnames "^2.2"
+    tslib "~1.9.0"
+
 "@blueprintjs/table@^3.4.0":
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/@blueprintjs/table/-/table-3.7.1.tgz#3e3e876a2f0b8bebfc26d4bf8350a120614c88aa"
@@ -9944,6 +9953,11 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redux-devtools-extension@^2.13.8:
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
+  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
+
 redux-devtools-instrument@^1.9.0:
   version "1.9.6"
   resolved "https://registry.yarnpkg.com/redux-devtools-instrument/-/redux-devtools-instrument-1.9.6.tgz#6b412595f74b9d48cfd4ecc13e585b1588ed6e7e"
@@ -11751,7 +11765,7 @@ typescript-tuple@^2.1.0:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@^3.2.4, typescript@^3.4.5:
+typescript@^3.4.5, typescript@^3.6.3:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.6.3.tgz#fea942fabb20f7e1ca7164ff626f1a9f3f70b4da"
   integrity sha512-N7bceJL1CtRQ2RiG0AQME13ksR7DiuQh/QehubYcghzv20tnh+MQnQIuJddTmsbqYj+dztchykemz0zFzlvdQw==