From 27804d6ec62bc26768d5b736b8542509d2251e23 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Tue, 14 Apr 2020 05:35:16 +0000
Subject: [PATCH 01/31] DRY property control creation. Generate ids for
 property pane config on the client. Add Multi switch control. Add Icon Widget
 (WIP). Enable blueprint based actions.

---
 .../cypress/locators/commonlocators.json      |   2 +-
 .../designSystems/appsmith/IconComponent.tsx  |  34 ++
 .../designSystems/blueprint/CloseButton.tsx   |  10 +-
 .../designSystems/blueprint/IconComponent.tsx |  24 --
 .../blueprint/ModalComponent.tsx              |  13 -
 .../ActionSelectorControl.tsx                 |   3 +-
 .../propertyControls/BaseControl.tsx          |   2 -
 .../propertyControls/CodeEditorControl.tsx    |   3 +-
 .../ColumnActionSelectorControl.tsx           |   3 +-
 .../propertyControls/DatePickerControl.tsx    |   3 +-
 .../propertyControls/DropDownControl.tsx      |   3 +-
 .../propertyControls/InputTextControl.tsx     |   3 +-
 .../propertyControls/MultiSelectControl.tsx   |   3 +-
 .../propertyControls/MultiSwitchControl.tsx   |  46 +++
 .../propertyControls/OptionControl.tsx        |   3 +-
 .../propertyControls/SwitchControl.tsx        |   3 +-
 .../propertyControls/TimezoneControl.tsx      |   3 +-
 .../components/propertyControls/index.test.ts |  10 +
 .../src/components/propertyControls/index.ts  |  63 ++++
 .../constants/PropertyControlConstants.tsx    |  25 +-
 app/client/src/constants/WidgetConstants.tsx  |   8 +-
 .../PropertyPaneConfigResponse.tsx            | 348 +++++++++++++++---
 .../mockResponses/WidgetConfigResponse.tsx    |  58 ++-
 .../Editor/PropertyPane/PropertyControl.tsx   |   4 +-
 .../src/pages/Editor/PropertyPane/index.tsx   |   9 +-
 .../propertyPaneConfigReducer.tsx             |  16 +-
 .../entityReducers/widgetConfigReducer.tsx    |   6 +-
 app/client/src/sagas/ConfigsSagas.tsx         |  23 +-
 app/client/src/sagas/WidgetBlueprintSagas.ts  |  61 +++
 app/client/src/sagas/WidgetOperationSagas.tsx |  23 +-
 .../src/utils/PropertyControlRegistry.tsx     |  89 +----
 app/client/src/utils/WidgetPropsUtils.tsx     |   1 +
 app/client/src/utils/WidgetRegistry.tsx       |  26 +-
 app/client/src/widgets/IconWidget.tsx         |  65 ++++
 app/client/src/widgets/InputWidget.tsx        |  21 +-
 app/client/src/widgets/SpinnerWidget.tsx      |  46 ---
 app/client/src/widgets/SwitchWidget.tsx       |  33 +-
 37 files changed, 755 insertions(+), 341 deletions(-)
 create mode 100644 app/client/src/components/designSystems/appsmith/IconComponent.tsx
 delete mode 100644 app/client/src/components/designSystems/blueprint/IconComponent.tsx
 create mode 100644 app/client/src/components/propertyControls/MultiSwitchControl.tsx
 create mode 100644 app/client/src/components/propertyControls/index.test.ts
 create mode 100644 app/client/src/components/propertyControls/index.ts
 create mode 100644 app/client/src/widgets/IconWidget.tsx
 delete mode 100644 app/client/src/widgets/SpinnerWidget.tsx

diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
index 766a9416be..4390b0e0c8 100644
--- a/app/client/cypress/locators/commonlocators.json
+++ b/app/client/cypress/locators/commonlocators.json
@@ -1,6 +1,6 @@
 {
     "editIcon":".t--widget-propertypane-toggle",
-    "editPropCrossButton":"span[icon='cross']",
+    "editPropCrossButton":".t--property-pane-close-btn",
     "deleteWidgetIcon":".t--widget-delete-control",
     "dropdownSelectButton":".t--open-dropdown-Select"
    
diff --git a/app/client/src/components/designSystems/appsmith/IconComponent.tsx b/app/client/src/components/designSystems/appsmith/IconComponent.tsx
new file mode 100644
index 0000000000..14058919bf
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/IconComponent.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Icon, Intent } from "@blueprintjs/core";
+import { IconName } from "@blueprintjs/icons";
+import { noop } from "utils/AppsmithUtils";
+export type IconType = IconName | string;
+
+class IconComponent extends React.Component<IconComponentProps> {
+  render() {
+    return (
+      <Icon
+        style={{
+          cursor:
+            this.props.onClick && !this.props.disabled ? "pointer" : "auto",
+        }}
+        icon={this.props.iconName as IconName}
+        iconSize={this.props.iconSize}
+        intent={this.props.intent}
+        onClick={this.props.disabled ? noop : this.props.onClick}
+        color={this.props.color}
+      />
+    );
+  }
+}
+
+export interface IconComponentProps {
+  iconSize?: number;
+  iconName?: IconType;
+  intent?: Intent;
+  disabled?: boolean;
+  onClick?: () => void;
+  color: string;
+}
+
+export default IconComponent;
diff --git a/app/client/src/components/designSystems/blueprint/CloseButton.tsx b/app/client/src/components/designSystems/blueprint/CloseButton.tsx
index b683e08d57..3fc440c064 100644
--- a/app/client/src/components/designSystems/blueprint/CloseButton.tsx
+++ b/app/client/src/components/designSystems/blueprint/CloseButton.tsx
@@ -6,6 +6,7 @@ type CloseButtonProps = {
   color: Color;
   size: number;
   onClick: React.MouseEventHandler;
+  className?: string;
 };
 
 const StyledButton = styled(Button)<CloseButtonProps>`
@@ -22,5 +23,12 @@ const StyledButton = styled(Button)<CloseButtonProps>`
 `;
 
 export const CloseButton = (props: CloseButtonProps) => {
-  return <StyledButton {...props} rightIcon="cross" minimal />;
+  return (
+    <StyledButton
+      className={props.className}
+      {...props}
+      rightIcon="cross"
+      minimal
+    />
+  );
 };
diff --git a/app/client/src/components/designSystems/blueprint/IconComponent.tsx b/app/client/src/components/designSystems/blueprint/IconComponent.tsx
deleted file mode 100644
index 493baecdcc..0000000000
--- a/app/client/src/components/designSystems/blueprint/IconComponent.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react";
-import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
-import { Icon, Intent } from "@blueprintjs/core";
-import { IconName } from "@blueprintjs/icons";
-class IconComponent extends React.Component<IconComponentProps> {
-  render() {
-    return (
-      <Icon
-        icon={this.props.icon}
-        iconSize={this.props.iconSize}
-        intent={this.props.intent}
-      />
-    );
-  }
-}
-
-export interface IconComponentProps extends ComponentProps {
-  iconSize?: number;
-  icon?: IconName;
-  intent?: Intent;
-  ellipsize?: boolean;
-}
-
-export default IconComponent;
diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index bf24be91c7..7c01d19147 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -1,9 +1,7 @@
 import React, { ReactNode, RefObject, useRef, useEffect } from "react";
 import { Overlay, Classes } from "@blueprintjs/core";
 import styled from "styled-components";
-import { ControlIcons } from "icons/ControlIcons";
 import { getCanvasClassName } from "utils/generators";
-const CloseModalControl = ControlIcons.CLOSE_CONTROL;
 const Container = styled.div<{
   width: number;
   height: number;
@@ -44,13 +42,6 @@ const Content = styled.div<{
   height: ${props => props.height}px;
 `;
 
-const CloseModalTrigger = styled(CloseModalControl)`
-  position: absolute;
-  right: -30px;
-  top: 0px;
-  cursor: pointer;
-`;
-
 export type ModalComponentProps = {
   isOpen: boolean;
   onClose: (e: any) => void;
@@ -84,10 +75,6 @@ export const ModalComponent = (props: ModalComponentProps) => {
         enforceFocus={false}
       >
         <div>
-          <CloseModalTrigger
-            onClick={props.onClose}
-            className="t--modal-close"
-          />
           <Content
             scroll={props.scrollContents}
             className={`${getCanvasClassName()} ${props.className}`}
diff --git a/app/client/src/components/propertyControls/ActionSelectorControl.tsx b/app/client/src/components/propertyControls/ActionSelectorControl.tsx
index 4bd3a2813b..3a9ef3d73b 100644
--- a/app/client/src/components/propertyControls/ActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ActionSelectorControl.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
-import { ControlType } from "constants/PropertyControlConstants";
 import DynamicActionCreator from "components/editorComponents/DynamicActionCreator";
 
 class ActionSelectorControl extends BaseControl<ControlProps> {
@@ -21,7 +20,7 @@ class ActionSelectorControl extends BaseControl<ControlProps> {
     );
   }
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "ACTION_SELECTOR";
   }
 }
diff --git a/app/client/src/components/propertyControls/BaseControl.tsx b/app/client/src/components/propertyControls/BaseControl.tsx
index 78dbef6dfd..d108a15cdf 100644
--- a/app/client/src/components/propertyControls/BaseControl.tsx
+++ b/app/client/src/components/propertyControls/BaseControl.tsx
@@ -14,8 +14,6 @@ abstract class BaseControl<P extends ControlProps, S = {}> extends Component<
     if (!_.isNil(this.props.onPropertyChange))
       this.props.onPropertyChange(propertyName, propertyValue);
   }
-
-  abstract getControlType(): ControlType;
 }
 
 export interface ControlBuilder<T extends ControlProps> {
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index 234fd0b33f..f7ee11926d 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -1,6 +1,5 @@
 import React, { ChangeEvent } from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
-import { ControlType } from "constants/PropertyControlConstants";
 import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
 import { EventOrValueHandler } from "redux-form";
 class CodeEditorControl extends BaseControl<ControlProps> {
@@ -25,7 +24,7 @@ class CodeEditorControl extends BaseControl<ControlProps> {
     this.updateProperty(this.props.propertyName, value);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "CODE_EDITOR";
   }
 }
diff --git a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
index ce6617e6be..d64df72cfe 100644
--- a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import BaseControl, { ControlProps } from "./BaseControl";
 import { StyledPropertyPaneButton } from "./StyledControls";
-import { ControlType } from "constants/PropertyControlConstants";
 import { generateReactKey } from "utils/generators";
 import styled from "constants/DefaultTheme";
 import { AnyStyledComponent } from "styled-components";
@@ -128,7 +127,7 @@ class ColumnActionSelectorControl extends BaseControl<
     this.updateProperty(this.props.propertyName, update);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "COLUMN_ACTION_SELECTOR";
   }
 }
diff --git a/app/client/src/components/propertyControls/DatePickerControl.tsx b/app/client/src/components/propertyControls/DatePickerControl.tsx
index 79321bce7a..5f350be5d1 100644
--- a/app/client/src/components/propertyControls/DatePickerControl.tsx
+++ b/app/client/src/components/propertyControls/DatePickerControl.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { StyledDatePicker } from "./StyledControls";
-import { ControlType } from "constants/PropertyControlConstants";
 import moment from "moment-timezone";
 
 class DatePickerControl extends BaseControl<DatePickerControlProps> {
@@ -35,7 +34,7 @@ class DatePickerControl extends BaseControl<DatePickerControlProps> {
     this.updateProperty(this.props.propertyName, date);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "DATE_PICKER";
   }
 }
diff --git a/app/client/src/components/propertyControls/DropDownControl.tsx b/app/client/src/components/propertyControls/DropDownControl.tsx
index 46ef56d48a..9aba458854 100644
--- a/app/client/src/components/propertyControls/DropDownControl.tsx
+++ b/app/client/src/components/propertyControls/DropDownControl.tsx
@@ -4,7 +4,6 @@ import { Button, MenuItem } from "@blueprintjs/core";
 import { IItemRendererProps } from "@blueprintjs/select";
 import { StyledDropDown, StyledDropDownContainer } from "./StyledControls";
 import { DropdownOption } from "widgets/DropdownWidget";
-import { ControlType } from "constants/PropertyControlConstants";
 
 class DropDownControl extends BaseControl<DropDownControlProps> {
   render() {
@@ -57,7 +56,7 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
     return selectedOption.value === this.props.propertyValue;
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "DROP_DOWN";
   }
 }
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index 208b0446c0..e87f9ac006 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { StyledDynamicInput } from "./StyledControls";
 import { InputType } from "widgets/InputWidget";
-import { ControlType } from "constants/PropertyControlConstants";
 import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
 
 export function InputText(props: {
@@ -75,7 +74,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
     this.updateProperty(this.props.propertyName, value);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "INPUT_TEXT";
   }
 }
diff --git a/app/client/src/components/propertyControls/MultiSelectControl.tsx b/app/client/src/components/propertyControls/MultiSelectControl.tsx
index d0c54229d8..ba41b1236a 100644
--- a/app/client/src/components/propertyControls/MultiSelectControl.tsx
+++ b/app/client/src/components/propertyControls/MultiSelectControl.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
-import { ControlType } from "constants/PropertyControlConstants";
 import { MenuItem } from "@blueprintjs/core";
 import { IItemRendererProps } from "@blueprintjs/select";
 import { StyledMultiSelectDropDown } from "./StyledControls";
@@ -81,7 +80,7 @@ class MultiSelectControl extends BaseControl<MultiSelectControlProps> {
     );
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "MULTI_SELECT";
   }
 }
diff --git a/app/client/src/components/propertyControls/MultiSwitchControl.tsx b/app/client/src/components/propertyControls/MultiSwitchControl.tsx
new file mode 100644
index 0000000000..0e67483212
--- /dev/null
+++ b/app/client/src/components/propertyControls/MultiSwitchControl.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { IconName, ButtonGroup, Button, Classes } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+const iconNames: string[] = Object.values({ ...IconNames });
+
+class MultiSwitchControl extends BaseControl<MultiSwitchControlProps> {
+  renderOption = (option: SwitchOption) => {
+    const isIcon: boolean =
+      !!option.icon && iconNames.indexOf(option.icon) > -1;
+    return (
+      <Button
+        key={option.label || option.icon}
+        icon={isIcon ? (option.icon as IconName) : undefined}
+        text={!isIcon && option.label}
+        active={this.props.propertyValue === option.value}
+        onClick={() =>
+          this.updateProperty(this.props.propertyName, option.value)
+        }
+      />
+    );
+  };
+  render() {
+    return (
+      <ButtonGroup className={Classes.DARK}>
+        {this.props.options.map(this.renderOption)}
+      </ButtonGroup>
+    );
+  }
+  static getControlType() {
+    return "MULTI_SWITCH";
+  }
+}
+
+interface SwitchOption {
+  label?: string;
+  icon?: string;
+  altText?: string;
+  value: string | number;
+}
+
+export interface MultiSwitchControlProps extends ControlProps {
+  options: SwitchOption[];
+}
+
+export default MultiSwitchControl;
diff --git a/app/client/src/components/propertyControls/OptionControl.tsx b/app/client/src/components/propertyControls/OptionControl.tsx
index 9209bffca1..cc1b04238f 100644
--- a/app/client/src/components/propertyControls/OptionControl.tsx
+++ b/app/client/src/components/propertyControls/OptionControl.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { DropdownOption } from "widgets/DropdownWidget";
-import { ControlType } from "constants/PropertyControlConstants";
 import { KeyValueComponent } from "./KeyValueComponent";
 
 export type DropDownOptionWithKey = DropdownOption & {
@@ -22,7 +21,7 @@ class OptionControl extends BaseControl<ControlProps> {
     this.updateProperty("options", options);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "OPTION_INPUT";
   }
 }
diff --git a/app/client/src/components/propertyControls/SwitchControl.tsx b/app/client/src/components/propertyControls/SwitchControl.tsx
index 596534bb31..052573b153 100644
--- a/app/client/src/components/propertyControls/SwitchControl.tsx
+++ b/app/client/src/components/propertyControls/SwitchControl.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { StyledSwitch } from "./StyledControls";
-import { ControlType } from "constants/PropertyControlConstants";
 
 class SwitchControl extends BaseControl<ControlProps> {
   render() {
@@ -18,7 +17,7 @@ class SwitchControl extends BaseControl<ControlProps> {
     this.updateProperty(this.props.propertyName, !this.props.propertyValue);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "SWITCH";
   }
 }
diff --git a/app/client/src/components/propertyControls/TimezoneControl.tsx b/app/client/src/components/propertyControls/TimezoneControl.tsx
index 5be70a0816..d146ec2c4d 100644
--- a/app/client/src/components/propertyControls/TimezoneControl.tsx
+++ b/app/client/src/components/propertyControls/TimezoneControl.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
 import { StyledTimeZonePicker } from "./StyledControls";
-import { ControlType } from "constants/PropertyControlConstants";
 import moment from "moment-timezone";
 import "../../../node_modules/@blueprintjs/timezone/lib/css/blueprint-timezone.css";
 
@@ -21,7 +20,7 @@ class TimeZoneControl extends BaseControl<TimeZoneControlProps> {
     this.updateProperty(this.props.propertyName, timezone);
   };
 
-  getControlType(): ControlType {
+  static getControlType() {
     return "TIME_ZONE";
   }
 }
diff --git a/app/client/src/components/propertyControls/index.test.ts b/app/client/src/components/propertyControls/index.test.ts
new file mode 100644
index 0000000000..9e0bd73cef
--- /dev/null
+++ b/app/client/src/components/propertyControls/index.test.ts
@@ -0,0 +1,10 @@
+import { getPropertyControlTypes } from "./index";
+import _ from "lodash";
+
+const types = getPropertyControlTypes();
+
+it("Checks for uniqueness of control types", () => {
+  const result = Object.keys(getPropertyControlTypes());
+  const output = _.uniq(result);
+  expect(types.length).toEqual(output.length);
+});
diff --git a/app/client/src/components/propertyControls/index.ts b/app/client/src/components/propertyControls/index.ts
new file mode 100644
index 0000000000..99f713a67e
--- /dev/null
+++ b/app/client/src/components/propertyControls/index.ts
@@ -0,0 +1,63 @@
+import InputTextControl, {
+  InputControlProps,
+} from "components/propertyControls/InputTextControl";
+import DropDownControl, {
+  DropDownControlProps,
+} from "components/propertyControls/DropDownControl";
+import SwitchControl, {
+  SwitchControlProps,
+} from "components/propertyControls/SwitchControl";
+import OptionControl from "components/propertyControls/OptionControl";
+import BaseControl, {
+  ControlProps,
+} from "components/propertyControls/BaseControl";
+import CodeEditorControl from "components/propertyControls/CodeEditorControl";
+import MultiSelectControl, {
+  MultiSelectControlProps,
+} from "components/propertyControls/MultiSelectControl";
+import DatePickerControl, {
+  DatePickerControlProps,
+} from "components/propertyControls/DatePickerControl";
+import TimeZoneControl, {
+  TimeZoneControlProps,
+} from "components/propertyControls/TimezoneControl";
+import ActionSelectorControl from "components/propertyControls/ActionSelectorControl";
+import ColumnActionSelectorControl from "components/propertyControls/ColumnActionSelectorControl";
+import MultiSwitchControl, {
+  MultiSwitchControlProps,
+} from "components/propertyControls/MultiSwitchControl";
+
+export const PropertyControls = {
+  InputTextControl,
+  DropDownControl,
+  SwitchControl,
+  OptionControl,
+  CodeEditorControl,
+  MultiSelectControl,
+  DatePickerControl,
+  TimeZoneControl,
+  ActionSelectorControl,
+  ColumnActionSelectorControl,
+  MultiSwitchControl,
+};
+
+export type PropertyControlPropsType =
+  | ControlProps
+  | InputControlProps
+  | DropDownControlProps
+  | SwitchControlProps
+  | MultiSelectControlProps
+  | DatePickerControlProps
+  | TimeZoneControlProps
+  | MultiSwitchControlProps;
+
+export const getPropertyControlTypes = (): { [key: string]: string } => {
+  const _types: { [key: string]: string } = {};
+  Object.values(PropertyControls).forEach(
+    (Control: typeof BaseControl & { getControlType: () => string }) => {
+      const controlType = Control.getControlType();
+      _types[controlType] = controlType;
+    },
+  );
+  return _types;
+};
diff --git a/app/client/src/constants/PropertyControlConstants.tsx b/app/client/src/constants/PropertyControlConstants.tsx
index 7fd1e3118d..b9242b6b2f 100644
--- a/app/client/src/constants/PropertyControlConstants.tsx
+++ b/app/client/src/constants/PropertyControlConstants.tsx
@@ -1,22 +1,3 @@
-export type ControlType =
-  | "INPUT_TEXT"
-  | "RICH_TEXT_EDITOR"
-  | "ICON_PICKER"
-  | "SEGMENT_CONTROL"
-  | "SWITCH"
-  | "CHECKBOX"
-  | "DATE_PICKER"
-  | "DROP_DOWN"
-  | "MULTI_SELECT"
-  | "COLOR_PICKER"
-  | "TIMEZONE_PICKER"
-  | "ACTION_SELECTOR"
-  | "RECORD_ACTION_SELECTOR"
-  | "OPTION_INPUT"
-  | "IMAGE_PICKER"
-  | "SHAPE_PICKER"
-  | "VALIDATION_INPUT"
-  | "ZOOM"
-  | "TIME_ZONE"
-  | "CODE_EDITOR"
-  | "COLUMN_ACTION_SELECTOR";
+import { getPropertyControlTypes } from "components/propertyControls";
+const ControlTypes = getPropertyControlTypes();
+export type ControlType = typeof ControlTypes[keyof typeof ControlTypes];
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 196f98261f..5d8998e842 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -3,7 +3,6 @@ export type WidgetType =
   | "RICH_TEXT_EDITOR_WIDGET"
   | "IMAGE_WIDGET"
   | "CONTAINER_WIDGET"
-  | "SPINNER_WIDGET"
   | "BUTTON_WIDGET"
   | "DATE_PICKER_WIDGET"
   | "TABLE_WIDGET"
@@ -13,20 +12,18 @@ export type WidgetType =
   | "FILE_PICKER_WIDGET"
   | "INPUT_WIDGET"
   | "CHART_WIDGET"
-  | "SWITCH_WIDGET"
   | "MODAL_WIDGET"
   | "FORM_WIDGET"
   | "FORM_BUTTON_WIDGET"
-  | "CANVAS_WIDGET";
+  | "CANVAS_WIDGET"
+  | "ICON_WIDGET";
 
 export const WidgetTypes: { [id: string]: WidgetType } = {
   BUTTON_WIDGET: "BUTTON_WIDGET",
   TEXT_WIDGET: "TEXT_WIDGET",
   IMAGE_WIDGET: "IMAGE_WIDGET",
   INPUT_WIDGET: "INPUT_WIDGET",
-  SWITCH_WIDGET: "SWITCH_WIDGET",
   CONTAINER_WIDGET: "CONTAINER_WIDGET",
-  SPINNER_WIDGET: "SPINNER_WIDGET",
   DATE_PICKER_WIDGET: "DATE_PICKER_WIDGET",
   TABLE_WIDGET: "TABLE_WIDGET",
   DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
@@ -38,6 +35,7 @@ export const WidgetTypes: { [id: string]: WidgetType } = {
   FORM_WIDGET: "FORM_WIDGET",
   FORM_BUTTON_WIDGET: "FORM_BUTTON_WIDGET",
   CANVAS_WIDGET: "CANVAS_WIDGET",
+  ICON_WIDGET: "ICON_WIDGET",
 };
 
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
index 8ae0bc8f72..2732a964f3 100644
--- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
+++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
@@ -7,98 +7,83 @@ const PropertyPaneConfigResponse = {
         children: [
           {
             id: "5.1.1",
-            helpText: "Use a html color name, HEX, RGB or RGBA value",
+            helpText: "Use a HTML color name, HEX, RGB or RGBA value",
             placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
             propertyName: "backgroundColor",
             label: "Background Color",
+            validationType: "HTML_COLOR",
+            errorMessage: "Invalid HTML color name, HEX, RGB or RGBA value",
             controlType: "INPUT_TEXT",
           },
           {
             id: "5.1.2",
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             label: "Visible",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
+          {
+            id: "5.1.3",
+            propertyName: "shouldScrollContents",
+            label: "Scroll Contents",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
+            controlType: "SWITCH",
+          },
         ],
       },
     ],
     DATE_PICKER_WIDGET: [
       {
-        id: "6.1",
         sectionName: "General",
+        id: "6.1",
         children: [
           {
-            id: "6.1.2",
-            helpText: "Displays a label next to the widget",
-            placeholderText: "Enter label text",
+            id: "6.1.1",
             propertyName: "label",
             label: "Label",
             controlType: "INPUT_TEXT",
+            placeholderText: "Enter Label",
           },
           {
-            id: "6.1.3",
-            helpText:
-              "Sets the default date of the widget. The selected date is updated if the default date changes",
+            id: "6.1.2",
             propertyName: "defaultDate",
             label: "Default Date",
             controlType: "DATE_PICKER",
-            placeholderText: "Select Date",
-            isJSConvertible: true,
+            placeholderText: "Enter Default Date",
           },
           {
-            id: "6.1.5",
-            helpText: "Sets the timezone that the date is input in",
-            propertyName: "timezone",
-            label: "Timezone",
-            controlType: "TIMEZONE_PICKER",
-            placeholderText: "Select Timezone",
-          },
-          {
-            id: "6.1.6",
-            helpText: "Allows users to input a time along with the date",
-            propertyName: "enableTimePicker",
-            label: "Enable Time",
-            controlType: "SWITCH",
-          },
-          {
-            id: "6.1.7",
-            helpText: "Disables a form submit button when this widget is empty",
+            id: "6.1.3",
             propertyName: "isRequired",
             label: "Required",
             controlType: "SWITCH",
-            isJSConvertible: true,
           },
           {
-            id: "6.1.8",
-            helpText: "Controls the visibility of the widget",
+            id: "6.1.4",
             propertyName: "isVisible",
             label: "Visible",
             controlType: "SWITCH",
-            isJSConvertible: true,
           },
           {
-            id: "6.1.9",
-            helpText: "Disables input to this widget",
+            id: "6.1.5",
             propertyName: "isDisabled",
             label: "Disabled",
             controlType: "SWITCH",
-            isJSConvertible: true,
           },
         ],
       },
       {
-        id: "6.2",
         sectionName: "Actions",
+        id: "6.2",
         children: [
           {
             id: "6.2.1",
-            helpText: "Triggers an action when a user selects a date",
             propertyName: "onDateSelected",
             label: "onDateSelected",
             controlType: "ACTION_SELECTOR",
-            isJSConvertible: true,
           },
         ],
       },
@@ -111,17 +96,21 @@ const PropertyPaneConfigResponse = {
           {
             id: "7.1.1",
             helpText:
-              "Takes in an array of objects to display rows in the table. Bind data from an API using undefined",
+              "Takes in an array of objects to display rows in the table. Bind data from an API using {{}}",
             propertyName: "tableData",
             label: "Table Data",
             controlType: "INPUT_TEXT",
-            placeholderText: 'Enter data [{ "col1": "val1" }]',
+            validationType: "TABLE_ARRAY",
+            errorMessage: "Requires an array of objects",
+            placeholderText: 'Enter [{ "col1": "val1" }]',
             inputType: "ARRAY",
           },
           {
             id: "7.1.2",
             helpText:
               "Bind the Table.pageNo property in your API and call it onPageChange",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             propertyName: "serverSidePaginationEnabled",
             label: "Server Side Pagination",
             controlType: "SWITCH",
@@ -131,6 +120,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
             label: "Visible",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
@@ -178,6 +169,8 @@ const PropertyPaneConfigResponse = {
             propertyName: "image",
             label: "Image",
             controlType: "INPUT_TEXT",
+            validationType: "URL_BASE64",
+            errorMessage: "Must be a valid url or base64 string",
             placeholderText: "Enter URL / Base64",
           },
           {
@@ -186,12 +179,16 @@ const PropertyPaneConfigResponse = {
             propertyName: "defaultImage",
             label: "Default Image",
             controlType: "INPUT_TEXT",
+            validationType: "URL_BASE64",
+            errorMessage: "Must be a valid url or base64 string",
             placeholderText: "Enter URL / Base64",
           },
           {
             id: "3.1.3",
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             label: "Visible",
             controlType: "SWITCH",
             isJSConvertible: true,
@@ -209,6 +206,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Displays a label next to the widget",
             propertyName: "label",
             label: "Label",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter label text",
           },
@@ -216,6 +215,9 @@ const PropertyPaneConfigResponse = {
             id: "10.1.2",
             helpText:
               "Displays a list of options for a user to select. Values must be unique",
+            validationType: "KEY_VAL",
+            errorMessage:
+              "Requires an array of objects with label and value fields",
             propertyName: "options",
             label: "Options",
             controlType: "OPTION_INPUT",
@@ -226,6 +228,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Selects a value of the options entered by default",
             propertyName: "defaultOptionValue",
             label: "Default Selected Value",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             placeholderText: "Enter option value",
             controlType: "INPUT_TEXT",
           },
@@ -234,6 +238,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Disables a form submit button when this widget is empty",
             propertyName: "isRequired",
             label: "Required",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
@@ -242,6 +248,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
             label: "Visible",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
@@ -270,9 +278,12 @@ const PropertyPaneConfigResponse = {
         children: [
           {
             id: "16.1.1",
-            helpText: "Takes an array of tab names to render the tabs",
+            helpText: "Takes an array of tab names to render tabs",
             propertyName: "tabs",
-            placeholderText: 'Enter ["tabName1", "tabName2"]',
+            isJSConvertible: true,
+            validationType: "STR_ARRAY",
+            errorMessage: "Requires an array of unique strings",
+            placeholderText: 'Enter ["Tab1", "Tab2"]',
             label: "Tabs",
             controlType: "TABS_INPUT",
           },
@@ -282,6 +293,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Selects a tab name specified by default",
             placeholderText: "Enter tab name",
             label: "Default Tab",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
           },
         ],
@@ -340,6 +353,13 @@ const PropertyPaneConfigResponse = {
           },
           {
             id: "13.1.4",
+            propertyName: "allowHorizontalScroll",
+            label: "Allow horizontal scroll",
+            controlType: "SWITCH",
+            isJSConvertible: true,
+          },
+          {
+            id: "13.1.5",
             helpText: "Specifies the label of the y-axis",
             propertyName: "yAxisName",
             placeholderText: "Enter label text",
@@ -347,16 +367,13 @@ const PropertyPaneConfigResponse = {
             controlType: "INPUT_TEXT",
           },
           {
-            id: "13.1.5",
+            id: "13.1.6",
             propertyName: "chartData",
-            helpText: "Takes an array of (x,y) data points to render the chart",
-            placeholderText: 'Enter [{"x1": 10, "y1": 5}]',
             label: "Chart Data",
-            controlType: "INPUT_TEXT",
-            inputType: "ARRAY",
+            controlType: "CHART_DATA",
           },
           {
-            id: "13.1.6",
+            id: "13.1.7",
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
             label: "Visible",
@@ -366,6 +383,47 @@ const PropertyPaneConfigResponse = {
         ],
       },
     ],
+    MODAL_WIDGET: [
+      {
+        sectionName: "General",
+        id: "18.1",
+        children: [
+          {
+            id: "18.1.1",
+            propertyName: "canOutsideClickClose",
+            label: "Quick Dismiss",
+            helpText: "Allows dismissing the modal when user taps outside",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
+            controlType: "SWITCH",
+          },
+          {
+            id: "18.1.2",
+            propertyName: "size",
+            label: "Modal Type",
+            controlType: "DROP_DOWN",
+            options: [
+              {
+                label: "Form Modal",
+                value: "MODAL_LARGE",
+              },
+              {
+                label: "Alert Modal",
+                value: "MODAL_SMALL",
+              },
+            ],
+          },
+          {
+            id: "18.1.3",
+            propertyName: "shouldScrollContents",
+            label: "Scroll Contents",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
     INPUT_WIDGET: [
       {
         id: "4.1",
@@ -377,6 +435,8 @@ const PropertyPaneConfigResponse = {
             placeholderText: "Enter label text",
             propertyName: "label",
             label: "Label",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
             inputType: "TEXT",
           },
@@ -414,6 +474,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Sets a placeholder text for the input",
             propertyName: "placeholderText",
             label: "Placeholder",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter placeholder text",
           },
@@ -423,6 +485,8 @@ const PropertyPaneConfigResponse = {
               "Sets the default text of the widget. The text is updated if the default text changes",
             propertyName: "defaultText",
             label: "Default Input",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter default text",
           },
@@ -432,6 +496,8 @@ const PropertyPaneConfigResponse = {
               "Adds a validation to the input which displays an error on failure",
             propertyName: "regex",
             label: "Regex",
+            validationType: "REGEX",
+            errorMessage: "Must be a valid regex string",
             controlType: "INPUT_TEXT",
             placeholderText: "^\\w+@[a-zA-Z_]+?\\.[a-zA-Z]{2,3}$",
             inputType: "TEXT",
@@ -443,6 +509,8 @@ const PropertyPaneConfigResponse = {
             propertyName: "errorMessage",
             label: "Error Message",
             controlType: "INPUT_TEXT",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             placeholderText: "Enter error message",
             inputType: "TEXT",
           },
@@ -450,6 +518,8 @@ const PropertyPaneConfigResponse = {
             id: "4.1.7",
             propertyName: "isRequired",
             label: "Required",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             helpText: "Disables a form submit button when this widget is empty",
             controlType: "SWITCH",
             isJSConvertible: true,
@@ -459,6 +529,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
             label: "Visible",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
@@ -467,6 +539,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Disables input to this widget",
             propertyName: "isDisabled",
             label: "Disabled",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
@@ -497,6 +571,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Displays a label next to the widget",
             propertyName: "label",
             label: "Label",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter label text",
           },
@@ -524,6 +600,9 @@ const PropertyPaneConfigResponse = {
               "Allows users to select either a single option or multiple options. Values must be unique",
             propertyName: "options",
             label: "Options",
+            validationType: "KEY_VAL",
+            errorMessage:
+              "Requires an array of objects with label and value fields",
             controlType: "INPUT_TEXT",
             placeholderText: 'Enter [{label: "label1", value: "value2"}]',
           },
@@ -532,6 +611,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Selects the option with value by default",
             propertyName: "defaultOptionValue",
             label: "Default Option",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter option value",
           },
@@ -539,6 +620,8 @@ const PropertyPaneConfigResponse = {
             id: "8.1.5",
             propertyName: "isRequired",
             label: "Required",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             helpText: "Disables a form submit button when this widget is empty",
             controlType: "SWITCH",
             isJSConvertible: true,
@@ -547,6 +630,8 @@ const PropertyPaneConfigResponse = {
             id: "8.1.6",
             helpText: "Controls the visibility of the widget",
             propertyName: "isVisible",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             label: "Visible",
             controlType: "SWITCH",
             isJSConvertible: true,
@@ -577,6 +662,8 @@ const PropertyPaneConfigResponse = {
             id: "15.1.1",
             propertyName: "text",
             label: "Label",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             helpText: "Sets the label of the button",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter label text",
@@ -608,6 +695,8 @@ const PropertyPaneConfigResponse = {
               "Disables the button when the parent form has a required widget that is not filled",
             propertyName: "disabledWhenInvalid",
             label: "Disabled Invalid Forms",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
           },
           {
@@ -616,6 +705,8 @@ const PropertyPaneConfigResponse = {
               "Resets the fields within the parent form when the click action succeeds",
             propertyName: "resetFormOnClick",
             label: "Reset Form on Success",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
             isJSConvertible: true,
           },
@@ -625,6 +716,8 @@ const PropertyPaneConfigResponse = {
             label: "Visible",
             helpText: "Controls the visibility of the widget",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
         ],
@@ -644,6 +737,63 @@ const PropertyPaneConfigResponse = {
         ],
       },
     ],
+    MAP_WIDGET: [
+      {
+        sectionName: "General",
+        id: "19",
+        children: [
+          {
+            id: "19.1",
+            propertyName: "mapCenter",
+            label: "Initial location",
+            controlType: "LOCATION_SEARCH",
+          },
+          {
+            id: "19.2",
+            propertyName: "enableSearch",
+            label: "Enable search location",
+            controlType: "SWITCH",
+          },
+          {
+            id: "19.3",
+            propertyName: "zoomToLocation",
+            label: "Zoom to location",
+            controlType: "SWITCH",
+          },
+          {
+            id: "19.4",
+            propertyName: "defaultMarkers",
+            label: "Default markers",
+            controlType: "INPUT_TEXT",
+            inputType: "ARRAY",
+          },
+          {
+            id: "19.5",
+            propertyName: "location",
+            label: "Creat new marker",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "ZOOM SETTINGS",
+        id: "20",
+        children: [
+          {
+            id: "20.1",
+            propertyName: "zoomLevel",
+            label: "Zoom Level",
+            controlType: "PERCENTAGE_LEVEL",
+          },
+          {
+            id: "20.2",
+            propertyName: "allowZoom",
+            label: "Zoomable",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+    ],
     BUTTON_WIDGET: [
       {
         id: "1.1",
@@ -655,6 +805,8 @@ const PropertyPaneConfigResponse = {
             label: "Label",
             helpText: "Sets the label of the button",
             controlType: "INPUT_TEXT",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             placeholderText: "Enter label text",
           },
           {
@@ -684,6 +836,8 @@ const PropertyPaneConfigResponse = {
             label: "Disabled",
             controlType: "SWITCH",
             helpText: "Disables clicks to this widget",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -692,6 +846,8 @@ const PropertyPaneConfigResponse = {
             label: "Visible",
             helpText: "Controls the visibility of the widget",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
         ],
@@ -723,6 +879,8 @@ const PropertyPaneConfigResponse = {
               "Sets the default text of the widget. The text is updated if the default text changes",
             label: "Default text",
             controlType: "INPUT_TEXT",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             placeholderText: "Enter HTML",
           },
           {
@@ -731,6 +889,8 @@ const PropertyPaneConfigResponse = {
             label: "Visible",
             helpText: "Controls the visibility of the widget",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -739,6 +899,8 @@ const PropertyPaneConfigResponse = {
             label: "Disable",
             helpText: "Disables input to this widget",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
         ],
@@ -770,6 +932,8 @@ const PropertyPaneConfigResponse = {
             controlType: "INPUT_TEXT",
             helpText: "Sets the label of the button",
             placeholderText: "Enter label text",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             inputType: "TEXT",
           },
           {
@@ -780,6 +944,8 @@ const PropertyPaneConfigResponse = {
               "Sets the maximum number of files that can be uploaded at once",
             controlType: "INPUT_TEXT",
             placeholderText: "Enter no. of files",
+            validationType: "POS_INT",
+            errorMessage: "Must be a valid number",
             inputType: "INTEGER",
           },
           {
@@ -788,6 +954,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Sets the maximum size of each file that can be uploaded",
             label: "Max file size",
             controlType: "INPUT_TEXT",
+            validationType: "POS_REAL",
+            errorMessage: "Must be a valid number",
             placeholderText: "File size in mb",
             inputType: "INTEGER",
           },
@@ -840,6 +1008,8 @@ const PropertyPaneConfigResponse = {
             label: "Required",
             controlType: "SWITCH",
             helpText: "Disables a form submit button when this widget is empty",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -848,6 +1018,8 @@ const PropertyPaneConfigResponse = {
             label: "Visible",
             helpText: "Controls the visibility of the widget",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -858,6 +1030,8 @@ const PropertyPaneConfigResponse = {
             label: "Uploaded File URLs",
             controlType: "INPUT_TEXT",
             placeholderText: 'Enter [ "url1", "url2" ]',
+            validationType: "STR_ARR",
+            errorMessage: "Must be a valid array of URLs",
             inputType: "TEXT",
           },
         ],
@@ -889,6 +1063,8 @@ const PropertyPaneConfigResponse = {
             label: "Label",
             controlType: "INPUT_TEXT",
             helpText: "Displays a label next to the widget",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             placeholderText: "Enter label text",
           },
           {
@@ -898,6 +1074,8 @@ const PropertyPaneConfigResponse = {
             helpText:
               "Checks / un-checks the checkbox by default. Changes to the default selection update the widget state",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -906,6 +1084,8 @@ const PropertyPaneConfigResponse = {
             label: "Required",
             helpText: "Disables a form submit button when this widget is empty",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -914,6 +1094,8 @@ const PropertyPaneConfigResponse = {
             label: "Disabled",
             controlType: "SWITCH",
             helpText: "Disables input to this widget",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
           {
@@ -922,6 +1104,8 @@ const PropertyPaneConfigResponse = {
             label: "Visible",
             helpText: "Controls the visibility of the widget",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
         ],
@@ -950,8 +1134,10 @@ const PropertyPaneConfigResponse = {
             id: "14.1.1",
             propertyName: "backgroundColor",
             label: "Background Color",
-            helpText: "Use a html color name, HEX, RGB or RGBA value",
+            helpText: "Use a HTML color name, HEX, RGB or RGBA value",
             placeholderText: "#FFFFFF / Gray / rgb(255, 99, 71)",
+            validationType: "HTML_COLOR",
+            errorMessage: "Invalid HTML color name, HEX, RGB or RGBA value",
             controlType: "INPUT_TEXT",
           },
           {
@@ -960,14 +1146,10 @@ const PropertyPaneConfigResponse = {
             propertyName: "isVisible",
             label: "Visible",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
-          {
-            id: "22.3",
-            propertyName: "shouldScrollContents",
-            label: "Scroll Contents",
-            controlType: "SWITCH",
-          },
         ],
       },
     ],
@@ -982,6 +1164,8 @@ const PropertyPaneConfigResponse = {
             helpText: "Sets the text of the widget",
             label: "Text",
             controlType: "INPUT_TEXT",
+            validationType: "TEXT",
+            errorMessage: "Must be a valid string",
             placeholderText: "Enter text",
           },
           {
@@ -1010,6 +1194,8 @@ const PropertyPaneConfigResponse = {
             propertyName: "shouldScroll",
             label: "Enable Scroll",
             helpText: "Allows scrolling text instead of truncation",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             controlType: "SWITCH",
           },
           {
@@ -1018,11 +1204,65 @@ const PropertyPaneConfigResponse = {
             helpText: "Controls the visibility of the widget",
             label: "Visible",
             controlType: "SWITCH",
+            validationType: "BOOLEAN",
+            errorMessage: "Must be a valid boolean value",
             isJSConvertible: true,
           },
         ],
       },
     ],
+    ICON_WIDGET: [
+      {
+        id: "25.1",
+        sectionName: "General",
+        children: [
+          {
+            id: "25.1.1",
+            propertyName: "iconName",
+            helpText: "The icon to show",
+            label: "Icon",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter icon name",
+          },
+          {
+            id: "25.1.2",
+            propertyName: "iconSize",
+            helpText: "Sets th size of the icon",
+            label: "Size",
+            controlType: "MULTI_SWITCH",
+            options: [
+              {
+                label: "12px",
+                value: 12,
+              },
+              {
+                label: "16px",
+                value: 16,
+              },
+              {
+                label: "32px",
+                value: 32,
+              },
+            ],
+          },
+          {
+            id: "25.1.3",
+            propertyName: "color",
+            helpText: "Color of the icon",
+            label: "Color",
+            controlType: "INPUT_TEXT",
+            placeholderText: "Enter icon color hex code",
+          },
+        ],
+      },
+    ],
+    CANVAS_WIDGET: [
+      {
+        id: "26,1",
+        sectionName: "General",
+        children: [],
+      },
+    ],
   },
   name: "propertyPane",
 };
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index 866cbe32cb..a48e52a7da 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -1,4 +1,5 @@
 import { WidgetConfigReducerState } from "reducers/entityReducers/widgetConfigReducer";
+import { WidgetProps } from "widgets/BaseWidget";
 
 const WidgetConfigResponse: WidgetConfigReducerState = {
   config: {
@@ -43,12 +44,17 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       columns: 5,
       widgetName: "Input",
     },
-    SWITCH_WIDGET: {
-      isOn: false,
-      label: "Switch",
+    // SWITCH_WIDGET: {
+    //   isOn: false,
+    //   label: "Switch",
+    //   rows: 1,
+    //   columns: 4,
+    //   widgetName: "Switch",
+    // },
+    ICON_WIDGET: {
+      widgetName: "Icon",
       rows: 1,
-      columns: 4,
-      widgetName: "Switch",
+      columns: 1,
     },
     CONTAINER_WIDGET: {
       backgroundColor: "#FFFFFF",
@@ -72,11 +78,6 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         ],
       },
     },
-    SPINNER_WIDGET: {
-      rows: 1,
-      columns: 1,
-      widgetName: "Spinner",
-    },
     DATE_PICKER_WIDGET: {
       enableTimePicker: true,
       isDisabled: false,
@@ -205,10 +206,20 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
               children: [],
               blueprint: {
                 view: [
+                  {
+                    type: "ICON_WIDGET",
+                    position: { left: 15, top: 0 },
+                    size: { rows: 1, cols: 1 },
+                    props: {
+                      iconName: "cross",
+                      iconSize: 24,
+                      color: "#040627",
+                    },
+                  },
                   {
                     type: "TEXT_WIDGET",
                     position: { left: 0, top: 0 },
-                    size: { rows: 1, cols: 16 },
+                    size: { rows: 1, cols: 15 },
                     props: {
                       text: "Modal Title",
                       textStyle: "HEADING",
@@ -233,6 +244,31 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                     },
                   },
                 ],
+                operations: [
+                  {
+                    type: "MODIFY_PROPS",
+                    fn: (
+                      widget: WidgetProps & { children?: WidgetProps[] },
+                      parent?: WidgetProps & { children?: WidgetProps[] },
+                    ) => {
+                      const iconChild =
+                        widget.children &&
+                        widget.children.find(
+                          child => child.type === "ICON_WIDGET",
+                        );
+
+                      if (iconChild && parent) {
+                        return [
+                          {
+                            widgetId: iconChild.widgetId,
+                            propertyName: "onClick",
+                            propertyValue: `{{closeModal('${parent.widgetName}')}}`,
+                          },
+                        ];
+                      }
+                    },
+                  },
+                ],
               },
             },
           },
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index 4a98c2d4d3..46e558a7b1 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -8,12 +8,12 @@ import {
 import { ControlIcons } from "icons/ControlIcons";
 import PropertyControlFactory from "utils/PropertyControlFactory";
 import { WidgetProps } from "widgets/BaseWidget";
-import { ControlConfig } from "reducers/entityReducers/propertyPaneConfigReducer";
+import { PropertyControlPropsType } from "components/propertyControls";
 import { Tooltip, Position } from "@blueprintjs/core";
 
 type Props = {
   widgetProperties: WidgetProps;
-  propertyConfig: ControlConfig;
+  propertyConfig: PropertyControlPropsType;
   toggleDynamicProperty: (propertyName: string, isDynamic: boolean) => void;
   onPropertyChange: (propertyName: string, propertyValue: any) => void;
 };
diff --git a/app/client/src/pages/Editor/PropertyPane/index.tsx b/app/client/src/pages/Editor/PropertyPane/index.tsx
index 2ef3918aad..ddf312944a 100644
--- a/app/client/src/pages/Editor/PropertyPane/index.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/index.tsx
@@ -94,6 +94,7 @@ class PropertyPane extends Component<
           }}
           size={theme.spaces[5]}
           color={theme.colors.paneSectionLabel}
+          className={"t--property-pane-close-btn"}
         />
         <Divider />
         {!_.isNil(propertySections)
@@ -119,13 +120,7 @@ class PropertyPane extends Component<
         ) : (
           undefined
         )}
-        <div
-          style={
-            propertySection.orientation === "HORIZONTAL"
-              ? { flexDirection: "row" }
-              : { flexDirection: "column" }
-          }
-        >
+        <div>
           {_.map(
             propertySection.children,
             (propertyControlOrSection: ControlProps | PropertySection) => {
diff --git a/app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx b/app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx
index e7b2ab66a8..c8ed1da5e9 100644
--- a/app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx
+++ b/app/client/src/reducers/entityReducers/propertyPaneConfigReducer.tsx
@@ -1,26 +1,16 @@
 import { createReducer } from "utils/AppsmithUtils";
 import { ReduxActionTypes, ReduxAction } from "constants/ReduxActionConstants";
-import { InputControlProps } from "components/propertyControls/InputTextControl";
-import { DropDownControlProps } from "components/propertyControls/DropDownControl";
-import { ControlProps } from "components/propertyControls/BaseControl";
+import { PropertyControlPropsType } from "components/propertyControls";
 import { WidgetType } from "constants/WidgetConstants";
 
 const initialState: PropertyPaneConfigState = {
   configVersion: 0,
 };
 
-export type ControlConfig =
-  | InputControlProps
-  | DropDownControlProps
-  | ControlProps;
-
-export type SectionOrientation = "HORIZONTAL" | "VERTICAL";
-
 export interface PropertySection {
   id: string;
-  sectionName?: string;
-  orientation?: SectionOrientation;
-  children: (ControlConfig | PropertySection)[];
+  sectionName: string;
+  children: (Partial<PropertyControlPropsType> | PropertySection)[];
 }
 
 export type PropertyConfig = Record<WidgetType, PropertySection[]>;
diff --git a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
index 72aba39e3f..78906c7817 100644
--- a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
+++ b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
@@ -8,8 +8,6 @@ import { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { ImageWidgetProps } from "widgets/ImageWidget";
 import { InputWidgetProps } from "widgets/InputWidget";
 import { RichTextEditorWidgetProps } from "widgets/RichTextEditorWidget";
-import { SwitchWidgetProps } from "widgets/SwitchWidget";
-import { SpinnerWidgetProps } from "widgets/SpinnerWidget";
 import { DatePickerWidgetProps } from "../../widgets/DatePickerWidget";
 import { TableWidgetProps } from "../../widgets/TableWidget";
 import { DropdownWidgetProps } from "../../widgets/DropdownWidget";
@@ -21,6 +19,7 @@ import { ChartWidgetProps } from "../../widgets/ChartWidget";
 import { FormWidgetProps } from "widgets/FormWidget";
 import { FormButtonWidgetProps } from "widgets/FormButtonWidget";
 import { ModalWidgetProps } from "widgets/ModalWidget";
+import { IconWidgetProps } from "widgets/IconWidget";
 
 const initialState: WidgetConfigReducerState = WidgetConfigResponse;
 
@@ -48,10 +47,8 @@ export interface WidgetConfigReducerState {
     INPUT_WIDGET: Partial<InputWidgetProps> & WidgetConfigProps;
     RICH_TEXT_EDITOR_WIDGET: Partial<RichTextEditorWidgetProps> &
       WidgetConfigProps;
-    SWITCH_WIDGET: Partial<SwitchWidgetProps> & WidgetConfigProps;
     CONTAINER_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
       WidgetConfigProps;
-    SPINNER_WIDGET: Partial<SpinnerWidgetProps> & WidgetConfigProps;
     DATE_PICKER_WIDGET: Partial<DatePickerWidgetProps> & WidgetConfigProps;
     TABLE_WIDGET: Partial<TableWidgetProps> & WidgetConfigProps;
     DROP_DOWN_WIDGET: Partial<DropdownWidgetProps> & WidgetConfigProps;
@@ -65,6 +62,7 @@ export interface WidgetConfigReducerState {
     FORM_BUTTON_WIDGET: Partial<FormButtonWidgetProps> & WidgetConfigProps;
     CANVAS_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
       WidgetConfigProps;
+    ICON_WIDGET: Partial<IconWidgetProps> & WidgetConfigProps;
   };
   configVersion: number;
 }
diff --git a/app/client/src/sagas/ConfigsSagas.tsx b/app/client/src/sagas/ConfigsSagas.tsx
index 3c7905b08d..05e49aec01 100644
--- a/app/client/src/sagas/ConfigsSagas.tsx
+++ b/app/client/src/sagas/ConfigsSagas.tsx
@@ -3,11 +3,29 @@ import {
   ReduxActionTypes,
   ReduxActionErrorTypes,
 } from "constants/ReduxActionConstants";
-
+import { WidgetType } from "constants/WidgetConstants";
+import { PropertyConfig } from "reducers/entityReducers/propertyPaneConfigReducer";
+import { generateReactKey } from "utils/generators";
 import ConfigsApi, { PropertyPaneConfigsResponse } from "api/ConfigsApi";
 
 import { validateResponse } from "./ErrorSagas";
 
+const generateConfigWithIds = (config: PropertyConfig) => {
+  const addObjectId = (obj: any) => {
+    obj.id = generateReactKey();
+    if (obj.hasOwnProperty("children")) {
+      obj.children = obj.children.map(addObjectId);
+    }
+    return obj;
+  };
+  Object.keys(config).forEach((widgetType: string) => {
+    config[widgetType as WidgetType] = config[widgetType as WidgetType].map(
+      addObjectId,
+    );
+  });
+  return config;
+};
+
 export function* fetchPropertyPaneConfigsSaga() {
   try {
     const response: PropertyPaneConfigsResponse = yield call(
@@ -15,10 +33,11 @@ export function* fetchPropertyPaneConfigsSaga() {
     );
     const isValidResponse = yield validateResponse(response);
     if (isValidResponse) {
+      const config = generateConfigWithIds(response.data.config);
       yield put({
         type: ReduxActionTypes.FETCH_PROPERTY_PANE_CONFIGS_SUCCESS,
         payload: {
-          config: response.data.config,
+          config,
         },
       });
     }
diff --git a/app/client/src/sagas/WidgetBlueprintSagas.ts b/app/client/src/sagas/WidgetBlueprintSagas.ts
index 85d51cbee0..2818e55f4b 100644
--- a/app/client/src/sagas/WidgetBlueprintSagas.ts
+++ b/app/client/src/sagas/WidgetBlueprintSagas.ts
@@ -1,4 +1,6 @@
 import { WidgetBlueprint } from "reducers/entityReducers/widgetConfigReducer";
+import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer";
+import { WidgetProps } from "widgets/BaseWidget";
 import { generateReactKey } from "utils/generators";
 import { call } from "redux-saga/effects";
 
@@ -31,3 +33,62 @@ export function* buildWidgetBlueprint(
   const widgetProps = yield call(buildView, blueprint.view, widgetId);
   return widgetProps;
 }
+
+export type UpdatePropertyArgs = {
+  widgetId: string;
+  propertyName: string;
+  propertyValue: any;
+};
+export type BlueprintOperationAddActionFn = () => void;
+export type BlueprintOperationModifyPropsFn = (
+  widget: WidgetProps & { children?: WidgetProps[] },
+  parent?: WidgetProps,
+) => UpdatePropertyArgs[] | undefined;
+
+export type BlueprintOperationFunction =
+  | BlueprintOperationModifyPropsFn
+  | BlueprintOperationAddActionFn;
+
+export enum BlueprintOperationTypes {
+  MODIFY_PROPS = "MODIFY_PROPS",
+  ADD_ACTION = "ADD_ACTION",
+}
+
+export type BlueprintOperationType = keyof typeof BlueprintOperationTypes;
+
+export type BlueprintOperation = {
+  type: BlueprintOperationType;
+  fn: BlueprintOperationFunction;
+};
+
+export function* executeWidgetBlueprintOperations(
+  operations: BlueprintOperation[],
+  widgets: { [widgetId: string]: FlattenedWidgetProps },
+  widgetId: string,
+) {
+  operations.forEach((operation: BlueprintOperation) => {
+    switch (operation.type) {
+      case BlueprintOperationTypes.MODIFY_PROPS:
+        const widget: WidgetProps & { children?: string[] | WidgetProps[] } = {
+          ...widgets[widgetId],
+        };
+        if (widget.children && widget.children.length > 0) {
+          widget.children = (widget.children as string[]).map(
+            (childId: string) => widgets[childId],
+          ) as WidgetProps[];
+        }
+        const updatePropertyPayloads:
+          | UpdatePropertyArgs[]
+          | undefined = (operation.fn as BlueprintOperationModifyPropsFn)(
+          widget as WidgetProps & { children?: WidgetProps[] },
+          widgets[widget.parentId],
+        );
+        updatePropertyPayloads &&
+          updatePropertyPayloads.forEach((params: UpdatePropertyArgs) => {
+            widgets[params.widgetId][params.propertyName] =
+              params.propertyValue;
+          });
+    }
+  });
+  return yield widgets;
+}
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index 255d4641a6..f42fbea4e1 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -34,7 +34,10 @@ import { isDynamicValue } from "utils/DynamicBindingUtils";
 import { WidgetProps } from "widgets/BaseWidget";
 import _ from "lodash";
 import WidgetFactory from "utils/WidgetFactory";
-import { buildWidgetBlueprint } from "sagas/WidgetBlueprintSagas";
+import {
+  buildWidgetBlueprint,
+  executeWidgetBlueprintOperations,
+} from "sagas/WidgetBlueprintSagas";
 import { resetWidgetMetaProperty } from "actions/metaActions";
 import { GridDefaults, WidgetTypes } from "constants/WidgetConstants";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
@@ -89,7 +92,8 @@ function* generateChildWidgets(
   widgets: { [widgetId: string]: FlattenedWidgetProps },
 ): any {
   const widget = yield getChildWidgetProps(parent, params, widgets);
-  if (widget.blueprint) {
+  widgets[widget.widgetId] = widget;
+  if (widget.blueprint && widget.blueprint.view) {
     const childWidgetList: WidgetAddChild[] = yield call(
       buildWidgetBlueprint,
       widget.blueprint,
@@ -106,8 +110,20 @@ function* generateChildWidgets(
       widgets = props.widgets;
     });
   }
-  widgets[widget.widgetId] = widget;
 
+  widgets[widget.widgetId] = widget;
+  if (
+    widget.blueprint &&
+    widget.blueprint.operations &&
+    widget.blueprint.operations.length > 0
+  ) {
+    widgets = yield call(
+      executeWidgetBlueprintOperations,
+      widget.blueprint.operations,
+      widgets,
+      widget.widgetId,
+    );
+  }
   return { widgetId: widget.widgetId, widgets };
 }
 
@@ -135,6 +151,7 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
 
     yield put(updateAndSaveLayout(widgets));
   } catch (error) {
+    console.log(error);
     yield put({
       type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
       payload: {
diff --git a/app/client/src/utils/PropertyControlRegistry.tsx b/app/client/src/utils/PropertyControlRegistry.tsx
index 40a6d1d4b6..4c0ee3cf04 100644
--- a/app/client/src/utils/PropertyControlRegistry.tsx
+++ b/app/client/src/utils/PropertyControlRegistry.tsx
@@ -1,81 +1,24 @@
 import React from "react";
 import PropertyControlFactory from "./PropertyControlFactory";
-import InputTextControl, {
-  InputControlProps,
-} from "components/propertyControls/InputTextControl";
-import DropDownControl, {
-  DropDownControlProps,
-} from "components/propertyControls/DropDownControl";
-import SwitchControl, {
-  SwitchControlProps,
-} from "components/propertyControls/SwitchControl";
-import OptionControl from "components/propertyControls/OptionControl";
-import { ControlProps } from "components/propertyControls/BaseControl";
-import CodeEditorControl from "components/propertyControls/CodeEditorControl";
-import MultiSelectControl, {
-  MultiSelectControlProps,
-} from "components/propertyControls/MultiSelectControl";
-import DatePickerControl, {
-  DatePickerControlProps,
-} from "components/propertyControls/DatePickerControl";
-import TimeZoneControl, {
-  TimeZoneControlProps,
-} from "components/propertyControls/TimezoneControl";
-import ActionSelectorControl from "components/propertyControls/ActionSelectorControl";
-import ColumnActionSelectorControl from "components/propertyControls/ColumnActionSelectorControl";
-
+import {
+  PropertyControls,
+  PropertyControlPropsType,
+} from "components/propertyControls";
+import BaseControl from "components/propertyControls/BaseControl";
 class PropertyControlRegistry {
   static registerPropertyControlBuilders() {
-    PropertyControlFactory.registerControlBuilder("INPUT_TEXT", {
-      buildPropertyControl(controlProps: InputControlProps): JSX.Element {
-        return <InputTextControl {...controlProps} />;
+    Object.values(PropertyControls).forEach(
+      (Control: typeof BaseControl & { getControlType: () => string }) => {
+        const controlType = Control.getControlType();
+        PropertyControlFactory.registerControlBuilder(controlType, {
+          buildPropertyControl(
+            controlProps: PropertyControlPropsType,
+          ): JSX.Element {
+            return <Control {...controlProps} />;
+          },
+        });
       },
-    });
-    PropertyControlFactory.registerControlBuilder("CODE_EDITOR", {
-      buildPropertyControl(controlProps: InputControlProps): JSX.Element {
-        return <CodeEditorControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("DROP_DOWN", {
-      buildPropertyControl(controlProps: DropDownControlProps): JSX.Element {
-        return <DropDownControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("MULTI_SELECT", {
-      buildPropertyControl(controlProps: MultiSelectControlProps): JSX.Element {
-        return <MultiSelectControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("SWITCH", {
-      buildPropertyControl(controlProps: SwitchControlProps): JSX.Element {
-        return <SwitchControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("OPTION_INPUT", {
-      buildPropertyControl(controlProps: ControlProps): JSX.Element {
-        return <OptionControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("DATE_PICKER", {
-      buildPropertyControl(controlProps: DatePickerControlProps): JSX.Element {
-        return <DatePickerControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("TIMEZONE_PICKER", {
-      buildPropertyControl(controlProps: TimeZoneControlProps): JSX.Element {
-        return <TimeZoneControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("ACTION_SELECTOR", {
-      buildPropertyControl(controlProps: ControlProps): JSX.Element {
-        return <ActionSelectorControl {...controlProps} />;
-      },
-    });
-    PropertyControlFactory.registerControlBuilder("COLUMN_ACTION_SELECTOR", {
-      buildPropertyControl(controlProps: ControlProps): JSX.Element {
-        return <ColumnActionSelectorControl {...controlProps} />;
-      },
-    });
+    );
   }
 }
 
diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx
index c09bcf28e0..67c3682f05 100644
--- a/app/client/src/utils/WidgetPropsUtils.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.tsx
@@ -357,6 +357,7 @@ export const generateWidgetProps = (
       ...sizes,
       ...others,
       ...derivedProperties,
+      parentId: parent.widgetId,
     };
 
     delete props.rows;
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
index 4a8c7ebf9f..b78bee88e6 100644
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/app/client/src/utils/WidgetRegistry.tsx
@@ -3,7 +3,6 @@ import { WidgetTypes } from "constants/WidgetConstants";
 import ContainerWidget, { ContainerWidgetProps } from "widgets/ContainerWidget";
 import TextWidget, { TextWidgetProps } from "widgets/TextWidget";
 import InputWidget, { InputWidgetProps } from "widgets/InputWidget";
-import SpinnerWidget, { SpinnerWidgetProps } from "widgets/SpinnerWidget";
 import CheckboxWidget, { CheckboxWidgetProps } from "widgets/CheckboxWidget";
 import RadioGroupWidget, {
   RadioGroupWidgetProps,
@@ -30,6 +29,7 @@ import FormWidget from "widgets/FormWidget";
 import FormButtonWidget, {
   FormButtonWidgetProps,
 } from "widgets/FormButtonWidget";
+import IconWidget, { IconWidgetProps } from "widgets/IconWidget";
 
 import CanvasWidget from "widgets/CanvasWidget";
 
@@ -73,18 +73,6 @@ class WidgetBuilderRegistry {
       ButtonWidget.getTriggerPropertyMap(),
     );
 
-    WidgetFactory.registerWidgetBuilder(
-      "SPINNER_WIDGET",
-      {
-        buildWidget(widgetData: SpinnerWidgetProps): JSX.Element {
-          return <SpinnerWidget {...widgetData} />;
-        },
-      },
-      SpinnerWidget.getPropertyValidationMap(),
-      SpinnerWidget.getDerivedPropertiesMap(),
-      SpinnerWidget.getTriggerPropertyMap(),
-    );
-
     WidgetFactory.registerWidgetBuilder(
       "INPUT_WIDGET",
       {
@@ -249,6 +237,18 @@ class WidgetBuilderRegistry {
       CanvasWidget.getDerivedPropertiesMap(),
       CanvasWidget.getTriggerPropertyMap(),
     );
+
+    WidgetFactory.registerWidgetBuilder(
+      WidgetTypes.ICON_WIDGET,
+      {
+        buildWidget(widgetProps: IconWidgetProps): JSX.Element {
+          return <IconWidget {...widgetProps} />;
+        },
+      },
+      IconWidget.getPropertyValidationMap(),
+      IconWidget.getDerivedPropertiesMap(),
+      IconWidget.getTriggerPropertyMap(),
+    );
   }
 }
 
diff --git a/app/client/src/widgets/IconWidget.tsx b/app/client/src/widgets/IconWidget.tsx
new file mode 100644
index 0000000000..6841a6f82e
--- /dev/null
+++ b/app/client/src/widgets/IconWidget.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { TriggerPropertiesMap } from "utils/WidgetFactory";
+import { WidgetType, WidgetTypes } from "constants/WidgetConstants";
+
+import IconComponent, {
+  IconType,
+} from "components/designSystems/appsmith/IconComponent";
+import { EventType, ExecutionResult } from "constants/ActionConstants";
+
+class IconWidget extends BaseWidget<IconWidgetProps, WidgetState> {
+  static getTriggerPropertyMap(): TriggerPropertiesMap {
+    return {
+      onClick: true,
+    };
+  }
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  /* eslint-disable @typescript-eslint/no-empty-function */
+  handleActionResult = (result: ExecutionResult) => {};
+
+  onClick = () => {
+    if (this.props.onClick) {
+      super.executeAction({
+        dynamicString: this.props.onClick,
+        event: {
+          type: EventType.ON_CLICK,
+          callback: this.handleActionResult,
+        },
+      });
+    }
+  };
+
+  getPageView() {
+    return (
+      <IconComponent
+        iconName={this.props.iconName}
+        disabled={this.props.disabled}
+        iconSize={this.props.iconSize}
+        color={this.props.color}
+        onClick={this.onClick}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return WidgetTypes.ICON_WIDGET;
+  }
+}
+
+export const IconSizes: { [key: string]: number } = {
+  LARGE: 32,
+  SMALL: 12,
+  DEFAULT: 16,
+};
+
+export type IconSize = typeof IconSizes[keyof typeof IconSizes] | undefined;
+
+export interface IconWidgetProps extends WidgetProps {
+  iconName: IconType;
+  onClick: string;
+  iconSize: IconSize;
+  color: string;
+}
+
+export default IconWidget;
diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx
index 85882da927..d1c74fc61d 100644
--- a/app/client/src/widgets/InputWidget.tsx
+++ b/app/client/src/widgets/InputWidget.tsx
@@ -141,15 +141,18 @@ class InputWidget extends BaseWidget<InputWidgetProps, InputWidgetState> {
   }
 }
 
-export type InputType =
-  | "TEXT"
-  | "NUMBER"
-  | "INTEGER"
-  | "PHONE_NUMBER"
-  | "EMAIL"
-  | "PASSWORD"
-  | "CURRENCY"
-  | "SEARCH";
+export const InputTypes: { [key: string]: string } = {
+  TEXT: "TEXT",
+  NUMBER: "NUMBER",
+  INTEGER: "INTEGER",
+  PHONE_NUMBER: "PHONE_NUMBER",
+  EMAIL: "EMAIL",
+  PASSWORD: "PASSWORD",
+  CURRENCY: "CURRENCY",
+  SEARCH: "SEARCH",
+};
+
+export type InputType = typeof InputTypes[keyof typeof InputTypes];
 
 export interface InputValidator {
   validationRegex: string;
diff --git a/app/client/src/widgets/SpinnerWidget.tsx b/app/client/src/widgets/SpinnerWidget.tsx
deleted file mode 100644
index 5cfa9c32f2..0000000000
--- a/app/client/src/widgets/SpinnerWidget.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
-import { WidgetType } from "constants/WidgetConstants";
-import { Intent } from "@blueprintjs/core";
-import SpinnerComponent from "components/designSystems/blueprint/SpinnerComponent";
-import {
-  WidgetPropertyValidationType,
-  BASE_WIDGET_VALIDATION,
-} from "utils/ValidationFactory";
-import { VALIDATION_TYPES } from "constants/WidgetValidation";
-
-class SpinnerWidget extends BaseWidget<SpinnerWidgetProps, WidgetState> {
-  static getPropertyValidationMap(): WidgetPropertyValidationType {
-    return {
-      ...BASE_WIDGET_VALIDATION,
-      size: VALIDATION_TYPES.NUMBER,
-      value: VALIDATION_TYPES.NUMBER,
-      ellipsize: VALIDATION_TYPES.BOOLEAN,
-    };
-  }
-  getPageView() {
-    return (
-      <SpinnerComponent
-        widgetId={this.props.widgetId}
-        widgetName={this.props.widgetName}
-        key={this.props.widgetId}
-        size={this.props.size}
-        value={this.props.value}
-        intent={this.props.intent}
-      />
-    );
-  }
-
-  getWidgetType(): WidgetType {
-    return "SPINNER_WIDGET";
-  }
-}
-
-export interface SpinnerWidgetProps extends WidgetProps {
-  size?: number;
-  value?: number;
-  ellipsize?: boolean;
-  intent?: Intent;
-}
-
-export default SpinnerWidget;
diff --git a/app/client/src/widgets/SwitchWidget.tsx b/app/client/src/widgets/SwitchWidget.tsx
index fbbbe9a979..56c3cdc8ed 100644
--- a/app/client/src/widgets/SwitchWidget.tsx
+++ b/app/client/src/widgets/SwitchWidget.tsx
@@ -1,20 +1,21 @@
-import React from "react";
-import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
-import { WidgetType } from "constants/WidgetConstants";
+export default "switch_widget";
+// import React from "react";
+// import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+// import { WidgetType } from "constants/WidgetConstants";
 
-class SwitchWidget extends BaseWidget<SwitchWidgetProps, WidgetState> {
-  getPageView() {
-    return <div />;
-  }
+// class SwitchWidget extends BaseWidget<SwitchWidgetProps, WidgetState> {
+//   getPageView() {
+//     return <div />;
+//   }
 
-  getWidgetType(): WidgetType {
-    return "SWITCH_WIDGET";
-  }
-}
+//   getWidgetType(): WidgetType {
+//     return "SWITCH_WIDGET";
+//   }
+// }
 
-export interface SwitchWidgetProps extends WidgetProps {
-  isOn: boolean;
-  label: string;
-}
+// export interface SwitchWidgetProps extends WidgetProps {
+//   isOn: boolean;
+//   label: string;
+// }
 
-export default SwitchWidget;
+// export default SwitchWidget;

From d0bb259857d260582a23f030ef55fb4ef2277836 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Tue, 14 Apr 2020 05:41:18 +0000
Subject: [PATCH 02/31] Appviewer - Sidenav width reduction to 220px

---
 app/client/src/constants/DefaultTheme.tsx         | 2 +-
 app/client/src/pages/AppViewer/viewer/SideNav.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 9141b4e263..e553e49ceb 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -384,7 +384,7 @@ export const theme: Theme = {
   headerHeight: "50px",
   canvasPadding: "20px 0 200px 0",
   sideNav: {
-    maxWidth: 300,
+    maxWidth: 220,
     minWidth: 50,
     bgColor: Colors.OXFORD_BLUE,
     fontColor: Colors.WHITE,
diff --git a/app/client/src/pages/AppViewer/viewer/SideNav.tsx b/app/client/src/pages/AppViewer/viewer/SideNav.tsx
index 4d46d764d7..f2e93eb00b 100644
--- a/app/client/src/pages/AppViewer/viewer/SideNav.tsx
+++ b/app/client/src/pages/AppViewer/viewer/SideNav.tsx
@@ -20,7 +20,7 @@ const SideNavWrapper = styled.div<{
       props.open
         ? props.theme.sideNav.maxWidth
         : props.theme.sideNav.minWidth}px;
-    transition: width 0.1s ease-in;
+    transition: width 0.2s ease-in;
     height: 100%;
     & ul {
       min-width: ${props => props.theme.sideNav.minWidth}px;

From 4ae3e4cf2037bbb2a80f7987b4f75caf5b620891 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Tue, 14 Apr 2020 11:30:55 +0530
Subject: [PATCH 03/31] add rel=preload to index.html

---
 app/client/public/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/client/public/index.html b/app/client/public/index.html
index 8e809a7c22..e9dc0a0da1 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 
 <head>
-  <script type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
-  <script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
+  <script rel=preload type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
+  <script rel=preload type="text/javascript" src="/tinymce/tinymce.min.js"></script>
   <meta charset="utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="theme-color" content="#000000" />

From af3b5d212fb6c6bae4ee4827ee4aa7e400b9a7cd Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Tue, 14 Apr 2020 12:34:14 +0000
Subject: [PATCH 04/31] fix: ui fixes and type defination fixes - avoid using
 any or undefined types in the code - fix ui issues for api home screen -
 update naming convensions - remove unwanted code - use color variables

---
 app/client/package.json                       |   3 +
 app/client/src/actions/collectionAction.ts    |   7 +
 app/client/src/actions/importActions.ts       |   9 +
 app/client/src/actions/providerActions.ts     |  46 ++
 app/client/src/api/ActionAPI.tsx              |  35 ++
 app/client/src/api/CollectionApi.ts           |  12 +
 app/client/src/api/ImportApi.ts               |  25 +
 app/client/src/api/PluginApi.ts               |   2 +
 app/client/src/api/ProvidersApi.ts            |  78 +++
 .../src/assets/icons/form/info-outline.svg    |  13 +
 app/client/src/assets/images/Curl-logo.svg    |  10 +
 app/client/src/assets/images/Curl.png         | Bin 0 -> 41657 bytes
 app/client/src/assets/images/Postman-logo.svg |  27 +
 app/client/src/assets/images/Postman.png      | Bin 0 -> 10584 bytes
 app/client/src/assets/images/no_image.png     | Bin 0 -> 5061 bytes
 .../designSystems/appsmith/Dropdown.tsx       |   4 +
 .../editorComponents/ApiResponseView.tsx      |   3 +-
 .../DynamicAutocompleteInput.tsx              |  75 ++-
 .../editorComponents/HelperTooltip.tsx        |  83 +++
 .../components/editorComponents/Sidebar.tsx   |  22 +
 .../form/fields/DatasourcesField.tsx          |   1 +
 .../form/fields/DropdownField.tsx             |   4 +
 .../form/fields/KeyValueFieldArray.tsx        | 117 +++-
 .../form/fields/TextField.tsx                 |   1 +
 .../src/constants/ApiEditorConstants.ts       |  10 +-
 app/client/src/constants/Colors.tsx           |   1 +
 .../src/constants/ReduxActionConstants.tsx    |  24 +
 .../src/constants/collectionsConstants.ts     |  21 +
 app/client/src/constants/forms.ts             |   2 +
 app/client/src/constants/messages.ts          |   3 +
 app/client/src/constants/providerConstants.ts |  58 ++
 app/client/src/constants/routes.ts            |  34 ++
 app/client/src/icons/FormIcons.tsx            |  11 +
 .../pages/Editor/APIEditor/ApiHomeScreen.tsx  | 562 ++++++++++++++++++
 .../pages/Editor/APIEditor/CurlImportForm.tsx | 194 ++++++
 .../src/pages/Editor/APIEditor/Form.tsx       | 127 +++-
 .../pages/Editor/APIEditor/PostBodyData.tsx   |  93 +++
 .../Editor/APIEditor/ProviderTemplates.tsx    | 463 +++++++++++++++
 .../Editor/APIEditor/RapidApiEditorForm.tsx   | 320 ++++++++++
 .../Editor/APIEditor/ResultPagination.tsx     | 117 ++++
 .../src/pages/Editor/APIEditor/helpers.ts     |  14 +
 .../src/pages/Editor/APIEditor/index.tsx      | 174 ++++--
 app/client/src/pages/Editor/ApiSidebar.tsx    |  32 +-
 app/client/src/pages/Editor/EditorSidebar.tsx | 147 +++--
 app/client/src/pages/Editor/routes.tsx        |  23 +-
 .../entityReducers/actionsReducer.tsx         |   4 +-
 app/client/src/reducers/index.tsx             |   6 +
 .../src/reducers/uiReducers/importReducer.ts  |  37 ++
 .../uiReducers/importedCollectionsReducer.ts  |  42 ++
 app/client/src/reducers/uiReducers/index.tsx  |   6 +
 .../reducers/uiReducers/providerReducer.ts    | 162 +++++
 app/client/src/sagas/ApiPaneSagas.ts          | 141 ++++-
 app/client/src/sagas/CollectionSagas.ts       |  39 ++
 app/client/src/sagas/CurlImportSagas.ts       |  69 +++
 app/client/src/sagas/ProvidersSaga.ts         | 148 +++++
 app/client/src/sagas/index.tsx                |   6 +
 .../src/selectors/applicationSelectors.tsx    |  11 +
 app/client/src/selectors/editorSelectors.tsx  |  16 +
 app/client/src/selectors/formSelectors.ts     |   5 +-
 .../src/transformers/RestActionTransformer.ts |  35 +-
 app/client/src/utils/AppsmithUtils.tsx        |  26 +
 .../react-infinite-scroller/index.d.ts        |   1 +
 app/client/typings/react-json-view/index.d.ts |   1 +
 app/client/yarn.lock                          | 140 ++++-
 64 files changed, 3704 insertions(+), 198 deletions(-)
 create mode 100644 app/client/src/actions/collectionAction.ts
 create mode 100644 app/client/src/actions/importActions.ts
 create mode 100644 app/client/src/actions/providerActions.ts
 create mode 100644 app/client/src/api/CollectionApi.ts
 create mode 100644 app/client/src/api/ImportApi.ts
 create mode 100644 app/client/src/api/ProvidersApi.ts
 create mode 100644 app/client/src/assets/icons/form/info-outline.svg
 create mode 100644 app/client/src/assets/images/Curl-logo.svg
 create mode 100644 app/client/src/assets/images/Curl.png
 create mode 100644 app/client/src/assets/images/Postman-logo.svg
 create mode 100644 app/client/src/assets/images/Postman.png
 create mode 100644 app/client/src/assets/images/no_image.png
 create mode 100644 app/client/src/components/editorComponents/HelperTooltip.tsx
 create mode 100644 app/client/src/constants/collectionsConstants.ts
 create mode 100644 app/client/src/constants/providerConstants.ts
 create mode 100644 app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
 create mode 100644 app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
 create mode 100644 app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
 create mode 100644 app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
 create mode 100644 app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
 create mode 100644 app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
 create mode 100644 app/client/src/pages/Editor/APIEditor/helpers.ts
 create mode 100644 app/client/src/reducers/uiReducers/importReducer.ts
 create mode 100644 app/client/src/reducers/uiReducers/importedCollectionsReducer.ts
 create mode 100644 app/client/src/reducers/uiReducers/providerReducer.ts
 create mode 100644 app/client/src/sagas/CollectionSagas.ts
 create mode 100644 app/client/src/sagas/CurlImportSagas.ts
 create mode 100644 app/client/src/sagas/ProvidersSaga.ts
 create mode 100644 app/client/typings/react-infinite-scroller/index.d.ts
 create mode 100644 app/client/typings/react-json-view/index.d.ts

diff --git a/app/client/package.json b/app/client/package.json
index 1f5ebbc78a..f183c7a20c 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -74,6 +74,9 @@
     "react-dnd-touch-backend": "^9.4.0",
     "react-dom": "^16.7.0",
     "react-helmet": "^5.2.1",
+    "react-infinite-scroller": "^1.2.4",
+    "react-json-view": "^1.19.1",
+    "react-paginating": "^1.4.0",
     "react-redux": "^7.1.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
diff --git a/app/client/src/actions/collectionAction.ts b/app/client/src/actions/collectionAction.ts
new file mode 100644
index 0000000000..9b2bbcd62e
--- /dev/null
+++ b/app/client/src/actions/collectionAction.ts
@@ -0,0 +1,7 @@
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+
+export const fetchImportedCollections = () => {
+  return {
+    type: ReduxActionTypes.FETCH_IMPORTED_COLLECTIONS_INIT,
+  };
+};
diff --git a/app/client/src/actions/importActions.ts b/app/client/src/actions/importActions.ts
new file mode 100644
index 0000000000..63e800e663
--- /dev/null
+++ b/app/client/src/actions/importActions.ts
@@ -0,0 +1,9 @@
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+import { curlImportFormValues } from "pages/Editor/APIEditor/helpers";
+
+export const submitCurlImportForm = (payload: curlImportFormValues) => {
+  return {
+    type: ReduxActionTypes.SUBMIT_CURL_FORM_INIT,
+    payload,
+  };
+};
diff --git a/app/client/src/actions/providerActions.ts b/app/client/src/actions/providerActions.ts
new file mode 100644
index 0000000000..2ac702309a
--- /dev/null
+++ b/app/client/src/actions/providerActions.ts
@@ -0,0 +1,46 @@
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+
+import {
+  AddApiToPageRequest,
+  FetchProviderWithCategoryRequest,
+} from "api/ProvidersApi";
+
+export const fetchProviders = () => {
+  return {
+    type: ReduxActionTypes.FETCH_PROVIDERS_INIT,
+  };
+};
+
+export const fetchProviderCategories = () => {
+  return {
+    type: ReduxActionTypes.FETCH_PROVIDERS_CATEGORIES_INIT,
+  };
+};
+
+export const fetchProviderTemplates = () => {
+  return {
+    type: ReduxActionTypes.FETCH_PROVIDER_TEMPLATES_INIT,
+  };
+};
+
+export const addApiToPage = (payload: AddApiToPageRequest) => {
+  return {
+    type: ReduxActionTypes.ADD_API_TO_PAGE_INIT,
+    payload,
+  };
+};
+
+export const fetchProvidersWithCategory = (
+  payload: FetchProviderWithCategoryRequest,
+) => {
+  return {
+    type: ReduxActionTypes.FETCH_PROVIDERS_WITH_CATEGORY_INIT,
+    payload,
+  };
+};
+
+export const clearProviders = () => {
+  return {
+    type: ReduxActionTypes.CLEAR_PROVIDERS,
+  };
+};
diff --git a/app/client/src/api/ActionAPI.tsx b/app/client/src/api/ActionAPI.tsx
index bbbba58866..8498f24397 100644
--- a/app/client/src/api/ActionAPI.tsx
+++ b/app/client/src/api/ActionAPI.tsx
@@ -33,6 +33,15 @@ export interface Property {
   value: string;
 }
 
+export interface BodyFormData {
+  editable: boolean;
+  mandatory: boolean;
+  description: string;
+  key: string;
+  value?: string;
+  type: string;
+}
+
 export interface APIConfigRequest {
   headers: Property[];
   httpMethod: string;
@@ -40,6 +49,7 @@ export interface APIConfigRequest {
   body: JSON | string | Record<string, any> | null;
   queryParameters: Property[];
   paginationType: PaginationType;
+  bodyFormData: BodyFormData[];
 }
 
 export interface QueryConfig {
@@ -60,6 +70,31 @@ export interface RestAction {
   actionConfiguration: Partial<APIConfigRequest>;
   jsonPathKeys: string[];
   cacheResponse?: string;
+  pluginId: string;
+}
+
+export interface RapidApiAction {
+  id: string;
+  name: string;
+  datasource: Pick<Datasource, "id"> | Omit<Datasource, "id">;
+  pluginType: string;
+  pageId: string;
+  actionConfiguration: Partial<APIConfigRequest>;
+  jsonPathKeys: string[];
+  cacheResponse?: string;
+  templateId: string;
+  proverId: string;
+  provider: ProviderInfo;
+  pluginId: string;
+  documentation: { text: string };
+}
+
+export interface ProviderInfo {
+  name: string;
+  imageUrl: string;
+  url: string;
+  description: string;
+  credentialSteps: string;
 }
 
 export type PaginationField = "PREV" | "NEXT";
diff --git a/app/client/src/api/CollectionApi.ts b/app/client/src/api/CollectionApi.ts
new file mode 100644
index 0000000000..426d867fb7
--- /dev/null
+++ b/app/client/src/api/CollectionApi.ts
@@ -0,0 +1,12 @@
+import { AxiosPromise } from "axios";
+import Api from "./Api";
+import { ImportedCollections } from "constants/collectionsConstants";
+
+class ImportedCollectionsApi extends Api {
+  static importedCollectionsURL = "v1/import/templateCollections";
+  static fetchImportedCollections(): AxiosPromise<ImportedCollections> {
+    return Api.get(ImportedCollectionsApi.importedCollectionsURL);
+  }
+}
+
+export default ImportedCollectionsApi;
diff --git a/app/client/src/api/ImportApi.ts b/app/client/src/api/ImportApi.ts
new file mode 100644
index 0000000000..25f890a4bc
--- /dev/null
+++ b/app/client/src/api/ImportApi.ts
@@ -0,0 +1,25 @@
+import { AxiosPromise } from "axios";
+import Api from "./Api";
+import { ApiResponse } from "./ApiResponses";
+
+export interface CurlImportRequest {
+  type: string;
+  pageId: string;
+  name: string;
+  curl: string;
+}
+
+class CurlImportApi extends Api {
+  static curlImportURL = `v1/import`;
+
+  static curlImport(request: CurlImportRequest): AxiosPromise<ApiResponse> {
+    const { pageId, name, curl } = request;
+    return Api.post(CurlImportApi.curlImportURL, curl, {
+      type: "CURL",
+      pageId,
+      name,
+    });
+  }
+}
+
+export default CurlImportApi;
diff --git a/app/client/src/api/PluginApi.ts b/app/client/src/api/PluginApi.ts
index ebb5dbb751..96df6a1061 100644
--- a/app/client/src/api/PluginApi.ts
+++ b/app/client/src/api/PluginApi.ts
@@ -6,6 +6,8 @@ export interface Plugin {
   id: string;
   name: string;
   type: "API" | "DB";
+  packageName: string;
+  uiComponent: "ApiEditorForm" | "RapidApiEditorForm" | "DbEditorForm";
 }
 
 class PluginsApi extends Api {
diff --git a/app/client/src/api/ProvidersApi.ts b/app/client/src/api/ProvidersApi.ts
new file mode 100644
index 0000000000..0006c2da45
--- /dev/null
+++ b/app/client/src/api/ProvidersApi.ts
@@ -0,0 +1,78 @@
+import { AxiosPromise } from "axios";
+import Api from "./Api";
+import { ApiResponse } from "./ApiResponses";
+import { Providers, ProviderTemplates } from "constants/providerConstants";
+
+export interface FetchProvidersResponse extends ApiResponse {
+  data: Providers;
+}
+
+export interface FetchProviderCategoriesResponse extends ApiResponse {
+  data: string[];
+}
+
+export interface FetchProviderTemplateResponse extends ApiResponse {
+  data: ProviderTemplates[];
+}
+
+export interface FetchProviderTemplatesRequest {
+  providerId: string;
+}
+
+export interface FetchProviderWithCategoryRequest {
+  category: string;
+  page: number;
+}
+
+export interface AddApiToPageRequest {
+  name: string;
+  pageId: string;
+  marketplaceElement: any;
+}
+
+export class ProvidersApi extends Api {
+  static providersURL = "v1/providers";
+  static providerCategoriesURL = "v1/providers/categories";
+
+  static providerTemplateURL = (providerId: string) => {
+    return `v1/marketplace/templates?providerId=${providerId}`;
+  };
+
+  static providersWithCategoryURL = (category: string, page: number) => {
+    return `v1/marketplace/providers?category=${category}&page=${page}&size=50`;
+  };
+
+  static addApiToPageURL = `v1/items/addToPage`;
+
+  static fetchProviders(): AxiosPromise<FetchProvidersResponse> {
+    return Api.get(ProvidersApi.providersURL);
+  }
+
+  static fetchProviderTemplates(
+    request: FetchProviderTemplatesRequest,
+  ): AxiosPromise<FetchProviderTemplateResponse> {
+    const { providerId } = request;
+    return Api.get(ProvidersApi.providerTemplateURL(providerId));
+  }
+
+  static addApiToPage(request: AddApiToPageRequest): AxiosPromise<ApiResponse> {
+    return Api.post(ProvidersApi.addApiToPageURL, request);
+  }
+
+  static fetchProvidersCategories(): AxiosPromise<
+    FetchProviderCategoriesResponse
+  > {
+    return Api.get(ProvidersApi.providerCategoriesURL);
+  }
+
+  static fetchProvidersWithCategory(
+    request: FetchProviderWithCategoryRequest,
+  ): AxiosPromise<FetchProvidersResponse> {
+    const { page } = request;
+    return Api.get(
+      ProvidersApi.providersWithCategoryURL(request.category, page),
+    );
+  }
+}
+
+export default ProvidersApi;
diff --git a/app/client/src/assets/icons/form/info-outline.svg b/app/client/src/assets/icons/form/info-outline.svg
new file mode 100644
index 0000000000..0cfe7d23e0
--- /dev/null
+++ b/app/client/src/assets/icons/form/info-outline.svg
@@ -0,0 +1,13 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon/Outline/info">
+<path id="Mask" fill-rule="evenodd" clip-rule="evenodd" d="M11 8.31554C11 7.75751 11.448 7.30461 12 7.30461C12.552 7.30461 13 7.75751 13 8.31554C13 8.87357 12.552 9.32646 12 9.32646C11.448 9.32646 11 8.87357 11 8.31554ZM11 11.3483C11 10.7903 11.448 10.3374 12 10.3374C12.552 10.3374 13 10.7903 13 11.3483V16.4029C13 16.9609 12.552 17.4138 12 17.4138C11.448 17.4138 11 16.9609 11 16.4029V11.3483ZM12 20.4466C7.589 20.4466 4 16.8184 4 12.3592C4 7.90005 7.589 4.27185 12 4.27185C16.411 4.27185 20 7.90005 20 12.3592C20 16.8184 16.411 20.4466 12 20.4466ZM12 2.25C6.477 2.25 2 6.7759 2 12.3592C2 17.9426 6.477 22.4685 12 22.4685C17.522 22.4685 22 17.9426 22 12.3592C22 6.7759 17.522 2.25 12 2.25Z" fill="#A3B3BF"/>
+<mask id="mask25" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="21">
+<path id="Mask_2" fill-rule="evenodd" clip-rule="evenodd" d="M11 8.31554C11 7.75751 11.448 7.30461 12 7.30461C12.552 7.30461 13 7.75751 13 8.31554C13 8.87357 12.552 9.32646 12 9.32646C11.448 9.32646 11 8.87357 11 8.31554ZM11 11.3483C11 10.7903 11.448 10.3374 12 10.3374C12.552 10.3374 13 10.7903 13 11.3483V16.4029C13 16.9609 12.552 17.4138 12 17.4138C11.448 17.4138 11 16.9609 11 16.4029V11.3483ZM12 20.4466C7.589 20.4466 4 16.8184 4 12.3592C4 7.90005 7.589 4.27185 12 4.27185C16.411 4.27185 20 7.90005 20 12.3592C20 16.8184 16.411 20.4466 12 20.4466ZM12 2.25C6.477 2.25 2 6.7759 2 12.3592C2 17.9426 6.477 22.4685 12 22.4685C17.522 22.4685 22 17.9426 22 12.3592C22 6.7759 17.522 2.25 12 2.25Z" fill="white"/>
+</mask>
+<g mask="url(#mask25)">
+<g id="&#240;&#159;&#142;&#168; Color">
+<rect id="Base" y="0.228027" width="24" height="24.2621" fill="#A3B3BF"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/app/client/src/assets/images/Curl-logo.svg b/app/client/src/assets/images/Curl-logo.svg
new file mode 100644
index 0000000000..e574f5f631
--- /dev/null
+++ b/app/client/src/assets/images/Curl-logo.svg
@@ -0,0 +1,10 @@
+<svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.8083 14.9576C48.4317 14.9576 48.127 14.6581 48.127 14.2891C48.127 13.9196 48.4317 13.6207 48.8083 13.6207C49.1843 13.6207 49.4896 13.9196 49.4896 14.2891C49.4896 14.6581 49.1843 14.9576 48.8083 14.9576ZM42.0422 26.3782C41.6656 26.3782 41.3609 26.0787 41.3609 25.7098C41.3609 25.3403 41.6656 25.0413 42.0422 25.0413C42.4182 25.0413 42.7229 25.3403 42.7229 25.7098C42.7229 26.0787 42.4182 26.3782 42.0422 26.3782ZM48.8083 13.0654C48.1195 13.0654 47.5611 13.6133 47.5611 14.2891C47.5611 14.4333 47.5981 14.5675 47.6448 14.696L41.7938 24.535C41.2284 24.6513 40.7949 25.1203 40.7949 25.7098C40.7949 26.3856 41.3534 26.9335 42.0422 26.9335C42.7304 26.9335 43.2888 26.3856 43.2888 25.7098C43.2888 25.574 43.2518 25.4498 43.2105 25.3277L49.091 15.4565C49.6392 15.3276 50.0555 14.8665 50.0555 14.2891C50.0555 13.6133 49.4971 13.0654 48.8083 13.0654Z" fill="#0C544C"/>
+<path d="M43.7068 14.9576C43.3302 14.9576 43.0255 14.6581 43.0255 14.2891C43.0255 13.9196 43.3302 13.6207 43.7068 13.6207C44.0828 13.6207 44.3875 13.9196 44.3875 14.2891C44.3875 14.6581 44.0828 14.9576 43.7068 14.9576ZM36.9401 26.3782C36.5641 26.3782 36.2588 26.0787 36.2588 25.7098C36.2588 25.3403 36.5641 25.0413 36.9401 25.0413C37.3167 25.0413 37.6214 25.3403 37.6214 25.7098C37.6214 26.0787 37.3167 26.3782 36.9401 26.3782ZM43.7068 13.0654C43.0175 13.0654 42.4596 13.6133 42.4596 14.2891C42.4596 14.4333 42.4966 14.5675 42.5432 14.696L36.6923 24.535C36.1263 24.6513 35.6929 25.1203 35.6929 25.7098C35.6929 26.3856 36.2513 26.9335 36.9401 26.9335C37.6289 26.9335 38.1873 26.3856 38.1873 25.7098C38.1873 25.574 38.1503 25.4498 38.109 25.3277L43.9895 15.4565C44.5377 15.3276 44.954 14.8665 44.954 14.2891C44.954 13.6133 44.395 13.0654 43.7068 13.0654Z" fill="#073551"/>
+<path d="M34.3881 17.0034C34.7641 17.0034 35.0694 17.3029 35.0694 17.6718C35.0694 18.0408 34.7641 18.3402 34.3881 18.3402C34.0115 18.3402 33.7068 18.0408 33.7068 17.6718C33.7068 17.3029 34.0115 17.0034 34.3881 17.0034ZM34.3881 18.8955C35.0769 18.8955 35.6353 18.3476 35.6353 17.6718C35.6353 17.5366 35.5978 17.4118 35.5565 17.2897C35.3912 16.8039 34.9385 16.4481 34.3881 16.4481C34.3001 16.4481 34.2229 16.4802 34.1397 16.4976C33.5743 16.6134 33.1409 17.0823 33.1409 17.6718C33.1409 18.3476 33.6993 18.8955 34.3881 18.8955Z" fill="#073551"/>
+<path d="M33.7068 21.9475C33.7068 21.578 34.012 21.279 34.3881 21.279C34.7641 21.279 35.0694 21.578 35.0694 21.9475C35.0694 22.3164 34.7641 22.6154 34.3881 22.6154C34.012 22.6154 33.7068 22.3164 33.7068 21.9475ZM35.6353 21.9475C35.6353 21.8117 35.5978 21.6874 35.5565 21.5653C35.3912 21.0795 34.939 20.7238 34.3881 20.7238C34.3001 20.7238 34.2229 20.7559 34.1397 20.7727C33.5743 20.889 33.1409 21.358 33.1409 21.9475C33.1409 22.6227 33.6993 23.1711 34.3881 23.1711C35.0769 23.1711 35.6353 22.6227 35.6353 21.9475Z" fill="#073551"/>
+<path d="M2.94458 23.3204C2.94458 24.2762 3.12697 24.7456 3.88657 25.3604L5.05816 26.3183C5.8006 26.9162 6.1804 26.933 7.10523 26.933H9.61578C10.1436 26.933 10.7058 26.8193 10.7058 26.1562C10.7058 25.4741 10.0793 25.3772 9.61578 25.3772H6.82628C6.51085 25.3772 6.19757 25.2151 5.91647 24.9878L4.95946 24.1941C4.71055 24.0004 4.5303 23.8383 4.5303 23.5309V21.6025C4.5303 21.2951 4.71055 21.133 4.95946 20.9372L5.91647 20.1435C6.19757 19.9182 6.51085 19.7561 6.82628 19.7561H9.61578C10.0793 19.7561 10.7058 19.6572 10.7058 18.9772C10.7058 18.314 10.1436 18.2003 9.61578 18.2003H7.10523C6.1804 18.2003 5.8006 18.2172 5.05816 18.8151L3.88657 19.7709C3.12697 20.3877 2.94458 20.8572 2.94458 21.813V23.3204Z" fill="#073551"/>
+<path d="M19.2927 19.2698C19.2927 18.7351 19.1769 18.2003 18.5009 18.2003C17.8229 18.2003 17.707 18.7351 17.707 19.2698V23.7898L15.3788 25.232C15.2308 25.3288 15.0656 25.3772 14.8832 25.3772H14.3553C13.9755 25.3772 13.5635 25.2804 13.4305 25.053C13.2974 24.8277 13.2824 24.4046 13.2653 24.0488L13.1 19.2698C13.0829 18.7666 13.0013 18.2003 12.3233 18.2003C11.598 18.2003 11.5143 18.8003 11.5315 19.3666L11.6967 24.2593C11.7289 25.1014 11.7139 25.7667 12.4241 26.3667C12.952 26.8025 13.4477 26.933 13.894 26.933H15.0656C15.4947 26.933 15.9239 26.7393 16.4367 26.4151L17.7242 25.5878V25.8467C17.7242 26.3814 17.84 26.933 18.516 26.933C19.3592 26.933 19.2927 26.1393 19.2927 25.7835V19.2698Z" fill="#073551"/>
+<path d="M20.1194 25.8635C20.1194 26.3983 20.2353 26.933 20.9112 26.933C21.5892 26.933 21.7051 26.3983 21.7051 25.8635V21.9267L23.9174 20.1288C24.1985 19.9014 24.4131 19.7561 24.7092 19.7561H25.1727C25.5525 19.7561 25.9323 19.7561 26.1297 20.0319C26.2949 20.2572 26.2949 20.453 26.2949 20.7119C26.2949 21.213 26.5267 21.6677 27.1039 21.6677C27.7819 21.6677 27.8806 21.1161 27.8806 20.5814C27.8806 19.8698 27.6982 19.3351 27.1704 18.8151C26.7412 18.394 26.2305 18.2003 25.619 18.2003H24.3465C23.8509 18.2003 23.3895 18.5077 22.9432 18.8635L21.7051 19.8698V19.2361C21.7051 18.7182 21.5399 18.2003 20.9112 18.2003C20.1859 18.2003 20.1194 18.7835 20.1194 19.3498V25.8635Z" fill="#073551"/>
+<path d="M30.7868 16.0781C30.7868 15.1539 30.5229 14.9918 29.6152 14.9918H27.948C27.418 14.9918 26.8579 15.1055 26.8579 15.7687C26.8579 16.4508 27.4845 16.5476 27.948 16.5476H29.2032V25.3772H27.948C27.418 25.3772 26.8579 25.4909 26.8579 26.1561C26.8579 26.8361 27.4845 26.933 27.948 26.933H31.9756C32.4391 26.933 33.0656 26.8361 33.0656 26.1561C33.0656 25.4909 32.5056 25.3772 31.9756 25.3772H30.7868V16.0781Z" fill="#073551"/>
+</svg>
diff --git a/app/client/src/assets/images/Curl.png b/app/client/src/assets/images/Curl.png
new file mode 100644
index 0000000000000000000000000000000000000000..474feeef845a49edcb976cf480491c446758134f
GIT binary patch
literal 41657
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
P00000NkvXXu0mjfWd&?m

literal 0
HcmV?d00001

diff --git a/app/client/src/assets/images/Postman-logo.svg b/app/client/src/assets/images/Postman-logo.svg
new file mode 100644
index 0000000000..9fb1dc9a81
--- /dev/null
+++ b/app/client/src/assets/images/Postman-logo.svg
@@ -0,0 +1,27 @@
+<svg width="53" height="52" viewBox="0 0 53 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M11.7954 42.0293L3.52979 42.3105L7.76694 38.0839L11.7958 42.0296L11.7954 42.0293Z" fill="#F15A24"/>
+<path d="M49.2895 24.0654C47.7539 35.8129 36.8016 44.1127 24.8302 42.6043C12.8566 41.0974 4.39721 30.3521 5.93296 18.6055C7.46961 6.85816 18.4195 -1.4425 30.394 0.0660409C42.3669 1.57246 50.8283 12.3188 49.2897 24.0651" fill="#F15A24"/>
+<path d="M33.1847 12.2389C34.6209 13.7369 33.2034 17.2786 33.2034 17.2786C33.2034 17.2786 31.8025 22.2858 23.781 28.7792L22.2837 27.3372L32.4663 17.1264L32.6631 16.8658C32.934 16.4326 33.1583 12.2098 33.1847 12.2389Z" fill="#999999"/>
+<path d="M33.1847 12.2389C34.6209 13.7369 33.2034 17.2786 33.2034 17.2786C33.2034 17.2786 31.8025 22.2858 23.781 28.7792L22.2837 27.3372L32.4663 17.1264L32.6631 16.8658C32.934 16.4326 33.1583 12.2098 33.1847 12.2389V12.2389Z" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.0847 25.2145L33.1636 12.2021C33.8274 12.9755 33.9686 13.8087 33.776 14.996C33.6462 15.8183 32.1987 17.4616 32.1987 17.4616L22.2839 27.3374" fill="#666666"/>
+<path d="M20.0847 25.2145L33.1636 12.2021C33.8274 12.9755 33.9686 13.8087 33.776 14.996C33.6462 15.8183 32.1987 17.4616 32.1987 17.4616L22.2839 27.3374" stroke="white" stroke-width="0.150125" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.1842 12.2478L20.0838 25.2146L20.1102 25.1894L20.1053 25.1913L16.855 22.049C23.6328 13.7771 28.0152 12.2349 28.0152 12.2349C28.0152 12.2349 30.8681 11.1422 32.9034 11.9901C33.0598 12.0723 33.1277 12.1196 33.1838 12.2481" fill="#FF931E"/>
+<path d="M33.1842 12.2478L20.0838 25.2146L20.1102 25.1894L20.1053 25.1913L16.855 22.049C23.6328 13.7771 28.0152 12.2349 28.0152 12.2349C28.0152 12.2349 30.8681 11.1422 32.9034 11.9901C33.0598 12.0723 33.1277 12.1196 33.1838 12.2481L33.1842 12.2478V12.2478Z" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.7798 28.7788C20.6544 31.3042 16.6545 35.2715 11.2176 38.0385L12.4269 43.1108L7.30127 38.1575L20.083 25.2144" fill="#999999"/>
+<path d="M23.7798 28.7788C20.6544 31.3042 16.6545 35.2715 11.2176 38.0385L12.4269 43.1108L7.30127 38.1575L20.083 25.2144" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9429 22.0915L20.1181 25.1947L12.7827 26.7537L16.8727 22.0356L16.9433 22.0917L16.9429 22.0915Z" fill="#F15A24"/>
+<path d="M16.9429 22.0915L20.1181 25.1947L12.7827 26.7537L16.8727 22.0356L16.9433 22.0917L16.9429 22.0915Z" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.935 8.48492C31.6235 11.2433 33.6476 13.7263 36.4588 14.0339C39.2679 14.3402 41.801 12.3527 42.1145 9.59542C42.4269 6.83812 40.3997 4.3524 37.5896 4.0459C34.778 3.74116 32.2468 5.72603 31.935 8.48492Z" fill="#999999"/>
+<path d="M31.935 8.48492C31.6235 11.2433 33.6476 13.7263 36.4588 14.0339C39.2679 14.3402 41.801 12.3527 42.1145 9.59542C42.4269 6.83812 40.3997 4.3524 37.5896 4.0459C34.778 3.74116 32.2468 5.72603 31.935 8.48492V8.48492Z" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.3785 11.8166C42.3232 10.4624 42.2743 8.43642 42.0847 7.83629C41.8519 7.10124 41.3314 5.90609 40.4233 5.28479L35.6216 9.62417C35.6216 9.62417 39.3118 13.5144 39.4079 13.5272C39.4478 13.5318 40.517 13.0514 41.3785 11.8166Z" fill="#666666"/>
+<path d="M41.3785 11.8166C42.3232 10.4624 42.2743 8.43642 42.0847 7.83629C41.8519 7.10124 41.3314 5.90609 40.4233 5.28479L35.6216 9.62417C35.6216 9.62417 39.3118 13.5144 39.4079 13.5272C39.4478 13.5318 40.517 13.0514 41.3785 11.8166V11.8166ZM40.4097 8.41737C40.4097 8.41737 40.8714 9.52964 40.2856 10.395L40.4097 8.41737Z" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.3969 27.339L17.0977 28.2643L20.2964 25.0035" fill="#666666"/>
+<path d="M17.0654 22.1143L23.8023 28.335M22.396 27.3391L17.0967 28.2644L20.2955 25.0036L22.396 27.3391Z" stroke="white" stroke-width="0.23975" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="53" height="52" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/app/client/src/assets/images/Postman.png b/app/client/src/assets/images/Postman.png
new file mode 100644
index 0000000000000000000000000000000000000000..cfd823454ddcf919e8de0c71eefef941ba3fa8c9
GIT binary patch
literal 10584
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

literal 0
HcmV?d00001

diff --git a/app/client/src/assets/images/no_image.png b/app/client/src/assets/images/no_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb274965d4e4cb46dfb18866c866ca54ed6164dc
GIT binary patch
literal 5061
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

literal 0
HcmV?d00001

diff --git a/app/client/src/components/designSystems/appsmith/Dropdown.tsx b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
index 5be9a2bb54..cc48be9a33 100644
--- a/app/client/src/components/designSystems/appsmith/Dropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
@@ -12,6 +12,8 @@ type DropdownProps = {
   input: WrappedFieldInputProps;
   placeholder: string;
   width?: number;
+  isSearchable?: boolean;
+  isDisabled?: boolean;
 };
 
 const selectStyles = {
@@ -56,6 +58,8 @@ export const BaseDropdown = (props: DropdownProps) => {
       {...input}
       width={props.width}
       onChange={value => input.onChange(value)}
+      isSearchable={props.isSearchable}
+      isDisabled={props.isDisabled}
     />
   );
 };
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 66f260a025..f9eb323769 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -13,6 +13,7 @@ import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
 import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
 import CodeEditor from "components/editorComponents/CodeEditor";
 import { getActionResponses } from "selectors/entitiesSelector";
+import { Colors } from "constants/Colors";
 
 const ResponseWrapper = styled.div`
   position: relative;
@@ -30,7 +31,7 @@ const ResponseMetaInfo = styled.div`
 
 const StatusCodeText = styled(BaseText)<{ code: string }>`
   color: ${props =>
-    props.code.match(/2\d\d/) ? props.theme.colors.primary : "red"};
+    props.code.match(/2\d\d/) ? props.theme.colors.primary : Colors.RED};
 `;
 
 const TableWrapper = styled.div`
diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
index 5b0a833027..9c5778cc7b 100644
--- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
+++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
@@ -13,6 +13,7 @@ import "codemirror/addon/display/autorefresh";
 import { getDataTreeForAutocomplete } from "selectors/dataTreeSelectors";
 import { AUTOCOMPLETE_MATCH_REGEX } from "constants/BindingsConstants";
 import ErrorTooltip from "components/editorComponents/ErrorTooltip";
+import HelperTooltip from "components/editorComponents/HelperTooltip";
 import { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
 import _ from "lodash";
 import { parseDynamicString } from "utils/DynamicBindingUtils";
@@ -27,6 +28,7 @@ const getBorderStyle = (
     hasError: boolean;
     singleLine: boolean;
     isFocused: boolean;
+    disabled?: boolean;
   },
 ) => {
   if (props.hasError) return props.theme.colors.error;
@@ -79,6 +81,7 @@ const Wrapper = styled.div<{
   hasError: boolean;
   singleLine: boolean;
   isFocused: boolean;
+  disabled?: boolean;
 }>`
   ${props =>
     props.singleLine && props.isFocused
@@ -91,7 +94,8 @@ const Wrapper = styled.div<{
   `
       : `z-index: 0; position: relative`}
   background-color: ${props =>
-    props.editorTheme === THEMES.DARK ? "#272822" : "#fff"}
+    props.editorTheme === THEMES.DARK ? "#272822" : "#fff"};
+  background-color: ${props => props.disabled && "#eef2f5"};
   border: 1px solid;
   border-color: ${getBorderStyle};
   border-radius: 4px;
@@ -115,6 +119,13 @@ const Wrapper = styled.div<{
       border-radius: 4px;
       height: auto;
     }
+    ${props =>
+      props.disabled &&
+      `
+    .CodeMirror-cursor {
+      display: none !important;
+    }
+    `}
     .CodeMirror pre.CodeMirror-placeholder {
       color: #a3b3bf;
     }
@@ -129,6 +140,25 @@ const Wrapper = styled.div<{
     }
     `}
   }
+  && {
+    .CodeMirror-lines {
+      background-color: ${props => props.disabled && "#eef2f5"};
+      cursor: ${props => (props.disabled ? "not-allowed" : "text")}
+    }
+  }
+  .bp3-popover-target {
+    padding-right: 10px;
+    padding-top: 5px;
+  }
+  .leftImageStyles {
+    width: 20px;
+    height: 20px;
+    margin: 5px;
+  }
+  .linkStyles {
+    margin: 5px;
+    margin-right: 11px;
+  }
 `;
 
 const IconContainer = styled.div`
@@ -149,6 +179,9 @@ const IconContainer = styled.div`
       }
     }
   }
+  .bp3-popover-target {
+    padding-right: 10px;
+  }
 `;
 
 const THEMES = {
@@ -165,12 +198,17 @@ interface ReduxStateProps {
 export type DynamicAutocompleteInputProps = {
   placeholder?: string;
   leftIcon?: Function;
+  rightIcon?: Function;
+  description?: string;
   height?: number;
   theme?: THEME;
   meta?: Partial<WrappedFieldMetaProps>;
   showLineNumbers?: boolean;
   allowTabIndent?: boolean;
   singleLine: boolean;
+  disabled?: boolean;
+  leftImage?: string;
+  link?: string;
 };
 
 type Props = ReduxStateProps &
@@ -199,7 +237,10 @@ class DynamicAutocompleteInput extends Component<Props, State> {
     if (this.textArea.current) {
       const options: EditorConfiguration = {};
       if (this.props.theme === "DARK") options.theme = "monokai";
-      if (!this.props.input.onChange) options.readOnly = true;
+      if (!this.props.input.onChange || this.props.disabled) {
+        options.readOnly = true;
+        options.scrollbarStyle = "null";
+      }
       if (this.props.showLineNumbers) options.lineNumbers = true;
       const extraKeys: Record<string, any> = {
         "Ctrl-Space": "autocomplete",
@@ -350,7 +391,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
   };
 
   render() {
-    const { input, meta, theme, singleLine } = this.props;
+    const { input, meta, theme, singleLine, disabled } = this.props;
     const hasError = !!(meta && meta.error);
     let showError = false;
     if (this.editor) {
@@ -364,17 +405,45 @@ class DynamicAutocompleteInput extends Component<Props, State> {
           hasError={hasError}
           singleLine={singleLine}
           isFocused={this.state.isFocused}
+          disabled={disabled}
         >
           <HintStyles />
           <IconContainer>
             {this.props.leftIcon && <this.props.leftIcon />}
           </IconContainer>
+
+          {this.props.leftImage && (
+            <img
+              src={this.props.leftImage}
+              alt="img"
+              className="leftImageStyles"
+            />
+          )}
+
           <textarea
             ref={this.textArea}
             {..._.omit(this.props.input, ["onChange", "value"])}
             defaultValue={input.value}
             placeholder={this.props.placeholder}
           />
+          {this.props.link && (
+            <React.Fragment>
+              <a
+                href={this.props.link}
+                target="_blank"
+                className="linkStyles"
+                rel="noopener noreferrer"
+              >
+                API documentation
+              </a>
+            </React.Fragment>
+          )}
+          {this.props.rightIcon && (
+            <HelperTooltip
+              description={this.props.description}
+              rightIcon={this.props.rightIcon}
+            />
+          )}
         </Wrapper>
       </ErrorTooltip>
     );
diff --git a/app/client/src/components/editorComponents/HelperTooltip.tsx b/app/client/src/components/editorComponents/HelperTooltip.tsx
new file mode 100644
index 0000000000..7b99ff85a1
--- /dev/null
+++ b/app/client/src/components/editorComponents/HelperTooltip.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { Popover, PopoverInteractionKind } from "@blueprintjs/core";
+import styled, { createGlobalStyle } from "styled-components";
+import { Colors } from "constants/Colors";
+
+const TooltipStyles = createGlobalStyle`
+ .helper-tooltip{
+  .bp3-popover {
+    box-shadow: none;
+    max-width: 258px;
+    .bp3-popover-arrow {
+      display: block;
+      fill: none;
+    }
+    .bp3-popover-arrow-fill {
+      fill:  ${Colors.BLUE_CHARCOAL};
+    }
+    .bp3-popover-content {
+      padding: 15px;
+      background-color: ${Colors.BLUE_CHARCOAL};
+      color: #fff;
+      text-align: left;
+      border-radius: 4px;
+      text-transform: initial;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 18px;
+    }
+  }
+ }
+`;
+
+const IconContainer = styled.div`
+  .bp3-icon {
+    border-radius: 4px 0 0 4px;
+    margin: 0;
+    height: 30px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #eef2f5;
+    svg {
+      height: 20px;
+      width: 20px;
+      path {
+        fill: #979797;
+      }
+    }
+  }
+  .bp3-popover-target {
+    padding-right: 10px;
+  }
+`;
+
+interface Props {
+  description?: string;
+  rightIcon: Function;
+}
+
+const HelperTooltip = (props: Props) => {
+  return (
+    <React.Fragment>
+      <TooltipStyles />
+      <Popover
+        autoFocus={true}
+        canEscapeKeyClose={true}
+        content={props.description}
+        position="bottom"
+        defaultIsOpen={false}
+        interactionKind={PopoverInteractionKind.HOVER}
+        usePortal
+        portalClassName="helper-tooltip"
+      >
+        <IconContainer>
+          <props.rightIcon width={22} height={22} />
+        </IconContainer>
+      </Popover>
+    </React.Fragment>
+  );
+};
+
+export default HelperTooltip;
diff --git a/app/client/src/components/editorComponents/Sidebar.tsx b/app/client/src/components/editorComponents/Sidebar.tsx
index 743dae3b87..e97b61bace 100644
--- a/app/client/src/components/editorComponents/Sidebar.tsx
+++ b/app/client/src/components/editorComponents/Sidebar.tsx
@@ -6,6 +6,9 @@ import {
   BUILDER_URL,
   API_EDITOR_ID_URL,
   PAGE_LIST_EDITOR_URL,
+  getCurlImportPageURL,
+  API_EDITOR_URL_WITH_SELECTED_PAGE_ID,
+  getProviderTemplatesURL,
 } from "constants/routes";
 import WidgetSidebar from "pages/Editor/WidgetSidebar";
 import ApiSidebar from "pages/Editor/ApiSidebar";
@@ -47,6 +50,25 @@ export const Sidebar = () => {
           component={PageListSidebar}
           name={"PageListSidebar"}
         />
+        <AppRoute
+          exact
+          path={getCurlImportPageURL()}
+          component={ApiSidebar}
+          name={"ApiSidebar"}
+        />
+        <AppRoute
+          exact
+          path={getProviderTemplatesURL()}
+          component={ApiSidebar}
+          name={"ApiSidebar"}
+        />
+
+        <AppRoute
+          exact
+          path={API_EDITOR_URL_WITH_SELECTED_PAGE_ID()}
+          component={ApiSidebar}
+          name={"ApiSidebar"}
+        />
       </Switch>
     </SidebarWrapper>
   );
diff --git a/app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx b/app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx
index 745033c268..1cc907a27c 100644
--- a/app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx
@@ -27,6 +27,7 @@ const DatasourcesField = (
   const options = props.datasources.list
     .filter(r => r.pluginId === props.pluginId)
     .filter(r => r.datasourceConfiguration !== null)
+    .filter(r => r.datasourceConfiguration.url)
     .map(r => ({
       label: r.datasourceConfiguration.url.endsWith("/")
         ? r.datasourceConfiguration.url.slice(0, -1)
diff --git a/app/client/src/components/editorComponents/form/fields/DropdownField.tsx b/app/client/src/components/editorComponents/form/fields/DropdownField.tsx
index 9c463d128c..cdfe677789 100644
--- a/app/client/src/components/editorComponents/form/fields/DropdownField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/DropdownField.tsx
@@ -11,6 +11,8 @@ interface DropdownFieldProps {
   }>;
   placeholder: string;
   width?: number;
+  isSearchable?: boolean;
+  isDisabled?: boolean;
 }
 
 const DropdownField = (props: DropdownFieldProps) => {
@@ -23,6 +25,8 @@ const DropdownField = (props: DropdownFieldProps) => {
       format={(value: string) => _.find(props.options, { value }) || ""}
       normalize={(option: { value: string }) => option.value}
       width={props.width}
+      isSearchable={props.isSearchable}
+      isDisabled={props.isDisabled}
     />
   );
 };
diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
index 0e699c4981..c3eec8cfd3 100644
--- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
+++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from "react";
 import { FieldArray, WrappedFieldArrayProps } from "redux-form";
+import styled from "styled-components";
 import { Icon } from "@blueprintjs/core";
 import { FormIcons } from "icons/FormIcons";
 import DynamicTextField from "./DynamicTextField";
 import FormRow from "components/editorComponents/FormRow";
 import FormLabel from "components/editorComponents/FormLabel";
-import styled from "styled-components";
 
 const FormRowWithLabel = styled(FormRow)`
   flex-wrap: wrap;
@@ -20,7 +20,7 @@ const FormRowWithLabel = styled(FormRow)`
 const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
   useEffect(() => {
     // Always maintain 2 rows
-    if (props.fields.length < 2) {
+    if (props.fields.length < 2 && props.pushFields !== false) {
       for (let i = props.fields.length; i < 2; i += 1) {
         props.fields.push({ key: "", value: "" });
       }
@@ -29,37 +29,80 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
 
   return (
     <React.Fragment>
-      {props.fields.map((field: any, index: number) => (
-        <FormRowWithLabel key={index}>
-          {index === 0 && <FormLabel>{props.label}</FormLabel>}
-          <DynamicTextField
-            name={`${field}.key`}
-            placeholder="Key"
-            singleLine
-          />
-          <DynamicTextField
-            name={`${field}.value`}
-            placeholder="Value"
-            singleLine
-          />
-          {index === props.fields.length - 1 ? (
-            <Icon
-              icon="plus"
-              iconSize={20}
-              onClick={() => props.fields.push({ key: "", value: "" })}
-              color={"#A3B3BF"}
-              style={{ alignSelf: "center" }}
-            />
-          ) : (
-            <FormIcons.DELETE_ICON
-              height={20}
-              width={20}
-              onClick={() => props.fields.remove(index)}
-              style={{ alignSelf: "center" }}
-            />
-          )}
-        </FormRowWithLabel>
-      ))}
+      {typeof props.fields.getAll() === "object" && (
+        <React.Fragment>
+          {props.fields.map((field: any, index: number) => (
+            <FormRowWithLabel key={index}>
+              {index === 0 && props.label !== "" && (
+                <FormLabel>{props.label}</FormLabel>
+              )}
+              <DynamicTextField
+                name={`${field}.key`}
+                placeholder="Key"
+                singleLine
+              />
+              {!props.actionConfig && (
+                <DynamicTextField
+                  name={`${field}.value`}
+                  placeholder="Value"
+                  singleLine
+                />
+              )}
+
+              {props.actionConfig && props.actionConfig[index] && (
+                <React.Fragment>
+                  <DynamicTextField
+                    name={`${field}.value`}
+                    height={30}
+                    placeholder={
+                      props.placeholder
+                        ? props.placeholder
+                        : props.actionConfig[index].mandatory &&
+                          props.actionConfig[index].type
+                        ? `${props.actionConfig[index].type}`
+                        : props.actionConfig[index].type
+                        ? `${props.actionConfig[index].type} (Optional)`
+                        : `(Optional)`
+                    }
+                    singleLine
+                    rightIcon={
+                      props.actionConfig[index].description && props.rightIcon
+                    }
+                    noArrows
+                    description={props.actionConfig[index].description}
+                    disabled={
+                      props.actionConfig[index].editable ||
+                      props.actionConfig[index].editable === undefined
+                        ? false
+                        : true
+                    }
+                  />
+                </React.Fragment>
+              )}
+              {props.addOrDeleteFields !== false && (
+                <React.Fragment>
+                  {index === props.fields.length - 1 ? (
+                    <Icon
+                      icon="plus"
+                      iconSize={20}
+                      onClick={() => props.fields.push({ key: "", value: "" })}
+                      color={"#A3B3BF"}
+                      style={{ alignSelf: "center" }}
+                    />
+                  ) : (
+                    <FormIcons.DELETE_ICON
+                      height={20}
+                      width={20}
+                      onClick={() => props.fields.remove(index)}
+                      style={{ alignSelf: "center" }}
+                    />
+                  )}
+                </React.Fragment>
+              )}
+            </FormRowWithLabel>
+          ))}
+        </React.Fragment>
+      )}
     </React.Fragment>
   );
 };
@@ -67,6 +110,14 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
 type Props = {
   name: string;
   label: string;
+  rightIcon?: Function;
+  description?: string;
+  actionConfig?: any;
+  addOrDeleteFields?: boolean;
+  mandatory?: boolean;
+  type?: string;
+  placeholder?: string;
+  pushFields?: boolean;
 };
 
 const KeyValueFieldArray = (props: Props) => {
diff --git a/app/client/src/components/editorComponents/form/fields/TextField.tsx b/app/client/src/components/editorComponents/form/fields/TextField.tsx
index a5d8cd0c00..170895e951 100644
--- a/app/client/src/components/editorComponents/form/fields/TextField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/TextField.tsx
@@ -19,6 +19,7 @@ class TextField extends React.Component<
         component={BaseTextInput}
         {...this.props}
         noValidate
+        disabled={this.props.disabled}
       />
     );
   }
diff --git a/app/client/src/constants/ApiEditorConstants.ts b/app/client/src/constants/ApiEditorConstants.ts
index e024d592a5..6b91f0a723 100644
--- a/app/client/src/constants/ApiEditorConstants.ts
+++ b/app/client/src/constants/ApiEditorConstants.ts
@@ -8,9 +8,17 @@ export const HTTP_METHOD_OPTIONS = HTTP_METHODS.map(method => ({
 }));
 
 export const PLUGIN_NAME = "RestTemplatePluginExecutor";
-
+export const REST_PLUGIN_PACKAGE_NAME = "restapi-plugin";
 export const DEFAULT_API_ACTION: Partial<RestAction> = {
   actionConfiguration: {
     httpMethod: HTTP_METHODS[0],
   },
 };
+
+export const DEFAULT_PROVIDER_OPTION = "Business Software";
+export const POST_BODY_FORMATS = ["application/json", "x-www-form-urlencoded"];
+
+export const POST_BODY_FORMAT_OPTIONS = POST_BODY_FORMATS.map(method => ({
+  label: method,
+  value: method,
+}));
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index 7688ba6ff2..07b5f3e88a 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -39,6 +39,7 @@ export const Colors: Record<string, string> = {
   AZURE_RADIANCE: "#0384FE",
   OCEAN_GREEN: "#36AB80",
   BUTTER_CUP: "#F7AF22",
+  BLUE_CHARCOAL: "#23292E",
   TROUT: "#4C565E",
 };
 
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
index d9e8b85427..825636e2e0 100644
--- a/app/client/src/constants/ReduxActionConstants.tsx
+++ b/app/client/src/constants/ReduxActionConstants.tsx
@@ -150,7 +150,22 @@ export const ReduxActionTypes: { [key: string]: string } = {
   FETCH_ACTIONS_FOR_PAGE_SUCCESS: "FETCH_ACTIONS_FOR_PAGE_SUCCESS",
   EXECUTE_API_ACTION_REQUEST: "EXECUTE_API_ACTION_REQUEST",
   EXECUTE_API_ACTION_SUCCESS: "EXECUTE_API_ACTION_SUCCESS",
+  FETCH_IMPORTED_COLLECTIONS_INIT: "FETCH_IMPORTED_COLLECTIONS_INIT",
+  FETCH_IMPORTED_COLLECTIONS_SUCCESS: "FETCH_IMPORTED_COLLECTIONS_SUCCESS",
+  FETCH_PROVIDERS_INIT: "FETCH_PROVIDERS_INIT",
+  FETCH_PROVIDERS_SUCCESS: "FETCH_PROVIDERS_SUCCESS",
+  SUBMIT_CURL_FORM_INIT: "SUBMIT_CURL_FORM_INIT",
+  SUBMIT_CURL_FORM_SUCCESS: "SUBMIT_CURL_FORM_SUCCESS",
   SET_WIDGET_DYNAMIC_PROPERTY: "SET_WIDGET_DYNAMIC_PROPERTY",
+  FETCH_PROVIDER_TEMPLATES_INIT: "FETCH_PROVIDER_TEMPLATES_INIT",
+  FETCH_PROVIDER_TEMPLATES_SUCCESS: "FETCH_PROVIDER_TEMPLATES_SUCCESS",
+  ADD_API_TO_PAGE_INIT: "ADD_API_TO_PAGE_INIT",
+  ADD_API_TO_PAGE_SUCCESS: "ADD_API_TO_PAGE_SUCCESS",
+  FETCH_PROVIDERS_CATEGORIES_INIT: "FETCH_PROVIDERS_CATEGORIES_INIT",
+  FETCH_PROVIDERS_CATEGORIES_SUCCESS: "FETCH_PROVIDERS_CATEGORIES_SUCCESS",
+  FETCH_PROVIDERS_WITH_CATEGORY_INIT: "FETCH_PROVIDERS_WITH_CATEGORY_INIT",
+  FETCH_PROVIDERS_WITH_CATEGORY_SUCCESS:
+    "FETCH_PROVIDERS_WITH_CATEGORY_SUCCESS",
   SHOW_MODAL: "SHOW_MODAL",
   SHOW_MODAL_BY_NAME: "SHOW_MODAL_BY_NAME",
   CLOSE_MODAL: "CLOSE_MODAL",
@@ -158,6 +173,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   CREATE_MODAL_SUCCESS: "CREATE_MODAL_SUCCESS",
   UPDATE_CANVAS_SIZE: "UPDATE_CANVAS_SIZE",
   UPDATE_CURRENT_PAGE: "UPDATE_CURRENT_PAGE",
+  CLEAR_PROVIDERS: "CLEAR_PROVIDERS",
   BATCHED_UPDATE: "BATCHED_UPDATE",
   EXECUTE_BATCH: "EXECUTE_BATCH",
 };
@@ -224,6 +240,13 @@ export const ReduxActionErrorTypes: { [key: string]: string } = {
   UPDATE_WIDGET_NAME_ERROR: "UPDATE_WIDGET_NAME_ERROR",
   FETCH_ACTIONS_FOR_PAGE_ERROR: "FETCH_ACTIONS_FOR_PAGE_ERROR",
   EXECUTE_API_ACTION_ERROR: "EXECUTE_API_ACTION_ERROR",
+  FETCH_IMPORTED_COLLECTIONS_ERROR: "FETCH_IMPORTED_COLLECTIONS_ERROR",
+  FETCH_PROVIDERS_ERROR: "FETCH_PROVIDERS_ERROR",
+  SUBMIT_CURL_FORM_ERROR: "SUBMIT_CURL_FORM_ERROR",
+  FETCH_PROVIDER_TEMPLATES_ERROR: "FETCH_PROVIDER_TEMPLATES_ERROR",
+  ADD_API_TO_PAGE_ERROR: "ADD_API_TO_PAGE_ERROR",
+  FETCH_PROVIDERS_CATEGORIES_ERROR: "FETCH_PROVIDERS_CATEGORIES_ERROR",
+  FETCH_PROVIDERS_WITH_CATEGORY_ERROR: "FETCH_PROVIDERS_WITH_CATEGORY_ERROR",
   CREATE_MODAL_ERROR: "CREATE_MODAL_ERROR",
 };
 
@@ -231,6 +254,7 @@ export const ReduxFormActionTypes: { [key: string]: string } = {
   VALUE_CHANGE: "@@redux-form/CHANGE",
   UPDATE_FIELD_ERROR: "@@redux-form/UPDATE_SYNC_ERRORS",
   ARRAY_REMOVE: "@@redux-form/ARRAY_REMOVE",
+  ARRAY_PUSH: "@@redux-form/ARRAY_PUSH",
 };
 
 export type ReduxActionErrorType = typeof ReduxActionErrorTypes[keyof typeof ReduxActionErrorTypes];
diff --git a/app/client/src/constants/collectionsConstants.ts b/app/client/src/constants/collectionsConstants.ts
new file mode 100644
index 0000000000..a1a0e6e66a
--- /dev/null
+++ b/app/client/src/constants/collectionsConstants.ts
@@ -0,0 +1,21 @@
+import { ApiResponse } from "api/ApiResponses";
+
+export type TemplateList = {
+  id: string;
+  delete: boolean;
+  name: string;
+  providerId: string;
+  publisher: string;
+  packageName: string;
+  versionId: string;
+};
+
+export type CollectionDataArray = {
+  id: string;
+  deleted: boolean;
+  apiTemplateList: Array<TemplateList>;
+};
+
+export type ImportedCollections = ApiResponse & {
+  data: Array<CollectionDataArray>;
+};
diff --git a/app/client/src/constants/forms.ts b/app/client/src/constants/forms.ts
index 4d64142d72..cf24e93db3 100644
--- a/app/client/src/constants/forms.ts
+++ b/app/client/src/constants/forms.ts
@@ -12,3 +12,5 @@ export const RESET_PASSWORD_FORM_NAME = "ResetPasswordForm";
 export const CREATE_PASSWORD_FORM_NAME = "CreatePasswordForm";
 
 export const CREATE_ORGANIZATION_FORM_NAME = "CreateOrganizationForm";
+export const CURL_IMPORT_FORM = "CurlImportForm";
+export const API_HOME_SCREEN_FORM = "APIHomeScreenForm";
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
index a639278345..6e1af79c35 100644
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@@ -120,7 +120,10 @@ export const CREATE_PASSWORD_INVALID_TOKEN =
   "The invite link is invalid. Please try request a new invite";
 
 export const DELETING_APPLICATION = "Deleting application...";
+
+export const CURL_IMPORT_SUCCESS = "Curl Import Successfull";
 export const FORGOT_PASSWORD_PAGE_LOGIN_LINK = "Back to Login";
+export const ADD_API_TO_PAGE_SUCCESS_MESSAGE = "Api added to page.";
 export const INPUT_WIDGET_DEFAULT_VALIDATION_ERROR = "Invalid input";
 
 export const AUTOFIT_ALL_COLUMNS = "Autofit all columns";
diff --git a/app/client/src/constants/providerConstants.ts b/app/client/src/constants/providerConstants.ts
new file mode 100644
index 0000000000..af03e734bd
--- /dev/null
+++ b/app/client/src/constants/providerConstants.ts
@@ -0,0 +1,58 @@
+import { ApiResponse } from "api/ApiResponses";
+
+export type ProvidersDataArray = ApiResponse & {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  imageUrl: string;
+};
+
+export type ProvidersCategoriesResponse = ApiResponse & {
+  data: string[];
+};
+
+export type Providers = ApiResponse & {
+  providers: ProvidersDataArray[];
+  total: number;
+};
+
+export type ProviderTemplates = ApiResponse & {
+  data: Array<ProviderTemplateArray>;
+  length: number;
+  templateId: string;
+};
+
+export type ProviderTemplateArray = ApiResponse & {
+  templateData: {
+    id: string;
+    deleted: boolean;
+    name: string;
+    providerId: string;
+    publisher: string;
+    packageName: string;
+    versionId: string;
+    apiTemplateConfiguration: {
+      documentation: string;
+      sampleResponse: {
+        body: string;
+      };
+    };
+    actionConfiguration: {
+      timeoutInMillisecond: number;
+      paginationType: string;
+      path: string;
+      httpMethod: string;
+      headers: [];
+      routeParameters: [];
+    };
+    datasourceConfiguration: {
+      url: string;
+    };
+  };
+  isOpen: boolean;
+  addToPageStatus: boolean;
+  addToPageLoading: boolean;
+};
+
+export const DEFAULT_TEMPLATE_TYPE = "TEMPLATE";
diff --git a/app/client/src/constants/routes.ts b/app/client/src/constants/routes.ts
index 24bef97380..7d2fc561dc 100644
--- a/app/client/src/constants/routes.ts
+++ b/app/client/src/constants/routes.ts
@@ -22,6 +22,13 @@ export type APIEditorRouteParams = {
   apiId?: string;
 };
 
+export type ProviderViewerRouteParams = {
+  applicationId: string;
+  pageId: string;
+  providerId: string;
+  destinationPageId: string;
+};
+
 export const BUILDER_BASE_URL = (applicationId = ":applicationId"): string =>
   `/applications/${applicationId}`;
 
@@ -53,6 +60,17 @@ export const API_EDITOR_ID_URL = (
   apiId = ":apiId",
 ): string => `${API_EDITOR_URL(applicationId, pageId)}/${apiId}`;
 
+export const API_EDITOR_URL_WITH_SELECTED_PAGE_ID = (
+  applicationId = ":applicationId",
+  pageId = ":pageId",
+  selectedPageId = ":importTo",
+): string => {
+  return `${BUILDER_PAGE_URL(
+    applicationId,
+    pageId,
+  )}/api?importTo=${selectedPageId}`;
+};
+
 export const APP_VIEW_URL = `/applications/:applicationId`;
 
 export const getApplicationViewerURL = (
@@ -83,6 +101,22 @@ function convertToQueryParams(params: Record<string, string> = {}): string {
   return queryParams ? "?" + queryParams : "";
 }
 
+export const getCurlImportPageURL = (
+  applicationId = ":applicationId",
+  pageId = ":pageId",
+): string => `${API_EDITOR_URL(applicationId, pageId)}/curl/curl-import`;
+
+export const getProviderTemplatesURL = (
+  applicationId = ":applicationId",
+  pageId = ":pageId",
+  providerId = ":providerId",
+  destinationPageId = ":destinationPageId",
+): string =>
+  `${API_EDITOR_URL(
+    applicationId,
+    pageId,
+  )}/provider/${providerId}/?importTo=${destinationPageId}`;
+
 export const EDITOR_ROUTES = [
   {
     icon: MenuIcons.WIDGETS_ICON,
diff --git a/app/client/src/icons/FormIcons.tsx b/app/client/src/icons/FormIcons.tsx
index a580c71c79..773d22267d 100644
--- a/app/client/src/icons/FormIcons.tsx
+++ b/app/client/src/icons/FormIcons.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Icon } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
 import { IconProps, IconWrapper } from "constants/IconConstants";
+import { ReactComponent as InfoIcon } from "assets/icons/form/info-outline.svg";
 import { ReactComponent as DeleteIcon } from "assets/icons/form/trash.svg";
 import { ReactComponent as AddNewIcon } from "assets/icons/form/add-new.svg";
 
@@ -10,6 +11,11 @@ import { ReactComponent as AddNewIcon } from "assets/icons/form/add-new.svg";
 export const FormIcons: {
   [id: string]: Function;
 } = {
+  INFO_ICON: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <InfoIcon />
+    </IconWrapper>
+  ),
   DELETE_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
       <DeleteIcon />
@@ -20,6 +26,11 @@ export const FormIcons: {
       <AddNewIcon />
     </IconWrapper>
   ),
+  CREATE_NEW_ICON: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <Icon icon={IconNames.PLUS} />
+    </IconWrapper>
+  ),
   PLUS_ICON: (props: IconProps) => (
     <IconWrapper {...props}>
       <Icon icon={IconNames.PLUS} color={props.color} iconSize={props.height} />
diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
new file mode 100644
index 0000000000..cbde09e011
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
@@ -0,0 +1,562 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { reduxForm, InjectedFormProps, getFormValues } from "redux-form";
+import { Icon, Card } from "@blueprintjs/core";
+import styled from "styled-components";
+import InfiniteScroll from "react-infinite-scroller";
+import {
+  DEFAULT_API_ACTION,
+  DEFAULT_PROVIDER_OPTION,
+} from "constants/ApiEditorConstants";
+import {
+  getCurlImportPageURL,
+  getProviderTemplatesURL,
+} from "constants/routes";
+import { RestAction } from "api/ActionAPI";
+import ImageAlt from "assets/images/no_image.png";
+import { AppState } from "reducers";
+import { ActionDataState } from "reducers/entityReducers/actionsReducer";
+import { getImportedCollections } from "selectors/applicationSelectors";
+import { TemplateList } from "constants/collectionsConstants";
+import { ProvidersDataArray } from "constants/providerConstants";
+import {
+  getProviders,
+  getProvidersLoadingState,
+} from "selectors/applicationSelectors";
+import { getProviderCategories } from "selectors/editorSelectors";
+import { createActionRequest } from "actions/actionActions";
+import { fetchImportedCollections } from "actions/collectionAction";
+import { API_HOME_SCREEN_FORM } from "constants/forms";
+import {
+  fetchProviders,
+  fetchProviderCategories,
+  fetchProvidersWithCategory,
+  clearProviders,
+} from "actions/providerActions";
+import { createNewApiName } from "utils/AppsmithUtils";
+import { Colors } from "constants/Colors";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
+// import { BaseTextInput } from "components/designSystems/appsmith/TextInputComponent";
+import { API_EDITOR_URL_WITH_SELECTED_PAGE_ID } from "constants/routes";
+import DropdownField from "components/editorComponents/form/fields/DropdownField";
+import Spinner from "components/editorComponents/Spinner";
+// import PostmanLogo from "assets/images/Postman-logo.svg";
+import CurlLogo from "assets/images/Curl-logo.svg";
+import { FetchProviderWithCategoryRequest } from "api/ProvidersApi";
+
+// const SearchContainer = styled.div`
+//   display: flex;
+//   width: 40%;
+//   .closeBtn {
+//     position: absolute;
+//     left: 70%;
+//   }
+// `;
+//
+// const SearchBar = styled(BaseTextInput)`
+//   margin-bottom: 10px;
+//   input {
+//     background-color: ${Colors.WHITE};
+//     1px solid ${Colors.GEYSER};
+//   }
+// `;
+
+const ApiHomePage = styled.div`
+  font-size: 20px;
+  padding: 20px;
+  margin-left: 10px;
+  min-height: 95vh;
+  max-height: 95vh;
+  overflow: auto;
+  padding-bottom: 50px;
+  .closeBtn {
+    position: absolute;
+    left: 70%;
+  }
+`;
+
+const StyledContainer = styled.div`
+  flex: 1;
+  padding-top: 12px;
+  padding-bottom: 12px;
+
+  .sectionHeadings {
+    font-weight: 500;
+    font-size: 16px;
+  }
+  .link {
+    color: ${Colors.OXFORD_BLUE};
+  }
+  .link:hover {
+    color: ${Colors.OXFORD_BLUE};
+    text-decoration: none !important;
+  }
+  .textBtn {
+    font-size: 14px;
+    justify-content: center;
+    text-align: center;
+    letter-spacing: -0.17px;
+    color: ${Colors.OXFORD_BLUE};
+    font-weight: 500;
+    text-decoration: none !important;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .link {
+    color: ${Colors.OXFORD_BLUE};
+  }
+  a:hover {
+    color: ${Colors.OXFORD_BLUE};
+    text-decoration: none;
+  }
+`;
+
+const ApiCard = styled.div`
+  flex: 1;
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin-left: -10px;
+  justify-content: flex-start;
+  text-align: center;
+  min-width: 150px;
+  border-radius: 4px;
+
+  .apiImage {
+    height: 50px;
+    width: auto;
+    max-width: 100%;
+    margin-top: -5px;
+    margin-bottom: 10px;
+  }
+  .curlImage {
+    width: 60px;
+  }
+  .createIcon {
+    align-items: center;
+    margin-top: 15px;
+    margin-bottom: 25px;
+  }
+  .eachCard {
+    margin: 15px;
+    width: 140px;
+    height: 110px;
+    padding-bottom: 0px;
+    cursor: pointer;
+  }
+`;
+
+const CardList = styled.div`
+  margin: 15px;
+  .eachProviderCard {
+    width: 140px;
+    height: 110px;
+    padding-bottom: 0px;
+    cursor: pointer;
+  }
+`;
+
+// const NoCollections = styled.div`
+//   padding-top: 52px;
+//   padding-bottom: 50px;
+//   text-align: center;
+//   width: 438px;
+//   margin: 0 auto;
+//   color: #666666;
+//   font-size: 14px;
+//   line-height: 24px;
+// `;
+//
+// const ImportedApisCard = styled.div`
+//   flex: 1;
+//   display: inline-flex;
+//   flex-wrap: wrap;
+//   margin-left: -10px;
+//   justify-content: flex-start;
+//   text-align: center;
+//   border-radius: 4px;
+//
+//   .importedApiIcon {
+//     display: flex;
+//     height: 30px;
+//     width: 30px;
+//     margin-right: 15px;
+//     color: ${Colors.OXFORD_BLUE};
+//   }
+//   .eachImportedApiCard {
+//     margin: 10px;
+//     width: 225px;
+//     height: 60px;
+//     display: flex;
+//     flex-wrap: wrap;
+//   }
+// `;
+
+const DropdownSelect = styled.div`
+  font-size: 14px;
+  float: right;
+  width: 232px;
+  margin-right: 8%;
+  margin-bottom: 25px;
+`;
+
+const LoadingContainer = styled(CenteredWrapper)`
+  height: 50%;
+`;
+
+const PageLoadingContainer = styled(CenteredWrapper)`
+  margin-top: 100px;
+  height: 50%;
+`;
+
+type ApiHomeScreenProps = {
+  currentCategory: string;
+  importedCollections: TemplateList[];
+  fetchImportedCollections: () => void;
+  providers: ProvidersDataArray[];
+  fetchProviders: () => void;
+  clearProviders: () => void;
+  fetchProviderCategories: () => void;
+  providerCategories: string[];
+  pageId: string;
+  applicationId: string;
+  actions: ActionDataState;
+  createAction: (data: Partial<RestAction>) => void;
+  fetchProvidersWithCategory: (
+    request: FetchProviderWithCategoryRequest,
+  ) => void;
+  location: {
+    search: string;
+  };
+  history: {
+    replace: (data: string) => void;
+    push: (data: string) => void;
+  };
+  isFetchingProviders: boolean;
+  providersTotal: number;
+  isSwitchingCategory: boolean;
+};
+
+type ApiHomeScreenState = {
+  page: number;
+};
+
+type Props = ApiHomeScreenProps & InjectedFormProps<null, ApiHomeScreenProps>;
+
+class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      page: 1,
+    };
+  }
+
+  componentDidMount() {
+    const { importedCollections } = this.props;
+    this.props.fetchProviderCategories();
+    if (importedCollections.length === 0) {
+      this.props.fetchImportedCollections();
+    }
+    this.props.clearProviders();
+    this.props.change("category", DEFAULT_PROVIDER_OPTION);
+    this.props.fetchProvidersWithCategory({
+      category: DEFAULT_PROVIDER_OPTION,
+      page: 1,
+    });
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.currentCategory !== this.props.currentCategory) {
+      this.props.clearProviders();
+      this.props.fetchProvidersWithCategory({
+        category: this.props.currentCategory,
+        page: 1,
+      });
+    }
+  }
+
+  handleCreateNew = (params: string) => {
+    const { actions } = this.props;
+    const pageId = new URLSearchParams(params).get("importTo");
+    if (pageId) {
+      const newActionName = createNewApiName(actions, pageId);
+      this.props.createAction({
+        ...DEFAULT_API_ACTION,
+        name: newActionName,
+        pageId,
+      });
+    }
+  };
+
+  // handleSearchChange = (e: React.ChangeEvent<{ value: string }>) => {
+  //   const value = e.target.value;
+  // };
+
+  handleFetchMoreProviders = (page: number) => {
+    const { currentCategory } = this.props;
+    this.props.fetchProvidersWithCategory({
+      category: currentCategory,
+      page: page,
+    });
+  };
+
+  render() {
+    const {
+      // importedCollections,
+      providers,
+      applicationId,
+      pageId,
+      location,
+      history,
+      // isFetchingProviders,
+      providerCategories,
+      providersTotal,
+      isSwitchingCategory,
+    } = this.props;
+    const queryParams: string = location.search;
+    let destinationPageId = new URLSearchParams(location.search).get(
+      "importTo",
+    );
+
+    if (!destinationPageId) {
+      destinationPageId = pageId;
+      history.push(
+        API_EDITOR_URL_WITH_SELECTED_PAGE_ID(applicationId, pageId, pageId),
+      );
+    }
+    const curlImportURL =
+      getCurlImportPageURL(applicationId, pageId) + location.search;
+
+    const PROVIDER_CATEGORIES_OPTIONS = providerCategories.map(category => ({
+      label: category,
+      value: category,
+    }));
+
+    const ApiHomepageTopSection = (
+      <React.Fragment>
+        {/* <SearchContainer>
+          <SearchBar
+            icon="search"
+            input={{
+              onChange: this.handleSearchChange,
+            }}
+            placeholder="Search"
+          />
+        </SearchContainer> */}
+
+        <StyledContainer>
+          <p className="sectionHeadings">{"Import API"}</p>
+          <ApiCard>
+            <Card
+              interactive={false}
+              className="eachCard"
+              onClick={() => this.handleCreateNew(queryParams)}
+            >
+              <Icon icon="plus" iconSize={20} className="createIcon" />
+              <p className="textBtn">Create new</p>
+            </Card>
+
+            {/* <Card interactive={false} className="eachCard">
+              <img src={PostmanLogo} className="apiImage" alt="Postman"></img>
+              <p className="textBtn">Postman</p>
+            </Card> */}
+
+            <Link to={curlImportURL}>
+              <Card interactive={false} className="eachCard">
+                <img src={CurlLogo} className="curlImage" alt="CURL" />
+                <p className="textBtn">CURL</p>
+              </Card>
+            </Link>
+          </ApiCard>
+        </StyledContainer>
+
+        {/* Imported APIs section start */}
+        {/* <StyledContainer>
+          <p className="sectionHeadings">{"Imported APIs"}</p>
+
+          {importedCollections.length > 0 ? (
+            <ImportedApisCard>
+              {importedCollections.map(importedCollection => (
+                <Card
+                  key={importedCollection.id}
+                  interactive={false}
+                  className="eachImportedApiCard"
+                >
+                  <Icon
+                    icon="folder-close"
+                    iconSize={20}
+                    className="importedApiIcon"
+                  />
+                  <p className="textBtn">{importedCollection.name}</p>
+                </Card>
+              ))}
+            </ImportedApisCard>
+          ) : (
+            <NoCollections>
+              <p>
+                Your imported APIs will appear here. You can import APIs from
+                the options in the above section.
+              </p>
+            </NoCollections>
+          )}
+        </StyledContainer> */}
+      </React.Fragment>
+    );
+
+    return (
+      <React.Fragment>
+        <ApiHomePage>
+          {isSwitchingCategory ? (
+            <>
+              {ApiHomepageTopSection}
+              <PageLoadingContainer>
+                <Spinner size={30} />
+              </PageLoadingContainer>
+            </>
+          ) : (
+            <>
+              <InfiniteScroll
+                pageStart={0}
+                initialLoad={false}
+                loadMore={this.handleFetchMoreProviders.bind(this)}
+                useWindow={false}
+                hasMore={providers.length < providersTotal}
+                loader={
+                  <LoadingContainer>
+                    <Spinner size={30} />
+                  </LoadingContainer>
+                }
+              >
+                {ApiHomepageTopSection}
+                {/* Marketplace APIs section start */}
+                <StyledContainer>
+                  <p className="sectionHeadings">{"Marketplace APIs"}</p>
+                  <DropdownSelect>
+                    <DropdownField
+                      placeholder="All APIs"
+                      width={232}
+                      name="category"
+                      options={PROVIDER_CATEGORIES_OPTIONS}
+                    />
+                  </DropdownSelect>
+
+                  <br />
+                  <br />
+                  <br />
+
+                  {isSwitchingCategory ? (
+                    <LoadingContainer>
+                      <Spinner size={30} />
+                    </LoadingContainer>
+                  ) : (
+                    <>
+                      <div>
+                        <ApiCard>
+                          {providers.map(provider => (
+                            <CardList key={provider.id}>
+                              <Link
+                                to={{
+                                  pathname: getProviderTemplatesURL(
+                                    applicationId,
+                                    pageId,
+                                    provider.id,
+                                    destinationPageId
+                                      ? destinationPageId
+                                      : pageId,
+                                  ),
+                                  state: {
+                                    providerName: provider.name,
+                                    providerImage: provider.imageUrl,
+                                  },
+                                }}
+                              >
+                                <Card
+                                  interactive={false}
+                                  className="eachProviderCard"
+                                >
+                                  {provider.imageUrl ? (
+                                    <img
+                                      src={provider.imageUrl}
+                                      className="apiImage"
+                                      alt="Provider"
+                                    />
+                                  ) : (
+                                    <img
+                                      src={ImageAlt}
+                                      className="apiImage"
+                                      alt="Provider"
+                                    />
+                                  )}
+                                  {provider.name && (
+                                    <p
+                                      className="textBtn"
+                                      title={provider.name}
+                                    >
+                                      {provider.name}
+                                    </p>
+                                  )}
+                                </Card>
+                              </Link>
+                            </CardList>
+                          ))}
+                        </ApiCard>
+                      </div>
+                    </>
+                  )}
+                </StyledContainer>
+                {/* Marketplace APIs section end */}
+              </InfiniteScroll>
+            </>
+          )}
+        </ApiHomePage>
+      </React.Fragment>
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  const { providers } = state.ui;
+  const { providersTotal, isSwitchingCategory } = providers;
+  const formData = getFormValues(API_HOME_SCREEN_FORM)(
+    state,
+  ) as FetchProviderWithCategoryRequest;
+  let category = DEFAULT_PROVIDER_OPTION;
+
+  if (formData) {
+    category = formData.category;
+  }
+
+  return {
+    currentCategory: category,
+    importedCollections: getImportedCollections(state),
+    providers: getProviders(state),
+    isFetchingProviders: getProvidersLoadingState(state),
+    actions: state.entities.actions,
+    providersTotal,
+    providerCategories: getProviderCategories(state),
+    isSwitchingCategory,
+  };
+};
+
+const mapDispatchToProps = (dispatch: any) => ({
+  fetchImportedCollections: () => dispatch(fetchImportedCollections()),
+  fetchProviders: () => dispatch(fetchProviders()),
+  clearProviders: () => dispatch(clearProviders()),
+  fetchProviderCategories: () => dispatch(fetchProviderCategories()),
+  fetchProvidersWithCategory: (request: FetchProviderWithCategoryRequest) =>
+    dispatch(fetchProvidersWithCategory(request)),
+  createAction: (data: Partial<RestAction>) =>
+    dispatch(createActionRequest(data)),
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(
+  reduxForm<null, ApiHomeScreenProps>({
+    form: API_HOME_SCREEN_FORM,
+  })(ApiHomeScreen),
+);
diff --git a/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
new file mode 100644
index 0000000000..77873f9ff1
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
@@ -0,0 +1,194 @@
+import React from "react";
+import { reduxForm, InjectedFormProps, Form, Field } from "redux-form";
+import { connect } from "react-redux";
+import { withRouter, RouteComponentProps } from "react-router";
+import { Icon } from "@blueprintjs/core";
+import styled from "styled-components";
+import { AppState } from "reducers";
+import { ActionDataState } from "reducers/entityReducers/actionsReducer";
+import { CURL_IMPORT_FORM } from "constants/forms";
+import { BuilderRouteParams } from "constants/routes";
+import { curlImportFormValues, curlImportSubmitHandler } from "./helpers";
+import { createNewApiName } from "utils/AppsmithUtils";
+import { Colors } from "constants/Colors";
+import Button from "components/editorComponents/Button";
+import CurlLogo from "assets/images/Curl-logo.svg";
+
+const CurlImportFormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-end;
+  margin-top: 8px;
+  overflow: auto;
+
+  .textAreaStyles {
+    margin-bottom: 20px;
+    min-height: 50vh;
+    max-height: 50vh;
+    padding: 10px;
+    min-width: 100%;
+    max-width: 100%;
+    overflow: auto;
+    border-radius: 4px;
+    border: 1px solid ${Colors.GEYSER};
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .importBtn {
+    width: 111px;
+    margin-right: 21px;
+    margin-top: 10px;
+  }
+`;
+
+const CurlImport = styled.div`
+  font-size: 20px;
+  padding: 20px;
+
+  .backBtn {
+    padding-bottom: 3px;
+    cursor: pointer;
+  }
+  .backBtnText {
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+`;
+
+const CurlContainer = styled.div`
+  margin-top: 8vh;
+  padding-left: 70px;
+  padding-right: 70px;
+
+  .inputLabel {
+    font-weight: 500;
+    font-size: 14px;
+    color: ${Colors.BLUE_BAYOUX};
+  }
+`;
+
+const DividerLine = styled.div`
+  border: 1px solid ${Colors.CONCRETE};
+`;
+
+const Header = styled.div`
+  .header {
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 32px;
+    padding-left: 20px;
+    padding-top: 10px;
+  }
+  .curlImage {
+    float: left;
+    margin-top: -5px;
+    padding-right: 10px;
+  }
+  .divider {
+    border: 1px solid ${Colors.CONCRETE};
+  }
+  .closeBtn {
+    position: absolute;
+    left: 70%;
+  }
+`;
+
+interface ReduxStateProps {
+  actions: ActionDataState;
+  initialValues: {};
+  isImportingCurl: boolean;
+}
+
+export type StateAndRouteProps = ReduxStateProps &
+  RouteComponentProps<BuilderRouteParams>;
+
+type Props = StateAndRouteProps &
+  InjectedFormProps<curlImportFormValues, StateAndRouteProps>;
+
+class CurlImportForm extends React.Component<Props> {
+  render() {
+    const { handleSubmit, history, isImportingCurl } = this.props;
+
+    return (
+      <React.Fragment>
+        <Header>
+          <p className="header">
+            <img src={CurlLogo} className="curlImage" alt="CURL"></img>
+            Import from CURL
+          </p>
+          <hr className="divider" />
+        </Header>
+        <Form onSubmit={handleSubmit(curlImportSubmitHandler)}>
+          <CurlImport>
+            <Icon
+              icon="chevron-left"
+              iconSize={16}
+              className="backBtn"
+              onClick={() => history.goBack()}
+            />
+            <span className="backBtnText" onClick={() => history.goBack()}>
+              {" Back"}
+            </span>
+            <CurlContainer>
+              <label className="inputLabel">{"Paste CURL Code Here"}</label>
+              <CurlImportFormContainer>
+                <Field
+                  name="curl"
+                  component="textarea"
+                  className="textAreaStyles"
+                />
+                <Field type="hidden" name="pageId" component="input" />
+                <Field type="hidden" name="name" component="input" />
+              </CurlImportFormContainer>
+            </CurlContainer>
+          </CurlImport>
+          <DividerLine />
+          <CurlImportFormContainer>
+            <Button
+              text="Import"
+              loading={isImportingCurl}
+              onClick={handleSubmit(curlImportSubmitHandler)}
+              intent="primary"
+              filled
+              size="small"
+              className="t--application-publish-btn importBtn"
+            />
+          </CurlImportFormContainer>
+        </Form>
+      </React.Fragment>
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState, props: Props): ReduxStateProps => {
+  const destinationPageId = new URLSearchParams(props.location.search).get(
+    "importTo",
+  );
+
+  if (destinationPageId) {
+    return {
+      actions: state.entities.actions,
+      initialValues: {
+        pageId: destinationPageId,
+        name: createNewApiName(state.entities.actions, destinationPageId),
+      },
+      isImportingCurl: state.ui.imports.isImportingCurl,
+    };
+  }
+  return {
+    actions: state.entities.actions,
+    initialValues: {},
+    isImportingCurl: state.ui.imports.isImportingCurl,
+  };
+};
+
+export default withRouter(
+  connect(mapStateToProps)(
+    reduxForm<curlImportFormValues, StateAndRouteProps>({
+      form: CURL_IMPORT_FORM,
+    })(CurlImportForm),
+  ),
+);
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index bf0de1e9b8..a77f802193 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -1,7 +1,17 @@
-import React from "react";
-import { reduxForm, InjectedFormProps, FormSubmitHandler } from "redux-form";
-import { HTTP_METHOD_OPTIONS } from "constants/ApiEditorConstants";
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import {
+  reduxForm,
+  InjectedFormProps,
+  FormSubmitHandler,
+  formValueSelector,
+} from "redux-form";
+import {
+  HTTP_METHOD_OPTIONS,
+  HTTP_METHODS,
+} from "constants/ApiEditorConstants";
 import styled from "styled-components";
+import PostBodyData from "./PostBodyData";
 import FormLabel from "components/editorComponents/FormLabel";
 import FormRow from "components/editorComponents/FormRow";
 import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
@@ -22,6 +32,7 @@ const Form = styled.form`
   display: flex;
   flex-direction: column;
   height: calc(100vh - ${props => props.theme.headerHeight});
+  overflow: auto;
   width: 100%;
   ${FormLabel} {
     padding: ${props => props.theme.spaces[3]}px;
@@ -29,7 +40,7 @@ const Form = styled.form`
   ${FormRow} {
     padding: ${props => props.theme.spaces[2]}px;
     & > * {
-      margin-right: 5px;
+      margin-right: 10px;
     }
     ${FormLabel} {
       padding: 0;
@@ -40,20 +51,24 @@ const Form = styled.form`
 
 const MainConfiguration = styled.div`
   padding-top: 10px;
+  padding-left: 17px;
 `;
 
 const SecondaryWrapper = styled.div`
   display: flex;
   height: 100%;
   border-top: 1px solid #d0d7dd;
+  margin-top: 15px;
 `;
 
 const RequestParamsWrapper = styled.div`
   flex: 4;
   border-right: 1px solid #d0d7dd;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding-top: 6px;
+  padding-left: 17px;
+  padding-right: 10px;
 `;
 
 const ActionButtons = styled.div`
@@ -68,8 +83,8 @@ const ActionButton = styled(BaseButton)`
   }
 `;
 
-const JSONEditorFieldWrapper = styled.div`
-  margin: 5px;
+const HeadersSection = styled.div`
+  margin-bottom: 32px;
 `;
 
 const DatasourceWrapper = styled.div`
@@ -85,7 +100,6 @@ const TabbedViewContainer = styled.div`
 interface APIFormProps {
   pluginId: string;
   allowSave: boolean;
-  allowPostBody: boolean;
   onSubmit: FormSubmitHandler<RestAction>;
   onSaveClick: () => void;
   onRunClick: (paginationField?: PaginationField) => void;
@@ -95,6 +109,15 @@ interface APIFormProps {
   isDeleting: boolean;
   paginationType: PaginationType;
   appName: string;
+  actionConfiguration?: any;
+  displayFormat: string;
+  httpMethodFromForm: string;
+  actionConfigurationBody: object | string;
+  actionConfigurationHeaders?: any;
+  contentType: {
+    key: string;
+    value: string;
+  };
 }
 
 type Props = APIFormProps & InjectedFormProps<RestAction, APIFormProps>;
@@ -103,7 +126,6 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
   const {
     pluginId,
     allowSave,
-    allowPostBody,
     onSaveClick,
     onDeleteClick,
     onRunClick,
@@ -111,7 +133,28 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
     isDeleting,
     isRunning,
     isSaving,
+    actionConfiguration,
+    actionConfigurationHeaders,
+    actionConfigurationBody,
+    httpMethodFromForm,
+    contentType,
+    displayFormat,
   } = props;
+  const allowPostBody =
+    httpMethodFromForm && httpMethodFromForm !== HTTP_METHODS[0];
+  useEffect(() => {
+    if (allowPostBody) {
+      if (contentType) {
+        if (!displayFormat) {
+          props.change("displayFormat", contentType.value);
+        } else {
+          contentType.value = displayFormat;
+          props.change("contentType.value", displayFormat);
+        }
+      }
+    }
+  });
+
   return (
     <Form onSubmit={handleSubmit}>
       {isSaving && <LoadingOverlayScreen>Saving...</LoadingOverlayScreen>}
@@ -178,27 +221,25 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
                 title: "API Input",
                 panelComponent: (
                   <RequestParamsWrapper>
-                    <KeyValueFieldArray
-                      name="actionConfiguration.headers"
-                      label="Headers"
-                    />
+                    <HeadersSection>
+                      <KeyValueFieldArray
+                        name="actionConfiguration.headers"
+                        label="Headers"
+                        actionConfig={
+                          actionConfiguration && actionConfigurationHeaders
+                        }
+                        placeholder="Value"
+                      />
+                    </HeadersSection>
                     <KeyValueFieldArray
                       name="actionConfiguration.queryParameters"
                       label="Params"
                     />
                     {allowPostBody && (
-                      <React.Fragment>
-                        <FormLabel>{"Post Body"}</FormLabel>
-                        <JSONEditorFieldWrapper>
-                          <DynamicTextField
-                            name="actionConfiguration.body"
-                            height={300}
-                            showLineNumbers
-                            allowTabIndent
-                            singleLine={false}
-                          />
-                        </JSONEditorFieldWrapper>
-                      </React.Fragment>
+                      <PostBodyData
+                        actionConfiguration={actionConfigurationBody}
+                        change={props.change}
+                      />
                     )}
                   </RequestParamsWrapper>
                 ),
@@ -223,7 +264,35 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default reduxForm<RestAction, APIFormProps>({
-  form: API_EDITOR_FORM_NAME,
-  enableReinitialize: true,
-})(ApiEditorForm);
+const selector = formValueSelector(API_EDITOR_FORM_NAME);
+
+export default connect(state => {
+  const displayFormat = selector(state, "displayFormat");
+  const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod");
+  const actionConfiguration = selector(state, "actionConfiguration");
+  const actionConfigurationBody = selector(state, "actionConfiguration.body");
+  const actionConfigurationHeaders = selector(
+    state,
+    "actionConfiguration.headers",
+  );
+  let contentType;
+  if (actionConfigurationHeaders) {
+    contentType = actionConfigurationHeaders.find(
+      (header: any) => header.key === "content-type",
+    );
+  }
+
+  return {
+    displayFormat,
+    httpMethodFromForm,
+    actionConfiguration,
+    actionConfigurationBody,
+    contentType,
+    actionConfigurationHeaders,
+  };
+})(
+  reduxForm<RestAction, APIFormProps>({
+    form: API_EDITOR_FORM_NAME,
+    destroyOnUnmount: false,
+  })(ApiEditorForm),
+);
diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
new file mode 100644
index 0000000000..d0604ab9cc
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { connect } from "react-redux";
+import styled from "styled-components";
+import { formValueSelector } from "redux-form";
+import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants";
+import { API_EDITOR_FORM_NAME } from "constants/forms";
+import FormLabel from "components/editorComponents/FormLabel";
+import DropdownField from "components/editorComponents/form/fields/DropdownField";
+import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
+import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
+
+const DropDownContainer = styled.div`
+  width: 232px;
+  margin: 5px;
+  margin-bottom: 21px;
+`;
+
+const PostbodyContainer = styled.div`
+  margin-top: 41px;
+`;
+
+const JSONEditorFieldWrapper = styled.div`
+  margin: 5px;
+`;
+export interface RapidApiAction {
+  editable: boolean;
+  mandatory: boolean;
+  description: string;
+  key: string;
+  value?: string;
+  type: string;
+}
+
+interface PostDataProps {
+  actionConfiguration: any;
+  displayFormat: string;
+  change: Function;
+}
+type Props = PostDataProps;
+
+const PostBodyData = (props: Props) => {
+  const { displayFormat } = props;
+
+  return (
+    <PostbodyContainer>
+      <FormLabel>{"Post Body"}</FormLabel>
+      <DropDownContainer>
+        <DropdownField
+          placeholder="Format"
+          name="displayFormat"
+          isSearchable={false}
+          width={232}
+          options={POST_BODY_FORMAT_OPTIONS}
+        />
+      </DropDownContainer>
+
+      {displayFormat === POST_BODY_FORMAT_OPTIONS[0].value && (
+        <React.Fragment>
+          <JSONEditorFieldWrapper>
+            <DynamicTextField
+              name="actionConfiguration.body[0]"
+              height={300}
+              showLineNumbers
+              allowTabIndent
+              singleLine={false}
+            />
+          </JSONEditorFieldWrapper>
+        </React.Fragment>
+      )}
+
+      {displayFormat === POST_BODY_FORMAT_OPTIONS[1].value && (
+        <React.Fragment>
+          <KeyValueFieldArray name="actionConfiguration.body[1]" label="" />
+        </React.Fragment>
+      )}
+    </PostbodyContainer>
+  );
+};
+
+const selector = formValueSelector(API_EDITOR_FORM_NAME);
+export default connect(state => {
+  const displayFormat = selector(state, "displayFormat");
+  const headers = selector(state, "actionConfiguration.headers");
+  let contentType;
+  if (headers) {
+    contentType = headers.find((header: any) => header.key === "content-type");
+  }
+
+  return {
+    displayFormat,
+    contentType,
+  };
+})(PostBodyData);
diff --git a/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx b/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
new file mode 100644
index 0000000000..56df2b4694
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
@@ -0,0 +1,463 @@
+import React from "react";
+import { connect } from "react-redux";
+import { Icon, Collapse } from "@blueprintjs/core";
+import { RouteComponentProps } from "react-router-dom";
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+import styled from "styled-components";
+import ReactJson from "react-json-view";
+import { AppState } from "reducers";
+import Button from "components/editorComponents/Button";
+import { ProviderViewerRouteParams } from "constants/routes";
+import {
+  getProviderTemplates,
+  getProvidersTemplatesLoadingState,
+} from "selectors/applicationSelectors";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
+import { ActionDataState } from "reducers/entityReducers/actionsReducer";
+import {
+  ProviderTemplateArray,
+  DEFAULT_TEMPLATE_TYPE,
+} from "constants/providerConstants";
+import { AddApiToPageRequest } from "api/ProvidersApi";
+import ImageAlt from "assets/images/no_image.png";
+import { addApiToPage } from "actions/providerActions";
+import { Colors } from "constants/Colors";
+import { getDuplicateName } from "utils/AppsmithUtils";
+import { BaseTextInput } from "components/designSystems/appsmith/TextInputComponent";
+import Spinner from "components/editorComponents/Spinner";
+
+const TEMPLATES_TOP_SECTION_HEIGHT = "125px";
+
+const SearchContainer = styled.div`
+  display: flex;
+  width: 40%;
+  .closeBtn {
+    position: absolute;
+    left: 70%;
+  }
+`;
+
+const SearchBar = styled(BaseTextInput)`
+  margin-bottom: 10px;
+  input {
+    background-color: ${Colors.WHITE};
+    1px solid ${Colors.GEYSER};
+  }
+`;
+
+const ProviderInfo = styled.div`
+  display: flex;
+  padding: 10px;
+  .providerImage {
+    height: 40px;
+    width: auto;
+    margin-right: 11px;
+  }
+  .providerName {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+  }
+`;
+
+const TemplateDetailPage = styled.div`
+  max-height: 95vh;
+  font-size: 20px;
+  padding: 20px;
+
+  .react-tabs__tab-list {
+    border-bottom-color: transparent;
+    color: #4e5d78;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .react-tabs__tab--selected {
+    color: #2e3d49;
+    font-size: 14px;
+    font-weight: 500;
+    border-color: transparent;
+    border: transparent;
+    border-bottom: 3px solid #2e3d49;
+    border-radius: 0;
+  }
+  .backBtn {
+    padding-bottom: 3px;
+    cursor: pointer;
+  }
+  .backBtnText {
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+`;
+
+const LoadingContainer = styled(CenteredWrapper)`
+  height: 50%;
+`;
+
+const ProviderInfoTopSection = styled.div`
+  height: ${TEMPLATES_TOP_SECTION_HEIGHT};
+`;
+
+const TemplatesCardsContainer = styled.div`
+  height: calc(
+    100vh - ${TEMPLATES_TOP_SECTION_HEIGHT} -
+      ${props => props.theme.headerHeight}
+  );
+  overflow: auto;
+  .noProvidersMessage {
+    margin-top: 30px;
+    text-align: center;
+    color: #666666;
+    font-size: 14px;
+    line-height: 24px;
+  }
+`;
+
+const TemplateCard = styled.div`
+  border: 1px solid #e8e8e8;
+  min-height: 150px;
+  padding: 17px;
+  display: block;
+  margin-bottom: 10px;
+  .extraDescription {
+    background: #363e44;
+    border-radius: 4px;
+    color: #fff;
+  }
+  .string-value {
+    word-break: break-word !important;
+  }
+  .variable-value {
+    word-break: break-word !important;
+  }
+`;
+
+const CardTopContent = styled.div`
+  display: flex;
+`;
+
+const TemplateCardLeftContent = styled.div`
+  width: 70%;
+
+  .apiName {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .desc {
+    font-size: 14px;
+    line-height: 24px;
+  }
+`;
+
+const TemplateCardRightContent = styled.div`
+  width: 30%;
+  display: flex;
+  margin: auto;
+  justify-content: center;
+  .dropIcon {
+    padding-left: 15%;
+    color: #bcccd9;
+    cursor: pointer;
+  }
+  .addToPageBtn {
+    width: 100px !important;
+    height: 30px !important;
+  }
+`;
+
+const URLContainer = styled.div`
+  background: #ebeef0;
+  padding: 1px;
+  align-self: center;
+  justify-content: center;
+  border-radius: 4px;
+
+  .urlText {
+    color: #4e5d78;
+    font-size: 14px;
+    line-height: 24px;
+    padding-top: 10px !important;
+    padding-left: 11px;
+  }
+  .endpoint {
+    padding-left: 11px;
+  }
+`;
+
+type ProviderTemplatesProps = {
+  providerTemplates: ProviderTemplateArray[];
+  actions: ActionDataState;
+  isFetchingProviderTemplates: boolean;
+  getProviderTemplates: (providerId: string) => void;
+  addApiToPage: (templateData: AddApiToPageRequest) => void;
+} & RouteComponentProps<ProviderViewerRouteParams>;
+
+class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
+  public state = {
+    isOpen: false,
+    addedTemplates: Array<string>(),
+    toggeledTemplates: Array<string>(),
+  };
+
+  handleClick = () => {
+    this.setState({ isOpen: !this.state.isOpen });
+  };
+
+  componentDidMount() {
+    const { providerId } = this.props.match.params;
+    this.props.getProviderTemplates(providerId);
+  }
+
+  addApiToPage = (templateData: ProviderTemplateArray) => {
+    const { destinationPageId } = this.props.match.params;
+    const pageApiNames = this.props.actions
+      .filter(a => a.config.pageId === destinationPageId)
+      .map(a => a.config.name);
+    let name = templateData.templateData.name.replace(/ /g, "");
+    if (pageApiNames.indexOf(name) > -1) {
+      name = getDuplicateName(name, pageApiNames);
+    }
+
+    const addApiRequestObject: AddApiToPageRequest = {
+      name,
+      pageId: destinationPageId,
+      marketplaceElement: {
+        type: DEFAULT_TEMPLATE_TYPE,
+        item: templateData.templateData,
+      },
+    };
+    const { addedTemplates } = this.state;
+    this.props.addApiToPage(addApiRequestObject);
+    this.setState({ addedTemplates });
+  };
+
+  handleSearchChange = (e: React.ChangeEvent<{ value: string }>) => {
+    const value = e.target.value;
+  };
+
+  handleIsOpen = (templateId: string) => {
+    const { toggeledTemplates } = this.state;
+
+    const toggleCheck = toggeledTemplates.includes(templateId);
+    if (toggleCheck) {
+      toggeledTemplates.splice(toggeledTemplates.indexOf(templateId), 1);
+      this.setState({ toggeledTemplates });
+    } else {
+      toggeledTemplates.push(templateId);
+      this.setState({ toggeledTemplates });
+    }
+  };
+
+  render() {
+    const {
+      providerTemplates,
+      history,
+      isFetchingProviderTemplates,
+    } = this.props;
+    let providerName;
+    let providerImage;
+
+    if (this.props.location.state) {
+      providerName = new URLSearchParams(this.props.location.state).get(
+        "providerName",
+      );
+
+      providerImage = new URLSearchParams(this.props.location.state).get(
+        "providerImage",
+      );
+    }
+
+    if (isFetchingProviderTemplates) {
+      return (
+        <LoadingContainer>
+          <Spinner size={30} />
+        </LoadingContainer>
+      );
+    }
+    return (
+      <TemplateDetailPage>
+        <ProviderInfoTopSection>
+          <SearchContainer>
+            <SearchBar
+              icon="search"
+              input={{
+                onChange: this.handleSearchChange,
+              }}
+              placeholder="Search"
+            />
+          </SearchContainer>
+
+          <Icon
+            icon="chevron-left"
+            iconSize={16}
+            className="backBtn"
+            onClick={() => history.goBack()}
+          />
+          <span className="backBtnText" onClick={() => history.goBack()}>
+            {" Back"}
+          </span>
+          <br />
+
+          <ProviderInfo>
+            {providerImage ? (
+              <img
+                src={providerImage}
+                className="providerImage"
+                alt="provider"
+              ></img>
+            ) : (
+              <img
+                src={ImageAlt}
+                className="providerImage"
+                alt="provider"
+              ></img>
+            )}
+            <p className="providerName">{providerName}</p>
+          </ProviderInfo>
+        </ProviderInfoTopSection>
+        <TemplatesCardsContainer>
+          {providerTemplates.length === 0 && !isFetchingProviderTemplates ? (
+            <p className="noProvidersMessage">
+              No API templates for this provider yet.
+            </p>
+          ) : (
+            <React.Fragment>
+              {providerTemplates.map(template => (
+                <TemplateCard key={template.templateData.id}>
+                  <CardTopContent>
+                    <TemplateCardLeftContent>
+                      <p className="apiName">{template.templateData.name}</p>
+                      <p className="desc">
+                        {
+                          template.templateData.apiTemplateConfiguration
+                            .documentation
+                        }
+                      </p>
+                      <URLContainer>
+                        <p className="urlText">
+                          <strong>
+                            {
+                              template.templateData.actionConfiguration
+                                .httpMethod
+                            }
+                          </strong>{" "}
+                          <span className="endpoint">
+                            {template.templateData.actionConfiguration.path}
+                          </span>
+                        </p>
+                      </URLContainer>
+                    </TemplateCardLeftContent>
+
+                    <TemplateCardRightContent>
+                      {template.addToPageStatus ? (
+                        <Button
+                          text="Added"
+                          intent="none"
+                          filled
+                          size="small"
+                          disabled={true}
+                          className="addToPageBtn"
+                        />
+                      ) : (
+                        <Button
+                          text="Add to page"
+                          intent="primary"
+                          filled
+                          size="small"
+                          onClick={() => this.addApiToPage(template)}
+                          disabled={false}
+                          loading={template.addToPageLoading}
+                          className="addToPageBtn"
+                        />
+                      )}
+                      <Icon
+                        icon="chevron-down"
+                        iconSize={20}
+                        className="dropIcon"
+                        onClick={() =>
+                          this.handleIsOpen(template.templateData.id)
+                        }
+                      />
+                    </TemplateCardRightContent>
+                  </CardTopContent>
+
+                  <Collapse
+                    isOpen={this.state.toggeledTemplates.includes(
+                      template.templateData.id,
+                    )}
+                    transitionDuration={0}
+                  >
+                    <ReactJson
+                      src={template.templateData.actionConfiguration.headers}
+                      style={{
+                        marginTop: "12px",
+                        fontSize: "14px",
+                        padding: "15px",
+                        borderTopLeftRadius: "4px",
+                        borderTopRightRadius: "4px",
+                        width: "90%",
+                        wordWrap: "break-word",
+                      }}
+                      name="Request header"
+                      theme="grayscale"
+                      displayObjectSize={false}
+                      displayDataTypes={false}
+                      enableClipboard={false}
+                    />
+                    {template.templateData.apiTemplateConfiguration
+                      .sampleResponse ? (
+                      <ReactJson
+                        src={
+                          template.templateData.apiTemplateConfiguration
+                            .sampleResponse
+                        }
+                        style={{
+                          fontSize: "14px",
+                          padding: "15px",
+                          borderBottomLeftRadius: "4px",
+                          borderBottomRightRadius: "4px",
+                          maxWidth: "90%",
+                          wordWrap: "break-word",
+                        }}
+                        name="Response Body"
+                        theme="grayscale"
+                        displayObjectSize={false}
+                        displayDataTypes={false}
+                        enableClipboard={false}
+                      />
+                    ) : (
+                      <p></p>
+                    )}
+                  </Collapse>
+                </TemplateCard>
+              ))}
+            </React.Fragment>
+          )}
+        </TemplatesCardsContainer>
+      </TemplateDetailPage>
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState) => ({
+  providerTemplates: getProviderTemplates(state),
+  isFetchingProviderTemplates: getProvidersTemplatesLoadingState(state),
+  actions: state.entities.actions,
+});
+
+const mapDispatchToProps = (dispatch: any) => ({
+  getProviderTemplates: (providerId: string) =>
+    dispatch({
+      type: ReduxActionTypes.FETCH_PROVIDER_TEMPLATES_INIT,
+      payload: {
+        providerId,
+      },
+    }),
+  addApiToPage: (templateData: AddApiToPageRequest) =>
+    dispatch(addApiToPage(templateData)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProviderTemplates);
diff --git a/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
new file mode 100644
index 0000000000..169dc5685c
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
@@ -0,0 +1,320 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+  reduxForm,
+  InjectedFormProps,
+  FormSubmitHandler,
+  formValueSelector,
+} from "redux-form";
+import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants";
+import styled from "styled-components";
+import FormLabel from "components/editorComponents/FormLabel";
+import FormRow from "components/editorComponents/FormRow";
+import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
+import {
+  RestAction,
+  PaginationField,
+  BodyFormData,
+  Property,
+} from "api/ActionAPI";
+import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
+import DropdownField from "components/editorComponents/form/fields/DropdownField";
+import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
+import ApiResponseView from "components/editorComponents/ApiResponseView";
+import { API_EDITOR_FORM_NAME } from "constants/forms";
+import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
+import { FormIcons } from "icons/FormIcons";
+import { BaseTabbedView } from "components/designSystems/appsmith/TabbedView";
+import Pagination, { PaginationType } from "./Pagination";
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  min-height: 95vh;
+  max-height: 95vh;
+  overflow: auto;
+  width: 100%;
+  ${FormLabel} {
+    padding: ${props => props.theme.spaces[3]}px;
+  }
+  ${FormRow} {
+    padding: ${props => props.theme.spaces[2]}px;
+    & > * {
+      margin-right: 10px;
+    }
+    ${FormLabel} {
+      padding: 0;
+      width: 100%;
+    }
+  }
+`;
+
+const MainConfiguration = styled.div`
+  padding-top: 10px;
+  padding-left: 17px;
+`;
+
+const SecondaryWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  border-top: 1px solid #d0d7dd;
+  margin-top: 15px;
+`;
+
+const RequestParamsWrapper = styled.div`
+  flex: 4;
+  border-right: 1px solid #d0d7dd;
+  height: 100%;
+  overflow-y: auto;
+  padding-top: 6px;
+  padding-left: 17px;
+  padding-right: 10px;
+`;
+
+const ActionButtons = styled.div`
+  flex: 1;
+`;
+
+const ActionButton = styled(BaseButton)`
+  &&& {
+    max-width: 72px;
+    margin: 0 5px;
+    min-height: 30px;
+  }
+`;
+
+const DropDownContainer = styled.div`
+  margin: 5px;
+  margin-bottom: 21px;
+`;
+
+const PostbodyContainer = styled.div`
+  margin-top: 41px;
+`;
+
+const HeadersSection = styled.div`
+  margin-bottom: 32px;
+`;
+
+const TabbedViewContainer = styled.div`
+  flex: 1;
+  padding-top: 12px;
+`;
+
+interface APIFormProps {
+  allowSave: boolean;
+  onSubmit: FormSubmitHandler<RestAction>;
+  onSaveClick: () => void;
+  onRunClick: (paginationField?: PaginationField) => void;
+  onDeleteClick: () => void;
+  isSaving: boolean;
+  isRunning: boolean;
+  isDeleting: boolean;
+  paginationType: PaginationType;
+  appName: string;
+  templateId: string;
+  actionConfiguration?: any;
+  actionConfigurationHeaders?: Property[];
+  displayFormat: string;
+  actionConfigurationBodyFormData: BodyFormData[];
+  providerImage: string;
+  providerURL: string;
+  providerCredentialSteps: string;
+}
+
+type Props = APIFormProps & InjectedFormProps<RestAction, APIFormProps>;
+
+const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
+  const {
+    allowSave,
+    onSaveClick,
+    onDeleteClick,
+    onRunClick,
+    handleSubmit,
+    isDeleting,
+    isRunning,
+    isSaving,
+    templateId,
+    actionConfiguration,
+    actionConfigurationHeaders,
+    actionConfigurationBodyFormData,
+    providerImage,
+    providerURL,
+  } = props;
+
+  const postbodyResponsePresent =
+    templateId &&
+    actionConfiguration &&
+    actionConfigurationBodyFormData.length > 0;
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      {isSaving && <LoadingOverlayScreen>Saving...</LoadingOverlayScreen>}
+      <MainConfiguration>
+        <FormRow>
+          <DynamicTextField
+            placeholder="Api name"
+            name="name"
+            singleLine
+            link={providerURL && `http://${providerURL}`}
+          />
+          <ActionButtons>
+            <ActionButton
+              text="Delete"
+              accent="error"
+              onClick={onDeleteClick}
+              loading={isDeleting}
+            />
+            <ActionButton
+              text="Run"
+              accent="secondary"
+              onClick={() => {
+                onRunClick();
+              }}
+              loading={isRunning}
+            />
+            <ActionButton
+              text="Save"
+              accent="primary"
+              filled
+              onClick={onSaveClick}
+              loading={isSaving}
+              disabled={!allowSave}
+            />
+          </ActionButtons>
+        </FormRow>
+        <FormRow>
+          <DynamicTextField
+            placeholder="Provider name"
+            name="provider.name"
+            singleLine
+            leftImage={providerImage}
+            disabled={true}
+          />
+          <DynamicTextField
+            placeholder="v1/method"
+            name="actionConfiguration.path"
+            leftIcon={FormIcons.SLASH_ICON}
+            singleLine
+            disabled={true}
+          />
+        </FormRow>
+      </MainConfiguration>
+      <SecondaryWrapper>
+        <TabbedViewContainer>
+          <BaseTabbedView
+            tabs={[
+              {
+                key: "apiInput",
+                title: "API Input",
+                panelComponent: (
+                  <RequestParamsWrapper>
+                    <HeadersSection>
+                      <KeyValueFieldArray
+                        name="actionConfiguration.headers"
+                        label="Headers"
+                        actionConfig={
+                          actionConfiguration &&
+                          actionConfigurationHeaders &&
+                          actionConfigurationHeaders
+                        }
+                      />
+                    </HeadersSection>
+                    <KeyValueFieldArray
+                      name="actionConfiguration.queryParameters"
+                      label="Params"
+                    />
+                    {postbodyResponsePresent && (
+                      <PostbodyContainer>
+                        <FormLabel>{"Post Body"}</FormLabel>
+                        <DropDownContainer>
+                          <DropdownField
+                            placeholder={POST_BODY_FORMAT_OPTIONS[1].value}
+                            name="displayFormat"
+                            isSearchable={false}
+                            width={232}
+                            options={POST_BODY_FORMAT_OPTIONS}
+                            isDisabled={true}
+                          />
+                        </DropDownContainer>
+                        {typeof actionConfigurationBodyFormData ===
+                          "object" && (
+                          <React.Fragment>
+                            <KeyValueFieldArray
+                              name="actionConfiguration.bodyFormData"
+                              label=""
+                              rightIcon={FormIcons.INFO_ICON}
+                              addOrDeleteFields={false}
+                              actionConfig={actionConfigurationBodyFormData}
+                              pushFields={false}
+                            />
+                          </React.Fragment>
+                        )}
+                      </PostbodyContainer>
+                    )}
+                  </RequestParamsWrapper>
+                ),
+              },
+              {
+                key: "pagination",
+                title: "Pagination",
+                panelComponent: (
+                  <Pagination
+                    onTestClick={props.onRunClick}
+                    paginationType={props.paginationType}
+                  />
+                ),
+              },
+            ]}
+          />
+        </TabbedViewContainer>
+
+        <ApiResponseView />
+      </SecondaryWrapper>
+    </Form>
+  );
+};
+
+const selector = formValueSelector(API_EDITOR_FORM_NAME);
+
+export default connect(state => {
+  const displayFormat = selector(state, "displayFormat");
+  const providerImage = selector(state, "provider.imageUrl");
+  const providerURL = selector(state, "provider.url");
+  const providerCredentialSteps = selector(state, "provider.credentialSteps");
+  const templateId = selector(state, "templateId");
+  const actionConfiguration = selector(state, "actionConfiguration");
+  let actionConfigurationBodyFormData = selector(
+    state,
+    "actionConfiguration.bodyFormData",
+  );
+  const actionConfigurationHeaders = selector(
+    state,
+    "actionConfiguration.headers",
+  );
+
+  if (
+    typeof actionConfigurationBodyFormData === "string" &&
+    (displayFormat === POST_BODY_FORMAT_OPTIONS[0].value ||
+      displayFormat === POST_BODY_FORMAT_OPTIONS[1].value)
+  ) {
+    actionConfigurationBodyFormData = JSON.parse(
+      `${actionConfigurationBodyFormData}`,
+    );
+  }
+  return {
+    displayFormat,
+    actionConfiguration,
+    actionConfigurationHeaders,
+    actionConfigurationBodyFormData,
+    providerImage,
+    providerURL,
+    templateId,
+    providerCredentialSteps,
+  };
+})(
+  reduxForm<RestAction, APIFormProps>({
+    form: API_EDITOR_FORM_NAME,
+    destroyOnUnmount: false,
+  })(RapidApiEditorForm),
+);
diff --git a/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx b/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
new file mode 100644
index 0000000000..f57e477640
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import Pagination from "react-paginating";
+import styled from "styled-components";
+import { theme } from "constants/DefaultTheme";
+
+interface ResultPaginationProps {
+  total: number;
+  handlePageChange: (page: number | undefined) => void;
+  currentPage: number | undefined;
+}
+
+type Props = ResultPaginationProps;
+
+const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+
+  .item {
+    display: flex;
+    font-size: 14px;
+    justify-content: center;
+    background-color: white;
+    width: 30px;
+    align-items: center;
+    height: 30px;
+    border: 1.5px solid #dcdcdc;
+    margin: 0 5px;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+`;
+
+class ResultPagination extends React.Component<Props> {
+  render() {
+    const { total, handlePageChange, currentPage = 1 } = this.props;
+
+    return (
+      <Pagination total={total} limit={40} pageCount={5}>
+        {({
+          pages,
+          hasNextPage,
+          hasPreviousPage,
+          previousPage,
+          nextPage,
+          totalPages,
+          getPageItemProps,
+        }) => {
+          console.log(hasNextPage, "hasNextPage");
+
+          return (
+            <PaginationContainer>
+              <div
+                className="item"
+                {...getPageItemProps({
+                  total: totalPages,
+                  pageValue: previousPage,
+                  onPageChange: hasPreviousPage ? handlePageChange : () => null,
+                  style: !hasPreviousPage
+                    ? {
+                        backgroundColor: "#DCDCDC",
+                        cursor: "not-allowed",
+                      }
+                    : {},
+                })}
+              >
+                {"<"}
+              </div>
+
+              {pages.map((page, index) => {
+                let activePage = undefined;
+                if (currentPage === page) {
+                  activePage = {
+                    borderColor: theme.colors.primary,
+                  };
+                }
+                return (
+                  <div
+                    className="item"
+                    key={`marketPlace${index}`}
+                    {...getPageItemProps({
+                      total: totalPages,
+                      pageValue: page,
+                      style: activePage,
+                      onPageChange: handlePageChange,
+                    })}
+                  >
+                    {page}
+                  </div>
+                );
+              })}
+
+              <div
+                className="item"
+                {...getPageItemProps({
+                  total: totalPages,
+                  pageValue: nextPage,
+                  onPageChange: hasNextPage ? handlePageChange : () => null,
+                  style: !hasNextPage
+                    ? {
+                        backgroundColor: "#DCDCDC",
+                        cursor: "not-allowed",
+                      }
+                    : {},
+                })}
+              >
+                {">"}
+              </div>
+            </PaginationContainer>
+          );
+        }}
+      </Pagination>
+    );
+  }
+}
+
+export default ResultPagination;
diff --git a/app/client/src/pages/Editor/APIEditor/helpers.ts b/app/client/src/pages/Editor/APIEditor/helpers.ts
new file mode 100644
index 0000000000..1f923dc765
--- /dev/null
+++ b/app/client/src/pages/Editor/APIEditor/helpers.ts
@@ -0,0 +1,14 @@
+import { submitCurlImportForm } from "actions/importActions";
+
+export type curlImportFormValues = {
+  curl: string;
+  pageId: string;
+  name: string;
+};
+
+export const curlImportSubmitHandler = (
+  values: curlImportFormValues,
+  dispatch: any,
+) => {
+  dispatch(submitCurlImportForm(values));
+};
diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
index 7a92c19b79..0527886847 100644
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@@ -2,35 +2,40 @@ import React from "react";
 import { connect } from "react-redux";
 import { submit, getFormValues } from "redux-form";
 import ApiEditorForm from "./Form";
+import RapidApiEditorForm from "./RapidApiEditorForm";
+import ApiHomeScreen from "./ApiHomeScreen";
 import {
   createActionRequest,
   runApiAction,
   deleteAction,
   updateAction,
 } from "actions/actionActions";
-import { RestAction, PaginationField } from "api/ActionAPI";
+import { RestAction, PaginationField, RapidApiAction } from "api/ActionAPI";
 import { AppState } from "reducers";
 import { RouteComponentProps } from "react-router";
 import { API_EDITOR_FORM_NAME } from "constants/forms";
 import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
-import styled from "styled-components";
-import { HTTP_METHODS, PLUGIN_NAME } from "constants/ApiEditorConstants";
+import { REST_PLUGIN_PACKAGE_NAME } from "constants/ApiEditorConstants";
 import _ from "lodash";
-import { getPluginIdOfName } from "selectors/entitiesSelector";
 import { getCurrentApplication } from "selectors/applicationSelectors";
 import { UserApplication } from "constants/userConstants";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { getCurrentPageName } from "selectors/editorSelectors";
+import { getCurrentPageName, getActionById } from "selectors/editorSelectors";
+import { Plugin } from "api/PluginApi";
+import { ActionData } from "reducers/entityReducers/actionsReducer";
 
 interface ReduxStateProps {
   actions: ActionDataState;
   apiPane: ApiPaneReduxState;
   formData: RestAction;
-  pluginId: string | undefined;
   currentApplication: UserApplication;
   currentPageName: string | undefined;
   pages: any;
+  plugins: Plugin[];
+  pluginId: any;
+  apiAction: RestAction | ActionData | RapidApiAction | undefined;
+  data: RestAction | ActionData | RapidApiAction | undefined;
 }
 interface ReduxActionProps {
   submitForm: (name: string) => void;
@@ -49,14 +54,6 @@ type Props = ReduxActionProps &
   ReduxStateProps &
   RouteComponentProps<{ apiId: string; applicationId: string; pageId: string }>;
 
-const EmptyStateContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: 20px;
-`;
-
 class ApiEditor extends React.Component<Props> {
   handleSubmit = (values: RestAction) => {
     const { formData } = this.props;
@@ -94,66 +91,135 @@ class ApiEditor extends React.Component<Props> {
     this.props.runAction(this.props.match.params.apiId, paginationField);
   };
 
+  getPluginUiComponentOfId = (
+    id: string,
+    plugins: Plugin[],
+  ): string | undefined => {
+    const plugin = plugins.find(plugin => plugin.id === id);
+    if (!plugin) return undefined;
+    return plugin.uiComponent;
+  };
+
+  getPluginUiComponentOfName = (plugins: Plugin[]): string | undefined => {
+    const plugin = plugins.find(
+      plugin => plugin.packageName === REST_PLUGIN_PACKAGE_NAME,
+    );
+    if (!plugin) return undefined;
+    return plugin.uiComponent;
+  };
+
+  getAction = (apiId: string, actions: ActionDataState) => {
+    const action = _.find(actions, a => a.config.id === apiId);
+    if (action) {
+      return action.config;
+    } else {
+      return undefined;
+    }
+  };
+
   render() {
     const {
       apiPane,
       match: {
         params: { apiId },
       },
-      formData,
+      plugins,
       pluginId,
+      data,
     } = this.props;
-    if (!pluginId) {
-      return (
-        <EmptyStateContainer>{"Plugin is not installed"}</EmptyStateContainer>
-      );
+
+    let formUiComponent: string | undefined;
+    if (apiId) {
+      if (pluginId) {
+        formUiComponent = this.getPluginUiComponentOfId(pluginId, plugins);
+      } else {
+        formUiComponent = this.getPluginUiComponentOfName(plugins);
+      }
     }
+
     const { isSaving, isRunning, isDeleting, drafts } = apiPane;
-    const httpMethod = _.get(formData, "actionConfiguration.httpMethod");
-    const paginationType = _.get(
-      formData,
-      "actionConfiguration.paginationType",
-    );
+    const paginationType = _.get(data, "actionConfiguration.paginationType");
     return (
       <React.Fragment>
         {apiId ? (
-          <ApiEditorForm
-            pluginId={pluginId}
-            allowSave={apiId in drafts}
-            allowPostBody={httpMethod && httpMethod !== HTTP_METHODS[0]}
-            paginationType={paginationType}
-            isSaving={isSaving[apiId]}
-            isRunning={isRunning[apiId]}
-            isDeleting={isDeleting[apiId]}
-            onSubmit={this.handleSubmit}
-            onSaveClick={this.handleSaveClick}
-            onDeleteClick={this.handleDeleteClick}
-            onRunClick={this.handleRunClick}
-            appName={
-              this.props.currentApplication
-                ? this.props.currentApplication.name
-                : ""
-            }
-          />
+          <>
+            {formUiComponent === "ApiEditorForm" && (
+              <ApiEditorForm
+                pluginId={pluginId}
+                allowSave={apiId in drafts}
+                paginationType={paginationType}
+                isSaving={isSaving[apiId]}
+                isRunning={isRunning[apiId]}
+                isDeleting={isDeleting[apiId]}
+                onSubmit={this.handleSubmit}
+                onSaveClick={this.handleSaveClick}
+                onDeleteClick={this.handleDeleteClick}
+                onRunClick={this.handleRunClick}
+                appName={
+                  this.props.currentApplication
+                    ? this.props.currentApplication.name
+                    : ""
+                }
+              />
+            )}
+
+            {formUiComponent === "RapidApiEditorForm" && (
+              <RapidApiEditorForm
+                allowSave={apiId in drafts}
+                paginationType={paginationType}
+                isSaving={isSaving[apiId]}
+                isRunning={isRunning[apiId]}
+                isDeleting={isDeleting[apiId]}
+                onSubmit={this.handleSubmit}
+                onSaveClick={this.handleSaveClick}
+                onDeleteClick={this.handleDeleteClick}
+                onRunClick={this.handleRunClick}
+                appName={
+                  this.props.currentApplication
+                    ? this.props.currentApplication.name
+                    : ""
+                }
+              />
+            )}
+          </>
         ) : (
-          <EmptyStateContainer>
-            {"Create / Select an API from the list"}
-          </EmptyStateContainer>
+          <ApiHomeScreen
+            applicationId={this.props.match.params.applicationId}
+            pageId={this.props.match.params.pageId}
+            history={this.props.history}
+            location={this.props.location}
+          />
         )}
       </React.Fragment>
     );
   }
 }
 
-const mapStateToProps = (state: AppState): ReduxStateProps => ({
-  pluginId: getPluginIdOfName(state, PLUGIN_NAME),
-  actions: state.entities.actions,
-  apiPane: state.ui.apiPane,
-  currentApplication: getCurrentApplication(state),
-  currentPageName: getCurrentPageName(state),
-  pages: state.entities.pageList.pages,
-  formData: getFormValues(API_EDITOR_FORM_NAME)(state) as RestAction,
-});
+const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
+  const formData = getFormValues(API_EDITOR_FORM_NAME)(state) as RestAction;
+  const apiAction = getActionById(state, props);
+
+  const { drafts } = state.ui.apiPane;
+  let data: RestAction | ActionData | RapidApiAction | undefined;
+  if (props.match.params.id in drafts) {
+    data = drafts[props.match.params.id];
+  } else {
+    data = apiAction;
+  }
+
+  return {
+    actions: state.entities.actions,
+    apiPane: state.ui.apiPane,
+    currentApplication: getCurrentApplication(state),
+    currentPageName: getCurrentPageName(state),
+    pages: state.entities.pageList.pages,
+    formData,
+    data,
+    plugins: state.entities.plugins.list,
+    pluginId: _.get(data, "pluginId"),
+    apiAction,
+  };
+};
 
 const mapDispatchToProps = (dispatch: any): ReduxActionProps => ({
   submitForm: (name: string) => dispatch(submit(name)),
diff --git a/app/client/src/pages/Editor/ApiSidebar.tsx b/app/client/src/pages/Editor/ApiSidebar.tsx
index 4b588c9bf5..b059280003 100644
--- a/app/client/src/pages/Editor/ApiSidebar.tsx
+++ b/app/client/src/pages/Editor/ApiSidebar.tsx
@@ -15,10 +15,11 @@ import {
 import { changeApi, initApiPane } from "actions/apiPaneActions";
 import { RestAction } from "api/ActionAPI";
 import { getPluginIdOfName } from "selectors/entitiesSelector";
-import { DEFAULT_API_ACTION, PLUGIN_NAME } from "constants/ApiEditorConstants";
+import { PLUGIN_NAME } from "constants/ApiEditorConstants";
 import EditorSidebar from "pages/Editor/EditorSidebar";
 import { getNextEntityName } from "utils/AppsmithUtils";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import { API_EDITOR_URL_WITH_SELECTED_PAGE_ID } from "constants/routes";
 
 const HTTPMethod = styled.span<{ method?: string }>`
   flex: 1;
@@ -51,6 +52,7 @@ const ActionName = styled.span`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 100px;
 `;
 
 interface ReduxStateProps {
@@ -92,19 +94,6 @@ class ApiSidebar extends React.Component<Props> {
     return nextProps.actions !== this.props.actions;
   }
 
-  handleCreateNew = () => {
-    const { actions } = this.props;
-    const { pageId } = this.props.match.params;
-    const pageApiNames = actions
-      .filter(a => a.config.pageId === pageId)
-      .map(a => a.config.name);
-    const newName = getNextEntityName("Api", pageApiNames);
-    this.props.createAction({ ...DEFAULT_API_ACTION, name: newName, pageId });
-    AnalyticsUtil.logEvent("CREATE_API_CLICK", {
-      apiName: newName,
-    });
-  };
-
   handleApiChange = (actionId: string) => {
     this.props.onApiChange(actionId);
   };
@@ -169,6 +158,18 @@ class ApiSidebar extends React.Component<Props> {
     );
   };
 
+  handleCreateNewApiClick = (selectedPageId: string) => {
+    const { history } = this.props;
+    const { pageId, applicationId } = this.props.match.params;
+    history.push(
+      API_EDITOR_URL_WITH_SELECTED_PAGE_ID(
+        applicationId,
+        pageId,
+        selectedPageId,
+      ),
+    );
+  };
+
   render() {
     const {
       apiPane: { isFetching, drafts },
@@ -187,11 +188,12 @@ class ApiSidebar extends React.Component<Props> {
         selectedItemId={apiId}
         draftIds={Object.keys(drafts)}
         itemRender={this.renderItem}
-        onItemCreateClick={this.handleCreateNew}
+        onItemCreateClick={this.handleCreateNewApiClick}
         onItemSelected={this.handleApiChange}
         moveItem={this.handleMove}
         copyItem={this.handleCopy}
         deleteItem={this.handleDelete}
+        createButtonTitle="Create new API"
       />
     );
   }
diff --git a/app/client/src/pages/Editor/EditorSidebar.tsx b/app/client/src/pages/Editor/EditorSidebar.tsx
index 829b371878..bc871d490d 100644
--- a/app/client/src/pages/Editor/EditorSidebar.tsx
+++ b/app/client/src/pages/Editor/EditorSidebar.tsx
@@ -4,12 +4,11 @@ import { RouteComponentProps, withRouter } from "react-router";
 import styled from "styled-components";
 import { AppState } from "reducers";
 import { APIEditorRouteParams } from "constants/routes";
-import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
-import { FormIcons } from "icons/FormIcons";
-import { Spinner } from "@blueprintjs/core";
+import { Spinner, IIconProps } from "@blueprintjs/core";
 import { BaseTextInput } from "components/designSystems/appsmith/TextInputComponent";
 import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 import Fuse from "fuse.js";
+import Button from "components/editorComponents/Button";
 import {
   DragDropContext,
   Draggable,
@@ -20,6 +19,7 @@ import {
 import { PageListPayload } from "constants/ReduxActionConstants";
 import ContextDropdown from "components/editorComponents/ContextDropdown";
 import { theme } from "constants/DefaultTheme";
+import { Colors } from "constants/Colors";
 
 const LoadingContainer = styled(CenteredWrapper)`
   height: 50%;
@@ -52,7 +52,6 @@ const SearchBar = styled(BaseTextInput)`
 
 const PageContainer = styled.div`
   padding: 5px 0;
-  border-bottom: 1px solid #485158;
 `;
 
 const PageName = styled.h5<{ isMain: boolean }>`
@@ -72,15 +71,69 @@ const PageDropContainer = styled.div`
   min-height: 32px;
   margin: 5px;
   background-color: ${props => props.theme.colors.paneBG};
+
+  .createBtn {
+    border: none;
+    color: ${Colors.WHITE} !important;
+    width: 100%;
+    display: block !important;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+
+    &:hover {
+      color: ${Colors.WHITE} !important;
+      background-color: ${Colors.BLUE_CHARCOAL} !important;
+
+      svg {
+        path {
+          fill: ${Colors.WHITE};
+        }
+      }
+    }
+    &:focus {
+      color: ${Colors.WHITE} !important;
+      background-color: ${Colors.BLUE_CHARCOAL} !important;
+
+      svg {
+        path {
+          fill: ${Colors.WHITE};
+        }
+      }
+    }
+  }
+  .highlightButton {
+    color: ${Colors.WHITE} !important;
+    background-color: ${Colors.BLUE_CHARCOAL} !important;
+    width: 100%;
+    display: block !important;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 20px;
+
+    svg {
+      path {
+        fill: ${Colors.WHITE};
+      }
+    }
+  }
+
+  .linkStyles {
+    text-decoration: none !important;
+  }
 `;
 
 const ItemsWrapper = styled.div`
   flex: 1;
 `;
 
-const NoItemMessage = styled.span`
-  color: #cacaca;
+const NoItemMessage = styled.div`
+  color: #d0d7dd;
   padding-left: 12px;
+  padding-top: 23px;
+  font-size: 14px;
+  line-height: 20px;
+  padding-bottom: 10px;
 `;
 
 const ItemContainer = styled.div<{
@@ -119,26 +172,14 @@ const DraftIconIndicator = styled.span<{ isHidden: boolean }>`
   opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};
 `;
 
-const CreateNewButton = styled(BaseButton)`
-  &&&& {
-    border: none;
-    color: ${props => props.theme.colors.textOnDarkBG};
-    height: 32px;
-    text-align: left;
-    justify-content: flex-start;
-    &:hover {
-      color: ${props => props.theme.colors.paneBG};
-      svg {
-        path {
-          fill: ${props => props.theme.colors.paneBG};
-        }
-      }
-    }
-    svg {
-      margin-top: 4px;
-      height: 14px;
-      width: 14px;
-    }
+const StyledAddButton = styled(Button)<IIconProps>`
+  &&& {
+    outline: none;
+
+    padding: 10px !important;
+  }
+  span {
+    font-weight: normal !important;
   }
 `;
 
@@ -155,11 +196,12 @@ type EditorSidebarComponentProps = {
   selectedItemId?: string;
   draftIds: string[];
   itemRender: (item: any) => JSX.Element;
-  onItemCreateClick: () => void;
-  onItemSelected: (itemId: string) => void;
+  onItemCreateClick: (pageId: string) => void;
+  onItemSelected: (itemId: string, itemPageId: string) => void;
   moveItem: (itemId: string, destinationPageId: string) => void;
   copyItem: (itemId: string, destinationPageId: string) => void;
   deleteItem: (itemId: string, itemName: string, pageName: string) => void;
+  createButtonTitle: string;
 };
 
 type Props = ReduxStateProps &
@@ -190,9 +232,6 @@ class EditorSidebar extends React.Component<Props, State> {
       itemDragging: "",
     };
   }
-  handleCreateNew = () => {
-    this.props.onItemCreateClick();
-  };
 
   handleSearchChange = (e: React.ChangeEvent<{ value: string }>) => {
     const value = e.target.value;
@@ -201,8 +240,8 @@ class EditorSidebar extends React.Component<Props, State> {
     });
   };
 
-  handleItemSelect = (itemId: string) => {
-    this.props.onItemSelected(itemId);
+  handleItemSelect = (itemId: string, itemPageId: string) => {
+    this.props.onItemSelected(itemId, itemPageId);
   };
 
   onDragEnd = (result: DropResult) => {
@@ -260,11 +299,27 @@ class EditorSidebar extends React.Component<Props, State> {
     });
   };
 
+  handleCreateNew = (pageId: string) => {
+    this.props.onItemCreateClick(pageId);
+  };
+
   render() {
-    const { isLoading, itemRender, selectedItemId, draftIds } = this.props;
+    const {
+      isLoading,
+      itemRender,
+      selectedItemId,
+      draftIds,
+      location,
+      createButtonTitle,
+    } = this.props;
+
     const { search } = this.state;
     const filteredList = this.getSearchFilteredList();
     const pageWiseList = this.getPageWiseList(filteredList);
+    const destinationPageId = new URLSearchParams(location.search).get(
+      "importTo",
+    );
+
     return (
       <React.Fragment>
         {isLoading ? (
@@ -283,11 +338,6 @@ class EditorSidebar extends React.Component<Props, State> {
                   }}
                   placeholder="Search"
                 />
-                <CreateNewButton
-                  text="Create new API"
-                  icon={FormIcons.ADD_NEW_ICON()}
-                  onClick={this.handleCreateNew}
-                />
               </Controls>
               <DragDropContext
                 onDragStart={this.onDragStart}
@@ -312,9 +362,21 @@ class EditorSidebar extends React.Component<Props, State> {
                             >
                               {provided.placeholder}
                               <div>
+                                <StyledAddButton
+                                  text={createButtonTitle}
+                                  icon="plus"
+                                  fluid
+                                  className={
+                                    destinationPageId === page.id
+                                      ? "highlightButton"
+                                      : "createBtn"
+                                  }
+                                  style={{ padding: "10px" }}
+                                  onClick={() => this.handleCreateNew(page.id)}
+                                />
                                 {page.items.length === 0 && (
                                   <NoItemMessage>
-                                    {"No item on this page yet"}
+                                    {"No APIs on this page yet"}
                                   </NoItemMessage>
                                 )}
                                 {page.items.map((item: Item, index) => (
@@ -334,7 +396,10 @@ class EditorSidebar extends React.Component<Props, State> {
                                         {...provided.draggableProps}
                                         {...provided.dragHandleProps}
                                         onClick={() =>
-                                          this.handleItemSelect(item.id)
+                                          this.handleItemSelect(
+                                            item.id,
+                                            item.pageId,
+                                          )
                                         }
                                       >
                                         {itemRender(item)}
diff --git a/app/client/src/pages/Editor/routes.tsx b/app/client/src/pages/Editor/routes.tsx
index bbd1194924..5283a28d5c 100644
--- a/app/client/src/pages/Editor/routes.tsx
+++ b/app/client/src/pages/Editor/routes.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Switch, withRouter, RouteComponentProps } from "react-router-dom";
 import ApiEditor from "./APIEditor";
+import CurlImportForm from "./APIEditor/CurlImportForm";
+import ProviderTemplates from "./APIEditor/ProviderTemplates";
 import {
   API_EDITOR_ID_URL,
   API_EDITOR_URL,
@@ -8,6 +10,9 @@ import {
   BUILDER_BASE_URL,
   BuilderRouteParams,
   APIEditorRouteParams,
+  getCurlImportPageURL,
+  API_EDITOR_URL_WITH_SELECTED_PAGE_ID,
+  getProviderTemplatesURL,
 } from "constants/routes";
 import styled from "styled-components";
 import AppRoute from "pages/common/AppRoute";
@@ -30,7 +35,6 @@ const DrawerWrapper = styled.div<{
   background-color: white;
   width: ${props => (props.showOnlySidebar ? "0px" : "75%")};
   height: 100%;
-  box-shadow: -1px 2px 3px 0px ${props => props.theme.colors.paneBG};
 `;
 
 interface RouterState {
@@ -113,6 +117,23 @@ class EditorsRouter extends React.Component<
               component={ApiEditor}
               name={"ApiEditor"}
             />
+            <AppRoute
+              exact
+              path={API_EDITOR_URL_WITH_SELECTED_PAGE_ID()}
+              component={ApiEditor}
+              name={"ApiEditor"}
+            />
+            <AppRoute
+              exact
+              path={getCurlImportPageURL()}
+              component={CurlImportForm}
+              name={"ApiEditor"}
+            />
+            <AppRoute
+              path={getProviderTemplatesURL()}
+              component={ProviderTemplates}
+              name={"ApiEditor"}
+            />
           </Switch>
         </DrawerWrapper>
       </Wrapper>
diff --git a/app/client/src/reducers/entityReducers/actionsReducer.tsx b/app/client/src/reducers/entityReducers/actionsReducer.tsx
index 47728e5457..4132a7a159 100644
--- a/app/client/src/reducers/entityReducers/actionsReducer.tsx
+++ b/app/client/src/reducers/entityReducers/actionsReducer.tsx
@@ -4,12 +4,12 @@ import {
   ReduxAction,
   ReduxActionErrorTypes,
 } from "constants/ReduxActionConstants";
-import { ActionResponse, RestAction } from "api/ActionAPI";
+import { ActionResponse, RapidApiAction, RestAction } from "api/ActionAPI";
 import { ExecuteErrorPayload } from "constants/ActionConstants";
 import _ from "lodash";
 export interface ActionData {
   isLoading: boolean;
-  config: RestAction;
+  config: RestAction | RapidApiAction;
   data?: ActionResponse;
 }
 export type ActionDataState = ActionData[];
diff --git a/app/client/src/reducers/index.tsx b/app/client/src/reducers/index.tsx
index d47b5d4243..2ba988ff6d 100644
--- a/app/client/src/reducers/index.tsx
+++ b/app/client/src/reducers/index.tsx
@@ -21,7 +21,10 @@ import { AuthState } from "reducers/uiReducers/authReducer";
 import { OrgReduxState } from "reducers/uiReducers/orgReducer";
 import { UsersReduxState } from "reducers/uiReducers/usersReducer";
 import { WidgetDragResizeState } from "reducers/uiReducers/dragResizeReducer";
+import { ImportedCollectionsReduxState } from "reducers/uiReducers/importedCollectionsReducer";
+import { ProvidersReduxState } from "reducers/uiReducers/providerReducer";
 import { MetaState } from "./entityReducers/metaReducer";
+import { ImportReduxState } from "reducers/uiReducers/importReducer";
 
 const appReducer = combineReducers({
   entities: entityReducer,
@@ -44,6 +47,9 @@ export interface AppState {
     orgs: OrgReduxState;
     users: UsersReduxState;
     widgetDragResize: WidgetDragResizeState;
+    importedCollections: ImportedCollectionsReduxState;
+    providers: ProvidersReduxState;
+    imports: ImportReduxState;
   };
   entities: {
     canvasWidgets: CanvasWidgetsReduxState;
diff --git a/app/client/src/reducers/uiReducers/importReducer.ts b/app/client/src/reducers/uiReducers/importReducer.ts
new file mode 100644
index 0000000000..aa94f9313f
--- /dev/null
+++ b/app/client/src/reducers/uiReducers/importReducer.ts
@@ -0,0 +1,37 @@
+import { createReducer } from "utils/AppsmithUtils";
+import {
+  ReduxAction,
+  ReduxActionTypes,
+  ReduxActionErrorTypes,
+} from "constants/ReduxActionConstants";
+
+const initialState: ImportReduxState = {
+  isImportingCurl: false,
+  errorPayload: {},
+};
+
+const importReducer = createReducer(initialState, {
+  [ReduxActionTypes.SUBMIT_CURL_FORM_INIT]: (state: ImportReduxState) => {
+    return {
+      ...state,
+      isImportingCurl: true,
+    };
+  },
+  [ReduxActionTypes.SUBMIT_CURL_FORM_SUCCESS]: (state: ImportReduxState) => ({
+    ...state,
+    isImportingCurl: false,
+  }),
+  [ReduxActionErrorTypes.SUBMIT_CURL_FORM_ERROR]: (
+    state: ImportReduxState,
+    action: ReduxAction<{ errorPayload: string }>,
+  ) => {
+    return { ...state, errorPayload: action.payload, isImportingCurl: false };
+  },
+});
+
+export interface ImportReduxState {
+  isImportingCurl: boolean;
+  errorPayload: {};
+}
+
+export default importReducer;
diff --git a/app/client/src/reducers/uiReducers/importedCollectionsReducer.ts b/app/client/src/reducers/uiReducers/importedCollectionsReducer.ts
new file mode 100644
index 0000000000..eb5bf5fc0b
--- /dev/null
+++ b/app/client/src/reducers/uiReducers/importedCollectionsReducer.ts
@@ -0,0 +1,42 @@
+import { createReducer } from "utils/AppsmithUtils";
+import {
+  ReduxAction,
+  ReduxActionTypes,
+  ReduxActionErrorTypes,
+} from "constants/ReduxActionConstants";
+
+import {
+  TemplateList,
+  CollectionDataArray,
+} from "constants/collectionsConstants";
+
+const initialState: ImportedCollectionsReduxState = {
+  isFetchingImportedCollections: false,
+  importedCollections: [],
+};
+
+const importedCollectionsReducer = createReducer(initialState, {
+  [ReduxActionTypes.FETCH_IMPORTED_COLLECTIONS_INIT]: (
+    state: ImportedCollectionsReduxState,
+  ) => ({ ...state, isFetchingImportedCollections: true }),
+  [ReduxActionTypes.FETCH_IMPORTED_COLLECTIONS_SUCCESS]: (
+    state: ImportedCollectionsReduxState,
+    action: ReduxAction<Array<CollectionDataArray>>,
+  ) => ({
+    ...state,
+    importedCollections: action.payload[0].apiTemplateList,
+    isFetchingImportedCollections: false,
+  }),
+  [ReduxActionErrorTypes.FETCH_IMPORTED_COLLECTIONS_ERROR]: (
+    state: ImportedCollectionsReduxState,
+  ) => {
+    return { ...state, isFetchingImportedCollections: false };
+  },
+});
+
+export interface ImportedCollectionsReduxState {
+  isFetchingImportedCollections: boolean;
+  importedCollections: TemplateList[];
+}
+
+export default importedCollectionsReducer;
diff --git a/app/client/src/reducers/uiReducers/index.tsx b/app/client/src/reducers/uiReducers/index.tsx
index a4bb036f2a..1e803c2499 100644
--- a/app/client/src/reducers/uiReducers/index.tsx
+++ b/app/client/src/reducers/uiReducers/index.tsx
@@ -10,6 +10,9 @@ import authReducer from "./authReducer";
 import orgReducer from "./orgReducer";
 import usersReducer from "./usersReducer";
 import { widgetDraggingReducer } from "./dragResizeReducer";
+import importedCollectionsReducer from "./importedCollectionsReducer";
+import providersReducer from "./providerReducer";
+import importReducer from "./importReducer";
 
 const uiReducer = combineReducers({
   widgetSidebar: widgetSidebarReducer,
@@ -23,5 +26,8 @@ const uiReducer = combineReducers({
   orgs: orgReducer,
   users: usersReducer,
   widgetDragResize: widgetDraggingReducer,
+  importedCollections: importedCollectionsReducer,
+  providers: providersReducer,
+  imports: importReducer,
 });
 export default uiReducer;
diff --git a/app/client/src/reducers/uiReducers/providerReducer.ts b/app/client/src/reducers/uiReducers/providerReducer.ts
new file mode 100644
index 0000000000..dc424d1f75
--- /dev/null
+++ b/app/client/src/reducers/uiReducers/providerReducer.ts
@@ -0,0 +1,162 @@
+import { createReducer } from "utils/AppsmithUtils";
+import {
+  ReduxAction,
+  ReduxActionTypes,
+  ReduxActionErrorTypes,
+} from "constants/ReduxActionConstants";
+
+import {
+  Providers,
+  ProvidersDataArray,
+  ProviderTemplates,
+  ProviderTemplateArray,
+  ProvidersCategoriesResponse,
+} from "constants/providerConstants";
+
+const initialState: ProvidersReduxState = {
+  isFetchingProviders: false,
+  providers: [],
+  providersTotal: 0,
+  providerTemplates: [],
+  isFetchingProviderTemplates: false,
+  providerCategories: [],
+  providerCategoriesErrorPayload: {},
+  isSwitchingCategory: true,
+};
+
+const providersReducer = createReducer(initialState, {
+  [ReduxActionTypes.FETCH_PROVIDERS_INIT]: (state: ProvidersReduxState) => ({
+    ...state,
+    isFetchingProviders: true,
+  }),
+  [ReduxActionTypes.FETCH_PROVIDERS_WITH_CATEGORY_INIT]: (
+    state: ProvidersReduxState,
+  ) => ({
+    ...state,
+    isFetchingProviders: true,
+  }),
+  [ReduxActionTypes.ADD_API_TO_PAGE_INIT]: (
+    state: ProvidersReduxState,
+    action: any,
+  ) => {
+    const updatedProviderTemplates = state.providerTemplates.map(item => {
+      if (item.templateData.id === action.payload.marketplaceElement.item.id) {
+        item.addToPageLoading = true;
+        return item;
+      }
+      return item;
+    });
+    return { ...state, providerTemplates: updatedProviderTemplates };
+  },
+  [ReduxActionTypes.FETCH_PROVIDERS_SUCCESS]: (
+    state: ProvidersReduxState,
+    action: ReduxAction<Providers>,
+  ) => {
+    if (state.providers.length === 0) {
+      return {
+        ...state,
+        providers: action.payload.providers,
+        providersTotal: action.payload.total,
+        isFetchingProviders: false,
+        isSwitchingCategory: false,
+      };
+    } else {
+      return {
+        ...state,
+        providers: [...state.providers, ...action.payload.providers],
+        isFetchingProviders: false,
+      };
+    }
+  },
+  [ReduxActionErrorTypes.FETCH_PROVIDERS_ERROR]: (
+    state: ProvidersReduxState,
+  ) => {
+    return { ...state, isFetchingProviders: false };
+  },
+  [ReduxActionTypes.FETCH_PROVIDER_TEMPLATES_INIT]: (
+    state: ProvidersReduxState,
+  ) => ({
+    ...state,
+    isFetchingProviderTemplates: true,
+  }),
+  [ReduxActionTypes.CLEAR_PROVIDERS]: (state: ProvidersReduxState) => ({
+    ...state,
+    providers: [],
+    isSwitchingCategory: true,
+  }),
+  [ReduxActionTypes.FETCH_PROVIDER_TEMPLATES_SUCCESS]: (
+    state: ProvidersReduxState,
+    action: ReduxAction<ProviderTemplates[]>,
+  ) => {
+    const templates = action.payload.map(payload => ({
+      isOpen: false,
+      templateData: payload,
+      addToPageStatus: false,
+    }));
+    return {
+      ...state,
+      providerTemplates: templates,
+      isFetchingProviderTemplates: false,
+    };
+  },
+  [ReduxActionErrorTypes.FETCH_PROVIDER_TEMPLATES_ERROR]: (
+    state: ProvidersReduxState,
+  ) => {
+    return { ...state, isFetchingProviderTemplates: false };
+  },
+  [ReduxActionTypes.ADD_API_TO_PAGE_SUCCESS]: (
+    state: ProvidersReduxState,
+    action: ProviderTemplates,
+  ) => {
+    const updatedProviderTemplates = state.providerTemplates.map(item => {
+      if (item.templateData.id === action.data.templateId) {
+        item.addToPageStatus = true;
+        item.addToPageLoading = false;
+        return item;
+      }
+      return item;
+    });
+    return { ...state, providerTemplates: updatedProviderTemplates };
+  },
+  [ReduxActionErrorTypes.ADD_API_TO_PAGE_ERROR]: (
+    state: ProvidersReduxState,
+    action: any,
+  ) => {
+    const updatedProviderTemplates = state.providerTemplates.map(item => {
+      if (item.templateData.id === action.payload.templateId) {
+        item.addToPageLoading = false;
+        return item;
+      }
+      return item;
+    });
+    return { ...state, providerTemplates: updatedProviderTemplates };
+  },
+  [ReduxActionTypes.FETCH_PROVIDERS_CATEGORIES_SUCCESS]: (
+    state: ProvidersReduxState,
+    action: ReduxAction<ProvidersCategoriesResponse>,
+  ) => {
+    return {
+      ...state,
+      providerCategories: action.payload,
+    };
+  },
+  [ReduxActionErrorTypes.FETCH_PROVIDERS_CATEGORIES_ERROR]: (
+    state: ProvidersReduxState,
+    action: ReduxAction<{ providerCategoriesErrorPayload: string }>,
+  ) => {
+    return { ...state, providerCategoriesErrorPayload: action.payload };
+  },
+});
+
+export interface ProvidersReduxState {
+  isFetchingProviders: boolean;
+  providers: ProvidersDataArray[];
+  providersTotal: number;
+  providerTemplates: ProviderTemplateArray[];
+  isFetchingProviderTemplates: boolean;
+  providerCategories: string[];
+  providerCategoriesErrorPayload: {};
+  isSwitchingCategory: boolean;
+}
+
+export default providersReducer;
diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index ec83aae665..ca4098f398 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -10,7 +10,8 @@ import {
   ReduxFormActionTypes,
 } from "constants/ReduxActionConstants";
 import { getFormData } from "selectors/formSelectors";
-import { API_EDITOR_FORM_NAME } from "constants/forms";
+import { API_EDITOR_FORM_NAME, API_HOME_SCREEN_FORM } from "constants/forms";
+import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants";
 import history from "utils/history";
 import { API_EDITOR_ID_URL, API_EDITOR_URL } from "constants/routes";
 import {
@@ -29,6 +30,7 @@ import {
   UNIQUE_NAME_ERROR,
   VALID_FUNCTION_NAME_ERROR,
 } from "constants/messages";
+import { fetchProvidersWithCategory } from "actions/providerActions";
 
 const getApiDraft = (state: AppState, id: string) => {
   const drafts = state.ui.apiPane.drafts;
@@ -62,6 +64,7 @@ function* syncApiParamsSaga(
 ) {
   const field = actionPayload.meta.field;
   const value = actionPayload.payload;
+
   if (field === "actionConfiguration.path") {
     if (value.indexOf("?") > -1) {
       const paramsString = value.substr(value.indexOf("?") + 1);
@@ -125,7 +128,70 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) {
   }
   const action = yield select(getAction, id);
   const draft = yield select(getApiDraft, id);
-  const data = _.isEmpty(draft) ? action : draft;
+  let fromDraft = false;
+  let data = {} as any;
+  if (_.isEmpty(draft)) {
+    data = {
+      displayFormat: "",
+      ...action,
+      actionConfiguration: {
+        headers: [
+          { key: "", value: "" },
+          { key: "", value: "" },
+        ],
+        queryParameters: [
+          { key: "", value: "" },
+          { key: "", value: "" },
+        ],
+        path: "",
+        ...action.actionConfiguration,
+      },
+    };
+  } else {
+    fromDraft = true;
+    data = draft;
+  }
+  if (data.actionConfiguration.path) {
+    if (data.actionConfiguration.path.charAt(0) === "/")
+      data.actionConfiguration.path = data.actionConfiguration.path.substring(
+        1,
+      );
+  }
+
+  if (
+    data.actionConfiguration.httpMethod !== "GET" &&
+    !fromDraft &&
+    !data.providerId
+  ) {
+    let contentType;
+    const headers = data.actionConfiguration.headers;
+    if (headers) {
+      contentType = headers.find(
+        (header: any) => header.key === "content-type",
+      );
+    }
+    const actionConfigurationBody = data.actionConfiguration.body;
+    data.actionConfiguration.body = [];
+    if (contentType) {
+      if (
+        contentType.value === POST_BODY_FORMAT_OPTIONS[0].value &&
+        data.actionConfiguration.body
+      ) {
+        data.actionConfiguration.body[0] = actionConfigurationBody;
+      } else {
+        if (typeof actionConfigurationBody !== "object") {
+          data.actionConfiguration.body[1] = JSON.parse(
+            actionConfigurationBody,
+          );
+        } else {
+          data.actionConfiguration.body[1] = actionConfigurationBody;
+        }
+      }
+    } else {
+      data.displayFormat = POST_BODY_FORMAT_OPTIONS[0].value;
+    }
+  }
+
   yield put(initialize(API_EDITOR_FORM_NAME, data));
   history.push(API_EDITOR_ID_URL(applicationId, pageId, id));
   if (data.actionConfiguration && data.actionConfiguration.queryParameters) {
@@ -141,19 +207,22 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) {
 }
 
 function* updateDraftsSaga() {
-  const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
+  const { values, initialValues } = yield select(
+    getFormData,
+    API_EDITOR_FORM_NAME,
+  );
   if (!values.id) return;
-  const action = yield select(getAction, values.id);
-  if (_.isEqual(values, action)) {
-    yield put({
-      type: ReduxActionTypes.DELETE_API_DRAFT,
-      payload: { id: values.id },
-    });
-  } else {
+
+  if (!_.isEqual(values, initialValues)) {
     yield put({
       type: ReduxActionTypes.UPDATE_API_DRAFT,
       payload: { id: values.id, draft: values },
     });
+  } else {
+    yield put({
+      type: ReduxActionTypes.DELETE_API_DRAFT,
+      payload: { id: values.id },
+    });
   }
 }
 
@@ -198,15 +267,66 @@ function* validateInputSaga(
     },
   });
 }
+
+function* updateFormFields(
+  actionPayload: ReduxActionWithMeta<string, { field: string }>,
+) {
+  const field = actionPayload.meta.field;
+  const value = actionPayload.payload;
+
+  if (field === "actionConfiguration.httpMethod") {
+    if (value !== "GET") {
+      const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
+      const { actionConfiguration } = values;
+      const actionConfigurationHeaders = actionConfiguration.headers;
+      let contentType;
+
+      if (actionConfigurationHeaders) {
+        contentType = actionConfigurationHeaders.find(
+          (header: any) => header.key === "content-type",
+        );
+      }
+
+      if (!contentType) {
+        yield put(
+          autofill(API_EDITOR_FORM_NAME, "actionConfiguration.headers", [
+            ...actionConfigurationHeaders,
+            {
+              key: "content-type",
+              value: POST_BODY_FORMAT_OPTIONS[0].value,
+            },
+          ]),
+        );
+        yield put(
+          autofill(
+            API_EDITOR_FORM_NAME,
+            "displayFormat",
+            POST_BODY_FORMAT_OPTIONS[0].value,
+          ),
+        );
+      }
+    } else {
+      yield put(autofill(API_EDITOR_FORM_NAME, "displayFormat", ""));
+    }
+  }
+}
+
 function* formValueChangeSaga(
   actionPayload: ReduxActionWithMeta<string, { field: string; form: string }>,
 ) {
   const { form } = actionPayload.meta;
+  if (form === API_HOME_SCREEN_FORM) {
+    yield put(
+      fetchProvidersWithCategory({ category: actionPayload.payload, page: 1 }),
+    );
+    return;
+  }
   if (form !== API_EDITOR_FORM_NAME) return;
   yield all([
     call(validateInputSaga, actionPayload),
     call(updateDraftsSaga),
     call(syncApiParamsSaga, actionPayload),
+    call(updateFormFields, actionPayload),
   ]);
 }
 
@@ -267,5 +387,6 @@ export default function* root() {
     // Intercepting the redux-form change actionType
     takeEvery(ReduxFormActionTypes.VALUE_CHANGE, formValueChangeSaga),
     takeEvery(ReduxFormActionTypes.ARRAY_REMOVE, formValueChangeSaga),
+    takeEvery(ReduxFormActionTypes.ARRAY_PUSH, formValueChangeSaga),
   ]);
 }
diff --git a/app/client/src/sagas/CollectionSagas.ts b/app/client/src/sagas/CollectionSagas.ts
new file mode 100644
index 0000000000..4e5e0ab332
--- /dev/null
+++ b/app/client/src/sagas/CollectionSagas.ts
@@ -0,0 +1,39 @@
+import { call, takeLatest, put, all } from "redux-saga/effects";
+import {
+  ReduxActionTypes,
+  ReduxActionErrorTypes,
+} from "constants/ReduxActionConstants";
+import { validateResponse } from "sagas/ErrorSagas";
+import ImportedCollectionsApi from "api/CollectionApi";
+import { ImportedCollections } from "constants/collectionsConstants";
+
+export function* fetchImportedCollectionsSaga() {
+  try {
+    const response: ImportedCollections = yield call(
+      ImportedCollectionsApi.fetchImportedCollections,
+    );
+    const isValidResponse = yield validateResponse(response);
+    if (isValidResponse) {
+      yield put({
+        type: ReduxActionTypes.FETCH_IMPORTED_COLLECTIONS_SUCCESS,
+        payload: response.data,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.FETCH_IMPORTED_COLLECTIONS_ERROR,
+      payload: {
+        error,
+      },
+    });
+  }
+}
+
+export default function* importedCollectionsSagas() {
+  yield all([
+    takeLatest(
+      ReduxActionTypes.FETCH_IMPORTED_COLLECTIONS_INIT,
+      fetchImportedCollectionsSaga,
+    ),
+  ]);
+}
diff --git a/app/client/src/sagas/CurlImportSagas.ts b/app/client/src/sagas/CurlImportSagas.ts
new file mode 100644
index 0000000000..8353371f2d
--- /dev/null
+++ b/app/client/src/sagas/CurlImportSagas.ts
@@ -0,0 +1,69 @@
+import { takeLatest, put, all, select } from "redux-saga/effects";
+import { initialize } from "redux-form";
+import {
+  ReduxActionTypes,
+  ReduxActionErrorTypes,
+  ReduxAction,
+} from "constants/ReduxActionConstants";
+import { API_EDITOR_FORM_NAME } from "constants/forms";
+import { validateResponse } from "sagas/ErrorSagas";
+import CurlImportApi, { CurlImportRequest } from "api/ImportApi";
+import { ApiResponse } from "api/ApiResponses";
+import { AppToaster } from "components/editorComponents/ToastComponent";
+import { ToastType } from "react-toastify";
+import { CURL_IMPORT_SUCCESS } from "constants/messages";
+import { API_EDITOR_ID_URL } from "constants/routes";
+import history from "utils/history";
+import {
+  getCurrentApplicationId,
+  getCurrentPageId,
+} from "selectors/editorSelectors";
+import { fetchActions } from "actions/actionActions";
+
+export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
+  const { type, pageId, name } = action.payload;
+  let { curl } = action.payload;
+  try {
+    if (curl.charAt(0) === '"' && curl.charAt(curl.length - 1) === '"') {
+      curl = curl;
+    } else {
+      curl = '"' + curl + '"';
+    }
+    const request: CurlImportRequest = { type, pageId, name, curl };
+
+    const response: ApiResponse = yield CurlImportApi.curlImport(request);
+    const isValidResponse = yield validateResponse(response);
+    const applicationId = yield select(getCurrentApplicationId);
+    const currentPageId = yield select(getCurrentPageId);
+
+    if (isValidResponse) {
+      AppToaster.show({
+        message: CURL_IMPORT_SUCCESS,
+        type: ToastType.SUCCESS,
+      });
+      yield put({
+        type: ReduxActionTypes.SUBMIT_CURL_FORM_SUCCESS,
+        payload: response.data,
+      });
+      yield put(fetchActions(applicationId));
+      const data = { ...response.data };
+      yield put(initialize(API_EDITOR_FORM_NAME, data));
+      history.push(
+        API_EDITOR_ID_URL(applicationId, currentPageId, response.data.id),
+      );
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.SUBMIT_CURL_FORM_ERROR,
+      payload: {
+        error,
+      },
+    });
+  }
+}
+
+export default function* curlImportSagas() {
+  yield all([
+    takeLatest(ReduxActionTypes.SUBMIT_CURL_FORM_INIT, curlImportSaga),
+  ]);
+}
diff --git a/app/client/src/sagas/ProvidersSaga.ts b/app/client/src/sagas/ProvidersSaga.ts
new file mode 100644
index 0000000000..2ee4dc6f04
--- /dev/null
+++ b/app/client/src/sagas/ProvidersSaga.ts
@@ -0,0 +1,148 @@
+import { call, takeLatest, put, all, select } from "redux-saga/effects";
+import {
+  ReduxActionTypes,
+  ReduxActionErrorTypes,
+  ReduxActionWithPromise,
+  ReduxAction,
+} from "constants/ReduxActionConstants";
+import { validateResponse } from "sagas/ErrorSagas";
+import ProvidersApi, {
+  FetchProviderTemplateResponse,
+  FetchProviderTemplatesRequest,
+  AddApiToPageRequest,
+  FetchProviderCategoriesResponse,
+} from "api/ProvidersApi";
+import { Providers } from "constants/providerConstants";
+import { FetchProviderWithCategoryRequest } from "api/ProvidersApi";
+import { fetchActions } from "actions/actionActions";
+import { getCurrentApplicationId } from "selectors/editorSelectors";
+import { AppToaster } from "components/editorComponents/ToastComponent";
+import { ToastType } from "react-toastify";
+import { ADD_API_TO_PAGE_SUCCESS_MESSAGE } from "constants/messages";
+
+export function* fetchProviderTemplatesSaga(
+  action: ReduxActionWithPromise<FetchProviderTemplatesRequest>,
+) {
+  const { providerId } = action.payload;
+  try {
+    const request: FetchProviderTemplatesRequest = { providerId };
+
+    const response: FetchProviderTemplateResponse = yield ProvidersApi.fetchProviderTemplates(
+      request,
+    );
+
+    const isValidResponse = yield validateResponse(response);
+
+    if (isValidResponse) {
+      yield put({
+        type: ReduxActionTypes.FETCH_PROVIDER_TEMPLATES_SUCCESS,
+        payload: response.data,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.FETCH_PROVIDER_TEMPLATES_ERROR,
+      payload: {
+        error,
+      },
+    });
+  }
+}
+
+export function* addApiToPageSaga(
+  action: ReduxActionWithPromise<AddApiToPageRequest>,
+) {
+  const request: AddApiToPageRequest = action.payload;
+  try {
+    const response: FetchProviderTemplateResponse = yield ProvidersApi.addApiToPage(
+      request,
+    );
+
+    const isValidResponse = yield validateResponse(response);
+
+    if (isValidResponse) {
+      AppToaster.show({
+        message: ADD_API_TO_PAGE_SUCCESS_MESSAGE,
+        type: ToastType.SUCCESS,
+      });
+      yield put({
+        type: ReduxActionTypes.ADD_API_TO_PAGE_SUCCESS,
+        data: response.data,
+      });
+      const applicationId = yield select(getCurrentApplicationId);
+      yield put(fetchActions(applicationId));
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.ADD_API_TO_PAGE_ERROR,
+      payload: {
+        error,
+        templateId: request.marketplaceElement.id,
+      },
+    });
+  }
+}
+
+export function* fetchProvidersWithCategorySaga(
+  action: ReduxAction<FetchProviderWithCategoryRequest>,
+) {
+  try {
+    const request: FetchProviderWithCategoryRequest = action.payload;
+    const response: Providers = yield ProvidersApi.fetchProvidersWithCategory(
+      request,
+    );
+
+    const isValidResponse = yield validateResponse(response);
+
+    if (isValidResponse) {
+      yield put({
+        type: ReduxActionTypes.FETCH_PROVIDERS_SUCCESS,
+        payload: response.data,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.FETCH_PROVIDERS_ERROR,
+      payload: {
+        error,
+      },
+    });
+  }
+}
+
+export function* fetchProvidersCategoriesSaga() {
+  try {
+    const response: FetchProviderCategoriesResponse = yield call(
+      ProvidersApi.fetchProvidersCategories,
+    );
+    yield put({
+      type: ReduxActionTypes.FETCH_PROVIDERS_CATEGORIES_SUCCESS,
+      payload: response.data,
+    });
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.FETCH_PROVIDERS_CATEGORIES_ERROR,
+      payload: {
+        error,
+      },
+    });
+  }
+}
+
+export default function* providersSagas() {
+  yield all([
+    takeLatest(
+      ReduxActionTypes.FETCH_PROVIDER_TEMPLATES_INIT,
+      fetchProviderTemplatesSaga,
+    ),
+    takeLatest(ReduxActionTypes.ADD_API_TO_PAGE_INIT, addApiToPageSaga),
+    takeLatest(
+      ReduxActionTypes.FETCH_PROVIDERS_CATEGORIES_INIT,
+      fetchProvidersCategoriesSaga,
+    ),
+    takeLatest(
+      ReduxActionTypes.FETCH_PROVIDERS_WITH_CATEGORY_INIT,
+      fetchProvidersWithCategorySaga,
+    ),
+  ]);
+}
diff --git a/app/client/src/sagas/index.tsx b/app/client/src/sagas/index.tsx
index 601848aede..83723fe90d 100644
--- a/app/client/src/sagas/index.tsx
+++ b/app/client/src/sagas/index.tsx
@@ -12,6 +12,9 @@ import apiPaneSagas from "./ApiPaneSagas";
 import userSagas from "./userSagas";
 import pluginSagas from "./PluginSagas";
 import orgSagas from "./OrgSagas";
+import importedCollectionsSagas from "./CollectionSagas";
+import providersSagas from "./ProvidersSaga";
+import curlImportSagas from "./CurlImportSagas";
 import modalSagas from "./ModalSagas";
 import batchSagas from "./BatchSagas";
 
@@ -30,6 +33,9 @@ export function* rootSaga() {
     spawn(userSagas),
     spawn(pluginSagas),
     spawn(orgSagas),
+    spawn(importedCollectionsSagas),
+    spawn(providersSagas),
+    spawn(curlImportSagas),
     spawn(modalSagas),
     spawn(batchSagas),
   ]);
diff --git a/app/client/src/selectors/applicationSelectors.tsx b/app/client/src/selectors/applicationSelectors.tsx
index 460ee0ca23..df3c56b3e6 100644
--- a/app/client/src/selectors/applicationSelectors.tsx
+++ b/app/client/src/selectors/applicationSelectors.tsx
@@ -35,6 +35,17 @@ const getApplicationSearchKeyword = (state: AppState) =>
 export const getIsDeletingApplication = (state: AppState) =>
   state.ui.applications.deletingApplication;
 
+export const getImportedCollections = (state: AppState) =>
+  state.ui.importedCollections.importedCollections;
+
+export const getProviders = (state: AppState) => state.ui.providers.providers;
+export const getProvidersLoadingState = (state: AppState) =>
+  state.ui.providers.isFetchingProviders;
+export const getProviderTemplates = (state: AppState) =>
+  state.ui.providers.providerTemplates;
+export const getProvidersTemplatesLoadingState = (state: AppState) =>
+  state.ui.providers.isFetchingProviderTemplates;
+
 export const getApplicationList = createSelector(
   getApplications,
   getApplicationSearchKeyword,
diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx
index e4314b08e5..3024093641 100644
--- a/app/client/src/selectors/editorSelectors.tsx
+++ b/app/client/src/selectors/editorSelectors.tsx
@@ -24,6 +24,10 @@ const getEditorState = (state: AppState) => state.ui.editor;
 const getWidgetConfigs = (state: AppState) => state.entities.widgetConfig;
 const getWidgetSideBar = (state: AppState) => state.ui.widgetSidebar;
 const getPageListState = (state: AppState) => state.entities.pageList;
+const getActions = (state: AppState) => state.entities.actions;
+
+export const getProviderCategories = (state: AppState) =>
+  state.ui.providers.providerCategories;
 
 const getWidgets = (state: AppState): CanvasWidgetsReduxState =>
   state.entities.canvasWidgets;
@@ -193,3 +197,15 @@ export const getOccupiedSpaces = createSelector(
     return Object.keys(occupiedSpaces).length > 0 ? occupiedSpaces : undefined;
   },
 );
+
+export const getActionById = createSelector(
+  [getActions, (state: any, props: any) => props.match.params.apiId],
+  (actions, id) => {
+    const action = actions.find(action => action.config.id === id);
+    if (action) {
+      return action.config;
+    } else {
+      return undefined;
+    }
+  },
+);
diff --git a/app/client/src/selectors/formSelectors.ts b/app/client/src/selectors/formSelectors.ts
index f7020d7f8a..ec2a839bf2 100644
--- a/app/client/src/selectors/formSelectors.ts
+++ b/app/client/src/selectors/formSelectors.ts
@@ -1,4 +1,4 @@
-import { getFormValues, isValid } from "redux-form";
+import { getFormValues, isValid, getFormInitialValues } from "redux-form";
 import { AppState } from "reducers";
 import { RestAction } from "api/ActionAPI";
 
@@ -8,9 +8,10 @@ type GetFormData = (
 ) => { values: object; dirty: boolean; valid: boolean };
 
 export const getFormData: GetFormData = (state, formName) => {
+  const initialValues = getFormInitialValues(formName)(state) as RestAction;
   const values = getFormValues(formName)(state) as RestAction;
   const drafts = state.ui.apiPane.drafts;
   const dirty = values.id in drafts;
   const valid = isValid(formName)(state);
-  return { values, dirty, valid };
+  return { initialValues, values, dirty, valid };
 };
diff --git a/app/client/src/transformers/RestActionTransformer.ts b/app/client/src/transformers/RestActionTransformer.ts
index 2ab2e1a91f..f84d682c60 100644
--- a/app/client/src/transformers/RestActionTransformer.ts
+++ b/app/client/src/transformers/RestActionTransformer.ts
@@ -1,6 +1,7 @@
 import { RestAction } from "api/ActionAPI";
+import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants";
 
-export const transformRestAction = (data: RestAction): RestAction => {
+export const transformRestAction = (data: any): any => {
   let action = { ...data };
   if (
     data.actionConfiguration.queryParameters &&
@@ -17,5 +18,37 @@ export const transformRestAction = (data: RestAction): RestAction => {
       };
     }
   }
+  if (
+    data.displayFormat &&
+    data.displayFormat === POST_BODY_FORMAT_OPTIONS[0].value
+  ) {
+    if (data.actionConfiguration.body[0]) {
+      const body = data.actionConfiguration.body[0];
+      action = {
+        ...data,
+        actionConfiguration: {
+          ...data.actionConfiguration,
+          body,
+        },
+      };
+    }
+  }
+  if (
+    data.displayFormat &&
+    data.displayFormat === POST_BODY_FORMAT_OPTIONS[1].value
+  ) {
+    if (data.actionConfiguration.body[1]) {
+      const body = data.actionConfiguration.body[1];
+      if (typeof data.actionConfiguration.body === "object") {
+        action = {
+          ...data,
+          actionConfiguration: {
+            ...data.actionConfiguration,
+            body: JSON.stringify(body),
+          },
+        };
+      }
+    }
+  }
   return action;
 };
diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx
index 34baa6209b..d0709b82b6 100644
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@@ -9,6 +9,7 @@ import { Property } from "api/ActionAPI";
 import _ from "lodash";
 import moment from "moment-timezone";
 import ValidationRegistry from "./ValidationRegistry";
+import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import * as log from "loglevel";
 import { LogLevelDesc } from "loglevel";
 
@@ -77,6 +78,31 @@ export const getNextEntityName = (prefix: string, existingNames: string[]) => {
   return prefix + (lastIndex + 1);
 };
 
+export const getDuplicateName = (prefix: string, existingNames: string[]) => {
+  const trimmedPrefix = prefix.replace(/ /g, "");
+  const regex = new RegExp(`^${trimmedPrefix}(\\d+)$`);
+  const usedIndices: number[] = existingNames.map(name => {
+    if (name && regex.test(name)) {
+      const matches = name.match(regex);
+      const ind =
+        matches && Array.isArray(matches) ? parseInt(matches[1], 10) : 0;
+      return Number.isNaN(ind) ? 0 : ind;
+    }
+    return 0;
+  }) as number[];
+
+  const lastIndex = Math.max(...usedIndices, ...[0]);
+
+  return trimmedPrefix + `_${lastIndex + 1}`;
+};
+
+export const createNewApiName = (actions: ActionDataState, pageId: string) => {
+  const pageApiNames = actions
+    .filter(a => a.config.pageId === pageId)
+    .map(a => a.config.name);
+  return getNextEntityName("Api", pageApiNames);
+};
+
 export const noop = () => {
   console.log("noop");
 };
diff --git a/app/client/typings/react-infinite-scroller/index.d.ts b/app/client/typings/react-infinite-scroller/index.d.ts
new file mode 100644
index 0000000000..75c383ad88
--- /dev/null
+++ b/app/client/typings/react-infinite-scroller/index.d.ts
@@ -0,0 +1 @@
+declare module "react-infinite-scroller";
diff --git a/app/client/typings/react-json-view/index.d.ts b/app/client/typings/react-json-view/index.d.ts
new file mode 100644
index 0000000000..5f65320c65
--- /dev/null
+++ b/app/client/typings/react-json-view/index.d.ts
@@ -0,0 +1 @@
+declare module "react-json-view";
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 0b5724ed70..4cf245a52a 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -3718,6 +3718,11 @@ balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
+
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -4649,6 +4654,11 @@ core-js-pure@^3.0.0, core-js-pure@^3.0.1:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.4.tgz#4bf1ba866e25814f149d4e9aaa08c36173506e3a"
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.4.0, core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
@@ -5524,6 +5534,13 @@ encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
+encoding@^0.1.11:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
+  dependencies:
+    iconv-lite "~0.4.13"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -6138,6 +6155,26 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbemitter@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
+  integrity sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=
+  dependencies:
+    fbjs "^0.8.4"
+
+fbjs@^0.8.0, fbjs@^0.8.4:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -6324,6 +6361,14 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+flux@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/flux/-/flux-3.1.3.tgz#d23bed515a79a22d933ab53ab4ada19d05b2f08a"
+  integrity sha1-0jvtUVp5oi2TOrU6tK2hnQWy8Io=
+  dependencies:
+    fbemitter "^2.0.0"
+    fbjs "^0.8.0"
+
 focus-lock@^0.6.6:
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
@@ -7149,7 +7194,7 @@ husky@^3.0.5:
     run-node "^1.0.0"
     slash "^3.0.0"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   dependencies:
@@ -7707,7 +7752,7 @@ is-shallow-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-shallow-equal/-/is-shallow-equal-1.0.1.tgz#c410b51eb1c12ee50cd02891d32d1691a132d73c"
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
@@ -7793,6 +7838,14 @@ isobject@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -8665,10 +8718,20 @@ lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
 
+lodash.curry@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
+lodash.flow@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.isempty@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"
@@ -9391,6 +9454,14 @@ node-environment-flags@1.0.6:
     object.getownpropertydescriptors "^2.0.3"
     semver "^5.7.0"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-fetch@^2.1.2, node-fetch@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
@@ -9875,6 +9946,11 @@ p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
 
+paging-algorithm@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/paging-algorithm/-/paging-algorithm-1.0.1.tgz#18abe482a6a202bfaab4b023a407c8cc2072cb8a"
+  integrity sha512-hYLG10yTytEcE7gaeLw5z1Rert4MHYiQNxzwLt59LHb3bKRBShDX/0BqX4tQoAK11tQzoqSFkUelc6ptagfy5w==
+
 pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
@@ -10877,9 +10953,10 @@ promise.prototype.finally@^3.1.0:
     es-abstract "^1.17.0-next.0"
     function-bind "^1.1.1"
 
-promise@^7.0.1:
+promise@^7.0.1, promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
   dependencies:
     asap "~2.0.3"
 
@@ -11071,6 +11148,11 @@ punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
+pure-color@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+  integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -11188,6 +11270,16 @@ react-base-table@^1.9.1:
     react-virtualized-auto-sizer "^1.0.2"
     react-window "^1.8.2"
 
+react-base16-styling@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c"
+  integrity sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.0.1"
+    lodash.flow "^3.3.0"
+    pure-color "^1.2.0"
+
 react-beautiful-dnd@^12.2.0:
   version "12.2.0"
   resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-12.2.0.tgz#e5f6222f9e7934c6ed4ee09024547f9e353ae423"
@@ -11407,6 +11499,13 @@ react-hotkeys@2.0.0:
   dependencies:
     prop-types "^15.6.1"
 
+react-infinite-scroller@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.4.tgz#f67eaec4940a4ce6417bebdd6e3433bfc38826e9"
+  integrity sha512-/oOa0QhZjXPqaD6sictN2edFMsd3kkMiE19Vcz5JDgHpzEJVqYcmq+V3mkwO88087kvKGe1URNksHEOt839Ubw==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
@@ -11417,10 +11516,27 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
 
+react-json-view@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.19.1.tgz#95d8e59e024f08a25e5dc8f076ae304eed97cf5c"
+  integrity sha512-u5e0XDLIs9Rj43vWkKvwL8G3JzvXSl6etuS5G42a8klMohZuYFQzSN6ri+/GiBptDqlrXPTdExJVU7x9rrlXhg==
+  dependencies:
+    flux "^3.1.3"
+    react-base16-styling "^0.6.0"
+    react-lifecycles-compat "^3.0.4"
+    react-textarea-autosize "^6.1.0"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
+react-paginating@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-paginating/-/react-paginating-1.4.0.tgz#f19c4871d60428a7a2a0d49981da0e1df148e129"
+  integrity sha512-fVUQil9O8R5t7ggPvMqW6lz5/0TLbPvrfJ+54NykeURqmxAk3TBbIOL9SS7KRmpggDkym+6BNnSMdQ45Fh2wvg==
+  dependencies:
+    paging-algorithm "^1.0.1"
+
 react-pdf@^4.0.5:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/react-pdf/-/react-pdf-4.1.0.tgz#fcb874f28050fe9593c4e04652c7bff94bb1acf9"
@@ -11609,6 +11725,13 @@ react-test-renderer@^16.11.0:
     react-is "^16.8.6"
     scheduler "^0.18.0"
 
+react-textarea-autosize@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5"
+  integrity sha512-F6bI1dgib6fSvG8so1HuArPUv+iVEfPliuLWusLF+gAKz0FbB4jLrWUrTAeq1afnPT2c9toEZYUdz/y1uKMy4A==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-textarea-autosize@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
@@ -12496,9 +12619,10 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
 setprototypeof@1.1.0:
   version "1.1.0"
@@ -13597,6 +13721,11 @@ typescript@^3.6.3:
   version "3.7.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
 
+ua-parser-js@^0.7.18:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
+  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
+
 uglify-js@^2.6.1:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
@@ -14177,9 +14306,10 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.0.0:
+whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
 
 whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   version "2.3.0"

From d16a56b3c9a7be5d2e1cde17a038e6e2f86f5074 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Tue, 14 Apr 2020 13:34:46 +0000
Subject: [PATCH 05/31] Table Features

---
 app/client/public/index.html                  |  4 +-
 .../syncfusion/TableComponent.tsx             | 51 +++++++++++++++++--
 .../PropertyPaneConfigResponse.tsx            | 23 ++++++++-
 app/client/src/widgets/TableWidget.tsx        |  4 ++
 4 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/app/client/public/index.html b/app/client/public/index.html
index 8e809a7c22..e9dc0a0da1 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 
 <head>
-  <script type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
-  <script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
+  <script rel=preload type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
+  <script rel=preload type="text/javascript" src="/tinymce/tinymce.min.js"></script>
   <meta charset="utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="theme-color" content="#000000" />
diff --git a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
index 2e9413e631..8344a8cbd9 100644
--- a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
+++ b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
@@ -16,7 +16,13 @@ import {
   ColumnMenuItemModel,
   PageSettingsModel,
   PagerComponent,
+  Toolbar,
+  PdfExport,
+  ExcelExport,
+  Search,
+  VirtualScroll,
 } from "@syncfusion/ej2-react-grids";
+import { ClickEventArgs } from "@syncfusion/ej2-navigations";
 import React, { useRef, MutableRefObject, useEffect, memo } from "react";
 import styled from "constants/DefaultTheme";
 import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
@@ -47,6 +53,10 @@ export interface TableComponentProps {
   updateHiddenColumns: Function;
   resetSelectedRowIndex: Function;
   selectedRowIndex: number;
+  id: string;
+  exportCsv?: boolean;
+  exportExcel?: boolean;
+  exportPDF?: boolean;
 }
 
 const StyledGridComponent = styled(GridComponent)`
@@ -156,7 +166,6 @@ const TableComponent = memo(
             index =
               index + (pageSettings.currentPage - 1) * pageSettings.pageSize;
           }
-
           props.onRowClick(selectedrecords[0], index);
         }
       }
@@ -206,17 +215,35 @@ const TableComponent = memo(
       );
     }
 
+    const handleToolbarClick = (args: ClickEventArgs) => {
+      if (grid.current && args.item.id === `${props.id}_excelexport`) {
+        grid.current.excelExport({ fileName: `${props.id}.xlsx` });
+      }
+      if (grid.current && args.item.id === `${props.id}_csvexport`) {
+        grid.current.csvExport({ fileName: `${props.id}.csv` });
+      }
+      if (grid.current && args.item.id === `${props.id}_pdfexport`) {
+        grid.current.pdfExport({ fileName: `${props.id}.pdf` });
+      }
+    };
     const handleResizeStart = (args: any) => {
       args.e.stopPropagation();
     };
 
+    const toolbarOptions: string[] = [];
+    if (!!props.exportCsv) toolbarOptions.push("CsvExport");
+    if (!!props.exportExcel) toolbarOptions.push("ExcelExport");
+    if (!!props.exportPDF) toolbarOptions.push("PdfExport");
+
     return (
       <TableContainer className={props.isLoading ? Classes.SKELETON : ""}>
         <StyledGridComponent
+          toolbarClick={handleToolbarClick}
           created={handleCreated}
           destroy={handleDestroy}
           selectionSettings={settings}
           dataSource={props.data}
+          id={props.id}
           columnMenuClick={columnMenuClick}
           dataBound={() => {
             if (pager.current) {
@@ -237,9 +264,24 @@ const TableComponent = memo(
           showColumnMenu={true}
           commandClick={onCommandClick}
           columnMenuOpen={columnMenuOpen}
+          toolbar={!!toolbarOptions.length && toolbarOptions}
+          allowPdfExport
+          allowExcelExport
+          enableVirtualization
         >
           <Inject
-            services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]}
+            services={[
+              Resize,
+              Page,
+              Reorder,
+              ColumnMenu,
+              CommandColumn,
+              Toolbar,
+              ExcelExport,
+              PdfExport,
+              Search,
+              VirtualScroll,
+            ]}
           />
           <ColumnsDirective>
             {props.columns.map(col => {
@@ -302,7 +344,10 @@ const TableComponent = memo(
         JSON.stringify(prevProps.columnActions) ||
       nextProps.serverSidePaginationEnabled !==
         prevProps.serverSidePaginationEnabled ||
-      nextProps.pageNo !== prevProps.pageNo;
+      nextProps.pageNo !== prevProps.pageNo ||
+      nextProps.exportCsv !== prevProps.exportCsv ||
+      nextProps.exportExcel !== prevProps.exportExcel ||
+      nextProps.exportPDF !== prevProps.exportPDF;
 
     return !propsNotEqual;
   },
diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
index 2732a964f3..55e5d48cee 100644
--- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
+++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
@@ -94,7 +94,28 @@ const PropertyPaneConfigResponse = {
         sectionName: "General",
         children: [
           {
-            id: "7.1.1",
+            id: "7.1.4",
+            helpText: "Enable PDF Export",
+            propertyName: "exportPDF",
+            label: "PDF Export",
+            controlType: "SWITCH",
+          },
+          {
+            id: "7.1.5",
+            helpText: "Enable Excel Export",
+            propertyName: "exportExcel",
+            label: "Excel Export",
+            controlType: "SWITCH",
+          },
+          {
+            id: "7.1.6",
+            helpText: "Enable CSV Export",
+            propertyName: "exportCsv",
+            label: "CSV Export",
+            controlType: "SWITCH",
+          },
+          {
+            id: "7.1.7",
             helpText:
               "Takes in an array of objects to display rows in the table. Bind data from an API using {{}}",
             propertyName: "tableData",
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 909fd30ad0..c8dc9c0bc3 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -76,6 +76,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     const { componentWidth, componentHeight } = this.getComponentDimensions();
     return (
       <TableComponent
+        id={this.props.widgetName}
         data={this.props.tableData}
         columns={columns}
         isLoading={this.props.isLoading}
@@ -100,6 +101,9 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         updatePageSize={(pageSize: number) => {
           super.updateWidgetMetaProperty("pageSize", pageSize);
         }}
+        exportCsv={this.props.exportCsv}
+        exportPDF={this.props.exportPDF}
+        exportExcel={this.props.exportExcel}
       />
     );
   }

From 3a532866623ef26c5dd0a3bbcad0dfbddb278fce Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 14 Apr 2020 20:46:44 +0530
Subject: [PATCH 06/31] cleanup fixes

---
 .../editorComponents/form/fields/KeyValueFieldArray.tsx  | 3 +--
 app/client/src/sagas/CurlImportSagas.ts                  | 9 ++++-----
 app/client/src/transformers/RestActionTransformer.ts     | 1 -
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
index c3eec8cfd3..16ada3a9a6 100644
--- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
+++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
@@ -25,7 +25,7 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
         props.fields.push({ key: "", value: "" });
       }
     }
-  }, [props.fields]);
+  }, [props.fields, props.pushFields]);
 
   return (
     <React.Fragment>
@@ -68,7 +68,6 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
                     rightIcon={
                       props.actionConfig[index].description && props.rightIcon
                     }
-                    noArrows
                     description={props.actionConfig[index].description}
                     disabled={
                       props.actionConfig[index].editable ||
diff --git a/app/client/src/sagas/CurlImportSagas.ts b/app/client/src/sagas/CurlImportSagas.ts
index 8353371f2d..aed4135ced 100644
--- a/app/client/src/sagas/CurlImportSagas.ts
+++ b/app/client/src/sagas/CurlImportSagas.ts
@@ -24,11 +24,10 @@ export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
   const { type, pageId, name } = action.payload;
   let { curl } = action.payload;
   try {
-    if (curl.charAt(0) === '"' && curl.charAt(curl.length - 1) === '"') {
-      curl = curl;
-    } else {
-      curl = '"' + curl + '"';
-    }
+    // Transform to add quotes if not present
+    curl = `${curl.charAt(0) !== '"' ? '"' : ""}${curl}${
+      curl.charAt(curl.length - 1) !== '"' ? '"' : ""
+    }`;
     const request: CurlImportRequest = { type, pageId, name, curl };
 
     const response: ApiResponse = yield CurlImportApi.curlImport(request);
diff --git a/app/client/src/transformers/RestActionTransformer.ts b/app/client/src/transformers/RestActionTransformer.ts
index f84d682c60..95fee8d5a6 100644
--- a/app/client/src/transformers/RestActionTransformer.ts
+++ b/app/client/src/transformers/RestActionTransformer.ts
@@ -1,4 +1,3 @@
-import { RestAction } from "api/ActionAPI";
 import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants";
 
 export const transformRestAction = (data: any): any => {

From 42d82b60456fe3eadf940e30cffce2e943037810 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Wed, 15 Apr 2020 09:03:35 +0000
Subject: [PATCH 07/31] Row highlight _color

---
 .../designSystems/syncfusion/TableComponent.tsx   | 15 ++++++++++++---
 app/client/src/widgets/TableWidget.tsx            |  5 ++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
index 8344a8cbd9..152efe03ca 100644
--- a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
+++ b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
@@ -20,8 +20,9 @@ import {
   PdfExport,
   ExcelExport,
   Search,
-  VirtualScroll,
+  RowDataBoundEventArgs,
 } from "@syncfusion/ej2-react-grids";
+import { getValue } from "@syncfusion/ej2-base";
 import { ClickEventArgs } from "@syncfusion/ej2-navigations";
 import React, { useRef, MutableRefObject, useEffect, memo } from "react";
 import styled from "constants/DefaultTheme";
@@ -194,6 +195,13 @@ const TableComponent = memo(
       }
     }
 
+    function rowDataBound(args: RowDataBoundEventArgs) {
+      const color = getValue("_color", args.data);
+      if (args.row && color) {
+        (args.row as any).style.backgroundColor = color;
+      }
+    }
+
     function columnMenuOpen(args: ColumnMenuOpenEventArgs) {
       for (const item of args.items) {
         if (item.text) {
@@ -264,10 +272,11 @@ const TableComponent = memo(
           showColumnMenu={true}
           commandClick={onCommandClick}
           columnMenuOpen={columnMenuOpen}
+          rowDataBound={rowDataBound}
           toolbar={!!toolbarOptions.length && toolbarOptions}
           allowPdfExport
           allowExcelExport
-          enableVirtualization
+          // enableVirtualization
         >
           <Inject
             services={[
@@ -280,7 +289,7 @@ const TableComponent = memo(
               ExcelExport,
               PdfExport,
               Search,
-              VirtualScroll,
+              // VirtualScroll,
             ]}
           />
           <ColumnsDirective>
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index c8dc9c0bc3..13b0437344 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -19,7 +19,7 @@ function constructColumns(
   data: object[],
   hiddenColumns?: string[],
 ): ColumnModel[] | ColumnDirTypecast[] {
-  const cols: ColumnModel[] | ColumnDirTypecast[] = [];
+  let cols: ColumnModel[] | ColumnDirTypecast[] = [];
   const listItemWithAllProperties = {};
   data.forEach(dataItem => {
     Object.assign(listItemWithAllProperties, dataItem);
@@ -30,6 +30,9 @@ function constructColumns(
       visible: !hiddenColumns?.includes(key),
     });
   });
+  cols = (cols as any[]).filter(col => col.field !== "_color") as
+    | ColumnModel[]
+    | ColumnDirTypecast[];
   return cols;
 }
 

From 69d68ed4631905fa96ff7e28556ca66650c5f9e2 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Wed, 15 Apr 2020 16:52:15 +0530
Subject: [PATCH 08/31] Move source map explorer to dependencies

---
 app/client/package.json                                      | 5 +++--
 .../src/components/editorComponents/DropTargetComponent.tsx  | 4 ++--
 app/client/src/sagas/WidgetOperationSagas.tsx                | 1 +
 app/client/src/utils/DerivedPropertiesFactory.ts             | 1 +
 app/client/src/utils/ValidationFactory.ts                    | 1 +
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index f183c7a20c..d2348de411 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -92,7 +92,6 @@
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "shallowequal": "^1.1.0",
-    "source-map-explorer": "^2.1.1",
     "styled-components": "^4.1.3",
     "tinycolor2": "^1.4.1",
     "tinymce": "^5.2.0",
@@ -106,6 +105,7 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=DEVELOPMENT HOST=dev.appsmith.com craco start",
     "build": "./build.sh",
+    "build-local": "craco --max-old-space-size=4096 build --config craco.build.config.js",
     "test": "cypress/test.sh",
     "eject": "react-scripts eject",
     "start-prod": "REACT_APP_BASE_URL=https://api.appsmith.com REACT_APP_ENVIRONMENT=PRODUCTION craco start",
@@ -164,7 +164,8 @@
     "redux-devtools": "^3.5.0",
     "redux-devtools-extension": "^2.13.8",
     "storybook-addon-designs": "^5.1.1",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "source-map-explorer": "^2.4.2"
   },
   "husky": {
     "hooks": {
diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx
index 90f0b9f0ad..b932ed4e72 100644
--- a/app/client/src/components/editorComponents/DropTargetComponent.tsx
+++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx
@@ -10,7 +10,6 @@ import styled from "styled-components";
 import { useDrop, XYCoord, DropTargetMonitor } from "react-dnd";
 import { WidgetProps } from "widgets/BaseWidget";
 import { WidgetConfigProps } from "reducers/entityReducers/widgetConfigReducer";
-import WidgetFactory from "utils/WidgetFactory";
 import {
   widgetOperationParams,
   noCollision,
@@ -20,6 +19,7 @@ import { EditorContext } from "components/editorComponents/EditorContextProvider
 import {
   MAIN_CONTAINER_WIDGET_ID,
   GridDefaults,
+  WidgetTypes,
 } from "constants/WidgetConstants";
 import { calculateDropTargetRows } from "./DropTargetUtils";
 import DragLayerComponent from "./DragLayerComponent";
@@ -147,7 +147,7 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
   const isChildResizing = !!isResizing && isChildFocused;
   // Make this component a drop target
   const [{ isExactlyOver }, drop] = useDrop({
-    accept: Object.values(WidgetFactory.getWidgetTypes()),
+    accept: Object.values(WidgetTypes),
     options: {
       arePropsEqual: () => {
         return true;
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index f42fbea4e1..04023fd9ec 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -275,6 +275,7 @@ function* updateDynamicTriggers(
   propertyName: string,
   propertyValue: string,
 ) {
+  // TODO WIDGETFACTORY
   const triggerProperties = WidgetFactory.getWidgetTriggerPropertiesMap(
     widget.type,
   );
diff --git a/app/client/src/utils/DerivedPropertiesFactory.ts b/app/client/src/utils/DerivedPropertiesFactory.ts
index c513e578b2..4a599bdaf3 100644
--- a/app/client/src/utils/DerivedPropertiesFactory.ts
+++ b/app/client/src/utils/DerivedPropertiesFactory.ts
@@ -6,6 +6,7 @@ export class DerivedPropFactory {
     widgetType: WidgetType,
     widgetName: string,
   ): any {
+    // TODO WIDGETFACTORY
     const derivedPropertyMap = WidgetFactory.getWidgetDerivedPropertiesMap(
       widgetType,
     );
diff --git a/app/client/src/utils/ValidationFactory.ts b/app/client/src/utils/ValidationFactory.ts
index ab601f4533..522ac62c52 100644
--- a/app/client/src/utils/ValidationFactory.ts
+++ b/app/client/src/utils/ValidationFactory.ts
@@ -36,6 +36,7 @@ class ValidationFactory {
     //TODO: Satbir: Figure out a way to declare the right type.
     props?: WidgetProps,
   ): ValidationResponse {
+    // TODO WIDGETFACTORY
     const propertyValidationTypes = WidgetFactory.getWidgetPropertyValidationMap(
       widgetType,
     );

From 09a6d34ae48b2e6deb61feb917e6e6d24b10378d Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Wed, 15 Apr 2020 16:52:45 +0530
Subject: [PATCH 09/31] update yarn.lock

---
 app/client/yarn.lock | 47 ++++++++++++++++++++++++++++----------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 4cf245a52a..db1eb08f71 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -5476,9 +5476,10 @@ ejs@^2.7.4:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
 
-ejs@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.0.1.tgz#30c8f6ee9948502cc32e85c37a3f8b39b5a614a5"
+ejs@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.0.2.tgz#745b01cdcfe38c1c6a2da3bbb2d9957060a31226"
+  integrity sha512-IncmUpn1yN84hy2shb0POJ80FWrfGNY0cxO9f4v+/sG7qcBvAtVWUA1IdzY/8EYUmOVhoKJVdJjNd3AZcnxOjA==
 
 electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.341:
   version "1.3.345"
@@ -6831,7 +6832,7 @@ gud@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
 
-gzip-size@5.1.1:
+gzip-size@5.1.1, gzip-size@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
   dependencies:
@@ -9790,6 +9791,14 @@ open@^7.0.0:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+open@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48"
+  integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 opencollective-postinstall@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
@@ -12816,21 +12825,23 @@ source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
 
-source-map-explorer@^2.1.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.2.2.tgz#8c5f6e7518354337ad6fd4c4f69613c101f9d3a9"
+source-map-explorer@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/source-map-explorer/-/source-map-explorer-2.4.2.tgz#fb23f86c3112eacde5683f24efaf4ddc9f677985"
+  integrity sha512-3ECQLffCFV8QgrTqcmddLkWL4/aQs6ljYfgWCLselo5QtizOfOeUCKnS4rFn7MIrdeZLM6TZrseOtsrWZhWKoQ==
   dependencies:
     btoa "^1.2.1"
     chalk "^3.0.0"
     convert-source-map "^1.7.0"
-    ejs "^3.0.1"
+    ejs "^3.0.2"
     escape-html "^1.0.3"
     glob "^7.1.6"
+    gzip-size "^5.1.1"
     lodash "^4.17.15"
-    open "^7.0.0"
+    open "^7.0.3"
     source-map "^0.7.3"
     temp "^0.9.1"
-    yargs "^15.1.0"
+    yargs "^15.3.1"
 
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
@@ -14648,9 +14659,10 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^16.1.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1"
+yargs-parser@^18.1.1:
+  version "18.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.2.tgz#2f482bea2136dbde0861683abea7756d30b504f1"
+  integrity sha512-hlIPNR3IzC1YuL1c2UwwDKpXlNFBqD1Fswwh1khz5+d8Cq/8yc/Mn0i+rQXduu8hcrFKvO7Eryk+09NecTQAAQ==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
@@ -14701,9 +14713,10 @@ yargs@13.3.0, yargs@^13.2.2, yargs@^13.3.0:
     y18n "^4.0.0"
     yargs-parser "^13.1.1"
 
-yargs@^15.1.0:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.1.0.tgz#e111381f5830e863a89550bd4b136bb6a5f37219"
+yargs@^15.3.1:
+  version "15.3.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b"
+  integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==
   dependencies:
     cliui "^6.0.0"
     decamelize "^1.2.0"
@@ -14715,7 +14728,7 @@ yargs@^15.1.0:
     string-width "^4.2.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^16.1.0"
+    yargs-parser "^18.1.1"
 
 yargs@^7.0.0:
   version "7.1.0"

From 739ba35dc1ab02f5ff17bf284dedfa0a6085d97f Mon Sep 17 00:00:00 2001
From: Nikhil Nandagopal <nikhil@appsmith.com>
Date: Wed, 15 Apr 2020 11:42:11 +0000
Subject: [PATCH 10/31] Feature/widgets

---
 app/client/package.json                       |   1 +
 app/client/src/actions/pageActions.tsx        |   1 +
 .../src/assets/icons/control/decrease.svg     |   3 +
 .../src/assets/icons/control/draggable.svg    |   4 +
 .../src/assets/icons/control/increase.svg     |   3 +
 .../assets/icons/control/pick-my-location.svg |   1 +
 app/client/src/assets/icons/widget/map.svg    |   3 +
 .../designSystems/appsmith/ChartComponent.tsx | 184 ++++++++++++---
 .../appsmith/DraggableListComponent.tsx       |  91 ++++++++
 .../designSystems/appsmith/MapComponent.tsx   | 159 +++++++++++++
 .../appsmith/RichTextEditorComponent.tsx      |   2 +-
 .../designSystems/appsmith/StepComponent.tsx  |  95 ++++++++
 .../designSystems/appsmith/TabsComponent.tsx  |  80 +++++++
 .../blueprint/DatePickerComponent.tsx         |  62 ++---
 .../propertyControls/ChartDataControl.tsx     | 210 +++++++++++++++++
 .../propertyControls/DatePickerControl.tsx    | 194 ++++++++++++++--
 .../LocationSearchControl.tsx                 |  95 ++++++++
 .../propertyControls/StepControl.tsx          |  55 +++++
 .../propertyControls/StyledControls.tsx       |  12 +-
 .../propertyControls/TabControl.tsx           | 180 +++++++++++++++
 .../src/components/propertyControls/index.ts  |  16 +-
 app/client/src/constants/ActionConstants.tsx  |   2 +
 app/client/src/constants/DefaultTheme.tsx     |   3 +
 app/client/src/constants/WidgetConstants.tsx  |   4 +
 app/client/src/constants/WidgetValidation.ts  |   1 +
 app/client/src/constants/messages.ts          |   3 +
 app/client/src/icons/ControlIcons.tsx         |  25 +++
 app/client/src/icons/WidgetIcons.tsx          |  12 +
 .../PropertyPaneConfigResponse.tsx            | 211 ++++++++++--------
 .../mockResponses/WidgetConfigResponse.tsx    | 120 +++++++---
 .../mockResponses/WidgetSidebarResponse.tsx   |  10 +
 .../entityReducers/widgetConfigReducer.tsx    |   8 +
 app/client/src/sagas/ModalSagas.ts            |   1 +
 app/client/src/sagas/WidgetOperationSagas.tsx |   2 -
 app/client/src/utils/Validators.ts            |  17 ++
 app/client/src/utils/WidgetPropsUtils.tsx     |   1 -
 app/client/src/utils/WidgetRegistry.tsx       |  30 +++
 app/client/src/widgets/BaseWidget.tsx         |   9 +
 app/client/src/widgets/ChartWidget.tsx        |  10 +-
 app/client/src/widgets/DatePickerWidget.tsx   |  54 +++--
 app/client/src/widgets/MapWidget.tsx          | 151 +++++++++++++
 .../src/widgets/RichTextEditorWidget.tsx      |  18 +-
 app/client/src/widgets/TabsWidget.tsx         | 196 ++++++++++++++++
 app/client/yarn.lock                          |  72 ++++--
 44 files changed, 2145 insertions(+), 266 deletions(-)
 create mode 100644 app/client/src/assets/icons/control/decrease.svg
 create mode 100644 app/client/src/assets/icons/control/draggable.svg
 create mode 100644 app/client/src/assets/icons/control/increase.svg
 create mode 100644 app/client/src/assets/icons/control/pick-my-location.svg
 create mode 100755 app/client/src/assets/icons/widget/map.svg
 create mode 100644 app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
 create mode 100644 app/client/src/components/designSystems/appsmith/MapComponent.tsx
 create mode 100644 app/client/src/components/designSystems/appsmith/StepComponent.tsx
 create mode 100644 app/client/src/components/designSystems/appsmith/TabsComponent.tsx
 create mode 100644 app/client/src/components/propertyControls/ChartDataControl.tsx
 create mode 100644 app/client/src/components/propertyControls/LocationSearchControl.tsx
 create mode 100644 app/client/src/components/propertyControls/StepControl.tsx
 create mode 100644 app/client/src/components/propertyControls/TabControl.tsx
 create mode 100644 app/client/src/widgets/MapWidget.tsx
 create mode 100644 app/client/src/widgets/TabsWidget.tsx

diff --git a/app/client/package.json b/app/client/package.json
index f183c7a20c..66352f93f3 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -73,6 +73,7 @@
     "react-dnd-html5-backend": "^9.3.4",
     "react-dnd-touch-backend": "^9.4.0",
     "react-dom": "^16.7.0",
+    "react-google-maps": "^9.4.5",
     "react-helmet": "^5.2.1",
     "react-infinite-scroller": "^1.2.4",
     "react-json-view": "^1.19.1",
diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx
index 1310b45c07..ac3fa64f50 100644
--- a/app/client/src/actions/pageActions.tsx
+++ b/app/client/src/actions/pageActions.tsx
@@ -101,6 +101,7 @@ export type WidgetAddChild = {
   parentRowSpace: number;
   parentColumnSpace: number;
   newWidgetId: string;
+  tabId: string;
   props?: Record<string, any>;
 };
 
diff --git a/app/client/src/assets/icons/control/decrease.svg b/app/client/src/assets/icons/control/decrease.svg
new file mode 100644
index 0000000000..f8ffdccb6e
--- /dev/null
+++ b/app/client/src/assets/icons/control/decrease.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 2H0.75C0.551088 2 0.360322 1.89464 0.21967 1.70711C0.0790178 1.51957 0 1.26522 0 1C0 0.734784 0.0790178 0.48043 0.21967 0.292893C0.360322 0.105357 0.551088 0 0.75 0H11.25C11.4489 0 11.6397 0.105357 11.7803 0.292893C11.921 0.48043 12 0.734784 12 1C12 1.26522 11.921 1.51957 11.7803 1.70711C11.6397 1.89464 11.4489 2 11.25 2Z" fill="#768896"/>
+</svg>
diff --git a/app/client/src/assets/icons/control/draggable.svg b/app/client/src/assets/icons/control/draggable.svg
new file mode 100644
index 0000000000..4be5a7b6d6
--- /dev/null
+++ b/app/client/src/assets/icons/control/draggable.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2611 9H5.73889C5.33081 9 5 9.42533 5 9.95V10.05C5 10.5747 5.33081 11 5.73889 11H18.2611C18.6692 11 19 10.5747 19 10.05V9.95C19 9.42533 18.6692 9 18.2611 9Z" fill="#A3B3BF"/>
+<path d="M18.2611 13H5.73889C5.33081 13 5 13.4253 5 13.95V14.05C5 14.5747 5.33081 15 5.73889 15H18.2611C18.6692 15 19 14.5747 19 14.05V13.95C19 13.4253 18.6692 13 18.2611 13Z" fill="#A3B3BF"/>
+</svg>
diff --git a/app/client/src/assets/icons/control/increase.svg b/app/client/src/assets/icons/control/increase.svg
new file mode 100644
index 0000000000..e20986e3e8
--- /dev/null
+++ b/app/client/src/assets/icons/control/increase.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 5.25H6.75V0.75C6.75 0.551088 6.67098 0.360322 6.53033 0.21967C6.38968 0.0790178 6.19891 0 6 0C5.80109 0 5.61032 0.0790178 5.46967 0.21967C5.32902 0.360322 5.25 0.551088 5.25 0.75V5.25H0.75C0.551088 5.25 0.360322 5.32902 0.21967 5.46967C0.0790178 5.61032 0 5.80109 0 6C0 6.19891 0.0790178 6.38968 0.21967 6.53033C0.360322 6.67098 0.551088 6.75 0.75 6.75H5.25V11.25C5.25 11.4489 5.32902 11.6397 5.46967 11.7803C5.61032 11.921 5.80109 12 6 12C6.19891 12 6.38968 11.921 6.53033 11.7803C6.67098 11.6397 6.75 11.4489 6.75 11.25V6.75H11.25C11.4489 6.75 11.6397 6.67098 11.7803 6.53033C11.921 6.38968 12 6.19891 12 6C12 5.80109 11.921 5.61032 11.7803 5.46967C11.6397 5.32902 11.4489 5.25 11.25 5.25Z" fill="#768896"/>
+</svg>
diff --git a/app/client/src/assets/icons/control/pick-my-location.svg b/app/client/src/assets/icons/control/pick-my-location.svg
new file mode 100644
index 0000000000..e519a17dd3
--- /dev/null
+++ b/app/client/src/assets/icons/control/pick-my-location.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="crosshairs" class="svg-inline--fa fa-crosshairs fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M500 224h-30.364C455.724 130.325 381.675 56.276 288 42.364V12c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v30.364C130.325 56.276 56.276 130.325 42.364 224H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h30.364C56.276 381.675 130.325 455.724 224 469.636V500c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-30.364C381.675 455.724 455.724 381.675 469.636 288H500c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12zM288 404.634V364c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40.634C165.826 392.232 119.783 346.243 107.366 288H148c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-40.634C119.768 165.826 165.757 119.783 224 107.366V148c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40.634C346.174 119.768 392.217 165.757 404.634 224H364c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40.634C392.232 346.174 346.243 392.217 288 404.634zM288 256c0 17.673-14.327 32-32 32s-32-14.327-32-32c0-17.673 14.327-32 32-32s32 14.327 32 32z"></path></svg>
\ No newline at end of file
diff --git a/app/client/src/assets/icons/widget/map.svg b/app/client/src/assets/icons/widget/map.svg
new file mode 100755
index 0000000000..61c7b73472
--- /dev/null
+++ b/app/client/src/assets/icons/widget/map.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="29" viewBox="0 0 22 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9997 0.664001C15.4157 0.664001 18.9997 4.216 18.9997 8.59733C18.9997 14.548 10.9997 23.3307 10.9997 23.3307C10.9997 23.3307 2.99967 14.548 2.99967 8.59733C2.99967 4.216 6.58101 0.664001 10.9997 0.664001ZM10.9997 6C10.2924 6 9.61415 6.28095 9.11406 6.78105C8.61396 7.28115 8.33301 7.95942 8.33301 8.66667C8.33301 9.37391 8.61396 10.0522 9.11406 10.5523C9.61415 11.0524 10.2924 11.3333 10.9997 11.3333C11.7069 11.3333 12.3852 11.0524 12.8853 10.5523C13.3854 10.0522 13.6663 9.37391 13.6663 8.66667C13.6663 7.95942 13.3854 7.28115 12.8853 6.78105C12.3852 6.28095 11.7069 6 10.9997 6ZM21.6663 23.3333C21.6663 26.28 16.8903 28.6667 10.9997 28.6667C5.10901 28.6667 0.333008 26.28 0.333008 23.3333C0.333008 21.6147 1.95967 20.0867 4.48367 19.1107L5.32767 20.316C3.88767 20.92 2.99967 21.7493 2.99967 22.6667C2.99967 24.5067 6.58101 26 10.9997 26C15.4183 26 18.9997 24.5067 18.9997 22.6667C18.9997 21.7493 18.1103 20.92 16.6717 20.316L17.5157 19.1107C20.041 20.0867 21.6663 21.6147 21.6663 23.3333Z" fill="white"/>
+</svg>
diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index db0bb4c45a..c476318a62 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ChartType, ChartData } from "widgets/ChartWidget";
+import { ChartType, ChartData, ChartDataPoint } from "widgets/ChartWidget";
 import styled from "styled-components";
 import { invisible } from "constants/DefaultTheme";
 import _ from "lodash";
@@ -18,6 +18,7 @@ export interface ChartComponentProps {
   chartName: string;
   widgetId: string;
   isVisible?: boolean;
+  allowHorizontalScroll: boolean;
 }
 
 const CanvasContainer = styled.div<ChartComponentProps>`
@@ -29,29 +30,49 @@ const CanvasContainer = styled.div<ChartComponentProps>`
   box-shadow: 0 1px 1px 0 rgba(60,75,100,.14),0 2px 1px -1px rgba(60,75,100,.12),0 1px 3px 0 rgba(60,75,100,.2);
   position: relative;
   ${props => (!props.isVisible ? invisible : "")};
+  padding: 10px 0 0 0;
 }`;
 
 class ChartComponent extends React.Component<ChartComponentProps> {
   chartInstance = new FusionCharts();
-  getChartType = (chartType: ChartType) => {
+  getChartType = () => {
+    const { chartType, allowHorizontalScroll, chartData } = this.props;
+    const isMSChart = chartData.length > 1;
     switch (chartType) {
-      case "LINE_CHART":
-        return "line";
-      case "BAR_CHART":
-        return "bar2d";
       case "PIE_CHART":
         return "pie2d";
+      case "LINE_CHART":
+        return allowHorizontalScroll
+          ? "scrollline2d"
+          : isMSChart
+          ? "msline"
+          : "line";
+      case "BAR_CHART":
+        return allowHorizontalScroll
+          ? "scrollBar2D"
+          : isMSChart
+          ? "msbar2d"
+          : "bar2d";
       case "COLUMN_CHART":
-        return "column2d";
+        return allowHorizontalScroll
+          ? "scrollColumn2D"
+          : isMSChart
+          ? "mscolumn2d"
+          : "column2d";
       case "AREA_CHART":
-        return "area2d";
+        return allowHorizontalScroll
+          ? "scrollarea2d"
+          : isMSChart
+          ? "msarea"
+          : "area2d";
       default:
-        return "column2d";
+        return allowHorizontalScroll ? "scrollColumn2D" : "mscolumn2d";
     }
   };
 
   getChartData = (chartData: ChartData[]) => {
-    return chartData.map(item => {
+    const data: ChartDataPoint[] = chartData[0].data;
+    return data.map(item => {
       return {
         label: item.x,
         value: item.y,
@@ -59,26 +80,123 @@ class ChartComponent extends React.Component<ChartComponentProps> {
     });
   };
 
+  getChartCategoriesMutliSeries = (chartData: ChartData[]) => {
+    const categories: string[] = [];
+    for (let index = 0; index < chartData.length; index++) {
+      const data: ChartDataPoint[] = chartData[index].data;
+      for (let dataIndex = 0; dataIndex < data.length; dataIndex++) {
+        const category = data[dataIndex].x;
+        if (!categories.includes(category)) {
+          categories.push(category);
+        }
+      }
+    }
+    return categories;
+  };
+
+  getChartCategories = (chartData: ChartData[]) => {
+    const categories: string[] = this.getChartCategoriesMutliSeries(chartData);
+    return categories.map(item => {
+      return {
+        label: item,
+      };
+    });
+  };
+
+  getSeriesChartData = (data: ChartDataPoint[], categories: string[]) => {
+    const dataMap: { [key: string]: string } = {};
+    for (let index = 0; index < data.length; index++) {
+      const item: ChartDataPoint = data[index];
+      dataMap[item.x] = item.y;
+    }
+    return categories.map((category: string) => {
+      return {
+        value: dataMap[category] ? dataMap[category] : null,
+      };
+    });
+  };
+
+  getChartDataset = (chartData: ChartData[]) => {
+    const categories: string[] = this.getChartCategoriesMutliSeries(chartData);
+    return chartData.map((item: ChartData) => {
+      const seriesChartData: object[] = this.getSeriesChartData(
+        item.data,
+        categories,
+      );
+      return {
+        seriesName: item.seriesName,
+        data: seriesChartData,
+      };
+    });
+  };
+
+  getChartConfig = () => {
+    return {
+      caption: this.props.chartName,
+      xAxisName: this.props.xAxisName,
+      yAxisName: this.props.yAxisName,
+      theme: "fusion",
+      captionAlignment: "left",
+      captionHorizontalPadding: 10,
+      alignCaptionWithCanvas: 0,
+    };
+  };
+
+  getChartDataSource = () => {
+    if (
+      this.props.chartData.length === 1 ||
+      this.props.chartType === "PIE_CHART"
+    ) {
+      return {
+        chart: this.getChartConfig(),
+        data: this.getChartData(this.props.chartData),
+      };
+    } else {
+      return {
+        chart: this.getChartConfig(),
+        categories: [
+          {
+            category: this.getChartCategories(this.props.chartData),
+          },
+        ],
+        dataset: this.getChartDataset(this.props.chartData),
+      };
+    }
+  };
+
+  getScrollChartDataSource = () => {
+    const chartConfig = this.getChartConfig();
+    return {
+      chart: {
+        ...chartConfig,
+        scrollheight: "10",
+        showvalues: "1",
+        numVisiblePlot: "5",
+        flatScrollBars: "1",
+      },
+      categories: [
+        {
+          category: this.getChartCategories(this.props.chartData),
+        },
+      ],
+      dataset: this.getChartDataset(this.props.chartData),
+    };
+  };
+
   createGraph = () => {
+    const dataSource =
+      this.props.allowHorizontalScroll && this.props.chartType !== "PIE_CHART"
+        ? this.getScrollChartDataSource()
+        : this.getChartDataSource();
     const chartConfig = {
-      type: this.getChartType(this.props.chartType),
+      type: this.getChartType(),
       renderAt: this.props.widgetId + "chart-container",
       width: "100%",
       height: "100%",
       dataFormat: "json",
-      dataSource: {
-        chart: {
-          caption: this.props.chartName,
-          xAxisName: this.props.xAxisName,
-          yAxisName: this.props.yAxisName,
-          theme: "fusion",
-          captionAlignment: "left",
-          captionHorizontalPadding: 10,
-          alignCaptionWithCanvas: 0,
-        },
-        data: this.getChartData(this.props.chartData),
-      },
+      dataSource: dataSource,
     };
+    console.log("chartConfig", chartConfig);
     this.chartInstance = new FusionCharts(chartConfig);
   };
 
@@ -91,19 +209,15 @@ class ChartComponent extends React.Component<ChartComponentProps> {
 
   componentDidUpdate(prevProps: ChartComponentProps) {
     if (!_.isEqual(prevProps, this.props)) {
-      if (prevProps.chartType !== this.props.chartType) {
-        const chartType = this.getChartType(this.props.chartType);
-        this.chartInstance.chartType(chartType);
+      const chartType = this.getChartType();
+      this.chartInstance.chartType(chartType);
+      if (
+        this.props.allowHorizontalScroll &&
+        this.props.chartType !== "PIE_CHART"
+      ) {
+        this.chartInstance.setChartData(this.getScrollChartDataSource());
       } else {
-        this.chartInstance.setChartData({
-          chart: {
-            caption: this.props.chartName,
-            xAxisName: this.props.xAxisName,
-            yAxisName: this.props.yAxisName,
-            theme: "fusion",
-          },
-          data: this.getChartData(this.props.chartData),
-        });
+        this.chartInstance.setChartData(this.getChartDataSource());
       }
     }
   }
diff --git a/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx b/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
new file mode 100644
index 0000000000..2a3036bcc5
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
@@ -0,0 +1,91 @@
+import React from "react";
+import { ControlWrapper } from "../../propertyControls/StyledControls";
+import styled from "constants/DefaultTheme";
+import { Droppable, Draggable } from "react-beautiful-dnd";
+
+const StyledListWrapper = styled(ControlWrapper)`
+  display: flex;
+  justify-content: flex-start;
+  padding-right: 16px;
+  margin: 8px 0 0 0;
+`;
+
+type RenderComponentProps = {
+  index: number;
+  item: {
+    label: string;
+  };
+  deleteOption: (index: number) => void;
+  updateOption: (index: number, value: string) => void;
+};
+
+type DraggableComponentProps = {
+  index: number;
+  draggableId: string;
+  item: {
+    label: string;
+  };
+  deleteOption: (index: number) => void;
+  updateOption: (index: number, value: string) => void;
+  renderComponent: (props: RenderComponentProps) => JSX.Element;
+};
+
+export const DraggableComponent = (props: DraggableComponentProps) => {
+  const {
+    deleteOption,
+    updateOption,
+    item,
+    index,
+    draggableId,
+    renderComponent,
+  } = props;
+  return (
+    <Draggable draggableId={draggableId} key={draggableId} index={index}>
+      {({ innerRef, draggableProps, dragHandleProps }) => (
+        <StyledListWrapper
+          orientation={"HORIZONTAL"}
+          {...draggableProps}
+          {...dragHandleProps}
+          ref={innerRef as React.Ref<HTMLDivElement>}
+          style={{
+            ...draggableProps.style,
+            userSelect: "none",
+            position: "static",
+          }}
+        >
+          {renderComponent({ deleteOption, updateOption, item, index })}
+        </StyledListWrapper>
+      )}
+    </Draggable>
+  );
+};
+
+type DroppableComponentProps = {
+  items: object[];
+  renderComponent: (props: RenderComponentProps) => JSX.Element;
+  deleteOption: (index: number) => void;
+  updateOption: (index: number, value: string) => void;
+};
+
+export const DroppableComponent = (props: DroppableComponentProps) => {
+  const { items } = props;
+  return (
+    <Droppable droppableId="0">
+      {({ innerRef, droppableProps, placeholder }) => (
+        <div ref={innerRef as React.Ref<HTMLDivElement>} {...droppableProps}>
+          {items.map((item: { id: string } & any, index: number) => {
+            return (
+              <DraggableComponent
+                key={index}
+                index={index}
+                item={item}
+                draggableId={item.id}
+                {...props}
+              />
+            );
+          })}
+        </div>
+      )}
+    </Droppable>
+  );
+};
diff --git a/app/client/src/components/designSystems/appsmith/MapComponent.tsx b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
new file mode 100644
index 0000000000..34df7e16a5
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/MapComponent.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from "react-google-maps";
+import SearchBox from "react-google-maps/lib/components/places/SearchBox";
+import { MarkerProps } from "widgets/MapWidget";
+import { ControlIcons } from "icons/ControlIcons";
+import styled, { AnyStyledComponent } from "styled-components";
+
+interface MapComponentProps {
+  widgetId: string;
+  isDisabled?: boolean;
+  isVisible?: boolean;
+  enableSearch: boolean;
+  zoomLevel: number;
+  enablePickLocation: boolean;
+  allowZoom: boolean;
+  center: {
+    lat: number;
+    lng: number;
+  };
+  markers?: Array<MarkerProps>;
+  enableCreateMarker: boolean;
+  updateCenter: (lat: number, lng: number) => void;
+  saveMarker: (lat: number, lng: number) => void;
+  selectMarker: (lat: number, lng: number, title: string) => void;
+}
+
+const StyledInput = styled.input`
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  width: 240px;
+  height: 32px;
+  margin-top: 27px;
+  padding: 0 12px;
+  border-radius: 3px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  font-size: 14px;
+  outline: none;
+  text-overflow: ellipses;
+`;
+type PickMyLocationProps = {
+  allowZoom: boolean;
+};
+
+const PickMyLocationWrapper = styled.div<PickMyLocationProps>`
+  position: absolute;
+  bottom: ${props => (props.allowZoom ? 110 : 20)}px;
+  right: -95px;
+  width: 140px;
+`;
+
+const StyledPickMyLocationIcon = styled(
+  ControlIcons.PICK_MY_LOCATION_CONTROL as AnyStyledComponent,
+)`
+  position: relative;
+  cursor: pointer;
+`;
+
+const MyMapComponent = withScriptjs(
+  withGoogleMap((props: any) => (
+    <GoogleMap
+      options={{
+        zoomControl: props.allowZoom,
+        fullscreenControl: false,
+        mapTypeControl: false,
+        scrollwheel: false,
+      }}
+      zoom={props.zoom}
+      center={props.center}
+      onClick={e => {
+        if (props.enableCreateMarker) {
+          props.saveMarker(e.latLng.lat(), e.latLng.lng());
+        }
+      }}
+    >
+      {props.enableSearch && (
+        <SearchBox
+          controlPosition={2}
+          onPlacesChanged={props.onPlacesChanged}
+          ref={props.onSearchBoxMounted}
+        >
+          <StyledInput type="text" placeholder="Enter location to search" />
+        </SearchBox>
+      )}
+      {props.markers.map((marker: any, index: number) => (
+        <Marker
+          key={index}
+          title={marker.title}
+          position={{ lat: marker.lat, lng: marker.lng }}
+          clickable
+          onClick={e => {
+            props.selectMarker(marker.lat, marker.lng, marker.title);
+          }}
+        />
+      ))}
+      {props.enablePickLocation && (
+        <PickMyLocationWrapper
+          onClick={props.getUserLocation}
+          title="Pick My Location"
+          allowZoom={props.allowZoom}
+        >
+          <StyledPickMyLocationIcon />
+        </PickMyLocationWrapper>
+      )}
+    </GoogleMap>
+  )),
+);
+
+class MapComponent extends React.Component<MapComponentProps> {
+  private searchBox = React.createRef<SearchBox>();
+
+  onSearchBoxMounted = (ref: any) => {
+    this.searchBox = ref;
+  };
+  onPlacesChanged = () => {
+    const node: any = this.searchBox;
+    if (node) {
+      const places: any = node.getPlaces();
+      const location = places[0].geometry.location;
+      const lat = location.lat();
+      const lng = location.lng();
+      this.props.updateCenter(lat, lng);
+    }
+  };
+
+  getUserLocation = () => {
+    if ("geolocation" in navigator) {
+      return navigator.geolocation.getCurrentPosition(data => {
+        const {
+          coords: { latitude: lat, longitude: lng },
+        } = data;
+        this.props.saveMarker(lat, lng);
+      });
+    }
+  };
+
+  render() {
+    const zoom = Math.floor(this.props.zoomLevel / 5);
+    return (
+      <MyMapComponent
+        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC2H_twoNbEKMm9Q0nYAh7715Dplg2asCI&v=3.exp&libraries=geometry,drawing,places"
+        loadingElement={<div style={{ height: `100%` }} />}
+        containerElement={<div style={{ height: `100%` }} />}
+        mapElement={<div style={{ height: `100%` }} />}
+        {...this.props}
+        zoom={zoom}
+        onPlacesChanged={this.onPlacesChanged}
+        onSearchBoxMounted={this.onSearchBoxMounted}
+        getUserLocation={this.getUserLocation}
+      />
+    );
+  }
+}
+
+export default MapComponent;
diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
index f4aa3ede2a..0eb86a0f75 100644
--- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
@@ -41,7 +41,7 @@ export const RichtextEditorComponent = (
             "insertdatetime media table paste code help",
           ],
           toolbar:
-            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+            "undo redo | formatselect | bold italic backcolor forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
         }}
         onEditorChange={(content: any) => props.onValueChange(content)}
       />
diff --git a/app/client/src/components/designSystems/appsmith/StepComponent.tsx b/app/client/src/components/designSystems/appsmith/StepComponent.tsx
new file mode 100644
index 0000000000..5c5b1237ba
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/StepComponent.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { ControlIcons } from "icons/ControlIcons";
+import { AnyStyledComponent } from "styled-components";
+import styled from "constants/DefaultTheme";
+
+const StyledIncreaseIcon = styled(
+  ControlIcons.INCREASE_CONTROL as AnyStyledComponent,
+)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  width: 40px;
+  height: 32px;
+  svg {
+    path {
+      fill: ${props => props.theme.colors.paneSectionLabel};
+    }
+  }
+`;
+
+const StyledDecreaseIcon = styled(
+  ControlIcons.DECREASE_CONTROL as AnyStyledComponent,
+)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  width: 40px;
+  height: 32px;
+  svg {
+    path {
+      fill: ${props => props.theme.colors.paneSectionLabel};
+    }
+  }
+`;
+
+const StepWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: #121518;
+  border-radius: 4px;
+  height: 32px;
+  line-height: 32px;
+`;
+
+const InputWrapper = styled.div`
+  width: calc(100% - 80px);
+  height: 32px;
+  line-height: 32px;
+  background: #23292e;
+  font-size: 14px;
+  color: ${props => props.theme.colors.textOnDarkBG};
+  text-align: center;
+  letter-spacing: 1.44px;
+`;
+
+interface StepComponentProps {
+  value: number;
+  min: number;
+  max: number;
+  steps: number;
+  displayFormat: (value: number) => string;
+  onChange: (value: number) => void;
+}
+
+export const StepComponent = (props: StepComponentProps) => {
+  function decrease() {
+    if (props.value < props.min) {
+      return;
+    }
+    const value = props.value - props.steps;
+    props.onChange(value);
+  }
+  function increase() {
+    if (props.value > props.max) {
+      return;
+    }
+    const value = props.value + props.steps;
+    props.onChange(value);
+  }
+  return (
+    <StepWrapper>
+      <StyledDecreaseIcon height={2} width={12} onClick={decrease} />
+      <InputWrapper>{props.displayFormat(props.value)}</InputWrapper>
+      <StyledIncreaseIcon height={12} width={12} onClick={increase} />
+    </StepWrapper>
+  );
+};
+
+export default StepComponent;
diff --git a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
new file mode 100644
index 0000000000..e37e235c85
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import styled from "styled-components";
+
+interface TabsComponentProps {
+  isVisible?: boolean;
+  tabs?: Array<{
+    id: string;
+    label: string;
+  }>;
+  selectedTabId?: string;
+  onTabChange: (tabId: string) => void;
+}
+
+const TabsContainer = styled.div`
+  && {
+    height: 32px;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+`;
+
+type TabProps = {
+  selected?: boolean;
+};
+
+const StyledTab = styled.div`
+  height: 32px;
+  border-bottom: 1px solid;
+  border-color: ${props => props.theme.colors.bodyBG};
+  width: 100%;
+`;
+
+const StyledText = styled.div<TabProps>`
+  white-space: nowrap;
+  background: ${props => props.theme.colors.builderBodyBG};
+  color: ${props => props.theme.colors.menuIconColorInactive};
+  font-size: ${props => props.theme.fontSizes[3]}px;
+  line-height: 32px;
+  height: 32px;
+  padding: 0 16px;
+  cursor: pointer;
+  box-shadow: ${props => (props.selected ? props.theme.shadows[2] : "")};
+  border-bottom: ${props => (props.selected ? "none" : "1px solid")};
+  border-color: ${props => props.theme.colors.bodyBG};
+  &:hover {
+    background: ${props =>
+      props.selected
+        ? props.theme.colors.textOnDarkBG
+        : props.theme.colors.hover};
+    box-shadow: ${props => (props.selected ? "" : props.theme.shadows[3])};
+  }
+`;
+
+class TabsComponent extends React.Component<TabsComponentProps> {
+  selectTab = (tab: { id: string; label: string }) => {
+    this.props.onTabChange(tab.id);
+  };
+
+  render() {
+    return (
+      <TabsContainer>
+        {this.props.tabs &&
+          this.props.tabs.map((tab, index) => (
+            <StyledText
+              onClick={this.selectTab.bind(this, tab)}
+              selected={this.props.selectedTabId === tab.id}
+              key={index}
+            >
+              {tab.label}
+            </StyledText>
+          ))}
+        <StyledTab></StyledTab>
+      </TabsContainer>
+    );
+  }
+}
+
+export default TabsComponent;
diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index 40d4f1ceaf..a788138587 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -8,6 +8,7 @@ import moment from "moment-timezone";
 import "../../../../node_modules/@blueprintjs/datetime/lib/css/blueprint-datetime.css";
 import { DatePickerType } from "widgets/DatePickerWidget";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
+import { TimePrecision } from "@blueprintjs/datetime";
 import { Colors } from "constants/Colors";
 
 const StyledControlGroup = styled(ControlGroup)`
@@ -45,19 +46,34 @@ const StyledControlGroup = styled(ControlGroup)`
   }
   &&& {
     input {
-      border: 1px solid #a1acb3;
-      border-radius: 4px;
+      border: 1px solid ${Colors.HIT_GRAY};
+      border-radius: ${props => props.theme.radii[1]}px;
       box-shadow: none;
-      color: #2e3d49;
-      font-size: 14px;
+      color: ${Colors.OXFORD_BLUE};
+      font-size: ${props => props.theme.fontSizes[3]}px;
     }
   }
 `;
 
 class DatePickerComponent extends React.Component<DatePickerComponentProps> {
   render() {
+    const now = moment();
+    const year = now.get("year");
+    const month = now.get("month");
+    const date = now.get("date");
+    const minDate = now.clone().set({ month, date: date - 1, year: year - 20 });
+    const maxDate = now.clone().set({ month, date: date + 1, year: year + 20 });
+    const selectedDate = new Date(
+      new Date(this.props.selectedDate || "").getTime() +
+        this.getOffset(new Date(this.props.selectedDate || "")),
+    );
     return (
-      <StyledControlGroup fill>
+      <StyledControlGroup
+        fill
+        onClick={(e: any) => {
+          e.stopPropagation();
+        }}
+      >
         {this.props.label && (
           <Label
             className={
@@ -77,18 +93,14 @@ class DatePickerComponent extends React.Component<DatePickerComponentProps> {
             placeholder={this.props.dateFormat}
             disabled={this.props.isDisabled}
             showActionsBar={true}
-            timePickerProps={
-              this.props.enableTimePicker
-                ? {
-                    useAmPm: true,
-                    value: this.props.selectedDate,
-                    showArrowButtons: true,
-                  }
-                : undefined
+            timePrecision={
+              this.props.enableTimePicker ? TimePrecision.MINUTE : undefined
             }
-            closeOnSelection={true}
+            closeOnSelection
             onChange={this.onDateSelected}
-            value={this.props.selectedDate}
+            value={selectedDate}
+            maxDate={maxDate.toDate()}
+            minDate={minDate.toDate()}
           />
         ) : (
           <DateRangeInput
@@ -106,30 +118,28 @@ class DatePickerComponent extends React.Component<DatePickerComponentProps> {
     );
   }
 
+  getOffset = (date: Date) => {
+    const timezone = this.props.timezone || moment.tz.guess();
+    return moment.tz.zone(timezone)!.utcOffset(date.getTime()) * 60 * 1000;
+  };
+
   formatDate = (date: Date): string => {
     let dateFormat = "DD/MM/YYYY";
     if (this.props.enableTimePicker) {
       dateFormat = "DD/MM/YYYY HH:mm";
     }
-    if (this.props.timezone) {
-      return moment(date)
-        .tz(this.props.timezone)
-        .format(dateFormat);
-    }
     return moment(date).format(dateFormat);
   };
 
   parseDate = (dateStr: string): Date => {
-    if (this.props.timezone) {
-      return moment(dateStr)
-        .tz(this.props.timezone)
-        .toDate();
-    }
     return moment(dateStr).toDate();
   };
 
   onDateSelected = (selectedDate: Date) => {
-    this.props.onDateSelected(selectedDate);
+    const dateValue = new Date(
+      selectedDate.getTime() - this.getOffset(selectedDate),
+    ).getTime();
+    this.props.onDateSelected(new Date(dateValue));
   };
 }
 
diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx
new file mode 100644
index 0000000000..dd37a89e73
--- /dev/null
+++ b/app/client/src/components/propertyControls/ChartDataControl.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import {
+  ControlWrapper,
+  StyledInputGroup,
+  StyledPropertyPaneButton,
+} from "./StyledControls";
+import styled from "constants/DefaultTheme";
+import { FormIcons } from "icons/FormIcons";
+import { AnyStyledComponent } from "styled-components";
+import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
+
+const StyledOptionControlWrapper = styled(ControlWrapper)`
+  display: flex;
+  justify-content: flex-start;
+  padding: 0;
+  width: 100%;
+`;
+
+const StyledOptionControlInputGroup = styled(StyledInputGroup)`
+  margin-right: 2px;
+  width: 100%;
+  margin-bottom: 0;
+  &&& {
+    input {
+      border: none;
+      color: ${props => props.theme.colors.textOnDarkBG};
+      background: ${props => props.theme.colors.paneInputBG};
+      &:focus {
+        border: none;
+        color: ${props => props.theme.colors.textOnDarkBG};
+        background: ${props => props.theme.colors.paneInputBG};
+      }
+    }
+  }
+`;
+
+const StyledDynamicInput = styled.div`
+  width: 100%;
+  &&& {
+    input {
+      border: none;
+      color: ${props => props.theme.colors.textOnDarkBG};
+      background: ${props => props.theme.colors.paneInputBG};
+      &:focus {
+        border: none;
+        color: ${props => props.theme.colors.textOnDarkBG};
+        background: ${props => props.theme.colors.paneInputBG};
+      }
+    }
+  }
+`;
+
+const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
+  padding: 0;
+  position: relative;
+  margin-left: 15px;
+  cursor: pointer;
+`;
+
+type RenderComponentProps = {
+  index: number;
+  item: {
+    seriesName: string;
+    data: Array<{
+      x: string;
+      y: string;
+    }>;
+  };
+  length: number;
+  deleteOption: Function;
+  updateOption: Function;
+};
+
+function DataControlComponent(props: RenderComponentProps) {
+  const { deleteOption, updateOption, item, index, length } = props;
+  return (
+    <StyledOptionControlWrapper orientation={"VERTICAL"}>
+      {length > 1 && (
+        <StyledOptionControlWrapper orientation={"HORIZONTAL"}>
+          <StyledOptionControlInputGroup
+            type="text"
+            placeholder="Series Name"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              updateOption(index, "seriesName", event.target.value);
+            }}
+            defaultValue={item.seriesName}
+          />
+          <StyledDeleteIcon
+            height={20}
+            width={20}
+            onClick={() => {
+              deleteOption(index);
+            }}
+          />
+        </StyledOptionControlWrapper>
+      )}
+      <StyledDynamicInput>
+        <DynamicAutocompleteInput
+          input={{
+            value: item.data,
+            onChange: (
+              event: React.ChangeEvent<HTMLTextAreaElement> | string,
+            ) => {
+              let value = event;
+              if (typeof event !== "string") {
+                value = event.target.value;
+              }
+              updateOption(index, "data", value);
+            },
+          }}
+          meta={{
+            error: "",
+            touched: true,
+          }}
+          theme={"DARK"}
+          singleLine={false}
+          placeholder=""
+        />
+      </StyledDynamicInput>
+    </StyledOptionControlWrapper>
+  );
+}
+
+class ChartDataControl extends BaseControl<ControlProps> {
+  render() {
+    const chartData: Array<{
+      seriesName: string;
+      data: Array<{
+        x: string;
+        y: string;
+      }>;
+    }> = this.props.propertyValue || [];
+    const dataLength = chartData.length;
+    return (
+      <React.Fragment>
+        {chartData.map((data, index) => {
+          return (
+            <DataControlComponent
+              key={index}
+              index={index}
+              item={data}
+              length={dataLength}
+              deleteOption={this.deleteOption}
+              updateOption={this.updateOption}
+            />
+          );
+        })}
+        <StyledPropertyPaneButton
+          text="Add Data"
+          icon="plus"
+          color="#FFFFFF"
+          minimal
+          onClick={this.addOption}
+        />
+      </React.Fragment>
+    );
+  }
+
+  deleteOption = (index: number) => {
+    const chartData: object[] = this.props.propertyValue.slice();
+    chartData.splice(index, 1);
+    this.updateProperty(this.props.propertyName, chartData);
+  };
+
+  updateOption = (
+    index: number,
+    propertyName: string,
+    updatedValue: string,
+  ) => {
+    const chartData: Array<{
+      seriesName: string;
+      data: Array<{
+        x: string;
+        y: string;
+      }>;
+    }> = this.props.propertyValue;
+    this.updateProperty(
+      this.props.propertyName,
+      chartData.map((item, i) => {
+        if (index === i) {
+          if (propertyName === "seriesName") {
+            item.seriesName = updatedValue;
+          } else {
+            item.data = JSON.parse(updatedValue);
+          }
+        }
+        return item;
+      }),
+    );
+  };
+
+  addOption = () => {
+    const chartData: Array<{
+      seriesName: string;
+      data: Array<{
+        x: string;
+        y: string;
+      }>;
+    }> = this.props.propertyValue ? this.props.propertyValue.slice() : [];
+    chartData.push({ seriesName: "", data: [{ x: "", y: "" }] });
+    this.updateProperty(this.props.propertyName, chartData);
+  };
+
+  static getControlType() {
+    return "CHART_DATA";
+  }
+}
+
+export default ChartDataControl;
diff --git a/app/client/src/components/propertyControls/DatePickerControl.tsx b/app/client/src/components/propertyControls/DatePickerControl.tsx
index 5f350be5d1..b8a62d40ab 100644
--- a/app/client/src/components/propertyControls/DatePickerControl.tsx
+++ b/app/client/src/components/propertyControls/DatePickerControl.tsx
@@ -1,37 +1,184 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
-import { StyledDatePicker } from "./StyledControls";
+import {
+  StyledDatePicker,
+  StyledTimeZonePicker,
+  StyledSwitch,
+} from "./StyledControls";
 import moment from "moment-timezone";
+import "../../../node_modules/@blueprintjs/timezone/lib/css/blueprint-timezone.css";
+import styled from "styled-components";
+import { TIMEZONE, ENABLE_TIME } from "constants/messages";
+import { TimePrecision } from "@blueprintjs/datetime";
+
+const DatePickerControlWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  &&& {
+    input {
+      background: ${props => props.theme.colors.paneTextBG};
+      color: ${props => props.theme.colors.textOnDarkBG};
+      font-size: ${props => props.theme.fontSizes[3]}px;
+      box-shadow: none;
+    }
+  }
+`;
+
+const LabelWrapper = styled.div`
+  color: ${props => props.theme.colors.paneText};
+  margin-bottom: 4px;
+  font-size: ${props => props.theme.fontSizes[3]}px;
+  margin-top: 10px;
+`;
+
+type DatePickerContorlState = {
+  date: Date;
+  dateValue: number;
+  isTimeEnabled: boolean;
+  timezone: string;
+};
+
+class DatePickerControl extends BaseControl<
+  DatePickerControlProps,
+  DatePickerContorlState
+> {
+  constructor(props: DatePickerControlProps) {
+    super(props);
+    const timezone =
+      this.props.propertyValue && this.props.propertyValue.timezone
+        ? this.props.propertyValue.timezone
+        : moment.tz.guess();
+    const isTimeEnabled =
+      this.props.propertyValue && this.props.propertyValue.isTimeEnabled
+        ? this.props.propertyValue.isTimeEnabled
+        : false;
+    const dateValue =
+      this.props.propertyValue && this.props.propertyValue.dateValue
+        ? this.props.propertyValue.dateValue
+        : new Date().getTime();
+    const offset = this.getOffset(timezone, dateValue);
+    const date = new Date(dateValue + offset);
+    this.state = {
+      date,
+      timezone,
+      dateValue,
+      isTimeEnabled,
+    };
+  }
+
+  componentDidMount() {
+    const timezone =
+      this.props.propertyValue && this.props.propertyValue.timezone
+        ? this.props.propertyValue.timezone
+        : moment.tz.guess();
+    const isTimeEnabled =
+      this.props.propertyValue && this.props.propertyValue.isTimeEnabled
+        ? this.props.propertyValue.isTimeEnabled
+        : false;
+    const dateValue =
+      this.props.propertyValue && this.props.propertyValue.dateValue
+        ? this.props.propertyValue.dateValue
+        : new Date().getTime();
+    const offset = this.getOffset(timezone, dateValue);
+    const date = new Date(dateValue + offset);
+    this.setState({
+      date,
+      timezone,
+      dateValue,
+      isTimeEnabled,
+    });
+  }
+
+  getOffset = (timezone: string, timeStamp: number) => {
+    return moment.tz.zone(timezone)!.utcOffset(timeStamp) * 60 * 1000;
+  };
 
-class DatePickerControl extends BaseControl<DatePickerControlProps> {
   render() {
+    const now = moment();
+    const year = now.get("year");
+    const date = now.get("date");
+    const month = now.get("month");
+    const minDate = now.clone().set({ month, date: date - 1, year: year - 20 });
+    const maxDate = now.clone().set({ month, date: date + 1, year: year + 20 });
+
     return (
-      <StyledDatePicker
-        formatDate={this.formatDate}
-        parseDate={this.parseDate}
-        placeholder={"DD/MM/YYYY"}
-        showActionsBar={true}
-        timePickerProps={{
-          useAmPm: true,
-          value: new Date(this.props.propertyValue),
-          showArrowButtons: true,
-        }}
-        onChange={this.onDateSelected}
-        value={new Date(this.props.propertyValue)}
-      />
+      <DatePickerControlWrapper>
+        <StyledDatePicker
+          formatDate={this.formatDate}
+          parseDate={this.parseDate}
+          placeholder="DD/MM/YYYY"
+          showActionsBar
+          timePrecision={
+            this.state.isTimeEnabled ? TimePrecision.MINUTE : undefined
+          }
+          closeOnSelection
+          onChange={this.onDateSelected}
+          maxDate={maxDate.toDate()}
+          minDate={minDate.toDate()}
+          value={this.state.date}
+        />
+        <LabelWrapper>{TIMEZONE}</LabelWrapper>
+        <StyledTimeZonePicker
+          onChange={this.onTimeZoneSelected}
+          valueDisplayFormat="composite"
+          showLocalTimezone
+          value={this.state.timezone || moment.tz.guess()}
+        />
+        <LabelWrapper>{ENABLE_TIME}</LabelWrapper>
+        <StyledSwitch
+          onChange={this.onToggle}
+          checked={this.state.isTimeEnabled}
+          large
+        />
+      </DatePickerControlWrapper>
     );
   }
 
-  formatDate = (date: Date): string => {
-    return moment(date).format("DD/MM/YYYY");
+  onToggle = () => {
+    const { isTimeEnabled } = this.state;
+    this.setState({ isTimeEnabled: !isTimeEnabled }, () => {
+      this.updatePropertyValue();
+    });
   };
 
-  parseDate = (dateStr: string): Date => {
-    return moment(dateStr).toDate();
+  onTimeZoneSelected = (timezone: string): void => {
+    const { dateValue } = this.state;
+    const offset = this.getOffset(timezone, dateValue);
+    const dateVisible = new Date(dateValue + offset);
+    this.setState({ timezone: timezone, date: dateVisible }, () => {
+      this.updatePropertyValue();
+    });
   };
 
   onDateSelected = (date: Date): void => {
-    this.updateProperty(this.props.propertyName, date);
+    const { timezone } = this.state;
+    const offset = this.getOffset(timezone, date.getTime());
+    const dateValue = new Date(date.getTime() - offset).getTime();
+    this.setState({ date: date, dateValue: dateValue }, () => {
+      this.updatePropertyValue();
+    });
+  };
+
+  updatePropertyValue = () => {
+    const { dateValue, isTimeEnabled, timezone } = this.state;
+    this.updateProperty(this.props.propertyName, {
+      timezone: timezone,
+      dateValue: dateValue,
+      isTimeEnabled: isTimeEnabled,
+    });
+  };
+
+  formatDate = (date: Date): string => {
+    let dateFormat = "DD/MM/YYYY";
+    if (this.state.isTimeEnabled) {
+      dateFormat = "DD/MM/YYYY HH:mm";
+    }
+    return moment(date).format(dateFormat);
+  };
+
+  parseDate = (dateStr: string): Date => {
+    const date = moment(dateStr).toDate();
+    return date;
   };
 
   static getControlType() {
@@ -41,8 +188,11 @@ class DatePickerControl extends BaseControl<DatePickerControlProps> {
 
 export interface DatePickerControlProps extends ControlProps {
   placeholderText: string;
-  propertyValue: Date;
-  enableTimePicker: boolean;
+  propertyValue: {
+    timezone: string;
+    dateValue: number;
+    isTimeEnabled: boolean;
+  };
 }
 
 export default DatePickerControl;
diff --git a/app/client/src/components/propertyControls/LocationSearchControl.tsx b/app/client/src/components/propertyControls/LocationSearchControl.tsx
new file mode 100644
index 0000000000..56a9b0da56
--- /dev/null
+++ b/app/client/src/components/propertyControls/LocationSearchControl.tsx
@@ -0,0 +1,95 @@
+import React, { MutableRefObject } from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import styled from "styled-components";
+import SearchBox from "react-google-maps/lib/components/places/SearchBox";
+import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";
+const { compose, withProps, lifecycle } = require("recompose");
+const { withScriptjs } = require("react-google-maps");
+
+const StyledInput = styled.input`
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  width: 100%;
+  height: 32px;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-size: 14px;
+  outline: none;
+  text-overflow: ellipses;
+  background: #272821;
+  color: ${props => props.theme.colors.textOnDarkBG};
+`;
+
+interface StandaloneSearchBoxProps {
+  onSearchBoxMounted: (ref: SearchBoxRef) => void;
+  onPlacesChanged: () => void;
+}
+
+type SearchBoxRef = MutableRefObject<StandaloneSearchBox | null>;
+
+const PlacesWithStandaloneSearchBox = compose(
+  withProps({
+    googleMapURL:
+      "https://maps.googleapis.com/maps/api/js?key=AIzaSyC2H_twoNbEKMm9Q0nYAh7715Dplg2asCI&v=3.exp&libraries=geometry,drawing,places",
+    loadingElement: <div style={{ height: `100%` }} />,
+    containerElement: <div style={{ height: `400px` }} />,
+  }),
+  lifecycle({
+    componentWillMount() {
+      let searchBox: SearchBoxRef = React.createRef<SearchBox>();
+      this.setState({
+        places: [],
+        onSearchBoxMounted: (ref: SearchBoxRef) => {
+          searchBox = ref;
+        },
+        onPlacesChanged: () => {
+          if (searchBox === null) return;
+          if (searchBox.current === null) return;
+          if (searchBox.current.getPlaces === null) return;
+          const places = searchBox.current.getPlaces();
+          this.setState({
+            places,
+          });
+          this.props.onLocationSelection(places);
+        },
+      });
+    },
+  }),
+  withScriptjs,
+)((props: any) => (
+  <div data-standalone-searchbox="">
+    <StandaloneSearchBox
+      ref={props.onSearchBoxMounted}
+      onPlacesChanged={props.onPlacesChanged}
+    >
+      <StyledInput type="text" placeholder="Enter location" />
+    </StandaloneSearchBox>
+  </div>
+));
+
+class LocationSearchControl extends BaseControl<ControlProps> {
+  onLocationSelection = (
+    places: Array<{
+      geometry: { location: { lat: () => number; lng: () => number } };
+    }>,
+  ) => {
+    const location = places[0].geometry.location;
+    const lat = location.lat();
+    const lng = location.lng();
+    const value = { lat, lng };
+    this.updateProperty(this.props.propertyName, value);
+  };
+  render() {
+    return (
+      <PlacesWithStandaloneSearchBox
+        onLocationSelection={this.onLocationSelection}
+      />
+    );
+  }
+
+  static getControlType() {
+    return "LOCATION_SEARCH";
+  }
+}
+
+export default LocationSearchControl;
diff --git a/app/client/src/components/propertyControls/StepControl.tsx b/app/client/src/components/propertyControls/StepControl.tsx
new file mode 100644
index 0000000000..78b92d99d3
--- /dev/null
+++ b/app/client/src/components/propertyControls/StepControl.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import StepComponent from "components/designSystems/appsmith/StepComponent";
+
+class StepControl extends BaseControl<StepControlProps> {
+  getStepTypeControls = () => {
+    const { stepType } = this.props;
+    if (stepType === "ZOOM_PERCENTAGE") {
+      return {
+        min: 0,
+        max: 100,
+        steps: 5,
+        displayFormat: (value: number): string => {
+          return `${value}%`;
+        },
+      };
+    }
+    return {
+      min: 0,
+      max: 100,
+      steps: 1,
+      displayFormat: (value: number): string => {
+        return `${value}`;
+      },
+    };
+  };
+
+  render() {
+    const { min, max, steps, displayFormat } = this.getStepTypeControls();
+    return (
+      <StepComponent
+        min={min}
+        max={max}
+        steps={steps}
+        value={this.props.propertyValue}
+        onChange={(value: number) => {
+          this.updateProperty(this.props.propertyName, value);
+        }}
+        displayFormat={displayFormat}
+      />
+    );
+  }
+
+  static getControlType() {
+    return "STEP";
+  }
+}
+
+export type StepType = "ZOOM_PERCENTAGE";
+
+export interface StepControlProps extends ControlProps {
+  stepType: StepType;
+}
+
+export default StepControl;
diff --git a/app/client/src/components/propertyControls/StyledControls.tsx b/app/client/src/components/propertyControls/StyledControls.tsx
index cc97431494..92c30505dc 100644
--- a/app/client/src/components/propertyControls/StyledControls.tsx
+++ b/app/client/src/components/propertyControls/StyledControls.tsx
@@ -225,6 +225,7 @@ export const StyledSwitch = styled(Switch)`
 `;
 
 export const StyledDynamicInput = styled.div`
+  width: 100%;
   &&& {
     input {
       border: none;
@@ -248,14 +249,11 @@ export const StyledInputGroup = styled(InputGroup)`
 `;
 
 export const StyledDatePicker = styled(DateInput)`
-  & {
-    input {
-      placeholderText: ${props => props.placeholder};
-      color: ${props => props.theme.colors.textOnDarkBG};
-      background: ${props => props.theme.colors.paneInputBG};
-    }
+  > input {
+    color: ${props => props.theme.colors.textOnDarkBG};
+    background: ${props => props.theme.colors.paneInputBG};
+    border: 1px solid green;
   }
-}
 `;
 
 export const StyledTimeZonePicker = styled(TimezonePicker)`
diff --git a/app/client/src/components/propertyControls/TabControl.tsx b/app/client/src/components/propertyControls/TabControl.tsx
new file mode 100644
index 0000000000..a221c72142
--- /dev/null
+++ b/app/client/src/components/propertyControls/TabControl.tsx
@@ -0,0 +1,180 @@
+import React from "react";
+import BaseControl, { ControlProps } from "./BaseControl";
+import { StyledInputGroup, StyledPropertyPaneButton } from "./StyledControls";
+import { ControlType } from "constants/PropertyControlConstants";
+import styled from "constants/DefaultTheme";
+import { FormIcons } from "icons/FormIcons";
+import { ControlIcons } from "icons/ControlIcons";
+import { AnyStyledComponent } from "styled-components";
+import { DragDropContext } from "react-beautiful-dnd";
+import { generateReactKey } from "utils/generators";
+import { DroppableComponent } from "../designSystems/appsmith/DraggableListComponent";
+
+const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
+  padding: 0;
+  position: relative;
+  margin-left: 15px;
+  cursor: pointer;
+`;
+
+const StyledDragIcon = styled(
+  ControlIcons.DRAGGABLE_CONTROL as AnyStyledComponent,
+)`
+  padding: 0;
+  position: relative;
+  margin-left: 15px;
+  cursor: move;
+  svg {
+    path {
+      fill: ${props => props.theme.colors.paneSectionLabel};
+    }
+  }
+`;
+
+const StyledPropertyPaneButtonWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  margin-top: 10px;
+`;
+
+const StyledOptionControlInputGroup = styled(StyledInputGroup)`
+  margin-right: 2px;
+  &&& {
+    input {
+      border: none;
+      color: ${props => props.theme.colors.textOnDarkBG};
+      background: ${props => props.theme.colors.paneInputBG};
+      &:focus {
+        border: none;
+        color: ${props => props.theme.colors.textOnDarkBG};
+        background: ${props => props.theme.colors.paneInputBG};
+      }
+    }
+  }
+`;
+
+type RenderComponentProps = {
+  index: number;
+  item: {
+    label: string;
+  };
+  deleteOption: (index: number) => void;
+  updateOption: (index: number, value: string) => void;
+};
+
+function TabControlComponent(props: RenderComponentProps) {
+  const { deleteOption, updateOption, item, index } = props;
+  return (
+    <React.Fragment>
+      <StyledOptionControlInputGroup
+        type="text"
+        placeholder="Tab Title"
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          updateOption(index, event.target.value);
+        }}
+        defaultValue={item.label}
+      />
+      <StyledDeleteIcon
+        height={20}
+        width={20}
+        onClick={() => {
+          deleteOption(index);
+        }}
+      />
+      <StyledDragIcon height={20} width={20} />
+    </React.Fragment>
+  );
+}
+
+class TabControl extends BaseControl<ControlProps> {
+  onDragEnd = (result: any) => {
+    const { destination, source } = result;
+    if (!destination) {
+      return;
+    }
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    ) {
+      return;
+    }
+    const tabs: string[] = this.props.propertyValue || [""];
+    const sourceTab = tabs[source.index];
+    const destinationTab = tabs[destination.index];
+    this.updateProperty(
+      this.props.propertyName,
+      tabs.map((tab, index) => {
+        if (index === source.index) {
+          return destinationTab;
+        } else if (index === destination.index) {
+          return sourceTab;
+        }
+        return tab;
+      }),
+    );
+  };
+
+  render() {
+    const tabs: Array<{
+      id: string;
+      label: string;
+    }> = this.props.propertyValue || [{ id: "" }];
+    return (
+      <DragDropContext onDragEnd={this.onDragEnd}>
+        <DroppableComponent
+          items={tabs}
+          renderComponent={TabControlComponent}
+          deleteOption={this.deleteOption}
+          updateOption={this.updateOption}
+        />
+        <StyledPropertyPaneButtonWrapper>
+          <StyledPropertyPaneButton
+            text="Add a Tab"
+            color="#FFFFFF"
+            minimal
+            onClick={this.addOption}
+          />
+        </StyledPropertyPaneButtonWrapper>
+      </DragDropContext>
+    );
+  }
+
+  deleteOption = (index: number) => {
+    const tabs: object[] = this.props.propertyValue.slice();
+    tabs.splice(index, 1);
+    this.updateProperty(this.props.propertyName, tabs);
+  };
+
+  updateOption = (index: number, updatedLabel: string) => {
+    const tabs: Array<{
+      id: string;
+      label: string;
+    }> = this.props.propertyValue;
+    this.updateProperty(
+      this.props.propertyName,
+      tabs.map((tab, tabIndex) => {
+        if (index === tabIndex) {
+          tab.label = updatedLabel;
+        }
+        return tab;
+      }),
+    );
+  };
+
+  addOption = () => {
+    const tabs: Array<{
+      id: string;
+      label: string;
+    }> = this.props.propertyValue ? this.props.propertyValue.slice() : [];
+    const newTabId = generateReactKey({ prefix: "tab" });
+    tabs.push({ id: newTabId, label: `Tab ${tabs.length + 1}` });
+    this.updateProperty(this.props.propertyName, tabs);
+  };
+
+  getControlType(): ControlType {
+    return "TABS_INPUT";
+  }
+}
+
+export default TabControl;
diff --git a/app/client/src/components/propertyControls/index.ts b/app/client/src/components/propertyControls/index.ts
index 99f713a67e..8fbd9ce7c5 100644
--- a/app/client/src/components/propertyControls/index.ts
+++ b/app/client/src/components/propertyControls/index.ts
@@ -18,9 +18,11 @@ import MultiSelectControl, {
 import DatePickerControl, {
   DatePickerControlProps,
 } from "components/propertyControls/DatePickerControl";
-import TimeZoneControl, {
-  TimeZoneControlProps,
-} from "components/propertyControls/TimezoneControl";
+import ChartDataControl from "components/propertyControls/ChartDataControl";
+import LocationSearchControl from "components/propertyControls/LocationSearchControl";
+import StepControl, {
+  StepControlProps,
+} from "components/propertyControls/StepControl";
 import ActionSelectorControl from "components/propertyControls/ActionSelectorControl";
 import ColumnActionSelectorControl from "components/propertyControls/ColumnActionSelectorControl";
 import MultiSwitchControl, {
@@ -35,10 +37,12 @@ export const PropertyControls = {
   CodeEditorControl,
   MultiSelectControl,
   DatePickerControl,
-  TimeZoneControl,
   ActionSelectorControl,
   ColumnActionSelectorControl,
   MultiSwitchControl,
+  ChartDataControl,
+  LocationSearchControl,
+  StepControl,
 };
 
 export type PropertyControlPropsType =
@@ -48,8 +52,8 @@ export type PropertyControlPropsType =
   | SwitchControlProps
   | MultiSelectControlProps
   | DatePickerControlProps
-  | TimeZoneControlProps
-  | MultiSwitchControlProps;
+  | MultiSwitchControlProps
+  | StepControlProps;
 
 export const getPropertyControlTypes = (): { [key: string]: string } => {
   const _types: { [key: string]: string } = {};
diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx
index f6c32a7011..01c191663a 100644
--- a/app/client/src/constants/ActionConstants.tsx
+++ b/app/client/src/constants/ActionConstants.tsx
@@ -33,6 +33,8 @@ export enum EventType {
   ON_DATE_SELECTED = "ON_DATE_SELECTED",
   ON_DATE_RANGE_SELECTED = "ON_DATE_RANGE_SELECTED",
   ON_OPTION_CHANGE = "ON_OPTION_CHANGE",
+  ON_MARKER_CLICK = "ON_MARKER_CLICK",
+  ON_CREATE_MARKER = "ON_CREATE_MARKER",
 }
 
 export type ActionType =
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index e553e49ceb..16aa384788 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -333,6 +333,7 @@ export const theme: Theme = {
     paneInputBG: Colors.SHARK,
     paneBG: Colors.OUTER_SPACE,
     paneText: Colors.GRAY_CHATEAU,
+    paneTextBG: Colors.DEEP_SPACE,
     paneTextUnderline: Colors.LIGHT_GREYISH_BLUE,
     paneSectionLabel: Colors.CADET_BLUE,
     navBG: Colors.SHARK,
@@ -414,6 +415,8 @@ export const theme: Theme = {
   shadows: [
     "0px 2px 4px rgba(67, 70, 74, 0.14)",
     `0px 2px 4px ${Colors.MYSTIC}`,
+    `inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
+    `inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 1px 0px ${Colors.ATHENS_GRAY}`,
   ],
   widgets: {
     tableWidget: {
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 5d8998e842..6f1ba6bb16 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -11,10 +11,12 @@ export type WidgetType =
   | "RADIO_GROUP_WIDGET"
   | "FILE_PICKER_WIDGET"
   | "INPUT_WIDGET"
+  | "TABS_WIDGET"
   | "CHART_WIDGET"
   | "MODAL_WIDGET"
   | "FORM_WIDGET"
   | "FORM_BUTTON_WIDGET"
+  | "MAP_WIDGET"
   | "CANVAS_WIDGET"
   | "ICON_WIDGET";
 
@@ -29,11 +31,13 @@ export const WidgetTypes: { [id: string]: WidgetType } = {
   DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
   CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
   RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
+  TABS_WIDGET: "TABS_WIDGET",
   MODAL_WIDGET: "MODAL_WIDGET",
   RICH_TEXT_EDITOR_WIDGET: "RICH_TEXT_EDITOR_WIDGET",
   CHART_WIDGET: "CHART_WIDGET",
   FORM_WIDGET: "FORM_WIDGET",
   FORM_BUTTON_WIDGET: "FORM_BUTTON_WIDGET",
+  MAP_WIDGET: "MAP_WIDGET",
   CANVAS_WIDGET: "CANVAS_WIDGET",
   ICON_WIDGET: "ICON_WIDGET",
 };
diff --git a/app/client/src/constants/WidgetValidation.ts b/app/client/src/constants/WidgetValidation.ts
index 0adbd61c76..cd2c5ab887 100644
--- a/app/client/src/constants/WidgetValidation.ts
+++ b/app/client/src/constants/WidgetValidation.ts
@@ -12,6 +12,7 @@ export const VALIDATION_TYPES = {
   OPTIONS_DATA: "OPTIONS_DATA",
   DATE: "DATE",
   CHART_DATA: "CHART_DATA",
+  MARKERS: "MARKERS",
   ACTION_SELECTOR: "ACTION_SELECTOR",
   ARRAY_ACTION_SELECTOR: "ARRAY_ACTION_SELECTOR",
 };
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
index 6e1af79c35..3fb9848a7d 100644
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@@ -129,3 +129,6 @@ export const INPUT_WIDGET_DEFAULT_VALIDATION_ERROR = "Invalid input";
 export const AUTOFIT_ALL_COLUMNS = "Autofit all columns";
 export const AUTOFIT_THIS_COLUMN = "Autofit this column";
 export const AUTOFIT_COLUMN = "Autofit column";
+
+export const TIMEZONE = "Timezone";
+export const ENABLE_TIME = "Enable Time";
diff --git a/app/client/src/icons/ControlIcons.tsx b/app/client/src/icons/ControlIcons.tsx
index 5a11fac542..149c9d22d7 100644
--- a/app/client/src/icons/ControlIcons.tsx
+++ b/app/client/src/icons/ControlIcons.tsx
@@ -7,7 +7,12 @@ import { ReactComponent as ViewIcon } from "assets/icons/control/view.svg";
 import { ReactComponent as MoreVerticalIcon } from "assets/icons/control/more-vertical.svg";
 import { ReactComponent as OverflowMenuIcon } from "assets/icons/menu/overflow-menu.svg";
 import { ReactComponent as JsToggleIcon } from "assets/icons/control/js-toggle.svg";
+import { ReactComponent as IncreaseIcon } from "assets/icons/control/increase.svg";
+import { ReactComponent as DecreaseIcon } from "assets/icons/control/decrease.svg";
+
+import { ReactComponent as DraggableIcon } from "assets/icons/control/draggable.svg";
 import { ReactComponent as CloseIcon } from "assets/icons/control/close.svg";
+import { ReactComponent as PickMyLocationIcon } from "assets/icons/control/pick-my-location.svg";
 /* eslint-disable react/display-name */
 
 export const ControlIcons: {
@@ -48,11 +53,31 @@ export const ControlIcons: {
       <JsToggleIcon />
     </IconWrapper>
   ),
+  INCREASE_CONTROL: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <IncreaseIcon />
+    </IconWrapper>
+  ),
+  DECREASE_CONTROL: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <DecreaseIcon />
+    </IconWrapper>
+  ),
+  DRAGGABLE_CONTROL: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <DraggableIcon />
+    </IconWrapper>
+  ),
   CLOSE_CONTROL: (props: IconProps) => (
     <IconWrapper {...props}>
       <CloseIcon />
     </IconWrapper>
   ),
+  PICK_MY_LOCATION_CONTROL: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <PickMyLocationIcon />
+    </IconWrapper>
+  ),
 };
 
 export type ControlIconName = keyof typeof ControlIcons;
diff --git a/app/client/src/icons/WidgetIcons.tsx b/app/client/src/icons/WidgetIcons.tsx
index a1196de4cc..21debddf0a 100644
--- a/app/client/src/icons/WidgetIcons.tsx
+++ b/app/client/src/icons/WidgetIcons.tsx
@@ -14,9 +14,11 @@ import { ReactComponent as SwitchIcon } from "assets/icons/widget/switch.svg";
 import { ReactComponent as TextIcon } from "assets/icons/widget/text.svg";
 import { ReactComponent as ImageIcon } from "assets/icons/widget/image.svg";
 import { ReactComponent as FilePickerIcon } from "assets/icons/widget/filepicker.svg";
+import { ReactComponent as TabsIcon } from "assets/icons/widget/tabs.svg";
 import { ReactComponent as RichTextEditorIcon } from "assets/icons/widget/rich-text.svg";
 import { ReactComponent as ChartIcon } from "assets/icons/widget/chart.svg";
 import { ReactComponent as FormIcon } from "assets/icons/widget/form.svg";
+import { ReactComponent as MapIcon } from "assets/icons/widget/map.svg";
 
 /* eslint-disable react/display-name */
 
@@ -98,6 +100,11 @@ export const WidgetIcons: {
       <FilePickerIcon />
     </IconWrapper>
   ),
+  TABS_WIDGET: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <TabsIcon />
+    </IconWrapper>
+  ),
   CHART_WIDGET: (props: IconProps) => (
     <IconWrapper {...props}>
       <ChartIcon />
@@ -108,6 +115,11 @@ export const WidgetIcons: {
       <FormIcon />
     </IconWrapper>
   ),
+  MAP_WIDGET: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <MapIcon />
+    </IconWrapper>
+  ),
 };
 
 export type WidgetIcon = typeof WidgetIcons[keyof typeof WidgetIcons];
diff --git a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
index 55e5d48cee..a95964b4c5 100644
--- a/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
+++ b/app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
@@ -318,6 +318,12 @@ const PropertyPaneConfigResponse = {
             errorMessage: "Must be a valid string",
             controlType: "INPUT_TEXT",
           },
+          {
+            id: "16.1.3",
+            propertyName: "shouldScrollContents",
+            label: "Scroll Contents",
+            controlType: "SWITCH",
+          },
         ],
       },
     ],
@@ -404,47 +410,6 @@ const PropertyPaneConfigResponse = {
         ],
       },
     ],
-    MODAL_WIDGET: [
-      {
-        sectionName: "General",
-        id: "18.1",
-        children: [
-          {
-            id: "18.1.1",
-            propertyName: "canOutsideClickClose",
-            label: "Quick Dismiss",
-            helpText: "Allows dismissing the modal when user taps outside",
-            validationType: "BOOLEAN",
-            errorMessage: "Must be a valid boolean value",
-            controlType: "SWITCH",
-          },
-          {
-            id: "18.1.2",
-            propertyName: "size",
-            label: "Modal Type",
-            controlType: "DROP_DOWN",
-            options: [
-              {
-                label: "Form Modal",
-                value: "MODAL_LARGE",
-              },
-              {
-                label: "Alert Modal",
-                value: "MODAL_SMALL",
-              },
-            ],
-          },
-          {
-            id: "18.1.3",
-            propertyName: "shouldScrollContents",
-            label: "Scroll Contents",
-            validationType: "BOOLEAN",
-            errorMessage: "Must be a valid boolean value",
-            controlType: "SWITCH",
-          },
-        ],
-      },
-    ],
     INPUT_WIDGET: [
       {
         id: "4.1",
@@ -758,63 +723,6 @@ const PropertyPaneConfigResponse = {
         ],
       },
     ],
-    MAP_WIDGET: [
-      {
-        sectionName: "General",
-        id: "19",
-        children: [
-          {
-            id: "19.1",
-            propertyName: "mapCenter",
-            label: "Initial location",
-            controlType: "LOCATION_SEARCH",
-          },
-          {
-            id: "19.2",
-            propertyName: "enableSearch",
-            label: "Enable search location",
-            controlType: "SWITCH",
-          },
-          {
-            id: "19.3",
-            propertyName: "zoomToLocation",
-            label: "Zoom to location",
-            controlType: "SWITCH",
-          },
-          {
-            id: "19.4",
-            propertyName: "defaultMarkers",
-            label: "Default markers",
-            controlType: "INPUT_TEXT",
-            inputType: "ARRAY",
-          },
-          {
-            id: "19.5",
-            propertyName: "location",
-            label: "Creat new marker",
-            controlType: "SWITCH",
-          },
-        ],
-      },
-      {
-        sectionName: "ZOOM SETTINGS",
-        id: "20",
-        children: [
-          {
-            id: "20.1",
-            propertyName: "zoomLevel",
-            label: "Zoom Level",
-            controlType: "PERCENTAGE_LEVEL",
-          },
-          {
-            id: "20.2",
-            propertyName: "allowZoom",
-            label: "Zoomable",
-            controlType: "SWITCH",
-          },
-        ],
-      },
-    ],
     BUTTON_WIDGET: [
       {
         id: "1.1",
@@ -1232,6 +1140,113 @@ const PropertyPaneConfigResponse = {
         ],
       },
     ],
+    MODAL_WIDGET: [
+      {
+        sectionName: "General",
+        id: "24.1",
+        children: [
+          {
+            id: "24.1.1",
+            propertyName: "canOutsideClickClose",
+            label: "Close on blur",
+            controlType: "SWITCH",
+          },
+          {
+            id: "24.1.3",
+            propertyName: "canEscapeKeyClose",
+            label: "Close on ESC",
+            controlType: "SWITCH",
+          },
+          {
+            id: "24.1.4",
+            propertyName: "size",
+            label: "Size",
+            controlType: "DROP_DOWN",
+            options: [
+              {
+                label: "Large",
+                value: "MODAL_LARGE",
+              },
+              {
+                label: "Small",
+                value: "MODAL_SMALL",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    MAP_WIDGET: [
+      {
+        sectionName: "General",
+        id: "25",
+        children: [
+          {
+            id: "25.1",
+            propertyName: "mapCenter",
+            label: "Initial location",
+            controlType: "LOCATION_SEARCH",
+          },
+          {
+            id: "25.2",
+            propertyName: "enableSearch",
+            label: "Enable search location",
+            controlType: "SWITCH",
+          },
+          {
+            id: "25.3",
+            propertyName: "enablePickLocation",
+            label: "Enable pick location",
+            controlType: "SWITCH",
+          },
+          {
+            id: "25.4",
+            propertyName: "defaultMarkers",
+            label: "Default markers",
+            controlType: "INPUT_TEXT",
+            inputType: "ARRAY",
+          },
+          {
+            id: "25.5",
+            propertyName: "enableCreateMarker",
+            label: "Create new marker",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        sectionName: "ZOOM SETTINGS",
+        id: "26",
+        children: [
+          {
+            id: "26.1",
+            propertyName: "zoomLevel",
+            label: "Zoom Level",
+            controlType: "STEP",
+            stepType: "ZOOM_PERCENTAGE",
+          },
+          {
+            id: "26.2",
+            propertyName: "allowZoom",
+            label: "Zoomable",
+            controlType: "SWITCH",
+          },
+        ],
+      },
+      {
+        id: "27",
+        sectionName: "Actions",
+        children: [
+          {
+            id: "27.1",
+            propertyName: "onMarkerClick",
+            label: "onMarkerClick",
+            controlType: "ACTION_SELECTOR",
+            isJSConvertible: true,
+          },
+        ],
+      },
+    ],
     ICON_WIDGET: [
       {
         id: "25.1",
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index a48e52a7da..d24dc596ae 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -21,12 +21,13 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       widgetName: "Text",
     },
     RICH_TEXT_EDITOR_WIDGET: {
-      text: "This is the initial <b>content</b> of the editor",
+      defaultText: "This is the initial <b>content</b> of the editor",
       rows: 5,
       columns: 8,
       isDisabled: false,
       isVisible: true,
       widgetName: "RichTextEditor",
+      isDefaultClickDisabled: true,
     },
     IMAGE_WIDGET: {
       defaultImage:
@@ -79,7 +80,6 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       },
     },
     DATE_PICKER_WIDGET: {
-      enableTimePicker: true,
       isDisabled: false,
       datePickerType: "DATE_PICKER",
       rows: 1,
@@ -87,6 +87,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       columns: 8,
       label: "Date",
       widgetName: "DatePicker",
+      defaultDate: {
+        dateValue: new Date().getTime(),
+        timezone: "",
+        isTimeEnabled: true,
+      },
     },
     TABLE_WIDGET: {
       rows: 7,
@@ -181,6 +186,45 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       widgetName: "FilePicker",
       isDefaultClickDisabled: true,
     },
+    TABS_WIDGET: {
+      rows: 7,
+      columns: 8,
+      shouldScrollContents: false,
+      widgetName: "Tabs",
+      tabs: [
+        { label: "Tab 1", id: "tab1" },
+        { label: "Tab 2", id: "tab2" },
+      ],
+      selectedTab: "Tab 1",
+      blueprint: {
+        view: [
+          {
+            type: "CANVAS_WIDGET",
+            position: { top: 0, left: 0 },
+            size: { rows: 6, cols: 16 },
+            props: {
+              containerStyle: "none",
+              canExtend: false,
+              detachFromLayout: true,
+              children: [],
+              tabId: "tab1",
+            },
+          },
+          {
+            type: "CANVAS_WIDGET",
+            position: { top: 0, left: 0 },
+            size: { rows: 6, cols: 16 },
+            props: {
+              containerStyle: "none",
+              canExtend: false,
+              detachFromLayout: true,
+              children: [],
+              tabId: "tab2",
+            },
+          },
+        ],
+      },
+    },
     MODAL_WIDGET: {
       rows: 456,
       columns: 456,
@@ -286,34 +330,40 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       widgetName: "Chart",
       chartType: "LINE_CHART",
       chartName: "Sales on working days",
+      allowHorizontalScroll: false,
       chartData: [
         {
-          x: "Mon",
-          y: 10000,
-        },
-        {
-          x: "Tue",
-          y: 12000,
-        },
-        {
-          x: "Wed",
-          y: 32000,
-        },
-        {
-          x: "Thu",
-          y: 28000,
-        },
-        {
-          x: "Fri",
-          y: 14000,
-        },
-        {
-          x: "Sat",
-          y: 19000,
-        },
-        {
-          x: "Sun",
-          y: 36000,
+          seriesName: "",
+          data: [
+            {
+              x: "Mon",
+              y: 10000,
+            },
+            {
+              x: "Tue",
+              y: 12000,
+            },
+            {
+              x: "Wed",
+              y: 32000,
+            },
+            {
+              x: "Thu",
+              y: 28000,
+            },
+            {
+              x: "Fri",
+              y: 14000,
+            },
+            {
+              x: "Sat",
+              y: 19000,
+            },
+            {
+              x: "Sun",
+              y: 36000,
+            },
+          ],
         },
       ],
       xAxisName: "Last Week",
@@ -382,6 +432,20 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
         ],
       },
     },
+    MAP_WIDGET: {
+      rows: 12,
+      columns: 8,
+      isDisabled: false,
+      isVisible: true,
+      widgetName: "Map",
+      enableSearch: true,
+      enableCreateMarker: true,
+      zoomLevel: 50,
+      enablePickLocation: true,
+      allowZoom: true,
+      mapCenter: { lat: -34.397, lng: 150.644 },
+      defaultMarkers: [{ lat: -34.397, lng: 150.644, title: "Test A" }],
+    },
   },
   configVersion: 1,
 };
diff --git a/app/client/src/mockResponses/WidgetSidebarResponse.tsx b/app/client/src/mockResponses/WidgetSidebarResponse.tsx
index 6bbfcf90b5..969e50a514 100644
--- a/app/client/src/mockResponses/WidgetSidebarResponse.tsx
+++ b/app/client/src/mockResponses/WidgetSidebarResponse.tsx
@@ -106,6 +106,11 @@ const WidgetSidebarResponse: {
       widgetCardName: "Chart",
       key: generateReactKey(),
     },
+    {
+      type: "MAP_WIDGET",
+      widgetCardName: "Map",
+      key: generateReactKey(),
+    },
   ],
   ["Layout widgets"]: [
     {
@@ -113,6 +118,11 @@ const WidgetSidebarResponse: {
       widgetCardName: "Container",
       key: generateReactKey(),
     },
+    {
+      type: "TABS_WIDGET",
+      widgetCardName: "Tabs",
+      key: generateReactKey(),
+    },
   ],
 };
 
diff --git a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
index 78906c7817..2bc13bf6a1 100644
--- a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
+++ b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
@@ -15,9 +15,14 @@ import { CheckboxWidgetProps } from "../../widgets/CheckboxWidget";
 import { RadioGroupWidgetProps } from "../../widgets/RadioGroupWidget";
 import { AlertWidgetProps } from "../../widgets/AlertWidget";
 import { FilePickerWidgetProps } from "../../widgets/FilepickerWidget";
+import {
+  TabsWidgetProps,
+  TabContainerWidgetProps,
+} from "../../widgets/TabsWidget";
 import { ChartWidgetProps } from "../../widgets/ChartWidget";
 import { FormWidgetProps } from "widgets/FormWidget";
 import { FormButtonWidgetProps } from "widgets/FormButtonWidget";
+import { MapWidgetProps } from "widgets/MapWidget";
 import { ModalWidgetProps } from "widgets/ModalWidget";
 import { IconWidgetProps } from "widgets/IconWidget";
 
@@ -56,10 +61,13 @@ export interface WidgetConfigReducerState {
     RADIO_GROUP_WIDGET: Partial<RadioGroupWidgetProps> & WidgetConfigProps;
     ALERT_WIDGET: Partial<AlertWidgetProps> & WidgetConfigProps;
     FILE_PICKER_WIDGET: Partial<FilePickerWidgetProps> & WidgetConfigProps;
+    TABS_WIDGET: Partial<TabsWidgetProps<TabContainerWidgetProps>> &
+      WidgetConfigProps;
     MODAL_WIDGET: Partial<ModalWidgetProps> & WidgetConfigProps;
     CHART_WIDGET: Partial<ChartWidgetProps> & WidgetConfigProps;
     FORM_WIDGET: Partial<FormWidgetProps> & WidgetConfigProps;
     FORM_BUTTON_WIDGET: Partial<FormButtonWidgetProps> & WidgetConfigProps;
+    MAP_WIDGET: Partial<MapWidgetProps> & WidgetConfigProps;
     CANVAS_WIDGET: Partial<ContainerWidgetProps<WidgetProps>> &
       WidgetConfigProps;
     ICON_WIDGET: Partial<IconWidgetProps> & WidgetConfigProps;
diff --git a/app/client/src/sagas/ModalSagas.ts b/app/client/src/sagas/ModalSagas.ts
index e9919195ea..8702ac0eca 100644
--- a/app/client/src/sagas/ModalSagas.ts
+++ b/app/client/src/sagas/ModalSagas.ts
@@ -44,6 +44,7 @@ export function* createModalSaga(action: ReduxAction<{ modalName: string }>) {
       topRow: 0,
       columns: 0,
       rows: 0,
+      tabId: "",
     };
     yield put({
       type: ReduxActionTypes.WIDGET_ADD_CHILD,
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index f42fbea4e1..5359af5e11 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -67,7 +67,6 @@ function* getChildWidgetProps(
   }
 
   const widgetProps = { ...defaultConfig, ...props, columns, rows, minHeight };
-
   const widget = generateWidgetProps(
     parent,
     type,
@@ -257,7 +256,6 @@ export function* resizeSaga(resizeAction: ReduxAction<WidgetResize>) {
 
     widget = { ...widget, leftColumn, rightColumn, topRow, bottomRow };
     widgets[widgetId] = widget;
-
     yield put(updateAndSaveLayout(widgets));
   } catch (error) {
     yield put({
diff --git a/app/client/src/utils/Validators.ts b/app/client/src/utils/Validators.ts
index 6eab54b00e..e4ac98492f 100644
--- a/app/client/src/utils/Validators.ts
+++ b/app/client/src/utils/Validators.ts
@@ -211,6 +211,23 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
+  [VALIDATION_TYPES.MARKERS]: (value: any): ValidationResponse => {
+    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](value);
+    if (!isValid) {
+      return {
+        isValid,
+        parsed,
+        message: `${WIDGET_TYPE_VALIDATION_ERROR}: Marker Data`,
+      };
+    } else if (!_.every(parsed, datum => _.isObject(datum))) {
+      return {
+        isValid: false,
+        parsed: [],
+        message: `${WIDGET_TYPE_VALIDATION_ERROR}: Marker Data`,
+      };
+    }
+    return { isValid, parsed };
+  },
   [VALIDATION_TYPES.OPTIONS_DATA]: (value: any): ValidationResponse => {
     const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](value);
     if (!isValid) {
diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx
index 67c3682f05..37bf0701b4 100644
--- a/app/client/src/utils/WidgetPropsUtils.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.tsx
@@ -359,7 +359,6 @@ export const generateWidgetProps = (
       ...derivedProperties,
       parentId: parent.widgetId,
     };
-
     delete props.rows;
     delete props.columns;
     return props;
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
index b78bee88e6..a2893a52ca 100644
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/app/client/src/utils/WidgetRegistry.tsx
@@ -13,11 +13,16 @@ import ButtonWidget, { ButtonWidgetProps } from "widgets/ButtonWidget";
 import DropdownWidget, { DropdownWidgetProps } from "widgets/DropdownWidget";
 import ImageWidget, { ImageWidgetProps } from "widgets/ImageWidget";
 import TableWidget, { TableWidgetProps } from "widgets/TableWidget";
+import TabsWidget, {
+  TabsWidgetProps,
+  TabContainerWidgetProps,
+} from "widgets/TabsWidget";
 import ModalWidget, { ModalWidgetProps } from "widgets/ModalWidget";
 import RichTextEditorWidget, {
   RichTextEditorWidgetProps,
 } from "widgets/RichTextEditorWidget";
 import ChartWidget, { ChartWidgetProps } from "widgets/ChartWidget";
+import MapWidget, { MapWidgetProps } from "widgets/MapWidget";
 
 import FilePickerWidget, {
   FilePickerWidgetProps,
@@ -165,6 +170,19 @@ class WidgetBuilderRegistry {
       DatePickerWidget.getDerivedPropertiesMap(),
       DatePickerWidget.getTriggerPropertyMap(),
     );
+    WidgetFactory.registerWidgetBuilder(
+      "TABS_WIDGET",
+      {
+        buildWidget(
+          widgetProps: TabsWidgetProps<TabContainerWidgetProps>,
+        ): JSX.Element {
+          return <TabsWidget {...widgetProps} />;
+        },
+      },
+      TabsWidget.getPropertyValidationMap(),
+      TabsWidget.getDerivedPropertiesMap(),
+      TabsWidget.getTriggerPropertyMap(),
+    );
     WidgetFactory.registerWidgetBuilder(
       WidgetTypes.MODAL_WIDGET,
       {
@@ -224,6 +242,18 @@ class WidgetBuilderRegistry {
       FormButtonWidget.getTriggerPropertyMap(),
     );
 
+    WidgetFactory.registerWidgetBuilder(
+      "MAP_WIDGET",
+      {
+        buildWidget(widgetProps: MapWidgetProps): JSX.Element {
+          return <MapWidget {...widgetProps} />;
+        },
+      },
+      MapWidget.getPropertyValidationMap(),
+      MapWidget.getDerivedPropertiesMap(),
+      MapWidget.getTriggerPropertyMap(),
+    );
+
     WidgetFactory.registerWidgetBuilder(
       WidgetTypes.CANVAS_WIDGET,
       {
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index bef14d291b..b78074ba2b 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -91,6 +91,15 @@ abstract class BaseWidget<
     disableDrag && disable !== undefined && disableDrag(disable);
   }
 
+  updateWidget(
+    operationName: string,
+    widgetId: string,
+    widgetProperties: any,
+  ): void {
+    const { updateWidget } = this.context;
+    updateWidget && updateWidget(operationName, widgetId, widgetProperties);
+  }
+
   updateWidgetProperty(propertyName: string, propertyValue: any): void {
     const { updateWidgetProperty } = this.context;
     const { widgetId } = this.props;
diff --git a/app/client/src/widgets/ChartWidget.tsx b/app/client/src/widgets/ChartWidget.tsx
index cabdaf6646..fc7e8aef36 100644
--- a/app/client/src/widgets/ChartWidget.tsx
+++ b/app/client/src/widgets/ChartWidget.tsx
@@ -8,7 +8,6 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
-      chartData: VALIDATION_TYPES.CHART_DATA,
       xAxisName: VALIDATION_TYPES.TEXT,
       yAxisName: VALIDATION_TYPES.TEXT,
       chartName: VALIDATION_TYPES.TEXT,
@@ -27,6 +26,7 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
         chartName={this.props.chartName}
         chartData={this.props.chartData}
         widgetId={this.props.widgetId}
+        allowHorizontalScroll={this.props.allowHorizontalScroll}
       />
     );
   }
@@ -44,11 +44,16 @@ export type ChartType =
   | "AREA_CHART"
   | "SCATTER_CHART";
 
-export interface ChartData {
+export interface ChartDataPoint {
   x: any;
   y: any;
 }
 
+export interface ChartData {
+  seriesName?: string;
+  data: ChartDataPoint[];
+}
+
 export interface ChartWidgetProps extends WidgetProps {
   chartType: ChartType;
   chartData: ChartData[];
@@ -56,6 +61,7 @@ export interface ChartWidgetProps extends WidgetProps {
   yAxisName: string;
   chartName: string;
   isVisible?: boolean;
+  allowHorizontalScroll: boolean;
 }
 
 export default ChartWidget;
diff --git a/app/client/src/widgets/DatePickerWidget.tsx b/app/client/src/widgets/DatePickerWidget.tsx
index 4da54c4592..d70fa20691 100644
--- a/app/client/src/widgets/DatePickerWidget.tsx
+++ b/app/client/src/widgets/DatePickerWidget.tsx
@@ -12,12 +12,12 @@ import {
   DerivedPropertiesMap,
   TriggerPropertiesMap,
 } from "utils/WidgetFactory";
+import moment from "moment-timezone";
 
 class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
       ...BASE_WIDGET_VALIDATION,
-      defaultDate: VALIDATION_TYPES.DATE,
       timezone: VALIDATION_TYPES.TEXT,
       enableTimePicker: VALIDATION_TYPES.BOOLEAN,
       dateFormat: VALIDATION_TYPES.TEXT,
@@ -43,18 +43,30 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
     };
   }
 
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.props.defaultDate) {
+      this.updateWidgetMetaProperty(
+        "selectedDate",
+        new Date(this.props.defaultDate.dateValue),
+      );
+    }
+  }
+
   componentDidUpdate(prevProps: DatePickerWidgetProps) {
     super.componentDidUpdate(prevProps);
-    if (this.props.defaultDate) {
-      if (
-        (this.props.selectedDate !== prevProps.selectedDate &&
-          this.props.selectedDate === undefined) ||
-        prevProps.defaultDate === undefined ||
-        this.props.defaultDate.toDateString() !==
-          prevProps.defaultDate.toDateString()
-      ) {
-        this.updateWidgetMetaProperty("selectedDate", this.props.defaultDate);
-      }
+    if (
+      this.props.defaultDate &&
+      (prevProps.defaultDate === undefined ||
+        !moment(this.props.defaultDate.dateValue).isSame(
+          moment(prevProps.defaultDate.dateValue),
+          "second",
+        ))
+    ) {
+      this.updateWidgetMetaProperty(
+        "selectedDate",
+        new Date(this.props.defaultDate.dateValue),
+      );
     }
   }
 
@@ -64,8 +76,16 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
         label={`${this.props.label}${this.props.isRequired ? " *" : ""}`}
         dateFormat={this.props.dateFormat}
         widgetId={this.props.widgetId}
-        timezone={this.props.timezone}
-        enableTimePicker={this.props.enableTimePicker}
+        timezone={
+          this.props.defaultDate && this.props.defaultDate.timezone
+            ? this.props.defaultDate.timezone
+            : ""
+        }
+        enableTimePicker={
+          this.props.defaultDate && this.props.defaultDate.isTimeEnabled
+            ? this.props.defaultDate.isTimeEnabled
+            : false
+        }
         isDisabled={this.props.isDisabled}
         datePickerType={"DATE_PICKER"}
         onDateSelected={this.onDateSelected}
@@ -95,10 +115,12 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
 export type DatePickerType = "DATE_PICKER" | "DATE_RANGE_PICKER";
 
 export interface DatePickerWidgetProps extends WidgetProps {
-  defaultDate: Date;
+  defaultDate: {
+    dateValue: number;
+    isTimeEnabled: boolean;
+    timezone: string;
+  };
   selectedDate: Date;
-  timezone?: string;
-  enableTimePicker: boolean;
   isDisabled: boolean;
   dateFormat: string;
   label: string;
diff --git a/app/client/src/widgets/MapWidget.tsx b/app/client/src/widgets/MapWidget.tsx
new file mode 100644
index 0000000000..69506f255c
--- /dev/null
+++ b/app/client/src/widgets/MapWidget.tsx
@@ -0,0 +1,151 @@
+import React from "react";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import { WidgetType } from "constants/WidgetConstants";
+import MapComponent from "components/designSystems/appsmith/MapComponent";
+import { WidgetPropertyValidationType } from "utils/ValidationFactory";
+import { VALIDATION_TYPES } from "constants/WidgetValidation";
+import { EventType } from "constants/ActionConstants";
+import { TriggerPropertiesMap } from "utils/WidgetFactory";
+
+class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
+  static getPropertyValidationMap(): WidgetPropertyValidationType {
+    return {
+      defaultMarkers: VALIDATION_TYPES.MARKERS,
+      isDisabled: VALIDATION_TYPES.BOOLEAN,
+      isVisible: VALIDATION_TYPES.BOOLEAN,
+      enableSearch: VALIDATION_TYPES.BOOLEAN,
+      enablePickLocation: VALIDATION_TYPES.BOOLEAN,
+      allowZoom: VALIDATION_TYPES.BOOLEAN,
+      enableCreateMarker: VALIDATION_TYPES.BOOLEAN,
+      zoomLevel: VALIDATION_TYPES.NUMBER,
+      onMarkerClick: VALIDATION_TYPES.ACTION_SELECTOR,
+      onCreateMarker: VALIDATION_TYPES.ACTION_SELECTOR,
+    };
+  }
+
+  static getTriggerPropertyMap(): TriggerPropertiesMap {
+    return {
+      onMarkerClick: true,
+      onCreateMarker: true,
+    };
+  }
+
+  updateCenter = (lat: number, lng: number) => {
+    this.updateWidgetMetaProperty("center", { lat, lng });
+  };
+
+  onCreateMarker = (lat: number, lng: number) => {
+    const markers: Array<MarkerProps> = [...this.props.markers];
+    markers.push({ lat: lat, lng: lng });
+    this.updateWidgetMetaProperty("markers", markers);
+    if (this.props.onCreateMarker) {
+      super.executeAction({
+        dynamicString: this.props.onCreateMarker,
+        event: {
+          type: EventType.ON_CREATE_MARKER,
+        },
+      });
+    }
+  };
+
+  onMarkerClick = (lat: number, lng: number, title: string) => {
+    this.updateWidgetMetaProperty("selectedMarker", {
+      lat: lat,
+      lng: lng,
+      title: title,
+    });
+    if (this.props.onMarkerClick) {
+      super.executeAction({
+        dynamicString: this.props.onMarkerClick,
+        event: {
+          type: EventType.ON_MARKER_CLICK,
+        },
+      });
+    }
+  };
+
+  componentDidMount() {
+    super.componentDidMount();
+    if (this.props.mapCenter) {
+      this.updateWidgetMetaProperty("center", this.props.mapCenter);
+    }
+    if (this.props.defaultMarkers && !this.props.markers) {
+      this.updateWidgetMetaProperty("markers", [...this.props.defaultMarkers]);
+    }
+  }
+
+  componentDidUpdate(prevProps: MapWidgetProps) {
+    super.componentDidUpdate(prevProps);
+    if (
+      this.props.mapCenter &&
+      prevProps.mapCenter &&
+      (this.props.mapCenter.lat !== prevProps.mapCenter.lat ||
+        this.props.mapCenter.lng !== prevProps.mapCenter.lng)
+    ) {
+      this.updateWidgetMetaProperty("center", this.props.mapCenter);
+    }
+    if (
+      this.props.defaultMarkers &&
+      !this.props.markers &&
+      this.props.defaultMarkers.length !== prevProps.defaultMarkers?.length
+    ) {
+      this.updateWidgetMetaProperty("markers", [...this.props.defaultMarkers]);
+    }
+  }
+
+  getPageView() {
+    return (
+      <MapComponent
+        widgetId={this.props.widgetId}
+        isVisible={this.props.isVisible}
+        zoomLevel={this.props.zoomLevel}
+        allowZoom={this.props.allowZoom}
+        center={this.props.center || this.props.mapCenter}
+        enableCreateMarker={this.props.enableCreateMarker}
+        updateCenter={this.updateCenter}
+        isDisabled={this.props.isDisabled}
+        enableSearch={this.props.enableSearch}
+        enablePickLocation={this.props.enablePickLocation}
+        saveMarker={this.onCreateMarker}
+        selectMarker={this.onMarkerClick}
+        markers={this.props.markers || []}
+      />
+    );
+  }
+
+  getWidgetType(): WidgetType {
+    return "MAP_WIDGET";
+  }
+}
+
+export interface MarkerProps {
+  lat: number;
+  lng: number;
+  title?: string;
+  description?: string;
+}
+
+export interface MapWidgetProps extends WidgetProps {
+  isDisabled?: boolean;
+  isVisible?: boolean;
+  enableSearch: boolean;
+  zoomLevel: number;
+  allowZoom: boolean;
+  enablePickLocation: boolean;
+  enableCreateMarker: boolean;
+  mapCenter: {
+    lat: number;
+    lng: number;
+  };
+  center?: {
+    lat: number;
+    lng: number;
+  };
+  defaultMarkers?: Array<MarkerProps>;
+  markers?: Array<MarkerProps>;
+  selectedMarker?: MarkerProps;
+  onMarkerClick?: string;
+  onCreateMarker?: string;
+}
+
+export default MapWidget;
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index c1b95a4899..c776fe65fc 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -29,22 +29,22 @@ class RichTextEditorWidget extends BaseWidget<
 
   componentDidMount() {
     super.componentDidMount();
-    if (this.props.text) {
-      this.updateWidgetMetaProperty("value", this.props.text);
+    if (this.props.defaultText) {
+      this.updateWidgetMetaProperty("text", this.props.defaultText);
     }
   }
 
   componentDidUpdate(prevProps: RichTextEditorWidgetProps) {
     super.componentDidUpdate(prevProps);
-    if (this.props.text) {
-      if (this.props.text !== prevProps.text) {
-        this.updateWidgetMetaProperty("value", this.props.text);
+    if (this.props.defaultText) {
+      if (this.props.defaultText !== prevProps.defaultText) {
+        this.updateWidgetMetaProperty("text", this.props.defaultText);
       }
     }
   }
 
-  onValueChange = (value: string) => {
-    this.updateWidgetMetaProperty("value", value);
+  onValueChange = (text: string) => {
+    this.updateWidgetMetaProperty("text", text);
     if (this.props.onTextChange) {
       super.executeAction({
         dynamicString: this.props.onTextChange,
@@ -59,7 +59,7 @@ class RichTextEditorWidget extends BaseWidget<
     return (
       <RichtextEditorComponent
         onValueChange={this.onValueChange}
-        defaultValue={this.props.value}
+        defaultValue={this.props.text}
         widgetId={this.props.widgetId}
         placeholder={this.props.placeholder}
         key={this.props.widgetId}
@@ -80,8 +80,8 @@ export interface InputValidator {
 }
 
 export interface RichTextEditorWidgetProps extends WidgetProps {
+  defaultText?: string;
   text?: string;
-  value?: string;
   placeholder?: string;
   onTextChange?: string;
   isDisabled?: boolean;
diff --git a/app/client/src/widgets/TabsWidget.tsx b/app/client/src/widgets/TabsWidget.tsx
new file mode 100644
index 0000000000..5c71934b78
--- /dev/null
+++ b/app/client/src/widgets/TabsWidget.tsx
@@ -0,0 +1,196 @@
+import React from "react";
+import styled from "styled-components";
+import TabsComponent from "components/designSystems/appsmith/TabsComponent";
+import { WidgetType, WidgetTypes } from "constants/WidgetConstants";
+import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
+import WidgetFactory from "utils/WidgetFactory";
+import { generateReactKey } from "utils/generators";
+
+const TabsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ChildrenWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  position: relative;
+  border: 1px solid;
+  border-top: none;
+  border-color: ${props => props.theme.colors.bodyBG};
+  background: ${props => props.theme.colors.builderBodyBG};
+`;
+
+const ScrollableCanvasWrapper = styled.div`
+  overflow-y: auto;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+
+class TabsWidget extends BaseWidget<
+  TabsWidgetProps<TabContainerWidgetProps>,
+  WidgetState
+> {
+  onTabChange = (tabId: string) => {
+    this.updateWidgetMetaProperty("selectedTabId", tabId);
+  };
+
+  getPageView() {
+    return (
+      <TabsContainer>
+        <TabsComponent {...this.props} onTabChange={this.onTabChange} />
+        <ChildrenWrapper>
+          <ScrollableCanvasWrapper>
+            {this.renderComponent()}
+          </ScrollableCanvasWrapper>
+        </ChildrenWrapper>
+      </TabsContainer>
+    );
+  }
+
+  renderComponent = () => {
+    const selectedTabId = this.props.selectedTabId;
+    const children = this.props.children.filter(item => {
+      return selectedTabId === item.tabId;
+    })[0];
+    const childWidgetData: TabContainerWidgetProps = children;
+    if (!childWidgetData) {
+      return <div></div>;
+    }
+    childWidgetData.shouldScrollContents = false;
+    childWidgetData.canExtend = this.props.shouldScrollContents;
+    const { componentWidth, componentHeight } = this.getComponentDimensions();
+    childWidgetData.rightColumn = componentWidth;
+    childWidgetData.bottomRow = this.props.shouldScrollContents
+      ? (this.props.bottomRow - this.props.topRow - 1) *
+        this.props.parentRowSpace
+      : componentHeight;
+    return WidgetFactory.createWidget(childWidgetData, this.props.renderMode);
+  };
+
+  getWidgetType(): WidgetType {
+    return "TABS_WIDGET";
+  }
+
+  addTabContainer = () => {
+    let tabId = "";
+    const childrenTabIds: string[] = this.props.children.map(children => {
+      return children.tabId;
+    });
+    for (let index = 0; index < this.props.tabs.length; index++) {
+      const tab = this.props.tabs[index];
+      if (!childrenTabIds.includes(tab.id)) {
+        tabId = tab.id;
+      }
+    }
+    const columns =
+      (this.props.rightColumn - this.props.leftColumn) *
+      this.props.parentColumnSpace;
+    const rows =
+      (this.props.bottomRow - this.props.topRow - 1) *
+      this.props.parentRowSpace;
+    const config = {
+      type: WidgetTypes.CANVAS_WIDGET,
+      columns: columns,
+      rows: rows,
+      parentRowSpace: 1,
+      parentColumnSpace: 1,
+      leftColumn: 0,
+      topRow: 1,
+      newWidgetId: generateReactKey(),
+      widgetId: this.props.widgetId,
+      props: {
+        tabId: tabId,
+        containerStyle: "none",
+        canExtend: false,
+        detachFromLayout: true,
+        children: [],
+      },
+    };
+    this.updateWidget("ADD_CHILD", this.props.widgetId, config);
+  };
+
+  removeTabContainer = () => {
+    let removedContainerWidgetId = "";
+    const tabIds: string[] = this.props.tabs.map(tab => {
+      return tab.id;
+    });
+    for (let index = 0; index < this.props.children.length; index++) {
+      const children = this.props.children[index];
+      if (!tabIds.includes(children.tabId)) {
+        removedContainerWidgetId = children.widgetId;
+      }
+    }
+    this.updateWidget("REMOVE_CHILD", removedContainerWidgetId, {
+      parentId: this.props.widgetId,
+    });
+  };
+
+  componentDidUpdate(prevProps: TabsWidgetProps<TabContainerWidgetProps>) {
+    super.componentDidUpdate(prevProps);
+    if (this.props.tabs) {
+      if (
+        this.props.tabs.length !== prevProps.tabs.length &&
+        this.props.children.length !== this.props.tabs.length
+      ) {
+        //adding container widget for the new tab
+        if (this.props.tabs.length > this.props.children.length) {
+          this.addTabContainer();
+        }
+        //removing container widget for the removed tab
+        else {
+          this.removeTabContainer();
+        }
+      }
+    }
+    if (this.props.selectedTab) {
+      if (this.props.selectedTab !== prevProps.selectedTab) {
+        let selectedTabId = "";
+        for (let index = 0; index < this.props.tabs.length; index++) {
+          if (this.props.tabs[index].label === this.props.selectedTab) {
+            selectedTabId = this.props.tabs[index].id;
+          }
+        }
+        this.updateWidgetMetaProperty("selectedTabId", selectedTabId);
+      }
+    }
+  }
+
+  componentDidMount() {
+    if (this.props.selectedTab) {
+      let selectedTabId = "";
+      for (let index = 0; index < this.props.tabs.length; index++) {
+        if (this.props.tabs[index].label === this.props.selectedTab) {
+          selectedTabId = this.props.tabs[index].id;
+        }
+      }
+      this.updateWidgetMetaProperty("selectedTabId", selectedTabId);
+    }
+  }
+}
+
+export interface TabContainerWidgetProps extends WidgetProps {
+  tabId: string;
+}
+
+export interface TabsWidgetProps<T extends TabContainerWidgetProps>
+  extends WidgetProps {
+  isVisible?: boolean;
+  shouldScrollContents: boolean;
+  tabs: Array<{
+    id: string;
+    label: string;
+  }>;
+  children: T[];
+  snapColumns?: number;
+  snapRows?: number;
+  selectedTab: string;
+  selectedTabId: string;
+}
+
+export default TabsWidget;
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 4cf245a52a..b52a7c3f92 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -3301,7 +3301,6 @@ async@^2.1.4, async@^2.6.2:
 async@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
-  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -3690,7 +3689,7 @@ babel-preset-react-app@^9.1.1:
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-runtime@^6.26.0:
+babel-runtime@^6.11.6, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -4049,7 +4048,6 @@ cache-base@^1.0.1:
 cachedir@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
-  integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
 call-me-maybe@^1.0.1:
   version "1.0.1"
@@ -4188,6 +4186,10 @@ chance@^1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chance/-/chance-1.1.4.tgz#d8743bf8e40bb05e024c305ca1ff441195eb23db"
 
+change-emitter@^0.1.2:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
+
 character-entities-legacy@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
@@ -4502,7 +4504,6 @@ comma-separated-tokens@^1.0.0:
 commander@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
-  integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==
 
 commander@^2.11.0, commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
@@ -5015,7 +5016,6 @@ cypress-xpath@^1.4.0:
 cypress@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.1.0.tgz#295f115d2e8a08fff2760ab49d94d876f5877aee"
-  integrity sha512-FFV8pS9iuriSX4M9rna6awJUhiqozZD1D5z5BprCUJoho1ctbcgpkEUIUnqxli2OwjQqVz07egO+iqoGL+tw7g==
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
     "@cypress/xvfb" "1.2.4"
@@ -6655,7 +6655,6 @@ get-value@^2.0.3, get-value@^2.0.6:
 getos@3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
-  integrity sha512-UORPzguEB/7UG5hqiZai8f0vQ7hzynMQyJLxStoQ8dPGAcmgsfXOPA4iE/fGtweHYkK+z4zc9V0g+CIFRf5HYw==
   dependencies:
     async "^3.1.0"
 
@@ -6815,6 +6814,10 @@ good-listener@^1.2.2:
   dependencies:
     delegate "^3.1.2"
 
+google-maps-infobox@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz#1ea6de93c0cdf4138c2d586331835c83dcc59dc2"
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -7018,6 +7021,10 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+
 hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -7408,7 +7415,7 @@ interweave@^12.1.1:
     escape-html "^1.0.3"
     prop-types "^15.7.2"
 
-invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -8785,7 +8792,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@~4.17.10:
+lodash@4.17.15, "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.16.2, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@~4.17.10:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
@@ -8934,6 +8941,14 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+marker-clusterer-plus@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz#f8eff74d599dab3b7d0e3fed5264ea0e704f5d67"
+
+markerwithlabel@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/markerwithlabel/-/markerwithlabel-2.0.2.tgz#fa6aee4abb0ee553e24e2b708226858f58b8729e"
+
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -9864,7 +9879,6 @@ osenv@0:
 ospath@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
-  integrity sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=
 
 p-defer@^1.0.0:
   version "1.0.0"
@@ -11201,7 +11215,6 @@ raf@^3.4.1:
 ramda@0.26.1:
   version "0.26.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
-  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
 
 ramda@^0.21.0:
   version "0.21.0"
@@ -11474,6 +11487,22 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-google-maps@^9.4.5:
+  version "9.4.5"
+  resolved "https://registry.yarnpkg.com/react-google-maps/-/react-google-maps-9.4.5.tgz#920c199bdc925e0ce93880edffb09428d263aafa"
+  dependencies:
+    babel-runtime "^6.11.6"
+    can-use-dom "^0.1.0"
+    google-maps-infobox "^2.0.0"
+    invariant "^2.2.1"
+    lodash "^4.16.2"
+    marker-clusterer-plus "^2.1.4"
+    markerwithlabel "^2.0.1"
+    prop-types "^15.5.8"
+    recompose "^0.26.0"
+    scriptjs "^2.5.8"
+    warning "^3.0.0"
+
 react-helmet-async@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"
@@ -11936,6 +11965,15 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+recompose@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
+  dependencies:
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    symbol-observable "^1.0.4"
+
 recursive-readdir@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
@@ -12508,6 +12546,10 @@ schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+scriptjs@^2.5.8:
+  version "2.5.9"
+  resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -13283,7 +13325,6 @@ supports-color@^2.0.0:
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
@@ -13315,7 +13356,7 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@^1.0.2, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
+symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
 
@@ -13903,7 +13944,6 @@ unset-value@^1.0.0:
 untildify@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
-  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
 upath@^1.1.1:
   version "1.2.0"
@@ -14131,6 +14171,12 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"

From c9f285242c89f2fdbb851c866fbd7c2c01db8fed Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Wed, 15 Apr 2020 17:45:12 +0530
Subject: [PATCH 11/31] Lazy load fusioncharts, richtext and syncfusion.

---
 app/client/src/widgets/ChartWidget.tsx        | 32 +++++----
 app/client/src/widgets/FilepickerWidget.tsx   | 24 ++++---
 .../src/widgets/RichTextEditorWidget.tsx      | 27 +++++---
 app/client/src/widgets/TableWidget.tsx        | 69 ++++++++++---------
 app/client/yarn.lock                          |  2 +-
 5 files changed, 87 insertions(+), 67 deletions(-)

diff --git a/app/client/src/widgets/ChartWidget.tsx b/app/client/src/widgets/ChartWidget.tsx
index fc7e8aef36..d8431eaed3 100644
--- a/app/client/src/widgets/ChartWidget.tsx
+++ b/app/client/src/widgets/ChartWidget.tsx
@@ -1,10 +1,14 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
-import ChartComponent from "components/designSystems/appsmith/ChartComponent";
+// import ChartComponent from "components/designSystems/appsmith/ChartComponent";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 
+const ChartComponent = lazy(() =>
+  import("components/designSystems/appsmith/ChartComponent"),
+);
+
 class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
@@ -17,17 +21,19 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
 
   getPageView() {
     return (
-      <ChartComponent
-        key={this.props.widgetId}
-        isVisible={this.props.isVisible}
-        chartType={this.props.chartType}
-        xAxisName={this.props.xAxisName}
-        yAxisName={this.props.yAxisName}
-        chartName={this.props.chartName}
-        chartData={this.props.chartData}
-        widgetId={this.props.widgetId}
-        allowHorizontalScroll={this.props.allowHorizontalScroll}
-      />
+      <Suspense fallback={null}>
+        <ChartComponent
+          key={this.props.widgetId}
+          isVisible={this.props.isVisible}
+          chartType={this.props.chartType}
+          xAxisName={this.props.xAxisName}
+          yAxisName={this.props.yAxisName}
+          chartName={this.props.chartName}
+          chartData={this.props.chartData}
+          widgetId={this.props.widgetId}
+          allowHorizontalScroll={this.props.allowHorizontalScroll}
+        />
+      </Suspense>
     );
   }
 
diff --git a/app/client/src/widgets/FilepickerWidget.tsx b/app/client/src/widgets/FilepickerWidget.tsx
index e50a820a0f..17dc11c581 100644
--- a/app/client/src/widgets/FilepickerWidget.tsx
+++ b/app/client/src/widgets/FilepickerWidget.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { lazy, Suspense } from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
 import Uppy from "@uppy/core";
@@ -6,7 +6,6 @@ import GoogleDrive from "@uppy/google-drive";
 import Webcam from "@uppy/webcam";
 import Url from "@uppy/url";
 import OneDrive from "@uppy/onedrive";
-import FilePickerComponent from "components/designSystems/appsmith/FilePickerComponent";
 import {
   WidgetPropertyValidationType,
   BASE_WIDGET_VALIDATION,
@@ -21,6 +20,9 @@ import Dashboard from "@uppy/dashboard";
 import shallowequal from "shallowequal";
 import _ from "lodash";
 
+const FilePickerComponent = lazy(() =>
+  import("components/designSystems/appsmith/FilePickerComponent"),
+);
 class FilePickerWidget extends BaseWidget<FilePickerWidgetProps, WidgetState> {
   uppy: any;
 
@@ -184,14 +186,16 @@ class FilePickerWidget extends BaseWidget<FilePickerWidgetProps, WidgetState> {
 
   getPageView() {
     return (
-      <FilePickerComponent
-        uppy={this.uppy}
-        widgetId={this.props.widgetId}
-        key={this.props.widgetId}
-        label={this.props.label}
-        files={this.props.files || []}
-        isLoading={this.props.isLoading}
-      />
+      <Suspense fallback={null}>
+        <FilePickerComponent
+          uppy={this.uppy}
+          widgetId={this.props.widgetId}
+          key={this.props.widgetId}
+          label={this.props.label}
+          files={this.props.files || []}
+          isLoading={this.props.isLoading}
+        />
+      </Suspense>
     );
   }
 
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index c776fe65fc..211748b133 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -1,12 +1,15 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
 import { EventType } from "constants/ActionConstants";
-import RichtextEditorComponent from "components/designSystems/appsmith/RichTextEditorComponent";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 
+const RichtextEditorComponent = lazy(() =>
+  import("components/designSystems/appsmith/RichTextEditorComponent"),
+);
+
 class RichTextEditorWidget extends BaseWidget<
   RichTextEditorWidgetProps,
   WidgetState
@@ -57,15 +60,17 @@ class RichTextEditorWidget extends BaseWidget<
 
   getPageView() {
     return (
-      <RichtextEditorComponent
-        onValueChange={this.onValueChange}
-        defaultValue={this.props.text}
-        widgetId={this.props.widgetId}
-        placeholder={this.props.placeholder}
-        key={this.props.widgetId}
-        isDisabled={this.props.isDisabled}
-        isVisible={this.props.isVisible}
-      />
+      <Suspense fallback={null}>
+        <RichtextEditorComponent
+          onValueChange={this.onValueChange}
+          defaultValue={this.props.text}
+          widgetId={this.props.widgetId}
+          placeholder={this.props.placeholder}
+          key={this.props.widgetId}
+          isDisabled={this.props.isDisabled}
+          isVisible={this.props.isVisible}
+        />
+      </Suspense>
     );
   }
 
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 13b0437344..c711b7a1f8 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -1,9 +1,8 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
 import { EventType } from "constants/ActionConstants";
 import { forIn } from "lodash";
-import TableComponent from "components/designSystems/syncfusion/TableComponent";
 
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import {
@@ -15,6 +14,10 @@ import { ColumnDirTypecast } from "@syncfusion/ej2-react-grids";
 import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 
+const TableComponent = lazy(() =>
+  import("components/designSystems/syncfusion/TableComponent"),
+);
+
 function constructColumns(
   data: object[],
   hiddenColumns?: string[],
@@ -78,36 +81,38 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     }
     const { componentWidth, componentHeight } = this.getComponentDimensions();
     return (
-      <TableComponent
-        id={this.props.widgetName}
-        data={this.props.tableData}
-        columns={columns}
-        isLoading={this.props.isLoading}
-        height={componentHeight}
-        width={componentWidth}
-        disableDrag={(disable: boolean) => {
-          this.disableDrag(disable);
-        }}
-        columnActions={this.props.columnActions}
-        onCommandClick={this.onCommandClick}
-        onRowClick={this.handleRowClick}
-        selectedRowIndex={this.props.selectedRowIndex || -1}
-        serverSidePaginationEnabled={serverSidePaginationEnabled}
-        pageNo={pageNo}
-        nextPageClick={this.handleNextPageClick}
-        prevPageClick={this.handlePrevPageClick}
-        updatePageNo={(pageNo: number) => {
-          super.updateWidgetMetaProperty("pageNo", pageNo);
-        }}
-        updateHiddenColumns={this.updateHiddenColumns}
-        resetSelectedRowIndex={this.resetSelectedRowIndex}
-        updatePageSize={(pageSize: number) => {
-          super.updateWidgetMetaProperty("pageSize", pageSize);
-        }}
-        exportCsv={this.props.exportCsv}
-        exportPDF={this.props.exportPDF}
-        exportExcel={this.props.exportExcel}
-      />
+      <Suspense fallback={null}>
+        <TableComponent
+          id={this.props.widgetName}
+          data={this.props.tableData}
+          columns={columns}
+          isLoading={this.props.isLoading}
+          height={componentHeight}
+          width={componentWidth}
+          disableDrag={(disable: boolean) => {
+            this.disableDrag(disable);
+          }}
+          columnActions={this.props.columnActions}
+          onCommandClick={this.onCommandClick}
+          onRowClick={this.handleRowClick}
+          selectedRowIndex={this.props.selectedRowIndex || -1}
+          serverSidePaginationEnabled={serverSidePaginationEnabled}
+          pageNo={pageNo}
+          nextPageClick={this.handleNextPageClick}
+          prevPageClick={this.handlePrevPageClick}
+          updatePageNo={(pageNo: number) => {
+            super.updateWidgetMetaProperty("pageNo", pageNo);
+          }}
+          updateHiddenColumns={this.updateHiddenColumns}
+          resetSelectedRowIndex={this.resetSelectedRowIndex}
+          updatePageSize={(pageSize: number) => {
+            super.updateWidgetMetaProperty("pageSize", pageSize);
+          }}
+          exportCsv={this.props.exportCsv}
+          exportPDF={this.props.exportPDF}
+          exportExcel={this.props.exportExcel}
+        />
+      </Suspense>
     );
   }
 
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 6be461ddec..cd6512cf8e 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -6163,7 +6163,7 @@ fbemitter@^2.0.0:
   dependencies:
     fbjs "^0.8.4"
 
-fbjs@^0.8.0, fbjs@^0.8.4:
+fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.4:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=

From 431f20b8c48976e2904e52279f043039f0207eb6 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Wed, 15 Apr 2020 19:06:42 +0530
Subject: [PATCH 12/31] Temporary fix for the chart widget

---
 .../designSystems/appsmith/ChartComponent.tsx | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index c476318a62..a5b767a2e0 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -12,7 +12,7 @@ FusionCharts.options.creditLabel = false;
 
 export interface ChartComponentProps {
   chartType: ChartType;
-  chartData: ChartData[];
+  chartData: ChartData[] | ChartDataPoint[];
   xAxisName: string;
   yAxisName: string;
   chartName: string;
@@ -143,23 +143,29 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   };
 
   getChartDataSource = () => {
+    let chartData: ChartData[];
+    if (!Array.isArray(this.props.chartData[0])) {
+      chartData = [{ data: this.props.chartData as ChartDataPoint[] }];
+    } else {
+      chartData = this.props.chartData as ChartData[];
+    }
     if (
       this.props.chartData.length === 1 ||
       this.props.chartType === "PIE_CHART"
     ) {
       return {
         chart: this.getChartConfig(),
-        data: this.getChartData(this.props.chartData),
+        data: this.getChartData(chartData),
       };
     } else {
       return {
         chart: this.getChartConfig(),
         categories: [
           {
-            category: this.getChartCategories(this.props.chartData),
+            category: this.getChartCategories(chartData),
           },
         ],
-        dataset: this.getChartDataset(this.props.chartData),
+        dataset: this.getChartDataset(chartData),
       };
     }
   };
@@ -176,10 +182,12 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       },
       categories: [
         {
-          category: this.getChartCategories(this.props.chartData),
+          category: this.getChartCategories(
+            this.props.chartData as ChartData[],
+          ),
         },
       ],
-      dataset: this.getChartDataset(this.props.chartData),
+      dataset: this.getChartDataset(this.props.chartData as ChartData[]),
     };
   };
 

From f3cccd9aee495f6141f058d1d1ab1a2f5cac5aed Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Wed, 15 Apr 2020 19:49:39 +0530
Subject: [PATCH 13/31] Remove errors when 401 unauthorized.

---
 app/client/src/api/Api.tsx             | 9 +++++++--
 app/client/src/sagas/ErrorSagas.tsx    | 9 +++++++--
 app/client/src/sagas/userSagas.tsx     | 4 ++++
 app/client/src/utils/AnalyticsUtil.tsx | 4 ++--
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/client/src/api/Api.tsx b/app/client/src/api/Api.tsx
index a737ea47ee..9d02349f9b 100644
--- a/app/client/src/api/Api.tsx
+++ b/app/client/src/api/Api.tsx
@@ -8,6 +8,7 @@ import {
 import { ActionApiResponse } from "./ActionAPI";
 import { AUTH_LOGIN_URL } from "constants/routes";
 import { setRouteBeforeLogin } from "utils/storage";
+import history from "utils/history";
 const { apiUrl, baseUrl } = getAppsmithConfigs();
 
 //TODO(abhinav): Refactor this to make more composable.
@@ -58,8 +59,12 @@ axiosInstance.interceptors.response.use(
       // console.log(error.response.headers);
       if (error.response.status === 401) {
         setRouteBeforeLogin(window.location.pathname);
-        window.location.href = AUTH_LOGIN_URL;
-        return;
+        history.push(AUTH_LOGIN_URL);
+        return Promise.reject({
+          code: 401,
+          message: "Unauthorized. Redirecting to login page...",
+          show: false,
+        });
       }
       if (error.response.data.responseMeta) {
         return Promise.resolve(error.response.data);
diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx
index bd117ed732..d9ff92066e 100644
--- a/app/client/src/sagas/ErrorSagas.tsx
+++ b/app/client/src/sagas/ErrorSagas.tsx
@@ -59,7 +59,7 @@ export function getResponseErrorMessage(response: ApiResponse) {
     : undefined;
 }
 
-type ErrorPayloadType = { message?: string };
+type ErrorPayloadType = { code?: number; message?: string };
 let ActionErrorDisplayMap: {
   [key: string]: (error: ErrorPayloadType) => string;
 } = {};
@@ -92,7 +92,12 @@ export function* errorSaga(
   } = errorAction;
   const message =
     error && error.message ? error.message : ActionErrorDisplayMap[type](error);
-  if (show) AppToaster.show({ message, type: ToastType.ERROR });
+  if (show && error.code !== 401) {
+    // error.code !== 401 IS A HACK!
+    // TODO(abhinav): Figure out a generic way
+    AppToaster.show({ message, type: ToastType.ERROR });
+  }
+
   yield put({
     type: ReduxActionTypes.REPORT_ERROR,
     payload: {
diff --git a/app/client/src/sagas/userSagas.tsx b/app/client/src/sagas/userSagas.tsx
index 250dabcc5d..c4cabaec48 100644
--- a/app/client/src/sagas/userSagas.tsx
+++ b/app/client/src/sagas/userSagas.tsx
@@ -288,6 +288,10 @@ export function* fetchUserSaga(action: ReduxAction<FetchUserRequest>) {
     return yield false;
   } catch (error) {
     console.log(error);
+    yield put({
+      type: ReduxActionErrorTypes.FETCH_USER_ERROR,
+      payload: error,
+    });
   }
 }
 
diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
index 1d81f92940..c458a6b5d0 100644
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@@ -184,8 +184,8 @@ class AnalyticsUtil {
 
   static reset() {
     const windowDoc: any = window;
-    windowDoc.analytics.reset();
-    windowDoc.mixpanel.reset();
+    windowDoc.analytics && windowDoc.analytics.reset();
+    windowDoc.mixpanel && windowDoc.mixpanel.reset();
   }
 }
 

From c0d4bbb9327fc45edc8edf30af7ec2bbb8e8dd32 Mon Sep 17 00:00:00 2001
From: Vicky Bansal <vicky.bansal@primathon.in>
Date: Wed, 15 Apr 2020 15:26:36 +0000
Subject: [PATCH 14/31] Fix/chart widget data migration

---
 .../designSystems/appsmith/ChartComponent.tsx | 20 ++++---------
 app/client/src/utils/WidgetPropsUtils.tsx     | 30 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index a5b767a2e0..c476318a62 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -12,7 +12,7 @@ FusionCharts.options.creditLabel = false;
 
 export interface ChartComponentProps {
   chartType: ChartType;
-  chartData: ChartData[] | ChartDataPoint[];
+  chartData: ChartData[];
   xAxisName: string;
   yAxisName: string;
   chartName: string;
@@ -143,29 +143,23 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   };
 
   getChartDataSource = () => {
-    let chartData: ChartData[];
-    if (!Array.isArray(this.props.chartData[0])) {
-      chartData = [{ data: this.props.chartData as ChartDataPoint[] }];
-    } else {
-      chartData = this.props.chartData as ChartData[];
-    }
     if (
       this.props.chartData.length === 1 ||
       this.props.chartType === "PIE_CHART"
     ) {
       return {
         chart: this.getChartConfig(),
-        data: this.getChartData(chartData),
+        data: this.getChartData(this.props.chartData),
       };
     } else {
       return {
         chart: this.getChartConfig(),
         categories: [
           {
-            category: this.getChartCategories(chartData),
+            category: this.getChartCategories(this.props.chartData),
           },
         ],
-        dataset: this.getChartDataset(chartData),
+        dataset: this.getChartDataset(this.props.chartData),
       };
     }
   };
@@ -182,12 +176,10 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       },
       categories: [
         {
-          category: this.getChartCategories(
-            this.props.chartData as ChartData[],
-          ),
+          category: this.getChartCategories(this.props.chartData),
         },
       ],
-      dataset: this.getChartDataset(this.props.chartData as ChartData[]),
+      dataset: this.getChartDataset(this.props.chartData),
     };
   };
 
diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx
index 37bf0701b4..e8d9390200 100644
--- a/app/client/src/utils/WidgetPropsUtils.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.tsx
@@ -18,6 +18,7 @@ import { OccupiedSpace } from "constants/editorConstants";
 import { DerivedPropFactory } from "utils/DerivedPropertiesFactory";
 import defaultTemplate from "templates/default";
 import { generateReactKey } from "./generators";
+import { ChartDataPoint } from "widgets/ChartWidget";
 
 export type WidgetOperationParams = {
   operation: WidgetOperation;
@@ -74,6 +75,30 @@ const updateContainers = (dsl: ContainerWidgetProps<WidgetProps>) => {
   return dsl;
 };
 
+//transform chart data, from old chart widget to new chart widget
+//updatd chart widget has support for multiple series
+const chartDataMigration = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
+  currentDSL.children = currentDSL.children?.map((children: WidgetProps) => {
+    if (
+      children.type === WidgetTypes.CHART_WIDGET &&
+      children.chartData &&
+      children.chartData.length &&
+      !Array.isArray(children.chartData[0])
+    ) {
+      children.chartData = [{ data: children.chartData as ChartDataPoint[] }];
+    } else if (
+      children.type === WidgetTypes.CONTAINER_WIDGET ||
+      children.type === WidgetTypes.FORM_WIDGET ||
+      children.type === WidgetTypes.CANVAS_WIDGET ||
+      children.type === WidgetTypes.TABS_WIDGET
+    ) {
+      children = chartDataMigration(children);
+    }
+    return children;
+  });
+  return currentDSL;
+};
+
 // A rudimentary transform function which updates the DSL based on its version.
 // A more modular approach needs to be designed.
 const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
@@ -105,7 +130,10 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
       currentDSL.children = currentDSL.children.map(updateContainers);
     currentDSL.version = 2;
   }
-
+  if (currentDSL.version === 2) {
+    currentDSL = chartDataMigration(currentDSL);
+    currentDSL.version = 3;
+  }
   return currentDSL;
 };
 

From b0b374636758e2ceed76ee62eacb3e9fd52e7543 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Thu, 16 Apr 2020 12:26:43 +0530
Subject: [PATCH 15/31] Revert lazy loading filepicker component

---
 app/client/src/widgets/FilepickerWidget.tsx | 24 +++++++++------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/client/src/widgets/FilepickerWidget.tsx b/app/client/src/widgets/FilepickerWidget.tsx
index 17dc11c581..e06bff5af8 100644
--- a/app/client/src/widgets/FilepickerWidget.tsx
+++ b/app/client/src/widgets/FilepickerWidget.tsx
@@ -1,6 +1,7 @@
-import React, { lazy, Suspense } from "react";
+import React from "react";
 import BaseWidget, { WidgetProps, WidgetState } from "./BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
+import FilePickerComponent from "components/designSystems/appsmith/FilePickerComponent";
 import Uppy from "@uppy/core";
 import GoogleDrive from "@uppy/google-drive";
 import Webcam from "@uppy/webcam";
@@ -20,9 +21,6 @@ import Dashboard from "@uppy/dashboard";
 import shallowequal from "shallowequal";
 import _ from "lodash";
 
-const FilePickerComponent = lazy(() =>
-  import("components/designSystems/appsmith/FilePickerComponent"),
-);
 class FilePickerWidget extends BaseWidget<FilePickerWidgetProps, WidgetState> {
   uppy: any;
 
@@ -186,16 +184,14 @@ class FilePickerWidget extends BaseWidget<FilePickerWidgetProps, WidgetState> {
 
   getPageView() {
     return (
-      <Suspense fallback={null}>
-        <FilePickerComponent
-          uppy={this.uppy}
-          widgetId={this.props.widgetId}
-          key={this.props.widgetId}
-          label={this.props.label}
-          files={this.props.files || []}
-          isLoading={this.props.isLoading}
-        />
-      </Suspense>
+      <FilePickerComponent
+        uppy={this.uppy}
+        widgetId={this.props.widgetId}
+        key={this.props.widgetId}
+        label={this.props.label}
+        files={this.props.files || []}
+        isLoading={this.props.isLoading}
+      />
     );
   }
 

From 0b87848baf28bb3add702675ff2e5e457bbc141f Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Thu, 16 Apr 2020 14:02:58 +0530
Subject: [PATCH 16/31] Add basic skeleton for widget loading

---
 app/client/src/components/utils/Skeleton.tsx  | 19 +++++++++++++++++++
 app/client/src/sagas/ErrorSagas.tsx           |  2 +-
 app/client/src/widgets/ChartWidget.tsx        |  3 ++-
 .../src/widgets/RichTextEditorWidget.tsx      |  3 ++-
 app/client/src/widgets/TableWidget.tsx        |  3 ++-
 5 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 app/client/src/components/utils/Skeleton.tsx

diff --git a/app/client/src/components/utils/Skeleton.tsx b/app/client/src/components/utils/Skeleton.tsx
new file mode 100644
index 0000000000..c3205d4faf
--- /dev/null
+++ b/app/client/src/components/utils/Skeleton.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import styled from "styled-components";
+
+const StyledDiv = styled.div`
+  width: 100%;
+  height: 100%;
+  display: block;
+`;
+
+type SkeletonProps = {
+  type?: string;
+};
+
+export const Skeleton = () => {
+  return <StyledDiv className={Classes.SKELETON} />;
+};
+
+export default Skeleton;
diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx
index d9ff92066e..af1a78a37c 100644
--- a/app/client/src/sagas/ErrorSagas.tsx
+++ b/app/client/src/sagas/ErrorSagas.tsx
@@ -92,7 +92,7 @@ export function* errorSaga(
   } = errorAction;
   const message =
     error && error.message ? error.message : ActionErrorDisplayMap[type](error);
-  if (show && error.code !== 401) {
+  if (show && error && error.code !== 401) {
     // error.code !== 401 IS A HACK!
     // TODO(abhinav): Figure out a generic way
     AppToaster.show({ message, type: ToastType.ERROR });
diff --git a/app/client/src/widgets/ChartWidget.tsx b/app/client/src/widgets/ChartWidget.tsx
index d8431eaed3..2afc14a0e4 100644
--- a/app/client/src/widgets/ChartWidget.tsx
+++ b/app/client/src/widgets/ChartWidget.tsx
@@ -4,6 +4,7 @@ import { WidgetType } from "constants/WidgetConstants";
 // import ChartComponent from "components/designSystems/appsmith/ChartComponent";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
+import Skeleton from "components/utils/Skeleton";
 
 const ChartComponent = lazy(() =>
   import("components/designSystems/appsmith/ChartComponent"),
@@ -21,7 +22,7 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
 
   getPageView() {
     return (
-      <Suspense fallback={null}>
+      <Suspense fallback={<Skeleton />}>
         <ChartComponent
           key={this.props.widgetId}
           isVisible={this.props.isVisible}
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index 211748b133..940d5737e8 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -5,6 +5,7 @@ import { EventType } from "constants/ActionConstants";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
+import Skeleton from "components/utils/Skeleton";
 
 const RichtextEditorComponent = lazy(() =>
   import("components/designSystems/appsmith/RichTextEditorComponent"),
@@ -60,7 +61,7 @@ class RichTextEditorWidget extends BaseWidget<
 
   getPageView() {
     return (
-      <Suspense fallback={null}>
+      <Suspense fallback={<Skeleton />}>
         <RichtextEditorComponent
           onValueChange={this.onValueChange}
           defaultValue={this.props.text}
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index c711b7a1f8..4c256d127a 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -13,6 +13,7 @@ import { ColumnModel } from "@syncfusion/ej2-grids";
 import { ColumnDirTypecast } from "@syncfusion/ej2-react-grids";
 import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
+import Skeleton from "components/utils/Skeleton";
 
 const TableComponent = lazy(() =>
   import("components/designSystems/syncfusion/TableComponent"),
@@ -81,7 +82,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     }
     const { componentWidth, componentHeight } = this.getComponentDimensions();
     return (
-      <Suspense fallback={null}>
+      <Suspense fallback={<Skeleton />}>
         <TableComponent
           id={this.props.widgetName}
           data={this.props.tableData}

From 87b1554e10e74eb358222d95b7b5259406af956c Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Thu, 16 Apr 2020 17:26:36 +0530
Subject: [PATCH 17/31] Move Registration to application editor

---
 app/client/package.json                       |   1 +
 .../src/components/utils/AppsmithLoader.tsx   |   1 +
 app/client/src/index.tsx                      | 175 +++++++++---------
 app/client/src/pages/Editor/index.tsx         | 108 ++++++-----
 app/client/src/utils/AppsmithUtils.tsx        |   8 -
 app/client/src/utils/EditorUtils.ts           |  11 ++
 app/client/src/utils/WidgetRegistry.tsx       |   5 +-
 app/client/src/widgets/ChartWidget.tsx        |   4 +-
 app/client/src/widgets/TableWidget.tsx        |   4 +-
 9 files changed, 169 insertions(+), 148 deletions(-)
 create mode 100644 app/client/src/components/utils/AppsmithLoader.tsx
 create mode 100644 app/client/src/utils/EditorUtils.ts

diff --git a/app/client/package.json b/app/client/package.json
index 1a03b84dac..3ecf59140a 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -107,6 +107,7 @@
     "start": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=DEVELOPMENT HOST=dev.appsmith.com craco start",
     "build": "./build.sh",
     "build-local": "craco --max-old-space-size=4096 build --config craco.build.config.js",
+    "build-staging": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=STAGING craco --max-old-space-size=4096 build --config craco.build.config.js",
     "test": "cypress/test.sh",
     "eject": "react-scripts eject",
     "start-prod": "REACT_APP_BASE_URL=https://api.appsmith.com REACT_APP_ENVIRONMENT=PRODUCTION craco start",
diff --git a/app/client/src/components/utils/AppsmithLoader.tsx b/app/client/src/components/utils/AppsmithLoader.tsx
new file mode 100644
index 0000000000..7646bbd17d
--- /dev/null
+++ b/app/client/src/components/utils/AppsmithLoader.tsx
@@ -0,0 +1 @@
+export default null;
diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
index b0df30736d..88ad98ec32 100755
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@@ -4,12 +4,10 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import Loader from "pages/common/Loader";
 import "./index.css";
-import * as serviceWorker from "./serviceWorker";
+// import * as serviceWorker from "./serviceWorker";
 import { Router, Switch, Redirect } from "react-router-dom";
 import history from "./utils/history";
 import { ThemeProvider, theme } from "constants/DefaultTheme";
-import { DndProvider } from "react-dnd";
-import TouchBackend from "react-dnd-touch-backend";
 
 import { appInitializer } from "utils/AppsmithUtils";
 import AppRoute from "./pages/common/AppRoute";
@@ -31,96 +29,99 @@ import {
 
 const loadingIndicator = <Loader />;
 const App = lazy(() => import("./App"));
-const UserAuth = lazy(() => import("./pages/UserAuth"));
-const Editor = lazy(() => import("./pages/Editor"));
-const Applications = lazy(() => import("./pages/Applications"));
-const PageNotFound = lazy(() => import("./pages/common/PageNotFound"));
-const AppViewer = lazy(() => import("./pages/AppViewer"));
-const Organization = lazy(() => import("./pages/organization"));
-const Users = lazy(() => import("./pages/users"));
+const UserAuth = lazy(() =>
+  import(/* webpackPrefetch: 5 */ "./pages/UserAuth"),
+);
+const Editor = lazy(() => import(/* webpackPrefetch: 3 */ "./pages/Editor"));
+const Applications = lazy(() =>
+  import(/* webpackPrefetch: 4 */ "./pages/Applications"),
+);
+const PageNotFound = lazy(() =>
+  import(/* webpackPrefetch: true */ "./pages/common/PageNotFound"),
+);
+const AppViewer = lazy(() =>
+  import(/* webpackPrefetch: 2 */ "./pages/AppViewer"),
+);
+const Organization = lazy(() =>
+  import(/* webpackPrefetch: 1 */ "./pages/organization"),
+);
+const Users = lazy(() => import(/* webpackPrefetch: true */ "./pages/users"));
 appInitializer();
 
 ReactDOM.render(
-  <DndProvider
-    backend={TouchBackend}
-    options={{
-      enableMouseEvents: true,
-    }}
-  >
-    <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <ToastContainer
-          hideProgressBar
-          draggable={false}
-          transition={Slide}
-          autoClose={5000}
-          closeButton={false}
-        />
-        <Helmet>
-          <meta charSet="utf-8" />
-          <link rel="shortcut icon" href="/favicon-orange.ico" />
-        </Helmet>
-        <Router history={history}>
-          <Suspense fallback={loadingIndicator}>
-            <Switch>
-              <AppRoute
-                exact
-                path={BASE_URL}
-                component={App}
-                name={"App"}
-                routeProtected
-              />
-              <AppRoute
-                path={ORG_URL}
-                component={Organization}
-                name={"Organisation"}
-                routeProtected
-              />
-              <AppRoute
-                exact
-                path={USERS_URL}
-                component={Users}
-                name={"Users"}
-                routeProtected
-              />
-              <AppRoute
-                path={USER_AUTH_URL}
-                component={UserAuth}
-                name={"UserAuth"}
-              />
-              <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
-              <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
-              <AppRoute
-                exact
-                path={APPLICATIONS_URL}
-                component={Applications}
-                name={"Home"}
-                routeProtected
-              />
-              <AppRoute
-                path={BUILDER_URL}
-                component={Editor}
-                name={"Editor"}
-                routeProtected
-              />
-              <AppRoute
-                path={APP_VIEW_URL}
-                component={AppViewer}
-                name={"AppViewer"}
-                routeProtected
-                logDisable
-              />
-              <AppRoute component={PageNotFound} name={"PageNotFound"} />
-            </Switch>
-          </Suspense>
-        </Router>
-      </ThemeProvider>
-    </Provider>
-  </DndProvider>,
+  <Provider store={store}>
+    <ThemeProvider theme={theme}>
+      <ToastContainer
+        hideProgressBar
+        draggable={false}
+        transition={Slide}
+        autoClose={5000}
+        closeButton={false}
+      />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <link rel="shortcut icon" href="/favicon-orange.ico" />
+      </Helmet>
+      <Router history={history}>
+        <Suspense fallback={loadingIndicator}>
+          <Switch>
+            <AppRoute
+              exact
+              path={BASE_URL}
+              component={App}
+              name={"App"}
+              routeProtected
+            />
+            <AppRoute
+              path={ORG_URL}
+              component={Organization}
+              name={"Organisation"}
+              routeProtected
+            />
+            <AppRoute
+              exact
+              path={USERS_URL}
+              component={Users}
+              name={"Users"}
+              routeProtected
+            />
+            <AppRoute
+              path={USER_AUTH_URL}
+              component={UserAuth}
+              name={"UserAuth"}
+            />
+            <Redirect exact from={BASE_LOGIN_URL} to={AUTH_LOGIN_URL} />
+            <Redirect exact from={BASE_SIGNUP_URL} to={SIGN_UP_URL} />
+            <AppRoute
+              exact
+              path={APPLICATIONS_URL}
+              component={Applications}
+              name={"Home"}
+              routeProtected
+            />
+            <AppRoute
+              path={BUILDER_URL}
+              component={Editor}
+              name={"Editor"}
+              routeProtected
+            />
+            <AppRoute
+              path={APP_VIEW_URL}
+              component={AppViewer}
+              name={"AppViewer"}
+              routeProtected
+              logDisable
+            />
+            <AppRoute component={PageNotFound} name={"PageNotFound"} />
+          </Switch>
+        </Suspense>
+      </Router>
+    </ThemeProvider>
+  </Provider>,
   document.getElementById("root"),
 );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+// serviceWorker.unregister();
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index 2b55e1b500..37d3eba70a 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -12,6 +12,8 @@ import { UserApplication } from "constants/userConstants";
 import { AppState } from "reducers";
 import EditorHeader from "./EditorHeader";
 import MainContainer from "./MainContainer";
+import { DndProvider } from "react-dnd";
+import TouchBackend from "react-dnd-touch-backend";
 import {
   getCurrentApplicationId,
   getCurrentLayoutId,
@@ -35,6 +37,7 @@ import { RenderModes } from "constants/WidgetConstants";
 import { getCurrentApplication } from "selectors/applicationSelectors";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { fetchPage } from "actions/pageActions";
+import { editorInitializer } from "utils/EditorUtils";
 
 type EditorProps = {
   currentPageName?: string;
@@ -62,9 +65,13 @@ type EditorProps = {
 class Editor extends Component<EditorProps> {
   public state = {
     isDialogOpen: false,
+    registered: false,
   };
 
   componentDidMount() {
+    editorInitializer().then(() => {
+      this.setState({ registered: true });
+    });
     const { applicationId, pageId } = this.props.match.params;
     if (applicationId && pageId) {
       this.props.initEditor(applicationId, pageId);
@@ -116,55 +123,62 @@ class Editor extends Component<EditorProps> {
     if (!this.props.match.params.applicationId) {
       return <Redirect to="/applications" />;
     }
-    if (!this.props.isEditorInitialized) return null;
+    if (!this.props.isEditorInitialized || !this.state.registered) return null;
     return (
-      <div>
-        <Helmet>
-          <meta charSet="utf-8" />
-          <title>Editor | Appsmith</title>
-        </Helmet>
-        <EditorHeader
-          isSaving={this.props.isSaving}
-          pageName={this.props.currentPageName}
-          onPublish={this.handlePublish}
-          onCreatePage={this.handleCreatePage}
-          pages={this.props.pages}
-          currentPageId={this.props.currentPageId}
-          currentApplicationId={this.props.currentApplicationId}
-          isPublishing={this.props.isPublishing}
-          publishedTime={this.props.publishedTime}
-          createModal={this.props.createModal}
-        />
-        <MainContainer />
-        <Dialog
-          isOpen={this.state.isDialogOpen}
-          canOutsideClickClose={true}
-          canEscapeKeyClose={true}
-          title="Application Published"
-          onClose={this.handleDialogClose}
-          icon="tick-circle"
-        >
-          <div className={Classes.DIALOG_BODY}>
-            <p>
-              {
-                "Your awesome application is now published with the current changes!"
-              }
-            </p>
-          </div>
-          <div className={Classes.DIALOG_FOOTER}>
-            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-              <AnchorButton
-                target={this.props.currentApplicationId}
-                href={getApplicationViewerPageURL(
-                  this.props.currentApplicationId,
-                  this.props.currentPageId,
-                )}
-                text="View Application"
-              />
+      <DndProvider
+        backend={TouchBackend}
+        options={{
+          enableMouseEvents: true,
+        }}
+      >
+        <div>
+          <Helmet>
+            <meta charSet="utf-8" />
+            <title>Editor | Appsmith</title>
+          </Helmet>
+          <EditorHeader
+            isSaving={this.props.isSaving}
+            pageName={this.props.currentPageName}
+            onPublish={this.handlePublish}
+            onCreatePage={this.handleCreatePage}
+            pages={this.props.pages}
+            currentPageId={this.props.currentPageId}
+            currentApplicationId={this.props.currentApplicationId}
+            isPublishing={this.props.isPublishing}
+            publishedTime={this.props.publishedTime}
+            createModal={this.props.createModal}
+          />
+          <MainContainer />
+          <Dialog
+            isOpen={this.state.isDialogOpen}
+            canOutsideClickClose={true}
+            canEscapeKeyClose={true}
+            title="Application Published"
+            onClose={this.handleDialogClose}
+            icon="tick-circle"
+          >
+            <div className={Classes.DIALOG_BODY}>
+              <p>
+                {
+                  "Your awesome application is now published with the current changes!"
+                }
+              </p>
             </div>
-          </div>
-        </Dialog>
-      </div>
+            <div className={Classes.DIALOG_FOOTER}>
+              <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+                <AnchorButton
+                  target={this.props.currentApplicationId}
+                  href={getApplicationViewerPageURL(
+                    this.props.currentApplicationId,
+                    this.props.currentPageId,
+                  )}
+                  text="View Application"
+                />
+              </div>
+            </div>
+          </Dialog>
+        </div>
+      </DndProvider>
     );
   }
 }
diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx
index d0709b82b6..427cd9d4dd 100644
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@@ -3,12 +3,8 @@ import { getAppsmithConfigs } from "configs";
 import * as Sentry from "@sentry/browser";
 import AnalyticsUtil from "./AnalyticsUtil";
 import FontFaceObserver from "fontfaceobserver";
-import PropertyControlRegistry from "./PropertyControlRegistry";
-import WidgetBuilderRegistry from "./WidgetRegistry";
 import { Property } from "api/ActionAPI";
 import _ from "lodash";
-import moment from "moment-timezone";
-import ValidationRegistry from "./ValidationRegistry";
 import { ActionDataState } from "reducers/entityReducers/actionsReducer";
 import * as log from "loglevel";
 import { LogLevelDesc } from "loglevel";
@@ -27,10 +23,6 @@ export const createReducer = (
 };
 
 export const appInitializer = () => {
-  WidgetBuilderRegistry.registerWidgetBuilders();
-  PropertyControlRegistry.registerPropertyControlBuilders();
-  ValidationRegistry.registerInternalValidators();
-  moment.tz.setDefault(moment.tz.guess());
   const appsmithConfigs = getAppsmithConfigs();
   if (appsmithConfigs.sentry.enabled && appsmithConfigs.sentry.config) {
     Sentry.init(appsmithConfigs.sentry.config);
diff --git a/app/client/src/utils/EditorUtils.ts b/app/client/src/utils/EditorUtils.ts
new file mode 100644
index 0000000000..d2ade871a1
--- /dev/null
+++ b/app/client/src/utils/EditorUtils.ts
@@ -0,0 +1,11 @@
+import WidgetBuilderRegistry from "./WidgetRegistry";
+import PropertyControlRegistry from "./PropertyControlRegistry";
+import ValidationRegistry from "./ValidationRegistry";
+export const editorInitializer = async () => {
+  WidgetBuilderRegistry.registerWidgetBuilders();
+  PropertyControlRegistry.registerPropertyControlBuilders();
+  ValidationRegistry.registerInternalValidators();
+
+  const moment = await import("moment-timezone");
+  moment.tz.setDefault(moment.tz.guess());
+};
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
index a2893a52ca..5a7638faff 100644
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/app/client/src/utils/WidgetRegistry.tsx
@@ -37,8 +37,7 @@ import FormButtonWidget, {
 import IconWidget, { IconWidgetProps } from "widgets/IconWidget";
 
 import CanvasWidget from "widgets/CanvasWidget";
-
-class WidgetBuilderRegistry {
+export default class WidgetBuilderRegistry {
   static registerWidgetBuilders() {
     WidgetFactory.registerWidgetBuilder(
       "CONTAINER_WIDGET",
@@ -281,5 +280,3 @@ class WidgetBuilderRegistry {
     );
   }
 }
-
-export default WidgetBuilderRegistry;
diff --git a/app/client/src/widgets/ChartWidget.tsx b/app/client/src/widgets/ChartWidget.tsx
index 2afc14a0e4..4972f4e030 100644
--- a/app/client/src/widgets/ChartWidget.tsx
+++ b/app/client/src/widgets/ChartWidget.tsx
@@ -7,7 +7,9 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import Skeleton from "components/utils/Skeleton";
 
 const ChartComponent = lazy(() =>
-  import("components/designSystems/appsmith/ChartComponent"),
+  import(
+    /* webpackPrefetch: true */ "components/designSystems/appsmith/ChartComponent"
+  ),
 );
 
 class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 4c256d127a..d2c75b7ff3 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -16,7 +16,9 @@ import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 
 const TableComponent = lazy(() =>
-  import("components/designSystems/syncfusion/TableComponent"),
+  import(
+    /* webpackPrefetch: true */ "components/designSystems/syncfusion/TableComponent"
+  ),
 );
 
 function constructColumns(

From 8fc9c687826904488ead0af261d9cf3ac6379790 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Thu, 16 Apr 2020 18:30:53 +0530
Subject: [PATCH 18/31] App viewer fix

---
 app/client/public/index.html                  |  8 +--
 .../syncfusion/TableComponent.tsx             | 10 +++
 app/client/src/index.css                      | 71 -------------------
 app/client/src/index.tsx                      | 22 ++++--
 app/client/src/pages/AppViewer/index.tsx      |  9 ++-
 5 files changed, 37 insertions(+), 83 deletions(-)

diff --git a/app/client/public/index.html b/app/client/public/index.html
index e9dc0a0da1..24a0973d06 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -2,15 +2,13 @@
 <html lang="en">
 
 <head>
-  <script rel=preload type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
-  <script rel=preload type="text/javascript" src="/tinymce/tinymce.min.js"></script>
+  <script rel="prefetch" type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
+  <script rel="prefetch" type="text/javascript" src="/tinymce/tinymce.min.js"></script>
   <meta charset="utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="theme-color" content="#000000" />
 
-  <link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />  
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  
+  <link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />    
   <title>Appsmith</title>
 </head>
 
diff --git a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
index 152efe03ca..e7096ab376 100644
--- a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
+++ b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
@@ -35,6 +35,16 @@ import {
   AUTOFIT_COLUMN,
 } from "constants/messages";
 
+import "@syncfusion/ej2-base/styles/material.css";
+import "@syncfusion/ej2-buttons/styles/material.css";
+import "@syncfusion/ej2-calendars/styles/material.css";
+import "@syncfusion/ej2-dropdowns/styles/material.css";
+import "@syncfusion/ej2-inputs/styles/material.css";
+import "@syncfusion/ej2-navigations/styles/material.css";
+import "@syncfusion/ej2-popups/styles/material.css";
+import "@syncfusion/ej2-splitbuttons/styles/material.css";
+import "@syncfusion/ej2-react-grids/styles/material.css";
+
 export interface TableComponentProps {
   data: object[];
   columns: ColumnModel[];
diff --git a/app/client/src/index.css b/app/client/src/index.css
index 0147eb6149..a5528c0586 100755
--- a/app/client/src/index.css
+++ b/app/client/src/index.css
@@ -2,15 +2,6 @@
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
 
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";
 
 body {
   margin: 0;
@@ -51,72 +42,10 @@ div.bp3-popover-arrow {
   cursor: default !important;
 }
 
-/* .bp3-intent-primary:not(.bp3-icon):not(:hover), input:checked ~ span.bp3-control-indicator {
-  background: #29CCA3 !important;
-  box-shadow: none !important;
-}
-.bp3-intent-primary {
-  border-radius: 4px !important;
-} */
-
-.pace {
-  -webkit-pointer-events: none;
-  pointer-events: none;
-
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
 .pace-inactive {
   display: none;
 }
 
-/* The color of the loader is defined by the theme
-   TODO(abhinav): move this into the app to wrap
-*/
-.pace > div.pace-progress {
-  background: #29CCA3;
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  right: 100%;
-  width: 100%;
-  height: 5px;
-}
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 
 .display-none {
   display: none;
diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
index 88ad98ec32..4e781a1ad0 100755
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@@ -30,20 +30,30 @@ import {
 const loadingIndicator = <Loader />;
 const App = lazy(() => import("./App"));
 const UserAuth = lazy(() =>
-  import(/* webpackPrefetch: 5 */ "./pages/UserAuth"),
+  import(/* webpackChunkName: "auth",webpackPrefetch: 5 */ "./pages/UserAuth"),
+);
+const Editor = lazy(() =>
+  import(/* webpackChunkName: "editor",webpackPrefetch: 3 */ "./pages/Editor"),
 );
-const Editor = lazy(() => import(/* webpackPrefetch: 3 */ "./pages/Editor"));
 const Applications = lazy(() =>
-  import(/* webpackPrefetch: 4 */ "./pages/Applications"),
+  import(
+    /* webpackChunkName: "apps",webpackPrefetch: 4 */ "./pages/Applications"
+  ),
 );
 const PageNotFound = lazy(() =>
-  import(/* webpackPrefetch: true */ "./pages/common/PageNotFound"),
+  import(
+    /* webpackChunkName: "404",webpackPrefetch: true */ "./pages/common/PageNotFound"
+  ),
 );
 const AppViewer = lazy(() =>
-  import(/* webpackPrefetch: 2 */ "./pages/AppViewer"),
+  import(
+    /* webpackChunkName: "viewer",webpackPrefetch: 2 */ "./pages/AppViewer"
+  ),
 );
 const Organization = lazy(() =>
-  import(/* webpackPrefetch: 1 */ "./pages/organization"),
+  import(
+    /* webpackChunkName: "orgs",webpackPrefetch: 1 */ "./pages/organization"
+  ),
 );
 const Users = lazy(() => import(/* webpackPrefetch: true */ "./pages/users"));
 appInitializer();
diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx
index 4f077b437a..c019d1cb36 100644
--- a/app/client/src/pages/AppViewer/index.tsx
+++ b/app/client/src/pages/AppViewer/index.tsx
@@ -33,6 +33,7 @@ import {
   updateWidgetMetaProperty,
 } from "actions/metaActions";
 import AppRoute from "pages/common/AppRoute";
+import { editorInitializer } from "utils/EditorUtils";
 
 const AppViewWrapper = styled.div`
   margin-top: ${props => props.theme.headerHeight};
@@ -69,7 +70,13 @@ export type AppViewerProps = {
 class AppViewer extends Component<
   AppViewerProps & RouteComponentProps<AppViewerRouteParams>
 > {
+  public state = {
+    registered: false,
+  };
   componentDidMount() {
+    editorInitializer().then(() => {
+      this.setState({ registered: true });
+    });
     const { applicationId } = this.props.match.params;
     if (this.props.match.params.applicationId) {
       this.props.initializeAppViewer(applicationId);
@@ -91,7 +98,7 @@ class AppViewer extends Component<
         ),
         loading: false,
       }));
-
+    if (!this.state.registered) return null;
     return (
       <EditorContext.Provider
         value={{

From b5a4e231d7da4bbb6ba8214d3dc6a7f0545c2419 Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Fri, 17 Apr 2020 10:29:43 +0530
Subject: [PATCH 19/31] Remove tinymce external dependency

---
 app/client/craco.build.config.js              | 26 ++++++++++---------
 app/client/package.json                       |  5 ++--
 app/client/public/index.html                  |  1 -
 .../designSystems/appsmith/ChartComponent.tsx |  1 -
 .../appsmith/RichTextEditorComponent.tsx      |  4 +--
 app/client/src/index.tsx                      | 12 ++++-----
 app/client/src/widgets/ChartWidget.tsx        |  2 +-
 .../src/widgets/RichTextEditorWidget.tsx      |  4 ++-
 app/client/src/widgets/TableWidget.tsx        |  2 +-
 app/client/yarn.lock                          |  5 +---
 10 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/app/client/craco.build.config.js b/app/client/craco.build.config.js
index f20adf3bd2..f8526e92ca 100644
--- a/app/client/craco.build.config.js
+++ b/app/client/craco.build.config.js
@@ -1,22 +1,24 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const SentryWebpackPlugin = require('@sentry/webpack-plugin');
-const merge = require('webpack-merge');
-const common = require('./craco.common.config.js');
+const SentryWebpackPlugin = require("@sentry/webpack-plugin");
+const merge = require("webpack-merge");
+const common = require("./craco.common.config.js");
 
-const env = process.env.REACT_APP_ENVIRONMENT
+const env = process.env.REACT_APP_ENVIRONMENT;
 
-const plugins = []
+const plugins = [];
 
-if(env === "PRODUCTION" || env === "STAGING") {
-  plugins.push(new SentryWebpackPlugin({
-    include: 'build',
-    ignore: ['node_modules', 'webpack.config.js'],
-    release: process.env.REACT_APP_SENTRY_RELEASE
-  }))
+if (env === "PRODUCTION" || env === "STAGING") {
+  plugins.push(
+    new SentryWebpackPlugin({
+      include: "build",
+      ignore: ["node_modules", "webpack.config.js"],
+      release: process.env.REACT_APP_SENTRY_RELEASE,
+    }),
+  );
 }
 
 module.exports = merge(common, {
   webpack: {
-    plugins: plugins
+    plugins: plugins,
   },
 });
diff --git a/app/client/package.json b/app/client/package.json
index 3ecf59140a..1e284b1ccb 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -95,7 +95,6 @@
     "shallowequal": "^1.1.0",
     "styled-components": "^4.1.3",
     "tinycolor2": "^1.4.1",
-    "tinymce": "^5.2.0",
     "toposort": "^2.0.2",
     "ts-loader": "^6.0.4",
     "typescript": "^3.6.3",
@@ -165,9 +164,9 @@
     "react-test-renderer": "^16.11.0",
     "redux-devtools": "^3.5.0",
     "redux-devtools-extension": "^2.13.8",
+    "source-map-explorer": "^2.4.2",
     "storybook-addon-designs": "^5.1.1",
-    "webpack-merge": "^4.2.2",
-    "source-map-explorer": "^2.4.2"
+    "webpack-merge": "^4.2.2"
   },
   "husky": {
     "hooks": {
diff --git a/app/client/public/index.html b/app/client/public/index.html
index 24a0973d06..73698b02c1 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -3,7 +3,6 @@
 
 <head>
   <script rel="prefetch" type="text/javascript" src="/shims/realms-shim.umd.min.js"></script>
-  <script rel="prefetch" type="text/javascript" src="/tinymce/tinymce.min.js"></script>
   <meta charset="utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <meta name="theme-color" content="#000000" />
diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index c476318a62..9174cb5ca9 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -196,7 +196,6 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       dataFormat: "json",
       dataSource: dataSource,
     };
-    console.log("chartConfig", chartConfig);
     this.chartInstance = new FusionCharts(chartConfig);
   };
 
diff --git a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
index 0eb86a0f75..83a1cbe223 100644
--- a/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
@@ -1,9 +1,6 @@
 import React from "react";
 import { Editor } from "@tinymce/tinymce-react";
 import styled from "styled-components";
-require("tinymce/tinymce");
-require("tinymce/themes/silver");
-
 const StyledRTEditor = styled.div`
   && {
     width: 100%;
@@ -28,6 +25,7 @@ export const RichtextEditorComponent = (
   return (
     <StyledRTEditor>
       <Editor
+        apiKey="joninoujfadq0q38n0us4tu89d2pawl1jxk4q09vcvxyfqrl"
         value={props.defaultValue}
         disabled={props.isDisabled}
         init={{
diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
index 4e781a1ad0..767314125a 100755
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@@ -28,7 +28,9 @@ import {
 } from "constants/routes";
 
 const loadingIndicator = <Loader />;
-const App = lazy(() => import("./App"));
+const App = lazy(() =>
+  import(/* webpackChunkName: "appsmith",webpackPrefetch: 10 */ "./App"),
+);
 const UserAuth = lazy(() =>
   import(/* webpackChunkName: "auth",webpackPrefetch: 5 */ "./pages/UserAuth"),
 );
@@ -41,9 +43,7 @@ const Applications = lazy(() =>
   ),
 );
 const PageNotFound = lazy(() =>
-  import(
-    /* webpackChunkName: "404",webpackPrefetch: true */ "./pages/common/PageNotFound"
-  ),
+  import(/* webpackChunkName: "404"*/ "./pages/common/PageNotFound"),
 );
 const AppViewer = lazy(() =>
   import(
@@ -51,9 +51,7 @@ const AppViewer = lazy(() =>
   ),
 );
 const Organization = lazy(() =>
-  import(
-    /* webpackChunkName: "orgs",webpackPrefetch: 1 */ "./pages/organization"
-  ),
+  import(/* webpackChunkName: "orgs" */ "./pages/organization"),
 );
 const Users = lazy(() => import(/* webpackPrefetch: true */ "./pages/users"));
 appInitializer();
diff --git a/app/client/src/widgets/ChartWidget.tsx b/app/client/src/widgets/ChartWidget.tsx
index 4972f4e030..2b980b79c0 100644
--- a/app/client/src/widgets/ChartWidget.tsx
+++ b/app/client/src/widgets/ChartWidget.tsx
@@ -8,7 +8,7 @@ import Skeleton from "components/utils/Skeleton";
 
 const ChartComponent = lazy(() =>
   import(
-    /* webpackPrefetch: true */ "components/designSystems/appsmith/ChartComponent"
+    /* webpackPrefetch: true, webpackChunkName: "charts" */ "components/designSystems/appsmith/ChartComponent"
   ),
 );
 
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index 940d5737e8..ab142e9151 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -8,7 +8,9 @@ import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import Skeleton from "components/utils/Skeleton";
 
 const RichtextEditorComponent = lazy(() =>
-  import("components/designSystems/appsmith/RichTextEditorComponent"),
+  import(
+    /* webpackChunkName: "rte",webpackPrefetch: 2 */ "components/designSystems/appsmith/RichTextEditorComponent"
+  ),
 );
 
 class RichTextEditorWidget extends BaseWidget<
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index d2c75b7ff3..92d6ae0ede 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -17,7 +17,7 @@ import Skeleton from "components/utils/Skeleton";
 
 const TableComponent = lazy(() =>
   import(
-    /* webpackPrefetch: true */ "components/designSystems/syncfusion/TableComponent"
+    /* webpackPrefetch: true, webpackChunkName: "table" */ "components/designSystems/syncfusion/TableComponent"
   ),
 );
 
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index cd6512cf8e..0ee3b2fda6 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -2157,6 +2157,7 @@
 "@tinymce/tinymce-react@^3.5.0":
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.5.0.tgz#5017be56aeab1077f09d3f74a386883e5524a33f"
+  integrity sha512-sZPerYmSWQcdk7F9KEvCC3/kPNZ9Bb+dk8rS0RoYyYql/gqgNpLpycC+CC/KhgT0wDaYuRoCcdV1DVZGam+oOg==
   dependencies:
     prop-types "^15.6.2"
 
@@ -13544,10 +13545,6 @@ tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
 
-tinymce@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.2.0.tgz#e838640f61c8a936317bc27a5d2e16c297df3418"
-
 tmp@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"

From 268b77be4704c7aaf9e3155c7919607e1a8fff16 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Fri, 17 Apr 2020 08:17:25 +0000
Subject: [PATCH 20/31] Test fixes

---
 app/client/.gitlab-ci.yml                     | 27 ++++++
 app/client/cypress.json                       |  5 +-
 .../CommonWidgets/Button_spec.js              | 17 +---
 .../CommonWidgets/Container_spec.js           | 13 +--
 .../CommonWidgets/Input_spec.js               | 11 +--
 .../CommonWidgets/Table_spec.js               | 15 +---
 .../CommonWidgets/Text_spec.js                | 16 +---
 .../FormWidgets/CheckBox_spec.js              | 13 +--
 .../FormWidgets/DatePicker_spec.js            | 13 +--
 .../FormWidgets/Dropdown_spec.js              | 13 +--
 .../FormWidgets/FilePicker_spec.js            | 14 +--
 .../FormWidgets/FormWidget_spec.js            | 14 +--
 .../Smoke_TestSuite/FormWidgets/Radio_spec.js | 13 +--
 .../FormWidgets/RichTextEditor_spec.js        |  2 +-
 .../Smoke_TestSuite/ViewWidgets/Chart_spec.js | 13 +--
 .../Smoke_TestSuite/ViewWidgets/Image_spec.js | 20 +----
 app/client/cypress/support/commands.js        | 87 ++++++++++++++-----
 app/client/cypress/support/index.js           | 16 ++++
 18 files changed, 142 insertions(+), 180 deletions(-)

diff --git a/app/client/.gitlab-ci.yml b/app/client/.gitlab-ci.yml
index 89ec8a5b57..b6f48df47d 100644
--- a/app/client/.gitlab-ci.yml
+++ b/app/client/.gitlab-ci.yml
@@ -75,6 +75,33 @@ cypress-test-release:
     - release
     - merge_requests
 
+# cypress-test-fix:
+#   stage: build
+#   script:
+#     - *set_env_variables
+#     - yarn install
+#     # show where the Cypress test runner binaries are cached
+#     - $(npm bin)/cypress cache path
+#     # show all installed versions of Cypress binary
+#     - $(npm bin)/cypress cache list
+#     - $(npm bin)/cypress verify
+#     - curl https://s3.ap-south-1.amazonaws.com/dev.public.appsmith/react-build/build1.tar.gz --output build.tar.gz
+#     - tar xvf build.tar.gz
+#     - yarn global add serve
+#     - serve -s build -p 3000 &
+#     # This is required in order to ensure that all the test cases pass
+#     - echo "127.0.0.1	dev.appsmith.com" >> /etc/hosts
+#     - yarn test
+#   artifacts:
+#     when: always
+#     expire_in: 1 week
+#     paths:
+#       - cypress/screenshots
+#       - cypress/videos
+#   only:
+#     # We don't test on master right now because of changing environment variables for REACT_APP_BASE_URL. Need to figure out a way to configure that.
+#     - fix/test-revert
+
 docker-package-release:
   image: docker:dind
   services:
diff --git a/app/client/cypress.json b/app/client/cypress.json
index 430cc545c4..b0c01cbf99 100644
--- a/app/client/cypress.json
+++ b/app/client/cypress.json
@@ -1,8 +1,9 @@
 {
   "baseUrl":"http://dev.appsmith.com:3000/",
-  "defaultCommandTimeout": 10000,
+  "defaultCommandTimeout": 20000,
+  "requestTimeout": 21000,
   "pageLoadTimeout": 20000,
-
+  "video": false,
   "reporter": "mochawesome",
   "reporterOptions": {
     "reportDir": "results",
diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
index 91aae816f2..dc50f7b2be 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
@@ -1,25 +1,14 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 
-context("Cypress test", function() {
+describe("Button Widget Functionality", function() {
   it("Button Widget Functionality", function() {
     cy.NavigateToCommonWidgets();
     cy.get(".t--nav-link-widgets-editor").click();
     cy.get(widgetsPage.buttonWidget).click({ force: true });
 
     //Changing the text on the Button
-    cy.get(".CodeMirror textarea")
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("Test Button Text", { force: true })
-      .wait(5000);
-
-    // TODO instead of testing the textarea, test the actual widget
-    // cy.get(".CodeMirror textarea")
-    //   .first()
-    //   .should("have.value", "Test Button Text");
+    cy.testCodeMirror("Test Button Text");
 
     //Select and verify the Show Modal from the onClick dropdown
     cy.get(widgetsPage.buttonOnClick)
@@ -34,6 +23,6 @@ context("Cypress test", function() {
       .find(".bp3-button-text")
       .should("have.text", "Show Modal");
     //Verify Modal Widget
-    cy.CreateModal();
+    // cy.CreateModal();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js
index d63e0c60fe..74a96b3306 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js
@@ -1,7 +1,7 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 
-context("Cypress test", function() {
+describe("Container Widget Functionality", function() {
   it("Container Widget Functionality", function() {
     cy.NavigateToCommonWidgets();
     cy.get(widgetsPage.containerWidget)
@@ -12,16 +12,7 @@ context("Cypress test", function() {
       .first()
       .click();
     //Checking the edit props for container changing the background color of container
-    cy.get(".CodeMirror textarea")
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("#C0C0C0", { force: true })
-      .wait(5000);
-
-    // TODO instead of testing the textarea, test the actual widget
-    // cy.get(".CodeMirror textarea").should("have.value", "#C0C0C0");
+    cy.testCodeMirror("#C0C0C0");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js
index f8eb3cdc51..0be816d1f3 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js
@@ -1,7 +1,7 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 
-context("Cypress test", function() {
+describe("Input Widget Functionality", function() {
   it("Input Widget Functionality", function() {
     cy.NavigateToCommonWidgets();
     cy.get(widgetsPage.inputWidget)
@@ -12,14 +12,7 @@ context("Cypress test", function() {
       .first()
       .click();
     //Checking the edit props for container and changing the Input label name
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("Test Input Label", { force: true })
-      .wait(5000);
+    cy.testCodeMirror("Test Input Label");
 
     cy.get(commonlocators.editPropCrossButton).click();
   });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
index 488d5ca416..42221aa3f5 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
@@ -1,7 +1,7 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 
-context("Cypress test", function() {
+describe("Table Widget Functionality", function() {
   it("Table Widget Functionality", function() {
     cy.NavigateToCommonWidgets();
     cy.get(widgetsPage.tableWidget)
@@ -12,18 +12,6 @@ context("Cypress test", function() {
       .first()
       .click();
     //Checking the edit props for Table Widget and also the properties of Table widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .should("be.empty")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("{{UsersApi.data}}", {
-        parseSpecialCharSequences: false,
-        force: true,
-      })
-      .wait(5000);
 
     cy.get(widgetsPage.tableOnRowSelected)
       .get(commonlocators.dropdownSelectButton)
@@ -33,6 +21,7 @@ context("Cypress test", function() {
       .children()
       .contains("Navigate to URL")
       .click();
+    cy.wait("@updateLayout");
     cy.get(widgetsPage.tableOnRowSelected)
       .get(commonlocators.dropdownSelectButton)
       .first()
diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Text_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Text_spec.js
index cdbca668f8..d7e688f3a1 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Text_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Text_spec.js
@@ -1,7 +1,7 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
 
-context("Cypress test", function() {
+describe("Text Widget Functionality", function() {
   it("Text Widget Functionality", function() {
     cy.NavigateToCommonWidgets();
     cy.get(widgetsPage.textWidget)
@@ -12,19 +12,7 @@ context("Cypress test", function() {
       .first()
       .click();
     //Changing the text on the text widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("Test text", { force: true })
-      .wait(5000);
-
-    // TODO instead of testing the textarea, test the actual widget
-    // cy.get(".CodeMirror textarea")
-    //   .first()
-    //   .should("have.value", "Test text");
+    cy.testCodeMirror("Test text");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js
index 24f7d0e9a7..0bde83a76f 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("Checkbox Widget Functionality", function() {
   it("Checkbox Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.checkboxWidget)
@@ -12,16 +12,7 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for Checkbox and also the properties of Checkbox widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .should("be.empty")
-      .clear({ force: true })
-      .type("Test Checkbox");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "Test Checkbox");
+    cy.testCodeMirror("Test Checkbox");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js
index 6dbf32baf9..2ee9f08314 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("DatePicker Widget Functionality", function() {
   it("DatePicker Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.datepickerWidget)
@@ -12,16 +12,7 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for DatePicker and also the properties of DatePicker widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .should("be.empty")
-      .clear({ force: true })
-      .type("From Date");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "From Date");
+    cy.testCodeMirror("From Date");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js
index 8e5b3af13e..076b63b647 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("Dropdown Widget Functionality", function() {
   it("Dropdown Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.dropdownWidget)
@@ -12,16 +12,7 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for Dropdown and also the properties of Dropdown widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("Test Dropdown");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "Test Dropdown");
+    cy.testCodeMirror("Test Dropdown");
 
     cy.get(formWidgetsPage.dropdownSelectionType)
       .find(".bp3-button")
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FilePicker_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FilePicker_spec.js
index 01c7cfb7a9..368291a6a1 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FilePicker_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FilePicker_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("FilePicker Widget Functionality", function() {
   it("FilePicker Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.filepickerWidget)
@@ -12,16 +12,8 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for FilePicker and also the properties of FilePicker widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .should("be.empty")
-      .clear({ force: true })
-      .type("Upload Files");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "Upload Files");
+
+    cy.testCodeMirror("Upload Files");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js
index 3d0db8fe43..8fbf98c304 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("Form Widget Functionality", function() {
   it("Form Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.formWidget)
@@ -12,16 +12,8 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for Form and also the properties of Form widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .should("be.empty")
-      .clear({ force: true })
-      .type("Gray");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "Gray");
+    cy.testCodeMirror("Gray");
+
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js
index 5470127547..e028b968f9 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("Radio Widget Functionality", function() {
   it("Radio Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.radioWidget)
@@ -12,16 +12,7 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for Radio Widget and also the properties of Radio widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("Test Radio");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "Test Radio");
+    cy.testCodeMirror("Test Radio");
     cy.get(formWidgetsPage.radioOnSelectionChangeDropdown)
       .get(commonlocators.dropdownSelectButton)
       .click({ force: true })
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
index 8e0a32e9cd..588fe324dc 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const formWidgetsPage = require("../../../locators/FormWidgets.json");
 
-context("Cypress test", function() {
+describe("RichTextEditor Widget Functionality", function() {
   it("RichTextEditor Widget Functionality", function() {
     cy.NavigateToFormWidgets();
     cy.get(formWidgetsPage.richTextEditorWidget)
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js
index 82172503c9..9715ee3187 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const viewWidgetsPage = require("../../../locators/ViewWidgets.json");
 
-context("Cypress test", function() {
+describe("Chart Widget Functionality", function() {
   it("Chart Widget Functionality", function() {
     cy.NavigateToViewWidgets();
     cy.get(viewWidgetsPage.chartWidget)
@@ -12,16 +12,7 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for Chart and also the properties of Chart widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type("App Sign Up");
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should("have.value", "App Sign Up");
+    cy.testCodeMirror("App Sign Up");
     cy.get(viewWidgetsPage.chartSelectChartType)
       .find(".bp3-button")
       .click({ force: true })
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js
index a3c3b46ef9..b1b066a25a 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../locators/commonlocators.json");
 const viewWidgetsPage = require("../../../locators/ViewWidgets.json");
 
-context("Cypress test", function() {
+describe("Image Widget Functionality", function() {
   it("Image Widget Functionality", function() {
     cy.NavigateToViewWidgets();
     cy.get(viewWidgetsPage.imageWidget)
@@ -12,21 +12,9 @@ context("Cypress test", function() {
       .first()
       .click({ force: true });
     //Checking the edit props for Image and also the properties of Image widget
-    cy.get(".CodeMirror textarea")
-      .first()
-      .focus()
-      .type("{ctrl}{shift}{downarrow}")
-      .clear({ force: true })
-      .should("be.empty")
-      .type(
-        "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
-      );
-    cy.get(".CodeMirror textarea")
-      .first()
-      .should(
-        "have.value",
-        "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
-      );
+    cy.testCodeMirror(
+      "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
+    );
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 147670193c..82055479e8 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -10,15 +10,20 @@ Cypress.Commands.add("LogintoApp", (uname, pword) => {
   cy.get(loginPage.username).type(uname);
   cy.get(loginPage.password).type(pword);
   cy.get(loginPage.submitBtn).click();
+  cy.wait("@applications").should(
+    "have.nested.property",
+    "response.body.responseMeta.status",
+    200,
+  );
 });
 
 Cypress.Commands.add("SearchApp", appname => {
   cy.get(homePage.searchInput).type(appname);
-  cy.wait(2000);
   cy.get(homePage.appEditIcon)
     .first()
     .click({ force: true });
   cy.get("#loading").should("not.exist");
+  // Wait added because after opening the application editor, sometimes it takes a little time.
 });
 
 Cypress.Commands.add("NavigateToCommonWidgets", () => {
@@ -28,6 +33,7 @@ Cypress.Commands.add("NavigateToCommonWidgets", () => {
     .click({ force: true });
   cy.get("#loading").should("not.exist");
   cy.get(pages.widgetsEditor).click();
+  cy.wait("@getPage");
   cy.get("#loading").should("not.exist");
 });
 
@@ -51,30 +57,65 @@ Cypress.Commands.add("NavigateToViewWidgets", () => {
   cy.get("#loading").should("not.exist");
 });
 
-Cypress.Commands.add("CreateModal", () => {
-  cy.get(modalWidgetPage.selectModal).click();
-  cy.get(modalWidgetPage.createModalButton).click({ force: true });
-  cy.get(modalWidgetPage.controlModalType)
-    .find(".bp3-button")
-    .click({ force: true })
-    .get("ul.bp3-menu")
-    .children()
-    .contains("Alert Modal")
-    .click();
-  cy.get(modalWidgetPage.controlModalType)
-    .find(".bp3-button > .bp3-button-text")
-    .should("have.text", "Alert Modal");
-  cy.get(commonlocators.editPropCrossButton).click();
-  cy.get(modalWidgetPage.modalWidget)
-    .get(commonlocators.deleteWidgetIcon)
-    .first()
-    .click({ force: true });
-});
+// Cypress.Commands.add("CreateModal", () => {
+//   cy.get(modalWidgetPage.selectModal).click();
+//   cy.get(modalWidgetPage.createModalButton).click({ force: true });
+//   cy.get(modalWidgetPage.controlModalType)
+//     .find(".bp3-button")
+//     .click({ force: true })
+//     .get("ul.bp3-menu")
+//     .children()
+//     .contains("Alert Modal")
+//     .click();
+//   cy.get(modalWidgetPage.controlModalType)
+//     .find(".bp3-button > .bp3-button-text")
+//     .should("have.text", "Alert Modal");
+//   cy.get(commonlocators.editPropCrossButton).click();
+//   cy.get(modalWidgetPage.modalWidget)
+//     .get(commonlocators.deleteWidgetIcon)
+//     .first()
+//     .click({ force: true });
+// });
 
 Cypress.Commands.add("PublishtheApp", () => {
   cy.xpath(homePage.homePageID).contains("All changes saved");
   cy.get(homePage.publishButton).click();
-  // cy.window().then(win => {
-  //   cy.get(homePage.publishCrossButton).click();
-  // });
+  cy.wait("@publishApp");
+  cy.get(homePage.publishCrossButton).click();
+});
+
+Cypress.Commands.add("getCodeMirror", () => {
+  return cy
+    .get(".CodeMirror textarea")
+    .first()
+    .focus()
+    .type("{ctrl}{shift}{downarrow}");
+});
+
+Cypress.Commands.add("testCodeMirror", value => {
+  cy.get(".CodeMirror textarea")
+    .first()
+    .focus()
+    .type("{ctrl}{shift}{downarrow}")
+    .then($cm => {
+      if ($cm.val() !== "") {
+        cy.get(".CodeMirror textarea")
+          .first()
+          .clear({
+            force: true,
+          });
+        cy.wait("@updateLayout");
+      }
+
+      cy.get(".CodeMirror textarea")
+        .first()
+        .type(value, {
+          force: true,
+          parseSpecialCharSequences: false,
+        });
+      cy.wait("@updateLayout");
+      cy.get(".CodeMirror textarea")
+        .first()
+        .should("have.value", value);
+    });
 });
diff --git a/app/client/cypress/support/index.js b/app/client/cypress/support/index.js
index 7c57379787..2efb143d99 100644
--- a/app/client/cypress/support/index.js
+++ b/app/client/cypress/support/index.js
@@ -19,6 +19,22 @@ const inputData = require("../fixtures/inputdata.json");
 // Import commands.js using ES2015 syntax:
 import "./commands";
 before(function() {
+  cy.server();
+  cy.route("GET", "/api/v1/applications").as("applications");
+  cy.route("GET", "/api/v1/users/profile").as("getUser");
+  cy.route("GET", "/api/v1/plugins").as("getPlugins");
+
+  cy.route("GET", "/api/v1/configs/name/propertyPane").as("getPropertyPane");
+  cy.route("GET", "/api/v1/datasources").as("getDataSources");
+  cy.route("GET", "/api/v1/pages/application/*").as("getPagesForApp");
+  cy.route("GET", "/api/v1/pages/*").as("getPage");
+  cy.route("GET", "/api/v1/actions*").as("getActions");
+
+  cy.route("GET", "/api/v1/organizations").as("organizations");
+  cy.route("POST", "/api/v1/actions/execute").as("executeAction");
+  cy.route("POST", "/api/v1/applications/publish/*").as("publishApp");
+  cy.route("PUT", "/api/v1/layouts/*/pages/*").as("updateLayout");
+
   cy.LogintoApp(loginData.username, loginData.password);
   cy.SearchApp(inputData.appname);
 });

From 9bcb0d32e904e4241e72a42413516621c09e22db Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Fri, 17 Apr 2020 09:25:31 +0000
Subject: [PATCH 21/31] Fix issue where new REST actions where not getting the
 plugin id

---
 .../src/pages/Editor/APIEditor/ApiHomeScreen.tsx      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
index cbde09e011..84e10ae8f3 100644
--- a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
@@ -8,6 +8,7 @@ import InfiniteScroll from "react-infinite-scroller";
 import {
   DEFAULT_API_ACTION,
   DEFAULT_PROVIDER_OPTION,
+  REST_PLUGIN_PACKAGE_NAME,
 } from "constants/ApiEditorConstants";
 import {
   getCurlImportPageURL,
@@ -44,6 +45,8 @@ import Spinner from "components/editorComponents/Spinner";
 // import PostmanLogo from "assets/images/Postman-logo.svg";
 import CurlLogo from "assets/images/Curl-logo.svg";
 import { FetchProviderWithCategoryRequest } from "api/ProvidersApi";
+import { Plugin } from "api/PluginApi";
+import _ from "lodash";
 
 // const SearchContainer = styled.div`
 //   display: flex;
@@ -221,6 +224,7 @@ type ApiHomeScreenProps = {
   fetchProviderCategories: () => void;
   providerCategories: string[];
   pageId: string;
+  plugins: Plugin[];
   applicationId: string;
   actions: ActionDataState;
   createAction: (data: Partial<RestAction>) => void;
@@ -279,13 +283,15 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
   }
 
   handleCreateNew = (params: string) => {
-    const { actions } = this.props;
+    const { actions, plugins } = this.props;
     const pageId = new URLSearchParams(params).get("importTo");
-    if (pageId) {
+    const plugin = _.find(plugins, { packageName: REST_PLUGIN_PACKAGE_NAME });
+    if (pageId && plugin) {
       const newActionName = createNewApiName(actions, pageId);
       this.props.createAction({
         ...DEFAULT_API_ACTION,
         name: newActionName,
+        pluginId: plugin.id,
         pageId,
       });
     }
@@ -537,6 +543,7 @@ const mapStateToProps = (state: AppState) => {
     actions: state.entities.actions,
     providersTotal,
     providerCategories: getProviderCategories(state),
+    plugins: state.entities.plugins.list,
     isSwitchingCategory,
   };
 };

From c2d3b9952d4ca4715f6963c066e0ae80a92dea7d Mon Sep 17 00:00:00 2001
From: Abhinav Jha <abhinav@appsmith.com>
Date: Fri, 17 Apr 2020 15:03:36 +0530
Subject: [PATCH 22/31] Fix filepicker issue. Add netlify.toml. Remove
 chance.js

---
 app/client/netlify.toml                       |  5 ++
 .../appsmith/FilePickerComponent.tsx          | 10 ---
 .../blueprint/ButtonComponent.tsx             |  1 -
 app/client/src/constants/WidgetConstants.tsx  | 65 +++++++------------
 app/client/src/index.tsx                      |  6 --
 .../ApplicationPayloads.tsx                   | 13 ++--
 6 files changed, 33 insertions(+), 67 deletions(-)

diff --git a/app/client/netlify.toml b/app/client/netlify.toml
index 7816bc5ae3..6676f67554 100644
--- a/app/client/netlify.toml
+++ b/app/client/netlify.toml
@@ -1,3 +1,8 @@
+[[headers]]
+  for = "/static/*"
+  [header.values]
+    cache-control = "max-age=604800"
+
 [context.production]
   [context.production.environment]
     REACT_APP_ENVIRONMENT = "PRODUCTION"
diff --git a/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx b/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx
index ee451922a1..24a40f8134 100644
--- a/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/FilePickerComponent.tsx
@@ -4,7 +4,6 @@ import "@uppy/core/dist/style.css";
 import "@uppy/dashboard/dist/style.css";
 import "@uppy/webcam/dist/style.css";
 import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
-// import { DashboardModal } from "@uppy/react";
 
 class FilePickerComponent extends React.Component<
   FilePickerComponentProps,
@@ -18,7 +17,6 @@ class FilePickerComponent extends React.Component<
   }
 
   openModal = () => {
-    // this.setState({ isOpen: true });
     this.props.uppy.getPlugin("Dashboard").openModal();
   };
 
@@ -36,19 +34,11 @@ class FilePickerComponent extends React.Component<
           text={label}
           onClick={this.openModal}
         />
-        {/* <DashboardModal
-          open={this.state.isOpen}
-          closeModalOnClickOutside={true}
-          // plugins={["GoogleDrive", "Url", "OneDrive", "Webcam"]}
-          onRequestClose={this.closeModal}
-          uppy={this.props.uppy}
-        />**/}
       </React.Fragment>
     );
   }
 
   public closeModal() {
-    // this.setState({ isOpen: false });
     this.props.uppy.getPlugin("Dashboard").closeModal();
   }
 }
diff --git a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
index ec7144c2b5..5d79596bc2 100644
--- a/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
@@ -45,7 +45,6 @@ const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
           : props.theme.colors.secondary};
     border-radius: 4px;
     font-weight: ${props => props.theme.fontWeights[2]};
-    font-family: "DM Sans";
     outline: none;
     &.bp3-button {
       padding: 0px 10px;
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 6f1ba6bb16..a2e1505b94 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -1,46 +1,27 @@
-export type WidgetType =
-  | "TEXT_WIDGET"
-  | "RICH_TEXT_EDITOR_WIDGET"
-  | "IMAGE_WIDGET"
-  | "CONTAINER_WIDGET"
-  | "BUTTON_WIDGET"
-  | "DATE_PICKER_WIDGET"
-  | "TABLE_WIDGET"
-  | "DROP_DOWN_WIDGET"
-  | "CHECKBOX_WIDGET"
-  | "RADIO_GROUP_WIDGET"
-  | "FILE_PICKER_WIDGET"
-  | "INPUT_WIDGET"
-  | "TABS_WIDGET"
-  | "CHART_WIDGET"
-  | "MODAL_WIDGET"
-  | "FORM_WIDGET"
-  | "FORM_BUTTON_WIDGET"
-  | "MAP_WIDGET"
-  | "CANVAS_WIDGET"
-  | "ICON_WIDGET";
+export enum WidgetTypes {
+  BUTTON_WIDGET = "BUTTON_WIDGET",
+  TEXT_WIDGET = "TEXT_WIDGET",
+  IMAGE_WIDGET = "IMAGE_WIDGET",
+  INPUT_WIDGET = "INPUT_WIDGET",
+  CONTAINER_WIDGET = "CONTAINER_WIDGET",
+  DATE_PICKER_WIDGET = "DATE_PICKER_WIDGET",
+  TABLE_WIDGET = "TABLE_WIDGET",
+  DROP_DOWN_WIDGET = "DROP_DOWN_WIDGET",
+  CHECKBOX_WIDGET = "CHECKBOX_WIDGET",
+  RADIO_GROUP_WIDGET = "RADIO_GROUP_WIDGET",
+  TABS_WIDGET = "TABS_WIDGET",
+  MODAL_WIDGET = "MODAL_WIDGET",
+  RICH_TEXT_EDITOR_WIDGET = "RICH_TEXT_EDITOR_WIDGET",
+  CHART_WIDGET = "CHART_WIDGET",
+  FORM_WIDGET = "FORM_WIDGET",
+  FORM_BUTTON_WIDGET = "FORM_BUTTON_WIDGET",
+  MAP_WIDGET = "MAP_WIDGET",
+  CANVAS_WIDGET = "CANVAS_WIDGET",
+  ICON_WIDGET = "ICON_WIDGET",
+  FILE_PICKER_WIDGET = "FILE_PICKER_WIDGET",
+}
 
-export const WidgetTypes: { [id: string]: WidgetType } = {
-  BUTTON_WIDGET: "BUTTON_WIDGET",
-  TEXT_WIDGET: "TEXT_WIDGET",
-  IMAGE_WIDGET: "IMAGE_WIDGET",
-  INPUT_WIDGET: "INPUT_WIDGET",
-  CONTAINER_WIDGET: "CONTAINER_WIDGET",
-  DATE_PICKER_WIDGET: "DATE_PICKER_WIDGET",
-  TABLE_WIDGET: "TABLE_WIDGET",
-  DROP_DOWN_WIDGET: "DROP_DOWN_WIDGET",
-  CHECKBOX_WIDGET: "CHECKBOX_WIDGET",
-  RADIO_GROUP_WIDGET: "RADIO_GROUP_WIDGET",
-  TABS_WIDGET: "TABS_WIDGET",
-  MODAL_WIDGET: "MODAL_WIDGET",
-  RICH_TEXT_EDITOR_WIDGET: "RICH_TEXT_EDITOR_WIDGET",
-  CHART_WIDGET: "CHART_WIDGET",
-  FORM_WIDGET: "FORM_WIDGET",
-  FORM_BUTTON_WIDGET: "FORM_BUTTON_WIDGET",
-  MAP_WIDGET: "MAP_WIDGET",
-  CANVAS_WIDGET: "CANVAS_WIDGET",
-  ICON_WIDGET: "ICON_WIDGET",
-};
+export type WidgetType = keyof typeof WidgetTypes;
 
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL";
 
diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
index 767314125a..934dc32956 100755
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@@ -4,7 +4,6 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import Loader from "pages/common/Loader";
 import "./index.css";
-// import * as serviceWorker from "./serviceWorker";
 import { Router, Switch, Redirect } from "react-router-dom";
 import history from "./utils/history";
 import { ThemeProvider, theme } from "constants/DefaultTheme";
@@ -128,8 +127,3 @@ ReactDOM.render(
   </Provider>,
   document.getElementById("root"),
 );
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-// serviceWorker.unregister();
diff --git a/app/client/src/mockComponentProps/ApplicationPayloads.tsx b/app/client/src/mockComponentProps/ApplicationPayloads.tsx
index 736d49f9e5..0ea6a31af4 100644
--- a/app/client/src/mockComponentProps/ApplicationPayloads.tsx
+++ b/app/client/src/mockComponentProps/ApplicationPayloads.tsx
@@ -1,13 +1,10 @@
 import { ApplicationPayload } from "constants/ReduxActionConstants";
-import Chance from "chance";
-
-const chance = new Chance();
-
+import { generateReactKey } from "utils/generators";
 export const getApplicationPayload = (): ApplicationPayload => ({
-  id: chance.guid(),
-  name: chance.word(),
-  organizationId: chance.guid(),
-  pageCount: chance.natural(),
+  id: generateReactKey(),
+  name: generateReactKey(),
+  organizationId: generateReactKey(),
+  pageCount: 4,
 });
 
 export const getApplicationPayloads = (count: number): ApplicationPayload[] => {

From f0d805cf526592537b4227b8716004010c066fbf Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Fri, 17 Apr 2020 16:05:36 +0530
Subject: [PATCH 23/31] Adding pluginId in datasource instead of action

---
 app/client/src/api/ActionAPI.tsx                        | 5 ++++-
 app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/client/src/api/ActionAPI.tsx b/app/client/src/api/ActionAPI.tsx
index 8498f24397..a1605af5c5 100644
--- a/app/client/src/api/ActionAPI.tsx
+++ b/app/client/src/api/ActionAPI.tsx
@@ -64,7 +64,10 @@ export interface ActionCreateUpdateResponse extends ApiResponse {
 export interface RestAction {
   id: string;
   name: string;
-  datasource: Pick<Datasource, "id"> | Omit<Datasource, "id">;
+  datasource:
+    | Pick<Datasource, "id">
+    | Omit<Datasource, "id">
+    | Partial<Datasource>;
   pluginType?: string;
   pageId: string;
   actionConfiguration: Partial<APIConfigRequest>;
diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
index 84e10ae8f3..1a55b5e3d5 100644
--- a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
@@ -291,7 +291,10 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
       this.props.createAction({
         ...DEFAULT_API_ACTION,
         name: newActionName,
-        pluginId: plugin.id,
+        datasource: {
+          name: "DEFAULT_REST_DATASOURCE",
+          pluginId: plugin.id,
+        },
         pageId,
       });
     }

From a266472e4e0aac741ab8e60eafc56950ec97b53d Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Fri, 17 Apr 2020 16:15:09 +0000
Subject: [PATCH 24/31] Fix batched action execution

---
 app/client/src/actions/widgetActions.tsx      |  17 +-
 .../src/entities/DataTree/dataTreeFactory.ts  |  19 ++
 app/client/src/sagas/BatchSagas.tsx           |  64 +++++-
 app/client/src/sagas/PageSagas.tsx            |   5 +
 .../src/utils/DerivedPropertiesFactory.ts     |  22 --
 app/client/src/utils/DynamicBindingUtils.ts   | 200 +++++++++++-------
 app/client/src/utils/WidgetFactory.tsx        |  31 +++
 app/client/src/utils/WidgetPropsUtils.tsx     |  18 +-
 app/client/src/utils/WidgetRegistry.tsx       |  40 ++++
 app/client/src/widgets/BaseWidget.tsx         |   8 +
 app/client/src/widgets/CheckboxWidget.tsx     |  29 +--
 app/client/src/widgets/DatePickerWidget.tsx   |  34 +--
 app/client/src/widgets/DropdownWidget.tsx     | 145 +++++--------
 app/client/src/widgets/FilepickerWidget.tsx   |   7 +
 app/client/src/widgets/InputWidget.tsx        |  45 ++--
 app/client/src/widgets/MapWidget.tsx          |  53 +++--
 app/client/src/widgets/RadioGroupWidget.tsx   |  29 +--
 .../src/widgets/RichTextEditorWidget.tsx      |  12 ++
 app/client/src/widgets/TableWidget.tsx        |   8 +
 19 files changed, 457 insertions(+), 329 deletions(-)
 delete mode 100644 app/client/src/utils/DerivedPropertiesFactory.ts

diff --git a/app/client/src/actions/widgetActions.tsx b/app/client/src/actions/widgetActions.tsx
index 476c72452b..49643f6b7c 100644
--- a/app/client/src/actions/widgetActions.tsx
+++ b/app/client/src/actions/widgetActions.tsx
@@ -8,15 +8,15 @@ import {
   ExecuteErrorPayload,
   PageAction,
 } from "constants/ActionConstants";
+import { BatchAction, batchAction } from "actions/batchActions";
 
 export const executeAction = (
   payload: ExecuteActionPayload,
-): ReduxAction<ExecuteActionPayload> => {
-  return {
+): BatchAction<ExecuteActionPayload> =>
+  batchAction({
     type: ReduxActionTypes.EXECUTE_ACTION,
     payload,
-  };
-};
+  });
 
 export const executeActionError = (
   executeErrorPayload: ExecuteErrorPayload,
@@ -27,10 +27,11 @@ export const executeActionError = (
 
 export const executePageLoadActions = (
   payload: PageAction[][],
-): ReduxAction<PageAction[][]> => ({
-  type: ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS,
-  payload,
-});
+): BatchAction<PageAction[][]> =>
+  batchAction({
+    type: ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS,
+    payload,
+  });
 
 export const disableDragAction = (
   disable: boolean,
diff --git a/app/client/src/entities/DataTree/dataTreeFactory.ts b/app/client/src/entities/DataTree/dataTreeFactory.ts
index 95c209a0d8..efb83e2867 100644
--- a/app/client/src/entities/DataTree/dataTreeFactory.ts
+++ b/app/client/src/entities/DataTree/dataTreeFactory.ts
@@ -6,6 +6,7 @@ import { WidgetProps } from "widgets/BaseWidget";
 import { ActionResponse } from "api/ActionAPI";
 import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import { MetaState } from "reducers/entityReducers/metaReducer";
+import WidgetFactory from "utils/WidgetFactory";
 
 export type ActionDescription<T> = {
   type: string;
@@ -96,9 +97,27 @@ export class DataTreeFactory {
     Object.keys(widgets).forEach(w => {
       const widget = widgets[w];
       const widgetMetaProps = widgetsMeta[w];
+      const defaultMetaProps = WidgetFactory.getWidgetMetaPropertiesMap(
+        widget.type,
+      );
+      const derivedPropertyMap = WidgetFactory.getWidgetDerivedPropertiesMap(
+        widget.type,
+      );
+      const derivedProps: any = {};
+      const dynamicBindings = widget.dynamicBindings || {};
+      Object.keys(derivedPropertyMap).forEach(propertyName => {
+        derivedProps[propertyName] = derivedPropertyMap[propertyName].replace(
+          /this./g,
+          `${widget.widgetName}.`,
+        );
+        dynamicBindings[propertyName] = true;
+      });
       dataTree[widget.widgetName] = {
         ...widget,
+        ...defaultMetaProps,
         ...widgetMetaProps,
+        ...derivedProps,
+        dynamicBindings,
         ENTITY_TYPE: ENTITY_TYPE.WIDGET,
       };
     });
diff --git a/app/client/src/sagas/BatchSagas.tsx b/app/client/src/sagas/BatchSagas.tsx
index bf618d751c..ab50dbd3d0 100644
--- a/app/client/src/sagas/BatchSagas.tsx
+++ b/app/client/src/sagas/BatchSagas.tsx
@@ -1,20 +1,66 @@
 /* eslint-disable  @typescript-eslint/ban-ts-ignore */
-import { put, debounce, takeEvery } from "redux-saga/effects";
+import _ from "lodash";
+import { put, debounce, takeEvery, all } from "redux-saga/effects";
 import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
 
-let batch: ReduxAction<any>[] = [];
+const BATCH_PRIORITY = {
+  [ReduxActionTypes.SET_META_PROP]: {
+    priority: 0,
+    needsSaga: false,
+  },
+  [ReduxActionTypes.RESET_WIDGET_META]: {
+    priority: 0,
+    needsSaga: false,
+  },
+  [ReduxActionTypes.UPDATE_WIDGET_PROPERTY]: {
+    priority: 0,
+    needsSaga: false,
+  },
+  [ReduxActionTypes.EXECUTE_ACTION]: {
+    priority: 1,
+    needsSaga: true,
+  },
+  [ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS]: {
+    priority: 1,
+    needsSaga: true,
+  },
+};
+
+const batches: ReduxAction<any>[][] = [];
+
 function* storeUpdatesSaga(action: ReduxAction<ReduxAction<any>>) {
-  batch.push(action.payload);
-  yield put({ type: ReduxActionTypes.EXECUTE_BATCH });
+  try {
+    const priority = BATCH_PRIORITY[action.payload.type].priority;
+    const currentPriorityBatch = batches[priority] || [];
+    currentPriorityBatch.push(action.payload);
+    _.set(batches, `[${priority}]`, currentPriorityBatch);
+    yield put({ type: ReduxActionTypes.EXECUTE_BATCH });
+  } catch (e) {
+    console.error(`${action.payload.type} action priority not set`);
+  }
 }
 
 function* executeBatchSaga() {
-  // @ts-ignore
-  yield put(batch);
-  batch = [];
+  for (let priority = 0; priority < batches.length; priority++) {
+    const batch = batches[priority];
+    if (Array.isArray(batch) && batch.length) {
+      const needsSaga = batch.filter(b => BATCH_PRIORITY[b.type].needsSaga);
+      const canBatch = batch.filter(b => !BATCH_PRIORITY[b.type].needsSaga);
+      batches[priority] = [];
+      // @ts-ignore
+      yield put(canBatch);
+      if (needsSaga.length) {
+        for (const sagaAction of needsSaga) {
+          yield put(sagaAction);
+        }
+      }
+    }
+  }
 }
 
 export default function* root() {
-  yield debounce(20, ReduxActionTypes.EXECUTE_BATCH, executeBatchSaga);
-  yield takeEvery(ReduxActionTypes.BATCHED_UPDATE, storeUpdatesSaga);
+  yield all([
+    debounce(20, ReduxActionTypes.EXECUTE_BATCH, executeBatchSaga),
+    takeEvery(ReduxActionTypes.BATCHED_UPDATE, storeUpdatesSaga),
+  ]);
 }
diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx
index 96f6bd278c..433e48ee17 100644
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@@ -55,6 +55,7 @@ import {
 } from "selectors/editorSelectors";
 import { fetchActionsForPage } from "actions/actionActions";
 import { getExistingWidgetNames } from "./selectors";
+import { clearCaches } from "utils/DynamicBindingUtils";
 
 const getWidgetName = (state: AppState, widgetId: string) =>
   state.entities.canvasWidgets[widgetId];
@@ -121,6 +122,8 @@ export function* fetchPageSaga(
     });
     const isValidResponse = yield validateResponse(fetchPageResponse);
     if (isValidResponse) {
+      // Clear any existing caches
+      clearCaches();
       // Get Canvas payload
       const canvasWidgetsPayload = getCanvasWidgetsPayload(fetchPageResponse);
       // Update the canvas
@@ -157,6 +160,8 @@ export function* fetchPublishedPageSaga(
     );
     const isValidResponse = yield validateResponse(response);
     if (isValidResponse) {
+      // Clear any existing caches
+      clearCaches();
       const canvasWidgetsPayload = getCanvasWidgetsPayload(response);
       yield put(updateCanvas(canvasWidgetsPayload));
       yield put(updateCurrentPage(pageId));
diff --git a/app/client/src/utils/DerivedPropertiesFactory.ts b/app/client/src/utils/DerivedPropertiesFactory.ts
deleted file mode 100644
index 4a599bdaf3..0000000000
--- a/app/client/src/utils/DerivedPropertiesFactory.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import WidgetFactory from "./WidgetFactory";
-import { WidgetType } from "constants/WidgetConstants";
-
-export class DerivedPropFactory {
-  static getDerivedPropertiesOfWidgetType(
-    widgetType: WidgetType,
-    widgetName: string,
-  ): any {
-    // TODO WIDGETFACTORY
-    const derivedPropertyMap = WidgetFactory.getWidgetDerivedPropertiesMap(
-      widgetType,
-    );
-    const derivedProps: any = {};
-    Object.keys(derivedPropertyMap).forEach(propertyName => {
-      derivedProps[propertyName] = derivedPropertyMap[propertyName].replace(
-        /this./g,
-        `${widgetName}.`,
-      );
-    });
-    return derivedProps;
-  }
-}
diff --git a/app/client/src/utils/DynamicBindingUtils.ts b/app/client/src/utils/DynamicBindingUtils.ts
index de4c134727..f69233cead 100644
--- a/app/client/src/utils/DynamicBindingUtils.ts
+++ b/app/client/src/utils/DynamicBindingUtils.ts
@@ -19,6 +19,7 @@ import {
 } from "entities/DataTree/dataTreeFactory";
 import * as log from "loglevel";
 import equal from "fast-deep-equal/es6";
+import WidgetFactory from "utils/WidgetFactory";
 
 export const removeBindingsFromObject = (obj: object) => {
   const string = JSON.stringify(obj);
@@ -215,46 +216,37 @@ export const getValidatedTree = (tree: any) => {
   }, tree);
 };
 
-// let dynamicDependencyMapCache: Array<[string, string]> = [];
-// let oldDataTree: DataTree = {};
-//
-// let dataTreeCache: DataTree = {};
-// let lastCacheTime = 0;
+let dependencyTreeCache: any = {};
+let cachedDataTreeString = "";
 
 export function getEvaluatedDataTree(dataTree: DataTree): DataTree {
-  // count total time taken
   const totalStart = performance.now();
-  // Dont evaluate if called again in 60 ms
-  // if (totalStart - lastCacheTime < 60) {
-  //   return dataTreeCache;
-  // }
-  // lastCacheTime = totalStart;
-
-  // const cleanDataTree = _.omit(dataTree, [
-  //   ...dataTree.actionPaths,
-  //   "__proto__",
-  // ]);
-  // const isCacheHit = equal(oldDataTree, cleanDataTree);
-  // oldDataTree = cleanDataTree;
-  // log.debug("dependencyTree cacheHit " + isCacheHit);
-
   // Create Dependencies DAG
   const createDepsStart = performance.now();
-  const dynamicDependencyMap = createDependencyTree(dataTree);
-  // dynamicDependencyMapCache = dynamicDependencyMap;
+  const dataTreeString = JSON.stringify(dataTree);
+  if (!equal(dataTreeString, cachedDataTreeString)) {
+    cachedDataTreeString = dataTreeString;
+    dependencyTreeCache = createDependencyTree(dataTree);
+  }
   const createDepsEnd = performance.now();
+  const {
+    dependencyMap,
+    sortedDependencies,
+    dependencyTree,
+  } = dependencyTreeCache;
 
   // Evaluate Tree
   const evaluatedTreeStart = performance.now();
   const evaluatedTree = dependencySortedEvaluateDataTree(
     dataTree,
-    dynamicDependencyMap,
+    dependencyMap,
+    sortedDependencies,
   );
   const evaluatedTreeEnd = performance.now();
 
   // Set Loading Widgets
   const loadingTreeStart = performance.now();
-  const treeWithLoading = setTreeLoading(evaluatedTree, dynamicDependencyMap);
+  const treeWithLoading = setTreeLoading(evaluatedTree, dependencyTree);
   const loadingTreeEnd = performance.now();
 
   // Validate Widgets
@@ -279,18 +271,33 @@ export function getEvaluatedDataTree(dataTree: DataTree): DataTree {
 type DynamicDependencyMap = Record<string, Array<string>>;
 export const createDependencyTree = (
   dataTree: DataTree,
-): Array<[string, string]> => {
+): {
+  sortedDependencies: Array<string>;
+  dependencyTree: Array<[string, string]>;
+  dependencyMap: DynamicDependencyMap;
+} => {
   const dependencyMap: DynamicDependencyMap = {};
   const allKeys = getAllPaths(dataTree);
   Object.keys(dataTree).forEach(entityKey => {
     const entity = dataTree[entityKey] as WidgetProps;
-    if (entity && entity.dynamicBindings) {
-      Object.keys(entity.dynamicBindings).forEach(prop => {
-        const { jsSnippets } = getDynamicBindings(entity[prop]);
-        dependencyMap[`${entityKey}.${prop}`] = jsSnippets.filter(
-          jsSnippet => !!jsSnippet,
-        );
+    if (entity && entity.ENTITY_TYPE === ENTITY_TYPE.WIDGET) {
+      const defaultProperties = WidgetFactory.getWidgetDefaultPropertiesMap(
+        entity.type,
+      );
+      Object.keys(defaultProperties).forEach(property => {
+        dependencyMap[`${entityKey}.${property}`] = [
+          `${entityKey}.${defaultProperties[property]}`,
+        ];
       });
+      if (entity.dynamicBindings) {
+        Object.keys(entity.dynamicBindings).forEach(prop => {
+          const { jsSnippets } = getDynamicBindings(entity[prop]);
+          const existingDeps = dependencyMap[`${entityKey}.${prop}`] || [];
+          dependencyMap[`${entityKey}.${prop}`] = existingDeps.concat(
+            jsSnippets.filter(jsSnippet => !!jsSnippet),
+          );
+        });
+      }
     }
   });
   Object.keys(dependencyMap).forEach(key => {
@@ -307,7 +314,12 @@ export const createDependencyTree = (
       dependencyTree.push([key, ""]);
     }
   });
-  return dependencyTree;
+  // sort dependencies and remove empty dependencies
+  const sortedDependencies = toposort(dependencyTree)
+    .reverse()
+    .filter(d => !!d);
+
+  return { sortedDependencies, dependencyMap, dependencyTree };
 };
 
 const calculateSubDependencies = (
@@ -331,10 +343,10 @@ const calculateSubDependencies = (
           break;
         }
       }
-      if (current) subDeps.push(current);
+      if (current && current.includes(".")) subDeps.push(current);
     }
   });
-  return subDeps;
+  return _.uniq(subDeps);
 };
 
 export const setTreeLoading = (
@@ -393,33 +405,37 @@ export const getEntityDependencies = (
   return [];
 };
 
-const cache: Map<string, any> = new Map();
+const valueCache: Map<
+  string,
+  {
+    unEvaluated: any;
+    evaluated: any;
+    version: number;
+  }
+> = new Map();
+
+const getValueCache = (propertyPath: string) =>
+  valueCache.get(propertyPath) || {
+    unEvaluated: undefined,
+    evaluated: undefined,
+    version: 0,
+  };
+
 const dependencyCache: Map<string, any[]> = new Map();
 
+export const clearCaches = () => {
+  valueCache.clear();
+  dependencyCache.clear();
+};
+
 export function dependencySortedEvaluateDataTree(
   dataTree: DataTree,
-  dependencyTree: Array<[string, string]>,
+  dependencyMap: DynamicDependencyMap,
+  sortedDependencies: Array<string>,
 ): DataTree {
   const tree = _.cloneDeep(dataTree);
   try {
-    // sort dependencies and remove empty dependencies
-    const sortStart = performance.now();
-    const sortedDependencies = toposort(dependencyTree)
-      .reverse()
-      .filter(d => !!d);
-    const sortEnd = performance.now();
-    // evaluate and replace values
-    const evalStart = performance.now();
-    const dependencyMap: any = {};
-    dependencyTree.forEach(dependencyArr => {
-      const propertyPath = dependencyArr[0];
-      if (dependencyMap[propertyPath]) {
-        dependencyMap[propertyPath].push(dependencyArr[1]);
-      } else {
-        dependencyMap[propertyPath] = [dependencyArr[1]];
-      }
-    });
-    const final = sortedDependencies.reduce(
+    return sortedDependencies.reduce(
       (currentTree: DataTree, propertyPath: string) => {
         const entityName = propertyPath.split(".")[0];
         const entity: DataTreeEntity = currentTree[entityName];
@@ -439,16 +455,16 @@ export function dependencySortedEvaluateDataTree(
                   .filter((data: any) => {
                     return data !== undefined;
                   })
-              : undefined;
+              : [];
             const cachedDependencyValues = dependencyCache.get(propertyPath);
-            const cacheObj = cache.get(propertyPath);
+            const cacheObj = getValueCache(propertyPath);
             const isCacheHit =
-              cacheObj &&
-              equal(cacheObj.unEvalVal, unEvalPropertyValue) &&
+              cacheObj.version !== 0 &&
+              equal(cacheObj.unEvaluated, unEvalPropertyValue) &&
               cachedDependencyValues !== undefined &&
               equal(currentDependencyValues, cachedDependencyValues);
             if (isCacheHit) {
-              evalPropertyValue = cacheObj.evalVal;
+              evalPropertyValue = cacheObj.evaluated;
             } else {
               log.debug("eval " + propertyPath);
               const dynamicResult = getDynamicValue(
@@ -456,9 +472,10 @@ export function dependencySortedEvaluateDataTree(
                 currentTree,
               );
               evalPropertyValue = dynamicResult.result;
-              cache.set(propertyPath, {
-                evalVal: evalPropertyValue,
-                unEvalVal: unEvalPropertyValue,
+              valueCache.set(propertyPath, {
+                evaluated: evalPropertyValue,
+                unEvaluated: unEvalPropertyValue,
+                version: Date.now(),
               });
               dependencyCache.set(propertyPath, currentDependencyValues);
               evalPropertyValue = dynamicResult.result;
@@ -468,12 +485,27 @@ export function dependencySortedEvaluateDataTree(
             evalPropertyValue = undefined;
             unEvalPropertyValue = undefined;
           }
+        } else {
+          const currentCache = getValueCache(propertyPath);
+          if (!equal(currentCache.evaluated, evalPropertyValue)) {
+            valueCache.set(propertyPath, {
+              evaluated: evalPropertyValue,
+              unEvaluated: currentCache.unEvaluated,
+              version: Date.now(),
+            });
+          }
         }
         if (
           "ENTITY_TYPE" in entity &&
           entity.ENTITY_TYPE === ENTITY_TYPE.WIDGET
         ) {
           const propertyName = propertyPath.split(".")[1];
+          evalPropertyValue = overwriteDefaultDependentProps(
+            evalPropertyValue,
+            propertyName,
+            propertyPath,
+            entity,
+          );
           const {
             parsed,
             isValid,
@@ -490,21 +522,47 @@ export function dependencySortedEvaluateDataTree(
             _.set(entity, `validationMessages.${propertyName}`, message);
           }
         }
+        const currentCache = getValueCache(propertyPath);
+        if (!equal(currentCache.evaluated, evalPropertyValue)) {
+          valueCache.set(propertyPath, {
+            evaluated: evalPropertyValue,
+            unEvaluated: currentCache.unEvaluated,
+            version: Date.now(),
+          });
+        }
         return _.set(currentTree, propertyPath, evalPropertyValue);
       },
       tree,
     );
-    const evalEnd = performance.now();
-
-    log.debug({
-      depLength: sortedDependencies.length,
-      sort: (sortEnd - sortStart).toFixed(2),
-      eval: (evalEnd - evalStart).toFixed(2),
-    });
-
-    return final;
   } catch (e) {
     console.error(e);
     return tree;
   }
 }
+
+const overwriteDefaultDependentProps = (
+  propertyValue: any,
+  propertyName: string,
+  propertyPath: string,
+  entity: DataTreeWidget,
+) => {
+  const defaultPropertyMap = WidgetFactory.getWidgetDefaultPropertiesMap(
+    entity.type,
+  );
+  const hasDefaultProperty = propertyName in defaultPropertyMap;
+  if (hasDefaultProperty) {
+    const defaultProperty = defaultPropertyMap[propertyName];
+    const defaultPropertyCache = getValueCache(
+      `${entity.widgetName}.${defaultProperty}`,
+    );
+    const propertyCache = getValueCache(propertyPath);
+    if (
+      propertyValue === undefined ||
+      propertyCache.version < defaultPropertyCache.version
+    ) {
+      return defaultPropertyCache.evaluated;
+    }
+    return propertyValue;
+  }
+  return propertyValue;
+};
diff --git a/app/client/src/utils/WidgetFactory.tsx b/app/client/src/utils/WidgetFactory.tsx
index 10b66ac9ed..183a0ff323 100644
--- a/app/client/src/utils/WidgetFactory.tsx
+++ b/app/client/src/utils/WidgetFactory.tsx
@@ -36,6 +36,11 @@ class WidgetFactory {
     WidgetType,
     TriggerPropertiesMap
   > = new Map();
+  static defaultPropertiesMap: Map<
+    WidgetType,
+    Record<string, string>
+  > = new Map();
+  static metaPropertiesMap: Map<WidgetType, Record<string, any>> = new Map();
 
   static registerWidgetBuilder(
     widgetType: WidgetType,
@@ -43,11 +48,15 @@ class WidgetFactory {
     widgetPropertyValidation: WidgetPropertyValidationType,
     derivedPropertiesMap: DerivedPropertiesMap,
     triggerPropertiesMap: TriggerPropertiesMap,
+    defaultPropertiesMap: Record<string, string>,
+    metaPropertiesMap: Record<string, any>,
   ) {
     this.widgetMap.set(widgetType, widgetBuilder);
     this.widgetPropValidationMap.set(widgetType, widgetPropertyValidation);
     this.derivedPropertiesMap.set(widgetType, derivedPropertiesMap);
     this.triggerPropertiesMap.set(widgetType, triggerPropertiesMap);
+    this.defaultPropertiesMap.set(widgetType, defaultPropertiesMap);
+    this.metaPropertiesMap.set(widgetType, metaPropertiesMap);
   }
 
   static createWidget(
@@ -111,6 +120,28 @@ class WidgetFactory {
     }
     return map;
   }
+
+  static getWidgetDefaultPropertiesMap(
+    widgetType: WidgetType,
+  ): Record<string, string> {
+    const map = this.defaultPropertiesMap.get(widgetType);
+    if (!map) {
+      console.error("Widget default properties not defined");
+      return {};
+    }
+    return map;
+  }
+
+  static getWidgetMetaPropertiesMap(
+    widgetType: WidgetType,
+  ): Record<string, any> {
+    const map = this.metaPropertiesMap.get(widgetType);
+    if (!map) {
+      console.error("Widget meta properties not defined");
+      return {};
+    }
+    return map;
+  }
 }
 
 export interface WidgetCreationException {
diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx
index e8d9390200..69de5430d0 100644
--- a/app/client/src/utils/WidgetPropsUtils.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.tsx
@@ -10,12 +10,12 @@ import {
 } from "widgets/BaseWidget";
 import {
   GridDefaults,
+  RenderMode,
   WidgetType,
   WidgetTypes,
 } from "constants/WidgetConstants";
 import { snapToGrid } from "./helpers";
 import { OccupiedSpace } from "constants/editorConstants";
-import { DerivedPropFactory } from "utils/DerivedPropertiesFactory";
 import defaultTemplate from "templates/default";
 import { generateReactKey } from "./generators";
 import { ChartDataPoint } from "widgets/ChartWidget";
@@ -354,7 +354,9 @@ export const generateWidgetProps = (
   parentRowSpace: number,
   parentColumnSpace: number,
   widgetName: string,
-  widgetConfig: Partial<WidgetProps>,
+  widgetConfig: { widgetId: string; renderMode: RenderMode } & Partial<
+    WidgetProps
+  >,
 ): ContainerWidgetProps<WidgetProps> => {
   if (parent) {
     const sizes = {
@@ -365,15 +367,7 @@ export const generateWidgetProps = (
     };
 
     const others = {};
-    const derivedProperties = DerivedPropFactory.getDerivedPropertiesOfWidgetType(
-      type,
-      widgetName,
-    );
-    const dynamicBindings: Record<string, true> = {};
-    Object.keys(derivedProperties).forEach(prop => {
-      dynamicBindings[prop] = true;
-    });
-    const props = {
+    const props: ContainerWidgetProps<WidgetProps> = {
       isVisible: true,
       ...widgetConfig,
       type,
@@ -381,10 +375,8 @@ export const generateWidgetProps = (
       isLoading: false,
       parentColumnSpace,
       parentRowSpace,
-      dynamicBindings,
       ...sizes,
       ...others,
-      ...derivedProperties,
       parentId: parent.widgetId,
     };
     delete props.rows;
diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
index 5a7638faff..f23530e969 100644
--- a/app/client/src/utils/WidgetRegistry.tsx
+++ b/app/client/src/utils/WidgetRegistry.tsx
@@ -51,6 +51,8 @@ export default class WidgetBuilderRegistry {
       ContainerWidget.getPropertyValidationMap(),
       ContainerWidget.getDerivedPropertiesMap(),
       ContainerWidget.getTriggerPropertyMap(),
+      ContainerWidget.getDefaultPropertiesMap(),
+      ContainerWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -63,6 +65,8 @@ export default class WidgetBuilderRegistry {
       TextWidget.getPropertyValidationMap(),
       TextWidget.getDerivedPropertiesMap(),
       TextWidget.getTriggerPropertyMap(),
+      TextWidget.getDefaultPropertiesMap(),
+      TextWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -75,6 +79,8 @@ export default class WidgetBuilderRegistry {
       ButtonWidget.getPropertyValidationMap(),
       ButtonWidget.getDerivedPropertiesMap(),
       ButtonWidget.getTriggerPropertyMap(),
+      ButtonWidget.getDefaultPropertiesMap(),
+      ButtonWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -87,6 +93,8 @@ export default class WidgetBuilderRegistry {
       InputWidget.getPropertyValidationMap(),
       InputWidget.getDerivedPropertiesMap(),
       InputWidget.getTriggerPropertyMap(),
+      InputWidget.getDefaultPropertiesMap(),
+      InputWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -99,6 +107,8 @@ export default class WidgetBuilderRegistry {
       CheckboxWidget.getPropertyValidationMap(),
       CheckboxWidget.getDerivedPropertiesMap(),
       CheckboxWidget.getTriggerPropertyMap(),
+      CheckboxWidget.getDefaultPropertiesMap(),
+      CheckboxWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -111,6 +121,8 @@ export default class WidgetBuilderRegistry {
       DropdownWidget.getPropertyValidationMap(),
       DropdownWidget.getDerivedPropertiesMap(),
       DropdownWidget.getTriggerPropertyMap(),
+      DropdownWidget.getDefaultPropertiesMap(),
+      DropdownWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -123,6 +135,8 @@ export default class WidgetBuilderRegistry {
       RadioGroupWidget.getPropertyValidationMap(),
       RadioGroupWidget.getDerivedPropertiesMap(),
       RadioGroupWidget.getTriggerPropertyMap(),
+      RadioGroupWidget.getDefaultPropertiesMap(),
+      RadioGroupWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -135,6 +149,8 @@ export default class WidgetBuilderRegistry {
       ImageWidget.getPropertyValidationMap(),
       ImageWidget.getDerivedPropertiesMap(),
       ImageWidget.getTriggerPropertyMap(),
+      ImageWidget.getDefaultPropertiesMap(),
+      ImageWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "TABLE_WIDGET",
@@ -146,6 +162,8 @@ export default class WidgetBuilderRegistry {
       TableWidget.getPropertyValidationMap(),
       TableWidget.getDerivedPropertiesMap(),
       TableWidget.getTriggerPropertyMap(),
+      TableWidget.getDefaultPropertiesMap(),
+      TableWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "FILE_PICKER_WIDGET",
@@ -157,6 +175,8 @@ export default class WidgetBuilderRegistry {
       FilePickerWidget.getPropertyValidationMap(),
       FilePickerWidget.getDerivedPropertiesMap(),
       FilePickerWidget.getTriggerPropertyMap(),
+      FilePickerWidget.getDefaultPropertiesMap(),
+      FilePickerWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "DATE_PICKER_WIDGET",
@@ -168,6 +188,8 @@ export default class WidgetBuilderRegistry {
       DatePickerWidget.getPropertyValidationMap(),
       DatePickerWidget.getDerivedPropertiesMap(),
       DatePickerWidget.getTriggerPropertyMap(),
+      DatePickerWidget.getDefaultPropertiesMap(),
+      DatePickerWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "TABS_WIDGET",
@@ -181,6 +203,8 @@ export default class WidgetBuilderRegistry {
       TabsWidget.getPropertyValidationMap(),
       TabsWidget.getDerivedPropertiesMap(),
       TabsWidget.getTriggerPropertyMap(),
+      TabsWidget.getDefaultPropertiesMap(),
+      TabsWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       WidgetTypes.MODAL_WIDGET,
@@ -192,6 +216,8 @@ export default class WidgetBuilderRegistry {
       BaseWidget.getPropertyValidationMap(),
       BaseWidget.getDerivedPropertiesMap(),
       BaseWidget.getTriggerPropertyMap(),
+      BaseWidget.getDefaultPropertiesMap(),
+      BaseWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "RICH_TEXT_EDITOR_WIDGET",
@@ -203,6 +229,8 @@ export default class WidgetBuilderRegistry {
       RichTextEditorWidget.getPropertyValidationMap(),
       RichTextEditorWidget.getDerivedPropertiesMap(),
       RichTextEditorWidget.getTriggerPropertyMap(),
+      RichTextEditorWidget.getDefaultPropertiesMap(),
+      RichTextEditorWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "CHART_WIDGET",
@@ -214,6 +242,8 @@ export default class WidgetBuilderRegistry {
       ChartWidget.getPropertyValidationMap(),
       ChartWidget.getDerivedPropertiesMap(),
       ChartWidget.getTriggerPropertyMap(),
+      ChartWidget.getDefaultPropertiesMap(),
+      ChartWidget.getMetaPropertiesMap(),
     );
     WidgetFactory.registerWidgetBuilder(
       "FORM_WIDGET",
@@ -227,6 +257,8 @@ export default class WidgetBuilderRegistry {
       FormWidget.getPropertyValidationMap(),
       FormWidget.getDerivedPropertiesMap(),
       FormWidget.getTriggerPropertyMap(),
+      FormWidget.getDefaultPropertiesMap(),
+      FormWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -239,6 +271,8 @@ export default class WidgetBuilderRegistry {
       FormButtonWidget.getPropertyValidationMap(),
       FormButtonWidget.getDerivedPropertiesMap(),
       FormButtonWidget.getTriggerPropertyMap(),
+      FormButtonWidget.getDefaultPropertiesMap(),
+      FormButtonWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -251,6 +285,8 @@ export default class WidgetBuilderRegistry {
       MapWidget.getPropertyValidationMap(),
       MapWidget.getDerivedPropertiesMap(),
       MapWidget.getTriggerPropertyMap(),
+      MapWidget.getDefaultPropertiesMap(),
+      MapWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -265,6 +301,8 @@ export default class WidgetBuilderRegistry {
       CanvasWidget.getPropertyValidationMap(),
       CanvasWidget.getDerivedPropertiesMap(),
       CanvasWidget.getTriggerPropertyMap(),
+      CanvasWidget.getDefaultPropertiesMap(),
+      CanvasWidget.getMetaPropertiesMap(),
     );
 
     WidgetFactory.registerWidgetBuilder(
@@ -277,6 +315,8 @@ export default class WidgetBuilderRegistry {
       IconWidget.getPropertyValidationMap(),
       IconWidget.getDerivedPropertiesMap(),
       IconWidget.getTriggerPropertyMap(),
+      IconWidget.getDefaultPropertiesMap(),
+      IconWidget.getMetaPropertiesMap(),
     );
   }
 }
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index b78074ba2b..12d536d457 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -67,6 +67,14 @@ abstract class BaseWidget<
     return {};
   }
 
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {};
+  }
+
+  static getMetaPropertiesMap(): Record<string, string> {
+    return {};
+  }
+
   /**
    *  Widget abstraction to register the widget type
    *  ```javascript
diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx
index 7845f2745c..b7ea054cb0 100644
--- a/app/client/src/widgets/CheckboxWidget.tsx
+++ b/app/client/src/widgets/CheckboxWidget.tsx
@@ -26,29 +26,16 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
     };
   }
 
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.defaultCheckedState) {
-      this.updateWidgetMetaProperty(
-        "isChecked",
-        this.props.defaultCheckedState,
-      );
-    }
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      isChecked: "defaultCheckedState",
+    };
   }
 
-  componentDidUpdate(prevProps: CheckboxWidgetProps) {
-    super.componentDidUpdate(prevProps);
-    if (
-      (this.props.isChecked !== prevProps.isChecked &&
-        this.props.isChecked === undefined) ||
-      this.props.defaultCheckedState.toString() !==
-        prevProps.defaultCheckedState.toString()
-    ) {
-      this.updateWidgetMetaProperty(
-        "isChecked",
-        this.props.defaultCheckedState,
-      );
-    }
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      isChecked: false,
+    };
   }
 
   getPageView() {
diff --git a/app/client/src/widgets/DatePickerWidget.tsx b/app/client/src/widgets/DatePickerWidget.tsx
index d70fa20691..6c66e2034d 100644
--- a/app/client/src/widgets/DatePickerWidget.tsx
+++ b/app/client/src/widgets/DatePickerWidget.tsx
@@ -12,12 +12,13 @@ import {
   DerivedPropertiesMap,
   TriggerPropertiesMap,
 } from "utils/WidgetFactory";
-import moment from "moment-timezone";
 
 class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
       ...BASE_WIDGET_VALIDATION,
+      defaultDate: VALIDATION_TYPES.DATE,
+      selectedDate: VALIDATION_TYPES.DATE,
       timezone: VALIDATION_TYPES.TEXT,
       enableTimePicker: VALIDATION_TYPES.BOOLEAN,
       dateFormat: VALIDATION_TYPES.TEXT,
@@ -43,31 +44,16 @@ class DatePickerWidget extends BaseWidget<DatePickerWidgetProps, WidgetState> {
     };
   }
 
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.defaultDate) {
-      this.updateWidgetMetaProperty(
-        "selectedDate",
-        new Date(this.props.defaultDate.dateValue),
-      );
-    }
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      selectedDate: "defaultDate",
+    };
   }
 
-  componentDidUpdate(prevProps: DatePickerWidgetProps) {
-    super.componentDidUpdate(prevProps);
-    if (
-      this.props.defaultDate &&
-      (prevProps.defaultDate === undefined ||
-        !moment(this.props.defaultDate.dateValue).isSame(
-          moment(prevProps.defaultDate.dateValue),
-          "second",
-        ))
-    ) {
-      this.updateWidgetMetaProperty(
-        "selectedDate",
-        new Date(this.props.defaultDate.dateValue),
-      );
-    }
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      selectedDate: undefined,
+    };
   }
 
   getPageView() {
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index 9de7da56d0..a9b2ea0e5f 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -20,9 +20,9 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       label: VALIDATION_TYPES.TEXT,
       options: VALIDATION_TYPES.OPTIONS_DATA,
       selectionType: VALIDATION_TYPES.TEXT,
-      selectedIndexArr: VALIDATION_TYPES.ARRAY,
       isRequired: VALIDATION_TYPES.BOOLEAN,
       onOptionChange: VALIDATION_TYPES.ACTION_SELECTOR,
+      selectedOptionValueArr: VALIDATION_TYPES.ARRAY,
       defaultOptionValue: (value: string | string[], props?: WidgetProps) => {
         let values = value;
 
@@ -37,7 +37,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
                   throw new Error();
                 }
               } catch {
-                values = value.split(",");
+                values = value.length ? value.split(",") : [];
                 if (values.length > 0) {
                   values = values.map(value => value.trim());
                 }
@@ -60,8 +60,10 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   static getDerivedPropertiesMap() {
     return {
       isValid: `{{this.isRequired ? this.selectionType === 'SINGLE_SELECT' ? !!this.selectedOption : !!this.selectedIndexArr && this.selectedIndexArr.length > 0 : true}}`,
-      selectedOption: `{{this.selectionType === 'SINGLE_SELECT' ? this.options[this.selectedIndex] : undefined}}`,
-      selectedOptionArr: `{{this.selectionType === "MULTI_SELECT" ? this.options.filter((opt, index) => _.includes(this.selectedIndexArr, index)) : undefined}}`,
+      selectedOption: `{{ this.selectionType === 'SINGLE_SELECT' ? _.find(this.options, { value:  this.selectedOptionValue }) : undefined}}`,
+      selectedOptionArr: `{{this.selectionType === "MULTI_SELECT" ? this.options.filter(opt => _.includes(this.selectedOptionValueArr, opt.value)) : undefined}}`,
+      selectedIndex: `{{ _.findIndex(this.options, { value: this.selectedOption.value } ) }}`,
+      selectedIndexArr: `{{ this.selectedOptionValueArr.map(o => _.findIndex(this.options, { value: o })) }}`,
     };
   }
 
@@ -71,86 +73,32 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
     };
   }
 
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.defaultOptionValue) {
-      const selectionOptions: number[] = [];
-      if (this.props.selectionType === "SINGLE_SELECT") {
-        const selectedIndex = _.findIndex(this.props.options, option => {
-          return (
-            option.value.toString() ===
-            (this.props.defaultOptionValue as string).toString()
-          );
-        });
-        if (selectedIndex > -1) {
-          selectionOptions.push(selectedIndex);
-        }
-      } else if (this.props.selectionType === "MULTI_SELECT") {
-        (this.props.defaultOptionValue as string[]).forEach(optionValue => {
-          const selectedIndex = _.findIndex(this.props.options, option => {
-            return option.value.toString() === optionValue.toString();
-          });
-          if (selectedIndex > -1) {
-            selectionOptions.push(selectedIndex);
-          }
-        });
-      }
-
-      if (selectionOptions.length > 0) {
-        this.updateWidgetMetaProperty("selectedIndex", selectionOptions[0]);
-        this.updateWidgetMetaProperty("selectedIndexArr", selectionOptions);
-      }
-    }
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      selectedOptionValue: "defaultOptionValue",
+      selectedOptionValueArr: "defaultOptionValue",
+    };
   }
 
-  componentDidUpdate(prevProps: DropdownWidgetProps) {
-    super.componentDidUpdate(prevProps);
-
-    if (this.props.defaultOptionValue) {
-      if (
-        this.props.defaultOptionValue.toString() !==
-        prevProps.defaultOptionValue?.toString()
-      ) {
-        const selectionOptions: number[] = [];
-        if (this.props.selectionType === "SINGLE_SELECT") {
-          const selectedIndex = _.findIndex(this.props.options, option => {
-            return (
-              option.value.toString() ===
-              (this.props.defaultOptionValue as string).toString()
-            );
-          });
-          if (selectedIndex > -1) {
-            selectionOptions.push(selectedIndex);
-          }
-        } else {
-          (this.props.defaultOptionValue as string[]).forEach(optionValue => {
-            const selectedIndex = _.findIndex(this.props.options, option => {
-              return option.value.toString() === optionValue.toString();
-            });
-            if (selectedIndex > -1) {
-              selectionOptions.push(selectedIndex);
-            }
-          });
-        }
-        if (selectionOptions.length > 0) {
-          this.updateWidgetMetaProperty("selectedIndexArr", selectionOptions);
-          this.updateWidgetMetaProperty("selectedIndex", selectionOptions[0]);
-        } else {
-          this.updateWidgetMetaProperty("selectedIndex", undefined);
-          this.updateWidgetMetaProperty("selectedIndexArr", []);
-        }
-      }
-    }
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      selectedOptionValue: undefined,
+      selectedOptionValueArr: [],
+    };
   }
+
   getPageView() {
     const options = this.props.options || [];
-    const selectedIndexArr = this.props.selectedIndexArr || [];
-    let computedSelectedIndexArr = selectedIndexArr.slice();
-    selectedIndexArr.forEach(selectedIndex => {
-      if (options[selectedIndex] === undefined) {
-        computedSelectedIndexArr = [];
-      }
+    const selectedIndex = _.findIndex(this.props.options, {
+      value: this.props.selectedOptionValue,
     });
+    const computedSelectedIndexArr = this.props.selectedOptionValueArr
+      .map((opt: string) =>
+        _.findIndex(this.props.options, {
+          value: opt,
+        }),
+      )
+      .filter((i: number) => i > -1);
 
     return (
       <DropDownComponent
@@ -160,7 +108,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
         placeholder={this.props.placeholderText}
         options={options}
         selectionType={this.props.selectionType}
-        selectedIndex={this.props.selectedIndex}
+        selectedIndex={selectedIndex > -1 ? selectedIndex : undefined}
         selectedIndexArr={computedSelectedIndexArr}
         label={`${this.props.label}${this.props.isRequired ? " *" : ""}`}
         isLoading={this.props.isLoading}
@@ -169,23 +117,26 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   }
 
   onOptionSelected = (selectedOption: DropdownOption) => {
-    const selectedIndex = _.findIndex(this.props.options, option => {
-      return option.value === selectedOption.value;
-    });
     if (this.props.selectionType === "SINGLE_SELECT") {
-      this.updateWidgetMetaProperty("selectedIndex", selectedIndex);
+      this.updateWidgetMetaProperty(
+        "selectedOptionValue",
+        selectedOption.value,
+      );
     } else if (this.props.selectionType === "MULTI_SELECT") {
-      const selectedIndexArr = this.props.selectedIndexArr || [];
-      const isAlreadySelected =
-        _.find(selectedIndexArr, index => {
-          return index === selectedIndex;
-        }) !== undefined;
+      console.log(this.props, selectedOption);
+      const isAlreadySelected = this.props.selectedOptionValueArr.includes(
+        selectedOption.value,
+      );
+
+      let newSelectedValue = [...this.props.selectedOptionValueArr];
       if (isAlreadySelected) {
-        this.onOptionRemoved(selectedIndex);
+        newSelectedValue = newSelectedValue.filter(
+          v => v !== selectedOption.value,
+        );
       } else {
-        selectedIndexArr.push(selectedIndex);
-        this.updateWidgetMetaProperty("selectedIndexArr", selectedIndexArr);
+        newSelectedValue.push(selectedOption.value);
       }
+      this.updateWidgetMetaProperty("selectedOptionValueArr", newSelectedValue);
     }
     if (this.props.onOptionChange) {
       super.executeAction({
@@ -198,12 +149,11 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   };
 
   onOptionRemoved = (removedIndex: number) => {
-    const updateIndexArr = this.props.selectedIndexArr
-      ? this.props.selectedIndexArr.filter(index => {
-          return removedIndex !== index;
-        })
-      : [];
-    this.updateWidgetMetaProperty("selectedIndexArr", updateIndexArr);
+    const newSelectedValue = this.props.selectedOptionValueArr.filter(
+      (v: string) =>
+        _.findIndex(this.props.options, { value: v }) !== removedIndex,
+    );
+    this.updateWidgetMetaProperty("selectedOptionValueArr", newSelectedValue);
     if (this.props.onOptionChange) {
       super.executeAction({
         dynamicString: this.props.onOptionChange,
@@ -234,6 +184,7 @@ export interface DropdownWidgetProps extends WidgetProps {
   selectedIndex?: number;
   selectedIndexArr?: number[];
   selectionType: SelectionType;
+  selectedOption: DropdownOption;
   options?: DropdownOption[];
   onOptionChange?: string;
   defaultOptionValue?: string | string[];
diff --git a/app/client/src/widgets/FilepickerWidget.tsx b/app/client/src/widgets/FilepickerWidget.tsx
index e06bff5af8..5846c85fcf 100644
--- a/app/client/src/widgets/FilepickerWidget.tsx
+++ b/app/client/src/widgets/FilepickerWidget.tsx
@@ -47,6 +47,13 @@ class FilePickerWidget extends BaseWidget<FilePickerWidgetProps, WidgetState> {
     };
   }
 
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      files: [],
+      uploadedFileData: {},
+    };
+  }
+
   refreshUppy = (props: FilePickerWidgetProps) => {
     this.uppy = Uppy({
       id: this.props.widgetId,
diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx
index d1c74fc61d..4fafcf03fd 100644
--- a/app/client/src/widgets/InputWidget.tsx
+++ b/app/client/src/widgets/InputWidget.tsx
@@ -15,12 +15,17 @@ import {
   DerivedPropertiesMap,
   TriggerPropertiesMap,
 } from "utils/WidgetFactory";
+import _ from "lodash";
 
 class InputWidget extends BaseWidget<InputWidgetProps, InputWidgetState> {
+  debouncedHandleTextChanged = _.debounce(
+    this.handleTextChanged.bind(this),
+    200,
+  );
   constructor(props: InputWidgetProps) {
     super(props);
     this.state = {
-      text: "",
+      text: props.text,
     };
   }
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -53,28 +58,32 @@ class InputWidget extends BaseWidget<InputWidgetProps, InputWidgetState> {
 
   static getDerivedPropertiesMap(): DerivedPropertiesMap {
     return {
-      isValid: `{{this.isRequired ? this.text && descriptionInput.text.length > 0 ? this.regex ? new RegExp(this.regex).test(this.text) : true : this.regex ? new RegExp(this.regex).test(this.text) : true}}`,
+      isValid: `{{!!(this.isRequired ? this.text && this.text.length > 0 ? this.regex ? new RegExp(this.regex).test(this.text) : true : false : this.regex ? new RegExp(this.regex).test(this.text) : true)}}`,
     };
   }
 
-  componentDidMount() {
-    super.componentDidMount();
-    const text = this.props.defaultText || "";
-    this.setState({ text }, () => {
-      this.updateWidgetMetaProperty("text", text);
-    });
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      text: "defaultText",
+    };
+  }
+
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      text: undefined,
+      isFocused: false,
+      isDirty: false,
+    };
   }
 
   componentDidUpdate(prevProps: InputWidgetProps) {
     super.componentDidUpdate(prevProps);
     if (
-      (this.props.text !== prevProps.text && this.props.text === undefined) ||
-      this.props.defaultText !== prevProps.defaultText
+      prevProps.text !== this.props.text &&
+      this.props.defaultText === this.props.text
     ) {
-      const text = this.props.defaultText || "";
-      this.setState({ text }, () => {
-        this.updateWidgetMetaProperty("text", text);
-      });
+      const text = this.props.text;
+      this.setState({ text });
     }
   }
 
@@ -85,6 +94,10 @@ class InputWidget extends BaseWidget<InputWidgetProps, InputWidgetState> {
     if (!this.props.isDirty) {
       this.updateWidgetMetaProperty("isDirty", true);
     }
+    this.debouncedHandleTextChanged();
+  };
+
+  handleTextChanged() {
     if (this.props.onTextChanged) {
       super.executeAction({
         dynamicString: this.props.onTextChanged,
@@ -93,7 +106,7 @@ class InputWidget extends BaseWidget<InputWidgetProps, InputWidgetState> {
         },
       });
     }
-  };
+  }
 
   handleFocusChange = (focusState: boolean) => {
     this.updateWidgetMetaProperty("isFocused", focusState);
@@ -162,7 +175,7 @@ export interface InputWidgetProps extends WidgetProps {
   inputType: InputType;
   defaultText?: string;
   isDisabled?: boolean;
-  text?: string;
+  text: string;
   regex?: string;
   errorMessage?: string;
   placeholderText?: string;
diff --git a/app/client/src/widgets/MapWidget.tsx b/app/client/src/widgets/MapWidget.tsx
index 69506f255c..58d64e4c09 100644
--- a/app/client/src/widgets/MapWidget.tsx
+++ b/app/client/src/widgets/MapWidget.tsx
@@ -30,6 +30,13 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
     };
   }
 
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      markers: "defaultMarkers",
+      center: "mapCenter",
+    };
+  }
+
   updateCenter = (lat: number, lng: number) => {
     this.updateWidgetMetaProperty("center", { lat, lng });
   };
@@ -64,34 +71,24 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
     }
   };
 
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.mapCenter) {
-      this.updateWidgetMetaProperty("center", this.props.mapCenter);
-    }
-    if (this.props.defaultMarkers && !this.props.markers) {
-      this.updateWidgetMetaProperty("markers", [...this.props.defaultMarkers]);
-    }
-  }
-
-  componentDidUpdate(prevProps: MapWidgetProps) {
-    super.componentDidUpdate(prevProps);
-    if (
-      this.props.mapCenter &&
-      prevProps.mapCenter &&
-      (this.props.mapCenter.lat !== prevProps.mapCenter.lat ||
-        this.props.mapCenter.lng !== prevProps.mapCenter.lng)
-    ) {
-      this.updateWidgetMetaProperty("center", this.props.mapCenter);
-    }
-    if (
-      this.props.defaultMarkers &&
-      !this.props.markers &&
-      this.props.defaultMarkers.length !== prevProps.defaultMarkers?.length
-    ) {
-      this.updateWidgetMetaProperty("markers", [...this.props.defaultMarkers]);
-    }
-  }
+  // componentDidMount() {
+  //   super.componentDidMount();
+  //   if (this.props.mapCenter) {
+  //     this.updateWidgetMetaProperty("center", this.props.mapCenter);
+  //   }
+  // }
+  //
+  // componentDidUpdate(prevProps: MapWidgetProps) {
+  //   super.componentDidUpdate(prevProps);
+  //   if (
+  //     this.props.mapCenter &&
+  //     prevProps.mapCenter &&
+  //     (this.props.mapCenter.lat !== prevProps.mapCenter.lat ||
+  //       this.props.mapCenter.lng !== prevProps.mapCenter.lng)
+  //   ) {
+  //     this.updateWidgetMetaProperty("center", this.props.mapCenter);
+  //   }
+  // }
 
   getPageView() {
     return (
diff --git a/app/client/src/widgets/RadioGroupWidget.tsx b/app/client/src/widgets/RadioGroupWidget.tsx
index 9fabf3c91a..abe86f24b5 100644
--- a/app/client/src/widgets/RadioGroupWidget.tsx
+++ b/app/client/src/widgets/RadioGroupWidget.tsx
@@ -35,29 +35,18 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
     };
   }
 
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.defaultOptionValue) {
-      this.updateWidgetMetaProperty(
-        "selectedOptionValue",
-        this.props.defaultOptionValue,
-      );
-    }
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      selectedOptionValue: "defaultOptionValue",
+    };
   }
 
-  componentDidUpdate(prevProps: RadioGroupWidgetProps) {
-    super.componentDidUpdate(prevProps);
-    if (
-      (this.props.selectedOptionValue !== prevProps.selectedOptionValue &&
-        this.props.selectedOptionValue === undefined) ||
-      this.props.defaultOptionValue !== prevProps.defaultOptionValue
-    ) {
-      this.updateWidgetMetaProperty(
-        "selectedOptionValue",
-        this.props.defaultOptionValue,
-      );
-    }
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      selectedOptionValue: "",
+    };
   }
+
   getPageView() {
     return (
       <RadioGroupComponent
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index ab142e9151..0ed38c487d 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -33,6 +33,18 @@ class RichTextEditorWidget extends BaseWidget<
     };
   }
 
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      text: undefined,
+    };
+  }
+
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      text: "defaultText",
+    };
+  }
+
   componentDidMount() {
     super.componentDidMount();
     if (this.props.defaultText) {
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 92d6ae0ede..89688fd9d8 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -62,6 +62,14 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     };
   }
 
+  static getMetaPropertiesMap(): Record<string, any> {
+    return {
+      pageNo: 1,
+      pageSize: undefined,
+      selectedRowIndex: -1,
+    };
+  }
+
   static getTriggerPropertyMap(): TriggerPropertiesMap {
     return {
       onRowSelected: true,

From a2086d2b5f54dbd1f9feedde706fc56de2819ed1 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Mon, 20 Apr 2020 05:42:46 +0000
Subject: [PATCH 25/31] Action selector refactor

---
 .../CommonWidgets/Table_spec.js               |   4 +-
 .../Smoke_TestSuite/FormWidgets/Radio_spec.js |   4 +-
 .../FormWidgets/RichTextEditor_spec.js        |   4 +-
 .../cypress/locators/commonlocators.json      |   2 +-
 app/client/cypress/support/commands.js        |   1 +
 .../editorComponents/DynamicActionCreator.tsx | 633 ----------------
 .../DynamicActionSelectorDropdown.tsx         | 123 ----
 .../actioncreator/ActionCreator.tsx           | 693 ++++++++++++++++++
 .../actioncreator/TreeDropdown.tsx            | 121 +++
 .../ActionSelectorControl.tsx                 |   5 +-
 .../ColumnActionSelectorControl.tsx           |   4 +-
 app/client/src/constants/WidgetValidation.ts  |   7 +-
 app/client/src/constants/messages.ts          |   2 +
 .../src/entities/DataTree/dataTreeFactory.ts  |  23 +-
 app/client/src/sagas/ActionSagas.ts           |  39 +-
 app/client/src/sagas/WidgetOperationSagas.tsx |   1 +
 app/client/src/selectors/dataTreeSelectors.ts |   6 +-
 app/client/src/selectors/widgetSelectors.ts   |   2 +-
 app/client/src/utils/DynamicBindingUtils.ts   |   2 +
 app/client/src/utils/ValidationFactory.ts     |   7 +-
 app/client/src/utils/Validators.ts            | 126 +++-
 app/client/src/widgets/DropdownWidget.tsx     |   9 +-
 22 files changed, 984 insertions(+), 834 deletions(-)
 delete mode 100644 app/client/src/components/editorComponents/DynamicActionCreator.tsx
 delete mode 100644 app/client/src/components/editorComponents/DynamicActionSelectorDropdown.tsx
 create mode 100644 app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
 create mode 100644 app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx

diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
index 42221aa3f5..72fc7219e7 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
@@ -19,14 +19,14 @@ describe("Table Widget Functionality", function() {
       .click({ force: true })
       .get("ul.bp3-menu")
       .children()
-      .contains("Navigate to URL")
+      .contains("Navigate To")
       .click();
     cy.wait("@updateLayout");
     cy.get(widgetsPage.tableOnRowSelected)
       .get(commonlocators.dropdownSelectButton)
       .first()
       .find("> .bp3-button-text")
-      .should("have.text", "Navigate to URL");
+      .should("have.text", "Navigate To");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js
index e028b968f9..2c999163c9 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js
@@ -18,12 +18,12 @@ describe("Radio Widget Functionality", function() {
       .click({ force: true })
       .get("ul.bp3-menu")
       .children()
-      .contains("Navigate to URL")
+      .contains("Navigate To")
       .click();
     cy.get(formWidgetsPage.radioOnSelectionChangeDropdown)
       .get(commonlocators.dropdownSelectButton)
       .find("> .bp3-button-text")
-      .should("have.text", "Navigate to URL");
+      .should("have.text", "Navigate To");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
index 588fe324dc..54391a9f9e 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/RichTextEditor_spec.js
@@ -17,13 +17,13 @@ describe("RichTextEditor Widget Functionality", function() {
       .click({ force: true })
       .get("ul.bp3-menu")
       .children()
-      .contains("Navigate to URL")
+      .contains("Navigate To")
       .click();
     cy.get(formWidgetsPage.richEditorOnTextChange)
       .get(commonlocators.dropdownSelectButton)
       .find("> span")
       .eq(0)
-      .should("have.text", "Navigate to URL");
+      .should("have.text", "Navigate To");
     cy.get(commonlocators.editPropCrossButton).click();
   });
 });
diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
index 4390b0e0c8..204cd880d2 100644
--- a/app/client/cypress/locators/commonlocators.json
+++ b/app/client/cypress/locators/commonlocators.json
@@ -2,7 +2,7 @@
     "editIcon":".t--widget-propertypane-toggle",
     "editPropCrossButton":".t--property-pane-close-btn",
     "deleteWidgetIcon":".t--widget-delete-control",
-    "dropdownSelectButton":".t--open-dropdown-Select"
+    "dropdownSelectButton":".t--open-dropdown-Select-Action"
    
 
 }
\ No newline at end of file
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 82055479e8..3e25cc2136 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -19,6 +19,7 @@ Cypress.Commands.add("LogintoApp", (uname, pword) => {
 
 Cypress.Commands.add("SearchApp", appname => {
   cy.get(homePage.searchInput).type(appname);
+  cy.wait(2000);
   cy.get(homePage.appEditIcon)
     .first()
     .click({ force: true });
diff --git a/app/client/src/components/editorComponents/DynamicActionCreator.tsx b/app/client/src/components/editorComponents/DynamicActionCreator.tsx
deleted file mode 100644
index 1105a6cc47..0000000000
--- a/app/client/src/components/editorComponents/DynamicActionCreator.tsx
+++ /dev/null
@@ -1,633 +0,0 @@
-import React, { ChangeEvent } from "react";
-import { connect } from "react-redux";
-import { AppState } from "reducers";
-import { DropdownOption } from "widgets/DropdownWidget";
-import {
-  ReduxActionWithoutPayload,
-  ReduxAction,
-} from "constants/ReduxActionConstants";
-import _ from "lodash";
-import { ControlWrapper } from "components/propertyControls/StyledControls";
-import { InputText } from "components/propertyControls/InputTextControl";
-import StyledDropdown from "components/editorComponents/DynamicActionSelectorDropdown";
-import { ActionDataState } from "reducers/entityReducers/actionsReducer";
-import {
-  getModalDropdownList,
-  getNextModalName,
-} from "selectors/widgetSelectors";
-import { getActionsForCurrentPage } from "selectors/entitiesSelector";
-import { KeyValueComponent } from "components/propertyControls/KeyValueComponent";
-import { createModalAction } from "actions/widgetActions";
-
-const ACTION_TRIGGER_REGEX = /^{{([\s\S]*?)\(([\s\S]*?)\)}}$/g;
-const ACTION_ANONYMOUS_FUNC_REGEX = /\(\) => ([\s\S]*?)(\([\s\S]*?\))/g;
-
-const ALERT_STYLE_OPTIONS = [
-  { label: "Info", value: "'info'", id: "info" },
-  { label: "Success", value: "'success'", id: "success" },
-  { label: "Error", value: "'error'", id: "error" },
-  { label: "Warning", value: "'warning'", id: "warning" },
-];
-
-type ValueType = string | DropdownOption[];
-
-type ValueChangeHandler = (
-  changeValue: ValueType,
-  currentValue: string,
-) => string;
-type ActionCreatorArgumentConfig = {
-  label: string;
-  field: string;
-  create?: {
-    text: string;
-    action: (...args: any) => ReduxAction<any>;
-  };
-  valueChangeHandler: ValueChangeHandler;
-  getSelectedValue: (value: string, returnArguments: boolean) => ValueType;
-};
-
-interface ActionCreatorDropdownOption extends DropdownOption {
-  arguments: ActionCreatorArgumentConfig[];
-}
-
-const handleTopLevelFuncUpdate: ValueChangeHandler = (
-  value: ValueType,
-): string => {
-  return value === "none" ? "" : `{{${value}()}}`;
-};
-
-const handleApiArgSelect = (
-  changeValue: string,
-  currentValue: string,
-  label: "onSuccess" | "onError",
-): string => {
-  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
-  const args = [...matches[0][2].matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
-  let successArg = args[0] ? args[0][0] : "() => {}";
-  let errorArg = args[1] ? args[1][0] : "() => {}";
-  if (label === "onSuccess") {
-    successArg = changeValue.endsWith(")")
-      ? `() => ${changeValue}`
-      : `() => ${changeValue}()`;
-  }
-  if (label === "onError") {
-    errorArg = changeValue.endsWith(")")
-      ? `() => ${changeValue}`
-      : `() => ${changeValue}()`;
-  }
-  return currentValue.replace(
-    ACTION_TRIGGER_REGEX,
-    `{{$1(${successArg}, ${errorArg})}}`,
-  );
-};
-
-const handlePageNameArgSelect = (
-  changeValue: ValueType,
-  currentValue: string,
-) => {
-  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
-  const args = matches[0][2].split(",");
-  args[0] = `${changeValue}`;
-
-  return currentValue.replace(
-    ACTION_TRIGGER_REGEX,
-    `{{$1(${args.join(",")})}}`,
-  );
-};
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const handlePageParamsArgSelect = (
-  changeValue: ValueType,
-  currentValue: string,
-) => {
-  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
-  const args = matches[0][2].split(",").slice(0, 2);
-  const paramsObject: Record<string, string> = {};
-  (changeValue as DropdownOption[]).forEach(pageParam => {
-    paramsObject[pageParam.label] = pageParam.value;
-  });
-  args[1] = JSON.stringify(paramsObject);
-  return currentValue.replace(
-    ACTION_TRIGGER_REGEX,
-    `{{$1(${args.join(",")})}}`,
-  );
-};
-/* eslint-enable @typescript-eslint/no-unused-vars */
-
-const handleTextArgChange = (
-  changeValue: ValueType,
-  currentValue: string,
-): string => {
-  return currentValue.replace(ACTION_TRIGGER_REGEX, `{{$1('${changeValue}')}}`);
-};
-
-const handleAlertTextChange = (
-  changeValue: ValueType,
-  currentValue: string,
-): string => {
-  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
-  const args = matches[0][2].split(",");
-  args[0] = `'${changeValue}'`;
-  const result = currentValue.replace(
-    ACTION_TRIGGER_REGEX,
-    `{{$1(${args.join(",")})}}`,
-  );
-  return result;
-};
-
-const handleAlertTypeChange = (
-  changeValue: ValueType,
-  currentValue: string,
-): string => {
-  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
-  const args = matches[0][2].split(",");
-  args[1] = changeValue as string;
-  return currentValue.replace(
-    ACTION_TRIGGER_REGEX,
-    `{{$1(${args.join(",")})}}`,
-  );
-};
-
-const getApiArgumentValue = (
-  value: string,
-  label: "onSuccess" | "onError",
-  returnSubArguments = false,
-): string => {
-  let selectedValue = "none";
-  let selectedValueArgs = "";
-  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
-  if (matches.length) {
-    const funcArgs = matches[0][2];
-    const argIndex = label === "onSuccess" ? 0 : 1;
-    const args = [...funcArgs.matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
-    const selectedArg = args[argIndex];
-    if (selectedArg && selectedArg.length) {
-      selectedValue = selectedArg[1];
-      selectedValueArgs = selectedArg[2];
-    }
-  }
-  if (returnSubArguments) return selectedValueArgs;
-  return selectedValue;
-};
-
-const getPageNameSelectedValue = (value: string) => {
-  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
-  return matches.length ? matches[0][2].split(",")[0] : "none";
-};
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-const getPageParamsSelectedValue = (value: ValueType) => {
-  const match = getPageSelectedParamsObject(value as string);
-  const keyPairs: DropdownOption[] = [];
-  Object.keys(match).forEach((key: string) => {
-    keyPairs.push({
-      label: key,
-      value: match[key],
-    });
-  });
-  return keyPairs;
-};
-/* eslint-enable @typescript-eslint/no-unused-vars */
-
-const getPageSelectedParamsObject = (value: string) => {
-  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
-  let match: Record<string, string> = {};
-
-  if (matches.length) {
-    try {
-      match = JSON.parse(
-        matches[0][2].substring(
-          matches[0][2].indexOf(",") + 1,
-          matches[0][2].length,
-        ),
-      );
-    } catch {}
-  }
-  return match;
-};
-
-export const getTextArgValue = (value: string) => {
-  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
-  if (matches.length) {
-    const stringValue = matches[0][2];
-    return stringValue.substring(1, stringValue.length - 1);
-  }
-  return "";
-};
-
-const getAlertTextValue = (value: string) => {
-  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
-  if (matches.length) {
-    const funcArgs = matches[0][2];
-    const arg = funcArgs.split(",")[0];
-    return arg.substring(1, arg.length - 1);
-  }
-  return "";
-};
-
-const getAlertTypeValue = (value: string) => {
-  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
-  if (matches.length) {
-    const funcArgs = matches[0][2];
-    const arg = funcArgs.split(",")[1];
-    return arg ? arg.trim() : "'primary'";
-  }
-  return "";
-};
-
-export const PropertyPaneActionDropdownOptions: ActionCreatorDropdownOption[] = [
-  {
-    label: "No action",
-    value: "none",
-    id: "none",
-    arguments: [],
-  },
-  {
-    label: "Call API",
-    value: "api",
-    id: "api",
-    arguments: [
-      {
-        label: "onSuccess",
-        field: "ACTION_SELECTOR_FIELD",
-        valueChangeHandler: (changeValue, currentValue) =>
-          handleApiArgSelect(changeValue as string, currentValue, "onSuccess"),
-        getSelectedValue: (value: string, returnArgs = false) =>
-          getApiArgumentValue(value, "onSuccess", returnArgs),
-      },
-      {
-        label: "onError",
-        field: "ACTION_SELECTOR_FIELD",
-        valueChangeHandler: (changeValue, currentValue) =>
-          handleApiArgSelect(changeValue as string, currentValue, "onError"),
-        getSelectedValue: (value: string, returnArgs = false) =>
-          getApiArgumentValue(value, "onError", returnArgs),
-      },
-    ],
-  },
-  {
-    label: "Show Modal",
-    value: "showModal",
-    id: "showModal",
-    arguments: [
-      {
-        label: "Modal Name",
-        field: "MODAL_SELECTOR_FIELD",
-        create: {
-          text: "Modal",
-          action: createModalAction,
-        },
-        valueChangeHandler: handlePageNameArgSelect,
-        getSelectedValue: getPageNameSelectedValue,
-      },
-    ],
-  },
-  {
-    label: "Close Modal",
-    value: "closeModal",
-    id: "closeModal",
-    arguments: [
-      {
-        label: "Modal Name",
-        field: "MODAL_SELECTOR_FIELD",
-        valueChangeHandler: handlePageNameArgSelect,
-        getSelectedValue: getPageNameSelectedValue,
-      },
-    ],
-  },
-  {
-    label: "Navigate to Page",
-    value: "navigateTo",
-    id: "navigateTo",
-    arguments: [
-      {
-        label: "pageName",
-        field: "PAGE_SELECTOR_FIELD",
-        valueChangeHandler: handlePageNameArgSelect,
-        getSelectedValue: getPageNameSelectedValue,
-      },
-      // {
-      //   label: "params",
-      //   field: "KEY_VALUE_FIELD",
-      //   valueChangeHandler: handlePageParamsArgSelect,
-      //   getSelectedValue: getPageParamsSelectedValue,
-      // },
-    ],
-  },
-  {
-    label: "Navigate to URL",
-    value: "navigateToUrl",
-    id: "navigateToUrl",
-    arguments: [
-      {
-        label: "URL",
-        field: "TEXT_FIELD",
-        valueChangeHandler: handleTextArgChange,
-        getSelectedValue: getTextArgValue,
-      },
-    ],
-  },
-  {
-    label: "Show Alert",
-    value: "showAlert",
-    id: "showAlert",
-    arguments: [
-      {
-        label: "text",
-        field: "TEXT_FIELD",
-        valueChangeHandler: handleAlertTextChange,
-        getSelectedValue: getAlertTextValue,
-      },
-      {
-        label: "type",
-        field: "ALERT_TYPE_SELECTOR_FIELD",
-        valueChangeHandler: handleAlertTypeChange,
-        getSelectedValue: getAlertTypeValue,
-      },
-    ],
-  },
-];
-
-type ReduxStateProps = {
-  actions: ActionDataState;
-  pageNameDropdown: DropdownOption[];
-  modalDropdown?: DropdownOption[];
-  nextModalName: string;
-  dispatchAction: (payload: ReduxActionWithoutPayload) => void;
-};
-
-interface Props {
-  value: string;
-  isValid: boolean;
-  validationMessage?: string;
-  onValueChange: (newValue: string) => void;
-}
-
-class DynamicActionCreator extends React.Component<Props & ReduxStateProps> {
-  getTopLevelFuncValue = (value: string) => {
-    let matches: any[] = [];
-    if (value) {
-      matches = value ? [...value.matchAll(ACTION_TRIGGER_REGEX)] : [];
-    }
-    let mainFuncSelectedValue = "none";
-    if (matches.length) {
-      mainFuncSelectedValue = matches[0][1] || "none";
-    }
-    return mainFuncSelectedValue;
-  };
-
-  handleValueUpdate = (
-    updateValueOrEvent: ValueType | ChangeEvent<HTMLTextAreaElement>,
-    valueUpdateHandler: ValueChangeHandler,
-  ) => {
-    const { value, onValueChange } = this.props;
-    let updateValue = updateValueOrEvent;
-    if (
-      typeof updateValueOrEvent !== "string" &&
-      (updateValueOrEvent as any).target
-    ) {
-      updateValue = (updateValueOrEvent as any).target.value;
-    }
-    const newValue = valueUpdateHandler(updateValue as ValueType, value);
-    onValueChange(newValue);
-  };
-
-  renderSubArgumentFields = (
-    argValue: string,
-    allOptions: ActionCreatorDropdownOption[],
-    parentChangeHandler: (
-      updateValueOrEvent: ValueType | ChangeEvent<HTMLTextAreaElement>,
-      valueUpdateHandler: ValueChangeHandler,
-    ) => void,
-    argumentConfig: ActionCreatorArgumentConfig,
-  ) => {
-    const subArgValue = argumentConfig.getSelectedValue(argValue, false);
-    const subArguments = argumentConfig.getSelectedValue(argValue, true);
-    let selectedOption = allOptions[0];
-    allOptions
-      .filter(o => o.value !== "api")
-      .forEach(o => {
-        if (o.value === subArgValue) {
-          selectedOption = o;
-        }
-      });
-    const handleValueUpdate = (
-      updateValueOrEvent: ValueType | ChangeEvent<HTMLTextAreaElement>,
-      valueUpdateHandler: ValueChangeHandler,
-    ) => {
-      let updateValue = updateValueOrEvent;
-      if (
-        typeof updateValueOrEvent !== "string" &&
-        (updateValueOrEvent as any).target
-      ) {
-        updateValue = (updateValueOrEvent as any).target.value;
-      }
-      const tempArg = `{{${subArgValue}${subArguments}}}`;
-      const newValue = valueUpdateHandler(updateValue as ValueType, tempArg);
-      const newArgValue = newValue.substring(2, newValue.length - 2);
-      parentChangeHandler(newArgValue, argumentConfig.valueChangeHandler);
-    };
-    const subFunctionCall = `{{${subArgValue}${subArguments}}}`;
-    return this.renderActionArgumentFields(
-      subFunctionCall,
-      selectedOption,
-      allOptions,
-      handleValueUpdate,
-    );
-  };
-
-  renderActionArgumentFields = (
-    value: string,
-    selectedOption: ActionCreatorDropdownOption,
-    allOptions: ActionCreatorDropdownOption[],
-    handleUpdate: (
-      updateValueOrEvent: ValueType | ChangeEvent<HTMLTextAreaElement>,
-      valueUpdateHandler: ValueChangeHandler,
-    ) => void,
-  ) => {
-    return (
-      <div>
-        {selectedOption.arguments.map(arg => {
-          switch (arg.field) {
-            case "ACTION_SELECTOR_FIELD":
-              return (
-                <ControlWrapper key={arg.label}>
-                  <label>{arg.label}</label>
-                  <StyledDropdown
-                    options={allOptions}
-                    selectedValue={arg.getSelectedValue(value, false) as string}
-                    defaultText={"Select Action"}
-                    onSelect={value =>
-                      handleUpdate(value, arg.valueChangeHandler)
-                    }
-                  />
-                  {this.renderSubArgumentFields(
-                    value,
-                    allOptions,
-                    handleUpdate,
-                    arg,
-                  )}
-                </ControlWrapper>
-              );
-            case "PAGE_SELECTOR_FIELD":
-              return (
-                <ControlWrapper key={arg.label}>
-                  <label>{arg.label}</label>
-                  <StyledDropdown
-                    options={this.props.pageNameDropdown}
-                    selectedValue={arg.getSelectedValue(value, false) as string}
-                    defaultText={"Select Page"}
-                    onSelect={newValue => {
-                      handleUpdate(newValue, arg.valueChangeHandler);
-                    }}
-                  />
-                </ControlWrapper>
-              );
-            case "KEY_VALUE_FIELD":
-              return (
-                <ControlWrapper key={arg.label}>
-                  <KeyValueComponent
-                    pairs={
-                      arg.getSelectedValue(value, false) as DropdownOption[]
-                    }
-                    addLabel={"QueryParam"}
-                    updatePairs={(pageParams: DropdownOption[]) => {
-                      handleUpdate(pageParams as any, arg.valueChangeHandler);
-                    }}
-                  />
-                </ControlWrapper>
-              );
-            case "MODAL_SELECTOR_FIELD":
-              return (
-                <ControlWrapper key={arg.label}>
-                  <label>{arg.label}</label>
-                  <StyledDropdown
-                    options={this.props.modalDropdown || []}
-                    selectedValue={arg.getSelectedValue(value, false) as string}
-                    defaultText="Select Modal"
-                    createButton={
-                      arg.create && {
-                        text: arg.create.text,
-                        args: [this.props.nextModalName],
-                        onClick: (...args: any) => {
-                          arg.create &&
-                            this.props.dispatchAction(
-                              arg.create.action(...args),
-                            );
-                        },
-                      }
-                    }
-                    onSelect={value => {
-                      handleUpdate(value, arg.valueChangeHandler);
-                    }}
-                  />
-                </ControlWrapper>
-              );
-            case "TEXT_FIELD":
-              return (
-                <ControlWrapper key={arg.label}>
-                  <label>{arg.label}</label>
-                  <InputText
-                    label={arg.label}
-                    value={arg.getSelectedValue(value, false) as string}
-                    onChange={e => handleUpdate(e, arg.valueChangeHandler)}
-                    isValid={this.props.isValid}
-                    validationMessage={this.props.validationMessage}
-                  />
-                </ControlWrapper>
-              );
-            case "ALERT_TYPE_SELECTOR_FIELD":
-              return (
-                <ControlWrapper key={arg.label}>
-                  <label>{arg.label}</label>
-                  <StyledDropdown
-                    options={ALERT_STYLE_OPTIONS}
-                    defaultText={"Select type"}
-                    selectedValue={arg.getSelectedValue(value, false) as string}
-                    onSelect={value =>
-                      handleUpdate(value, arg.valueChangeHandler)
-                    }
-                  />
-                </ControlWrapper>
-              );
-            default:
-              return null;
-          }
-        })}
-      </div>
-    );
-  };
-
-  render() {
-    const { actions, value } = this.props;
-    const stringValue = typeof value === "string" ? value : "";
-    const topLevelFuncValue = this.getTopLevelFuncValue(stringValue);
-    const actionOptions = PropertyPaneActionDropdownOptions.map(o => {
-      if (o.id === "api") {
-        return {
-          ...o,
-          children: actions.map(a => ({
-            ...o,
-            label: a.config.name,
-            id: a.config.id,
-            value: `${a.config.name}.run`,
-          })),
-        };
-      } else {
-        return o;
-      }
-    });
-
-    let selectedOption = actionOptions[0];
-    actionOptions.forEach(o => {
-      if (
-        o.value === topLevelFuncValue ||
-        _.some(o.children, {
-          value: topLevelFuncValue,
-        })
-      ) {
-        selectedOption = o;
-      }
-    });
-
-    return (
-      <React.Fragment>
-        <StyledDropdown
-          options={actionOptions}
-          selectedValue={topLevelFuncValue}
-          defaultText={"Select"}
-          onSelect={value =>
-            this.handleValueUpdate(value, handleTopLevelFuncUpdate)
-          }
-        />
-        {this.renderActionArgumentFields(
-          value,
-          selectedOption,
-          actionOptions,
-          this.handleValueUpdate,
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-const mapStateToProps = (state: AppState) => ({
-  actions: getActionsForCurrentPage(state),
-  pageNameDropdown: state.entities.pageList.pages.map(p => ({
-    label: p.pageName,
-    id: p.pageId,
-    value: `'${p.pageName}'`,
-  })),
-  modalDropdown: getModalDropdownList(state),
-  nextModalName: getNextModalName(state),
-});
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    dispatchAction: (payload: ReduxActionWithoutPayload) => dispatch(payload),
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(DynamicActionCreator);
diff --git a/app/client/src/components/editorComponents/DynamicActionSelectorDropdown.tsx b/app/client/src/components/editorComponents/DynamicActionSelectorDropdown.tsx
deleted file mode 100644
index 0b3a65f6e9..0000000000
--- a/app/client/src/components/editorComponents/DynamicActionSelectorDropdown.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import _ from "lodash";
-import { DropdownOption } from "widgets/DropdownWidget";
-import {
-  StyledPopover,
-  StyledDropDownContainer,
-  StyledMenuItem,
-} from "components/propertyControls/StyledControls";
-import {
-  Button as BlueprintButton,
-  Menu,
-  PopoverInteractionKind,
-  PopoverPosition,
-} from "@blueprintjs/core";
-import { IconNames } from "@blueprintjs/icons";
-
-type ActionTypeDropdownProps = {
-  options: DropdownOption[];
-  selectedValue: string;
-  defaultText: string;
-  onSelect: (value: string) => void;
-  createButton?: {
-    text: string;
-    args: string[];
-    onClick: (...args: any) => void;
-  };
-};
-
-class StyledDropdown extends React.Component<ActionTypeDropdownProps> {
-  handleSelect = (option: DropdownOption) => {
-    this.props.onSelect(option.value);
-  };
-  renderItem = (option: DropdownOption) => {
-    const isSelected = this.isOptionSelected(option);
-    return (
-      <StyledMenuItem
-        className="single-select"
-        active={isSelected}
-        key={option.value}
-        onClick={option.children ? _.noop : () => this.handleSelect(option)}
-        text={option.label}
-        popoverProps={{
-          minimal: true,
-          interactionKind: PopoverInteractionKind.CLICK,
-          position: PopoverPosition.RIGHT,
-        }}
-      >
-        {option.children && option.children.map(this.renderItem)}
-      </StyledMenuItem>
-    );
-  };
-  isOptionSelected = (currentOption: DropdownOption) => {
-    if (currentOption.children) {
-      return _.some(currentOption.children, {
-        value: this.props.selectedValue,
-      });
-    } else {
-      return currentOption.value === this.props.selectedValue;
-    }
-  };
-
-  render() {
-    const { selectedValue } = this.props;
-    let selectedOption = {
-      label: this.props.defaultText,
-    };
-    this.props.options.length > 0 &&
-      this.props.options.forEach(o => {
-        if (o.value === selectedValue) {
-          selectedOption = o;
-        } else {
-          const childOption = _.find(o.children, {
-            value: this.props.selectedValue,
-          });
-          if (childOption) selectedOption = childOption;
-        }
-      });
-    const list =
-      this.props.options.length > 0 && this.props.options.map(this.renderItem);
-    let createBtn: React.ReactNode;
-    if (this.props.createButton) {
-      const btnClick = () => {
-        this.props.createButton?.onClick(...this.props.createButton.args);
-        const optionVal = this.props.createButton?.args.join(", ");
-        optionVal &&
-          this.handleSelect({
-            id: optionVal,
-            label: optionVal,
-            value: `'${optionVal}'`,
-          });
-      };
-      createBtn = (
-        <StyledMenuItem
-          onClick={btnClick}
-          icon="plus"
-          text={`Create ${this.props.createButton.text}`}
-          className="t--create-modal-btn"
-        />
-      );
-    }
-    const popoverContent = (
-      <Menu>
-        {createBtn}
-        {list}
-      </Menu>
-    );
-    return (
-      <StyledDropDownContainer>
-        <StyledPopover usePortal={true} minimal={true} content={popoverContent}>
-          <BlueprintButton
-            rightIcon={IconNames.CHEVRON_DOWN}
-            text={selectedOption.label}
-            className={`t--open-dropdown-${this.props.defaultText
-              .split(" ")
-              .join("-")}`}
-          />
-        </StyledPopover>
-      </StyledDropDownContainer>
-    );
-  }
-}
-
-export default StyledDropdown;
diff --git a/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx b/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
new file mode 100644
index 0000000000..c8796c6893
--- /dev/null
+++ b/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
@@ -0,0 +1,693 @@
+import React from "react";
+import { AppState } from "reducers";
+import { getActionsForCurrentPage } from "selectors/entitiesSelector";
+import {
+  getModalDropdownList,
+  getNextModalName,
+} from "selectors/widgetSelectors";
+import { getCurrentPageId } from "selectors/editorSelectors";
+import { ActionDataState } from "reducers/entityReducers/actionsReducer";
+import { DropdownOption } from "widgets/DropdownWidget";
+import { useSelector, useDispatch } from "react-redux";
+import TreeDropdown, { TreeDropdownOption } from "./TreeDropdown";
+import { ControlWrapper } from "components/propertyControls/StyledControls";
+import { KeyValueComponent } from "components/propertyControls/KeyValueComponent";
+import { InputText } from "components/propertyControls/InputTextControl";
+import { createModalAction } from "actions/widgetActions";
+import { createActionRequest } from "actions/actionActions";
+import { DEFAULT_API_ACTION } from "constants/ApiEditorConstants";
+import { createNewApiName } from "utils/AppsmithUtils";
+
+const ALERT_STYLE_OPTIONS = [
+  { label: "Info", value: "'info'", id: "info" },
+  { label: "Success", value: "'success'", id: "success" },
+  { label: "Error", value: "'error'", id: "error" },
+  { label: "Warning", value: "'warning'", id: "warning" },
+];
+const ACTION_TRIGGER_REGEX = /^{{([\s\S]*?)\(([\s\S]*?)\)}}$/g;
+const ACTION_ANONYMOUS_FUNC_REGEX = /\(\) => ([\s\S]*?)(\([\s\S]*?\))/g;
+
+const modalSetter = (changeValue: any, currentValue: string) => {
+  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
+  const args = matches[0][2].split(",");
+  args[0] = `'${changeValue}'`;
+
+  return currentValue.replace(
+    ACTION_TRIGGER_REGEX,
+    `{{$1(${args.join(",")})}}`,
+  );
+};
+
+export const modalGetter = (value: string) => {
+  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+  let name = "none";
+  if (matches.length) {
+    const modalName = matches[0][2].split(",")[0];
+    name = modalName.substring(1, modalName.length - 1);
+  }
+  return name;
+};
+
+// const urlSetter = (changeValue: any, currentValue: string): string => {
+//   return currentValue.replace(ACTION_TRIGGER_REGEX, `{{$1('${changeValue}')}}`);
+// };
+
+// export const textGetter = (value: string) => {
+//   const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+//   if (matches.length) {
+//     const stringValue = matches[0][2];
+//     return stringValue.substring(1, stringValue.length - 1);
+//   }
+//   return "";
+// };
+
+const alertTextSetter = (changeValue: any, currentValue: string): string => {
+  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
+  const args = matches[0][2].split(",");
+  args[0] = `'${changeValue}'`;
+  const result = currentValue.replace(
+    ACTION_TRIGGER_REGEX,
+    `{{$1(${args.join(",")})}}`,
+  );
+  return result;
+};
+
+const alertTextGetter = (value: string) => {
+  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+  if (matches.length) {
+    const funcArgs = matches[0][2];
+    const arg = funcArgs.split(",")[0];
+    return arg.substring(1, arg.length - 1);
+  }
+  return "";
+};
+
+const alertTypeSetter = (changeValue: any, currentValue: string): string => {
+  const matches = [...currentValue.matchAll(ACTION_TRIGGER_REGEX)];
+  const args = matches[0][2].split(",");
+  args[1] = changeValue as string;
+  return currentValue.replace(
+    ACTION_TRIGGER_REGEX,
+    `{{$1(${args.join(",")})}}`,
+  );
+};
+
+const alertTypeGetter = (value: string) => {
+  const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+  if (matches.length) {
+    const funcArgs = matches[0][2];
+    const arg = funcArgs.split(",")[1];
+    return arg ? arg.trim() : "'primary'";
+  }
+  return "";
+};
+
+type ActionCreatorProps = {
+  value: string;
+  isValid: boolean;
+  validationMessage?: string;
+  onValueChange: (newValue: string) => void;
+};
+
+const ActionType = {
+  none: "none",
+  api: "api",
+  showModal: "showModal",
+  closeModal: "closeModal",
+  navigateTo: "navigateTo",
+  showAlert: "showAlert",
+};
+type ActionType = typeof ActionType[keyof typeof ActionType];
+
+const ViewTypes = {
+  SELECTOR_VIEW: "SELECTOR_VIEW",
+  KEY_VALUE_VIEW: "KEY_VALUE_VIEW",
+  TEXT_VIEW: "TEXT_VIEW",
+};
+type ViewTypes = typeof ViewTypes[keyof typeof ViewTypes];
+
+type ViewProps = {
+  label: string;
+  get: Function;
+  set: Function;
+  value: string;
+};
+type SelectorViewProps = ViewProps & {
+  options: TreeDropdownOption[];
+  defaultText: string;
+  getDefaults?: Function;
+  selectedLabelModifier?: (option: TreeDropdownOption) => string;
+};
+
+type KeyValueViewProps = ViewProps;
+type TextViewProps = ViewProps & {
+  isValid: boolean;
+  validationMessage?: string;
+};
+
+const views = {
+  [ViewTypes.SELECTOR_VIEW]: function SelectorView(props: SelectorViewProps) {
+    return (
+      <ControlWrapper key={props.label}>
+        <label>{props.label}</label>
+        <TreeDropdown
+          optionTree={props.options}
+          selectedValue={props.get(props.value, false) as string}
+          defaultText={props.defaultText}
+          onSelect={(value, defaultValue?: string) => {
+            props.set(value, defaultValue);
+          }}
+          getDefaults={props.getDefaults}
+          selectedLabelModifier={props.selectedLabelModifier}
+        />
+      </ControlWrapper>
+    );
+  },
+  [ViewTypes.KEY_VALUE_VIEW]: function KeyValueView(props: KeyValueViewProps) {
+    return (
+      <ControlWrapper key={props.label}>
+        <KeyValueComponent
+          pairs={props.get(props.value, false) as DropdownOption[]}
+          addLabel={"QueryParam"}
+          updatePairs={(pageParams: DropdownOption[]) => props.set(pageParams)}
+        />
+      </ControlWrapper>
+    );
+  },
+  [ViewTypes.TEXT_VIEW]: function TextView(props: TextViewProps) {
+    return (
+      <ControlWrapper key={props.label}>
+        <label>{props.label}</label>
+        <InputText
+          label={props.label}
+          value={props.get(props.value, false) as string}
+          onChange={(event: any) => {
+            if (event.target) {
+              props.set(event.target.value);
+            } else {
+              props.set(event);
+            }
+          }}
+          isValid={props.isValid}
+          validationMessage={props.validationMessage}
+        />
+      </ControlWrapper>
+    );
+  },
+};
+
+const FieldType = {
+  ACTION_SELECTOR_FIELD: "ACTION_SELECTOR_FIELD",
+  ON_SUCCESS_FIELD: "ON_SUCCESS_FIELD",
+  ON_ERROR_FIELD: "ON_ERROR_FIELD",
+  SHOW_MODAL_FIELD: "SHOW_MODAL_FIELD",
+  CLOSE_MODAL_FIELD: "CLOSE_MODAL_FIELD",
+  PAGE_SELECTOR_FIELD: "PAGE_SELECTOR_FIELD",
+  KEY_VALUE_FIELD: "KEY_VALUE_FIELD",
+  URL_FIELD: "URL_FIELD",
+  ALERT_TEXT_FIELD: "ALERT_TEXT_FIELD",
+  ALERT_TYPE_SELECTOR_FIELD: "ALERT_TYPE_SELECTOR_FIELD",
+};
+type FieldType = typeof FieldType[keyof typeof FieldType];
+
+type FieldConfig = {
+  getter: Function;
+  setter: Function;
+  view: ViewTypes;
+};
+
+type FieldConfigs = Record<FieldType, FieldConfig>;
+
+const fieldConfigs: FieldConfigs = {
+  [FieldType.ACTION_SELECTOR_FIELD]: {
+    getter: (storedValue: string) => {
+      let matches: any[] = [];
+      if (storedValue) {
+        matches = storedValue
+          ? [...storedValue.matchAll(ACTION_TRIGGER_REGEX)]
+          : [];
+      }
+      let mainFuncSelectedValue = ActionType.none;
+      if (matches.length) {
+        mainFuncSelectedValue = matches[0][1] || ActionType.none;
+      }
+      const mainFuncSelectedValueSplit = mainFuncSelectedValue.split(".");
+      if (mainFuncSelectedValueSplit[1] === "run") {
+        return mainFuncSelectedValueSplit[0];
+      }
+      return mainFuncSelectedValue;
+    },
+    setter: (
+      option: TreeDropdownOption,
+      currentValue: string,
+      defaultValue?: string,
+    ) => {
+      const type: ActionType = option.type || option.value;
+      let value = option.value;
+      switch (type) {
+        case ActionType.api:
+          value = `${value}.run`;
+          break;
+        default:
+          break;
+      }
+      return value === "none" ? "" : `{{${value}()}}`;
+    },
+    view: ViewTypes.SELECTOR_VIEW,
+  },
+  [FieldType.SHOW_MODAL_FIELD]: {
+    getter: (value: any) => {
+      return modalGetter(value);
+    },
+    setter: (option: any, currentValue: string) => {
+      return modalSetter(option.value, currentValue);
+    },
+    view: ViewTypes.SELECTOR_VIEW,
+  },
+  [FieldType.CLOSE_MODAL_FIELD]: {
+    getter: (value: any) => {
+      return modalGetter(value);
+    },
+    setter: (option: any, currentValue: string) => {
+      return modalSetter(option.value, currentValue);
+    },
+    view: ViewTypes.SELECTOR_VIEW,
+  },
+  [FieldType.PAGE_SELECTOR_FIELD]: {
+    getter: (value: any) => {
+      return modalGetter(value);
+    },
+    setter: (option: any, currentValue: string) => {
+      return modalSetter(option.value, currentValue);
+    },
+    view: ViewTypes.SELECTOR_VIEW,
+  },
+  [FieldType.KEY_VALUE_FIELD]: {
+    getter: (value: any) => {
+      return value;
+    },
+    setter: (value: any) => {
+      return value;
+    },
+    view: ViewTypes.KEY_VALUE_VIEW,
+  },
+  [FieldType.URL_FIELD]: {
+    getter: (value: string) => {
+      return modalGetter(value);
+    },
+    setter: (value: string, currentValue: string) => {
+      return modalSetter(value, currentValue);
+    },
+    view: ViewTypes.TEXT_VIEW,
+  },
+  [FieldType.ALERT_TEXT_FIELD]: {
+    getter: (value: string) => {
+      return alertTextGetter(value);
+    },
+    setter: (value: string, currentValue: string) => {
+      return alertTextSetter(value, currentValue);
+    },
+    view: ViewTypes.TEXT_VIEW,
+  },
+  [FieldType.ALERT_TYPE_SELECTOR_FIELD]: {
+    getter: (value: any) => {
+      return alertTypeGetter(value);
+    },
+    setter: (option: any, currentValue: string) => {
+      return alertTypeSetter(option.value, currentValue);
+    },
+    view: ViewTypes.SELECTOR_VIEW,
+  },
+};
+
+const baseOptions: any = [
+  {
+    label: "No Action",
+    value: ActionType.none,
+  },
+  {
+    label: "Call API",
+    value: ActionType.api,
+  },
+  {
+    label: "Show Modal",
+    value: ActionType.showModal,
+  },
+  {
+    label: "Close Modal",
+    value: ActionType.closeModal,
+  },
+  {
+    label: "Navigate To",
+    value: ActionType.navigateTo,
+  },
+  {
+    label: "Show Alert",
+    value: ActionType.showAlert,
+  },
+];
+function getOptionsWithChildren(
+  options: TreeDropdownOption[],
+  actions: ActionDataState,
+  createActionOption: TreeDropdownOption,
+) {
+  const option = options.find(option => option.value === ActionType.api);
+  if (option) {
+    option.children = [createActionOption];
+    actions.forEach(action => {
+      (option.children as TreeDropdownOption[]).push({
+        label: action.config.name,
+        id: action.config.id,
+        value: action.config.name,
+        type: option.value,
+      } as TreeDropdownOption);
+    });
+  }
+  return options;
+}
+
+function getFieldFromValue(
+  value: string | undefined,
+  getParentValue?: Function,
+): any[] {
+  const fields: any[] = [
+    {
+      field: FieldType.ACTION_SELECTOR_FIELD,
+      getParentValue: getParentValue,
+      value: value,
+    },
+  ];
+  if (!value) {
+    return fields;
+  }
+  if (value.indexOf("run") !== -1) {
+    const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+    if (matches.length) {
+      const funcArgs = matches[0][2];
+      const args = [...funcArgs.matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
+      const successArg = args[0];
+      const errorArg = args[1];
+      let sucesssValue;
+      if (successArg && successArg.length > 0) {
+        sucesssValue = successArg[1] + successArg[2];
+      }
+      const successFields = getFieldFromValue(
+        `{{${sucesssValue}}}`,
+        (changeValue: string) => {
+          const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+          const args = [...matches[0][2].matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
+          let successArg = args[0] ? args[0][0] : "() => {}";
+          const errorArg = args[1] ? args[1][0] : "() => {}";
+          successArg = changeValue.endsWith(")")
+            ? `() => ${changeValue}`
+            : `() => ${changeValue}()`;
+
+          return value.replace(
+            ACTION_TRIGGER_REGEX,
+            `{{$1(${successArg}, ${errorArg})}}`,
+          );
+        },
+      );
+      successFields[0].label = "onSuccess";
+      fields.push(successFields);
+
+      let errorValue;
+      if (errorArg && errorArg.length > 0) {
+        errorValue = errorArg[1] + errorArg[2];
+      }
+      const errorFields = getFieldFromValue(
+        `{{${errorValue}}}`,
+        (changeValue: string) => {
+          const matches = [...value.matchAll(ACTION_TRIGGER_REGEX)];
+          const args = [...matches[0][2].matchAll(ACTION_ANONYMOUS_FUNC_REGEX)];
+          const successArg = args[0] ? args[0][0] : "() => {}";
+          let errorArg = args[1] ? args[1][0] : "() => {}";
+          errorArg = changeValue.endsWith(")")
+            ? `() => ${changeValue}`
+            : `() => ${changeValue}()`;
+          return value.replace(
+            ACTION_TRIGGER_REGEX,
+            `{{$1(${successArg}, ${errorArg})}}`,
+          );
+        },
+      );
+      errorFields[0].label = "onError";
+      fields.push(errorFields);
+    }
+    return fields;
+  }
+
+  if (value.indexOf("navigateTo") !== -1) {
+    fields.push({
+      field: FieldType.URL_FIELD,
+    });
+  }
+
+  if (value.indexOf("showModal") !== -1) {
+    fields.push({
+      field: FieldType.SHOW_MODAL_FIELD,
+    });
+  }
+  if (value.indexOf("closeModal") !== -1) {
+    fields.push({
+      field: FieldType.CLOSE_MODAL_FIELD,
+    });
+  }
+  if (value.indexOf("showAlert") !== -1) {
+    fields.push(
+      {
+        field: FieldType.ALERT_TEXT_FIELD,
+      },
+      {
+        field: FieldType.ALERT_TYPE_SELECTOR_FIELD,
+      },
+    );
+  }
+  return fields;
+}
+
+function getPageDropdownOptions(state: AppState) {
+  return state.entities.pageList.pages.map(page => ({
+    label: page.pageName,
+    id: page.pageId,
+    value: `'${page.pageName}'`,
+  }));
+}
+
+function Fields(props: {
+  onValueChange: Function;
+  value: string;
+  fields: any;
+  label?: string;
+  isValid: boolean;
+  validationMessage?: string;
+  apiOptionTree: TreeDropdownOption[];
+  modalDropdownList: TreeDropdownOption[];
+  pageDropdownOptions: TreeDropdownOption[];
+}) {
+  const ui = props.fields.map((field: any) => {
+    if (Array.isArray(field)) {
+      const selectorField = field[0];
+      return (
+        <Fields
+          value={selectorField.value}
+          fields={field}
+          label={selectorField.label}
+          isValid={props.isValid}
+          validationMessage={props.validationMessage}
+          apiOptionTree={props.apiOptionTree}
+          modalDropdownList={props.modalDropdownList}
+          pageDropdownOptions={props.pageDropdownOptions}
+          onValueChange={(value: any) => {
+            props.onValueChange(
+              selectorField.getParentValue(
+                value.substring(2, value.length - 2),
+              ),
+            );
+          }}
+        />
+      );
+    }
+    const fieldType = field.field;
+    const fieldConfig = fieldConfigs[fieldType];
+    const view = views[fieldConfig.view];
+    let viewElement: JSX.Element | null = null;
+
+    switch (fieldType) {
+      case FieldType.ACTION_SELECTOR_FIELD:
+      case FieldType.ON_SUCCESS_FIELD:
+      case FieldType.ON_ERROR_FIELD:
+      case FieldType.SHOW_MODAL_FIELD:
+      case FieldType.CLOSE_MODAL_FIELD:
+      case FieldType.PAGE_SELECTOR_FIELD:
+      case FieldType.ALERT_TYPE_SELECTOR_FIELD:
+        let label = "";
+        let defaultText = "Select Action";
+        let options = props.apiOptionTree;
+        let selectedLabelModifier = undefined;
+        let getDefaults = undefined;
+        if (fieldType === FieldType.ACTION_SELECTOR_FIELD) {
+          label = props.label || "";
+          selectedLabelModifier = (option: TreeDropdownOption) => {
+            if (option.type === ActionType.api) {
+              return `Call ${option.label}`;
+            }
+            return option.label;
+          };
+          getDefaults = (value: string) => {
+            return {
+              [ActionType.navigateTo]: `'${props.pageDropdownOptions[0].label}'`,
+            }[value];
+          };
+        }
+        if (
+          fieldType === FieldType.SHOW_MODAL_FIELD ||
+          fieldType === FieldType.CLOSE_MODAL_FIELD
+        ) {
+          label = "Modal Name";
+          options = props.modalDropdownList;
+          defaultText = "Select Modal";
+        }
+        if (fieldType === FieldType.PAGE_SELECTOR_FIELD) {
+          label = "Page Name";
+          options = props.pageDropdownOptions;
+          defaultText = "Select Page";
+        }
+        if (fieldType === FieldType.ALERT_TYPE_SELECTOR_FIELD) {
+          label = "type";
+          options = ALERT_STYLE_OPTIONS;
+          defaultText = "Select type";
+        }
+        viewElement = (view as (props: SelectorViewProps) => JSX.Element)({
+          options: options,
+          label: label,
+          get: fieldConfig.getter,
+          set: (value: string | DropdownOption, defaultValue?: string) => {
+            const finalValueToSet = fieldConfig.setter(
+              value,
+              props.value,
+              defaultValue,
+            );
+            props.onValueChange(finalValueToSet);
+          },
+          value: props.value,
+          defaultText: defaultText,
+          getDefaults: getDefaults,
+          selectedLabelModifier: selectedLabelModifier,
+        });
+        break;
+      case FieldType.KEY_VALUE_FIELD:
+        viewElement = (view as (props: SelectorViewProps) => JSX.Element)({
+          options: props.apiOptionTree,
+          label: "",
+          get: fieldConfig.getter,
+          set: (value: string | DropdownOption) => {
+            const finalValueToSet = fieldConfig.setter(value, props.value);
+            props.onValueChange(finalValueToSet);
+          },
+          value: props.value,
+          defaultText: "Select Action",
+        });
+        break;
+      case FieldType.ALERT_TEXT_FIELD:
+      case FieldType.URL_FIELD:
+        viewElement = (view as (props: TextViewProps) => JSX.Element)({
+          label: "",
+          get: fieldConfig.getter,
+          set: (value: string | DropdownOption) => {
+            const finalValueToSet = fieldConfig.setter(value, props.value);
+            props.onValueChange(finalValueToSet);
+          },
+          value: props.value,
+          isValid: props.isValid,
+          validationMessage: props.validationMessage,
+        });
+        break;
+      default:
+        break;
+    }
+
+    return <div key={fieldType}>{viewElement}</div>;
+  });
+
+  return <>{ui}</>;
+}
+
+function useModalDropdownList() {
+  const dispatch = useDispatch();
+  const nextModalName = useSelector(getNextModalName);
+
+  let finalList: TreeDropdownOption[] = [
+    {
+      label: "Create Modal",
+      value: "Modal",
+      id: "create",
+      className: "t--create-modal-btn",
+      onSelect: (option: TreeDropdownOption, setter?: Function) => {
+        const modalName = nextModalName;
+        if (setter) {
+          setter({
+            value: `${modalName}`,
+          });
+          dispatch(createModalAction(nextModalName));
+        }
+      },
+    },
+  ];
+
+  finalList = finalList.concat(
+    (useSelector(getModalDropdownList) || []) as TreeDropdownOption[],
+  );
+
+  return finalList;
+}
+
+function useApiOptionTree() {
+  const dispatch = useDispatch();
+  const pageId = useSelector(getCurrentPageId) || "";
+
+  const actions = useSelector(getActionsForCurrentPage);
+  const apiOptionTree = getOptionsWithChildren(baseOptions, actions, {
+    label: "Create Api",
+    value: "api",
+    id: "create",
+    className: "t--create-api-btn",
+    onSelect: (option: TreeDropdownOption, setter?: Function) => {
+      const apiName = createNewApiName(actions, pageId);
+      if (setter) {
+        setter({
+          value: `${apiName}.run`,
+          type: ActionType.api,
+        });
+        dispatch(
+          createActionRequest({
+            ...DEFAULT_API_ACTION,
+            name: apiName,
+            pageId: pageId,
+          }),
+        );
+      }
+    },
+  });
+  return apiOptionTree;
+}
+
+export function ActionCreator(props: ActionCreatorProps) {
+  const apiOptionTree = useApiOptionTree();
+  const modalDropdownList = useModalDropdownList();
+  const pageDropdownOptions = useSelector(getPageDropdownOptions);
+  const fields = getFieldFromValue(props.value);
+
+  return (
+    <Fields
+      value={props.value}
+      fields={fields}
+      isValid={props.isValid}
+      validationMessage={props.validationMessage}
+      apiOptionTree={apiOptionTree}
+      modalDropdownList={modalDropdownList}
+      pageDropdownOptions={pageDropdownOptions}
+      onValueChange={props.onValueChange}
+    />
+  );
+}
diff --git a/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx b/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx
new file mode 100644
index 0000000000..8306520bbb
--- /dev/null
+++ b/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import _ from "lodash";
+import { DropdownOption } from "widgets/DropdownWidget";
+import {
+  StyledPopover,
+  StyledDropDownContainer,
+  StyledMenuItem,
+} from "components/propertyControls/StyledControls";
+import {
+  Button as BlueprintButton,
+  Menu,
+  PopoverInteractionKind,
+  PopoverPosition,
+} from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+
+export type TreeDropdownOption = DropdownOption & {
+  onSelect?: (value: TreeDropdownOption, setter?: Function) => void;
+  children?: TreeDropdownOption[];
+  className?: string;
+  type?: string;
+};
+
+type TreeDropdownProps = {
+  optionTree: TreeDropdownOption[];
+  selectedValue: string;
+  getDefaults?: Function;
+  defaultText: string;
+  onSelect: (value: TreeDropdownOption, defaultVal?: string) => void;
+  selectedLabelModifier?: (option: TreeDropdownOption) => string;
+};
+
+function getSelectedOption(
+  selectedValue: string,
+  defaultText: string,
+  options: TreeDropdownOption[],
+) {
+  let selectedOption = {
+    label: defaultText,
+    value: "",
+  };
+  options.length > 0 &&
+    options.forEach(option => {
+      // Find the selected option in the OptionsTree
+      if (option.value === selectedValue) {
+        selectedOption = option;
+      } else {
+        const childOption = _.find(option.children, {
+          value: selectedValue,
+        });
+        if (childOption) {
+          selectedOption = childOption;
+        }
+      }
+    });
+  return selectedOption;
+}
+
+export default function TreeDropdown(props: TreeDropdownProps) {
+  const {
+    selectedValue,
+    defaultText,
+    optionTree,
+    onSelect,
+    getDefaults,
+    selectedLabelModifier,
+  } = props;
+  const selectedOption = getSelectedOption(
+    selectedValue,
+    defaultText,
+    optionTree,
+  );
+
+  const handleSelect = (option: TreeDropdownOption) => {
+    if (option.onSelect) {
+      option.onSelect(option, props.onSelect);
+    } else {
+      const defaultVal = getDefaults ? getDefaults(option.value) : undefined;
+      onSelect(option, defaultVal);
+    }
+  };
+
+  function renderTreeOption(option: TreeDropdownOption) {
+    const isSelected = selectedOption.value === option.value;
+    return (
+      <StyledMenuItem
+        className={option.className || "single-select"}
+        active={isSelected}
+        key={option.value}
+        icon={option.id === "create" ? "plus" : undefined}
+        onClick={option.children ? _.noop : () => handleSelect(option)}
+        text={option.label}
+        popoverProps={{
+          minimal: true,
+          interactionKind: PopoverInteractionKind.CLICK,
+          position: PopoverPosition.RIGHT,
+        }}
+      >
+        {option.children && option.children.map(renderTreeOption)}
+      </StyledMenuItem>
+    );
+  }
+
+  const list = optionTree.map(renderTreeOption);
+  const menuItems = <Menu>{list}</Menu>;
+  return (
+    <StyledDropDownContainer>
+      <StyledPopover usePortal={true} minimal={true} content={menuItems}>
+        <BlueprintButton
+          rightIcon={IconNames.CHEVRON_DOWN}
+          text={
+            selectedLabelModifier
+              ? selectedLabelModifier(selectedOption)
+              : selectedOption.label
+          }
+          className={`t--open-dropdown-${defaultText.split(" ").join("-")}`}
+        />
+      </StyledPopover>
+    </StyledDropDownContainer>
+  );
+}
diff --git a/app/client/src/components/propertyControls/ActionSelectorControl.tsx b/app/client/src/components/propertyControls/ActionSelectorControl.tsx
index 3a9ef3d73b..a6209d9944 100644
--- a/app/client/src/components/propertyControls/ActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ActionSelectorControl.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import BaseControl, { ControlProps } from "./BaseControl";
-import DynamicActionCreator from "components/editorComponents/DynamicActionCreator";
+// import DynamicActionCreator from "components/editorComponents/DynamicActionCreator";
+import { ActionCreator } from "components/editorComponents/actioncreator/ActionCreator";
 
 class ActionSelectorControl extends BaseControl<ControlProps> {
   handleValueUpdate = (newValue: string) => {
@@ -11,7 +12,7 @@ class ActionSelectorControl extends BaseControl<ControlProps> {
   render() {
     const { propertyValue } = this.props;
     return (
-      <DynamicActionCreator
+      <ActionCreator
         value={propertyValue}
         isValid={this.props.isValid}
         validationMessage={this.props.validationMessage}
diff --git a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
index d64df72cfe..67706b1e69 100644
--- a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
@@ -7,7 +7,7 @@ import styled from "constants/DefaultTheme";
 import { AnyStyledComponent } from "styled-components";
 import { FormIcons } from "icons/FormIcons";
 import { InputText } from "components/propertyControls/InputTextControl";
-import DynamicActionCreator from "components/editorComponents/DynamicActionCreator";
+import { ActionCreator } from "components/editorComponents/actioncreator/ActionCreator";
 
 export interface ColumnAction {
   label: string;
@@ -53,7 +53,7 @@ class ColumnActionSelectorControl extends BaseControl<
                   />
                 </Wrapper>
                 <Wrapper>
-                  <DynamicActionCreator
+                  <ActionCreator
                     value={columnAction.dynamicTrigger}
                     isValid={(columnAction as any).isValid}
                     validationMessage={(columnAction as any).message}
diff --git a/app/client/src/constants/WidgetValidation.ts b/app/client/src/constants/WidgetValidation.ts
index cd2c5ab887..af23144c7a 100644
--- a/app/client/src/constants/WidgetValidation.ts
+++ b/app/client/src/constants/WidgetValidation.ts
@@ -1,4 +1,5 @@
 import { WidgetProps } from "widgets/BaseWidget";
+import { DataTree } from "entities/DataTree/dataTreeFactory";
 
 // Always add a validator function in ./Validators for these types
 export const VALIDATION_TYPES = {
@@ -24,4 +25,8 @@ export type ValidationResponse = {
 };
 
 export type ValidationType = typeof VALIDATION_TYPES[keyof typeof VALIDATION_TYPES];
-export type Validator = (value: any, props?: WidgetProps) => ValidationResponse;
+export type Validator = (
+  value: any,
+  props: WidgetProps,
+  dataTree?: DataTree,
+) => ValidationResponse;
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
index 3fb9848a7d..1392811538 100644
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@@ -84,6 +84,8 @@ export const ERROR_403 =
   "Permission Denied. Please contact your admin to gain access.";
 export const WIDGET_TYPE_VALIDATION_ERROR = "Value does not match type";
 export const URL_HTTP_VALIDATION_ERROR = "Please enter a valid URL";
+export const NAVIGATE_TO_VALIDATION_ERROR =
+  "Please enter a valid URL or page name";
 
 export const INVITE_USERS_VALIDATION_EMAIL_LIST =
   "Invalid Email address(es) found:";
diff --git a/app/client/src/entities/DataTree/dataTreeFactory.ts b/app/client/src/entities/DataTree/dataTreeFactory.ts
index efb83e2867..d0ab8490f0 100644
--- a/app/client/src/entities/DataTree/dataTreeFactory.ts
+++ b/app/client/src/entities/DataTree/dataTreeFactory.ts
@@ -6,6 +6,7 @@ import { WidgetProps } from "widgets/BaseWidget";
 import { ActionResponse } from "api/ActionAPI";
 import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import { MetaState } from "reducers/entityReducers/metaReducer";
+import { PageListPayload } from "constants/ReduxActionConstants";
 import WidgetFactory from "utils/WidgetFactory";
 
 export type ActionDescription<T> = {
@@ -53,6 +54,7 @@ export type DataTreeEntity =
   | DataTreeAction
   | DataTreeWidget
   | DataTreeUrl
+  | PageListPayload
   | ActionDispatcher<any, any>;
 
 export type DataTree = {
@@ -63,15 +65,20 @@ type DataTreeSeed = {
   actions: ActionDataState;
   widgets: CanvasWidgetsReduxState;
   widgetsMeta: MetaState;
+  pageList: PageListPayload;
   url?: DataTreeUrl;
 };
 
 export class DataTreeFactory {
-  static create({ actions, widgets, widgetsMeta }: DataTreeSeed): DataTree {
+  static create({
+    actions,
+    widgets,
+    widgetsMeta,
+    pageList,
+  }: DataTreeSeed): DataTree {
     const dataTree: DataTree = {};
     dataTree.actionPaths = [
       "navigateTo",
-      "navigateToUrl",
       "showAlert",
       "showModal",
       "closeModal",
@@ -121,17 +128,10 @@ export class DataTreeFactory {
         ENTITY_TYPE: ENTITY_TYPE.WIDGET,
       };
     });
-    dataTree.navigateTo = function(pageName: string, params: object) {
+    dataTree.navigateTo = function(pageNameOrUrl: string, params: object) {
       return {
         type: "NAVIGATE_TO",
-        payload: { pageName, params },
-      };
-    };
-
-    dataTree.navigateToUrl = function(url: string) {
-      return {
-        type: "NAVIGATE_TO_URL",
-        payload: { url },
+        payload: { pageNameOrUrl, params },
       };
     };
 
@@ -156,6 +156,7 @@ export class DataTreeFactory {
       };
     };
 
+    dataTree.pageList = pageList;
     return dataTree;
   }
 }
diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts
index 73cf46dde0..d380b28cb7 100644
--- a/app/client/src/sagas/ActionSagas.ts
+++ b/app/client/src/sagas/ActionSagas.ts
@@ -264,13 +264,17 @@ export function* executeActionSaga(
 }
 
 function* navigateActionSaga(
-  action: { pageName: string; params: Record<string, string> },
+  action: { pageNameOrUrl: string; params: Record<string, string> },
   event: ExecuteActionPayloadEvent,
 ) {
   const pageList = yield select(getPageList);
   const applicationId = yield select(getCurrentApplicationId);
-  const page = _.find(pageList, { pageName: action.pageName });
+  const page = _.find(pageList, { pageName: action.pageNameOrUrl });
   if (page) {
+    AnalyticsUtil.logEvent("NAVIGATE", {
+      pageName: action.pageNameOrUrl,
+      pageParams: action.params,
+    });
     // TODO need to make this check via RENDER_MODE;
     const path =
       history.location.pathname.indexOf("/edit") !== -1
@@ -283,7 +287,15 @@ function* navigateActionSaga(
     history.push(path);
     if (event.callback) event.callback({ success: true });
   } else {
-    if (event.callback) event.callback({ success: false });
+    AnalyticsUtil.logEvent("NAVIGATE", {
+      navUrl: action.pageNameOrUrl,
+    });
+    // Add a default protocol if it doesn't exist.
+    let url = action.pageNameOrUrl;
+    if (url.indexOf("://") === -1) {
+      url = "https://" + url;
+    }
+    window.location.assign(url);
   }
 }
 
@@ -296,29 +308,8 @@ export function* executeActionTriggers(
       yield call(executeActionSaga, trigger.payload, event);
       break;
     case "NAVIGATE_TO":
-      AnalyticsUtil.logEvent("NAVIGATE", {
-        pageName: trigger.payload.pageName,
-        pageParams: trigger.payload.pageParams,
-      });
       yield call(navigateActionSaga, trigger.payload, event);
       break;
-    case "NAVIGATE_TO_URL":
-      if (trigger.payload.url) {
-        AnalyticsUtil.logEvent("NAVIGATE", {
-          navUrl: trigger.payload.url,
-        });
-        // Add a default protocol if it doesn't exist.
-        let url = trigger.payload.url;
-        if (url.indexOf("://") === -1) {
-          url = "https://" + url;
-        }
-        window.location.assign(url);
-
-        if (event.callback) event.callback({ success: true });
-      } else {
-        if (event.callback) event.callback({ success: false });
-      }
-      break;
     case "SHOW_ALERT":
       AppToaster.show({
         message: trigger.payload.message,
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index e936a1fd62..e5b05661db 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -337,6 +337,7 @@ function* setWidgetDynamicPropertySaga(
 ) {
   const { isDynamic, propertyName, widgetId } = action.payload;
   const widget: WidgetProps = yield select(getWidget, widgetId);
+  // const tree = yield select(evaluateDataTree);
   const propertyValue = widget[propertyName];
   const dynamicProperties: Record<string, true> = {
     ...widget.dynamicProperties,
diff --git a/app/client/src/selectors/dataTreeSelectors.ts b/app/client/src/selectors/dataTreeSelectors.ts
index e8ee97a8a0..bfb94728a7 100644
--- a/app/client/src/selectors/dataTreeSelectors.ts
+++ b/app/client/src/selectors/dataTreeSelectors.ts
@@ -8,6 +8,7 @@ import _ from "lodash";
 import { getWidgets, getWidgetsMeta } from "sagas/selectors";
 import * as log from "loglevel";
 import "url-search-params-polyfill";
+import { getPageList } from "./appViewSelectors";
 
 // TODO Commenting out for now as it is causing performance issues
 // function getQueryParams() {
@@ -42,11 +43,14 @@ export const getUnevaluatedDataTree = createSelector(
   getActionsForCurrentPage,
   getWidgets,
   getWidgetsMeta,
-  (actions, widgets, widgetsMeta) => {
+  getPageList,
+  (actions, widgets, widgetsMeta, pageListPayload) => {
+    const pageList = pageListPayload || [];
     return DataTreeFactory.create({
       actions,
       widgets,
       widgetsMeta,
+      pageList,
     });
   },
 );
diff --git a/app/client/src/selectors/widgetSelectors.ts b/app/client/src/selectors/widgetSelectors.ts
index 22f130e4ac..c52ae744c7 100644
--- a/app/client/src/selectors/widgetSelectors.ts
+++ b/app/client/src/selectors/widgetSelectors.ts
@@ -18,7 +18,7 @@ export const getModalDropdownList = createSelector(
     return modalWidgets.map((widget: FlattenedWidgetProps) => ({
       id: widget.widgetId,
       label: widget.widgetName,
-      value: `'${widget.widgetName}'`,
+      value: `${widget.widgetName}`,
     }));
   },
 );
diff --git a/app/client/src/utils/DynamicBindingUtils.ts b/app/client/src/utils/DynamicBindingUtils.ts
index f69233cead..9d73990cf9 100644
--- a/app/client/src/utils/DynamicBindingUtils.ts
+++ b/app/client/src/utils/DynamicBindingUtils.ts
@@ -203,6 +203,7 @@ export const getValidatedTree = (tree: any) => {
           property,
           value,
           entity,
+          tree,
         );
         parsedEntity[property] = parsed;
         if (!isValid) {
@@ -515,6 +516,7 @@ export function dependencySortedEvaluateDataTree(
             propertyName,
             evalPropertyValue,
             entity,
+            currentTree,
           );
           evalPropertyValue = parsed;
           if (!isValid) {
diff --git a/app/client/src/utils/ValidationFactory.ts b/app/client/src/utils/ValidationFactory.ts
index 522ac62c52..94b01d7f5a 100644
--- a/app/client/src/utils/ValidationFactory.ts
+++ b/app/client/src/utils/ValidationFactory.ts
@@ -7,6 +7,7 @@ import {
   Validator,
 } from "constants/WidgetValidation";
 import { WidgetProps } from "widgets/BaseWidget";
+import { DataTree } from "entities/DataTree/dataTreeFactory";
 
 export const BASE_WIDGET_VALIDATION = {
   isLoading: VALIDATION_TYPES.BOOLEAN,
@@ -33,8 +34,8 @@ class ValidationFactory {
     widgetType: WidgetType,
     property: string,
     value: any,
-    //TODO: Satbir: Figure out a way to declare the right type.
-    props?: WidgetProps,
+    props: WidgetProps,
+    dataTree?: DataTree,
   ): ValidationResponse {
     // TODO WIDGETFACTORY
     const propertyValidationTypes = WidgetFactory.getWidgetPropertyValidationMap(
@@ -49,7 +50,7 @@ class ValidationFactory {
       validator = this.validationMap.get(validationTypeOrValidator);
     }
     if (validator) {
-      return validator(value, props);
+      return validator(value, props, dataTree);
     } else {
       return { isValid: true, parsed: value };
     }
diff --git a/app/client/src/utils/Validators.ts b/app/client/src/utils/Validators.ts
index e4ac98492f..61f0c869e3 100644
--- a/app/client/src/utils/Validators.ts
+++ b/app/client/src/utils/Validators.ts
@@ -8,13 +8,20 @@ import {
 import moment from "moment";
 import {
   WIDGET_TYPE_VALIDATION_ERROR,
-  URL_HTTP_VALIDATION_ERROR,
+  NAVIGATE_TO_VALIDATION_ERROR,
 } from "constants/messages";
-import { getTextArgValue } from "components/editorComponents/DynamicActionCreator";
+import { modalGetter } from "components/editorComponents/actioncreator/ActionCreator";
+import { WidgetProps } from "widgets/BaseWidget";
+import { DataTree } from "entities/DataTree/dataTreeFactory";
+import { PageListPayload } from "constants/ReduxActionConstants";
 const URL_REGEX = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/;
 
 export const VALIDATORS: Record<ValidationType, Validator> = {
-  [VALIDATION_TYPES.TEXT]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.TEXT]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     let parsed = value;
     if (_.isUndefined(value) || value === null) {
       return {
@@ -47,9 +54,15 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.REGEX]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.REGEX]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     const { isValid, parsed, message } = VALIDATORS[VALIDATION_TYPES.TEXT](
       value,
+      props,
+      dataTree,
     );
 
     if (isValid) {
@@ -66,7 +79,11 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
 
     return { isValid, parsed, message };
   },
-  [VALIDATION_TYPES.NUMBER]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.NUMBER]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     let parsed = value;
     if (_.isUndefined(value)) {
       return {
@@ -99,7 +116,11 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.BOOLEAN]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.BOOLEAN]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     let parsed = value;
     if (_.isUndefined(value)) {
       return {
@@ -121,7 +142,11 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.OBJECT]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.OBJECT]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     let parsed = value;
     if (_.isUndefined(value)) {
       return {
@@ -147,7 +172,11 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.ARRAY]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.ARRAY]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     let parsed = value;
     try {
       if (_.isUndefined(value)) {
@@ -177,8 +206,16 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
       };
     }
   },
-  [VALIDATION_TYPES.TABLE_DATA]: (value: any): ValidationResponse => {
-    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](value);
+  [VALIDATION_TYPES.TABLE_DATA]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
+    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](
+      value,
+      props,
+      dataTree,
+    );
     if (!isValid) {
       return {
         isValid,
@@ -194,8 +231,16 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.CHART_DATA]: (value: any): ValidationResponse => {
-    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](value);
+  [VALIDATION_TYPES.CHART_DATA]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
+    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](
+      value,
+      props,
+      dataTree,
+    );
     if (!isValid) {
       return {
         isValid,
@@ -211,8 +256,16 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.MARKERS]: (value: any): ValidationResponse => {
-    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](value);
+  [VALIDATION_TYPES.MARKERS]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
+    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](
+      value,
+      props,
+      dataTree,
+    );
     if (!isValid) {
       return {
         isValid,
@@ -228,8 +281,16 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.OPTIONS_DATA]: (value: any): ValidationResponse => {
-    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](value);
+  [VALIDATION_TYPES.OPTIONS_DATA]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
+    const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](
+      value,
+      props,
+      dataTree,
+    );
     if (!isValid) {
       return {
         isValid,
@@ -253,7 +314,11 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
     }
     return { isValid, parsed };
   },
-  [VALIDATION_TYPES.DATE]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.DATE]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     if (value === undefined) {
       const today = new Date();
       today.setHours(0, 0, 0);
@@ -271,16 +336,25 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
       message: isValid ? "" : `${WIDGET_TYPE_VALIDATION_ERROR}: Date`,
     };
   },
-  [VALIDATION_TYPES.ACTION_SELECTOR]: (value: any): ValidationResponse => {
+  [VALIDATION_TYPES.ACTION_SELECTOR]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
     if (_.isString(value)) {
-      if (value.indexOf("navigateToUrl") !== -1) {
-        const url = getTextArgValue(value);
-        const isValidUrl = URL_REGEX.test(url);
-        if (!isValidUrl) {
+      if (value.indexOf("navigateTo") !== -1) {
+        const pageNameOrUrl = modalGetter(value);
+        const isPage =
+          dataTree &&
+          (dataTree.pageList as PageListPayload).findIndex(
+            page => page.pageName === pageNameOrUrl,
+          ) !== -1;
+        const isValidUrl = URL_REGEX.test(pageNameOrUrl);
+        if (!(isValidUrl || isPage)) {
           return {
             isValid: false,
             parsed: value,
-            message: `${URL_HTTP_VALIDATION_ERROR}`,
+            message: `${NAVIGATE_TO_VALIDATION_ERROR}`,
           };
         }
       }
@@ -292,9 +366,13 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
   },
   [VALIDATION_TYPES.ARRAY_ACTION_SELECTOR]: (
     value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
   ): ValidationResponse => {
     const { isValid, parsed, message } = VALIDATORS[VALIDATION_TYPES.ARRAY](
       value,
+      props,
+      dataTree,
     );
     let isValidFinal = isValid;
     let finalParsed = parsed.slice();
@@ -302,7 +380,7 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
       finalParsed = parsed.map((value: any) => {
         const { isValid, message } = VALIDATORS[
           VALIDATION_TYPES.ACTION_SELECTOR
-        ](value.dynamicTrigger);
+        ](value.dynamicTrigger, props, dataTree);
 
         isValidFinal = isValidFinal && isValid;
         return {
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index a9b2ea0e5f..518c7c1e55 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -11,6 +11,7 @@ import {
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import { VALIDATORS } from "utils/Validators";
+import { DataTree } from "entities/DataTree/dataTreeFactory";
 
 class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -23,12 +24,16 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       isRequired: VALIDATION_TYPES.BOOLEAN,
       onOptionChange: VALIDATION_TYPES.ACTION_SELECTOR,
       selectedOptionValueArr: VALIDATION_TYPES.ARRAY,
-      defaultOptionValue: (value: string | string[], props?: WidgetProps) => {
+      defaultOptionValue: (
+        value: string | string[],
+        props: WidgetProps,
+        dataTree?: DataTree,
+      ) => {
         let values = value;
 
         if (props) {
           if (props.selectionType === "SINGLE_SELECT") {
-            return VALIDATORS[VALIDATION_TYPES.TEXT](value);
+            return VALIDATORS[VALIDATION_TYPES.TEXT](value, props, dataTree);
           } else if (props.selectionType === "MULTI_SELECT") {
             if (typeof value === "string") {
               try {

From 283252892b738577a830edbf5d6caccfa57c52a9 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Mon, 20 Apr 2020 08:26:19 +0000
Subject: [PATCH 26/31] Add a feature flag for new api pane

---
 app/client/src/actions/apiPaneActions.ts      |  7 +++
 .../src/constants/ReduxActionConstants.tsx    |  1 +
 .../pages/Editor/APIEditor/ApiHomeScreen.tsx  | 26 +++-------
 .../src/pages/Editor/APIEditor/index.tsx      | 32 ++++++++++---
 app/client/src/pages/Editor/ApiSidebar.tsx    | 30 ++++++++----
 app/client/src/sagas/ApiPaneSagas.ts          | 47 +++++++++++++++++--
 app/client/src/sagas/selectors.tsx            | 10 ++++
 app/client/src/utils/featureFlags.ts          |  5 ++
 8 files changed, 120 insertions(+), 38 deletions(-)
 create mode 100644 app/client/src/utils/featureFlags.ts

diff --git a/app/client/src/actions/apiPaneActions.ts b/app/client/src/actions/apiPaneActions.ts
index 36cb77d357..d968f86042 100644
--- a/app/client/src/actions/apiPaneActions.ts
+++ b/app/client/src/actions/apiPaneActions.ts
@@ -13,3 +13,10 @@ export const initApiPane = (urlId?: string): ReduxAction<{ id?: string }> => {
     payload: { id: urlId },
   };
 };
+
+export const createNewApiAction = (
+  pageId: string,
+): ReduxAction<{ pageId: string }> => ({
+  type: ReduxActionTypes.CREATE_NEW_API_ACTION,
+  payload: { pageId },
+});
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
index 825636e2e0..9f8b7e1337 100644
--- a/app/client/src/constants/ReduxActionConstants.tsx
+++ b/app/client/src/constants/ReduxActionConstants.tsx
@@ -176,6 +176,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   CLEAR_PROVIDERS: "CLEAR_PROVIDERS",
   BATCHED_UPDATE: "BATCHED_UPDATE",
   EXECUTE_BATCH: "EXECUTE_BATCH",
+  CREATE_NEW_API_ACTION: "CREATE_NEW_API_ACTION",
 };
 
 export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes];
diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
index 1a55b5e3d5..f1c2222c06 100644
--- a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
@@ -5,11 +5,7 @@ import { reduxForm, InjectedFormProps, getFormValues } from "redux-form";
 import { Icon, Card } from "@blueprintjs/core";
 import styled from "styled-components";
 import InfiniteScroll from "react-infinite-scroller";
-import {
-  DEFAULT_API_ACTION,
-  DEFAULT_PROVIDER_OPTION,
-  REST_PLUGIN_PACKAGE_NAME,
-} from "constants/ApiEditorConstants";
+import { DEFAULT_PROVIDER_OPTION } from "constants/ApiEditorConstants";
 import {
   getCurlImportPageURL,
   getProviderTemplatesURL,
@@ -35,7 +31,6 @@ import {
   fetchProvidersWithCategory,
   clearProviders,
 } from "actions/providerActions";
-import { createNewApiName } from "utils/AppsmithUtils";
 import { Colors } from "constants/Colors";
 import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 // import { BaseTextInput } from "components/designSystems/appsmith/TextInputComponent";
@@ -46,7 +41,7 @@ import Spinner from "components/editorComponents/Spinner";
 import CurlLogo from "assets/images/Curl-logo.svg";
 import { FetchProviderWithCategoryRequest } from "api/ProvidersApi";
 import { Plugin } from "api/PluginApi";
-import _ from "lodash";
+import { createNewApiAction } from "actions/apiPaneActions";
 
 // const SearchContainer = styled.div`
 //   display: flex;
@@ -241,6 +236,7 @@ type ApiHomeScreenProps = {
   isFetchingProviders: boolean;
   providersTotal: number;
   isSwitchingCategory: boolean;
+  createNewApiAction: (pageId: string) => void;
 };
 
 type ApiHomeScreenState = {
@@ -283,20 +279,9 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
   }
 
   handleCreateNew = (params: string) => {
-    const { actions, plugins } = this.props;
     const pageId = new URLSearchParams(params).get("importTo");
-    const plugin = _.find(plugins, { packageName: REST_PLUGIN_PACKAGE_NAME });
-    if (pageId && plugin) {
-      const newActionName = createNewApiName(actions, pageId);
-      this.props.createAction({
-        ...DEFAULT_API_ACTION,
-        name: newActionName,
-        datasource: {
-          name: "DEFAULT_REST_DATASOURCE",
-          pluginId: plugin.id,
-        },
-        pageId,
-      });
+    if (pageId) {
+      this.props.createNewApiAction(pageId);
     }
   };
 
@@ -560,6 +545,7 @@ const mapDispatchToProps = (dispatch: any) => ({
     dispatch(fetchProvidersWithCategory(request)),
   createAction: (data: Partial<RestAction>) =>
     dispatch(createActionRequest(data)),
+  createNewApiAction: (pageId: string) => dispatch(createNewApiAction(pageId)),
 });
 
 export default connect(
diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
index 0527886847..4a092cb09a 100644
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@@ -24,6 +24,16 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 import { getCurrentPageName, getActionById } from "selectors/editorSelectors";
 import { Plugin } from "api/PluginApi";
 import { ActionData } from "reducers/entityReducers/actionsReducer";
+import { API_PANE_V2, checkForFlag } from "utils/featureFlags";
+import styled from "styled-components";
+
+const EmptyStateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 20px;
+`;
 
 interface ReduxStateProps {
   actions: ActionDataState;
@@ -139,6 +149,21 @@ class ApiEditor extends React.Component<Props> {
 
     const { isSaving, isRunning, isDeleting, drafts } = apiPane;
     const paginationType = _.get(data, "actionConfiguration.paginationType");
+    const apiHomeScreen = (
+      <ApiHomeScreen
+        applicationId={this.props.match.params.applicationId}
+        pageId={this.props.match.params.pageId}
+        history={this.props.history}
+        location={this.props.location}
+      />
+    );
+    const defaultHomeScreen = (
+      <EmptyStateContainer>
+        {"Create / Select an API from the list"}
+      </EmptyStateContainer>
+    );
+    const v2Flag = checkForFlag(API_PANE_V2);
+    const homeScreen = v2Flag ? apiHomeScreen : defaultHomeScreen;
     return (
       <React.Fragment>
         {apiId ? (
@@ -183,12 +208,7 @@ class ApiEditor extends React.Component<Props> {
             )}
           </>
         ) : (
-          <ApiHomeScreen
-            applicationId={this.props.match.params.applicationId}
-            pageId={this.props.match.params.pageId}
-            history={this.props.history}
-            location={this.props.location}
-          />
+          homeScreen
         )}
       </React.Fragment>
     );
diff --git a/app/client/src/pages/Editor/ApiSidebar.tsx b/app/client/src/pages/Editor/ApiSidebar.tsx
index b059280003..c8c689fe23 100644
--- a/app/client/src/pages/Editor/ApiSidebar.tsx
+++ b/app/client/src/pages/Editor/ApiSidebar.tsx
@@ -12,7 +12,11 @@ import {
   copyActionRequest,
   deleteAction,
 } from "actions/actionActions";
-import { changeApi, initApiPane } from "actions/apiPaneActions";
+import {
+  changeApi,
+  createNewApiAction,
+  initApiPane,
+} from "actions/apiPaneActions";
 import { RestAction } from "api/ActionAPI";
 import { getPluginIdOfName } from "selectors/entitiesSelector";
 import { PLUGIN_NAME } from "constants/ApiEditorConstants";
@@ -20,6 +24,7 @@ import EditorSidebar from "pages/Editor/EditorSidebar";
 import { getNextEntityName } from "utils/AppsmithUtils";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { API_EDITOR_URL_WITH_SELECTED_PAGE_ID } from "constants/routes";
+import { API_PANE_V2, checkForFlag } from "utils/featureFlags";
 
 const HTTPMethod = styled.span<{ method?: string }>`
   flex: 1;
@@ -73,6 +78,7 @@ interface ReduxDispatchProps {
   ) => void;
   copyAction: (id: string, pageId: string, name: string) => void;
   deleteAction: (id: string, name: string) => void;
+  createNewApiAction: (pageId: string) => void;
 }
 
 type Props = ReduxStateProps &
@@ -159,15 +165,20 @@ class ApiSidebar extends React.Component<Props> {
   };
 
   handleCreateNewApiClick = (selectedPageId: string) => {
-    const { history } = this.props;
+    const { history, createNewApiAction } = this.props;
     const { pageId, applicationId } = this.props.match.params;
-    history.push(
-      API_EDITOR_URL_WITH_SELECTED_PAGE_ID(
-        applicationId,
-        pageId,
-        selectedPageId,
-      ),
-    );
+    const v2Flag = checkForFlag(API_PANE_V2);
+    if (v2Flag) {
+      history.push(
+        API_EDITOR_URL_WITH_SELECTED_PAGE_ID(
+          applicationId,
+          pageId,
+          selectedPageId,
+        ),
+      );
+    } else {
+      createNewApiAction(selectedPageId);
+    }
   };
 
   render() {
@@ -223,6 +234,7 @@ const mapDispatchToProps = (dispatch: Function): ReduxDispatchProps => ({
     dispatch(copyActionRequest({ id, destinationPageId, name })),
   deleteAction: (id: string, name: string) =>
     dispatch(deleteAction({ id, name })),
+  createNewApiAction: (pageId: string) => dispatch(createNewApiAction(pageId)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ApiSidebar);
diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index ca4098f398..37e051312c 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -11,7 +11,11 @@ import {
 } from "constants/ReduxActionConstants";
 import { getFormData } from "selectors/formSelectors";
 import { API_EDITOR_FORM_NAME, API_HOME_SCREEN_FORM } from "constants/forms";
-import { POST_BODY_FORMAT_OPTIONS } from "constants/ApiEditorConstants";
+import {
+  DEFAULT_API_ACTION,
+  POST_BODY_FORMAT_OPTIONS,
+  REST_PLUGIN_PACKAGE_NAME,
+} from "constants/ApiEditorConstants";
 import history from "utils/history";
 import { API_EDITOR_ID_URL, API_EDITOR_URL } from "constants/routes";
 import {
@@ -31,6 +35,11 @@ import {
   VALID_FUNCTION_NAME_ERROR,
 } from "constants/messages";
 import { fetchProvidersWithCategory } from "actions/providerActions";
+import { createNewApiName } from "utils/AppsmithUtils";
+import { getPluginIdOfPackageName } from "sagas/selectors";
+import { getActions } from "selectors/entitiesSelector";
+import { ActionData } from "reducers/entityReducers/actionsReducer";
+import { createActionRequest } from "actions/actionActions";
 
 const getApiDraft = (state: AppState, id: string) => {
   const drafts = state.ui.apiPane.drafts;
@@ -38,7 +47,7 @@ const getApiDraft = (state: AppState, id: string) => {
   return {};
 };
 
-const getActions = (state: AppState) =>
+const getActionConfigs = (state: AppState): ActionData["config"][] =>
   state.entities.actions.map(a => a.config);
 
 const getLastUsedAction = (state: AppState) => state.ui.apiPane.lastUsed;
@@ -234,7 +243,7 @@ function* validateInputSaga(
     payload,
     meta: { field },
   } = actionPayload;
-  const actions: RestAction[] = yield select(getActions);
+  const actions: RestAction[] = yield select(getActionConfigs);
   const sameNames = actions.filter(
     (action: RestAction) => action.name === payload && action.id,
   );
@@ -375,6 +384,34 @@ function* handleMoveOrCopySaga(actionPayload: ReduxAction<{ id: string }>) {
   }
 }
 
+function* handleCreateNewApiActionSaga(
+  action: ReduxAction<{ pageId: string }>,
+) {
+  const pluginId = yield select(
+    getPluginIdOfPackageName,
+    REST_PLUGIN_PACKAGE_NAME,
+  );
+  const { pageId } = action.payload;
+  if (pageId && pluginId) {
+    const actions = yield select(getActions);
+    const pageActions = actions.filter(
+      (a: ActionData) => a.config.pageId === pageId,
+    );
+    const newActionName = createNewApiName(pageActions, pageId);
+    yield put(
+      createActionRequest({
+        ...DEFAULT_API_ACTION,
+        name: newActionName,
+        datasource: {
+          name: "DEFAULT_REST_DATASOURCE",
+          pluginId,
+        },
+        pageId,
+      }),
+    );
+  }
+}
+
 export default function* root() {
   yield all([
     takeEvery(ReduxActionTypes.INIT_API_PANE, initApiPaneSaga),
@@ -384,6 +421,10 @@ export default function* root() {
     takeEvery(ReduxActionTypes.DELETE_ACTION_SUCCESS, handleActionDeletedSaga),
     takeEvery(ReduxActionTypes.MOVE_ACTION_SUCCESS, handleMoveOrCopySaga),
     takeEvery(ReduxActionTypes.COPY_ACTION_SUCCESS, handleMoveOrCopySaga),
+    takeEvery(
+      ReduxActionTypes.CREATE_NEW_API_ACTION,
+      handleCreateNewApiActionSaga,
+    ),
     // Intercepting the redux-form change actionType
     takeEvery(ReduxFormActionTypes.VALUE_CHANGE, formValueChangeSaga),
     takeEvery(ReduxFormActionTypes.ARRAY_REMOVE, formValueChangeSaga),
diff --git a/app/client/src/sagas/selectors.tsx b/app/client/src/sagas/selectors.tsx
index ccfc96b44f..70eba2cf7b 100644
--- a/app/client/src/sagas/selectors.tsx
+++ b/app/client/src/sagas/selectors.tsx
@@ -74,3 +74,13 @@ export const getWidgetByName = (
     widget => widget.widgetName === widgetName,
   );
 };
+
+export const getPluginIdOfPackageName = (
+  state: AppState,
+  name: string,
+): string | undefined => {
+  const plugins = state.entities.plugins.list;
+  const plugin = _.find(plugins, { packageName: name });
+  if (plugin) return plugin.id;
+  return undefined;
+};
diff --git a/app/client/src/utils/featureFlags.ts b/app/client/src/utils/featureFlags.ts
new file mode 100644
index 0000000000..cd7c87cedc
--- /dev/null
+++ b/app/client/src/utils/featureFlags.ts
@@ -0,0 +1,5 @@
+export const API_PANE_V2 = "ApiPaneV2";
+
+export const checkForFlag = (flagName: string) => {
+  return localStorage.getItem(flagName);
+};

From 2f5a3104f1f5fc05013cb943cc0ad179e676d4ed Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Tue, 21 Apr 2020 07:54:23 +0000
Subject: [PATCH 27/31] Fix radio widget default value and Post api save error

---
 .../src/transformers/RestActionTransformer.ts    |  4 ++--
 app/client/src/widgets/BaseWidget.tsx            |  2 +-
 app/client/src/widgets/CheckboxWidget.tsx        |  2 +-
 app/client/src/widgets/DropdownWidget.tsx        |  2 +-
 app/client/src/widgets/MapWidget.tsx             |  7 +++++++
 app/client/src/widgets/RadioGroupWidget.tsx      |  2 +-
 app/client/src/widgets/RichTextEditorWidget.tsx  | 16 ----------------
 7 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/app/client/src/transformers/RestActionTransformer.ts b/app/client/src/transformers/RestActionTransformer.ts
index 95fee8d5a6..f15433fd5d 100644
--- a/app/client/src/transformers/RestActionTransformer.ts
+++ b/app/client/src/transformers/RestActionTransformer.ts
@@ -21,7 +21,7 @@ export const transformRestAction = (data: any): any => {
     data.displayFormat &&
     data.displayFormat === POST_BODY_FORMAT_OPTIONS[0].value
   ) {
-    if (data.actionConfiguration.body[0]) {
+    if (data.actionConfiguration.body && data.actionConfiguration.body[0]) {
       const body = data.actionConfiguration.body[0];
       action = {
         ...data,
@@ -36,7 +36,7 @@ export const transformRestAction = (data: any): any => {
     data.displayFormat &&
     data.displayFormat === POST_BODY_FORMAT_OPTIONS[1].value
   ) {
-    if (data.actionConfiguration.body[1]) {
+    if (data.actionConfiguration.body && data.actionConfiguration.body[1]) {
       const body = data.actionConfiguration.body[1];
       if (typeof data.actionConfiguration.body === "object") {
         action = {
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index 12d536d457..d2741d2f94 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -71,7 +71,7 @@ abstract class BaseWidget<
     return {};
   }
 
-  static getMetaPropertiesMap(): Record<string, string> {
+  static getMetaPropertiesMap(): Record<string, any> {
     return {};
   }
 
diff --git a/app/client/src/widgets/CheckboxWidget.tsx b/app/client/src/widgets/CheckboxWidget.tsx
index b7ea054cb0..1df4d69bbf 100644
--- a/app/client/src/widgets/CheckboxWidget.tsx
+++ b/app/client/src/widgets/CheckboxWidget.tsx
@@ -34,7 +34,7 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
 
   static getMetaPropertiesMap(): Record<string, any> {
     return {
-      isChecked: false,
+      isChecked: undefined,
     };
   }
 
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index 518c7c1e55..d2c127bbcf 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -88,7 +88,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   static getMetaPropertiesMap(): Record<string, any> {
     return {
       selectedOptionValue: undefined,
-      selectedOptionValueArr: [],
+      selectedOptionValueArr: undefined,
     };
   }
 
diff --git a/app/client/src/widgets/MapWidget.tsx b/app/client/src/widgets/MapWidget.tsx
index 58d64e4c09..0450e11da5 100644
--- a/app/client/src/widgets/MapWidget.tsx
+++ b/app/client/src/widgets/MapWidget.tsx
@@ -37,6 +37,13 @@ class MapWidget extends BaseWidget<MapWidgetProps, WidgetState> {
     };
   }
 
+  static getMetaPropertiesMap(): Record<string, undefined> {
+    return {
+      center: undefined,
+      markers: undefined,
+    };
+  }
+
   updateCenter = (lat: number, lng: number) => {
     this.updateWidgetMetaProperty("center", { lat, lng });
   };
diff --git a/app/client/src/widgets/RadioGroupWidget.tsx b/app/client/src/widgets/RadioGroupWidget.tsx
index abe86f24b5..e4ee423877 100644
--- a/app/client/src/widgets/RadioGroupWidget.tsx
+++ b/app/client/src/widgets/RadioGroupWidget.tsx
@@ -43,7 +43,7 @@ class RadioGroupWidget extends BaseWidget<RadioGroupWidgetProps, WidgetState> {
 
   static getMetaPropertiesMap(): Record<string, any> {
     return {
-      selectedOptionValue: "",
+      selectedOptionValue: undefined,
     };
   }
 
diff --git a/app/client/src/widgets/RichTextEditorWidget.tsx b/app/client/src/widgets/RichTextEditorWidget.tsx
index 0ed38c487d..2c0e85bbf3 100644
--- a/app/client/src/widgets/RichTextEditorWidget.tsx
+++ b/app/client/src/widgets/RichTextEditorWidget.tsx
@@ -45,22 +45,6 @@ class RichTextEditorWidget extends BaseWidget<
     };
   }
 
-  componentDidMount() {
-    super.componentDidMount();
-    if (this.props.defaultText) {
-      this.updateWidgetMetaProperty("text", this.props.defaultText);
-    }
-  }
-
-  componentDidUpdate(prevProps: RichTextEditorWidgetProps) {
-    super.componentDidUpdate(prevProps);
-    if (this.props.defaultText) {
-      if (this.props.defaultText !== prevProps.defaultText) {
-        this.updateWidgetMetaProperty("text", this.props.defaultText);
-      }
-    }
-  }
-
   onValueChange = (text: string) => {
     this.updateWidgetMetaProperty("text", text);
     if (this.props.onTextChange) {

From 67cc6854b7dfa148660973cbc8d13c27b60ae020 Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 21 Apr 2020 13:31:36 +0530
Subject: [PATCH 28/31] fix issue with not returning draft in data

---
 app/client/src/pages/Editor/APIEditor/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
index 4a092cb09a..7bd4b1bd31 100644
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@@ -221,8 +221,8 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
 
   const { drafts } = state.ui.apiPane;
   let data: RestAction | ActionData | RapidApiAction | undefined;
-  if (props.match.params.id in drafts) {
-    data = drafts[props.match.params.id];
+  if (apiAction && apiAction.id in drafts) {
+    data = drafts[apiAction.id];
   } else {
     data = apiAction;
   }

From 51ee20e64a126e01ade135ff5c9647de9f6ced9b Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Tue, 21 Apr 2020 10:27:15 +0000
Subject: [PATCH 29/31] Cypress drag and drop

---
 .../CommonWidgets/Button_spec.js              | 28 +++++++++++++++--
 app/client/cypress/locators/Pages.json        |  2 +-
 app/client/cypress/locators/WidgetCard.json   | 18 +++++++++++
 .../cypress/locators/commonlocators.json      |  6 ++--
 app/client/cypress/support/commands.js        | 30 ++++++++-----------
 app/client/package.json                       |  1 -
 .../editorComponents/DropTargetComponent.tsx  |  1 +
 app/client/src/pages/Editor/index.tsx         | 11 +++----
 app/client/yarn.lock                          |  8 -----
 9 files changed, 68 insertions(+), 37 deletions(-)
 create mode 100644 app/client/cypress/locators/WidgetCard.json

diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
index dc50f7b2be..e58ce9c0fe 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
@@ -1,11 +1,35 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
+const WidgetCardLocators = require("../../../locators/WidgetCard.json");
 
 describe("Button Widget Functionality", function() {
-  it("Button Widget Functionality", function() {
-    cy.NavigateToCommonWidgets();
+  before(() => {
+    cy.NavigateToAllWidgets();
     cy.get(".t--nav-link-widgets-editor").click();
+
+    cy.get(WidgetCardLocators.buttonwidget)
+      .first()
+      .trigger("dragstart");
+
+    cy.get(commonlocators.dropTarget)
+      //NOTE: This is to select containers. Container 0 is not selectable.
+      .eq(1)
+      .trigger("drop", 200, 100);
+    cy.get(commonlocators.dropTarget)
+      .eq(1)
+      .trigger("dragend", { force: true })
+      .trigger("mouseup", { force: true });
+  });
+
+  after(() => {
     cy.get(widgetsPage.buttonWidget).click({ force: true });
+    cy.get(commonlocators.widgetDelete).click({ force: true });
+  });
+
+  it("Test button spec", function() {
+    cy.get(widgetsPage.buttonWidget)
+      .trigger("mouseover", { force: true })
+      .click({ force: true });
 
     //Changing the text on the Button
     cy.testCodeMirror("Test Button Text");
diff --git a/app/client/cypress/locators/Pages.json b/app/client/cypress/locators/Pages.json
index 929c16603d..f4882b3ced 100644
--- a/app/client/cypress/locators/Pages.json
+++ b/app/client/cypress/locators/Pages.json
@@ -1,8 +1,8 @@
 {
     "pagesIcon": ".t--nav-link-manage-pages",
     "commonWidgets": ".t--page-sidebar-CommonWidgets",
+    "allWidgets": ".t--page-sidebar-AllWidgets",
     "formWidgets": ".t--page-sidebar-FormWidgets",
     "viewWidgets":".t--page-sidebar-ViewWidgets",
     "widgetsEditor": ".t--nav-link-widgets-editor"
-
 }
\ No newline at end of file
diff --git a/app/client/cypress/locators/WidgetCard.json b/app/client/cypress/locators/WidgetCard.json
new file mode 100644
index 0000000000..f8c1bbfa19
--- /dev/null
+++ b/app/client/cypress/locators/WidgetCard.json
@@ -0,0 +1,18 @@
+{
+    "containerwidget": ".t--widget-card-draggable-containerwidget",
+    "buttonwidget": ".t--widget-card-draggable-buttonwidget",
+    "tablewidget": ".t--widget-card-draggable-tablewidget",
+    "inputwidget": ".t--widget-card-draggable-inputwidget",
+    "textwidget": ".t--widget-card-draggable-textwidget",
+    "formwidget": ".t--widget-card-draggable-formwidget",
+    "dropdownwidget": ".t--widget-card-draggable-dropdownwidget",
+    "checkboxwidget": ".t--widget-card-draggable-checkboxwidget",
+    "radiogroupwidget": ".t--widget-card-draggable-radiogroupwidget",
+    "datepickerwidget": ".t--widget-card-draggable-datepickerwidget",
+    "filepickerwidget": ".t--widget-card-draggable-filepickerwidget",
+    "richtexteditorwidget": ".t--widget-card-draggable-richtexteditorwidget",
+    "imagewidget": ".t--widget-card-draggable-imagewidget",
+    "chartwidget": ".t--widget-card-draggable-chartwidget",
+    "mapwidget": ".t--widget-card-draggable-mapwidget",
+    "tabswidget": ".t--widget-card-draggable-tabswidget"
+}
\ No newline at end of file
diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
index 204cd880d2..834c7dbfdf 100644
--- a/app/client/cypress/locators/commonlocators.json
+++ b/app/client/cypress/locators/commonlocators.json
@@ -2,7 +2,7 @@
     "editIcon":".t--widget-propertypane-toggle",
     "editPropCrossButton":".t--property-pane-close-btn",
     "deleteWidgetIcon":".t--widget-delete-control",
-    "dropdownSelectButton":".t--open-dropdown-Select-Action"
-   
-
+    "dropdownSelectButton":".t--open-dropdown-Select-Action",
+    "dropTarget": ".t--droppable-target",
+    "widgetDelete": ".t--widget-delete-control"
 }
\ No newline at end of file
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 3e25cc2136..038e14de78 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -27,35 +27,31 @@ Cypress.Commands.add("SearchApp", appname => {
   // Wait added because after opening the application editor, sometimes it takes a little time.
 });
 
-Cypress.Commands.add("NavigateToCommonWidgets", () => {
+Cypress.Commands.add("NavigateToPage", pageSelector => {
   cy.get(pages.pagesIcon).click({ force: true });
-  cy.get(pages.commonWidgets)
+  cy.get(pages.allWidgets)
     .find(">div")
     .click({ force: true });
   cy.get("#loading").should("not.exist");
-  cy.get(pages.widgetsEditor).click();
+  cy.get(pageSelector).click();
   cy.wait("@getPage");
   cy.get("#loading").should("not.exist");
 });
 
+Cypress.Commands.add("NavigateToAllWidgets", () => {
+  cy.NavigateToPage(pages.allWidgets);
+});
+
+Cypress.Commands.add("NavigateToCommonWidgets", () => {
+  cy.NavigateToPage(pages.commonWidgets);
+});
+
 Cypress.Commands.add("NavigateToFormWidgets", () => {
-  cy.get(pages.pagesIcon).click({ force: true });
-  cy.get(pages.formWidgets)
-    .find(">div")
-    .click({ force: true });
-  cy.get("#loading").should("not.exist");
-  cy.get(pages.widgetsEditor).click();
-  cy.get("#loading").should("not.exist");
+  cy.NavigateToPage(pages.formWidgets);
 });
 
 Cypress.Commands.add("NavigateToViewWidgets", () => {
-  cy.get(pages.pagesIcon).click({ force: true });
-  cy.get(pages.viewWidgets)
-    .find(">div")
-    .click({ force: true });
-  cy.get("#loading").should("not.exist");
-  cy.get(pages.widgetsEditor).click();
-  cy.get("#loading").should("not.exist");
+  cy.NavigateToPage(pages.viewWidgets);
 });
 
 // Cypress.Commands.add("CreateModal", () => {
diff --git a/app/client/package.json b/app/client/package.json
index 1e284b1ccb..1cf6fb941e 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -71,7 +71,6 @@
     "react-beautiful-dnd": "^12.2.0",
     "react-dnd": "^9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
-    "react-dnd-touch-backend": "^9.4.0",
     "react-dom": "^16.7.0",
     "react-google-maps": "^9.4.5",
     "react-helmet": "^5.2.1",
diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx
index b932ed4e72..525feb621f 100644
--- a/app/client/src/components/editorComponents/DropTargetComponent.tsx
+++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx
@@ -249,6 +249,7 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
     >
       <StyledDropTarget
         onClick={handleFocus}
+        className={"t--droppable-target"}
         ref={drop}
         style={{
           height,
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index 37d3eba70a..2368b67056 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -13,7 +13,8 @@ import { AppState } from "reducers";
 import EditorHeader from "./EditorHeader";
 import MainContainer from "./MainContainer";
 import { DndProvider } from "react-dnd";
-import TouchBackend from "react-dnd-touch-backend";
+import HTMLBackend from "react-dnd-html5-backend";
+
 import {
   getCurrentApplicationId,
   getCurrentLayoutId,
@@ -126,10 +127,10 @@ class Editor extends Component<EditorProps> {
     if (!this.props.isEditorInitialized || !this.state.registered) return null;
     return (
       <DndProvider
-        backend={TouchBackend}
-        options={{
-          enableMouseEvents: true,
-        }}
+        backend={HTMLBackend}
+        // options={{
+        //   enableMouseEvents: true,
+        // }}
       >
         <div>
           <Helmet>
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 0ee3b2fda6..c515674e0a 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -11403,14 +11403,6 @@ react-dnd-html5-backend@^9.3.4:
   dependencies:
     dnd-core "^9.5.1"
 
-react-dnd-touch-backend@^9.4.0:
-  version "9.5.1"
-  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-9.5.1.tgz#cc0a35f61acc920d91aad267a415db5f702129a3"
-  dependencies:
-    "@types/invariant" "^2.2.30"
-    dnd-core "^9.5.1"
-    invariant "^2.2.4"
-
 react-dnd@^9.3.4:
   version "9.5.1"
   resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.5.1.tgz#907e55c791d6c50cbed1a4021c14b989b86ac467"

From 08e68a8986205f92e183ec247450f58c42d1c960 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Tue, 21 Apr 2020 14:19:12 +0000
Subject: [PATCH 30/31] Revert "Merge branch 'fix/cypres-dnd' into 'release'"

This reverts merge request !505
---
 .../CommonWidgets/Button_spec.js              | 28 ++---------------
 app/client/cypress/locators/Pages.json        |  2 +-
 app/client/cypress/locators/WidgetCard.json   | 18 -----------
 .../cypress/locators/commonlocators.json      |  6 ++--
 app/client/cypress/support/commands.js        | 30 +++++++++++--------
 app/client/package.json                       |  1 +
 .../editorComponents/DropTargetComponent.tsx  |  1 -
 app/client/src/pages/Editor/index.tsx         | 11 ++++---
 app/client/yarn.lock                          |  8 +++++
 9 files changed, 37 insertions(+), 68 deletions(-)
 delete mode 100644 app/client/cypress/locators/WidgetCard.json

diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
index e58ce9c0fe..dc50f7b2be 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Button_spec.js
@@ -1,35 +1,11 @@
 const widgetsPage = require("../../../locators/Widgets.json");
 const commonlocators = require("../../../locators/commonlocators.json");
-const WidgetCardLocators = require("../../../locators/WidgetCard.json");
 
 describe("Button Widget Functionality", function() {
-  before(() => {
-    cy.NavigateToAllWidgets();
+  it("Button Widget Functionality", function() {
+    cy.NavigateToCommonWidgets();
     cy.get(".t--nav-link-widgets-editor").click();
-
-    cy.get(WidgetCardLocators.buttonwidget)
-      .first()
-      .trigger("dragstart");
-
-    cy.get(commonlocators.dropTarget)
-      //NOTE: This is to select containers. Container 0 is not selectable.
-      .eq(1)
-      .trigger("drop", 200, 100);
-    cy.get(commonlocators.dropTarget)
-      .eq(1)
-      .trigger("dragend", { force: true })
-      .trigger("mouseup", { force: true });
-  });
-
-  after(() => {
     cy.get(widgetsPage.buttonWidget).click({ force: true });
-    cy.get(commonlocators.widgetDelete).click({ force: true });
-  });
-
-  it("Test button spec", function() {
-    cy.get(widgetsPage.buttonWidget)
-      .trigger("mouseover", { force: true })
-      .click({ force: true });
 
     //Changing the text on the Button
     cy.testCodeMirror("Test Button Text");
diff --git a/app/client/cypress/locators/Pages.json b/app/client/cypress/locators/Pages.json
index f4882b3ced..929c16603d 100644
--- a/app/client/cypress/locators/Pages.json
+++ b/app/client/cypress/locators/Pages.json
@@ -1,8 +1,8 @@
 {
     "pagesIcon": ".t--nav-link-manage-pages",
     "commonWidgets": ".t--page-sidebar-CommonWidgets",
-    "allWidgets": ".t--page-sidebar-AllWidgets",
     "formWidgets": ".t--page-sidebar-FormWidgets",
     "viewWidgets":".t--page-sidebar-ViewWidgets",
     "widgetsEditor": ".t--nav-link-widgets-editor"
+
 }
\ No newline at end of file
diff --git a/app/client/cypress/locators/WidgetCard.json b/app/client/cypress/locators/WidgetCard.json
deleted file mode 100644
index f8c1bbfa19..0000000000
--- a/app/client/cypress/locators/WidgetCard.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "containerwidget": ".t--widget-card-draggable-containerwidget",
-    "buttonwidget": ".t--widget-card-draggable-buttonwidget",
-    "tablewidget": ".t--widget-card-draggable-tablewidget",
-    "inputwidget": ".t--widget-card-draggable-inputwidget",
-    "textwidget": ".t--widget-card-draggable-textwidget",
-    "formwidget": ".t--widget-card-draggable-formwidget",
-    "dropdownwidget": ".t--widget-card-draggable-dropdownwidget",
-    "checkboxwidget": ".t--widget-card-draggable-checkboxwidget",
-    "radiogroupwidget": ".t--widget-card-draggable-radiogroupwidget",
-    "datepickerwidget": ".t--widget-card-draggable-datepickerwidget",
-    "filepickerwidget": ".t--widget-card-draggable-filepickerwidget",
-    "richtexteditorwidget": ".t--widget-card-draggable-richtexteditorwidget",
-    "imagewidget": ".t--widget-card-draggable-imagewidget",
-    "chartwidget": ".t--widget-card-draggable-chartwidget",
-    "mapwidget": ".t--widget-card-draggable-mapwidget",
-    "tabswidget": ".t--widget-card-draggable-tabswidget"
-}
\ No newline at end of file
diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
index 834c7dbfdf..204cd880d2 100644
--- a/app/client/cypress/locators/commonlocators.json
+++ b/app/client/cypress/locators/commonlocators.json
@@ -2,7 +2,7 @@
     "editIcon":".t--widget-propertypane-toggle",
     "editPropCrossButton":".t--property-pane-close-btn",
     "deleteWidgetIcon":".t--widget-delete-control",
-    "dropdownSelectButton":".t--open-dropdown-Select-Action",
-    "dropTarget": ".t--droppable-target",
-    "widgetDelete": ".t--widget-delete-control"
+    "dropdownSelectButton":".t--open-dropdown-Select-Action"
+   
+
 }
\ No newline at end of file
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 038e14de78..3e25cc2136 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -27,31 +27,35 @@ Cypress.Commands.add("SearchApp", appname => {
   // Wait added because after opening the application editor, sometimes it takes a little time.
 });
 
-Cypress.Commands.add("NavigateToPage", pageSelector => {
+Cypress.Commands.add("NavigateToCommonWidgets", () => {
   cy.get(pages.pagesIcon).click({ force: true });
-  cy.get(pages.allWidgets)
+  cy.get(pages.commonWidgets)
     .find(">div")
     .click({ force: true });
   cy.get("#loading").should("not.exist");
-  cy.get(pageSelector).click();
+  cy.get(pages.widgetsEditor).click();
   cy.wait("@getPage");
   cy.get("#loading").should("not.exist");
 });
 
-Cypress.Commands.add("NavigateToAllWidgets", () => {
-  cy.NavigateToPage(pages.allWidgets);
-});
-
-Cypress.Commands.add("NavigateToCommonWidgets", () => {
-  cy.NavigateToPage(pages.commonWidgets);
-});
-
 Cypress.Commands.add("NavigateToFormWidgets", () => {
-  cy.NavigateToPage(pages.formWidgets);
+  cy.get(pages.pagesIcon).click({ force: true });
+  cy.get(pages.formWidgets)
+    .find(">div")
+    .click({ force: true });
+  cy.get("#loading").should("not.exist");
+  cy.get(pages.widgetsEditor).click();
+  cy.get("#loading").should("not.exist");
 });
 
 Cypress.Commands.add("NavigateToViewWidgets", () => {
-  cy.NavigateToPage(pages.viewWidgets);
+  cy.get(pages.pagesIcon).click({ force: true });
+  cy.get(pages.viewWidgets)
+    .find(">div")
+    .click({ force: true });
+  cy.get("#loading").should("not.exist");
+  cy.get(pages.widgetsEditor).click();
+  cy.get("#loading").should("not.exist");
 });
 
 // Cypress.Commands.add("CreateModal", () => {
diff --git a/app/client/package.json b/app/client/package.json
index 1cf6fb941e..1e284b1ccb 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -71,6 +71,7 @@
     "react-beautiful-dnd": "^12.2.0",
     "react-dnd": "^9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
+    "react-dnd-touch-backend": "^9.4.0",
     "react-dom": "^16.7.0",
     "react-google-maps": "^9.4.5",
     "react-helmet": "^5.2.1",
diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx
index 525feb621f..b932ed4e72 100644
--- a/app/client/src/components/editorComponents/DropTargetComponent.tsx
+++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx
@@ -249,7 +249,6 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
     >
       <StyledDropTarget
         onClick={handleFocus}
-        className={"t--droppable-target"}
         ref={drop}
         style={{
           height,
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index 2368b67056..37d3eba70a 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -13,8 +13,7 @@ import { AppState } from "reducers";
 import EditorHeader from "./EditorHeader";
 import MainContainer from "./MainContainer";
 import { DndProvider } from "react-dnd";
-import HTMLBackend from "react-dnd-html5-backend";
-
+import TouchBackend from "react-dnd-touch-backend";
 import {
   getCurrentApplicationId,
   getCurrentLayoutId,
@@ -127,10 +126,10 @@ class Editor extends Component<EditorProps> {
     if (!this.props.isEditorInitialized || !this.state.registered) return null;
     return (
       <DndProvider
-        backend={HTMLBackend}
-        // options={{
-        //   enableMouseEvents: true,
-        // }}
+        backend={TouchBackend}
+        options={{
+          enableMouseEvents: true,
+        }}
       >
         <div>
           <Helmet>
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index c515674e0a..0ee3b2fda6 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -11403,6 +11403,14 @@ react-dnd-html5-backend@^9.3.4:
   dependencies:
     dnd-core "^9.5.1"
 
+react-dnd-touch-backend@^9.4.0:
+  version "9.5.1"
+  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-9.5.1.tgz#cc0a35f61acc920d91aad267a415db5f702129a3"
+  dependencies:
+    "@types/invariant" "^2.2.30"
+    dnd-core "^9.5.1"
+    invariant "^2.2.4"
+
 react-dnd@^9.3.4:
   version "9.5.1"
   resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.5.1.tgz#907e55c791d6c50cbed1a4021c14b989b86ac467"

From 85f57e350f9d5af314deba1e4a2ef88406df7f1c Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Wed, 22 Apr 2020 09:15:24 +0000
Subject: [PATCH 31/31] Api pane creation fixes

---
 .../actioncreator/TreeDropdown.tsx            | 35 ++++++++++++-------
 .../propertyControls/StyledControls.tsx       |  6 ++++
 app/client/src/pages/Editor/ApiSidebar.tsx    |  2 ++
 app/client/src/pages/Editor/EditorSidebar.tsx | 24 ++++++++-----
 .../entityReducers/actionsReducer.tsx         | 11 ++++--
 app/client/src/sagas/ActionSagas.ts           |  2 +-
 app/client/src/widgets/DropdownWidget.tsx     |  2 ++
 7 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx b/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx
index 8306520bbb..91bdfd1d7d 100644
--- a/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx
+++ b/app/client/src/components/editorComponents/actioncreator/TreeDropdown.tsx
@@ -28,6 +28,7 @@ type TreeDropdownProps = {
   defaultText: string;
   onSelect: (value: TreeDropdownOption, defaultVal?: string) => void;
   selectedLabelModifier?: (option: TreeDropdownOption) => string;
+  toggle?: React.ReactNode;
 };
 
 function getSelectedOption(
@@ -64,6 +65,7 @@ export default function TreeDropdown(props: TreeDropdownProps) {
     onSelect,
     getDefaults,
     selectedLabelModifier,
+    toggle,
   } = props;
   const selectedOption = getSelectedOption(
     selectedValue,
@@ -90,6 +92,7 @@ export default function TreeDropdown(props: TreeDropdownProps) {
         icon={option.id === "create" ? "plus" : undefined}
         onClick={option.children ? _.noop : () => handleSelect(option)}
         text={option.label}
+        intent={option.intent}
         popoverProps={{
           minimal: true,
           interactionKind: PopoverInteractionKind.CLICK,
@@ -103,19 +106,27 @@ export default function TreeDropdown(props: TreeDropdownProps) {
 
   const list = optionTree.map(renderTreeOption);
   const menuItems = <Menu>{list}</Menu>;
-  return (
+  const defaultToggle = (
     <StyledDropDownContainer>
-      <StyledPopover usePortal={true} minimal={true} content={menuItems}>
-        <BlueprintButton
-          rightIcon={IconNames.CHEVRON_DOWN}
-          text={
-            selectedLabelModifier
-              ? selectedLabelModifier(selectedOption)
-              : selectedOption.label
-          }
-          className={`t--open-dropdown-${defaultText.split(" ").join("-")}`}
-        />
-      </StyledPopover>
+      <BlueprintButton
+        rightIcon={IconNames.CHEVRON_DOWN}
+        text={
+          selectedLabelModifier
+            ? selectedLabelModifier(selectedOption)
+            : selectedOption.label
+        }
+        className={`t--open-dropdown-${defaultText.split(" ").join("-")}`}
+      />
     </StyledDropDownContainer>
   );
+  return (
+    <StyledPopover
+      usePortal={true}
+      minimal={true}
+      content={menuItems}
+      position={PopoverPosition.AUTO_END}
+    >
+      {toggle ? toggle : defaultToggle}
+    </StyledPopover>
+  );
 }
diff --git a/app/client/src/components/propertyControls/StyledControls.tsx b/app/client/src/components/propertyControls/StyledControls.tsx
index 92c30505dc..4ea7e5b22c 100644
--- a/app/client/src/components/propertyControls/StyledControls.tsx
+++ b/app/client/src/components/propertyControls/StyledControls.tsx
@@ -154,6 +154,9 @@ export const StyledDropDown = styled(DropDown)`
 `;
 
 export const StyledPopover = styled(Popover)`
+  .${Classes.POPOVER_TARGET} {
+    display: flex;
+  }
   div {
     flex: 1 1 auto;
   }
@@ -188,6 +191,9 @@ export const StyledMenuItem = styled(MenuItem)`
     border-radius: ${props => props.theme.radii[1]}px;
     &:hover {
       background: ${Colors.POLAR};
+      &&&.bp3-menu-item.bp3-intent-danger:hover {
+        background: ${props => props.theme.colors.error};
+      }
     }
     &.${Classes.ACTIVE} {
       background: ${Colors.POLAR};
diff --git a/app/client/src/pages/Editor/ApiSidebar.tsx b/app/client/src/pages/Editor/ApiSidebar.tsx
index c8c689fe23..e89f04229d 100644
--- a/app/client/src/pages/Editor/ApiSidebar.tsx
+++ b/app/client/src/pages/Editor/ApiSidebar.tsx
@@ -37,6 +37,8 @@ const HTTPMethod = styled.span<{ method?: string }>`
         return "#F7C75B";
       case "PUT":
         return "#30A5E0";
+      case "PATCH":
+        return "#8E8E8E";
       case "DELETE":
         return "#CE4257";
       default:
diff --git a/app/client/src/pages/Editor/EditorSidebar.tsx b/app/client/src/pages/Editor/EditorSidebar.tsx
index bc871d490d..1bf41b395e 100644
--- a/app/client/src/pages/Editor/EditorSidebar.tsx
+++ b/app/client/src/pages/Editor/EditorSidebar.tsx
@@ -17,9 +17,10 @@ import {
   DropResult,
 } from "react-beautiful-dnd";
 import { PageListPayload } from "constants/ReduxActionConstants";
-import ContextDropdown from "components/editorComponents/ContextDropdown";
+import TreeDropdown from "components/editorComponents/actioncreator/TreeDropdown";
 import { theme } from "constants/DefaultTheme";
 import { Colors } from "constants/Colors";
+import { ControlIcons } from "icons/ControlIcons";
 
 const LoadingContainer = styled(CenteredWrapper)`
   height: 50%;
@@ -411,8 +412,13 @@ class EditorSidebar extends React.Component<Props, State> {
                                                 draftIds.indexOf(item.id) === -1
                                               }
                                             />
-                                            <ContextDropdown
-                                              options={[
+                                            <TreeDropdown
+                                              defaultText=""
+                                              onSelect={() => {
+                                                return null;
+                                              }}
+                                              selectedValue=""
+                                              optionTree={[
                                                 {
                                                   value: "copy",
                                                   onSelect: () => null,
@@ -461,12 +467,12 @@ class EditorSidebar extends React.Component<Props, State> {
                                                   intent: "danger",
                                                 },
                                               ]}
-                                              toggle={{
-                                                type: "icon",
-                                                icon: "MORE_HORIZONTAL_CONTROL",
-                                                iconSize: theme.fontSizes[4],
-                                              }}
-                                              className="more"
+                                              toggle={
+                                                <ControlIcons.MORE_HORIZONTAL_CONTROL
+                                                  width={theme.fontSizes[4]}
+                                                  height={theme.fontSizes[4]}
+                                                />
+                                              }
                                             />
                                           </React.Fragment>
                                         )}
diff --git a/app/client/src/reducers/entityReducers/actionsReducer.tsx b/app/client/src/reducers/entityReducers/actionsReducer.tsx
index 4132a7a159..436dfd014e 100644
--- a/app/client/src/reducers/entityReducers/actionsReducer.tsx
+++ b/app/client/src/reducers/entityReducers/actionsReducer.tsx
@@ -49,7 +49,12 @@ const actionsReducer = createReducer(initialState, {
     state: ActionDataState,
     action: ReduxAction<RestAction>,
   ): ActionDataState =>
-    state.concat([{ config: action.payload, isLoading: false }]),
+    state.concat([
+      {
+        config: { ...action.payload, id: action.payload.name },
+        isLoading: false,
+      },
+    ]),
   [ReduxActionTypes.CREATE_ACTION_SUCCESS]: (
     state: ActionDataState,
     action: ReduxAction<RestAction>,
@@ -57,7 +62,7 @@ const actionsReducer = createReducer(initialState, {
     state.map(a => {
       if (
         a.config.pageId === action.payload.pageId &&
-        a.config.name === action.payload.name
+        a.config.id === action.payload.name
       ) {
         return { ...a, config: action.payload };
       }
@@ -70,7 +75,7 @@ const actionsReducer = createReducer(initialState, {
     state.filter(
       a =>
         a.config.name !== action.payload.name &&
-        a.config.pageId !== action.payload.pageId,
+        a.config.id !== action.payload.name,
     ),
   [ReduxActionTypes.UPDATE_ACTION_SUCCESS]: (
     state: ActionDataState,
diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts
index d380b28cb7..dd6a738b73 100644
--- a/app/client/src/sagas/ActionSagas.ts
+++ b/app/client/src/sagas/ActionSagas.ts
@@ -701,7 +701,7 @@ export function* watchActionSagas() {
     takeEvery(ReduxActionTypes.FETCH_ACTIONS_INIT, fetchActionsSaga),
     takeEvery(ReduxActionTypes.EXECUTE_ACTION, executeAppAction),
     takeLatest(ReduxActionTypes.RUN_API_REQUEST, runApiActionSaga),
-    takeLatest(ReduxActionTypes.CREATE_ACTION_INIT, createActionSaga),
+    takeEvery(ReduxActionTypes.CREATE_ACTION_INIT, createActionSaga),
     takeLatest(ReduxActionTypes.UPDATE_ACTION_INIT, updateActionSaga),
     takeLatest(ReduxActionTypes.DELETE_ACTION_INIT, deleteActionSaga),
     takeLatest(
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index d2c127bbcf..60926de192 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -12,6 +12,7 @@ import { VALIDATION_TYPES } from "constants/WidgetValidation";
 import { TriggerPropertiesMap } from "utils/WidgetFactory";
 import { VALIDATORS } from "utils/Validators";
 import { DataTree } from "entities/DataTree/dataTreeFactory";
+import { Intent as BlueprintIntent } from "@blueprintjs/core";
 
 class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
   static getPropertyValidationMap(): WidgetPropertyValidationType {
@@ -181,6 +182,7 @@ export interface DropdownOption {
   id?: string;
   onSelect?: (option: DropdownOption) => void;
   children?: DropdownOption[];
+  intent?: BlueprintIntent;
 }
 
 export interface DropdownWidgetProps extends WidgetProps {