From b447aa83453bec71883b4cf06be222e5da70fa7f Mon Sep 17 00:00:00 2001
From: Aswath K <aswath.sana@gmail.com>
Date: Tue, 30 Mar 2021 22:10:23 +0530
Subject: [PATCH 01/76] Allow removing filter on Dropdown Widget

---
 .../designSystems/blueprint/DropdownComponent.tsx    |  3 ++-
 app/client/src/widgets/DropdownWidget.tsx            | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 5c1b1de9b0..cd4613ab79 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -259,7 +259,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
             <StyledSingleDropDown
               className={this.props.isLoading ? Classes.SKELETON : ""}
               items={this.props.options}
-              filterable={true}
+              filterable={this.props.isFilterable}
               itemRenderer={this.renderSingleSelectItem}
               onItemSelect={this.onItemSelect}
               disabled={this.props.disabled}
@@ -414,6 +414,7 @@ export interface DropDownComponentProps extends ComponentProps {
   selectedIndexArr: number[];
   options: DropdownOption[];
   isLoading: boolean;
+  isFilterable: boolean;
   width: number;
   height: number;
 }
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index d4adbd943b..ab2fd3abb7 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -58,6 +58,15 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
             isBindProperty: true,
             isTriggerProperty: false,
           },
+          {
+            propertyName: "isFilterable",
+            label: "Filterable",
+            helpText: "Makes the dropdown list filterable",
+            controlType: "SWITCH",
+            isJSConvertible: true,
+            isBindProperty: true,
+            isTriggerProperty: false,
+          },
           {
             propertyName: "isRequired",
             label: "Required",
@@ -111,6 +120,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       options: VALIDATION_TYPES.OPTIONS_DATA,
       selectionType: VALIDATION_TYPES.TEXT,
       isRequired: VALIDATION_TYPES.BOOLEAN,
+      isFilterable: VALIDATION_TYPES.BOOLEAN,
       // onOptionChange: VALIDATION_TYPES.ACTION_SELECTOR,
       selectedOptionValues: VALIDATION_TYPES.ARRAY,
       selectedOptionLabels: VALIDATION_TYPES.ARRAY,
@@ -180,6 +190,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
         selectedIndexArr={computedSelectedIndexArr}
         label={`${this.props.label}`}
         isLoading={this.props.isLoading}
+        isFilterable={this.props.isFilterable}
         disabled={this.props.isDisabled}
       />
     );
@@ -277,6 +288,7 @@ export interface DropdownWidgetProps extends WidgetProps, WithMeta {
   onOptionChange?: string;
   defaultOptionValue?: string | string[];
   isRequired: boolean;
+  isFilterable: boolean;
   selectedOptionValue: string;
   selectedOptionValueArr: string[];
   selectedOptionLabels: string[];

From a6afa8ce4dc728dbf7cd01270b42834a109954a4 Mon Sep 17 00:00:00 2001
From: Aswath K <aswath.sana@gmail.com>
Date: Wed, 31 Mar 2021 08:42:27 +0530
Subject: [PATCH 02/76] Makes isFilterable true by default for DropdownWidget

---
 app/client/src/mockResponses/WidgetConfigResponse.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index c2fb30230a..78fa5c42ab 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -173,6 +173,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       ],
       widgetName: "Dropdown",
       defaultOptionValue: "VEG",
+      isFilterable: true,
       version: 1,
     },
     CHECKBOX_WIDGET: {

From 42573533cb29b1015c859aaf1006a71115c85dc1 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumit@appsmith.com>
Date: Tue, 13 Apr 2021 19:58:40 +0530
Subject: [PATCH 03/76] fix NPE by adding null check conditional (#3989)

Fix NPE seen on Sentry by adding null check for result body
---
 .../server/services/NewActionServiceImpl.java |  5 ++++
 .../server/services/ActionServiceTest.java    | 29 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
index 41f8ee44e0..bac9d46174 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
@@ -710,6 +710,11 @@ public class NewActionServiceImpl extends BaseService<NewActionRepository, NewAc
             return result;
         }
 
+        if (result.getBody() == null) {
+            result.setDataTypes(new ArrayList<>());
+            return result;
+        }
+
         List<ParsedDataType> parsedDataTypeList = new ArrayList<>();
         Stream.of(ActionResultDataType.values())
                 .parallel()
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ActionServiceTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ActionServiceTest.java
index d78db8e1e5..c2ba4f1379 100644
--- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ActionServiceTest.java
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/ActionServiceTest.java
@@ -1307,4 +1307,33 @@ public class ActionServiceTest {
         executeAndAssertAction(executeActionDTO, actionConfiguration, mockResult,
                 List.of(new ParsedDataType(ActionResultDataType.RAW)));
     }
+
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void testActionExecuteReturnTypeWithNullResultBody() {
+        Mockito.when(pluginExecutorHelper.getPluginExecutor(Mockito.any())).thenReturn(Mono.just(pluginExecutor));
+
+        ActionExecutionResult mockResult = new ActionExecutionResult();
+        mockResult.setIsExecutionSuccess(true);
+        mockResult.setBody(null);
+        mockResult.setStatusCode("200");
+        mockResult.setHeaders(objectMapper.valueToTree(Map.of("response-header-key", "response-header-value")));
+
+        ActionDTO action = new ActionDTO();
+        ActionConfiguration actionConfiguration = new ActionConfiguration();
+        actionConfiguration.setHttpMethod(HttpMethod.POST);
+        actionConfiguration.setBody("random-request-body");
+        actionConfiguration.setHeaders(List.of(new Property("random-header-key", "random-header-value")));
+        action.setActionConfiguration(actionConfiguration);
+        action.setPageId(testPage.getId());
+        action.setName("testActionExecute");
+        action.setDatasource(datasource);
+        ActionDTO createdAction = newActionService.createAction(action).block();
+
+        ExecuteActionDTO executeActionDTO = new ExecuteActionDTO();
+        executeActionDTO.setActionId(createdAction.getId());
+        executeActionDTO.setViewMode(false);
+
+        executeAndAssertAction(executeActionDTO, actionConfiguration, mockResult, new ArrayList<>());
+    }
 }

From e0130336eb156eaab513d3a7bf0bffbc067ec074 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Mon, 26 Apr 2021 12:40:24 +0530
Subject: [PATCH 04/76] added lib for excel export

---
 app/client/package.json |  3 +-
 app/client/yarn.lock    | 82 +++--------------------------------------
 2 files changed, 8 insertions(+), 77 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index 79bd92c5e4..02fb149675 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -56,6 +56,7 @@
     "deep-diff": "^1.0.2",
     "downloadjs": "^1.4.7",
     "eslint": "^7.11.0",
+    "export-from-json": "^1.3.5",
     "fast-deep-equal": "^3.1.1",
     "fast-xml-parser": "^3.17.5",
     "flow-bin": "^0.91.0",
@@ -73,6 +74,7 @@
     "lint-staged": "^9.2.5",
     "localforage": "^1.7.3",
     "lodash": "^4.17.19",
+    "lodash-es": "4.17.14",
     "lodash-move": "^1.1.1",
     "loglevel": "^1.6.7",
     "lottie-web": "^5.7.4",
@@ -118,7 +120,6 @@
     "redux-form": "^8.2.6",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
-    "lodash-es": "4.17.14",
     "scroll-into-view-if-needed": "^2.2.26",
     "shallowequal": "^1.1.0",
     "showdown": "^1.9.1",
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 4a3012d16b..0eb016e21d 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -1627,7 +1627,6 @@
 "@babel/runtime@^7.12.5":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
-  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -2308,7 +2307,6 @@
 "@jest/types@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
-  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^3.0.0"
@@ -2370,7 +2368,6 @@
 "@mswjs/cookies@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@mswjs/cookies/-/cookies-0.1.4.tgz#85ef872997eea2acd888f21af0b2067224dac244"
-  integrity sha512-gdtmSv21D4wHTnqF4rrZVX6ye7mQ4nRCTIHYnHBr4SkgoXaiqe3sMvUzXm43+H4PnL0EAKvUTxRVSSXz2xebeg==
   dependencies:
     "@types/set-cookie-parser" "^2.4.0"
     set-cookie-parser "^2.4.6"
@@ -2378,7 +2375,6 @@
 "@mswjs/interceptors@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@mswjs/interceptors/-/interceptors-0.8.1.tgz#8ef43a8b7b25c7b9a2bac67b3702167e25e5fc07"
-  integrity sha512-OI9FYmtURESZG3QDNz4Yt3osy3HY4T3FjlRw+AG4QS1UDdTSZ0tuPFAkp23nGR9ojmbSSj4gSMjf5+R8Oi/qtQ==
   dependencies:
     "@open-draft/until" "^1.0.3"
     debug "^4.3.0"
@@ -2416,7 +2412,6 @@
 "@open-draft/until@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
-  integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
 "@optimizely/js-sdk-datafile-manager@^0.8.0":
   version "0.8.0"
@@ -2558,7 +2553,6 @@
 "@sentry/browser@6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.2.4.tgz#b74757b1f76e7a525e6eaca39668db36db82cb21"
-  integrity sha512-OV1CQUxNawncpSEcrA+YccOu72rLC0tyYq/Pc4D/ihpfJmvR0o0L8vZYESay55V5lcqnJPFp8IyCJ2bF8IZTsA==
   dependencies:
     "@sentry/core" "6.2.4"
     "@sentry/types" "6.2.4"
@@ -2578,7 +2572,6 @@
 "@sentry/core@6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.2.4.tgz#613102074208958c580df4e7e06e9aa6b4d5f40c"
-  integrity sha512-8Z98OTM4wFS2n3T+V8a6cYWHDAk1byWuMb8JquZLdYgR5O1jkSpSFrhksQ+B/wDbVw05VOolSNFJsDTC2D5qXg==
   dependencies:
     "@sentry/hub" "6.2.4"
     "@sentry/minimal" "6.2.4"
@@ -2589,7 +2582,6 @@
 "@sentry/hub@6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.2.4.tgz#0e25b851dc04b806713c8d878b1e11696ccf47ea"
-  integrity sha512-dY8Vj3c4oIirNNNzWkJvoRMzjlU8Nw3PJ/IwhdWjiQhj5/oqOzJwJQSMeOKdOGIhArAifr0hSXdy1+tHGEOOdQ==
   dependencies:
     "@sentry/types" "6.2.4"
     "@sentry/utils" "6.2.4"
@@ -2598,7 +2590,6 @@
 "@sentry/minimal@6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.2.4.tgz#7d8d490b0942e14cde544c0a77550693e4702d97"
-  integrity sha512-KN+Abbz5CCAceSMvwymSG8GIVPaz4Y/xuY7R7dA8IlzncHaWRQ/Ss0PXjYUWL4YoTlTK6id1AW0i3JMICHMVgw==
   dependencies:
     "@sentry/hub" "6.2.4"
     "@sentry/types" "6.2.4"
@@ -2607,7 +2598,6 @@
 "@sentry/react@^6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/react/-/react-6.2.4.tgz#7d5a67a6e5f01238bf88e91433841da5180916f0"
-  integrity sha512-0TqM51HwnAUoDSYyK38Bq/m6xLqWHsOL98Uu4HoMMmx6VXW1xf1UDxhjmIQFfjWfYT5tlld0CoDRfTJJlc82Ow==
   dependencies:
     "@sentry/browser" "6.2.4"
     "@sentry/minimal" "6.2.4"
@@ -2619,7 +2609,6 @@
 "@sentry/tracing@^6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.2.4.tgz#4af650c180a41b72e130c7b92838fa9d1040792e"
-  integrity sha512-FNPTd22Q487SVyGM4BXlVeeRwPr9CG0OV8bz+GRHQtpVDhL+zdkGlIJYbxZnrOcdyYNVgLCJUPDHqyv55nhU4A==
   dependencies:
     "@sentry/hub" "6.2.4"
     "@sentry/minimal" "6.2.4"
@@ -2630,12 +2619,10 @@
 "@sentry/types@6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.2.4.tgz#5974e64f000e6084d92d752e6ca199dc2ef4438f"
-  integrity sha512-c+vEExoj8H67NPaskTvxJBSAtDWzfFXOmlkicEZPUWbkL+Yxxlbzp1lI8K6GOks56UYMUBUU/fwQvv/34cO96g==
 
 "@sentry/utils@6.2.4":
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.2.4.tgz#ab6a0bdfa2a32428f6b1ee87082d9bd40a226b11"
-  integrity sha512-lavbb3yQMUleVffmDkPH7X3dlgbXlyiFNmfER+swJ6WRxa4Yq6I8yea2s6maoqnZMhZe+yztn455DPwXIItfCA==
   dependencies:
     "@sentry/types" "6.2.4"
     tslib "^1.9.3"
@@ -3400,7 +3387,6 @@
 "@testing-library/dom@^7.28.1":
   version "7.30.1"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.1.tgz#07b6f3ccd7f1f1e34ab0406932073e2971817f3d"
-  integrity sha512-RQUvqqq2lxTCOffhSNxpX/9fCoR+nwuQPmG5uhuuEH5KBAzNf2bK3OzBoWjm5zKM78SLjnGRAKt8hRjQA4E46A==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -3427,7 +3413,6 @@
 "@testing-library/react@^11.2.5":
   version "11.2.5"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.5.tgz#ae1c36a66c7790ddb6662c416c27863d87818eb9"
-  integrity sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
@@ -3435,7 +3420,6 @@
 "@testing-library/user-event@^13.1.1":
   version "13.1.1"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.1.1.tgz#1e011de944cf4d2a917cef6c3046c26389943e24"
-  integrity sha512-B4roX+0mpXKGj8ndd38YoIo3IV9pmTTWxr/2cOke5apTtrNabEUE0KMBccpcAcYlfPcr7uMu+dxeeC3HdXd9qQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
 
@@ -3504,15 +3488,9 @@
   dependencies:
     "@types/tern" "*"
 
-"@types/component-emitter@^1.2.10":
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.10.tgz#ef5b1589b9f16544642e473db5ea5639107ef3ea"
-  integrity sha512-bsjleuRKWmGqajMerkzox19aGbscQX5rmmvvXl3wlIp5gMG1HgkiwPxsN5p070fBDKTNSPgojVbuY1+HWMbFhg==
-
 "@types/cookie@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.0.tgz#14f854c0f93d326e39da6e3b6f34f7d37513d108"
-  integrity sha512-y7mImlc/rNkvCRmg8gC3/lj87S7pTUIJ6QGjwHR9WQJcFs+ZMTOaoPrkdFA/YdbuqVEmEbb5RdhVxMkAcgOnpg==
 
 "@types/deep-diff@^1.0.0":
   version "1.0.0"
@@ -3582,7 +3560,6 @@
 "@types/inquirer@^7.3.1":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-7.3.1.tgz#1f231224e7df11ccfaf4cf9acbcc3b935fea292d"
-  integrity sha512-osD38QVIfcdgsPCT0V3lD7eH0OFurX71Jft18bZrsVQWVRt6TuxRzlr0GJLrxoHZR2V5ph7/qP8se/dcnI7o0g==
   dependencies:
     "@types/through" "*"
     rxjs "^6.4.0"
@@ -3634,7 +3611,6 @@
 "@types/js-levenshtein@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@types/js-levenshtein/-/js-levenshtein-1.1.0.tgz#9541eec4ad6e3ec5633270a3a2b55d981edc44a9"
-  integrity sha512-14t0v1ICYRtRVcHASzes0v/O+TIeASb8aD55cWF1PidtInhFWSXcmhzhHqGjUWf9SUq1w70cvd1cWKUULubAfQ==
 
 "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
   version "7.0.6"
@@ -3651,7 +3627,6 @@
 "@types/marked@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4"
-  integrity sha512-wLfw1hnuuDYrFz97IzJja0pdVsC0oedtS4QsKH1/inyW9qkLQbXgMUqEQT0MVtUBx3twjWeInUfjQbhBVLECXw==
 
 "@types/mdast@^3.0.0":
   version "3.0.3"
@@ -3832,7 +3807,6 @@
 "@types/react-window@^1.8.2":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
-  integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
   dependencies:
     "@types/react" "*"
 
@@ -3871,7 +3845,6 @@
 "@types/set-cookie-parser@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/set-cookie-parser/-/set-cookie-parser-2.4.0.tgz#10cc0446bad372827671a5195fbd14ebce4a9baf"
-  integrity sha512-w7BFUq81sy7H/0jN0K5cax8MwRN6NOSURpY4YuO4+mOgoicxCZ33BUYz+gyF/sUf7uDl2We2yGJfppxzEXoAXQ==
   dependencies:
     "@types/node" "*"
 
@@ -3939,7 +3912,6 @@
 "@types/through@*":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895"
-  integrity sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==
   dependencies:
     "@types/node" "*"
 
@@ -5414,7 +5386,6 @@ bluebird@^3.3.5, bluebird@^3.5.5, bluebird@^3.7.2:
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
-  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
 bn.js@^5.1.1:
   version "5.1.3"
@@ -5947,7 +5918,6 @@ chokidar@^3.4.1:
 chokidar@^3.4.2:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
-  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
   dependencies:
     anymatch "~3.1.1"
     braces "~3.0.2"
@@ -6100,7 +6070,6 @@ cliui@^6.0.0:
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
   dependencies:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
@@ -6151,7 +6120,6 @@ code-point-at@^1.0.0:
 codemirror@^5.59.2:
   version "5.59.2"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
-  integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA==
 
 collapse-white-space@^1.0.2:
   version "1.0.6"
@@ -6275,7 +6243,6 @@ compression@^1.7.4:
 compute-scroll-into-view@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz#5b7bf4f7127ea2c19b750353d7ce6776a90ee088"
-  integrity sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ==
 
 concat-map@0.0.1:
   version "0.0.1"
@@ -6358,7 +6325,6 @@ cookie@0.4.0:
 cookie@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
-  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
 
 copy-concurrently@^1.0.0:
   version "1.0.5"
@@ -6407,7 +6373,6 @@ core-js@^3.0.1, core-js@^3.0.4, core-js@^3.6.5:
 core-js@^3.9.1:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
-  integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -6696,7 +6661,6 @@ cssesc@^3.0.0:
 cssfontparser@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
-  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
 
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
@@ -6920,10 +6884,9 @@ debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "2.1.2"
 
-debug@^4.3.0, debug@~4.3.1:
+debug@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
   dependencies:
     ms "2.1.2"
 
@@ -7186,7 +7149,6 @@ doctypes@^1.1.0:
 dom-accessibility-api@^0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
-  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
 
 dom-converter@^0.2:
   version "0.2.0"
@@ -7356,7 +7318,6 @@ element-resize-detector@^1.2.1:
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -7880,7 +7841,6 @@ events@^3.0.0:
 events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
-  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
 eventsource@^1.0.7:
   version "1.0.7"
@@ -7994,6 +7954,10 @@ expect@^26.6.0, expect@^26.6.1:
     jest-message-util "^26.6.1"
     jest-regex-util "^26.0.0"
 
+export-from-json@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/export-from-json/-/export-from-json-1.3.5.tgz#52e8dab6aacf2827c84fcc304940a1ea5347124b"
+
 express@^4.17.0, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -8536,7 +8500,6 @@ fsevents@^2.1.2, fsevents@^2.1.3, fsevents@~2.1.1, fsevents@~2.1.2:
 fsevents@~2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 fstream@^1.0.0, fstream@^1.0.12:
   version "1.0.12"
@@ -8846,7 +8809,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
 graphql@^15.4.0:
   version "15.5.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.0.tgz#39d19494dbe69d1ea719915b578bf920344a69d5"
-  integrity sha512-OmaM7y0kaK31NKG31q4YbD2beNYa6jBBKtMFT6gLYJljHLJr42IqJ8KX08u3Li/0ifzTU5HjmoOOrwa5BRLeDA==
 
 growl@1.10.5:
   version "1.10.5"
@@ -9032,7 +8994,6 @@ he@1.2.0, he@^1.2.0:
 headers-utils@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/headers-utils/-/headers-utils-3.0.2.tgz#dfc65feae4b0e34357308aefbcafa99c895e59ef"
-  integrity sha512-xAxZkM1dRyGV2Ou5bzMxBPNLoRCjcX+ya7KSWybQD2KwLphxsapUVK6x/02o7f4VU6GPSXch9vNY2+gkU8tYWQ==
 
 hex-color-regex@^1.1.0:
   version "1.1.0"
@@ -10042,7 +10003,6 @@ jake@^10.6.1:
 jest-canvas-mock@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.1.tgz#9535d14bc18ccf1493be36ac37dd349928387826"
-  integrity sha512-5FnSZPrX3Q2ZfsbYNE3wqKR3+XorN8qFzDzB5o0golWgt6EOX1+emBnpOc9IAQ+NXFj8Nzm3h7ZdE/9H0ylBcg==
   dependencies:
     cssfontparser "^1.2.1"
     moo-color "^1.0.2"
@@ -10471,7 +10431,6 @@ jest-util@^24.9.0:
 jest-util@^26.1.0:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
   dependencies:
     "@jest/types" "^26.6.2"
     "@types/node" "*"
@@ -10563,7 +10522,6 @@ js-base64@^2.1.8:
 js-levenshtein@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
-  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
 js-sha256@^0.9.0:
   version "0.9.0"
@@ -11024,12 +10982,10 @@ locate-path@^5.0.0:
 lodash-es@4.17.14:
   version "4.17.14"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.14.tgz#12a95a963cc5955683cee3b74e85458954f37ecc"
-  integrity sha512-7zchRrGa8UZXjD/4ivUWP1867jDkhzTG2c/uj739utSd7O/pFFdxspCemIFKEEjErbcqRzn8nKnGsi7mvTgRPA==
 
 lodash-move@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/lodash-move/-/lodash-move-1.1.1.tgz#59f76e0f1ac57e6d8683f531bec07c5b6ea4e348"
-  integrity sha1-WfduDxrFfm2Gg/UxvsB8W26k40g=
   dependencies:
     lodash "^4.6.1"
 
@@ -11106,20 +11062,14 @@ 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.x:
+lodash@4.x, lodash@^4.6.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 "lodash@>=3.5 <5", lodash@^4, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.16.2, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
 
-lodash@^4.6.1:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 log-symbols@3.0.0, log-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
@@ -11285,7 +11235,6 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.11.4:
 marked@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5"
-  integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q==
 
 marker-clusterer-plus@^2.1.4:
   version "2.1.4"
@@ -11738,7 +11687,6 @@ moment-timezone@*, moment-timezone@^0.5.27, moment-timezone@^0.5.31:
 moo-color@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
-  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
   dependencies:
     color-name "^1.1.4"
 
@@ -11768,7 +11716,6 @@ ms@2.1.2, ms@^2.1.1:
 msw@^0.28.0:
   version "0.28.0"
   resolved "https://registry.yarnpkg.com/msw/-/msw-0.28.0.tgz#abed17416f59241a2100fe6c8740cc1c9a32339b"
-  integrity sha512-Hh+dPp613tethIFwNg90lvAzrW9T0U39D6AYzV8qIOAWskP49CErrqVWZnmPDQC87o69GzZ9Hl3RGz/65mms3A==
   dependencies:
     "@mswjs/cookies" "^0.1.4"
     "@mswjs/interceptors" "^0.8.0"
@@ -11965,7 +11912,6 @@ node-libs-browser@^2.2.1:
 node-match-path@^0.6.1:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/node-match-path/-/node-match-path-0.6.2.tgz#29a05ed7eda4d325f29d7abb088c12bbf1578e87"
-  integrity sha512-2VYsUKiovaCZDq1t/3kEqh09743H91WE6B3RzSdjsKh+S/a5z+LQoujMI1JI/RYXqNKFvoqMfye1H0g3Dg9u+g==
 
 node-modules-regexp@^1.0.0:
   version "1.0.0"
@@ -12567,7 +12513,6 @@ path-to-regexp@^1.7.0:
 path-to-regexp@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
-  integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
 
 path-type@^1.0.0:
   version "1.1.0"
@@ -13405,7 +13350,6 @@ pretty-format@^26.6.0, pretty-format@^26.6.1:
 pretty-format@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
-  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
   dependencies:
     "@jest/types" "^26.6.2"
     ansi-regex "^5.0.0"
@@ -13419,7 +13363,6 @@ pretty-hrtime@^1.0.3:
 prismjs@^1.23.0, prismjs@^1.8.4:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
-  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
   optionalDependencies:
     clipboard "^2.0.0"
 
@@ -14390,7 +14333,6 @@ react-window@^1.8.2:
 react-window@^1.8.6:
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
-  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
@@ -15179,7 +15121,6 @@ scriptjs@^2.5.8:
 scroll-into-view-if-needed@^2.2.26:
   version "2.2.26"
   resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz#e4917da0c820135ff65ad6f7e4b7d7af568c4f13"
-  integrity sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw==
   dependencies:
     compute-scroll-into-view "^1.0.16"
 
@@ -15223,7 +15164,6 @@ semver@7.3.2:
 semver@7.x:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -15309,7 +15249,6 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
 set-cookie-parser@^2.4.6:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.4.8.tgz#d0da0ed388bc8f24e706a391f9c9e252a13c58b2"
-  integrity sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg==
 
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
@@ -15720,7 +15659,6 @@ static-extend@^0.1.1:
 statuses@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
-  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
 stdout-stream@^1.4.0:
   version "1.4.1"
@@ -15773,12 +15711,10 @@ stream-shift@^1.0.0:
 strict-event-emitter@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.1.0.tgz#fd742c1fb7e3852f0b964ecdae2d7666a6fb7ef8"
-  integrity sha512-8hSYfU+WKLdNcHVXJ0VxRXiPESalzRe7w1l8dg9+/22Ry+iZQUoQuoJ27R30GMD1TiyYINWsIEGY05WrskhSKw==
 
 strict-event-emitter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.2.0.tgz#78e2f75dc6ea502e5d8a877661065a1e2deedecd"
-  integrity sha512-zv7K2egoKwkQkZGEaH8m+i2D0XiKzx5jNsiSul6ja2IYFvil10A59Z9Y7PPAAe5OW53dQUf9CfsHKzjZzKkm1w==
   dependencies:
     events "^3.3.0"
 
@@ -16456,7 +16392,6 @@ ts-dedent@^1.1.0:
 ts-jest@^26.5.4:
   version "26.5.4"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.4.tgz#207f4c114812a9c6d5746dd4d1cdf899eafc9686"
-  integrity sha512-I5Qsddo+VTm94SukBJ4cPimOoFZsYTeElR2xy6H2TOVs+NsvgYglW8KuQgKoApOKuaU/Ix/vrF9ebFZlb5D2Pg==
   dependencies:
     bs-logger "0.x"
     buffer-from "1.x"
@@ -17476,7 +17411,6 @@ wrap-ansi@^6.2.0:
 wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
     string-width "^4.1.0"
@@ -17546,12 +17480,10 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
 y18n@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
-  integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
 
 y18n@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
-  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
 
 yallist@^2.1.2:
   version "2.1.2"
@@ -17579,7 +17511,6 @@ yargs-parser@13.1.2, yargs-parser@^13.1.2:
 yargs-parser@20.x, yargs-parser@^20.2.2:
   version "20.2.7"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
 
 yargs-parser@^15.0.1:
   version "15.0.1"
@@ -17653,7 +17584,6 @@ yargs@^15.4.1:
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
   dependencies:
     cliui "^7.0.2"
     escalade "^3.1.1"

From 4dffd98ee3b85bb3be20a682d07d2fafc88b68b8 Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi@appsmith.com>
Date: Wed, 28 Apr 2021 15:07:55 +0530
Subject: [PATCH 05/76] Including services and their role (#4193)

* Including services and their role

* Explicitly mention Google tokens
---
 app/client/public/privacy-policy.html | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/client/public/privacy-policy.html b/app/client/public/privacy-policy.html
index e0938fe862..db20473ea4 100644
--- a/app/client/public/privacy-policy.html
+++ b/app/client/public/privacy-policy.html
@@ -72,7 +72,7 @@
                         <p>At appsmith, accessible from www.appsmith.com, one of our main priorities is the privacy of
                             our visitors.
                             This Privacy Policy document contains types of information that is collected and recorded by
-                            appsmith and
+                            appsmith and its "Services" and
                             how we use it.</p>
                         <p>If you have additional questions or require more information about our Privacy Policy, do not
                             hesitate to
@@ -99,13 +99,20 @@
                         <h2>How we use your information</h2>
                         <p>We use the information we collect in various ways, including to:</p>
                         <ul>
-                            <li>Provide, operate, and maintain our webste</li>
-                            <li>Improve, personalize, and expand our webste</li>
-                            <li>Understand and analyze how you use our webste</li>
+                            <li>Provide, operate, and maintain our website</li>
+                            <li>The information that you provide, or that we receive from third party integrations, 
+                                are used to retrieve and process your data as part of our services. 
+                                We do not store any of your data on our servers. We may however, 
+                                retain your identifiers to provide unhindered access to these services. These identifiers 
+                                could be your Google access tokens, for example.
+                                Wherever our services do this, our documentation will contain a reminder for such 
+                                access.</li>
+                            <li>Improve, personalize, and expand our website</li>
+                            <li>Understand and analyze how you use our website</li>
                             <li>Develop new products, services, features, and functionality</li>
                             <li>Communicate with you, either directly or through one of our partners, including for
                                 customer service,
-                                to provide you with updates and other information relating to the webste, and for
+                                to provide you with updates and other information relating to the website, and for
                                 marketing and
                                 promotional purposes</li>
                             <li>Send you emails</li>

From 4a441b5ca261c503af1f2d8e88e474a02a9b2ac6 Mon Sep 17 00:00:00 2001
From: Trisha Anand <trisha@appsmith.com>
Date: Wed, 28 Apr 2021 17:36:30 +0530
Subject: [PATCH 06/76] [Bug Fix] : In case the table being renamed has mongo
 escaped fields, rename the table name in set keeping a track of these widgets
 as well (#4195)

---
 .../services/LayoutActionServiceImpl.java     |  7 +++
 .../services/LayoutActionServiceTest.java     | 47 +++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
index cc130c0611..453602328b 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
@@ -223,6 +223,13 @@ public class LayoutActionServiceImpl implements LayoutActionService {
                             } catch (ParseException e) {
                                 log.debug("Exception caught during DSL conversion from string to Json object. ", e);
                             }
+                            // DSL has removed all the old names and replaced it with new name. If the change of name
+                            // was one of the mongoEscaped widgets, then update the names in the set as well
+                            Set<String> mongoEscapedWidgetNames = layout.getMongoEscapedWidgetNames();
+                            if (mongoEscapedWidgetNames.contains(oldName)) {
+                                mongoEscapedWidgetNames.remove(oldName);
+                                mongoEscapedWidgetNames.add(newName);
+                            }
                             page.setLayouts(layouts);
                             // Since the page has most probably changed, save the page and return.
                             return newPageService.saveUnpublishedPage(page);
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java
index 805d733a1f..0864b1c957 100644
--- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/LayoutActionServiceTest.java
@@ -17,6 +17,7 @@ import com.appsmith.server.dtos.LayoutActionUpdateDTO;
 import com.appsmith.server.dtos.LayoutDTO;
 import com.appsmith.server.dtos.PageDTO;
 import com.appsmith.server.dtos.RefactorActionNameDTO;
+import com.appsmith.server.dtos.RefactorNameDTO;
 import com.appsmith.server.exceptions.AppsmithError;
 import com.appsmith.server.exceptions.AppsmithException;
 import com.appsmith.server.helpers.MockPluginExecutor;
@@ -616,4 +617,50 @@ public class LayoutActionServiceTest {
                         throwable.getMessage().equals(AppsmithError.DUPLICATE_KEY_USER_ERROR.getMessage(name, FieldName.NAME)))
                 .verify();
     }
+
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void tableWidgetKeyEscapeRefactorName() {
+        Mockito.when(pluginExecutorHelper.getPluginExecutor(Mockito.any())).thenReturn(Mono.just(new MockPluginExecutor()));
+
+        JSONObject dsl = new JSONObject();
+        dsl.put("widgetName", "Table1");
+        dsl.put("type", "TABLE_WIDGET");
+        Map primaryColumns = new HashMap<String, Object>();
+        JSONObject jsonObject = new JSONObject(Map.of("key", "value"));
+        primaryColumns.put("_id", jsonObject);
+        primaryColumns.put("_class", jsonObject);
+        dsl.put("primaryColumns", primaryColumns);
+        Layout layout = testPage.getLayouts().get(0);
+        layout.setDsl(dsl);
+
+        layoutActionService.updateLayout(testPage.getId(), layout.getId(), layout).block();
+
+        RefactorNameDTO refactorNameDTO = new RefactorNameDTO();
+        refactorNameDTO.setPageId(testPage.getId());
+        refactorNameDTO.setLayoutId(layout.getId());
+        refactorNameDTO.setOldName("Table1");
+        refactorNameDTO.setNewName("NewNameTable1");
+
+        Mono<LayoutDTO> widgetRenameMono = layoutActionService.refactorWidgetName(refactorNameDTO).cache();
+
+        Mono<PageDTO> pageFromRepoMono = widgetRenameMono.then(newPageService.findPageById(testPage.getId(), READ_PAGES, false));
+
+        StepVerifier
+                .create(Mono.zip(widgetRenameMono, pageFromRepoMono))
+                .assertNext(tuple -> {
+                    LayoutDTO updatedLayout = tuple.getT1();
+                    PageDTO pageFromRepo = tuple.getT2();
+
+                    String widgetName = (String) updatedLayout.getDsl().get("widgetName");
+                    assertThat(widgetName).isEqualTo("NewNameTable1");
+
+                    Map primaryColumns1 = (Map) updatedLayout.getDsl().get("primaryColumns");
+                    assertThat(primaryColumns1.keySet()).containsAll(Set.of(FieldName.MONGO_UNESCAPED_ID, FieldName.MONGO_UNESCAPED_CLASS));
+
+                    Map primaryColumns2 = (Map) pageFromRepo.getLayouts().get(0).getDsl().get("primaryColumns");
+                    assertThat(primaryColumns2.keySet()).containsAll(Set.of(FieldName.MONGO_ESCAPE_ID, FieldName.MONGO_ESCAPE_CLASS));
+                })
+                .verifyComplete();
+    }
 }

From 8a6cd10102a1374517f55914ef5ffab00c0b284e Mon Sep 17 00:00:00 2001
From: Shrikant Sharat Kandula <shrikant@appsmith.com>
Date: Wed, 21 Apr 2021 19:15:02 +0530
Subject: [PATCH 07/76] Set explicit Java version for CI (#4091)

* Set explicit Java version for CI

* Trigger

Co-authored-by: Nidhi <nidhi.nair93@gmail.com>
---
 .github/workflows/external-client-test.yml | 2 +-
 .github/workflows/server.yml               | 2 +-
 app/server/README.md                       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/external-client-test.yml b/.github/workflows/external-client-test.yml
index 2b41a166fa..f83389788e 100644
--- a/.github/workflows/external-client-test.yml
+++ b/.github/workflows/external-client-test.yml
@@ -38,7 +38,7 @@ jobs:
       - name: Set up JDK 1.11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.11
+          java-version: "11.0.10"
 
       # Retrieve maven dependencies from cache. After a successful run, these dependencies are cached again
       - name: Cache maven dependencies
diff --git a/.github/workflows/server.yml b/.github/workflows/server.yml
index d5a79b2dd9..3ac0df6d93 100644
--- a/.github/workflows/server.yml
+++ b/.github/workflows/server.yml
@@ -50,7 +50,7 @@ jobs:
       - name: Set up JDK 1.11
         uses: actions/setup-java@v1
         with:
-          java-version: 1.11
+          java-version: "11.0.10"
 
       # Retrieve maven dependencies from cache. After a successful run, these dependencies are cached again
       - name: Cache maven dependencies
diff --git a/app/server/README.md b/app/server/README.md
index ae3296205b..d59286da54 100644
--- a/app/server/README.md
+++ b/app/server/README.md
@@ -30,4 +30,4 @@ In order to test the code, you can run the following command:
 mvn -B clean package
 ```
 
-Please make sure that you have a local Redis instance running for the test cases. During tests, the MongoDB is run in-memory. So you don't require to be running a local MongoDB instance. 
+Please make sure that you have a local Redis instance running for the test cases. During tests, the MongoDB is run in-memory. So you don't require to be running a local MongoDB instance.

From 398fe551cc6fd03fde341bb5bd84d5c88cd8650b Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Wed, 28 Apr 2021 18:37:35 +0530
Subject: [PATCH 08/76] Handle table data download as excel

---
 app/client/package.json                       |   6 +-
 .../TableComponent/TableDataDownload.tsx      | 159 ++++++++++++++++--
 app/client/yarn.lock                          |  94 ++++++++++-
 3 files changed, 241 insertions(+), 18 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index 02fb149675..2e3b0c51c6 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -22,6 +22,7 @@
     "@sentry/tracing": "^6.2.4",
     "@sentry/webpack-plugin": "^1.12.1",
     "@types/chance": "^1.0.7",
+    "@types/file-saver": "^2.0.2",
     "@types/lodash": "^4.14.120",
     "@types/moment-timezone": "^0.5.10",
     "@types/nanoid": "^2.0.0",
@@ -56,9 +57,9 @@
     "deep-diff": "^1.0.2",
     "downloadjs": "^1.4.7",
     "eslint": "^7.11.0",
-    "export-from-json": "^1.3.5",
     "fast-deep-equal": "^3.1.1",
     "fast-xml-parser": "^3.17.5",
+    "file-saver": "^2.0.5",
     "flow-bin": "^0.91.0",
     "fuse.js": "^3.4.5",
     "fusioncharts": "^3.16.0",
@@ -133,7 +134,8 @@
     "typescript": "^3.9.2",
     "unescape-js": "^1.1.4",
     "url-search-params-polyfill": "^8.0.0",
-    "worker-loader": "^3.0.2"
+    "worker-loader": "^3.0.2",
+    "xlsx": "^0.16.9"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index 57ac1fdcad..9387136188 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -1,4 +1,10 @@
 import React from "react";
+import {
+  Popover,
+  Classes,
+  PopoverInteractionKind,
+  Position,
+} from "@blueprintjs/core";
 import { IconWrapper } from "constants/IconConstants";
 import { Colors } from "constants/Colors";
 import { ReactComponent as DownloadIcon } from "assets/icons/control/download-table.svg";
@@ -6,6 +12,43 @@ import { ReactTableColumnProps } from "components/designSystems/appsmith/TableCo
 import { TableIconWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
 import TableActionIcon from "components/designSystems/appsmith/TableComponent/TableActionIcon";
 import { isString } from "lodash";
+import styled from "styled-components";
+
+const DropDownWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: white;
+  z-index: 1;
+  border-radius: 4px;
+  border: 1px solid ${Colors.ATHENS_GRAY};
+  padding: 8px;
+`;
+
+const OptionWrapper = styled.div`
+  display: flex;
+  width: calc(100% - 20px);
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  box-sizing: border-box;
+  padding: 8px;
+  color: ${Colors.OXFORD_BLUE};
+  opacity: 0.7;
+  min-width: 200px;
+  cursor: pointer;
+  margin-bottom: 4px;
+  background: ${Colors.WHITE};
+  border-left: none;
+  border-radius: 4px;
+  .option-title {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  &:hover {
+    background: ${Colors.POLAR};
+  }
+`;
 
 interface TableDataDownloadProps {
   data: Array<Record<string, unknown>>;
@@ -13,10 +56,76 @@ interface TableDataDownloadProps {
   widgetName: string;
 }
 
+type FileDownloadType = "CSV" | "EXCEL";
+
+interface DownloadOptionProps {
+  label: string;
+  value: FileDownloadType;
+}
+
+const dowloadOptions: DownloadOptionProps[] = [
+  {
+    label: "CSV",
+    value: "CSV",
+  },
+  {
+    label: "Excel",
+    value: "EXCEL",
+  },
+];
+
 const TableDataDownload = (props: TableDataDownloadProps) => {
-  const [selected, toggleButtonClick] = React.useState(false);
-  const downloadTableData = () => {
-    toggleButtonClick(true);
+  const [selected, selectMenu] = React.useState(false);
+  const downloadFile = (type: string) => {
+    if (type === "CSV") {
+      downloadTableDataAsCsv();
+    } else if (type === "EXCEL") {
+      downloadTableDataAsExcel();
+    }
+  };
+  const downloadTableDataAsExcel = () => {
+    const tableData: Array<{ [key: string]: any }> = [];
+    const tableHeaders = props.columns
+      .map((column: ReactTableColumnProps) => {
+        if (column.metaProperties && !column.metaProperties.isHidden) {
+          return column.Header;
+        }
+        return null;
+      })
+      .filter((i) => !!i);
+    tableData.push(tableHeaders);
+    for (let row = 0; row < props.data.length; row++) {
+      const data: { [key: string]: any } = props.data[row];
+      const tableRow = [];
+      for (let colIndex = 0; colIndex < props.columns.length; colIndex++) {
+        const column = props.columns[colIndex];
+        if (column.metaProperties && !column.metaProperties.isHidden) {
+          tableRow.push(data[column.accessor]);
+        }
+      }
+      tableData.push(tableRow);
+    }
+    import("xlsx").then((XLSX) => {
+      const workSheet = XLSX.utils.aoa_to_sheet(tableData);
+      const workBook = {
+        Sheets: { data: workSheet, cols: [] },
+        SheetNames: ["data"],
+      };
+      const excelBuffer = XLSX.write(workBook, {
+        bookType: "xlsx",
+        type: "array",
+      });
+      const fileData = new Blob([excelBuffer], {
+        type:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
+      });
+      import("file-saver").then((FileSaver) => {
+        FileSaver.saveAs(fileData, `${props.widgetName}.xlsx`);
+      });
+    });
+  };
+  const downloadTableDataAsCsv = () => {
+    selectMenu(true);
     const csvData = [];
     csvData.push(
       props.columns
@@ -70,7 +179,7 @@ const TableDataDownload = (props: TableDataDownloadProps) => {
       anchor.click();
       document.body.removeChild(anchor);
     }
-    toggleButtonClick(false);
+    selectMenu(false);
   };
 
   if (props.columns.length === 0) {
@@ -83,16 +192,42 @@ const TableDataDownload = (props: TableDataDownloadProps) => {
     );
   }
   return (
-    <TableActionIcon
-      tooltip="Download"
-      selected={selected}
-      selectMenu={() => {
-        downloadTableData();
+    <Popover
+      minimal
+      enforceFocus={false}
+      interactionKind={PopoverInteractionKind.CLICK}
+      position={Position.BOTTOM}
+      onClose={() => {
+        selectMenu(false);
       }}
-      className="t--table-download-btn"
+      isOpen={selected}
     >
-      <DownloadIcon />
-    </TableActionIcon>
+      <TableActionIcon
+        tooltip="Download"
+        selected={selected}
+        selectMenu={(selected: boolean) => {
+          selectMenu(selected);
+        }}
+        className="t--table-download-btn"
+      >
+        <DownloadIcon />
+      </TableActionIcon>
+      <DropDownWrapper>
+        {dowloadOptions.map((item: DownloadOptionProps, index: number) => {
+          return (
+            <OptionWrapper
+              key={index}
+              onClick={() => {
+                downloadFile(item.value);
+              }}
+              className={`${Classes.POPOVER_DISMISS} t--table-download-data-option`}
+            >
+              {item.label}
+            </OptionWrapper>
+          );
+        })}
+      </DropDownWrapper>
+    </Popover>
   );
 };
 
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 0eb016e21d..ad399001f2 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -3519,6 +3519,10 @@
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
+"@types/file-saver@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.2.tgz#bd593ccfaee42ff94a5c1c83bf69ae9be83493b9"
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -4476,6 +4480,13 @@ adjust-sourcemap-loader@3.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
+adler-32@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.2.0.tgz#6a3e6bf0a63900ba15652808cb15c6813d1a5f25"
+  dependencies:
+    exit-on-epipe "~1.0.1"
+    printj "~1.1.0"
+
 agent-base@6:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.1.tgz#808007e4e5867decb0ab6ab2f928fbdb5a596db4"
@@ -5791,6 +5802,14 @@ ccount@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
 
+cfb@^1.1.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.2.0.tgz#6a4d0872b525ed60349e1ef51fb4b0bf73eca9a8"
+  dependencies:
+    adler-32 "~1.2.0"
+    crc-32 "~1.2.0"
+    printj "~1.1.2"
+
 chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -6121,6 +6140,13 @@ codemirror@^5.59.2:
   version "5.59.2"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
 
+codepage@~1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.14.0.tgz#8cbe25481323559d7d307571b0fff91e7a1d2f99"
+  dependencies:
+    commander "~2.14.1"
+    exit-on-epipe "~1.0.1"
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -6204,6 +6230,14 @@ commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
 
+commander@~2.14.1:
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
+
+commander@~2.17.1:
+  version "2.17.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -6414,6 +6448,13 @@ craco-babel-loader@^0.1.4:
   dependencies:
     "@craco/craco" "^5.0.0"
 
+crc-32@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
+  dependencies:
+    exit-on-epipe "~1.0.1"
+    printj "~1.1.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -7927,6 +7968,10 @@ exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
 
+exit-on-epipe@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -7954,10 +7999,6 @@ expect@^26.6.0, expect@^26.6.1:
     jest-message-util "^26.6.1"
     jest-regex-util "^26.0.0"
 
-export-from-json@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/export-from-json/-/export-from-json-1.3.5.tgz#52e8dab6aacf2827c84fcc304940a1ea5347124b"
-
 express@^4.17.0, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -8158,6 +8199,10 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fflate@^0.3.8:
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.3.11.tgz#2c440d7180fdeb819e64898d8858af327b042a5d"
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -8201,6 +8246,10 @@ file-loader@^4.2.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+
 file-system-cache@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
@@ -8415,6 +8464,10 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
+frac@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -13360,6 +13413,10 @@ pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
 
+printj@~1.1.0, printj@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
+
 prismjs@^1.23.0, prismjs@^1.8.4:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
@@ -15590,6 +15647,12 @@ sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
+ssf@~0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
+  dependencies:
+    frac "~1.1.2"
+
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
@@ -17218,10 +17281,18 @@ with@^7.0.0:
     assert-never "^1.2.1"
     babel-walk "3.0.0-canary-5"
 
+wmf@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
+
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
 
+word@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
+
 workbox-background-sync@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-5.1.4.tgz#5ae0bbd455f4e9c319e8d827c055bb86c894fd12"
@@ -17461,6 +17532,21 @@ ws@^7.2.3:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
 
+xlsx@^0.16.9:
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.16.9.tgz#dacd5bb46bda6dd3743940c9c3dc1e2171826256"
+  dependencies:
+    adler-32 "~1.2.0"
+    cfb "^1.1.4"
+    codepage "~1.14.0"
+    commander "~2.17.1"
+    crc-32 "~1.2.0"
+    exit-on-epipe "~1.0.1"
+    fflate "^0.3.8"
+    ssf "~0.11.2"
+    wmf "~1.0.1"
+    word "~0.3.0"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"

From 09748de6c0d6f4bc4e8b934b597c72b3c7216003 Mon Sep 17 00:00:00 2001
From: Trisha Anand <trisha@appsmith.com>
Date: Wed, 28 Apr 2021 22:27:01 +0530
Subject: [PATCH 09/76] NPE check when there are no mongo escaped widgets
 (#4200)

---
 .../com/appsmith/server/services/LayoutActionServiceImpl.java   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
index 453602328b..0e625ddf4d 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/LayoutActionServiceImpl.java
@@ -226,7 +226,7 @@ public class LayoutActionServiceImpl implements LayoutActionService {
                             // DSL has removed all the old names and replaced it with new name. If the change of name
                             // was one of the mongoEscaped widgets, then update the names in the set as well
                             Set<String> mongoEscapedWidgetNames = layout.getMongoEscapedWidgetNames();
-                            if (mongoEscapedWidgetNames.contains(oldName)) {
+                            if (mongoEscapedWidgetNames != null && mongoEscapedWidgetNames.contains(oldName)) {
                                 mongoEscapedWidgetNames.remove(oldName);
                                 mongoEscapedWidgetNames.add(newName);
                             }

From 92764c8f5c15f139d388ba233887f77b9ca4b718 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Thu, 29 Apr 2021 14:50:43 +0530
Subject: [PATCH 10/76] Used zipcelx instaed of xlsx lib to download table data
 as excel

---
 app/client/package.json                       |   5 +-
 .../TableComponent/TableDataDownload.tsx      |  66 +++++----
 app/client/yarn.lock                          | 140 +++++-------------
 3 files changed, 75 insertions(+), 136 deletions(-)

diff --git a/app/client/package.json b/app/client/package.json
index 00fa708665..8ed6285f09 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -22,7 +22,6 @@
     "@sentry/tracing": "^6.2.4",
     "@sentry/webpack-plugin": "^1.12.1",
     "@types/chance": "^1.0.7",
-    "@types/file-saver": "^2.0.2",
     "@types/lodash": "^4.14.120",
     "@types/moment-timezone": "^0.5.10",
     "@types/nanoid": "^2.0.0",
@@ -37,6 +36,7 @@
     "@types/react-table": "^7.0.13",
     "@types/styled-components": "^5.1.3",
     "@types/tinycolor2": "^1.4.2",
+    "@types/zipcelx": "^1.5.0",
     "@uppy/core": "^1.16.0",
     "@uppy/dashboard": "^1.16.0",
     "@uppy/file-input": "^1.4.22",
@@ -59,7 +59,6 @@
     "eslint": "^7.11.0",
     "fast-deep-equal": "^3.1.1",
     "fast-xml-parser": "^3.17.5",
-    "file-saver": "^2.0.5",
     "flow-bin": "^0.91.0",
     "fuse.js": "^3.4.5",
     "fusioncharts": "^3.16.0",
@@ -137,7 +136,7 @@
     "unescape-js": "^1.1.4",
     "url-search-params-polyfill": "^8.0.0",
     "worker-loader": "^3.0.2",
-    "xlsx": "^0.16.9"
+    "zipcelx": "^1.6.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index 3b3be89aa1..fd914ce941 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -13,6 +13,7 @@ import { TableIconWrapper } from "components/designSystems/appsmith/TableCompone
 import TableActionIcon from "components/designSystems/appsmith/TableComponent/TableActionIcon";
 import styled from "styled-components";
 import { transformTableDataIntoCsv } from "./CommonUtilities";
+import zipcelx from "zipcelx";
 
 const DropDownWrapper = styled.div`
   display: flex;
@@ -57,6 +58,11 @@ interface TableDataDownloadProps {
 
 type FileDownloadType = "CSV" | "EXCEL";
 
+type DataCellProps = {
+  value: string | number;
+  type: "string" | "number";
+};
+
 interface DownloadOptionProps {
   label: string;
   value: FileDownloadType;
@@ -64,11 +70,11 @@ interface DownloadOptionProps {
 
 const dowloadOptions: DownloadOptionProps[] = [
   {
-    label: "CSV",
+    label: "Download as CSV",
     value: "CSV",
   },
   {
-    label: "Excel",
+    label: "Download as Excel",
     value: "EXCEL",
   },
 ];
@@ -104,27 +110,6 @@ const downloadDataAsCSV = (props: {
   }
 };
 
-const downloadDataAsExcel = (tableData: string[][], fileName: string) => {
-  import("xlsx").then((XLSX) => {
-    const workSheet = XLSX.utils.aoa_to_sheet(tableData);
-    const workBook = {
-      Sheets: { data: workSheet, cols: [] },
-      SheetNames: ["data"],
-    };
-    const excelBuffer = XLSX.write(workBook, {
-      bookType: "xlsx",
-      type: "array",
-    });
-    const fileData = new Blob([excelBuffer], {
-      type:
-        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
-    });
-    import("file-saver").then((FileSaver) => {
-      FileSaver.saveAs(fileData, `${fileName}.xlsx`);
-    });
-  });
-};
-
 function TableDataDownload(props: TableDataDownloadProps) {
   const [selected, selectMenu] = React.useState(false);
   const downloadFile = (type: string) => {
@@ -135,28 +120,49 @@ function TableDataDownload(props: TableDataDownloadProps) {
     }
   };
   const downloadTableDataAsExcel = () => {
-    const tableData: string[][] = [];
-    const tableHeaders: string[] = props.columns
+    const tableData: Array<Array<DataCellProps>> = [];
+    const tableHeaders: Array<{
+      value: string | number;
+      type: string;
+    }> = props.columns
       .map((column: ReactTableColumnProps) => {
         if (column.metaProperties && !column.metaProperties.isHidden) {
-          return column.Header;
+          return {
+            value: column.Header,
+            type:
+              column.columnProperties?.columnType === "number"
+                ? "number"
+                : "string",
+          };
         }
-        return "";
+        return null;
       })
       .filter((i) => !!i);
     tableData.push(tableHeaders);
     for (let row = 0; row < props.data.length; row++) {
       const data: { [key: string]: any } = props.data[row];
-      const tableRow: string[] = [];
+      const tableRow: Array<DataCellProps> = [];
       for (let colIndex = 0; colIndex < props.columns.length; colIndex++) {
         const column = props.columns[colIndex];
+        const type =
+          column.columnProperties?.columnType === "number"
+            ? "number"
+            : "string";
         if (column.metaProperties && !column.metaProperties.isHidden) {
-          tableRow.push(data[column.accessor]);
+          tableRow.push({
+            value: data[column.accessor],
+            type: type,
+          });
         }
       }
       tableData.push(tableRow);
     }
-    downloadDataAsExcel(tableData, props.widgetName);
+    zipcelx({
+      filename: props.widgetName,
+      sheet: {
+        data: tableData,
+      },
+    });
   };
   const downloadTableDataAsCsv = () => {
     selectMenu(true);
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 30d01ec58c..e7f1d6339f 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -3413,7 +3413,6 @@
 "@testing-library/react@^11.2.6":
   version "11.2.6"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.6.tgz#586a23adc63615985d85be0c903f374dab19200b"
-  integrity sha512-TXMCg0jT8xmuU8BkKMtp8l7Z50Ykew5WNX8UoIKTaLFwKkP2+1YDhOLA2Ga3wY4x29jyntk7EWfum0kjlYiSjQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
@@ -3520,10 +3519,6 @@
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
-"@types/file-saver@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.2.tgz#bd593ccfaee42ff94a5c1c83bf69ae9be83493b9"
-
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -3800,7 +3795,6 @@
 "@types/react-test-renderer@^17.0.1":
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
-  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
   dependencies:
     "@types/react" "*"
 
@@ -3984,10 +3978,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/zipcelx@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@types/zipcelx/-/zipcelx-1.5.0.tgz#e06e9ed51fadbc7fbcf15fbeb2bcbf446750c72e"
+
 "@typescript-eslint/eslint-plugin@^4.15.0":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.15.1.tgz#835f64aa0a403e5e9e64c10ceaf8d05c3f015180"
-  integrity sha512-yW2epMYZSpNJXZy22Biu+fLdTG8Mn6b22kR3TqblVk50HGNV8Zya15WAXuQCr8tKw4Qf1BL4QtI6kv6PCkLoJw==
   dependencies:
     "@typescript-eslint/experimental-utils" "4.15.1"
     "@typescript-eslint/scope-manager" "4.15.1"
@@ -4013,7 +4010,6 @@
 "@typescript-eslint/experimental-utils@4.15.1":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.1.tgz#d744d1ac40570a84b447f7aa1b526368afd17eec"
-  integrity sha512-9LQRmOzBRI1iOdJorr4jEnQhadxK4c9R2aEAsm7WE/7dq8wkKD1suaV0S/JucTL8QlYUPU1y2yjqg+aGC0IQBQ==
   dependencies:
     "@types/json-schema" "^7.0.3"
     "@typescript-eslint/scope-manager" "4.15.1"
@@ -4046,7 +4042,6 @@
 "@typescript-eslint/parser@^4.15.0":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.15.1.tgz#4c91a0602733db63507e1dbf13187d6c71a153c4"
-  integrity sha512-V8eXYxNJ9QmXi5ETDguB7O9diAXlIyS+e3xzLoP/oVE4WCAjssxLIa0mqCLsCGXulYJUfT+GV70Jv1vHsdKwtA==
   dependencies:
     "@typescript-eslint/scope-manager" "4.15.1"
     "@typescript-eslint/types" "4.15.1"
@@ -4065,7 +4060,6 @@
 "@typescript-eslint/scope-manager@4.15.1":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.15.1.tgz#f6511eb38def2a8a6be600c530c243bbb56ac135"
-  integrity sha512-ibQrTFcAm7yG4C1iwpIYK7vDnFg+fKaZVfvyOm3sNsGAerKfwPVFtYft5EbjzByDJ4dj1WD8/34REJfw/9wdVA==
   dependencies:
     "@typescript-eslint/types" "4.15.1"
     "@typescript-eslint/visitor-keys" "4.15.1"
@@ -4084,7 +4078,6 @@
 "@typescript-eslint/types@4.15.1":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.15.1.tgz#da702f544ef1afae4bc98da699eaecd49cf31c8c"
-  integrity sha512-iGsaUyWFyLz0mHfXhX4zO6P7O3sExQpBJ2dgXB0G5g/8PRVfBBsmQIc3r83ranEQTALLR3Vko/fnCIVqmH+mPw==
 
 "@typescript-eslint/types@4.6.0":
   version "4.6.0"
@@ -4106,7 +4099,6 @@
 "@typescript-eslint/typescript-estree@4.15.1":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.1.tgz#fa9a9ff88b4a04d901ddbe5b248bc0a00cd610be"
-  integrity sha512-z8MN3CicTEumrWAEB2e2CcoZa3KP9+SMYLIA2aM49XW3cWIaiVSOAGq30ffR5XHxRirqE90fgLw3e6WmNx5uNw==
   dependencies:
     "@typescript-eslint/types" "4.15.1"
     "@typescript-eslint/visitor-keys" "4.15.1"
@@ -4138,7 +4130,6 @@
 "@typescript-eslint/visitor-keys@4.15.1":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.1.tgz#c76abbf2a3be8a70ed760f0e5756bf62de5865dd"
-  integrity sha512-tYzaTP9plooRJY8eNlpAewTOqtWW/4ff/5wBjNVaJ0S0wC4Gpq/zDVRTJa5bq2v1pCNQ08xxMCndcvR+h7lMww==
   dependencies:
     "@typescript-eslint/types" "4.15.1"
     eslint-visitor-keys "^2.0.0"
@@ -4558,13 +4549,6 @@ adjust-sourcemap-loader@3.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
-adler-32@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.2.0.tgz#6a3e6bf0a63900ba15652808cb15c6813d1a5f25"
-  dependencies:
-    exit-on-epipe "~1.0.1"
-    printj "~1.1.0"
-
 agent-base@6:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.1.tgz#808007e4e5867decb0ab6ab2f928fbdb5a596db4"
@@ -5880,14 +5864,6 @@ ccount@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
 
-cfb@^1.1.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.2.0.tgz#6a4d0872b525ed60349e1ef51fb4b0bf73eca9a8"
-  dependencies:
-    adler-32 "~1.2.0"
-    crc-32 "~1.2.0"
-    printj "~1.1.2"
-
 chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -6218,13 +6194,6 @@ codemirror@^5.59.2:
   version "5.59.2"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
 
-codepage@~1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.14.0.tgz#8cbe25481323559d7d307571b0fff91e7a1d2f99"
-  dependencies:
-    commander "~2.14.1"
-    exit-on-epipe "~1.0.1"
-
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -6308,14 +6277,6 @@ commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
 
-commander@~2.14.1:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
-
-commander@~2.17.1:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -6526,13 +6487,6 @@ craco-babel-loader@^0.1.4:
   dependencies:
     "@craco/craco" "^5.0.0"
 
-crc-32@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
-  dependencies:
-    exit-on-epipe "~1.0.1"
-    printj "~1.1.0"
-
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -8046,10 +8000,6 @@ exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
 
-exit-on-epipe@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
-
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -8176,7 +8126,6 @@ extsprintf@^1.2.0:
 factory.ts@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/factory.ts/-/factory.ts-0.5.1.tgz#4bab72d8457078906aa6ab396c0d341e8a3ab382"
-  integrity sha512-jwAq8w7MmxUojIFzKezMwTzDc5QoxcqzAA8+n9A0EAWBje2CRHUeBrW9x/ioV2DRjHgkHX7i0G0ipfDhlatIQw==
   dependencies:
     clone-deep "^4.0.1"
     source-map-support "^0.5.9"
@@ -8285,14 +8234,9 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-fflate@^0.3.8:
-  version "0.3.11"
-  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.3.11.tgz#2c440d7180fdeb819e64898d8858af327b042a5d"
-
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
-  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
 figures@^1.7.0:
   version "1.7.0"
@@ -8333,7 +8277,7 @@ file-loader@^4.2.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
-file-saver@^2.0.5:
+file-saver@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
 
@@ -8551,10 +8495,6 @@ forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
 
-frac@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
-
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -10854,6 +10794,15 @@ jstransformer@1.0.0:
     array-includes "^3.1.1"
     object.assign "^4.1.1"
 
+jszip@^3.1.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.6.0.tgz#839b72812e3f97819cc13ac4134ffced95dd6af9"
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    set-immediate-shim "~1.0.1"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -10963,6 +10912,12 @@ lie@3.1.1:
   dependencies:
     immediate "~3.0.5"
 
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  dependencies:
+    immediate "~3.0.5"
+
 line-column@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2"
@@ -11145,6 +11100,10 @@ lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
+lodash.escape@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
+
 lodash.flow@^3.3.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
@@ -12496,7 +12455,7 @@ paging-algorithm@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/paging-algorithm/-/paging-algorithm-1.0.1.tgz#18abe482a6a202bfaab4b023a407c8cc2072cb8a"
 
-pako@~1.0.5:
+pako@~1.0.2, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
 
@@ -13500,10 +13459,6 @@ pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
 
-printj@~1.1.0, printj@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
-
 prismjs@^1.23.0, prismjs@^1.8.4:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
@@ -13865,7 +13820,6 @@ raw-loader@^4.0.2:
 rc-pagination@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-3.1.3.tgz#afd779839fefab2cb14248d5e7b74027960bb48b"
-  integrity sha512-Z7CdC4xGkedfAwcUHPtfqNhYwVyDgkmhkvfsmoByCOwAd89p42t5O5T3ORar1wRmVWf3jxk/Bf4k0atenNvlFA==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.1"
@@ -15402,6 +15356,10 @@ set-cookie-parser@^2.4.6:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.4.8.tgz#d0da0ed388bc8f24e706a391f9c9e252a13c58b2"
 
+set-immediate-shim@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -15742,12 +15700,6 @@ sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
-ssf@~0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
-  dependencies:
-    frac "~1.1.2"
-
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
@@ -15765,7 +15717,6 @@ sshpk@^1.7.0:
 ssri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
-  integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
   dependencies:
     figgy-pudding "^3.5.1"
 
@@ -16601,7 +16552,6 @@ tslib@^2.0.0, tslib@^2.0.1:
 tslib@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
-  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
 
 tslib@~1.13.0:
   version "1.13.0"
@@ -16707,7 +16657,6 @@ typescript-tuple@^2.2.1:
 typescript@^4.1.3:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72"
-  integrity sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==
 
 ua-parser-js@^0.7.18:
   version "0.7.22"
@@ -17383,18 +17332,10 @@ with@^7.0.0:
     assert-never "^1.2.1"
     babel-walk "3.0.0-canary-5"
 
-wmf@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
-
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
 
-word@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
-
 workbox-background-sync@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-5.1.4.tgz#5ae0bbd455f4e9c319e8d827c055bb86c894fd12"
@@ -17634,21 +17575,6 @@ ws@^7.2.3:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
 
-xlsx@^0.16.9:
-  version "0.16.9"
-  resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.16.9.tgz#dacd5bb46bda6dd3743940c9c3dc1e2171826256"
-  dependencies:
-    adler-32 "~1.2.0"
-    cfb "^1.1.4"
-    codepage "~1.14.0"
-    commander "~2.17.1"
-    crc-32 "~1.2.0"
-    exit-on-epipe "~1.0.1"
-    fflate "^0.3.8"
-    ssf "~0.11.2"
-    wmf "~1.0.1"
-    word "~0.3.0"
-
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -17788,6 +17714,14 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+zipcelx@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/zipcelx/-/zipcelx-1.6.2.tgz#ae99aa8c04f440d17c52fcdcbc6abc79d6993b3b"
+  dependencies:
+    file-saver "^2.0.0"
+    jszip "^3.1.3"
+    lodash.escape "^4.0.1"
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"

From 9469571a0cc95b6b2160d982ca6136b67afad14d Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Thu, 29 Apr 2021 15:33:40 +0530
Subject: [PATCH 11/76] Fix type issue

---
 .../TableComponent/TableDataDownload.tsx      | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index fd914ce941..29b63999f2 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -121,23 +121,19 @@ function TableDataDownload(props: TableDataDownloadProps) {
   };
   const downloadTableDataAsExcel = () => {
     const tableData: Array<Array<DataCellProps>> = [];
-    const tableHeaders: Array<{
-      value: string | number;
-      type: string;
-    }> = props.columns
-      .map((column: ReactTableColumnProps) => {
-        if (column.metaProperties && !column.metaProperties.isHidden) {
-          return {
-            value: column.Header,
-            type:
-              column.columnProperties?.columnType === "number"
-                ? "number"
-                : "string",
-          };
-        }
-        return null;
+    const tableHeaders: Array<DataCellProps> = props.columns
+      .filter((column: ReactTableColumnProps) => {
+        return column.metaProperties && !column.metaProperties.isHidden;
       })
-      .filter((i) => !!i);
+      .map((column: ReactTableColumnProps) => {
+        return {
+          value: column.Header,
+          type:
+            column.columnProperties?.columnType === "number"
+              ? "number"
+              : "string",
+        };
+      });
     tableData.push(tableHeaders);
     for (let row = 0; row < props.data.length; row++) {
       const data: { [key: string]: any } = props.data[row];

From e3b361a8d4c78804b06bf86007bc85908adb0194 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Mon, 3 May 2021 14:33:03 +0530
Subject: [PATCH 12/76] Change inline functions in jsx to class properties

---
 app/client/src/widgets/TableWidget/index.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index 3ab7652ff5..434e7b89d2 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -603,6 +603,17 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return selectedRowIndices;
   };
 
+  applyFilters = () => {
+    (filters: ReactTableFilter[]) => {
+      this.resetSelectedRowIndex();
+      this.props.updateWidgetMetaProperty("filters", filters);
+    };
+  };
+
+  disableDrag = (disable: boolean) => {
+    this.disableDrag(disable);
+  };
+
   getPageView() {
     const { pageSize, filteredTableData = [] } = this.props;
     const tableColumns = this.getTableColumns() || [];
@@ -612,16 +623,11 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return (
       <Suspense fallback={<Skeleton />}>
         <ReactTableComponent
-          applyFilter={(filters: ReactTableFilter[]) => {
-            this.resetSelectedRowIndex();
-            this.props.updateWidgetMetaProperty("filters", filters);
-          }}
+          applyFilter={this.applyFilters}
           columnSizeMap={this.props.columnSizeMap}
           columns={tableColumns}
           compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
-          disableDrag={(disable: boolean) => {
-            this.disableDrag(disable);
-          }}
+          disableDrag={this.disableDrag}
           editMode={this.props.renderMode === RenderModes.CANVAS}
           filters={this.props.filters}
           handleReorderColumn={this.handleReorderColumn}

From 2a3d0fd28e1af07e8487e974932fc422d4eac723 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Tue, 4 May 2021 00:12:21 +0530
Subject: [PATCH 13/76] - Destructure TableComponent props

---
 .../appsmith/TableComponent/index.tsx         | 102 ++++++++++++------
 1 file changed, 67 insertions(+), 35 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index 0e6c769657..77fea998df 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -68,10 +68,42 @@ interface ReactTableComponentProps {
 }
 
 function ReactTableComponent(props: ReactTableComponentProps) {
+  const {
+    applyFilter,
+    columns,
+    columnSizeMap,
+    compactMode,
+    disableDrag,
+    editMode,
+    filters,
+    handleReorderColumn,
+    handleResizeColumn,
+    height,
+    isLoading,
+    nextPageClick,
+    onRowClick,
+    pageNo,
+    pageSize,
+    prevPageClick,
+    searchKey,
+    searchTableData,
+    selectedRowIndex,
+    selectedRowIndices,
+    serverSidePaginationEnabled,
+    sortTableColumn: _sortTableColumn,
+    tableData,
+    triggerRowSelection,
+    updateCompactMode,
+    updatePageNo,
+    widgetId,
+    widgetName,
+    width,
+  } = props;
+
   const { columnOrder, hiddenColumns } = useMemo(() => {
     const order: string[] = [];
     const hidden: string[] = [];
-    props.columns.forEach((item) => {
+    columns.forEach((item) => {
       if (item.isHidden) {
         hidden.push(item.accessor);
       } else {
@@ -79,12 +111,12 @@ function ReactTableComponent(props: ReactTableComponentProps) {
       }
     });
     return { columnOrder: order, hiddenColumns: hidden };
-  }, [props.columns]);
+  }, [columns]);
 
   useEffect(() => {
     let dragged = -1;
     const headers = Array.prototype.slice.call(
-      document.querySelectorAll(`#table${props.widgetId} .draggable-header`),
+      document.querySelectorAll(`#table${widgetId} .draggable-header`),
     );
     headers.forEach((header, i) => {
       header.setAttribute("draggable", true);
@@ -149,7 +181,7 @@ function ReactTableComponent(props: ReactTableComponentProps) {
           if (movedColumnName && movedColumnName.length === 1) {
             newColumnOrder.splice(i, 0, movedColumnName[0]);
           }
-          props.handleReorderColumn([...newColumnOrder, ...hiddenColumns]);
+          handleReorderColumn([...newColumnOrder, ...hiddenColumns]);
         } else {
           dragged = -1;
         }
@@ -159,15 +191,15 @@ function ReactTableComponent(props: ReactTableComponentProps) {
 
   const sortTableColumn = (columnIndex: number, asc: boolean) => {
     if (columnIndex === -1) {
-      props.sortTableColumn("", asc);
+      _sortTableColumn("", asc);
     } else {
-      const column = props.columns[columnIndex];
+      const column = columns[columnIndex];
       const columnType = column.metaProperties?.type || ColumnTypes.TEXT;
       if (
         columnType !== ColumnTypes.IMAGE &&
         columnType !== ColumnTypes.VIDEO
       ) {
-        props.sortTableColumn(column.accessor, asc);
+        _sortTableColumn(column.accessor, asc);
       }
     }
   };
@@ -176,48 +208,48 @@ function ReactTableComponent(props: ReactTableComponentProps) {
     original: Record<string, unknown>;
     index: number;
   }) => {
-    props.onRowClick(row.original, row.index);
+    onRowClick(row.original, row.index);
   };
 
   return (
     <Table
-      applyFilter={props.applyFilter}
-      columnSizeMap={props.columnSizeMap}
-      columns={props.columns}
-      compactMode={props.compactMode}
-      data={props.tableData}
+      applyFilter={applyFilter}
+      columnSizeMap={columnSizeMap}
+      columns={columns}
+      compactMode={compactMode}
+      data={tableData}
       disableDrag={() => {
-        props.disableDrag(true);
+        disableDrag(true);
       }}
-      editMode={props.editMode}
+      editMode={editMode}
       enableDrag={() => {
-        props.disableDrag(false);
+        disableDrag(false);
       }}
-      filters={props.filters}
-      handleResizeColumn={props.handleResizeColumn}
-      height={props.height}
-      isLoading={props.isLoading}
+      filters={filters}
+      handleResizeColumn={handleResizeColumn}
+      height={height}
+      isLoading={isLoading}
       nextPageClick={() => {
-        props.nextPageClick();
+        nextPageClick();
       }}
-      pageNo={props.pageNo - 1}
-      pageSize={props.pageSize || 1}
+      pageNo={pageNo - 1}
+      pageSize={pageSize || 1}
       prevPageClick={() => {
-        props.prevPageClick();
+        prevPageClick();
       }}
-      searchKey={props.searchKey}
-      searchTableData={props.searchTableData}
+      searchKey={searchKey}
+      searchTableData={searchTableData}
       selectTableRow={selectTableRow}
-      selectedRowIndex={props.selectedRowIndex}
-      selectedRowIndices={props.selectedRowIndices}
-      serverSidePaginationEnabled={props.serverSidePaginationEnabled}
+      selectedRowIndex={selectedRowIndex}
+      selectedRowIndices={selectedRowIndices}
+      serverSidePaginationEnabled={serverSidePaginationEnabled}
       sortTableColumn={sortTableColumn}
-      triggerRowSelection={props.triggerRowSelection}
-      updateCompactMode={props.updateCompactMode}
-      updatePageNo={props.updatePageNo}
-      widgetId={props.widgetId}
-      widgetName={props.widgetName}
-      width={props.width}
+      triggerRowSelection={triggerRowSelection}
+      updateCompactMode={updateCompactMode}
+      updatePageNo={updatePageNo}
+      widgetId={widgetId}
+      widgetName={widgetName}
+      width={width}
     />
   );
 }

From adb5f7bc7ac33034b0314a3fc283f7411ff36fbe Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Tue, 4 May 2021 12:21:08 +0530
Subject: [PATCH 14/76] - Memoize ReactTableComponent

---
 .../appsmith/TableComponent/index.tsx         | 38 ++++++++++++++++++-
 app/client/src/utils/hooks/usePrevious.tsx    |  9 +++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 app/client/src/utils/hooks/usePrevious.tsx

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index 77fea998df..7a3428d089 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -7,6 +7,8 @@ import {
   ReactTableFilter,
 } from "components/designSystems/appsmith/TableComponent/Constants";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
+import usePrevious from "utils/hooks/usePrevious";
+import _ from "lodash";
 
 export interface ColumnMenuOptionProps {
   content: string | JSX.Element;
@@ -254,4 +256,38 @@ function ReactTableComponent(props: ReactTableComponentProps) {
   );
 }
 
-export default ReactTableComponent;
+export default React.memo(ReactTableComponent, (prev, next) => {
+  return (
+    prev.applyFilter === next.applyFilter &&
+    prev.columnSizeMap === next.columnSizeMap &&
+    prev.compactMode === next.compactMode &&
+    prev.disableDrag === next.disableDrag &&
+    prev.editMode === next.editMode &&
+    prev.filters === next.filters &&
+    prev.handleReorderColumn === next.handleReorderColumn &&
+    prev.handleResizeColumn === next.handleResizeColumn &&
+    prev.height === next.height &&
+    prev.isLoading === next.isLoading &&
+    prev.nextPageClick === next.nextPageClick &&
+    prev.onRowClick === next.onRowClick &&
+    prev.pageNo === next.pageNo &&
+    prev.pageSize === next.pageSize &&
+    prev.prevPageClick === next.prevPageClick &&
+    prev.searchKey === next.searchKey &&
+    prev.searchTableData === next.searchTableData &&
+    prev.selectedRowIndex === next.selectedRowIndex &&
+    prev.selectedRowIndices === next.selectedRowIndices &&
+    prev.serverSidePaginationEnabled === next.serverSidePaginationEnabled &&
+    prev.sortTableColumn === next.sortTableColumn &&
+    prev.triggerRowSelection === next.triggerRowSelection &&
+    prev.updateCompactMode === next.updateCompactMode &&
+    prev.updatePageNo === next.updatePageNo &&
+    prev.widgetId === next.widgetId &&
+    prev.widgetName === next.widgetName &&
+    prev.width === next.width &&
+    _.isEqual(prev.tableData, next.tableData) &&
+    // TODO(Satish) // Check why _.isEqual is not working as expected
+    (JSON.stringify(prev.columns) === JSON.stringify(next.columns) ||
+      _.isEqual(prev.columns, next.columns))
+  );
+});
diff --git a/app/client/src/utils/hooks/usePrevious.tsx b/app/client/src/utils/hooks/usePrevious.tsx
new file mode 100644
index 0000000000..a883f87a27
--- /dev/null
+++ b/app/client/src/utils/hooks/usePrevious.tsx
@@ -0,0 +1,9 @@
+import { useRef, useEffect } from "react";
+
+export default function usePrevious(value: any) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

From 611a07af75fda4b766cf6bec831bf94c99b48b0b Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Tue, 4 May 2021 19:45:29 +0530
Subject: [PATCH 15/76] Add eslint rule to sort destructure keys

---
 app/client/.eslintrc.json |  5 +++--
 app/client/package.json   |  1 +
 app/client/yarn.lock      | 12 ++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index fe0ab77466..7cf9b9c110 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -1,7 +1,7 @@
 // This JSON file configures the eslint plugin. It supports comments as well as per the JSON5 spec
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks"],
+  "plugins": ["react", "@typescript-eslint", "prettier", "react-hooks","sort-destructure-keys"],
   "extends": [
     "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
     "plugin:@typescript-eslint/recommended",
@@ -34,7 +34,8 @@
     "react/self-closing-comp": "error",
     "react/jsx-sort-props": "error",
     "react/jsx-fragments": "error",
-    "react/jsx-no-useless-fragment": "error"
+    "react/jsx-no-useless-fragment": "error",
+    "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}]
   },
   "settings": {
     "react": {
diff --git a/app/client/package.json b/app/client/package.json
index bc24cf83d9..02f95af730 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -224,6 +224,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^2.3.0",
+    "eslint-plugin-sort-destructure-keys": "^1.3.5",
     "factory.ts": "^0.5.1",
     "jest-canvas-mock": "^2.3.1",
     "mocha": "^7.1.0",
diff --git a/app/client/yarn.lock b/app/client/yarn.lock
index 8af878b06b..a6af49a55e 100644
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@@ -7956,6 +7956,13 @@ eslint-plugin-react@^7.21.5:
     resolve "^1.18.1"
     string.prototype.matchall "^4.0.2"
 
+eslint-plugin-sort-destructure-keys@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-sort-destructure-keys/-/eslint-plugin-sort-destructure-keys-1.3.5.tgz#c6f45c3e58d4435564025a6ca5f4a838010800fd"
+  integrity sha512-JmVpidhDsLwZsmRDV7Tf/vZgOAOEQGkLtwToSvX5mD8fuWYS/xkgMRBsalW1fGlc8CgJJwnzropt4oMQ7YCHLg==
+  dependencies:
+    natural-compare-lite "^1.4.0"
+
 eslint-plugin-testing-library@^3.9.2:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.9.2.tgz#ea94048fcc4bf2936588af229d78017c780e9dd6"
@@ -12122,6 +12129,11 @@ native-url@^0.2.6:
   dependencies:
     querystring "^0.2.0"
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha1-F7CVgZiJef3a/gIB6TG6kzyWy7Q=
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"

From 4543bcc39ebd159b0a962f86b2f3074e0768cd23 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Tue, 4 May 2021 19:45:29 +0530
Subject: [PATCH 16/76] Add eslint rule to warn against inline functions in jsx

---
 app/client/.eslintrc.json | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index 7cf9b9c110..e585704a83 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -35,7 +35,14 @@
     "react/jsx-sort-props": "error",
     "react/jsx-fragments": "error",
     "react/jsx-no-useless-fragment": "error",
-    "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}]
+    "sort-destructure-keys/sort-destructure-keys": ["warn", {"caseSensitive": false}],
+    "react/jsx-no-bind": ["warn", {
+      "ignoreDOMComponents":  false,
+      "ignoreRefs": true,
+      "allowArrowFunctions":  false,
+      "allowFunctions":  false,
+      "allowBind": false
+    }]
   },
   "settings": {
     "react": {

From a29b20eca50835b27395d23cdb196ccd9208adc6 Mon Sep 17 00:00:00 2001
From: bhavin <techbhavin@gmail.com>
Date: Wed, 5 May 2021 11:53:59 +0530
Subject: [PATCH 17/76] fix: set date picker calendar popover position to
 bottom

---
 .../components/designSystems/blueprint/DatePickerComponent2.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
index 13f2aaf2e5..3fd16fe5e7 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
@@ -150,6 +150,7 @@ class DatePickerComponent extends React.Component<
               onChange={this.onDateSelected}
               parseDate={this.parseDate}
               placeholder={"Select Date"}
+              popoverProps={{ position: "bottom" }}
               showActionsBar
               timePrecision={TimePrecision.MINUTE}
               value={value}

From e96fa63f6d97910f0b1c349d5049b3ece6c4f3f9 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Wed, 5 May 2021 12:39:15 +0530
Subject: [PATCH 18/76] Disable client side search when server side search is
 enabled in table widget

---
 app/client/src/widgets/TableWidget/derived.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/client/src/widgets/TableWidget/derived.js b/app/client/src/widgets/TableWidget/derived.js
index 1d5a39e4fe..77fb93e56d 100644
--- a/app/client/src/widgets/TableWidget/derived.js
+++ b/app/client/src/widgets/TableWidget/derived.js
@@ -360,7 +360,10 @@ export default {
       },
     };
 
-    const searchKey = props.searchText ? props.searchText.toLowerCase() : "";
+    const searchKey =
+      props.searchText && !props.onSearchTextChanged
+        ? props.searchText.toLowerCase()
+        : "";
 
     const finalTableData = sortedTableData.filter((item) => {
       const searchFound = searchKey

From 9fc5770d7209c893d5b63c2674da34b03eb00339 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Wed, 5 May 2021 18:31:11 +0530
Subject: [PATCH 19/76] - Refactor the Cell render function and change it into
 a class property. - Remove unsed hook.

---
 .../appsmith/TableComponent/index.tsx         |   9 +-
 app/client/src/utils/hooks/usePrevious.tsx    |   9 --
 app/client/src/widgets/TableWidget/index.tsx  | 101 +++++++++---------
 3 files changed, 56 insertions(+), 63 deletions(-)
 delete mode 100644 app/client/src/utils/hooks/usePrevious.tsx

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index 7a3428d089..defd25ed7d 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -1,14 +1,13 @@
-import React, { useEffect, useMemo } from "react";
-import Table from "components/designSystems/appsmith/TableComponent/Table";
 import {
   ColumnTypes,
   CompactMode,
   ReactTableColumnProps,
   ReactTableFilter,
 } from "components/designSystems/appsmith/TableComponent/Constants";
+import Table from "components/designSystems/appsmith/TableComponent/Table";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import usePrevious from "utils/hooks/usePrevious";
 import _ from "lodash";
+import React, { useEffect, useMemo } from "react";
 
 export interface ColumnMenuOptionProps {
   content: string | JSX.Element;
@@ -286,8 +285,6 @@ export default React.memo(ReactTableComponent, (prev, next) => {
     prev.widgetName === next.widgetName &&
     prev.width === next.width &&
     _.isEqual(prev.tableData, next.tableData) &&
-    // TODO(Satish) // Check why _.isEqual is not working as expected
-    (JSON.stringify(prev.columns) === JSON.stringify(next.columns) ||
-      _.isEqual(prev.columns, next.columns))
+    _.isEqual(prev.columns, next.columns)
   );
 });
diff --git a/app/client/src/utils/hooks/usePrevious.tsx b/app/client/src/utils/hooks/usePrevious.tsx
deleted file mode 100644
index a883f87a27..0000000000
--- a/app/client/src/utils/hooks/usePrevious.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useRef, useEffect } from "react";
-
-export default function usePrevious(value: any) {
-  const ref = useRef(value);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index 434e7b89d2..a7a383b509 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -124,6 +124,58 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return cellProperties;
   };
 
+  cellRenderer = (props: any) => {
+    const allColumnProperties = this.props.tableColumns || [];
+    const index = props.column.columnProperties.index;
+    const columnProperties = allColumnProperties[index];
+    const isHidden = !columnProperties.isVisible;
+    const { componentWidth } = this.getComponentDimensions();
+
+    let rowIndex: number = props.cell.row.index;
+    const data = this.props.filteredTableData[rowIndex];
+    if (data && data.__originalIndex__) rowIndex = data.__originalIndex__;
+
+    const cellProperties = this.getCellProperties(columnProperties, rowIndex);
+    if (columnProperties.columnType === "button") {
+      const buttonProps = {
+        isSelected: !!props.row.isSelected,
+        onCommandClick: (action: string, onComplete: () => void) =>
+          this.onCommandClick(rowIndex, action, onComplete),
+        backgroundColor: cellProperties.buttonStyle || "rgb(3, 179, 101)",
+        buttonLabelColor: cellProperties.buttonLabelColor || "#FFFFFF",
+        columnActions: [
+          {
+            id: columnProperties.id,
+            label: cellProperties.buttonLabel || "Action",
+            dynamicTrigger: columnProperties.onClick || "",
+          },
+        ],
+      };
+      return renderActions(buttonProps, isHidden, cellProperties);
+    } else if (columnProperties.columnType === "dropdown") {
+      let options = [];
+      try {
+        options = JSON.parse(columnProperties.dropdownOptions || "");
+      } catch (e) {}
+      return renderDropdown({
+        options: options,
+        onItemSelect: this.onItemSelect,
+        onOptionChange: columnProperties.onOptionChange || "",
+        selectedIndex: isNumber(props.cell.value)
+          ? props.cell.value
+          : undefined,
+      });
+    } else {
+      return renderCell(
+        props.cell.value,
+        columnProperties.columnType,
+        isHidden,
+        cellProperties,
+        componentWidth,
+      );
+    }
+  };
+
   getTableColumns = () => {
     let columns: ReactTableColumnProps[] = [];
     const hiddenColumns: ReactTableColumnProps[] = [];
@@ -160,54 +212,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           inputFormat: columnProperties?.inputFormat || "",
         },
         columnProperties: columnProperties,
-        Cell: (props: any) => {
-          let rowIndex: number = props.cell.row.index;
-          const data = this.props.filteredTableData[rowIndex];
-          if (data && data.__originalIndex__) rowIndex = data.__originalIndex__;
-
-          const cellProperties = this.getCellProperties(
-            columnProperties,
-            rowIndex,
-          );
-          if (columnProperties.columnType === "button") {
-            const buttonProps = {
-              isSelected: !!props.row.isSelected,
-              onCommandClick: (action: string, onComplete: () => void) =>
-                this.onCommandClick(rowIndex, action, onComplete),
-              backgroundColor: cellProperties.buttonStyle || "rgb(3, 179, 101)",
-              buttonLabelColor: cellProperties.buttonLabelColor || "#FFFFFF",
-              columnActions: [
-                {
-                  id: columnProperties.id,
-                  label: cellProperties.buttonLabel || "Action",
-                  dynamicTrigger: columnProperties.onClick || "",
-                },
-              ],
-            };
-            return renderActions(buttonProps, isHidden, cellProperties);
-          } else if (columnProperties.columnType === "dropdown") {
-            let options = [];
-            try {
-              options = JSON.parse(columnProperties.dropdownOptions || "");
-            } catch (e) {}
-            return renderDropdown({
-              options: options,
-              onItemSelect: this.onItemSelect,
-              onOptionChange: columnProperties.onOptionChange || "",
-              selectedIndex: isNumber(props.cell.value)
-                ? props.cell.value
-                : undefined,
-            });
-          } else {
-            return renderCell(
-              props.cell.value,
-              columnProperties.columnType,
-              isHidden,
-              cellProperties,
-              componentWidth,
-            );
-          }
-        },
+        Cell: this.cellRenderer,
       };
       if (isHidden) {
         columnData.isHidden = true;

From 575a9cf120900c3a73a05352bc5e9cd29733a5fe Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi.nair93@gmail.com>
Date: Wed, 5 May 2021 11:43:47 +0530
Subject: [PATCH 20/76] Resetting cypress in CI

---
 .github/workflows/client-test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/client-test.yml b/.github/workflows/client-test.yml
index f75b3a7112..e55457c5d2 100644
--- a/.github/workflows/client-test.yml
+++ b/.github/workflows/client-test.yml
@@ -296,7 +296,7 @@ jobs:
       - run: echo "All ui-test matrices completed"
 
   package:
-    needs: build
+    needs: ui-test
     runs-on: ubuntu-latest
     defaults:
       run:

From c81216255e6ab17c636ed53f07c930d7d0d76774 Mon Sep 17 00:00:00 2001
From: Trisha Anand <trisha@appsmith.com>
Date: Wed, 5 May 2021 16:50:59 +0530
Subject: [PATCH 21/76] In case the chart series data id starts with a number,
 it was incorrectly identified as a number instead of a string which led to
 incorrect path computed to check in binding paths (#4322)

---
 app/client/src/workers/evaluationUtils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/client/src/workers/evaluationUtils.ts b/app/client/src/workers/evaluationUtils.ts
index c11fd3c8c0..781408fbe8 100644
--- a/app/client/src/workers/evaluationUtils.ts
+++ b/app/client/src/workers/evaluationUtils.ts
@@ -57,8 +57,7 @@ export const convertPathToString = (arrPath: Array<string | number>) => {
 // Todo: improve the logic here
 // Right now NaN, Infinity, floats, everything works
 function isInt(val: string | number): boolean {
-  if (typeof val === "number") return true;
-  return !isNaN(parseInt(val));
+  return Number.isInteger(val) || (_.isString(val) && /^\d+$/.test(val));
 }
 
 // Removes the entity name from the property path

From 925448c099b028efbac52cfdb119958616dae933 Mon Sep 17 00:00:00 2001
From: Rishabh Saxena <rishabh.robben@gmail.com>
Date: Wed, 5 May 2021 16:51:15 +0530
Subject: [PATCH 22/76] Log an analytics event for cyclical dependency errors
 (#4323)

---
 app/client/src/sagas/EvaluationsSaga.ts | 8 ++++++++
 app/client/src/utils/AnalyticsUtil.tsx  | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/client/src/sagas/EvaluationsSaga.ts b/app/client/src/sagas/EvaluationsSaga.ts
index 7aef086af0..ef782826ee 100644
--- a/app/client/src/sagas/EvaluationsSaga.ts
+++ b/app/client/src/sagas/EvaluationsSaga.ts
@@ -40,6 +40,7 @@ import {
 } from "constants/messages";
 import AppsmithConsole from "utils/AppsmithConsole";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 let widgetTypeConfigMap: WidgetTypeConfigMap;
 
@@ -66,6 +67,13 @@ const evalErrorHandler = (errors: EvalError[]) => {
             // Level is warning because it could be a user error
             level: Sentry.Severity.Warning,
           });
+          // Log an analytics event for cyclical dep errors
+          AnalyticsUtil.logEvent("CYCLICAL_DEPENDENCY_ERROR", {
+            node,
+            entityType,
+            // Level is warning because it could be a user error
+            level: Sentry.Severity.Warning,
+          });
         }
 
         break;
diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
index d23b1505bd..534208b675 100644
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@@ -119,7 +119,8 @@ export type EventName =
   | "DEBUGGER_TAB_SWITCH"
   | "DEBUGGER_ENTITY_NAVIGATION"
   | "GSHEET_AUTH_INIT"
-  | "GSHEET_AUTH_COMPLETE";
+  | "GSHEET_AUTH_COMPLETE"
+  | "CYCLICAL_DEPENDENCY_ERROR";
 
 function getApplicationId(location: Location) {
   const pathSplit = location.pathname.split("/");

From f30e4e4ad2c82e0dc753bd4b4f310432caf16512 Mon Sep 17 00:00:00 2001
From: Trisha Anand <trisha@appsmith.com>
Date: Wed, 5 May 2021 17:55:39 +0530
Subject: [PATCH 23/76] During updateDependencyMap, when dependencies are
 getting added for a path, only add if the dependency is not a parent of the
 path. (#4315)

* During updateDependencyMap, when dependencies are getting added for a path, only add if the dependency is not a parent of the path.

* To avoid catching all cyclical dependencies, only handling catching incorrect action dependencies when the dependency paths dont yet exist.

* Revert "To avoid catching all cyclical dependencies, only handling catching incorrect action dependencies when the dependency paths dont yet exist."

This reverts commit c494932289e33287074c56844fbf76c8418875af.

* Disabling cypress test which asserts cyclical errors when depending on yourself
---
 .../DisplayWidgets/Text_spec.js               | 54 +++++++++----------
 app/client/src/workers/DataTreeEvaluator.ts   | 29 +++++++---
 2 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Text_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Text_spec.js
index cf610c78f5..2732da5b7c 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Text_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Text_spec.js
@@ -61,33 +61,33 @@ describe("Text Widget Functionality", function() {
       .should("have.css", "font-size", "18px");
   });
 
-  it("Text widget depends on itself", function() {
-    cy.getCodeMirror().then(($cm) => {
-      if ($cm.val() !== "") {
-        cy.get(".CodeMirror textarea")
-          .first()
-          .clear({
-            force: true,
-          });
-      }
-
-      cy.get(".CodeMirror textarea")
-        .first()
-        .type(`{{${this.data.TextName}}}`, {
-          force: true,
-          parseSpecialCharSequences: false,
-        });
-    });
-    cy.get(commonlocators.toastBody)
-      .first()
-      .contains("Cyclic");
-
-    cy.PublishtheApp();
-    cy.get(commonlocators.bodyTextStyle).should(
-      "have.text",
-      `{{${this.data.TextName}}}`,
-    );
-  });
+  // it("Text widget depends on itself", function() {
+  //   cy.getCodeMirror().then(($cm) => {
+  //     if ($cm.val() !== "") {
+  //       cy.get(".CodeMirror textarea")
+  //         .first()
+  //         .clear({
+  //           force: true,
+  //         });
+  //     }
+  //
+  //     cy.get(".CodeMirror textarea")
+  //       .first()
+  //       .type(`{{${this.data.TextName}}}`, {
+  //         force: true,
+  //         parseSpecialCharSequences: false,
+  //       });
+  //   });
+  //   cy.get(commonlocators.toastBody)
+  //     .first()
+  //     .contains("Cyclic");
+  //
+  //   cy.PublishtheApp();
+  //   cy.get(commonlocators.bodyTextStyle).should(
+  //     "have.text",
+  //     `{{${this.data.TextName}}}`,
+  //   );
+  // });
 
   afterEach(() => {
     cy.get(publishPage.backToEditor).click({ force: true });
diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index 389c7a7dfd..767815b367 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -305,7 +305,7 @@ export default class DataTreeEvaluator {
     Object.keys(dependencyMap).forEach((key) => {
       dependencyMap[key] = _.flatten(
         dependencyMap[key].map((path) =>
-          extractReferencesFromBinding(path, this.allKeys),
+          extractReferencesFromBinding(key, path, this.allKeys),
         ),
       );
     });
@@ -405,7 +405,6 @@ export default class DataTreeEvaluator {
             evalPropertyValue = unEvalPropertyValue;
           }
 
-          // debugger;
           if (isWidget(entity)) {
             const widgetEntity = entity;
             const defaultPropertyMap = this.widgetConfigMap[widgetEntity.type]
@@ -891,7 +890,7 @@ export default class DataTreeEvaluator {
         this.dependencyMap[key] = _.uniq(
           _.flatten(
             this.dependencyMap[key].map((path) =>
-              extractReferencesFromBinding(path, this.allKeys),
+              extractReferencesFromBinding(key, path, this.allKeys),
             ),
           ),
         );
@@ -1028,7 +1027,7 @@ export default class DataTreeEvaluator {
           const propertyBindings = entityPropertyBindings[path];
           const references = _.flatten(
             propertyBindings.map((binding) =>
-              extractReferencesFromBinding(binding, this.allKeys),
+              extractReferencesFromBinding(path, binding, this.allKeys),
             ),
           );
           references.forEach((value) => {
@@ -1091,14 +1090,17 @@ export default class DataTreeEvaluator {
 
 const extractReferencesFromBinding = (
   path: string,
+  dependentPath: string,
   all: Record<string, true>,
 ): Array<string> => {
   const subDeps: Array<string> = [];
-  const identifiers = path.match(/[a-zA-Z_$][a-zA-Z_$0-9.\[\]]*/g) || [path];
+  const identifiers = dependentPath.match(/[a-zA-Z_$][a-zA-Z_$0-9.\[\]]*/g) || [
+    dependentPath,
+  ];
   identifiers.forEach((identifier: string) => {
     // If the identifier exists directly, add it and return
     if (all.hasOwnProperty(identifier)) {
-      subDeps.push(identifier);
+      pushDependentsInSubDependencyArray(subDeps, path, identifier);
       return;
     }
     const subpaths = _.toPath(identifier);
@@ -1111,7 +1113,7 @@ const extractReferencesFromBinding = (
       current = convertPathToString(subpaths);
       // We've found the dep, add it and return
       if (all.hasOwnProperty(current)) {
-        subDeps.push(current);
+        pushDependentsInSubDependencyArray(subDeps, path, current);
         return;
       }
       subpaths.pop();
@@ -1120,6 +1122,19 @@ const extractReferencesFromBinding = (
   return _.uniq(subDeps);
 };
 
+const pushDependentsInSubDependencyArray = (
+  subDeps: string[],
+  path: string,
+  dependentPath: string,
+): string[] => {
+  // Only add if path is not a child of dependentPath which ensures that cyclical dependency is not introduced
+  // when adding parent-child relationships later
+  if (!isChildPropertyPath(dependentPath, path)) {
+    subDeps.push(dependentPath);
+  }
+  return subDeps;
+};
+
 // TODO cryptic comment below. Dont know if we still need this. Duplicate function
 // referencing DATA_BIND_REGEX fails for the value "{{Table1.tableData[Table1.selectedRowIndex]}}" if you run it multiple times and don't recreate
 const isDynamicValue = (value: string): boolean => DATA_BIND_REGEX.test(value);

From f193ff4a2124808c998efeecc15a0a86ba0cce55 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Thu, 6 May 2021 12:01:39 +0530
Subject: [PATCH 24/76] - Remove the accidental recursive funciton call in
 tablewidget

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

diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index a7a383b509..a3ed198da7 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -615,7 +615,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     };
   };
 
-  disableDrag = (disable: boolean) => {
+  toggleDrag = (disable: boolean) => {
     this.disableDrag(disable);
   };
 
@@ -632,7 +632,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           columnSizeMap={this.props.columnSizeMap}
           columns={tableColumns}
           compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
-          disableDrag={this.disableDrag}
+          disableDrag={this.toggleDrag}
           editMode={this.props.renderMode === RenderModes.CANVAS}
           filters={this.props.filters}
           handleReorderColumn={this.handleReorderColumn}

From a5dbb5261b0d98f8dfe4c55c96c659ac7681c0e9 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Thu, 6 May 2021 13:54:18 +0530
Subject: [PATCH 25/76] Added test case to validate onSearchTextChange function
 if configured in table widget

---
 app/client/cypress/fixtures/tableWidgetDsl.json     |  6 +++++-
 .../ClientSideTests/Binding/Bind_tableApi_spec.js   | 13 +++++++++++++
 app/client/cypress/locators/Widgets.json            |  2 ++
 .../designSystems/appsmith/SearchComponent.tsx      |  1 +
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/client/cypress/fixtures/tableWidgetDsl.json b/app/client/cypress/fixtures/tableWidgetDsl.json
index 349f604903..9929225f5e 100644
--- a/app/client/cypress/fixtures/tableWidgetDsl.json
+++ b/app/client/cypress/fixtures/tableWidgetDsl.json
@@ -67,7 +67,11 @@
                 "bottomRow": 10,
                 "parentId": "tyiwk4xuq0",
                 "widgetId": "5up3r2iuvs",
-                "dynamicBindingPathList": []
+                "dynamicTriggerPathList": [{
+                  "key": "onSearchTextChanged"
+                }],
+                "onSearchTextChanged": "{{Api1.run()}}",
+                "selectedRow": "{{Table1.tableData[Table1.selectedRowIndex]}}"
               }
             ],
             "widgetId": "tyiwk4xuq0",
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_tableApi_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_tableApi_spec.js
index d65d22e80d..fb8eeb6b6e 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_tableApi_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_tableApi_spec.js
@@ -3,6 +3,7 @@ const dsl = require("../../../../fixtures/tableWidgetDsl.json");
 const pages = require("../../../../locators/Pages.json");
 const apiPage = require("../../../../locators/ApiEditor.json");
 const publishPage = require("../../../../locators/publishWidgetspage.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
 
 describe("Test Create Api and Bind to Table widget", function() {
   let apiData;
@@ -43,6 +44,18 @@ describe("Test Create Api and Bind to Table widget", function() {
     cy.readTabledataPublish("0", "1").then((tabData) => {
       expect(apiData).to.eq(`\"${tabData}\"`);
     });
+    cy.get(commonlocators.backToEditor).click();
+  });
+
+  it("Validate onSearchTextChanged function is called when configured for search text", function() {
+    cy.SearchEntityandOpen("Table1");
+    cy.get(".t--widget-tablewidget .t--search-input")
+      .first()
+      .type("Currey");
+    cy.wait(5000);
+    cy.readTabledataPublish("0", "1").then((tabData) => {
+      expect(apiData).to.eq(`\"${tabData}\"`);
+    });
   });
 
   afterEach(() => {
diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json
index 3e67eecebb..514ff56cc2 100644
--- a/app/client/cypress/locators/Widgets.json
+++ b/app/client/cypress/locators/Widgets.json
@@ -38,6 +38,8 @@
     "textInputval": ".t--draggable-textwidget span.t--widget-name",
     "textCenterAlign": ".t--property-control-textalign .t--icon-tab-CENTER",
     "ColumnAction": ".t--property-control-rowbutton button",
+    "SearchTextChangeAction": ".t--property-control-onsearchtextchanged button",
+    "tableSearchTextChangeSelected": ".t--property-control-onsearchtextchanged",
     "videoWidget": ".t--draggable-videowidget",
     "autoPlay": ".t--property-control-autoplay > .bp3-control > .bp3-control-indicator",
     "defaultOption": ".t--property-control-defaultoption .CodeMirror-code",
diff --git a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
index 46bfac9a87..df90ccb1a4 100644
--- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
@@ -52,6 +52,7 @@ class SearchComponent extends React.Component<
   render() {
     return (
       <SearchInputWrapper
+        className="t--search-input"
         leftIcon="search"
         onChange={this.handleSearch}
         placeholder={this.props.placeholder}

From c7fa504d5cbdcbe17528e84657a5a094b30b24b2 Mon Sep 17 00:00:00 2001
From: Confidence Okoghenun <cokoghenun@gmail.com>
Date: Sun, 9 May 2021 05:14:20 +0100
Subject: [PATCH 26/76] docs: Updates server readme.md (#4375)

---
 app/server/README.md | 31 ++-----------------------------
 1 file changed, 2 insertions(+), 29 deletions(-)

diff --git a/app/server/README.md b/app/server/README.md
index d59286da54..29193833b4 100644
--- a/app/server/README.md
+++ b/app/server/README.md
@@ -2,32 +2,5 @@
 
 This is the server-side repository for the Appsmith framework.
 
-### How to build 
-```bash
-$ ./build.sh <arguments>
-```
-
-For example:
-```$bash
-$ ./build.sh -DskipTests
-```
-
-This script will perform the following steps:
-1. Compile the code
-2. Generate the jars for server & plugins
-3. Copy them into the `dist` directory
-
-### How to run
-```
-$ cd ./dist
-$ java -jar -Dspring.profiles.active=$env server-1.0-SNAPSHOT.jar
-```
-
-### How to test
-In order to test the code, you can run the following command:
-
-```
-mvn -B clean package
-```
-
-Please make sure that you have a local Redis instance running for the test cases. During tests, the MongoDB is run in-memory. So you don't require to be running a local MongoDB instance.
+## Dev Setup
+For details on setting up the server on your development machine, please refer to the [Setup Guide](https://github.com/appsmithorg/appsmith/blob/master/contributions/ServerSetup.md)

From 4c824a1214275a6298da0105d8a710e62131538c Mon Sep 17 00:00:00 2001
From: bhavin <techbhavin@gmail.com>
Date: Mon, 10 May 2021 13:14:29 +0530
Subject: [PATCH 27/76] fix: datepicker popover adjust height and width.

---
 .../designSystems/blueprint/DatePickerComponent2.tsx       | 1 -
 app/client/src/globalStyles/popover.ts                     | 7 +++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
index 3fd16fe5e7..13f2aaf2e5 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent2.tsx
@@ -150,7 +150,6 @@ class DatePickerComponent extends React.Component<
               onChange={this.onDateSelected}
               parseDate={this.parseDate}
               placeholder={"Select Date"}
-              popoverProps={{ position: "bottom" }}
               showActionsBar
               timePrecision={TimePrecision.MINUTE}
               value={value}
diff --git a/app/client/src/globalStyles/popover.ts b/app/client/src/globalStyles/popover.ts
index 82cb292a1d..1da1bde98f 100644
--- a/app/client/src/globalStyles/popover.ts
+++ b/app/client/src/globalStyles/popover.ts
@@ -5,4 +5,11 @@ export const PopoverStyles = createGlobalStyle`
   .${Classes.POPOVER} {
     box-shadow: 0px 0px 2px rgb(0 0 0 / 20%), 0px 2px 10px rgb(0 0 0 / 10%);
   }
+
+  .bp3-datepicker {
+    .DayPicker {
+      min-height: 251px !important ;
+      min-width: 233px !important ;
+    }
+  }
 `;

From 30510c56b468bf74d1775b2e2ba71c57291eee2f Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Mon, 10 May 2021 15:08:23 +0530
Subject: [PATCH 28/76] Fix download dropdown UI

---
 .../icons/control/download-data-icon.svg      |  3 +++
 .../TableComponent/TableDataDownload.tsx      | 23 +++++++++----------
 app/client/src/constants/Colors.tsx           |  1 +
 3 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 app/client/src/assets/icons/control/download-data-icon.svg

diff --git a/app/client/src/assets/icons/control/download-data-icon.svg b/app/client/src/assets/icons/control/download-data-icon.svg
new file mode 100644
index 0000000000..2045fa1fb3
--- /dev/null
+++ b/app/client/src/assets/icons/control/download-data-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.63664 2.85717L5.50677 2.85717L7.06542 2.85717L7.06542 6.59999L5.81828 6.59999L8.0001 9.34284L10.1819 6.59999L8.93555 6.59999L8.93555 2.85717L10.4938 2.85717L12.3639 2.85717C13.741 2.85717 14.8574 4.08528 14.8574 5.60003C14.8574 6.88094 14.0551 7.9486 12.9761 8.24963C12.8564 10.9733 10.8173 13.1429 8.31197 13.1429C5.83467 13.1429 3.81243 11.022 3.65223 8.34083C2.25399 8.3518 1.14313 7.10654 1.14313 5.60003C1.14313 4.08529 2.2596 2.85717 3.63664 2.85717Z" fill="#A9A7A7"/>
+</svg>
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index 29b63999f2..5c5c80f7dc 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -7,7 +7,7 @@ import {
 } from "@blueprintjs/core";
 import { IconWrapper } from "constants/IconConstants";
 import { Colors } from "constants/Colors";
-import { ReactComponent as DownloadIcon } from "assets/icons/control/download-table.svg";
+import { ReactComponent as DownloadIcon } from "assets/icons/control/download-data-icon.svg";
 import { ReactTableColumnProps } from "components/designSystems/appsmith/TableComponent/Constants";
 import { TableIconWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
 import TableActionIcon from "components/designSystems/appsmith/TableComponent/TableActionIcon";
@@ -21,33 +21,32 @@ const DropDownWrapper = styled.div`
   background: white;
   z-index: 1;
   border-radius: 4px;
-  border: 1px solid ${Colors.ATHENS_GRAY};
-  padding: 8px;
+  box-shadow: 0px 12px 28px -8px rgba(0, 0, 0, 0.1);
+  padding: 0;
 `;
 
 const OptionWrapper = styled.div`
   display: flex;
-  width: calc(100% - 20px);
+  width: 100%;
   justify-content: space-between;
   align-items: center;
   height: 32px;
   box-sizing: border-box;
-  padding: 8px;
-  color: ${Colors.OXFORD_BLUE};
-  opacity: 0.7;
+  padding: 6px 12px;
+  color: ${Colors.CHARCOAL};
   min-width: 200px;
   cursor: pointer;
-  margin-bottom: 4px;
   background: ${Colors.WHITE};
   border-left: none;
-  border-radius: 4px;
+  border-radius: none;
   .option-title {
     font-weight: 500;
-    font-size: 14px;
-    line-height: 24px;
+    font-size: 13px;
+    line-height: 20px;
   }
   &:hover {
-    background: ${Colors.POLAR};
+    background: ${Colors.SEA_SHELL};
+    color: ${Colors.CODE_GRAY};
   }
 `;
 interface TableDataDownloadProps {
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index b3e9bbe418..55b7efec2c 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -75,6 +75,7 @@ export const Colors: Record<string, string> = {
   Galliano: "#E0B30E",
   ROYAL_BLUE: "#457AE6",
   ALTO2: "#E0DEDE",
+  SEA_SHELL: "#F1F1F1",
 };
 
 export type Color = typeof Colors[keyof typeof Colors];

From 9ab8da4671e2e689dcfb94e91d84653156af11cf Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Mon, 10 May 2021 16:54:50 +0530
Subject: [PATCH 29/76] Table header style changes

---
 .../assets/icons/control/download-table.svg   |  1 -
 .../src/assets/icons/control/filter-icon.svg  |  4 +-
 .../appsmith/SearchComponent.tsx              |  6 +-
 .../appsmith/TableComponent/TableAction.tsx   | 61 +++++++++++++++++++
 .../TableComponent/TableActionIcon.tsx        |  2 +-
 .../TableComponent/TableDataDownload.tsx      | 12 ++--
 .../appsmith/TableComponent/TableFilters.tsx  |  8 +--
 .../appsmith/TableComponent/TableHeader.tsx   | 11 ++--
 .../TableComponent/TableStyledWrappers.tsx    | 10 ++-
 app/client/src/constants/Colors.tsx           |  5 +-
 10 files changed, 95 insertions(+), 25 deletions(-)
 delete mode 100755 app/client/src/assets/icons/control/download-table.svg
 mode change 100755 => 100644 app/client/src/assets/icons/control/filter-icon.svg
 create mode 100644 app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx

diff --git a/app/client/src/assets/icons/control/download-table.svg b/app/client/src/assets/icons/control/download-table.svg
deleted file mode 100755
index 129ee6b5ad..0000000000
--- a/app/client/src/assets/icons/control/download-table.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><g><path fill="#2E3D49" d="M16.125 8.36658C15.5583 5.49158 13.0333 3.33325 10 3.33325C7.59167 3.33325 5.5 4.69992 4.45833 6.69992C1.95 6.96658 0 9.09158 0 11.6666C0 14.4249 2.24167 16.6666 5 16.6666H15.8333C18.1333 16.6666 20 14.7999 20 12.4999C20 10.2999 18.2917 8.51658 16.125 8.36658ZM14.1667 10.8333L10 14.9999L5.83333 10.8333H8.33333V7.49992H11.6667V10.8333H14.1667Z"/></g></svg>
\ No newline at end of file
diff --git a/app/client/src/assets/icons/control/filter-icon.svg b/app/client/src/assets/icons/control/filter-icon.svg
old mode 100755
new mode 100644
index 1723d3efe8..e5a827016e
--- a/app/client/src/assets/icons/control/filter-icon.svg
+++ b/app/client/src/assets/icons/control/filter-icon.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><g><path fill="#2E3D49" d="M11.6014 16C11.4571 16 11.3168 15.9532 11.2014 15.8667L8.53472 13.8333C8.45315 13.7705 8.38723 13.6897 8.34212 13.5972C8.29701 13.5047 8.27394 13.4029 8.27472 13.3V11.12L5.07472 4.97333C5.02202 4.87161 4.99642 4.75802 5.0004 4.64352C5.00438 4.52903 5.0378 4.41749 5.09743 4.31966C5.15706 4.22184 5.24089 4.14104 5.34084 4.08504C5.4408 4.02905 5.55349 3.99976 5.66805 4H15.0014C15.1171 4.00002 15.2308 4.03015 15.3313 4.08743C15.4318 4.1447 15.5157 4.22715 15.5747 4.32667C15.6332 4.42801 15.664 4.54298 15.664 4.66C15.664 4.77703 15.6332 4.89199 15.5747 4.99333L12.2414 11.1333V15.3333C12.2423 15.4576 12.2084 15.5796 12.1436 15.6856C12.0788 15.7916 11.9857 15.8774 11.8747 15.9333C11.7894 15.9747 11.6962 15.9975 11.6014 16Z"/></g></svg>
\ No newline at end of file
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.6 2.40002C4.48366 2.40002 5.2 3.11637 5.2 4.00002C5.2 4.88368 4.48366 5.60002 3.6 5.60002C2.71634 5.60002 2 4.88368 2 4.00002C2 3.11637 2.71634 2.40002 3.6 2.40002ZM6.12187 4C6.12187 3.64281 6 3.28 6 3.28H14V4.72L6 4.7144C6 4.7144 6.12187 4.3572 6.12187 4ZM10 7.28C10 7.28 9.87813 7.64281 9.87813 8C9.87813 8.3572 10 8.7144 10 8.7144L2 8.72001V7.28H10ZM12.4 6.40002C11.5163 6.40002 10.8 7.11637 10.8 8.00002C10.8 8.88368 11.5163 9.60002 12.4 9.60002C13.2837 9.60002 14 8.88368 14 8.00002C14 7.11637 13.2837 6.40002 12.4 6.40002ZM6 11.28C6 11.28 6.12187 11.6428 6.12187 12C6.12187 12.3572 6 12.7144 6 12.7144L14 12.72V11.28H6ZM3.6 10.4C4.48366 10.4 5.2 11.1164 5.2 12C5.2 12.8837 4.48366 13.6 3.6 13.6C2.71634 13.6 2 12.8837 2 12C2 11.1164 2.71634 10.4 3.6 10.4Z" fill="#A9A7A7"/>
+</svg>
diff --git a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
index 46bfac9a87..61fc672d05 100644
--- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { InputGroup } from "@blueprintjs/core";
 import { debounce } from "lodash";
+import { Colors } from "constants/Colors";
 
 interface SearchProps {
   onSearch: (value: any) => void;
@@ -13,9 +14,12 @@ const SearchInputWrapper = styled(InputGroup)`
   &&& input {
     box-shadow: none;
     font-size: 12px;
+    color: ${Colors.SILVER_CHALICE};
   }
   &&& svg {
-    opacity: 0.6;
+    path {
+      fill: ${Colors.SILVER_CHALICE};
+    }
   }
   margin: 5px 16px;
   width: 250px;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx
new file mode 100644
index 0000000000..b4733bf2e5
--- /dev/null
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { IconWrapper } from "constants/IconConstants";
+import { Colors } from "constants/Colors";
+import styled from "styled-components";
+
+interface TableActionProps {
+  selected: boolean;
+  selectMenu: (selected: boolean) => void;
+  className: string;
+  title: string;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export const TableIconWrapper = styled.div<{
+  selected?: boolean;
+  disabled?: boolean;
+}>`
+  background: ${(props) => (props.selected ? Colors.Gallery : "transparent")};
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${(props) => (props.disabled ? 0.6 : 1)};
+  cursor: ${(props) => !props.disabled && "pointer"};
+  color: ${(props) => (props.selected ? Colors.CODE_GRAY : Colors.GRAY)};
+  .action-title {
+    margin-left: 4px;
+  }
+  position: relative;
+  margin-left: 5px;
+  padding: 0 5px;
+  &:hover {
+    background: ${Colors.ATHENS_GRAY};
+  }
+`;
+
+function TableAction(props: TableActionProps) {
+  return (
+    <TableIconWrapper
+      className={props.className}
+      onClick={(e) => {
+        props.selectMenu(!props.selected);
+        e.stopPropagation();
+      }}
+      selected={props.selected}
+    >
+      <IconWrapper
+        color={props.selected ? Colors.CODE_GRAY : Colors.GRAY}
+        height={20}
+        width={20}
+      >
+        {props.children}
+      </IconWrapper>
+      <span className="action-title">{props.title}</span>
+      {props.icon ? props.icon : null}
+    </TableIconWrapper>
+  );
+}
+
+export default TableAction;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
index d59cdacf23..63899aacec 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
@@ -34,7 +34,7 @@ function TableActionIcon(props: TableActionIconProps) {
         selected={props.selected}
       >
         <IconWrapper
-          color={props.selected ? Colors.OXFORD_BLUE : Colors.CADET_BLUE}
+          color={props.selected ? Colors.CODE_GRAY : Colors.GRAY}
           height={20}
           width={20}
         >
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index 5c5c80f7dc..71bbd73b33 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -9,8 +9,9 @@ import { IconWrapper } from "constants/IconConstants";
 import { Colors } from "constants/Colors";
 import { ReactComponent as DownloadIcon } from "assets/icons/control/download-data-icon.svg";
 import { ReactTableColumnProps } from "components/designSystems/appsmith/TableComponent/Constants";
-import { TableIconWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
-import TableActionIcon from "components/designSystems/appsmith/TableComponent/TableActionIcon";
+import TableAction, {
+  TableIconWrapper,
+} from "components/designSystems/appsmith/TableComponent/TableAction";
 import styled from "styled-components";
 import { transformTableDataIntoCsv } from "./CommonUtilities";
 import zipcelx from "zipcelx";
@@ -178,6 +179,7 @@ function TableDataDownload(props: TableDataDownloadProps) {
         <IconWrapper color={Colors.CADET_BLUE} height={20} width={20}>
           <DownloadIcon />
         </IconWrapper>
+        <span className="action-title">Download</span>
       </TableIconWrapper>
     );
   }
@@ -192,16 +194,16 @@ function TableDataDownload(props: TableDataDownloadProps) {
       }}
       position={Position.BOTTOM}
     >
-      <TableActionIcon
+      <TableAction
         className="t--table-download-btn"
         selectMenu={(selected: boolean) => {
           selectMenu(selected);
         }}
         selected={selected}
-        tooltip="Download"
+        title="Download"
       >
         <DownloadIcon />
-      </TableActionIcon>
+      </TableAction>
       <DropDownWrapper>
         {dowloadOptions.map((item: DownloadOptionProps, index: number) => {
           return (
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx
index 145ace9fe5..5347f5235f 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableFilters.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as FilterIcon } from "assets/icons/control/filter-icon.s
 import { TableIconWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
 import Button from "components/editorComponents/Button";
 import CascadeFields from "components/designSystems/appsmith/TableComponent/CascadeFields";
-import TableActionIcon from "components/designSystems/appsmith/TableComponent/TableActionIcon";
+import TableAction from "components/designSystems/appsmith/TableComponent/TableAction";
 import {
   ReactTableColumnProps,
   Condition,
@@ -173,7 +173,7 @@ function TableFilters(props: TableFilterProps) {
       position={Position.BOTTOM}
       usePortal
     >
-      <TableActionIcon
+      <TableAction
         className="t--table-filter-toggle-btn"
         icon={
           hasAnyFilters ? (
@@ -184,10 +184,10 @@ function TableFilters(props: TableFilterProps) {
           selectMenu(selected);
         }}
         selected={selected}
-        tooltip="Filters"
+        title="Filters"
       >
         <FilterIcon />
-      </TableActionIcon>
+      </TableAction>
       <TableFilterOuterWrapper>
         <TableFilerWrapper onClick={(e) => e.stopPropagation()}>
           {filters.map((filter: ReactTableFilter, index: number) => {
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
index 8c5ae271c1..0c7e5ffc34 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableHeader.tsx
@@ -25,11 +25,11 @@ import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
 const PageNumberInputWrapper = styled(NumericInput)`
   &&& input {
     box-shadow: none;
+    border: 1px solid ${Colors.DANUBE};
     background: linear-gradient(0deg, ${Colors.WHITE}, ${Colors.WHITE}),
       ${Colors.POLAR};
-    border: 1px solid ${Colors.GREEN};
+    border-radius: none;
     box-sizing: border-box;
-    border-radius: 4px;
     width: 24px;
     height: 24px;
     line-height: 24px;
@@ -37,6 +37,9 @@ const PageNumberInputWrapper = styled(NumericInput)`
     text-align: center;
     font-size: 12px;
   }
+  &&&.bp3-control-group > :only-child {
+    border-radius: 0;
+  }
   margin: 0 8px;
 `;
 
@@ -173,7 +176,7 @@ function TableHeader(props: TableHeaderProps) {
               props.updatePageNo(pageNo + 1, EventType.ON_PREV_PAGE);
             }}
           >
-            <Icon color={Colors.HIT_GRAY} icon="chevron-left" iconSize={16} />
+            <Icon color={Colors.GRAY} icon="chevron-left" iconSize={16} />
           </PaginationItemWrapper>
           <RowWrapper>
             Page{" "}
@@ -196,7 +199,7 @@ function TableHeader(props: TableHeaderProps) {
               props.updatePageNo(pageNo + 1, EventType.ON_NEXT_PAGE);
             }}
           >
-            <Icon color={Colors.HIT_GRAY} icon="chevron-right" iconSize={16} />
+            <Icon color={Colors.GRAY} icon="chevron-right" iconSize={16} />
           </PaginationItemWrapper>
         </PaginationWrapper>
       )}
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
index e516d2d432..25cc63fcd1 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
@@ -232,18 +232,16 @@ export const PaginationWrapper = styled.div`
   justify-content: flex-end;
   align-items: center;
   padding: 8px 20px;
+  color: ${Colors.GRAY};
 `;
 
 export const PaginationItemWrapper = styled.div<{
   disabled?: boolean;
   selected?: boolean;
 }>`
-  background: ${(props) =>
-    props.disabled ? Colors.ATHENS_GRAY : Colors.WHITE};
-  border: 1px solid
-    ${(props) => (props.selected ? Colors.GREEN : Colors.GEYSER_LIGHT)};
+  background: ${(props) => (props.disabled ? Colors.MERCURY : Colors.WHITE)};
+  border: 1px solid ${Colors.ALTO2};
   box-sizing: border-box;
-  border-radius: 4px;
   width: 24px;
   height: 24px;
   display: flex;
@@ -477,7 +475,7 @@ export const RowWrapper = styled.div`
   justify-content: center;
   font-size: 12px;
   line-height: 20px;
-  color: ${Colors.THUNDER};
+  color: ${Colors.GRAY};
   margin: 0 4px;
   white-space: nowrap;
 `;
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index 55b7efec2c..0099b1ee0f 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -29,7 +29,7 @@ export const Colors: Record<string, string> = {
   TUNDORA: "#404040",
   DOVE_GRAY: "#6D6D6D",
   SLATE_GRAY: "#768896",
-  SILVER_CHALICE: "#9F9F9F",
+  SILVER_CHALICE: "#A9A7A7",
   PORCELAIN: "#EBEEF0",
   HIT_GRAY: "#A1ACB3",
   JUNGLE_MIST: "#BCCCD9",
@@ -61,7 +61,7 @@ export const Colors: Record<string, string> = {
   TROUT_DARK: "#535B62",
   ALABASTER: "#F9F8F8",
   WATUSI: "#FFE0D2",
-  GRAY: "#828282",
+  GRAY: "#858282",
   ATHENS_GRAY_DARKER: "#F8F9FA",
   POMEGRANATE: "#F44336",
   RIVER_BED: "#4A545B",
@@ -76,6 +76,7 @@ export const Colors: Record<string, string> = {
   ROYAL_BLUE: "#457AE6",
   ALTO2: "#E0DEDE",
   SEA_SHELL: "#F1F1F1",
+  DANUBE: "#6A86CE",
 };
 
 export type Color = typeof Colors[keyof typeof Colors];

From f14ca6b6c3c5f35bea82dbc5537eccc206321725 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Mon, 10 May 2021 17:04:17 +0530
Subject: [PATCH 30/76] Hide sub icon

---
 .../designSystems/appsmith/TableComponent/TableActionIcon.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
index 63899aacec..46622d072e 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
@@ -40,7 +40,7 @@ function TableActionIcon(props: TableActionIconProps) {
         >
           {props.children}
         </IconWrapper>
-        {props.icon ? props.icon : null}
+        {/* {props.icon ? props.icon : null} */}
       </TableIconWrapper>
     </Tooltip>
   );

From 78bad85e244fd0ae92b92ae5e929c0715e34d7b0 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Tue, 11 May 2021 12:10:13 +0530
Subject: [PATCH 31/76] Used useCallBack hook and remove inline arrow function

---
 .../appsmith/TableComponent/TableAction.tsx       | 15 +++++++++------
 .../appsmith/TableComponent/TableActionIcon.tsx   |  1 -
 .../appsmith/TableComponent/TableDataDownload.tsx | 12 ++++++------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx
index b4733bf2e5..e3c1723f6d 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableAction.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { IconWrapper } from "constants/IconConstants";
 import { Colors } from "constants/Colors";
 import styled from "styled-components";
@@ -36,13 +36,17 @@ export const TableIconWrapper = styled.div<{
 `;
 
 function TableAction(props: TableActionProps) {
+  const handleIconClick = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      props.selectMenu(!props.selected);
+      e.stopPropagation();
+    },
+    [props.selected],
+  );
   return (
     <TableIconWrapper
       className={props.className}
-      onClick={(e) => {
-        props.selectMenu(!props.selected);
-        e.stopPropagation();
-      }}
+      onClick={handleIconClick}
       selected={props.selected}
     >
       <IconWrapper
@@ -53,7 +57,6 @@ function TableAction(props: TableActionProps) {
         {props.children}
       </IconWrapper>
       <span className="action-title">{props.title}</span>
-      {props.icon ? props.icon : null}
     </TableIconWrapper>
   );
 }
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
index 46622d072e..37b1dac601 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableActionIcon.tsx
@@ -40,7 +40,6 @@ function TableActionIcon(props: TableActionIconProps) {
         >
           {props.children}
         </IconWrapper>
-        {/* {props.icon ? props.icon : null} */}
       </TableIconWrapper>
     </Tooltip>
   );
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
index 71bbd73b33..bd195b1c2f 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
@@ -173,6 +173,10 @@ function TableDataDownload(props: TableDataDownloadProps) {
     selectMenu(false);
   };
 
+  const handleCloseMenu = () => {
+    selectMenu(false);
+  };
+
   if (props.columns.length === 0) {
     return (
       <TableIconWrapper disabled>
@@ -189,16 +193,12 @@ function TableDataDownload(props: TableDataDownloadProps) {
       interactionKind={PopoverInteractionKind.CLICK}
       isOpen={selected}
       minimal
-      onClose={() => {
-        selectMenu(false);
-      }}
+      onClose={handleCloseMenu}
       position={Position.BOTTOM}
     >
       <TableAction
         className="t--table-download-btn"
-        selectMenu={(selected: boolean) => {
-          selectMenu(selected);
-        }}
+        selectMenu={selectMenu}
         selected={selected}
         title="Download"
       >

From 68c258ab3ae551f9e52be179cc8fcc404f48a9e5 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Tue, 11 May 2021 12:25:42 +0530
Subject: [PATCH 32/76] - Remove unncessary anonymous funciton - Use
 destructured imports

---
 .../appsmith/TableComponent/index.tsx              | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index defd25ed7d..885886fee1 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -6,7 +6,7 @@ import {
 } from "components/designSystems/appsmith/TableComponent/Constants";
 import Table from "components/designSystems/appsmith/TableComponent/Table";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
-import _ from "lodash";
+import { isEqual } from "lodash";
 import React, { useEffect, useMemo } from "react";
 
 export interface ColumnMenuOptionProps {
@@ -230,14 +230,10 @@ function ReactTableComponent(props: ReactTableComponentProps) {
       handleResizeColumn={handleResizeColumn}
       height={height}
       isLoading={isLoading}
-      nextPageClick={() => {
-        nextPageClick();
-      }}
+      nextPageClick={nextPageClick}
       pageNo={pageNo - 1}
       pageSize={pageSize || 1}
-      prevPageClick={() => {
-        prevPageClick();
-      }}
+      prevPageClick={prevPageClick}
       searchKey={searchKey}
       searchTableData={searchTableData}
       selectTableRow={selectTableRow}
@@ -284,7 +280,7 @@ export default React.memo(ReactTableComponent, (prev, next) => {
     prev.widgetId === next.widgetId &&
     prev.widgetName === next.widgetName &&
     prev.width === next.width &&
-    _.isEqual(prev.tableData, next.tableData) &&
-    _.isEqual(prev.columns, next.columns)
+    isEqual(prev.tableData, next.tableData) &&
+    isEqual(prev.columns, next.columns)
   );
 });

From 38ece3fbb7fbbb12deeabaf8093c0e39ac002914 Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Fri, 7 May 2021 13:24:58 +0530
Subject: [PATCH 33/76] Added null check against datasource url (#4352)

(cherry picked from commit 45aa3c57f1d6c9f01f958b3230a5e1465e013f57)
---
 .../form/fields/EmbeddedDatasourcePathField.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
index 94ab53e795..1355fcb2e8 100644
--- a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
@@ -173,7 +173,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
               hint: () => {
                 const list = datasourceList
                   .filter((datasource) =>
-                    datasource.datasourceConfiguration.url.includes(
+                    (datasource.datasourceConfiguration?.url || "").includes(
                       parsed.datasourceUrl,
                     ),
                   )

From 4dff6e4b5c7e32ec398fd6121fd93b9c47d442b0 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan.stardust@gmail.com>
Date: Mon, 10 May 2021 15:22:17 +0530
Subject: [PATCH 34/76] Fix: Cannot read property 'label' of undefined & Cannot
 read property 'length' of undefined  (#4389)

* fix for label of undefined

* add check for data type

Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain>
(cherry picked from commit fc10625d410cb825efe36df490f87802fad2acaf)
---
 .../components/designSystems/appsmith/ChartComponent.tsx    | 6 ++++--
 .../designSystems/blueprint/DropdownComponent.tsx           | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index ca49f9b40b..43b3bf3b7b 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -185,7 +185,9 @@ class ChartComponent extends React.Component<ChartComponentProps> {
 
   getSeriesChartData = (data: ChartDataPoint[], categories: string[]) => {
     const dataMap: { [key: string]: string } = {};
-    if (data.length === 0) {
+
+    // if not array or (is array and array length is zero)
+    if (!Array.isArray(data) || (Array.isArray(data) && data.length === 0)) {
       return [
         {
           value: "",
@@ -218,7 +220,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
       const seriesChartData: Array<Record<
         string,
         unknown
-      >> = this.getSeriesChartData(item.data, categories);
+      >> = this.getSeriesChartData(get(item, "data", []), categories);
       return {
         seriesName: item.seriesName,
         data: seriesChartData,
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index f5a45770fe..3487aab4b8 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -337,7 +337,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
   };
 
   renderTag = (option: DropdownOption) => {
-    return option.label;
+    return option?.label;
   };
 
   isOptionSelected = (selectedOption: DropdownOption) => {

From bb74ba876fed517c976c3d34709aa79135959bcb Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Mon, 10 May 2021 19:39:26 +0530
Subject: [PATCH 35/76] Revert Gsheets warning modal (#4405)

(cherry picked from commit 1b98c2e520441840ebbfd76a8dc91dfd8a5576db)
---
 .../Editor/SaaSEditor/DatasourceForm.tsx      | 111 ++++--------------
 1 file changed, 22 insertions(+), 89 deletions(-)

diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index 8c2f3f01ca..6d636d0729 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -15,7 +15,6 @@ import { connect } from "react-redux";
 import { AppState } from "reducers";
 import { getDatasource, getPluginImages } from "selectors/entitiesSelector";
 import { ReduxAction } from "constants/ReduxActionConstants";
-import GSheetWarning from "assets/images/GSheet-warning.png";
 import {
   deleteDatasource,
   getOAuthAccessToken,
@@ -43,7 +42,6 @@ import {
 import { Variant } from "components/ads/common";
 import { Toaster } from "components/ads/Toast";
 import { PluginType } from "entities/Action";
-import FormDialogComponent from "components/editorComponents/form/FormDialogComponent";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 
 interface StateProps extends JSONtoFormProps {
@@ -90,21 +88,6 @@ const CreateApiButton = styled(BaseButton)`
   }
 `;
 
-const ButtonsContainer = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 10px;
-`;
-
-const WarningContainer = styled.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  flex-direction: column;
-`;
-
 class DatasourceSaaSEditor extends JSONtoForm<Props> {
   componentDidMount() {
     super.componentDidMount();
@@ -165,63 +148,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props> {
     return this.renderForm(content);
   }
 
-  saasInfoForm = (options: any) => {
-    const {
-      match: {
-        params: { applicationId, datasourceId, pageId },
-      },
-      isSaving,
-    } = this.props;
-    return (
-      <div>
-        <WarningContainer>
-          <span>
-            The integration is yet to be verified by google, so you will be
-            shown a safety warning. To continue authorization, please first
-            click on &quot;Show Advanced&quot;, and second &quot;Go to
-            Appsmith.com&quot;
-          </span>
-          <img
-            alt="Google Sheet Warning"
-            src={GSheetWarning}
-            style={{ width: "100%" }}
-          />
-        </WarningContainer>
-        <ButtonsContainer>
-          <ActionButton
-            accent="secondary"
-            className="t--test-datasource"
-            onClick={options.onCancel}
-            text="Cancel"
-          />
-          <StyledButton
-            className="t--save-datasource"
-            disabled={this.validate()}
-            filled
-            intent="primary"
-            loading={isSaving}
-            onClick={() => {
-              AnalyticsUtil.logEvent("GSHEET_AUTH_INIT", {
-                applicationId,
-                datasourceId,
-                pageId,
-              });
-              this.save(
-                redirectAuthorizationCode(
-                  pageId,
-                  datasourceId,
-                  PluginType.SAAS,
-                ),
-              );
-            }}
-            size="small"
-            text="Continue"
-          />
-        </ButtonsContainer>
-      </div>
-    );
-  };
-
   renderDataSourceConfigForm = (sections: any) => {
     const {
       match: {
@@ -281,21 +207,28 @@ class DatasourceSaaSEditor extends JSONtoForm<Props> {
             }
             text="Delete"
           />
-          <FormDialogComponent
-            Form={this.saasInfoForm}
-            canOutsideClickClose
-            title="Google Sheets integration is still in beta"
-            trigger={
-              <StyledButton
-                className="t--save-datasource"
-                disabled={this.validate()}
-                filled
-                intent="primary"
-                loading={isSaving}
-                size="small"
-                text="Save and Authorize"
-              />
-            }
+          <StyledButton
+            className="t--save-datasource"
+            disabled={this.validate()}
+            filled
+            intent="primary"
+            loading={isSaving}
+            onClick={() => {
+              AnalyticsUtil.logEvent("GSHEET_AUTH_INIT", {
+                applicationId,
+                datasourceId,
+                pageId,
+              });
+              this.save(
+                redirectAuthorizationCode(
+                  pageId,
+                  datasourceId,
+                  PluginType.SAAS,
+                ),
+              );
+            }}
+            size="small"
+            text="Continue"
           />
         </SaveButtonContainer>
       </form>

From 640959788cb22aa473f4c7e0177cabc864d9d8b1 Mon Sep 17 00:00:00 2001
From: Apeksha Bhosale <7846888+ApekshaBhosale@users.noreply.github.com>
Date: Mon, 10 May 2021 19:40:22 +0530
Subject: [PATCH 36/76] match is not a function (#4409)

(cherry picked from commit 2138c9059b586807125b16ba77336aaaba4ca828)
---
 app/client/src/widgets/ListWidget/ListWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/widgets/ListWidget/ListWidget.tsx b/app/client/src/widgets/ListWidget/ListWidget.tsx
index acffc99698..5b12f32489 100644
--- a/app/client/src/widgets/ListWidget/ListWidget.tsx
+++ b/app/client/src/widgets/ListWidget/ListWidget.tsx
@@ -224,7 +224,7 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
           evaluatedProperty.length > itemIndex
         ) {
           const evaluatedValue = evaluatedProperty[itemIndex];
-          if (isPlainObject(evaluatedValue))
+          if (isPlainObject(evaluatedValue) || Array.isArray(evaluatedValue))
             set(widget, path, JSON.stringify(evaluatedValue));
           else set(widget, path, evaluatedValue);
         }

From c6a8f81d60d9672bf97d95aa6cebe5f3eaffdd64 Mon Sep 17 00:00:00 2001
From: Apeksha Bhosale <7846888+ApekshaBhosale@users.noreply.github.com>
Date: Wed, 12 May 2021 12:10:32 +0530
Subject: [PATCH 37/76] Separating js error and validation error for debugger
 (#4361)

* separate js error and validation error

* PR comments fixed and added error for pageload action

* reverted to jsError message property

* small check for empty errors

* small changes for Test to pass

* space was missing for test case

* removed console statement
---
 .../CodeEditor/EvaluatedValuePopup.tsx        |  7 +-
 .../editorComponents/CodeEditor/index.tsx     |  5 +-
 .../propertyControls/BaseControl.tsx          |  1 +
 .../propertyControls/CodeEditorControl.tsx    |  2 +
 .../propertyControls/InputTextControl.tsx     |  5 ++
 .../src/entities/AppsmithConsole/logtype.ts   |  1 +
 .../Editor/PropertyPane/PropertyControl.tsx   | 23 ++++++-
 .../reducers/uiReducers/debuggerReducer.ts    |  6 +-
 app/client/src/sagas/ActionExecutionSagas.ts  | 12 ++++
 app/client/src/sagas/DebuggerSagas.ts         | 13 +++-
 app/client/src/sagas/EvaluationsSaga.ts       |  6 ++
 .../src/selectors/propertyPaneSelectors.tsx   |  7 +-
 app/client/src/utils/DynamicBindingUtils.ts   |  1 +
 app/client/src/workers/DataTreeEvaluator.ts   | 65 ++++++++++++++-----
 14 files changed, 126 insertions(+), 28 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
index c921c70fb8..383fe3a1de 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
@@ -116,6 +116,7 @@ interface Props {
   useValidationMessage?: boolean;
   hideEvaluatedValue?: boolean;
   evaluationSubstitutionType?: EvaluationSubstitutionType;
+  jsError?: string;
 }
 
 interface PopoverContentProps {
@@ -129,6 +130,7 @@ interface PopoverContentProps {
   onMouseLeave: () => void;
   hideEvaluatedValue?: boolean;
   preparedStatementViewer: boolean;
+  jsError?: string;
 }
 
 const PreparedStatementViewerContainer = styled.span`
@@ -272,7 +274,9 @@ function PopoverContent(props: PopoverContentProps) {
       {props.hasError && (
         <ErrorText>
           <span className="t--evaluatedPopup-error">
-            {props.useValidationMessage && props.error
+            {props.jsError && props.jsError.length
+              ? props.jsError
+              : props.useValidationMessage && props.error
               ? props.error
               : `This value does not evaluate to type "${props.expected}". Transform it using JS inside '{{ }}'`}
           </span>
@@ -335,6 +339,7 @@ function EvaluatedValuePopup(props: Props) {
             expected={props.expected}
             hasError={props.hasError}
             hideEvaluatedValue={props.hideEvaluatedValue}
+            jsError={props.jsError}
             onMouseEnter={() => {
               setContentHovered(true);
             }}
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 8f98ea1af4..f61fe0dc66 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -88,6 +88,7 @@ export type EditorStyleProps = {
   fill?: boolean;
   useValidationMessage?: boolean;
   evaluationSubstitutionType?: EvaluationSubstitutionType;
+  jsErrorMessage?: string;
 };
 
 export type EditorProps = EditorStyleProps &
@@ -357,8 +358,9 @@ class CodeEditor extends Component<Props, State> {
       useValidationMessage,
       hideEvaluatedValue,
       evaluationSubstitutionType,
+      jsErrorMessage,
     } = this.props;
-    const hasError = !!(meta && meta.error);
+    const hasError = !!(meta && meta.error) || !!jsErrorMessage;
     let evaluated = evaluatedValue;
     if (dataTreePath) {
       evaluated = _.get(dynamicData, dataTreePath);
@@ -402,6 +404,7 @@ class CodeEditor extends Component<Props, State> {
           hasError={hasError}
           hideEvaluatedValue={hideEvaluatedValue}
           isOpen={showEvaluatedValue}
+          jsError={jsErrorMessage}
           theme={theme || EditorTheme.LIGHT}
           useValidationMessage={useValidationMessage}
         >
diff --git a/app/client/src/components/propertyControls/BaseControl.tsx b/app/client/src/components/propertyControls/BaseControl.tsx
index 8647dbb6bd..4bf0a88e52 100644
--- a/app/client/src/components/propertyControls/BaseControl.tsx
+++ b/app/client/src/components/propertyControls/BaseControl.tsx
@@ -41,6 +41,7 @@ export interface ControlData
   validationMessage?: string;
   widgetProperties: any;
   useValidationMessage?: boolean;
+  jsErrorMessage?: string;
 }
 export interface ControlFunctions {
   onPropertyChange?: (propertyName: string, propertyValue: string) => void;
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index e081757ed0..5bc78adb25 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -18,6 +18,7 @@ class CodeEditorControl extends BaseControl<ControlProps> {
       dataTreePath,
       evaluatedValue,
       useValidationMessage,
+      jsErrorMessage,
     } = this.props;
     const props: Partial<ControlProps> = {};
     if (dataTreePath) props.dataTreePath = dataTreePath;
@@ -27,6 +28,7 @@ class CodeEditorControl extends BaseControl<ControlProps> {
     return (
       <CodeEditor
         input={{ value: propertyValue, onChange: this.onChange }}
+        jsErrorMessage={jsErrorMessage}
         meta={{
           error: isValid ? "" : validationMessage,
           touched: true,
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index 545629c6f7..59b660b43f 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -23,6 +23,7 @@ export function InputText(props: {
   additionalAutocomplete?: Record<string, Record<string, unknown>>;
   theme?: EditorTheme;
   hideEvaluatedValue?: boolean;
+  jsErrorMessage?: string;
 }) {
   const {
     errorMessage,
@@ -34,6 +35,7 @@ export function InputText(props: {
     dataTreePath,
     evaluatedValue,
     hideEvaluatedValue,
+    jsErrorMessage,
   } = props;
 
   return (
@@ -48,6 +50,7 @@ export function InputText(props: {
           value: value,
           onChange: onChange,
         }}
+        jsErrorMessage={jsErrorMessage}
         meta={{
           error: isValid ? "" : errorMessage,
           touched: true,
@@ -75,6 +78,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
       defaultValue,
       additionalAutoComplete,
       hideEvaluatedValue,
+      jsErrorMessage,
     } = this.props;
 
     return (
@@ -85,6 +89,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
         expected={expected}
         hideEvaluatedValue={hideEvaluatedValue}
         isValid={isValid}
+        jsErrorMessage={jsErrorMessage}
         label={label}
         onChange={this.onTextChange}
         placeholder={placeholderText}
diff --git a/app/client/src/entities/AppsmithConsole/logtype.ts b/app/client/src/entities/AppsmithConsole/logtype.ts
index 8fc202ca15..dfbe511f23 100644
--- a/app/client/src/entities/AppsmithConsole/logtype.ts
+++ b/app/client/src/entities/AppsmithConsole/logtype.ts
@@ -4,6 +4,7 @@ enum LOG_TYPE {
   ACTION_EXECUTION_ERROR,
   ACTION_EXECUTION_SUCCESS,
   ENTITY_DELETED,
+  EVAL_ERROR,
 }
 
 export default LOG_TYPE;
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index c5297e4b87..658cbf62f3 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -244,9 +244,14 @@ const PropertyControl = memo((props: Props) => {
 
   const getPropertyValidation = (
     propertyName: string,
-  ): { isValid: boolean; validationMessage?: string } => {
+  ): {
+    isValid: boolean;
+    validationMessage?: string;
+    jsErrorMessage?: string;
+  } => {
     let isValid = true;
     let validationMessage = "";
+    let jsErrorMessage = "";
     if (widgetProperties) {
       isValid = widgetProperties.invalidProps
         ? !_.has(widgetProperties.invalidProps, propertyName)
@@ -254,11 +259,17 @@ const PropertyControl = memo((props: Props) => {
       const validationMsgPresent =
         widgetProperties.validationMessages &&
         _.has(widgetProperties.validationMessages, propertyName);
+      const jsValidationMessagePresent =
+        widgetProperties.jsErrorMessages &&
+        _.has(widgetProperties.jsErrorMessages, propertyName);
       validationMessage = validationMsgPresent
         ? _.get(widgetProperties.validationMessages, propertyName)
         : "";
+      jsErrorMessage = jsValidationMessagePresent
+        ? _.get(widgetProperties.jsErrorMessages, propertyName)
+        : "";
     }
-    return { isValid, validationMessage };
+    return { isValid, validationMessage, jsErrorMessage };
   };
 
   const { propertyName, label } = props;
@@ -270,13 +281,18 @@ const PropertyControl = memo((props: Props) => {
       `evaluatedValues.${propertyName}`,
     );
 
-    const { isValid, validationMessage } = getPropertyValidation(propertyName);
+    const {
+      isValid,
+      validationMessage,
+      jsErrorMessage,
+    } = getPropertyValidation(propertyName);
     const { additionalAutoComplete, ...rest } = props;
     const config = {
       ...rest,
       isValid,
       propertyValue,
       validationMessage,
+      jsErrorMessage,
       dataTreePath,
       evaluatedValue,
       widgetProperties,
@@ -293,6 +309,7 @@ const PropertyControl = memo((props: Props) => {
       delete config.dataTreePath;
       delete config.evaluatedValue;
       delete config.expected;
+      config.jsErrorMessage = "";
     }
 
     const isDynamic: boolean = isPathADynamicProperty(
diff --git a/app/client/src/reducers/uiReducers/debuggerReducer.ts b/app/client/src/reducers/uiReducers/debuggerReducer.ts
index 4ad5fa9126..369ea2d1ed 100644
--- a/app/client/src/reducers/uiReducers/debuggerReducer.ts
+++ b/app/client/src/reducers/uiReducers/debuggerReducer.ts
@@ -49,7 +49,8 @@ const debuggerReducer = createReducer(initialState, {
 
     const entityId = action.payload.source.id;
     const id =
-      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR
+      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR ||
+      action.payload.logType === LOG_TYPE.EVAL_ERROR
         ? `${entityId}-${action.payload.source.propertyPath}`
         : entityId;
     const previousState = get(state.errors, id, {});
@@ -73,7 +74,8 @@ const debuggerReducer = createReducer(initialState, {
 
     const entityId = action.payload.source.id;
     const isWidgetErrorLog =
-      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR;
+      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR ||
+      action.payload.logType === LOG_TYPE.EVAL_ERROR;
     const id = isWidgetErrorLog
       ? `${entityId}-${action.payload.source.propertyPath}`
       : entityId;
diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts
index dcd97f86c4..fb64fcdacf 100644
--- a/app/client/src/sagas/ActionExecutionSagas.ts
+++ b/app/client/src/sagas/ActionExecutionSagas.ts
@@ -932,6 +932,18 @@ function* executePageLoadAction(pageAction: PageAction) {
         message += `\nERROR: "${body}"`;
       }
 
+      AppsmithConsole.error({
+        logType: LOG_TYPE.ACTION_EXECUTION_ERROR,
+        text: `Execution failed with status ${response.data.statusCode}`,
+        source: {
+          type: ENTITY_TYPE.ACTION,
+          name: pageAction.name,
+          id: pageAction.id,
+        },
+        state: response.data?.request ?? null,
+        message: JSON.stringify(body),
+      });
+
       yield put(
         executeActionError({
           actionId: pageAction.id,
diff --git a/app/client/src/sagas/DebuggerSagas.ts b/app/client/src/sagas/DebuggerSagas.ts
index d072aad539..a4a565a07b 100644
--- a/app/client/src/sagas/DebuggerSagas.ts
+++ b/app/client/src/sagas/DebuggerSagas.ts
@@ -27,7 +27,12 @@ function* onWidgetUpdateSaga(payload: LogActionPayload) {
   const dataTree: DataTree = yield select(getDataTree);
   const widget = dataTree[payload.source.name];
 
-  if (!isWidget(widget) || !widget.validationMessages) return;
+  if (
+    !isWidget(widget) ||
+    !widget.validationMessages ||
+    !widget.jsErrorMessages
+  )
+    return;
 
   // Ignore canvas widget updates
   if (widget.type === WidgetTypes.CANVAS_WIDGET) {
@@ -41,14 +46,17 @@ function* onWidgetUpdateSaga(payload: LogActionPayload) {
 
     const validationMessages = widget.validationMessages;
     const validationMessage = validationMessages[propertyPath];
+    const jsErrorMessages = widget.jsErrorMessages;
+    const jsErrorMessage = jsErrorMessages[propertyPath];
     const errors = yield select(getDebuggerErrors);
     const errorId = `${source.id}-${propertyPath}`;
     const widgetErrorLog = errors[errorId];
     if (!widgetErrorLog) return;
 
     const noError = isEmpty(validationMessage);
+    const noJsError = isEmpty(jsErrorMessage);
 
-    if (noError) {
+    if (noError && noJsError) {
       delete errors[errorId];
 
       yield put({
@@ -121,6 +129,7 @@ function* debuggerLogSaga(action: ReduxAction<Message>) {
       yield call(onWidgetUpdateSaga, payload);
       yield put(debuggerLog(payload));
       return;
+    case LOG_TYPE.EVAL_ERROR:
     case LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR:
       if (payload.source && payload.source.propertyPath) {
         if (payload.text) {
diff --git a/app/client/src/sagas/EvaluationsSaga.ts b/app/client/src/sagas/EvaluationsSaga.ts
index f9a34de445..4975f8a06d 100644
--- a/app/client/src/sagas/EvaluationsSaga.ts
+++ b/app/client/src/sagas/EvaluationsSaga.ts
@@ -103,6 +103,12 @@ const evalErrorHandler = (errors: EvalError[]) => {
       }
       case EvalErrorTypes.EVAL_ERROR: {
         log.debug(error);
+        AppsmithConsole.error({
+          logType: LOG_TYPE.EVAL_ERROR,
+          text: `The value at ${error.context?.source.propertyPath} is invalid`,
+          message: error.message,
+          source: error.context?.source,
+        });
         break;
       }
       case EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR: {
diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx
index 0c8d3b453e..fbcfa0bb27 100644
--- a/app/client/src/selectors/propertyPaneSelectors.tsx
+++ b/app/client/src/selectors/propertyPaneSelectors.tsx
@@ -49,9 +49,14 @@ export const getWidgetPropsForPropertyPane = createSelector(
       }
 
       if (evaluatedWidget.invalidProps) {
-        const { invalidProps, validationMessages } = evaluatedWidget;
+        const {
+          invalidProps,
+          validationMessages,
+          jsErrorMessages,
+        } = evaluatedWidget;
         widgetProperties.invalidProps = invalidProps;
         widgetProperties.validationMessages = validationMessages;
+        widgetProperties.jsErrorMessages = jsErrorMessages;
       }
     }
     return widgetProperties;
diff --git a/app/client/src/utils/DynamicBindingUtils.ts b/app/client/src/utils/DynamicBindingUtils.ts
index a3db79aa8e..d8cf9ce8e8 100644
--- a/app/client/src/utils/DynamicBindingUtils.ts
+++ b/app/client/src/utils/DynamicBindingUtils.ts
@@ -158,6 +158,7 @@ export interface WidgetEvaluatedProps {
   invalidProps?: Record<string, boolean>;
   validationMessages?: Record<string, string>;
   evaluatedValues?: Record<string, any>;
+  jsErrorMessages?: Record<string, string>;
 }
 
 export interface EntityWithBindings {
diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index 052b98e9ed..f3593d836d 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -391,6 +391,11 @@ export default class DataTreeEvaluator {
           let evalPropertyValue;
           const requiresEval =
             isABindingPath && isDynamicValue(unEvalPropertyValue);
+          _.set(
+            currentTree,
+            `${entityName}.jsErrorMessages.${propertyPath}`,
+            "",
+          );
           if (requiresEval) {
             const evaluationSubstitutionType =
               entity.bindingPaths[propertyPath] ||
@@ -401,6 +406,8 @@ export default class DataTreeEvaluator {
                 currentTree,
                 evaluationSubstitutionType,
                 false,
+                undefined,
+                fullPropertyPath,
               );
             } catch (e) {
               this.errors.push({
@@ -545,6 +552,7 @@ export default class DataTreeEvaluator {
     evaluationSubstitutionType: EvaluationSubstitutionType,
     returnTriggers: boolean,
     callBackData?: Array<any>,
+    fullPropertyPath?: string,
   ) {
     // Get the {{binding}} bound values
     const { stringSegments, jsSnippets } = getDynamicBindings(dynamicBinding);
@@ -553,6 +561,7 @@ export default class DataTreeEvaluator {
         data,
         jsSnippets[0],
         callBackData,
+        fullPropertyPath,
       );
       return result.triggers;
     }
@@ -564,6 +573,7 @@ export default class DataTreeEvaluator {
             data,
             jsSnippet,
             callBackData,
+            fullPropertyPath,
           );
           return result.result;
         } else {
@@ -590,17 +600,32 @@ export default class DataTreeEvaluator {
     data: DataTree,
     js: string,
     callbackData?: Array<any>,
+    fullPropertyPath?: string,
   ): EvalResult {
     try {
       return evaluate(js, data, callbackData);
     } catch (e) {
-      this.errors.push({
-        type: EvalErrorTypes.EVAL_ERROR,
-        message: e.message,
-        context: {
-          binding: js,
-        },
-      });
+      if (fullPropertyPath) {
+        const { propertyPath, entityName } = getEntityNameAndPropertyPath(
+          fullPropertyPath,
+        );
+        _.set(data, `${entityName}.jsErrorMessages.${propertyPath}`, e.message);
+        const entity = data[entityName];
+        if (isWidget(entity)) {
+          this.errors.push({
+            type: EvalErrorTypes.EVAL_ERROR,
+            message: e.message,
+            context: {
+              source: {
+                id: entity.widgetId,
+                name: entity.widgetName,
+                type: ENTITY_TYPE.WIDGET,
+                propertyPath: propertyPath,
+              },
+            },
+          });
+        }
+      }
       return { result: undefined, triggers: [] };
     }
   }
@@ -622,6 +647,7 @@ export default class DataTreeEvaluator {
         EvaluationSubstitutionType.TEMPLATE,
         true,
         undefined,
+        fullPropertyPath,
       );
       valueToValidate = triggers;
     }
@@ -640,19 +666,22 @@ export default class DataTreeEvaluator {
       : transformed;
     const safeEvaluatedValue = removeFunctions(evaluatedValue);
     _.set(widget, `evaluatedValues.${propertyPath}`, safeEvaluatedValue);
+    const jsError = _.get(widget, `jsErrorMessages.${propertyPath}`);
     if (!isValid) {
-      this.errors.push({
-        type: EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR,
-        message: message || "",
-        context: {
-          source: {
-            id: widget.widgetId,
-            name: widget.widgetName,
-            type: ENTITY_TYPE.WIDGET,
-            propertyPath: propertyPath,
+      if (!jsError) {
+        this.errors.push({
+          type: EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR,
+          message: message || "",
+          context: {
+            source: {
+              id: widget.widgetId,
+              name: widget.widgetName,
+              type: ENTITY_TYPE.WIDGET,
+              propertyPath: propertyPath,
+            },
           },
-        },
-      });
+        });
+      }
       _.set(widget, `invalidProps.${propertyPath}`, true);
       _.set(widget, `validationMessages.${propertyPath}`, message);
     } else {

From cc36bdc0516a3f5b7376632f213f4a5b86390f0d Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan.stardust@gmail.com>
Date: Wed, 12 May 2021 13:27:28 +0530
Subject: [PATCH 38/76] Fix: TypeError: t.match is not a function (#4445)

* add is number check before setting widget property

* use toString of lodash

Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain>
---
 app/client/src/widgets/ListWidget/ListWidget.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/client/src/widgets/ListWidget/ListWidget.tsx b/app/client/src/widgets/ListWidget/ListWidget.tsx
index 5b12f32489..2e41d64f6f 100644
--- a/app/client/src/widgets/ListWidget/ListWidget.tsx
+++ b/app/client/src/widgets/ListWidget/ListWidget.tsx
@@ -1,6 +1,15 @@
 import React from "react";
 import log from "loglevel";
-import { compact, get, set, xor, isPlainObject, isNumber, round } from "lodash";
+import {
+  compact,
+  get,
+  set,
+  xor,
+  isPlainObject,
+  isNumber,
+  round,
+  toString,
+} from "lodash";
 import * as Sentry from "@sentry/react";
 
 import WidgetFactory from "utils/WidgetFactory";
@@ -226,7 +235,7 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
           const evaluatedValue = evaluatedProperty[itemIndex];
           if (isPlainObject(evaluatedValue) || Array.isArray(evaluatedValue))
             set(widget, path, JSON.stringify(evaluatedValue));
-          else set(widget, path, evaluatedValue);
+          else set(widget, path, toString(evaluatedValue));
         }
       });
     }

From b514759ad28fd9fef6da202daf1cd398eb528a68 Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi@appsmith.com>
Date: Wed, 12 May 2021 14:48:13 +0530
Subject: [PATCH 39/76] Added example value for cs domain on client (#4443)

---
 .env.example                      | 2 +-
 .github/workflows/client-test.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env.example b/.env.example
index ef48c3bc9d..a98011bb3d 100644
--- a/.env.example
+++ b/.env.example
@@ -57,4 +57,4 @@ APPSMITH_MAIL_SMTP_TLS_ENABLED=
 #APPSMITH_SENTRY_ENVIRONMENT=
 
 # Configure cloud services
-# APPSMITH_CLOUD_SERVICES_BASE_URL
\ No newline at end of file
+# APPSMITH_CLOUD_SERVICES_BASE_URL="https://release-cs.appsmith.com"
\ No newline at end of file
diff --git a/.github/workflows/client-test.yml b/.github/workflows/client-test.yml
index 231976f008..c89e1a66fe 100644
--- a/.github/workflows/client-test.yml
+++ b/.github/workflows/client-test.yml
@@ -297,7 +297,7 @@ jobs:
 
       - name: Return status for ui-matrix
         run: |
-          if [[${{ needs.ui-test.result }} == "success" ]]; then
+          if [["${{ needs.ui-test.result }}" == "success" ]]; then
             exit 0
           else 
             exit 1

From c2af4a97fd84515bb576174b6cd2b23b9796d319 Mon Sep 17 00:00:00 2001
From: Shrikant Sharat Kandula <shrikant@appsmith.com>
Date: Wed, 12 May 2021 16:41:42 +0530
Subject: [PATCH 40/76] Fix sporadic build errors (#4453)

Because of the Java version not being explicitly set
in this plugin, the build of the whole project fails
sporadically in IntelliJ since it's trying to compile the
code as Java 8, which will obviously fail.
---
 app/server/appsmith-plugins/rapidApiPlugin/pom.xml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/server/appsmith-plugins/rapidApiPlugin/pom.xml b/app/server/appsmith-plugins/rapidApiPlugin/pom.xml
index 1ee8b7b3fd..7a98a62c40 100644
--- a/app/server/appsmith-plugins/rapidApiPlugin/pom.xml
+++ b/app/server/appsmith-plugins/rapidApiPlugin/pom.xml
@@ -19,6 +19,7 @@
 
     <properties>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <java.version>11</java.version>
         <maven.compiler.source>${java.version}</maven.compiler.source>
         <maven.compiler.target>${java.version}</maven.compiler.target>
         <plugin.id>rapidapi-plugin</plugin.id>

From 53c2d815f68f360fc785607f9b088579d593ae64 Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi@appsmith.com>
Date: Wed, 12 May 2021 17:07:59 +0530
Subject: [PATCH 41/76] Fixes refresh token flow (#4450)

* Fixes refresh token flow

* Review comments

* Reverting mistake with CI cs url
---
 .github/workflows/client-test.yml                 |  4 ++--
 .../java/com/appsmith/external/models/OAuth2.java | 15 +++++++++++++++
 .../server/services/NewActionServiceImpl.java     |  6 ++----
 .../server/solutions/AuthenticationService.java   |  6 +++++-
 .../server/solutions/ReleaseNotesService.java     |  2 ++
 .../src/main/resources/application.properties     |  2 +-
 app/server/envs/dev.env.example                   |  2 ++
 7 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/client-test.yml b/.github/workflows/client-test.yml
index c89e1a66fe..80533f7782 100644
--- a/.github/workflows/client-test.yml
+++ b/.github/workflows/client-test.yml
@@ -206,7 +206,7 @@ jobs:
             --env APPSMITH_ENCRYPTION_PASSWORD=password \
             --env APPSMITH_ENCRYPTION_SALT=salt \
             --env APPSMITH_IS_SELF_HOSTED=false \
-            --env APPSMITH_CLOUD_SERVICES_BASE_URL=https://release-cs.appsmith.com\
+            --env APPSMITH_CLOUD_SERVICES_BASE_URL= \
             --env APPSMITH_CLOUD_SERVICES_USERNAME= \
             --env APPSMITH_CLOUD_SERVICES_PASSWORD= \
             ${{ secrets.DOCKER_HUB_ORGANIZATION }}/appsmith-server:release
@@ -221,7 +221,7 @@ jobs:
             --env APPSMITH_ENCRYPTION_PASSWORD=password \
             --env APPSMITH_ENCRYPTION_SALT=salt \
             --env APPSMITH_IS_SELF_HOSTED=false \
-            --env APPSMITH_CLOUD_SERVICES_BASE_URL=https://release-cs.appsmith.com\
+            --env APPSMITH_CLOUD_SERVICES_BASE_URL= \
             --env APPSMITH_CLOUD_SERVICES_USERNAME= \
             --env APPSMITH_CLOUD_SERVICES_PASSWORD= \
             ${{ secrets.DOCKER_HUB_ORGANIZATION }}/appsmith-server:nightly
diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/OAuth2.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/OAuth2.java
index 732e0a24c6..3edd5eca7d 100644
--- a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/OAuth2.java
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/OAuth2.java
@@ -3,6 +3,8 @@ package com.appsmith.external.models;
 import com.appsmith.external.annotations.documenttype.DocumentType;
 import com.appsmith.external.annotations.encryption.Encrypted;
 import com.appsmith.external.constants.Authentication;
+import com.appsmith.external.exceptions.pluginExceptions.AppsmithPluginError;
+import com.appsmith.external.exceptions.pluginExceptions.AppsmithPluginException;
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.AllArgsConstructor;
 import lombok.Getter;
@@ -12,7 +14,9 @@ import lombok.ToString;
 import org.apache.logging.log4j.util.Strings;
 import org.springframework.data.annotation.Transient;
 import org.springframework.util.StringUtils;
+import reactor.core.publisher.Mono;
 
+import java.time.Instant;
 import java.util.Arrays;
 import java.util.Set;
 import java.util.stream.Collectors;
@@ -73,4 +77,15 @@ public class OAuth2 extends AuthenticationDTO {
                     .collect(Collectors.toSet());
         }
     }
+
+    @Override
+    public Mono<Boolean> hasExpired() {
+        if (this.authenticationResponse == null) {
+            return Mono.error(new AppsmithPluginException(
+                    AppsmithPluginError.PLUGIN_ERROR,
+                    "Expected datasource to have valid authentication tokens at this point"));
+        }
+
+        return Mono.just(authenticationResponse.expiresAt.isBefore(Instant.now().plusSeconds(60)));
+    }
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
index 4a77900821..1253696db2 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
@@ -58,8 +58,6 @@ import javax.validation.Validator;
 import java.time.Duration;
 import java.time.Instant;
 import java.util.ArrayList;
-import java.util.Collections;
-import java.util.Comparator;
 import java.util.HashMap;
 import java.util.HashSet;
 import java.util.List;
@@ -538,11 +536,11 @@ public class NewActionServiceImpl extends BaseService<NewActionRepository, NewAc
 
                     Mono<Datasource> validatedDatasourceMono = authenticationValidator.validateAuthentication(datasource).cache();
 
-
                     Mono<ActionExecutionResult> executionMono = validatedDatasourceMono
                             .flatMap(datasourceContextService::getDatasourceContext)
                             // Now that we have the context (connection details), execute the action.
-                            .flatMap(resourceContext -> validatedDatasourceMono.flatMap(datasource1 -> {
+                            .flatMap(resourceContext -> validatedDatasourceMono
+                                    .flatMap(datasource1 -> {
                                         return (Mono<ActionExecutionResult>) pluginExecutor.executeParameterized(
                                                 resourceContext.getConnection(),
                                                 executeActionDTO,
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/AuthenticationService.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/AuthenticationService.java
index d1fa19064a..5d1c416b78 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/AuthenticationService.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/AuthenticationService.java
@@ -422,7 +422,11 @@ public class AuthenticationService {
                                 oAuth2.setAuthenticationResponse(authenticationResponse);
                                 oAuth2.setIsEncrypted(null);
                                 datasource.getDatasourceConfiguration().setAuthentication(oAuth2);
-                                return datasourceService.update(datasource.getId(), datasource);
+                                // We return the same object instead of the update value because the updates value
+                                // will be in the encrypted form
+                                return datasourceService
+                                        .update(datasource.getId(), datasource)
+                                        .thenReturn(datasource);
                             });
                 })
                 .switchIfEmpty(Mono.just(datasource))
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ReleaseNotesService.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ReleaseNotesService.java
index ef887b5bde..202935e5e1 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ReleaseNotesService.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ReleaseNotesService.java
@@ -82,6 +82,8 @@ public class ReleaseNotesService {
                 .flatMap(instanceId -> WebClient
                         .create(
                                 baseUrl + "/api/v1/releases?instanceId=" + instanceId +
+                                        // isCloudHosted should be true only for our cloud instance,
+                                        // For docker images that burn the segment key with the image, the CE key will be present
                                         "&isSourceInstall=" + (isCloudHosted || StringUtils.isEmpty(segmentConfig.getCeKey())) +
                                         (StringUtils.isEmpty(repo) ? "" : ("&repo=" + repo))
                         )
diff --git a/app/server/appsmith-server/src/main/resources/application.properties b/app/server/appsmith-server/src/main/resources/application.properties
index 867f87d1aa..1b86904aa7 100644
--- a/app/server/appsmith-server/src/main/resources/application.properties
+++ b/app/server/appsmith-server/src/main/resources/application.properties
@@ -66,7 +66,7 @@ admin.emails = ${APPSMITH_ADMIN_EMAILS:}
 emails.welcome.enabled = ${APPSMITH_EMAILS_WELCOME_ENABLED:true}
 
 # Appsmith Cloud Services
-appsmith.cloud_services.base_url = ${APPSMITH_CLOUD_SERVICES_BASE_URL:}
+appsmith.cloud_services.base_url = ${APPSMITH_CLOUD_SERVICES_BASE_URL:https://cs.appsmith.com}
 appsmith.cloud_services.username = ${APPSMITH_CLOUD_SERVICES_USERNAME:}
 appsmith.cloud_services.password = ${APPSMITH_CLOUD_SERVICES_PASSWORD:}
 github_repo = ${APPSMITH_GITHUB_REPO:}
diff --git a/app/server/envs/dev.env.example b/app/server/envs/dev.env.example
index e7e74b6bf4..569a50c320 100644
--- a/app/server/envs/dev.env.example
+++ b/app/server/envs/dev.env.example
@@ -11,6 +11,8 @@ APPSMITH_ENCRYPTION_SALT=abcd
 
 APPSMITH_CODEC_SIZE=10
 
+#APPSMITH_CLOUD_SERVICES_BASE_URL="https://release-cs.appsmith.com"
+
 #APPSMITH_OAUTH2_GOOGLE_CLIENT_ID=""
 #APPSMITH_OAUTH2_GOOGLE_CLIENT_SECRET=""
 

From fb7db810da33c37a787c40917bf0e69a7f048143 Mon Sep 17 00:00:00 2001
From: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com>
Date: Wed, 12 May 2021 17:43:11 +0530
Subject: [PATCH 42/76] Updated Cypress locator for product updates test
 (#4454)

---
 .../ClientSideTests/ProductUpdates/ProductUpdates_spec.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ProductUpdates/ProductUpdates_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ProductUpdates/ProductUpdates_spec.js
index db433c36c7..338970ff7b 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ProductUpdates/ProductUpdates_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ProductUpdates/ProductUpdates_spec.js
@@ -13,7 +13,7 @@ describe("Check for product updates button and modal", function() {
         const { releaseItems, newReleasesCount } = state.ui.releases;
         if (Array.isArray(releaseItems) && releaseItems.length > 0) {
           cy.get("[data-cy=t--product-updates-btn]")
-            .contains(newReleasesCount)
+            .contains("What's New?")
             .click({ force: true });
           //eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.wait(500); // modal transition

From 39ca940dfc8e7a4016f0c55eb186919b817d29a2 Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi@appsmith.com>
Date: Wed, 12 May 2021 19:06:39 +0530
Subject: [PATCH 43/76] Added space in if condition (#4459)

---
 .github/workflows/client-test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/client-test.yml b/.github/workflows/client-test.yml
index 80533f7782..d83330c8d1 100644
--- a/.github/workflows/client-test.yml
+++ b/.github/workflows/client-test.yml
@@ -297,7 +297,7 @@ jobs:
 
       - name: Return status for ui-matrix
         run: |
-          if [["${{ needs.ui-test.result }}" == "success" ]]; then
+          if [[ "${{ needs.ui-test.result }}" == "success" ]]; then
             exit 0
           else 
             exit 1

From 66c7a0b2525b4c11ba642d4e483e8a125dd15364 Mon Sep 17 00:00:00 2001
From: Apeksha Bhosale <7846888+ApekshaBhosale@users.noreply.github.com>
Date: Thu, 13 May 2021 09:50:30 +0530
Subject: [PATCH 44/76] Revert "Separating js error and validation error for
 debugger (#4361)" (#4447)

This reverts commit c6a8f81d60d9672bf97d95aa6cebe5f3eaffdd64.
---
 .../CodeEditor/EvaluatedValuePopup.tsx        |  7 +-
 .../editorComponents/CodeEditor/index.tsx     |  5 +-
 .../propertyControls/BaseControl.tsx          |  1 -
 .../propertyControls/CodeEditorControl.tsx    |  2 -
 .../propertyControls/InputTextControl.tsx     |  5 --
 .../src/entities/AppsmithConsole/logtype.ts   |  1 -
 .../Editor/PropertyPane/PropertyControl.tsx   | 23 +------
 .../reducers/uiReducers/debuggerReducer.ts    |  6 +-
 app/client/src/sagas/ActionExecutionSagas.ts  | 12 ----
 app/client/src/sagas/DebuggerSagas.ts         | 13 +---
 app/client/src/sagas/EvaluationsSaga.ts       |  6 --
 .../src/selectors/propertyPaneSelectors.tsx   |  7 +-
 app/client/src/utils/DynamicBindingUtils.ts   |  1 -
 app/client/src/workers/DataTreeEvaluator.ts   | 65 +++++--------------
 14 files changed, 28 insertions(+), 126 deletions(-)

diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
index 383fe3a1de..c921c70fb8 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
@@ -116,7 +116,6 @@ interface Props {
   useValidationMessage?: boolean;
   hideEvaluatedValue?: boolean;
   evaluationSubstitutionType?: EvaluationSubstitutionType;
-  jsError?: string;
 }
 
 interface PopoverContentProps {
@@ -130,7 +129,6 @@ interface PopoverContentProps {
   onMouseLeave: () => void;
   hideEvaluatedValue?: boolean;
   preparedStatementViewer: boolean;
-  jsError?: string;
 }
 
 const PreparedStatementViewerContainer = styled.span`
@@ -274,9 +272,7 @@ function PopoverContent(props: PopoverContentProps) {
       {props.hasError && (
         <ErrorText>
           <span className="t--evaluatedPopup-error">
-            {props.jsError && props.jsError.length
-              ? props.jsError
-              : props.useValidationMessage && props.error
+            {props.useValidationMessage && props.error
               ? props.error
               : `This value does not evaluate to type "${props.expected}". Transform it using JS inside '{{ }}'`}
           </span>
@@ -339,7 +335,6 @@ function EvaluatedValuePopup(props: Props) {
             expected={props.expected}
             hasError={props.hasError}
             hideEvaluatedValue={props.hideEvaluatedValue}
-            jsError={props.jsError}
             onMouseEnter={() => {
               setContentHovered(true);
             }}
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index f61fe0dc66..8f98ea1af4 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -88,7 +88,6 @@ export type EditorStyleProps = {
   fill?: boolean;
   useValidationMessage?: boolean;
   evaluationSubstitutionType?: EvaluationSubstitutionType;
-  jsErrorMessage?: string;
 };
 
 export type EditorProps = EditorStyleProps &
@@ -358,9 +357,8 @@ class CodeEditor extends Component<Props, State> {
       useValidationMessage,
       hideEvaluatedValue,
       evaluationSubstitutionType,
-      jsErrorMessage,
     } = this.props;
-    const hasError = !!(meta && meta.error) || !!jsErrorMessage;
+    const hasError = !!(meta && meta.error);
     let evaluated = evaluatedValue;
     if (dataTreePath) {
       evaluated = _.get(dynamicData, dataTreePath);
@@ -404,7 +402,6 @@ class CodeEditor extends Component<Props, State> {
           hasError={hasError}
           hideEvaluatedValue={hideEvaluatedValue}
           isOpen={showEvaluatedValue}
-          jsError={jsErrorMessage}
           theme={theme || EditorTheme.LIGHT}
           useValidationMessage={useValidationMessage}
         >
diff --git a/app/client/src/components/propertyControls/BaseControl.tsx b/app/client/src/components/propertyControls/BaseControl.tsx
index 4bf0a88e52..8647dbb6bd 100644
--- a/app/client/src/components/propertyControls/BaseControl.tsx
+++ b/app/client/src/components/propertyControls/BaseControl.tsx
@@ -41,7 +41,6 @@ export interface ControlData
   validationMessage?: string;
   widgetProperties: any;
   useValidationMessage?: boolean;
-  jsErrorMessage?: string;
 }
 export interface ControlFunctions {
   onPropertyChange?: (propertyName: string, propertyValue: string) => void;
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index 5bc78adb25..e081757ed0 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -18,7 +18,6 @@ class CodeEditorControl extends BaseControl<ControlProps> {
       dataTreePath,
       evaluatedValue,
       useValidationMessage,
-      jsErrorMessage,
     } = this.props;
     const props: Partial<ControlProps> = {};
     if (dataTreePath) props.dataTreePath = dataTreePath;
@@ -28,7 +27,6 @@ class CodeEditorControl extends BaseControl<ControlProps> {
     return (
       <CodeEditor
         input={{ value: propertyValue, onChange: this.onChange }}
-        jsErrorMessage={jsErrorMessage}
         meta={{
           error: isValid ? "" : validationMessage,
           touched: true,
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index 59b660b43f..545629c6f7 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -23,7 +23,6 @@ export function InputText(props: {
   additionalAutocomplete?: Record<string, Record<string, unknown>>;
   theme?: EditorTheme;
   hideEvaluatedValue?: boolean;
-  jsErrorMessage?: string;
 }) {
   const {
     errorMessage,
@@ -35,7 +34,6 @@ export function InputText(props: {
     dataTreePath,
     evaluatedValue,
     hideEvaluatedValue,
-    jsErrorMessage,
   } = props;
 
   return (
@@ -50,7 +48,6 @@ export function InputText(props: {
           value: value,
           onChange: onChange,
         }}
-        jsErrorMessage={jsErrorMessage}
         meta={{
           error: isValid ? "" : errorMessage,
           touched: true,
@@ -78,7 +75,6 @@ class InputTextControl extends BaseControl<InputControlProps> {
       defaultValue,
       additionalAutoComplete,
       hideEvaluatedValue,
-      jsErrorMessage,
     } = this.props;
 
     return (
@@ -89,7 +85,6 @@ class InputTextControl extends BaseControl<InputControlProps> {
         expected={expected}
         hideEvaluatedValue={hideEvaluatedValue}
         isValid={isValid}
-        jsErrorMessage={jsErrorMessage}
         label={label}
         onChange={this.onTextChange}
         placeholder={placeholderText}
diff --git a/app/client/src/entities/AppsmithConsole/logtype.ts b/app/client/src/entities/AppsmithConsole/logtype.ts
index dfbe511f23..8fc202ca15 100644
--- a/app/client/src/entities/AppsmithConsole/logtype.ts
+++ b/app/client/src/entities/AppsmithConsole/logtype.ts
@@ -4,7 +4,6 @@ enum LOG_TYPE {
   ACTION_EXECUTION_ERROR,
   ACTION_EXECUTION_SUCCESS,
   ENTITY_DELETED,
-  EVAL_ERROR,
 }
 
 export default LOG_TYPE;
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index 658cbf62f3..c5297e4b87 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -244,14 +244,9 @@ const PropertyControl = memo((props: Props) => {
 
   const getPropertyValidation = (
     propertyName: string,
-  ): {
-    isValid: boolean;
-    validationMessage?: string;
-    jsErrorMessage?: string;
-  } => {
+  ): { isValid: boolean; validationMessage?: string } => {
     let isValid = true;
     let validationMessage = "";
-    let jsErrorMessage = "";
     if (widgetProperties) {
       isValid = widgetProperties.invalidProps
         ? !_.has(widgetProperties.invalidProps, propertyName)
@@ -259,17 +254,11 @@ const PropertyControl = memo((props: Props) => {
       const validationMsgPresent =
         widgetProperties.validationMessages &&
         _.has(widgetProperties.validationMessages, propertyName);
-      const jsValidationMessagePresent =
-        widgetProperties.jsErrorMessages &&
-        _.has(widgetProperties.jsErrorMessages, propertyName);
       validationMessage = validationMsgPresent
         ? _.get(widgetProperties.validationMessages, propertyName)
         : "";
-      jsErrorMessage = jsValidationMessagePresent
-        ? _.get(widgetProperties.jsErrorMessages, propertyName)
-        : "";
     }
-    return { isValid, validationMessage, jsErrorMessage };
+    return { isValid, validationMessage };
   };
 
   const { propertyName, label } = props;
@@ -281,18 +270,13 @@ const PropertyControl = memo((props: Props) => {
       `evaluatedValues.${propertyName}`,
     );
 
-    const {
-      isValid,
-      validationMessage,
-      jsErrorMessage,
-    } = getPropertyValidation(propertyName);
+    const { isValid, validationMessage } = getPropertyValidation(propertyName);
     const { additionalAutoComplete, ...rest } = props;
     const config = {
       ...rest,
       isValid,
       propertyValue,
       validationMessage,
-      jsErrorMessage,
       dataTreePath,
       evaluatedValue,
       widgetProperties,
@@ -309,7 +293,6 @@ const PropertyControl = memo((props: Props) => {
       delete config.dataTreePath;
       delete config.evaluatedValue;
       delete config.expected;
-      config.jsErrorMessage = "";
     }
 
     const isDynamic: boolean = isPathADynamicProperty(
diff --git a/app/client/src/reducers/uiReducers/debuggerReducer.ts b/app/client/src/reducers/uiReducers/debuggerReducer.ts
index 369ea2d1ed..4ad5fa9126 100644
--- a/app/client/src/reducers/uiReducers/debuggerReducer.ts
+++ b/app/client/src/reducers/uiReducers/debuggerReducer.ts
@@ -49,8 +49,7 @@ const debuggerReducer = createReducer(initialState, {
 
     const entityId = action.payload.source.id;
     const id =
-      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR ||
-      action.payload.logType === LOG_TYPE.EVAL_ERROR
+      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR
         ? `${entityId}-${action.payload.source.propertyPath}`
         : entityId;
     const previousState = get(state.errors, id, {});
@@ -74,8 +73,7 @@ const debuggerReducer = createReducer(initialState, {
 
     const entityId = action.payload.source.id;
     const isWidgetErrorLog =
-      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR ||
-      action.payload.logType === LOG_TYPE.EVAL_ERROR;
+      action.payload.logType === LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR;
     const id = isWidgetErrorLog
       ? `${entityId}-${action.payload.source.propertyPath}`
       : entityId;
diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts
index fb64fcdacf..dcd97f86c4 100644
--- a/app/client/src/sagas/ActionExecutionSagas.ts
+++ b/app/client/src/sagas/ActionExecutionSagas.ts
@@ -932,18 +932,6 @@ function* executePageLoadAction(pageAction: PageAction) {
         message += `\nERROR: "${body}"`;
       }
 
-      AppsmithConsole.error({
-        logType: LOG_TYPE.ACTION_EXECUTION_ERROR,
-        text: `Execution failed with status ${response.data.statusCode}`,
-        source: {
-          type: ENTITY_TYPE.ACTION,
-          name: pageAction.name,
-          id: pageAction.id,
-        },
-        state: response.data?.request ?? null,
-        message: JSON.stringify(body),
-      });
-
       yield put(
         executeActionError({
           actionId: pageAction.id,
diff --git a/app/client/src/sagas/DebuggerSagas.ts b/app/client/src/sagas/DebuggerSagas.ts
index a4a565a07b..d072aad539 100644
--- a/app/client/src/sagas/DebuggerSagas.ts
+++ b/app/client/src/sagas/DebuggerSagas.ts
@@ -27,12 +27,7 @@ function* onWidgetUpdateSaga(payload: LogActionPayload) {
   const dataTree: DataTree = yield select(getDataTree);
   const widget = dataTree[payload.source.name];
 
-  if (
-    !isWidget(widget) ||
-    !widget.validationMessages ||
-    !widget.jsErrorMessages
-  )
-    return;
+  if (!isWidget(widget) || !widget.validationMessages) return;
 
   // Ignore canvas widget updates
   if (widget.type === WidgetTypes.CANVAS_WIDGET) {
@@ -46,17 +41,14 @@ function* onWidgetUpdateSaga(payload: LogActionPayload) {
 
     const validationMessages = widget.validationMessages;
     const validationMessage = validationMessages[propertyPath];
-    const jsErrorMessages = widget.jsErrorMessages;
-    const jsErrorMessage = jsErrorMessages[propertyPath];
     const errors = yield select(getDebuggerErrors);
     const errorId = `${source.id}-${propertyPath}`;
     const widgetErrorLog = errors[errorId];
     if (!widgetErrorLog) return;
 
     const noError = isEmpty(validationMessage);
-    const noJsError = isEmpty(jsErrorMessage);
 
-    if (noError && noJsError) {
+    if (noError) {
       delete errors[errorId];
 
       yield put({
@@ -129,7 +121,6 @@ function* debuggerLogSaga(action: ReduxAction<Message>) {
       yield call(onWidgetUpdateSaga, payload);
       yield put(debuggerLog(payload));
       return;
-    case LOG_TYPE.EVAL_ERROR:
     case LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR:
       if (payload.source && payload.source.propertyPath) {
         if (payload.text) {
diff --git a/app/client/src/sagas/EvaluationsSaga.ts b/app/client/src/sagas/EvaluationsSaga.ts
index 4975f8a06d..f9a34de445 100644
--- a/app/client/src/sagas/EvaluationsSaga.ts
+++ b/app/client/src/sagas/EvaluationsSaga.ts
@@ -103,12 +103,6 @@ const evalErrorHandler = (errors: EvalError[]) => {
       }
       case EvalErrorTypes.EVAL_ERROR: {
         log.debug(error);
-        AppsmithConsole.error({
-          logType: LOG_TYPE.EVAL_ERROR,
-          text: `The value at ${error.context?.source.propertyPath} is invalid`,
-          message: error.message,
-          source: error.context?.source,
-        });
         break;
       }
       case EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR: {
diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx
index fbcfa0bb27..0c8d3b453e 100644
--- a/app/client/src/selectors/propertyPaneSelectors.tsx
+++ b/app/client/src/selectors/propertyPaneSelectors.tsx
@@ -49,14 +49,9 @@ export const getWidgetPropsForPropertyPane = createSelector(
       }
 
       if (evaluatedWidget.invalidProps) {
-        const {
-          invalidProps,
-          validationMessages,
-          jsErrorMessages,
-        } = evaluatedWidget;
+        const { invalidProps, validationMessages } = evaluatedWidget;
         widgetProperties.invalidProps = invalidProps;
         widgetProperties.validationMessages = validationMessages;
-        widgetProperties.jsErrorMessages = jsErrorMessages;
       }
     }
     return widgetProperties;
diff --git a/app/client/src/utils/DynamicBindingUtils.ts b/app/client/src/utils/DynamicBindingUtils.ts
index d8cf9ce8e8..a3db79aa8e 100644
--- a/app/client/src/utils/DynamicBindingUtils.ts
+++ b/app/client/src/utils/DynamicBindingUtils.ts
@@ -158,7 +158,6 @@ export interface WidgetEvaluatedProps {
   invalidProps?: Record<string, boolean>;
   validationMessages?: Record<string, string>;
   evaluatedValues?: Record<string, any>;
-  jsErrorMessages?: Record<string, string>;
 }
 
 export interface EntityWithBindings {
diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index f3593d836d..052b98e9ed 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -391,11 +391,6 @@ export default class DataTreeEvaluator {
           let evalPropertyValue;
           const requiresEval =
             isABindingPath && isDynamicValue(unEvalPropertyValue);
-          _.set(
-            currentTree,
-            `${entityName}.jsErrorMessages.${propertyPath}`,
-            "",
-          );
           if (requiresEval) {
             const evaluationSubstitutionType =
               entity.bindingPaths[propertyPath] ||
@@ -406,8 +401,6 @@ export default class DataTreeEvaluator {
                 currentTree,
                 evaluationSubstitutionType,
                 false,
-                undefined,
-                fullPropertyPath,
               );
             } catch (e) {
               this.errors.push({
@@ -552,7 +545,6 @@ export default class DataTreeEvaluator {
     evaluationSubstitutionType: EvaluationSubstitutionType,
     returnTriggers: boolean,
     callBackData?: Array<any>,
-    fullPropertyPath?: string,
   ) {
     // Get the {{binding}} bound values
     const { stringSegments, jsSnippets } = getDynamicBindings(dynamicBinding);
@@ -561,7 +553,6 @@ export default class DataTreeEvaluator {
         data,
         jsSnippets[0],
         callBackData,
-        fullPropertyPath,
       );
       return result.triggers;
     }
@@ -573,7 +564,6 @@ export default class DataTreeEvaluator {
             data,
             jsSnippet,
             callBackData,
-            fullPropertyPath,
           );
           return result.result;
         } else {
@@ -600,32 +590,17 @@ export default class DataTreeEvaluator {
     data: DataTree,
     js: string,
     callbackData?: Array<any>,
-    fullPropertyPath?: string,
   ): EvalResult {
     try {
       return evaluate(js, data, callbackData);
     } catch (e) {
-      if (fullPropertyPath) {
-        const { propertyPath, entityName } = getEntityNameAndPropertyPath(
-          fullPropertyPath,
-        );
-        _.set(data, `${entityName}.jsErrorMessages.${propertyPath}`, e.message);
-        const entity = data[entityName];
-        if (isWidget(entity)) {
-          this.errors.push({
-            type: EvalErrorTypes.EVAL_ERROR,
-            message: e.message,
-            context: {
-              source: {
-                id: entity.widgetId,
-                name: entity.widgetName,
-                type: ENTITY_TYPE.WIDGET,
-                propertyPath: propertyPath,
-              },
-            },
-          });
-        }
-      }
+      this.errors.push({
+        type: EvalErrorTypes.EVAL_ERROR,
+        message: e.message,
+        context: {
+          binding: js,
+        },
+      });
       return { result: undefined, triggers: [] };
     }
   }
@@ -647,7 +622,6 @@ export default class DataTreeEvaluator {
         EvaluationSubstitutionType.TEMPLATE,
         true,
         undefined,
-        fullPropertyPath,
       );
       valueToValidate = triggers;
     }
@@ -666,22 +640,19 @@ export default class DataTreeEvaluator {
       : transformed;
     const safeEvaluatedValue = removeFunctions(evaluatedValue);
     _.set(widget, `evaluatedValues.${propertyPath}`, safeEvaluatedValue);
-    const jsError = _.get(widget, `jsErrorMessages.${propertyPath}`);
     if (!isValid) {
-      if (!jsError) {
-        this.errors.push({
-          type: EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR,
-          message: message || "",
-          context: {
-            source: {
-              id: widget.widgetId,
-              name: widget.widgetName,
-              type: ENTITY_TYPE.WIDGET,
-              propertyPath: propertyPath,
-            },
+      this.errors.push({
+        type: EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR,
+        message: message || "",
+        context: {
+          source: {
+            id: widget.widgetId,
+            name: widget.widgetName,
+            type: ENTITY_TYPE.WIDGET,
+            propertyPath: propertyPath,
           },
-        });
-      }
+        },
+      });
       _.set(widget, `invalidProps.${propertyPath}`, true);
       _.set(widget, `validationMessages.${propertyPath}`, message);
     } else {

From e74d99b794e50a54b78a41934d56f13510c9a998 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumit@appsmith.com>
Date: Thu, 13 May 2021 11:59:43 +0530
Subject: [PATCH 45/76] fix NPE (#4448)

fix NPE
---
 .../java/com/external/plugins/MongoPlugin.java | 18 +++++++++++++++++-
 .../com/external/plugins/MongoPluginTest.java  |  7 ++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java b/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java
index 96ac1c4a82..1a335e387e 100644
--- a/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java
+++ b/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java
@@ -590,6 +590,22 @@ public class MongoPlugin extends BasePlugin {
             }
         }
 
+        private boolean hostStringHasConnectionURIHead(String host) {
+            if (!StringUtils.isEmpty(host) && (host.contains("mongodb://") || host.contains("mongodb+srv"))) {
+                return true;
+            }
+
+            return false;
+        }
+
+        private boolean isHostStringConnectionURI(Endpoint endpoint) {
+            if (endpoint != null && hostStringHasConnectionURIHead(endpoint.getHost())) {
+                return true;
+            }
+
+            return false;
+        }
+
         @Override
         public Set<String> validateDatasource(DatasourceConfiguration datasourceConfiguration) {
             Set<String> invalids = new HashSet<>();
@@ -641,7 +657,7 @@ public class MongoPlugin extends BasePlugin {
                 if (!CollectionUtils.isEmpty(endpoints)) {
                     boolean usingUri = endpoints
                             .stream()
-                            .anyMatch(endPoint -> endPoint.getHost().matches(MONGO_URI_REGEX));
+                            .anyMatch(endPoint -> isHostStringConnectionURI(endPoint));
 
                     if (usingUri) {
                         invalids.add("It seems that you are trying to use a mongo connection string URI. Please " +
diff --git a/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java b/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java
index 1709486140..cb0bd64724 100644
--- a/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java
+++ b/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java
@@ -496,7 +496,12 @@ public class MongoPluginTest {
     @Test
     public void testErrorMessageOnNonSrvUri() {
         DatasourceConfiguration dsConfig = createDatasourceConfiguration();
-        dsConfig.getEndpoints().get(0).setHost("mongodb://user:pass@url.net:1234,url.net:1234/dbName");
+        List<Endpoint> endpoints = new ArrayList<>();
+        endpoints.add(new Endpoint("url", 123L));
+        endpoints.add(null);
+        endpoints.add(new Endpoint(null, 123L));
+        endpoints.add(new Endpoint("mongodb://user:pass@url.net:1234,url.net:1234/dbName", 123L));
+        dsConfig.setEndpoints(endpoints);
         dsConfig.setProperties(List.of(new Property("Import from URI", "No")));
         Mono<Set<String>> invalidsMono = Mono.just(pluginExecutor.validateDatasource(dsConfig));
 

From f2d228c346aa672a74272d55898522f35816aead Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Thu, 13 May 2021 12:41:11 +0530
Subject: [PATCH 46/76] - Add no shadow eslint rule

---
 app/client/.eslintrc.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index e585704a83..98978c9688 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -35,14 +35,15 @@
     "react/jsx-sort-props": "error",
     "react/jsx-fragments": "error",
     "react/jsx-no-useless-fragment": "error",
-    "sort-destructure-keys/sort-destructure-keys": ["warn", {"caseSensitive": false}],
+    "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}],
     "react/jsx-no-bind": ["warn", {
       "ignoreDOMComponents":  false,
       "ignoreRefs": true,
       "allowArrowFunctions":  false,
       "allowFunctions":  false,
       "allowBind": false
-    }]
+    }],
+    "no-shadow": ["error", { "builtinGlobals": true }]
   },
   "settings": {
     "react": {

From 27af947852d1fe5519f58558229faec8f6e40b08 Mon Sep 17 00:00:00 2001
From: Shrikant Sharat Kandula <shrikant@appsmith.com>
Date: Thu, 13 May 2021 12:52:43 +0530
Subject: [PATCH 47/76] APIs for adding and removing reactions on comments
 (#4457)

* Add APIs for reacting and unreacting on comments

* Add tests for Reactions APIs

* Fix s/create/delete typo

Co-authored-by: Nidhi <nidhi@appsmith.com>

* Deletion is successful if more than one are deleted

Co-authored-by: Nidhi <nidhi@appsmith.com>
---
 .../server/controllers/CommentController.java | 20 ++++
 .../com/appsmith/server/domains/Comment.java  | 13 +++
 .../repositories/CustomCommentRepository.java |  6 ++
 .../CustomCommentRepositoryImpl.java          | 47 ++++++++++
 .../server/services/CommentService.java       |  3 +
 .../server/services/CommentServiceImpl.java   | 35 ++++++-
 .../server/services/CommentServiceTest.java   | 92 +++++++++++++++++++
 7 files changed, 215 insertions(+), 1 deletion(-)

diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/CommentController.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/CommentController.java
index d11e22af62..7d37d09b08 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/CommentController.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/CommentController.java
@@ -85,4 +85,24 @@ public class CommentController extends BaseController<CommentService, Comment, S
                 .map(deletedResource -> new ResponseDTO<>(HttpStatus.OK.value(), deletedResource, null));
     }
 
+    @PostMapping("/{commentId}/reactions")
+    public Mono<ResponseDTO<Boolean>> createReaction(
+            @PathVariable String commentId,
+            @Valid @RequestBody Comment.Reaction reaction
+    ) {
+        log.debug("Going to create reaction on comment with id: {}", commentId);
+        return service.createReaction(commentId, reaction)
+                .map(isSaved -> new ResponseDTO<>(HttpStatus.OK.value(), isSaved, null));
+    }
+
+    @DeleteMapping("/{commentId}/reactions")
+    public Mono<ResponseDTO<Boolean>> deleteReaction(
+            @PathVariable String commentId,
+            @Valid @RequestBody Comment.Reaction reaction
+    ) {
+        log.debug("Going to delete reaction on comment with id: {}", commentId);
+        return service.deleteReaction(commentId, reaction)
+                .map(isSaved -> new ResponseDTO<>(HttpStatus.OK.value(), isSaved, null));
+    }
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Comment.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Comment.java
index dc67d106f4..178424aac4 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Comment.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/Comment.java
@@ -1,12 +1,14 @@
 package com.appsmith.server.domains;
 
 import com.appsmith.external.models.BaseDomain;
+import com.fasterxml.jackson.annotation.JsonFormat;
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import org.springframework.data.mongodb.core.mapping.Document;
 
+import java.util.Date;
 import java.util.List;
 import java.util.Map;
 
@@ -32,6 +34,8 @@ public class Comment extends BaseDomain {
 
     Body body;
 
+    List<Reaction> reactions;
+
     @Data
     public static class Body {
         List<Block> blocks;
@@ -79,4 +83,13 @@ public class Comment extends BaseDomain {
         }
     }
 
+    @Data
+    public static class Reaction {
+        String emoji;
+        String byUsername;
+        String byName;
+        @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm:ssX", timezone = "UTC")
+        Date createdAt;
+    }
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java
index 816b1e2ae4..38ce4c6d4d 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java
@@ -1,7 +1,13 @@
 package com.appsmith.server.repositories;
 
 import com.appsmith.server.domains.Comment;
+import com.mongodb.client.result.UpdateResult;
+import reactor.core.publisher.Mono;
 
 public interface CustomCommentRepository extends AppsmithRepository<Comment> {
 
+    Mono<UpdateResult> pushReaction(String commentId, Comment.Reaction reaction);
+
+    Mono<UpdateResult> deleteReaction(String commentId, Comment.Reaction reaction);
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java
index 0bb974fea9..78d187bd26 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java
@@ -1,10 +1,18 @@
 package com.appsmith.server.repositories;
 
 import com.appsmith.server.domains.Comment;
+import com.appsmith.server.domains.QComment;
+import com.mongodb.client.result.UpdateResult;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.data.mongodb.core.ReactiveMongoOperations;
 import org.springframework.data.mongodb.core.convert.MongoConverter;
+import org.springframework.data.mongodb.core.query.Criteria;
+import org.springframework.data.mongodb.core.query.Query;
+import org.springframework.data.mongodb.core.query.Update;
 import org.springframework.stereotype.Component;
+import reactor.core.publisher.Mono;
+
+import static org.springframework.data.mongodb.core.query.Criteria.where;
 
 @Component
 @Slf4j
@@ -14,4 +22,43 @@ public class CustomCommentRepositoryImpl extends BaseAppsmithRepositoryImpl<Comm
         super(mongoOperations, mongoConverter);
     }
 
+    /**
+     * Add a reaction, by a user, if the reaction by that user already doesn't exist on this comment.
+     * @param commentId UUID string of the comment to add the reaction to.
+     * @param reaction The reaction object to add to the comment.
+     * @return Mono that publishes an UpdateResult that will contain the number of reactions added. It's only ever 0 or 1.
+     */
+    @Override
+    public Mono<UpdateResult> pushReaction(String commentId, Comment.Reaction reaction) {
+        final String reactionsField = fieldName(QComment.comment.reactions);
+        return mongoOperations.updateFirst(
+                Query.query(new Criteria().andOperator(
+                        where("id").is(commentId),
+                        Criteria
+                                .where(reactionsField)
+                                .not()
+                                .elemMatch(where("emoji").is(reaction.getEmoji()).and("byUsername").is(reaction.getByUsername()))
+                )),
+                new Update().addToSet(reactionsField, reaction),
+                Comment.class
+        );
+    }
+
+    /**
+     * Atomically delete a reaction, by a user, if the reaction by that user exists on this comment.
+     * @param commentId UUID string of the comment on which to delete a reaction.
+     * @param reaction The reaction object to be deleted.
+     * @return Mono that publishes an UpdateResult that will contain the number of reactions deleted. It's usually 0 or 1, but can theoretically be more.
+     */
+    @Override
+    public Mono<UpdateResult> deleteReaction(String commentId, Comment.Reaction reaction) {
+        reaction.setByName(null);
+        reaction.setCreatedAt(null);
+        return mongoOperations.updateFirst(
+                Query.query(where("id").is(commentId)),
+                new Update().pull(fieldName(QComment.comment.reactions), reaction),
+                Comment.class
+        );
+    }
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentService.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentService.java
index 452b7ac4e8..4960633140 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentService.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentService.java
@@ -20,4 +20,7 @@ public interface CommentService extends CrudService<Comment, String> {
 
     Mono<CommentThread> deleteThread(String threadId);
 
+    Mono<Boolean> createReaction(String commentId, Comment.Reaction reaction);
+
+    Mono<Boolean> deleteReaction(String commentId, Comment.Reaction reaction);
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java
index c3a3b2d82f..432f0c84b1 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java
@@ -14,13 +14,13 @@ import com.appsmith.server.helpers.PolicyUtils;
 import com.appsmith.server.repositories.CommentRepository;
 import com.appsmith.server.repositories.CommentThreadRepository;
 import lombok.extern.slf4j.Slf4j;
+import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.data.mongodb.core.ReactiveMongoTemplate;
 import org.springframework.data.mongodb.core.convert.MongoConverter;
 import org.springframework.data.mongodb.core.query.Criteria;
 import org.springframework.data.mongodb.core.query.Query;
 import org.springframework.stereotype.Service;
-import org.springframework.util.CollectionUtils;
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
 import reactor.core.scheduler.Scheduler;
@@ -28,6 +28,7 @@ import reactor.core.scheduler.Scheduler;
 import javax.validation.Validator;
 import java.time.Instant;
 import java.util.ArrayList;
+import java.util.Date;
 import java.util.HashMap;
 import java.util.HashSet;
 import java.util.LinkedList;
@@ -271,4 +272,36 @@ public class CommentServiceImpl extends BaseService<CommentRepository, Comment,
                 .flatMap(analyticsService::sendDeleteEvent);
     }
 
+    @Override
+    public Mono<Boolean> createReaction(String commentId, Comment.Reaction reaction) {
+        return Mono.zip(
+                repository.findById(commentId, AclPermission.READ_COMMENT),
+                sessionUserService.getCurrentUser()
+        )
+                .flatMap(tuple -> {
+                    final User user = tuple.getT2();
+
+                    reaction.setByUsername(user.getUsername());
+                    reaction.setByName(user.getName());
+                    reaction.setCreatedAt(new Date(Instant.now().toEpochMilli()));
+
+                    return repository.pushReaction(commentId, reaction)
+                            .map(result -> result.getModifiedCount() == 1L);
+                });
+    }
+
+    @Override
+    public Mono<Boolean> deleteReaction(String commentId, Comment.Reaction reaction) {
+        return Mono.zip(
+                repository.findById(commentId, AclPermission.READ_COMMENT),
+                sessionUserService.getCurrentUser()
+        )
+                .flatMap(tuple -> {
+                    final User user = tuple.getT2();
+                    reaction.setByUsername(user.getUsername());
+                    return repository.deleteReaction(commentId, reaction)
+                            .map(result -> result.getModifiedCount() > 0);
+                });
+    }
+
 }
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/CommentServiceTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/CommentServiceTest.java
index 100e6d3301..7c29eb748d 100644
--- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/CommentServiceTest.java
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/CommentServiceTest.java
@@ -6,6 +6,7 @@ import com.appsmith.server.domains.Application;
 import com.appsmith.server.domains.Comment;
 import com.appsmith.server.domains.CommentThread;
 import com.appsmith.server.domains.Organization;
+import com.appsmith.server.repositories.CommentRepository;
 import lombok.extern.slf4j.Slf4j;
 import org.junit.Test;
 import org.junit.runner.RunWith;
@@ -33,6 +34,9 @@ public class CommentServiceTest {
     @Autowired
     CommentService commentService;
 
+    @Autowired
+    CommentRepository commentRepository;
+
     @Autowired
     ApplicationService applicationService;
 
@@ -98,6 +102,12 @@ public class CommentServiceTest {
         return comment;
     }
 
+    private Comment.Reaction makeReaction(String emoji) {
+        Comment.Reaction reaction = new Comment.Reaction();
+        reaction.setEmoji(emoji);
+        return reaction;
+    }
+
     @Test
     @WithUserDetails(value = "api_user")
     public void deleteValidComment() {
@@ -135,4 +145,86 @@ public class CommentServiceTest {
                 })
                 .verifyComplete();
     }
+
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void testAddReaction() {
+        Organization organization = new Organization();
+        organization.setName("ReactionsOrg");
+        Mono<Comment> reactionMono = organizationService
+                .create(organization)
+                .flatMap(org -> {
+                    Application testApplication = new Application();
+                    testApplication.setName("ReactionApp");
+                    return applicationPageService
+                            .createApplication(testApplication, org.getId());
+                })
+                .flatMap(application -> {
+                    final CommentThread thread = new CommentThread();
+                    thread.setApplicationId(application.getId());
+                    thread.setComments(List.of(makePlainTextComment("Test Comment")));
+                    return commentService.createThread(thread);
+                })
+                .flatMap(commentThread -> Mono.just(commentThread.getComments().get(0)))
+                .flatMap(comment -> {
+                    assert comment.getId() != null;
+                    return commentService
+                            .createReaction(comment.getId(), makeReaction("x"))
+                            .then(commentRepository.findById(comment.getId()));
+                })
+                .cache();
+
+        StepVerifier
+                .create(reactionMono)
+                .assertNext(comment -> {
+                    assertThat(comment.getReactions()).hasSize(1);
+                    Comment.Reaction r1 = comment.getReactions().get(0);
+                    assertThat(r1.getEmoji()).isEqualTo("x");
+                    assertThat(r1.getByName()).isEqualTo("api_user");
+                })
+                .verifyComplete();
+    }
+
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void testAddAndRemoveReaction() {
+        Organization organization = new Organization();
+        organization.setName("ReactionsOrg");
+        Mono<Comment> reactionMono = organizationService
+                .create(organization)
+                .flatMap(org -> {
+                    Application testApplication = new Application();
+                    testApplication.setName("ReactionApp");
+                    return applicationPageService
+                            .createApplication(testApplication, org.getId());
+                })
+                .flatMap(application -> {
+                    final CommentThread thread = new CommentThread();
+                    thread.setApplicationId(application.getId());
+                    thread.setComments(List.of(makePlainTextComment("Test Comment")));
+                    return commentService.createThread(thread);
+                })
+                .flatMap(commentThread -> Mono.just(commentThread.getComments().get(0)))
+                .flatMap(comment -> {
+                    assert comment.getId() != null;
+                    return Mono.when(
+                            commentService.createReaction(comment.getId(), makeReaction("x")),
+                            commentService.createReaction(comment.getId(), makeReaction("y"))
+                    )
+                            .then(commentService.deleteReaction(comment.getId(), makeReaction("x")))
+                            .then(commentRepository.findById(comment.getId()));
+                })
+                .cache();
+
+        StepVerifier
+                .create(reactionMono)
+                .assertNext(comment -> {
+                    assertThat(comment.getReactions()).hasSize(1);
+                    Comment.Reaction r1 = comment.getReactions().get(0);
+                    assertThat(r1.getEmoji()).isEqualTo("y");
+                    assertThat(r1.getByName()).isEqualTo("api_user");
+                })
+                .verifyComplete();
+    }
+
 }

From ea451ef061db7b9a7b5805171f418f9892a81ade Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi@appsmith.com>
Date: Thu, 13 May 2021 13:30:23 +0530
Subject: [PATCH 48/76] Add default configs for prod and tests (#4464)

* Added default cs config for prod and tests

* Env variable for new installations

* K8s defaults
---
 .github/workflows/client-test.yml             | 4 ++--
 app/client/public/index.html                  | 2 +-
 deploy/k8s/scripts/appsmith-configmap.yaml.sh | 1 +
 deploy/k8s/scripts/nginx-configmap.yaml       | 1 +
 deploy/template/docker.env.sh                 | 4 ++++
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/client-test.yml b/.github/workflows/client-test.yml
index d83330c8d1..a124259ceb 100644
--- a/.github/workflows/client-test.yml
+++ b/.github/workflows/client-test.yml
@@ -206,7 +206,7 @@ jobs:
             --env APPSMITH_ENCRYPTION_PASSWORD=password \
             --env APPSMITH_ENCRYPTION_SALT=salt \
             --env APPSMITH_IS_SELF_HOSTED=false \
-            --env APPSMITH_CLOUD_SERVICES_BASE_URL= \
+            --env APPSMITH_CLOUD_SERVICES_BASE_URL=https://release-cs.appsmith.com\
             --env APPSMITH_CLOUD_SERVICES_USERNAME= \
             --env APPSMITH_CLOUD_SERVICES_PASSWORD= \
             ${{ secrets.DOCKER_HUB_ORGANIZATION }}/appsmith-server:release
@@ -221,7 +221,7 @@ jobs:
             --env APPSMITH_ENCRYPTION_PASSWORD=password \
             --env APPSMITH_ENCRYPTION_SALT=salt \
             --env APPSMITH_IS_SELF_HOSTED=false \
-            --env APPSMITH_CLOUD_SERVICES_BASE_URL= \
+            --env APPSMITH_CLOUD_SERVICES_BASE_URL=https://release-cs.appsmith.com\
             --env APPSMITH_CLOUD_SERVICES_USERNAME= \
             --env APPSMITH_CLOUD_SERVICES_PASSWORD= \
             ${{ secrets.DOCKER_HUB_ORGANIZATION }}/appsmith-server:nightly
diff --git a/app/client/public/index.html b/app/client/public/index.html
index 558f9ccca9..70250975eb 100755
--- a/app/client/public/index.html
+++ b/app/client/public/index.html
@@ -199,7 +199,7 @@
       intercomAppID: APP_ID,
       mailEnabled: parseConfig("__APPSMITH_MAIL_ENABLED__"),
       disableTelemetry: DISABLE_TELEMETRY === "" || DISABLE_TELEMETRY,
-      cloudServicesBaseUrl: parseConfig("__APPSMITH_CLOUD_SERVICES_BASE_URL__")
+      cloudServicesBaseUrl: parseConfig("__APPSMITH_CLOUD_SERVICES_BASE_URL__") || "https://cs.appsmith.com"
     };
 
   </script>
diff --git a/deploy/k8s/scripts/appsmith-configmap.yaml.sh b/deploy/k8s/scripts/appsmith-configmap.yaml.sh
index d664292f6f..463b99f299 100644
--- a/deploy/k8s/scripts/appsmith-configmap.yaml.sh
+++ b/deploy/k8s/scripts/appsmith-configmap.yaml.sh
@@ -30,4 +30,5 @@ data:
   APPSMITH_REDIS_URL: redis://redis-service:6379
   APPSMITH_MONGODB_URI: $mongo_protocol$encoded_mongo_root_user:$encoded_mongo_root_password@$mongo_host/$mongo_db?retryWrites=true&authSource=admin
   APPSMITH_DISABLE_TELEMETRY: "$disable_telemetry"
+  APPSMITH_CLOUD_SERVICES_BASE_URL: "https://cs.appsmith.com"
 EOF
diff --git a/deploy/k8s/scripts/nginx-configmap.yaml b/deploy/k8s/scripts/nginx-configmap.yaml
index b2fbc721bf..b9253d36bf 100644
--- a/deploy/k8s/scripts/nginx-configmap.yaml
+++ b/deploy/k8s/scripts/nginx-configmap.yaml
@@ -36,6 +36,7 @@ data:
         sub_filter __APPSMITH_INTERCOM_APP_ID__ '${APPSMITH_INTERCOM_APP_ID}';
         sub_filter __APPSMITH_MAIL_ENABLED__ '${APPSMITH_MAIL_ENABLED}';
         sub_filter __APPSMITH_DISABLE_TELEMETRY__ '${APPSMITH_DISABLE_TELEMETRY}';
+        sub_filter __APPSMITH_CLOUD_SERVICES_BASE_URL__ '${APPSMITH_CLOUD_SERVICES_BASE_URL}';
     }
 
     location /f {
diff --git a/deploy/template/docker.env.sh b/deploy/template/docker.env.sh
index 6bbeb5e901..342287dbc5 100644
--- a/deploy/template/docker.env.sh
+++ b/deploy/template/docker.env.sh
@@ -59,4 +59,8 @@ APPSMITH_DISABLE_TELEMETRY=$disable_telemetry
 # APPSMITH_CODEC_SIZE=
 # *******************************
 
+# ****** CLOUD SERVICES *******
+APPSMITH_CLOUD_SERVICES_BASE_URL=https://cs.appsmith.com
+# *******************************
+
 EOF

From 8ad7eecdebe3f93a4149164c7912b6d2fb2ab853 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Thu, 13 May 2021 14:05:39 +0530
Subject: [PATCH 49/76] - Auto fix sort ddestructured props rule

---
 app/client/.eslintrc.json                     |  2 +-
 app/client/src/api/ImportApi.ts               |  2 +-
 .../AppComments/AppCommentsHeader.tsx         |  2 +-
 .../src/comments/CommentCard/CommentCard.tsx  |  6 +--
 .../CommentCard/CommentContextMenu.tsx        |  2 +-
 .../inlineComments/InlineCommentPin.tsx       |  2 +-
 .../UnpublishedCommentThread.tsx              |  4 +-
 .../src/comments/tests/Comments.test.tsx      |  4 +-
 app/client/src/components/ads/Button.tsx      |  2 +-
 .../src/components/ads/DraggableList.tsx      |  6 +--
 .../components/ads/DraggableListComponent.tsx |  8 ++--
 .../src/components/ads/EditableText.tsx       |  6 +--
 app/client/src/components/ads/EmojiPicker.tsx |  2 +-
 .../src/components/ads/MentionsInput.tsx      | 10 ++---
 .../src/components/ads/ScrollIndicator.tsx    |  8 ++--
 app/client/src/components/ads/Table.tsx       |  6 +--
 app/client/src/components/ads/TextInput.tsx   |  2 +-
 .../src/components/ads/TreeDropdown.tsx       | 10 ++---
 .../designSystems/appsmith/ChartComponent.tsx |  2 +-
 .../appsmith/CreatableDropdown.tsx            | 10 ++---
 .../appsmith/DraggableListComponent.tsx       | 10 ++---
 .../designSystems/appsmith/Dropdown.tsx       |  2 +-
 .../appsmith/TableComponent/CascadeFields.tsx | 12 +++---
 .../appsmith/TableComponent/Table.tsx         |  4 +-
 .../appsmith/TextInputComponent.tsx           |  4 +-
 .../designSystems/appsmith/VideoComponent.tsx | 14 +++----
 .../blueprint/DropdownComponent.tsx           |  2 +-
 .../blueprint/SwitchComponent.tsx             |  6 +--
 .../designSystems/blueprint/TextComponent.tsx | 12 +++---
 .../editorComponents/ActionCreator.tsx        |  2 +-
 .../CodeEditor/EvaluatedValuePopup.tsx        |  2 +-
 .../editorComponents/CodeEditor/index.tsx     | 28 +++++++-------
 .../Debugger/DebuggerLogs.tsx                 |  2 +-
 .../editorComponents/Debugger/EntityLink.tsx  |  2 +-
 .../editorComponents/DragLayerComponent.tsx   |  2 +-
 .../editorComponents/DraggableComponent.tsx   |  2 +-
 .../editorComponents/DropTargetComponent.tsx  |  2 +-
 .../EditorContextProvider.tsx                 | 16 ++++----
 .../editorComponents/EntityNameComponent.tsx  |  4 +-
 .../GlobalSearch/ActionLink.tsx               |  2 +-
 .../GlobalSearch/AlgoliaSearchWrapper.tsx     |  2 +-
 .../GlobalSearch/GlobalSearchHotKeys.tsx      |  2 +-
 .../GlobalSearch/SearchModal.tsx              |  2 +-
 .../GlobalSearch/SearchResults.tsx            |  8 ++--
 .../editorComponents/GlobalSearch/index.tsx   |  2 +-
 .../GlobalSearch/parseDocumentationContent.ts |  2 +-
 .../GlobalSearch/useRecentEntities.tsx        |  2 +-
 .../editorComponents/NavBarItem.tsx           | 10 ++---
 .../editorComponents/ResizableComponent.tsx   |  2 +-
 .../fields/EmbeddedDatasourcePathField.tsx    |  6 +--
 .../formControls/CheckboxControl.tsx          |  2 +-
 .../formControls/DropDownControl.tsx          |  2 +-
 .../formControls/DynamicInputTextControl.tsx  |  4 +-
 .../formControls/DynamicTextFieldControl.tsx  |  6 +--
 .../formControls/FilePickerControl.tsx        |  2 +-
 .../formControls/FixedKeyInputControl.tsx     |  8 ++--
 .../formControls/InputNumberControl.tsx       |  8 ++--
 .../formControls/InputTextControl.tsx         | 20 +++++-----
 .../components/formControls/SwitchControl.tsx |  4 +-
 .../propertyControls/ButtonTabControl.tsx     |  4 +-
 .../propertyControls/ChartDataControl.tsx     |  8 ++--
 .../propertyControls/CodeEditorControl.tsx    |  8 ++--
 .../ComputeTablePropertyControl.tsx           | 16 ++++----
 .../CustomFusionChartControl.tsx              |  4 +-
 .../propertyControls/IconTabControl.tsx       |  4 +-
 .../propertyControls/InputTextControl.tsx     | 18 ++++-----
 .../PrimaryColumnsControl.tsx                 |  8 ++--
 .../propertyControls/StepControl.tsx          |  2 +-
 .../propertyControls/TabControl.tsx           |  2 +-
 app/client/src/constants/DefaultTheme.tsx     |  6 +--
 .../src/entities/DataTree/dataTreeFactory.ts  |  6 +--
 .../viewer/GetAppViewerHeaderCTA.tsx          |  2 +-
 .../src/pages/AppViewer/viewer/PageTabs.tsx   |  4 +-
 .../AppViewer/viewer/PageTabsContainer.tsx    |  4 +-
 .../Applications/CreateApplicationForm.tsx    |  2 +-
 .../Applications/ForkApplicationModal.tsx     |  2 +-
 .../ProductUpdatesModal/ReleaseComponent.tsx  |  2 +-
 .../ProductUpdatesModal/index.tsx             |  2 +-
 app/client/src/pages/Applications/index.tsx   |  6 +--
 .../pages/Editor/APIEditor/ApiHomeScreen.tsx  | 26 ++++++-------
 .../src/pages/Editor/APIEditor/Form.tsx       | 14 +++----
 .../pages/Editor/APIEditor/PostBodyData.tsx   |  8 ++--
 .../Editor/APIEditor/ProviderTemplates.tsx    |  2 +-
 .../Editor/APIEditor/RapidApiEditorForm.tsx   | 14 +++----
 .../Editor/APIEditor/ResultPagination.tsx     |  8 ++--
 .../src/pages/Editor/APIEditor/index.tsx      | 14 +++----
 .../pages/Editor/DataSourceEditor/DBForm.tsx  | 10 ++---
 .../DataSourceEditor/DatasourceHome.tsx       |  6 +--
 .../DataSourceEditor/DatasourceSection.tsx    |  2 +-
 .../Editor/DataSourceEditor/JSONtoForm.tsx    |  2 +-
 .../RestAPIDatasourceForm.tsx                 | 12 +++---
 .../pages/Editor/DataSourceEditor/index.tsx   | 38 +++++++++----------
 app/client/src/pages/Editor/EditorHeader.tsx  | 12 +++---
 app/client/src/pages/Editor/EditorSidebar.tsx |  4 +-
 .../src/pages/Editor/Explorer/Entity/Name.tsx |  2 +-
 .../pages/Editor/Explorer/EntityExplorer.tsx  |  2 +-
 .../pages/Editor/Explorer/TreeDropdown.tsx    | 10 ++---
 .../Editor/Explorer/Widgets/WidgetEntity.tsx  |  4 +-
 .../PropertyPane/PanelPropertiesEditor.tsx    |  4 +-
 .../Editor/PropertyPane/PropertyControl.tsx   |  6 +--
 .../Editor/QueryEditor/EditorJSONtoForm.tsx   | 20 +++++-----
 .../Editor/QueryEditor/QueryHomeScreen.tsx    |  4 +-
 .../src/pages/Editor/QueryEditor/Table.tsx    |  4 +-
 .../pages/Editor/QueryEditor/TemplateMenu.tsx |  4 +-
 .../src/pages/Editor/QueryEditor/index.tsx    | 12 +++---
 .../pages/Editor/SaaSEditor/ActionForm.tsx    |  6 +--
 .../Editor/SaaSEditor/DatasourceForm.tsx      |  8 ++--
 .../src/pages/Editor/SaaSEditor/ListView.tsx  |  8 ++--
 .../src/pages/Editor/ShareApplicationForm.tsx |  8 ++--
 app/client/src/pages/Editor/routes.tsx        |  2 +-
 app/client/src/pages/Editor/utils.ts          |  2 +-
 .../src/pages/UserAuth/ForgotPassword.tsx     |  2 +-
 app/client/src/pages/UserAuth/Login.tsx       |  2 +-
 .../src/pages/UserAuth/ResetPassword.tsx      |  8 ++--
 app/client/src/pages/UserAuth/SignUp.tsx      |  2 +-
 app/client/src/pages/UserAuth/helpers.ts      |  4 +-
 .../src/pages/common/ErrorPageHeader.tsx      |  2 +-
 app/client/src/pages/common/NotFound.tsx      |  2 +-
 .../pages/organization/AppInviteUsersForm.tsx | 10 ++---
 .../organization/CreateOrganizationForm.tsx   |  4 +-
 app/client/src/pages/organization/Members.tsx |  4 +-
 .../pages/organization/OrgInviteUsersForm.tsx | 12 +++---
 .../commentsReducer/commentsReducer.ts        |  4 +-
 .../handleAddCommentToThreadSuccess.ts        |  2 +-
 .../handleCreateNewCommentThreadSuccess.ts    |  2 +-
 .../src/reducers/uiReducers/editorReducer.tsx |  6 +--
 .../uiReducers/propertyPaneReducer.tsx        |  2 +-
 .../reducers/uiReducers/queryPaneReducer.ts   |  2 +-
 app/client/src/resizable/index.tsx            |  2 +-
 app/client/src/sagas/ActionExecutionSagas.ts  |  2 +-
 app/client/src/sagas/ActionSagas.ts           |  2 +-
 app/client/src/sagas/ApiPaneSagas.ts          |  4 +-
 app/client/src/sagas/ApplicationSagas.tsx     |  4 +-
 app/client/src/sagas/CommentSagas/index.ts    |  4 +-
 app/client/src/sagas/CurlImportSagas.ts       |  2 +-
 app/client/src/sagas/DatasourcesSagas.ts      |  2 +-
 app/client/src/sagas/ErrorSagas.tsx           |  4 +-
 app/client/src/sagas/EvaluationsSaga.ts       |  4 +-
 app/client/src/sagas/OrgSagas.ts              |  2 +-
 app/client/src/sagas/PageSagas.tsx            |  4 +-
 app/client/src/sagas/QueryPaneSagas.ts        |  8 ++--
 app/client/src/sagas/RecentEntitiesSagas.ts   |  2 +-
 app/client/src/sagas/SaaSPaneSagas.ts         |  2 +-
 app/client/src/sagas/WidgetBlueprintSagas.ts  |  2 +-
 app/client/src/sagas/WidgetOperationSagas.tsx | 38 +++++++++----------
 app/client/src/sagas/userSagas.tsx            | 12 +++---
 app/client/src/selectors/editorSelectors.tsx  |  2 +-
 .../src/utils/autocomplete/TernServer.ts      |  2 +-
 .../src/utils/hooks/useDynamicAppLayout.tsx   |  2 +-
 .../src/utils/hooks/useIsScrolledToBottom.tsx |  2 +-
 app/client/src/widgets/ContainerWidget.tsx    |  2 +-
 app/client/src/widgets/DropdownWidget.tsx     |  2 +-
 .../src/widgets/ListWidget/ListWidget.tsx     | 10 ++---
 app/client/src/widgets/MetaHOC.tsx            |  2 +-
 app/client/src/widgets/TableWidget/index.tsx  |  2 +-
 .../src/widgets/Tabs/TabsWidget.test.tsx      |  2 +-
 app/client/src/widgets/Tabs/TabsWidget.tsx    |  2 +-
 app/client/src/widgets/VideoWidget.tsx        |  2 +-
 app/client/src/workers/DataTreeEvaluator.ts   |  4 +-
 app/client/src/workers/evaluation.worker.ts   |  8 ++--
 .../src/workers/evaluationSubstitution.ts     |  4 +-
 app/client/src/workers/evaluationUtils.ts     |  2 +-
 app/client/src/workers/validations.ts         |  8 ++--
 163 files changed, 468 insertions(+), 468 deletions(-)

diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index 98978c9688..441567e873 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -43,7 +43,7 @@
       "allowFunctions":  false,
       "allowBind": false
     }],
-    "no-shadow": ["error", { "builtinGlobals": true }]
+    "no-shadow": ["warn", { "builtinGlobals": true }]
   },
   "settings": {
     "react": {
diff --git a/app/client/src/api/ImportApi.ts b/app/client/src/api/ImportApi.ts
index 310d4c5515..eac6e0ad76 100644
--- a/app/client/src/api/ImportApi.ts
+++ b/app/client/src/api/ImportApi.ts
@@ -14,7 +14,7 @@ class CurlImportApi extends Api {
   static curlImportURL = `v1/import`;
 
   static curlImport(request: CurlImportRequest): AxiosPromise<ApiResponse> {
-    const { pageId, name, curl, organizationId } = request;
+    const { curl, name, organizationId, pageId } = request;
     return Api.post(CurlImportApi.curlImportURL, curl, {
       type: "CURL",
       pageId,
diff --git a/app/client/src/comments/AppComments/AppCommentsHeader.tsx b/app/client/src/comments/AppComments/AppCommentsHeader.tsx
index 5fb37c55a6..8a2e1a7f39 100644
--- a/app/client/src/comments/AppComments/AppCommentsHeader.tsx
+++ b/app/client/src/comments/AppComments/AppCommentsHeader.tsx
@@ -26,7 +26,7 @@ type Props = {
 };
 
 const AppCommentsHeader = withTheme(
-  ({ onClose, isOpen, setIsOpen, theme }: Props) => {
+  ({ isOpen, onClose, setIsOpen, theme }: Props) => {
     const showCommentThreads = useCallback(() => {
       if (!isOpen) setIsOpen(true);
     }, [isOpen]);
diff --git a/app/client/src/comments/CommentCard/CommentCard.tsx b/app/client/src/comments/CommentCard/CommentCard.tsx
index ed09cb9ccd..05374ec28c 100644
--- a/app/client/src/comments/CommentCard/CommentCard.tsx
+++ b/app/client/src/comments/CommentCard/CommentCard.tsx
@@ -91,10 +91,10 @@ const useSelectCommentUsingQuery = (commentId: string) => {
 
 function CommentCard({
   comment,
-  isParentComment,
-  toggleResolved,
-  resolved,
   commentThreadId,
+  isParentComment,
+  resolved,
+  toggleResolved,
 }: {
   comment: Comment;
   isParentComment?: boolean;
diff --git a/app/client/src/comments/CommentCard/CommentContextMenu.tsx b/app/client/src/comments/CommentCard/CommentContextMenu.tsx
index bef783b01c..e9b525a5c4 100644
--- a/app/client/src/comments/CommentCard/CommentContextMenu.tsx
+++ b/app/client/src/comments/CommentCard/CommentContextMenu.tsx
@@ -58,7 +58,7 @@ type Props = {
   deleteComment: typeof noop;
 };
 
-function CommentContextMenu({ pin, copyCommentLink, deleteComment }: Props) {
+function CommentContextMenu({ copyCommentLink, deleteComment, pin }: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   const options = useMemo(
diff --git a/app/client/src/comments/inlineComments/InlineCommentPin.tsx b/app/client/src/comments/inlineComments/InlineCommentPin.tsx
index 6a265d8a40..65e1a367cc 100644
--- a/app/client/src/comments/inlineComments/InlineCommentPin.tsx
+++ b/app/client/src/comments/inlineComments/InlineCommentPin.tsx
@@ -47,7 +47,7 @@ const useSelectCommentThreadUsingQuery = (commentThreadId: string) => {
 const InlineCommentPin = withTheme(
   ({ commentThreadId, theme }: { commentThreadId: string; theme: Theme }) => {
     const commentThread = useSelector(commentThreadsSelector(commentThreadId));
-    const { top, left } = get(commentThread, "position", {
+    const { left, top } = get(commentThread, "position", {
       top: 0,
       left: 0,
     });
diff --git a/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx b/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
index 5861dbd56c..df54754a7f 100644
--- a/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
+++ b/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
@@ -27,13 +27,13 @@ const CommentTriggerContainer = styled.div<{ top: number; left: number }>`
 // TODO look into drying this up using comment thread component
 const UnpublishedCommentThread = withTheme(
   ({
-    theme,
     commentThread,
+    theme,
   }: {
     commentThread: CommentThread;
     theme: Theme;
   }) => {
-    const { top, left } = get(commentThread, "position", {
+    const { left, top } = get(commentThread, "position", {
       top: 0,
       left: 0,
     });
diff --git a/app/client/src/comments/tests/Comments.test.tsx b/app/client/src/comments/tests/Comments.test.tsx
index 07ad0806b6..dd3cb0fb05 100644
--- a/app/client/src/comments/tests/Comments.test.tsx
+++ b/app/client/src/comments/tests/Comments.test.tsx
@@ -49,7 +49,7 @@ describe("Comment threads", () => {
   });
 
   it("can be created", async (done) => {
-    const { getByDataCy, getAllByDataCy, findByDataCy, findByText } = render(
+    const { findByDataCy, findByText, getAllByDataCy, getByDataCy } = render(
       <OverlayCommentsWrapper refId="0">
         <div style={{ height: 100, width: 100 }} />
       </OverlayCommentsWrapper>,
@@ -87,7 +87,7 @@ describe("Comment threads", () => {
     done();
   });
   it("accept replies", async (done) => {
-    const { getByDataCy, findByText, findByDataCy } = render(
+    const { findByDataCy, findByText, getByDataCy } = render(
       <OverlayCommentsWrapper refId="0">
         <div style={{ height: 100, width: 100 }} />
       </OverlayCommentsWrapper>,
diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx
index ea97229575..b380b1f70f 100644
--- a/app/client/src/components/ads/Button.tsx
+++ b/app/client/src/components/ads/Button.tsx
@@ -380,7 +380,7 @@ function TextLoadingState({ text }: { text?: string }) {
   return <VisibilityWrapper>{text}</VisibilityWrapper>;
 }
 
-function IconLoadingState({ size, icon }: { size?: Size; icon?: IconName }) {
+function IconLoadingState({ icon, size }: { size?: Size; icon?: IconName }) {
   return <Icon invisible name={icon} size={IconSizeProp(size)} />;
 }
 
diff --git a/app/client/src/components/ads/DraggableList.tsx b/app/client/src/components/ads/DraggableList.tsx
index 79a03ed66d..a14d9bc176 100644
--- a/app/client/src/components/ads/DraggableList.tsx
+++ b/app/client/src/components/ads/DraggableList.tsx
@@ -32,7 +32,7 @@ const updateSpringStyles = (
 // Styles when items are dragged/idle
 const dragIdleSpringStyles = (
   order: Array<number>,
-  { down, originalIndex, curIndex, y, itemHeight }: SpringStyleProps,
+  { curIndex, down, itemHeight, originalIndex, y }: SpringStyleProps,
 ) => (index: number) => {
   // picked/dragged item style
   if (down && index === originalIndex) {
@@ -59,7 +59,7 @@ const DraggableListWrapper = styled.div`
   }
 `;
 
-function DraggableList({ items, ItemRenderer, onUpdate, itemHeight }: any) {
+function DraggableList({ itemHeight, ItemRenderer, items, onUpdate }: any) {
   // order of items in the list
   const order = useRef<any>(items.map((_: any, index: any) => index));
 
@@ -119,7 +119,7 @@ function DraggableList({ items, ItemRenderer, onUpdate, itemHeight }: any) {
       }}
       style={{ height: items.length * itemHeight }}
     >
-      {springs.map(({ zIndex, y, scale }, i) => (
+      {springs.map(({ scale, y, zIndex }, i) => (
         <animated.div
           {...bind(i)}
           data-rbd-draggable-id={items[i].id}
diff --git a/app/client/src/components/ads/DraggableListComponent.tsx b/app/client/src/components/ads/DraggableListComponent.tsx
index 2f12242fe0..6273e73048 100644
--- a/app/client/src/components/ads/DraggableListComponent.tsx
+++ b/app/client/src/components/ads/DraggableListComponent.tsx
@@ -45,15 +45,15 @@ export class DroppableComponent extends React.Component<
 
   render() {
     const {
-      renderComponent,
       deleteOption,
-      updateOption,
-      toggleVisibility,
       onEdit,
+      renderComponent,
+      toggleVisibility,
+      updateOption,
     } = this.props;
     return (
       <DraggableList
-        ItemRenderer={({ item, index }: any) =>
+        ItemRenderer={({ index, item }: any) =>
           renderComponent({
             deleteOption,
             updateOption,
diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
index bca0528165..9fc1374617 100644
--- a/app/client/src/components/ads/EditableText.tsx
+++ b/app/client/src/components/ads/EditableText.tsx
@@ -154,11 +154,11 @@ const IconWrapper = styled.div`
 
 export function EditableText(props: EditableTextProps) {
   const {
-    onBlur,
-    onTextChanged,
-    isInvalid: inputValidation,
     defaultValue,
     isEditingDefault,
+    isInvalid: inputValidation,
+    onBlur,
+    onTextChanged,
     valueTransform,
   } = props;
   const [isEditing, setIsEditing] = useState(!!isEditingDefault);
diff --git a/app/client/src/components/ads/EmojiPicker.tsx b/app/client/src/components/ads/EmojiPicker.tsx
index 7829e7ec0e..719abcd789 100644
--- a/app/client/src/components/ads/EmojiPicker.tsx
+++ b/app/client/src/components/ads/EmojiPicker.tsx
@@ -8,8 +8,8 @@ import { Theme } from "constants/DefaultTheme";
 // TODO remove: (trigger tests)
 const EmojiPicker = withTheme(
   ({
-    theme,
     onSelectEmoji,
+    theme,
   }: {
     theme: Theme;
     onSelectEmoji: (e: React.MouseEvent, emojiObject: IEmojiData) => void;
diff --git a/app/client/src/components/ads/MentionsInput.tsx b/app/client/src/components/ads/MentionsInput.tsx
index 94525cb16f..1c2b8c2031 100644
--- a/app/client/src/components/ads/MentionsInput.tsx
+++ b/app/client/src/components/ads/MentionsInput.tsx
@@ -25,13 +25,13 @@ type Props = {
 };
 
 function MentionsInput({
-  onSubmit,
-  suggestions,
-  onSearchSuggestions,
-  editorState,
-  setEditorState,
   autoFocus,
+  editorState,
+  onSearchSuggestions,
+  onSubmit,
   placeholder,
+  setEditorState,
+  suggestions,
 }: Props) {
   const ref = useRef<Editor | null>(null);
   const [open, setOpen] = useState(false);
diff --git a/app/client/src/components/ads/ScrollIndicator.tsx b/app/client/src/components/ads/ScrollIndicator.tsx
index c9219337b0..7ffc3fafef 100644
--- a/app/client/src/components/ads/ScrollIndicator.tsx
+++ b/app/client/src/components/ads/ScrollIndicator.tsx
@@ -53,11 +53,11 @@ interface Props {
   mode?: "DARK" | "LIGHT";
 }
 function ScrollIndicator({
-  containerRef,
-  top,
-  bottom,
-  right,
   alwaysShowScrollbar,
+  bottom,
+  containerRef,
+  right,
+  top,
 }: Props) {
   const [{ thumbPosition }, setThumbPosition] = useSpring<{
     thumbPosition: number;
diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx
index fdfd1501be..2c1f3d8e5c 100644
--- a/app/client/src/components/ads/Table.tsx
+++ b/app/client/src/components/ads/Table.tsx
@@ -93,14 +93,14 @@ interface TableProps {
 }
 
 function Table(props: TableProps) {
-  const { data, columns } = props;
+  const { columns, data } = props;
 
   const {
-    getTableProps,
     getTableBodyProps,
+    getTableProps,
     headerGroups,
-    rows,
     prepareRow,
+    rows,
   } = useTable({ columns, data }, useSortBy);
 
   return (
diff --git a/app/client/src/components/ads/TextInput.tsx b/app/client/src/components/ads/TextInput.tsx
index 633528236b..4fc64505d0 100644
--- a/app/client/src/components/ads/TextInput.tsx
+++ b/app/client/src/components/ads/TextInput.tsx
@@ -84,7 +84,7 @@ const boxStyles = (
 const StyledInput = styled((props) => {
   // we are removing non input related props before passing them in the components
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { inputStyle, inputRef, dataType, theme, ...inputProps } = props;
+  const { dataType, inputRef, inputStyle, theme, ...inputProps } = props;
   return props.asyncControl ? (
     <AsyncControllableInput
       {...inputProps}
diff --git a/app/client/src/components/ads/TreeDropdown.tsx b/app/client/src/components/ads/TreeDropdown.tsx
index bede261783..3796ecedd1 100644
--- a/app/client/src/components/ads/TreeDropdown.tsx
+++ b/app/client/src/components/ads/TreeDropdown.tsx
@@ -137,13 +137,13 @@ function getSelectedOption(
 
 export default function TreeDropdown(props: TreeDropdownProps) {
   const {
-    selectedValue,
     defaultText,
-    optionTree,
-    onSelect,
-    getDefaults,
-    selectedLabelModifier,
     displayValue,
+    getDefaults,
+    onSelect,
+    optionTree,
+    selectedLabelModifier,
+    selectedValue,
     toggle,
   } = props;
   const selectedOption = getSelectedOption(
diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
index 43b3bf3b7b..441df4641a 100644
--- a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -72,7 +72,7 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   chartInstance = new FusionCharts();
 
   getChartType = () => {
-    const { chartType, allowHorizontalScroll, chartData } = this.props;
+    const { allowHorizontalScroll, chartData, chartType } = this.props;
     const dataLength = Object.keys(chartData).length;
     const isMSChart = dataLength > 1;
     switch (chartType) {
diff --git a/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx b/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
index d6465d62a9..7220d1656c 100644
--- a/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
@@ -77,14 +77,14 @@ const selectStyles = {
 class CreatableDropdown extends React.Component<DropdownProps> {
   render() {
     const {
-      placeholder,
-      options,
-      isLoading,
-      input,
-      noOptionsMessage,
       components,
+      input,
       inputValue,
+      isLoading,
+      noOptionsMessage,
       onInputChange,
+      options,
+      placeholder,
     } = this.props;
     const optionalProps: Partial<DropdownProps> = {};
     if (noOptionsMessage) optionalProps.noOptionsMessage = noOptionsMessage;
diff --git a/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx b/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
index ca1fb37219..967ef2a981 100644
--- a/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/DraggableListComponent.tsx
@@ -81,16 +81,16 @@ export class DroppableComponent extends React.Component<
 
   render() {
     const {
-      renderComponent,
       deleteOption,
-      updateOption,
-      toggleVisibility,
       onEdit,
+      renderComponent,
+      toggleVisibility,
+      updateOption,
     } = this.props;
     return (
       <DragDropContext onDragEnd={this.onDragEnd}>
         <Droppable droppableId="droppable">
-          {({ innerRef, droppableProps, placeholder }) => (
+          {({ droppableProps, innerRef, placeholder }) => (
             <DroppableWrapper
               ref={innerRef as React.Ref<HTMLDivElement>}
               {...droppableProps}
@@ -103,7 +103,7 @@ export class DroppableComponent extends React.Component<
                       index={index}
                       key={item.id}
                     >
-                      {({ innerRef, draggableProps, dragHandleProps }) => (
+                      {({ draggableProps, dragHandleProps, innerRef }) => (
                         <ItemWrapper
                           ref={innerRef as React.Ref<HTMLDivElement>}
                           {...draggableProps}
diff --git a/app/client/src/components/designSystems/appsmith/Dropdown.tsx b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
index ecade3fff9..92e1a76645 100644
--- a/app/client/src/components/designSystems/appsmith/Dropdown.tsx
+++ b/app/client/src/components/designSystems/appsmith/Dropdown.tsx
@@ -53,7 +53,7 @@ const selectStyles = {
 };
 
 export function BaseDropdown(props: DropdownProps) {
-  const { input, customSelectStyles } = props;
+  const { customSelectStyles, input } = props;
   return (
     <Select
       styles={{ ...selectStyles, ...customSelectStyles }}
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx
index f0925d75e3..bbf90c2653 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/CascadeFields.tsx
@@ -433,7 +433,7 @@ function CascadeField(props: CascadeFieldProps) {
 }
 
 function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
-  const { index, removeFilter, applyFilter, hasAnyFilters } = props;
+  const { applyFilter, hasAnyFilters, index, removeFilter } = props;
   const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state);
   const handleRemoveFilter = () => {
     dispatch({ type: CascadeFieldActionTypes.DELETE_FILTER });
@@ -470,16 +470,16 @@ function Fields(props: CascadeFieldProps & { state: CascadeFieldState }) {
   };
 
   const {
-    operator,
     column,
     condition,
-    showConditions,
-    value,
-    showInput,
-    showDateInput,
     conditions,
     isDeleted,
     isUpdate,
+    operator,
+    showConditions,
+    showDateInput,
+    showInput,
+    value,
   } = state;
   useEffect(() => {
     if (!isDeleted && isUpdate) {
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
index aceab79e54..cfc1b0bb85 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx
@@ -111,12 +111,12 @@ export function Table(props: TableProps) {
   const pageCount = Math.ceil(props.data.length / props.pageSize);
   const currentPageIndex = props.pageNo < pageCount ? props.pageNo : 0;
   const {
-    getTableProps,
     getTableBodyProps,
+    getTableProps,
     headerGroups,
-    prepareRow,
     page,
     pageOptions,
+    prepareRow,
     state,
   } = useTable(
     {
diff --git a/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx b/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
index b6464432aa..4703969f05 100644
--- a/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TextInputComponent.tsx
@@ -109,11 +109,11 @@ export class BaseTextInput extends Component<TextInputProps, TextInputState> {
   };
   render() {
     const {
+      className,
       input,
       meta,
-      showError,
-      className,
       refHandler,
+      showError,
       ...rest
     } = this.props;
     const hasError = !!(
diff --git a/app/client/src/components/designSystems/appsmith/VideoComponent.tsx b/app/client/src/components/designSystems/appsmith/VideoComponent.tsx
index b24fda9851..ab6faffd7c 100644
--- a/app/client/src/components/designSystems/appsmith/VideoComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/VideoComponent.tsx
@@ -29,18 +29,18 @@ const Error = styled.span``;
 
 export default function VideoComponent(props: VideoComponentProps) {
   const {
-    url,
     autoplay,
     controls,
-    onStart,
-    onPlay,
-    onPause,
     onEnded,
-    onReady,
-    onProgress,
-    onSeek,
     onError,
+    onPause,
+    onPlay,
+    onProgress,
+    onReady,
+    onSeek,
+    onStart,
     player,
+    url,
   } = props;
   return url ? (
     <ReactPlayer
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 3487aab4b8..81e1bc95bf 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -231,7 +231,7 @@ const StyledMultiDropDown = styled(MultiDropDown)<{
 
 class DropDownComponent extends React.Component<DropDownComponentProps> {
   render() {
-    const { selectedIndexArr, options } = this.props;
+    const { options, selectedIndexArr } = this.props;
     const selectedItems = selectedIndexArr
       ? _.map(selectedIndexArr, (index) => options[index])
       : [];
diff --git a/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx b/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx
index b0b2475a58..d086e7f62e 100644
--- a/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/SwitchComponent.tsx
@@ -27,12 +27,12 @@ const SwitchComponentContainer = styled.div`
 `;
 
 export function SwitchComponent({
-  label,
-  isSwitchedOn,
   alignWidget,
-  onChange,
   isDisabled,
   isLoading,
+  isSwitchedOn,
+  label,
+  onChange,
 }: SwitchComponentProps) {
   const switchAlignClass =
     alignWidget === "RIGHT" ? Alignment.RIGHT : Alignment.LEFT;
diff --git a/app/client/src/components/designSystems/blueprint/TextComponent.tsx b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
index 2efd60d384..f74f6ebbaf 100644
--- a/app/client/src/components/designSystems/blueprint/TextComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/TextComponent.tsx
@@ -76,13 +76,13 @@ export interface TextComponentProps extends ComponentProps {
 class TextComponent extends React.Component<TextComponentProps> {
   render() {
     const {
-      text,
-      ellipsize,
-      textAlign,
-      fontStyle,
-      fontSize,
-      textColor,
       backgroundColor,
+      ellipsize,
+      fontSize,
+      fontStyle,
+      text,
+      textAlign,
+      textColor,
     } = this.props;
     return (
       <TextContainer>
diff --git a/app/client/src/components/editorComponents/ActionCreator.tsx b/app/client/src/components/editorComponents/ActionCreator.tsx
index 9b15a4ff96..ea6d2f4e67 100644
--- a/app/client/src/components/editorComponents/ActionCreator.tsx
+++ b/app/client/src/components/editorComponents/ActionCreator.tsx
@@ -108,7 +108,7 @@ export const modalGetter = (value: string) => {
 };
 
 export const stringToJS = (string: string): string => {
-  const { stringSegments, jsSnippets } = getDynamicBindings(string);
+  const { jsSnippets, stringSegments } = getDynamicBindings(string);
   const js = stringSegments
     .map((segment, index) => {
       if (jsSnippets[index] && jsSnippets[index].length > 0) {
diff --git a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
index c921c70fb8..1eff3ee7c0 100644
--- a/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/EvaluatedValuePopup.tsx
@@ -150,7 +150,7 @@ type PreparedStatementValue = {
 export function PreparedStatementViewer(props: {
   evaluatedValue: PreparedStatementValue;
 }) {
-  const { value, parameters } = props.evaluatedValue;
+  const { parameters, value } = props.evaluatedValue;
   const stringSegments = value.split(/\$\d/);
   const $params = [...value.matchAll(/\$\d/g)].map((matches) => matches[0]);
   const paramsWithTooltips = $params.map((param) => (
diff --git a/app/client/src/components/editorComponents/CodeEditor/index.tsx b/app/client/src/components/editorComponents/CodeEditor/index.tsx
index 8f98ea1af4..dfc5ad660d 100644
--- a/app/client/src/components/editorComponents/CodeEditor/index.tsx
+++ b/app/client/src/components/editorComponents/CodeEditor/index.tsx
@@ -337,26 +337,26 @@ class CodeEditor extends Component<Props, State> {
 
   render() {
     const {
+      border,
+      borderLess,
+      className,
+      dataTreePath,
+      disabled,
+      dynamicData,
+      evaluatedValue,
+      evaluationSubstitutionType,
+      expected,
+      fill,
+      height,
+      hideEvaluatedValue,
+      hoverInteraction,
       input,
       meta,
-      theme,
-      disabled,
-      className,
       placeholder,
       showLightningMenu,
-      dataTreePath,
-      dynamicData,
-      expected,
       size,
-      evaluatedValue,
-      height,
-      borderLess,
-      border,
-      hoverInteraction,
-      fill,
+      theme,
       useValidationMessage,
-      hideEvaluatedValue,
-      evaluationSubstitutionType,
     } = this.props;
     const hasError = !!(meta && meta.error);
     let evaluated = evaluatedValue;
diff --git a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
index 4ae6fb592f..3ff07385a2 100644
--- a/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebuggerLogs.tsx
@@ -37,7 +37,7 @@ function DebbuggerLogs(props: Props) {
   const [filter, setFilter] = useState("");
   const [searchQuery, setSearchQuery] = useState(props.searchQuery);
   const filteredLogs = useFilteredLogs(searchQuery, filter);
-  const { paginatedData, next } = usePagination(filteredLogs);
+  const { next, paginatedData } = usePagination(filteredLogs);
   const listRef = useRef<HTMLDivElement>(null);
   const selectedFilter = useMemo(
     () => LOGS_FILTER_OPTIONS.find((option) => option.value === filter),
diff --git a/app/client/src/components/editorComponents/Debugger/EntityLink.tsx b/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
index 56959a7842..e93197787a 100644
--- a/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
+++ b/app/client/src/components/editorComponents/Debugger/EntityLink.tsx
@@ -25,7 +25,7 @@ function ActionLink(props: EntityLinkProps) {
 
   const onClick = useCallback(() => {
     if (action) {
-      const { pageId, pluginType, id } = action;
+      const { id, pageId, pluginType } = action;
       const actionConfig = getActionConfig(pluginType);
       const url =
         applicationId && actionConfig?.getURL(applicationId, pageId, id);
diff --git a/app/client/src/components/editorComponents/DragLayerComponent.tsx b/app/client/src/components/editorComponents/DragLayerComponent.tsx
index c9fb4ab1f8..cba0ce3b78 100644
--- a/app/client/src/components/editorComponents/DragLayerComponent.tsx
+++ b/app/client/src/components/editorComponents/DragLayerComponent.tsx
@@ -71,7 +71,7 @@ function DragLayerComponent(props: DragLayerProps) {
     x: 0,
     y: 0,
   });
-  const { isDragging, currentOffset, widget, canDrop } = useDragLayer(
+  const { canDrop, currentOffset, isDragging, widget } = useDragLayer(
     (monitor) => ({
       isDragging: monitor.isDragging(),
       currentOffset: monitor.getSourceClientOffset(),
diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index 8dd54a659e..6f20eedd6b 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -59,7 +59,7 @@ function DraggableComponent(props: DraggableComponentProps) {
   const showPropertyPane = useShowPropertyPane();
 
   // Dispatch hook handy to set a widget as focused/selected
-  const { selectWidget, focusWidget } = useWidgetSelection();
+  const { focusWidget, selectWidget } = useWidgetSelection();
 
   // Dispatch hook handy to set any `DraggableComponent` as dragging/ not dragging
   // The value is boolean
diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx
index c4d6e9c1a6..d8c21c0694 100644
--- a/app/client/src/components/editorComponents/DropTargetComponent.tsx
+++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx
@@ -99,7 +99,7 @@ export function DropTargetComponent(props: DropTargetComponentProps) {
   const [rows, setRows] = useState(snapRows);
 
   const showPropertyPane = useShowPropertyPane();
-  const { selectWidget, focusWidget } = useWidgetSelection();
+  const { focusWidget, selectWidget } = useWidgetSelection();
   const updateCanvasSnapRows = useCanvasSnapRowsUpdateHook();
 
   useEffect(() => {
diff --git a/app/client/src/components/editorComponents/EditorContextProvider.tsx b/app/client/src/components/editorComponents/EditorContextProvider.tsx
index b2dd17cc84..98af637a72 100644
--- a/app/client/src/components/editorComponents/EditorContextProvider.tsx
+++ b/app/client/src/components/editorComponents/EditorContextProvider.tsx
@@ -55,15 +55,15 @@ type EditorContextProviderProps = EditorContextType & {
 
 function EditorContextProvider(props: EditorContextProviderProps) {
   const {
-    executeAction,
-    updateWidget,
-    updateWidgetProperty,
-    updateWidgetMetaProperty,
-    disableDrag,
-    children,
-    resetChildrenMetaProperty,
-    deleteWidgetProperty,
     batchUpdateWidgetProperty,
+    children,
+    deleteWidgetProperty,
+    disableDrag,
+    executeAction,
+    resetChildrenMetaProperty,
+    updateWidget,
+    updateWidgetMetaProperty,
+    updateWidgetProperty,
   } = props;
   return (
     <EditorContext.Provider
diff --git a/app/client/src/components/editorComponents/EntityNameComponent.tsx b/app/client/src/components/editorComponents/EntityNameComponent.tsx
index a664c78f94..e2e6654039 100644
--- a/app/client/src/components/editorComponents/EntityNameComponent.tsx
+++ b/app/client/src/components/editorComponents/EntityNameComponent.tsx
@@ -127,10 +127,10 @@ class EntityNameComponent extends React.Component<
     const { focused } = this.state;
     const {
       isValid,
+      onChange,
+      placeholder,
       validationMessage,
       value,
-      placeholder,
-      onChange,
     } = this.props;
 
     return (
diff --git a/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx b/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx
index 2e6d4c1a10..8b3c590ed5 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/ActionLink.tsx
@@ -13,9 +13,9 @@ export const StyledActionLink = styled.span<{ isActiveItem?: boolean }>`
 
 export const ActionLink = withTheme(
   ({
+    isActiveItem,
     item,
     theme,
-    isActiveItem,
   }: {
     item: SearchItem;
     theme: Theme;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx b/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx
index 9425debd85..7dd45b584e 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/AlgoliaSearchWrapper.tsx
@@ -12,7 +12,7 @@ type SearchProps = {
   children: React.ReactNode;
 };
 
-function Search({ query, children }: SearchProps) {
+function Search({ children, query }: SearchProps) {
   const [queryInState, setQueryInState] = useState(query);
   const debouncedSetQueryInState = useCallback(
     debounce(setQueryInState, 100),
diff --git a/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx b/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
index 43686d95ce..fd79706b8a 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/GlobalSearchHotKeys.tsx
@@ -53,7 +53,7 @@ class GlobalSearchHotKeys extends React.Component<Props> {
     return (
       <Hotkeys>
         {this.hotKeysConfig.map(
-          ({ combo, onKeyDown, allowInInput, label, group }, index) => (
+          ({ allowInInput, combo, group, label, onKeyDown }, index) => (
             <Hotkey
               allowInInput={allowInInput}
               combo={combo}
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
index bc2afc5b01..7ac95ec680 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx
@@ -26,7 +26,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-function DocsSearchModal({ modalOpen, toggleShow, children }: Props) {
+function DocsSearchModal({ children, modalOpen, toggleShow }: Props) {
   return (
     <StyledDocsSearchModal>
       <Overlay
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx
index 5972603e91..5da83a7c9e 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SearchResults.tsx
@@ -122,7 +122,7 @@ function WidgetItem(props: {
   item: SearchItem;
   isActiveItem: boolean;
 }) {
-  const { query, item } = props;
+  const { item, query } = props;
   const { type } = item || {};
   let title = getItemTitle(item);
   const pageName = usePageName(item.pageId);
@@ -206,7 +206,7 @@ function PageItem(props: {
   item: SearchItem;
   isActiveItem: boolean;
 }) {
-  const { query, item } = props;
+  const { item, query } = props;
   const title = getItemTitle(item);
   const icon = item.isDefault ? homePageIcon : pageIcon;
 
@@ -265,7 +265,7 @@ type ItemProps = {
 };
 
 function SearchItemComponent(props: ItemProps) {
-  const { item, index, query } = props;
+  const { index, item, query } = props;
   const itemRef = useRef<HTMLDivElement>(null);
   const searchContext = useContext(SearchContext);
   const activeItemIndex = searchContext?.activeItemIndex;
@@ -312,8 +312,8 @@ const SearchResultsContainer = styled.div`
 `;
 
 function SearchResults({
-  searchResults,
   query,
+  searchResults,
 }: {
   searchResults: SearchItem[];
   query: string;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/index.tsx b/app/client/src/components/editorComponents/GlobalSearch/index.tsx
index 735efbdefa..603cf995e7 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/index.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/index.tsx
@@ -313,7 +313,7 @@ function GlobalSearch() {
 
   const handleActionClick = (item: SearchItem) => {
     const { config } = item;
-    const { pageId, pluginType, id } = config;
+    const { id, pageId, pluginType } = config;
     const actionConfig = getActionConfig(pluginType);
     const url = actionConfig?.getURL(params.applicationId, pageId, id);
     toggleShow();
diff --git a/app/client/src/components/editorComponents/GlobalSearch/parseDocumentationContent.ts b/app/client/src/components/editorComponents/GlobalSearch/parseDocumentationContent.ts
index 43e2dccf6c..756fc62cf2 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/parseDocumentationContent.ts
+++ b/app/client/src/components/editorComponents/GlobalSearch/parseDocumentationContent.ts
@@ -39,7 +39,7 @@ const getDocumentationCTA = (path: any) => {
  * Append open documentation button to title
  */
 const updateDocumentDescriptionTitle = (documentObj: any, item: any) => {
-  const { rawTitle, path } = item;
+  const { path, rawTitle } = item;
 
   Array.from(documentObj.querySelectorAll("h1")).forEach((match: any) => {
     match.outerHTML = `<h2>${match.innerHTML}</h2>`;
diff --git a/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx b/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx
index a2957bf538..fd65111826 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/useRecentEntities.tsx
@@ -20,7 +20,7 @@ const useResentEntities = () => {
 
   const populatedRecentEntities = recentEntities
     .map((entity) => {
-      const { type, id, params } = entity;
+      const { id, params, type } = entity;
       if (type === "page") {
         const result = pages.find((page) => page.pageId === id);
         if (result) {
diff --git a/app/client/src/components/editorComponents/NavBarItem.tsx b/app/client/src/components/editorComponents/NavBarItem.tsx
index 54a556063c..7e1ad0c060 100644
--- a/app/client/src/components/editorComponents/NavBarItem.tsx
+++ b/app/client/src/components/editorComponents/NavBarItem.tsx
@@ -77,14 +77,14 @@ const ItemContainer = styled.div`
 class NavBarItem extends React.Component<Props> {
   render(): React.ReactNode {
     const {
-      title,
-      icon,
-      path,
       exact,
-      width,
       height,
-      onClick,
+      icon,
       isActive,
+      onClick,
+      path,
+      title,
+      width,
     } = this.props;
 
     return (
diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx
index 9c07e1fe6e..5fc2e4edc6 100644
--- a/app/client/src/components/editorComponents/ResizableComponent.tsx
+++ b/app/client/src/components/editorComponents/ResizableComponent.tsx
@@ -50,7 +50,7 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
   const { updateWidget } = useContext(EditorContext);
   const occupiedSpaces = useSelector(getOccupiedSpaces);
 
-  const { updateDropTargetRows, persistDropTargetRows } = useContext(
+  const { persistDropTargetRows, updateDropTargetRows } = useContext(
     DropTargetContext,
   );
 
diff --git a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
index 1355fcb2e8..0955c7e891 100644
--- a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
@@ -63,7 +63,7 @@ const DatasourceContainer = styled.div`
 `;
 class EmbeddedDatasourcePathComponent extends React.Component<Props> {
   handleDatasourceUrlUpdate = (datasourceUrl: string) => {
-    const { datasource, pluginId, orgId } = this.props;
+    const { datasource, orgId, pluginId } = this.props;
     const urlHasUpdated =
       datasourceUrl !== datasource.datasourceConfiguration?.url;
     if (urlHasUpdated) {
@@ -78,7 +78,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
   };
 
   handlePathUpdate = (path: string) => {
-    const { value, onChange } = this.props.input;
+    const { onChange, value } = this.props.input;
     if (onChange && value !== path) {
       onChange(path);
     }
@@ -128,7 +128,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
       typeof valueOrEvent === "string"
         ? valueOrEvent
         : valueOrEvent.target.value;
-    const { path, datasourceUrl } = this.parseInputValue(value);
+    const { datasourceUrl, path } = this.parseInputValue(value);
     this.handlePathUpdate(path);
     this.handleDatasourceUrlUpdate(datasourceUrl);
   };
diff --git a/app/client/src/components/formControls/CheckboxControl.tsx b/app/client/src/components/formControls/CheckboxControl.tsx
index 072ab52186..d2a7e02fe8 100644
--- a/app/client/src/components/formControls/CheckboxControl.tsx
+++ b/app/client/src/components/formControls/CheckboxControl.tsx
@@ -17,7 +17,7 @@ class CheckboxControl extends BaseControl<CheckboxControlProps> {
   }
 
   render() {
-    const { configProperty, label, info } = this.props;
+    const { configProperty, info, label } = this.props;
 
     return <StyledCheckbox info={info} label={label} name={configProperty} />;
   }
diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx
index cf27809189..c62fc612b0 100644
--- a/app/client/src/components/formControls/DropDownControl.tsx
+++ b/app/client/src/components/formControls/DropDownControl.tsx
@@ -49,7 +49,7 @@ const customSelectStyles = {
 
 class DropDownControl extends BaseControl<DropDownControlProps> {
   render() {
-    const { configProperty, options, label, isRequired, subtitle } = this.props;
+    const { configProperty, isRequired, label, options, subtitle } = this.props;
 
     return (
       <div>
diff --git a/app/client/src/components/formControls/DynamicInputTextControl.tsx b/app/client/src/components/formControls/DynamicInputTextControl.tsx
index 856f9b7c25..764688e3a2 100644
--- a/app/client/src/components/formControls/DynamicInputTextControl.tsx
+++ b/app/client/src/components/formControls/DynamicInputTextControl.tsx
@@ -16,7 +16,7 @@ export function InputText(props: {
   name: string;
   actionName: string;
 }) {
-  const { actionName, name, placeholder, label, isRequired } = props;
+  const { actionName, isRequired, label, name, placeholder } = props;
   const dataTreePath = actionPathFromName(actionName, name);
 
   return (
@@ -36,7 +36,7 @@ export function InputText(props: {
 
 class DynamicInputTextControl extends BaseControl<DynamicInputControlProps> {
   render() {
-    const { label, placeholderText, configProperty, actionName } = this.props;
+    const { actionName, configProperty, label, placeholderText } = this.props;
 
     return (
       <InputText
diff --git a/app/client/src/components/formControls/DynamicTextFieldControl.tsx b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
index 6d3d2b111e..6f31d453a9 100644
--- a/app/client/src/components/formControls/DynamicTextFieldControl.tsx
+++ b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
@@ -61,12 +61,12 @@ class DynamicTextControl extends BaseControl<
 
   render() {
     const {
-      responseType,
-      label,
-      placeholderText,
       actionName,
       configProperty,
       evaluationSubstitutionType,
+      label,
+      placeholderText,
+      responseType,
     } = this.props;
     const dataTreePath = actionPathFromName(actionName, configProperty);
     const isNewQuery =
diff --git a/app/client/src/components/formControls/FilePickerControl.tsx b/app/client/src/components/formControls/FilePickerControl.tsx
index 11525ef585..49a51eecc4 100644
--- a/app/client/src/components/formControls/FilePickerControl.tsx
+++ b/app/client/src/components/formControls/FilePickerControl.tsx
@@ -121,7 +121,7 @@ class FilePickerControl extends BaseControl<FilePickerControlProps> {
   }
 
   render() {
-    const { configProperty, label, isRequired } = this.props;
+    const { configProperty, isRequired, label } = this.props;
 
     return (
       <>
diff --git a/app/client/src/components/formControls/FixedKeyInputControl.tsx b/app/client/src/components/formControls/FixedKeyInputControl.tsx
index f3efdd7a0b..0afa6578ba 100644
--- a/app/client/src/components/formControls/FixedKeyInputControl.tsx
+++ b/app/client/src/components/formControls/FixedKeyInputControl.tsx
@@ -13,12 +13,12 @@ const Wrapper = styled.div`
 class FixKeyInputControl extends BaseControl<FixedKeyInputControlProps> {
   render() {
     const {
+      configProperty,
+      dataType,
+      fixedKey,
+      isRequired,
       label,
       placeholderText,
-      dataType,
-      configProperty,
-      isRequired,
-      fixedKey,
     } = this.props;
 
     return (
diff --git a/app/client/src/components/formControls/InputNumberControl.tsx b/app/client/src/components/formControls/InputNumberControl.tsx
index 0890a14c84..a3102ae668 100644
--- a/app/client/src/components/formControls/InputNumberControl.tsx
+++ b/app/client/src/components/formControls/InputNumberControl.tsx
@@ -23,7 +23,7 @@ export function InputText(props: {
   dataType?: string;
   name: string;
 }) {
-  const { name, placeholder, dataType, label } = props;
+  const { dataType, label, name, placeholder } = props;
 
   return (
     <FormGroup data-cy={name}>
@@ -36,11 +36,11 @@ export function InputText(props: {
 class InputNumberControl extends BaseControl<InputControlProps> {
   render() {
     const {
-      propertyValue,
-      label,
-      placeholderText,
       configProperty,
       dataType,
+      label,
+      placeholderText,
+      propertyValue,
     } = this.props;
 
     return (
diff --git a/app/client/src/components/formControls/InputTextControl.tsx b/app/client/src/components/formControls/InputTextControl.tsx
index 5cdb133522..e8419a03b4 100644
--- a/app/client/src/components/formControls/InputTextControl.tsx
+++ b/app/client/src/components/formControls/InputTextControl.tsx
@@ -30,14 +30,14 @@ export function InputText(props: {
   disabled?: boolean;
 }) {
   const {
+    dataType,
+    disabled,
+    encrypted,
+    isRequired,
+    label,
     name,
     placeholder,
-    dataType,
-    label,
-    isRequired,
-    disabled,
     subtitle,
-    encrypted,
   } = props;
 
   return (
@@ -71,15 +71,15 @@ export function InputText(props: {
 class InputTextControl extends BaseControl<InputControlProps> {
   render() {
     const {
-      validationMessage,
-      propertyValue,
+      configProperty,
+      dataType,
+      disabled,
       isValid,
       label,
       placeholderText,
-      dataType,
-      configProperty,
-      disabled,
+      propertyValue,
       subtitle,
+      validationMessage,
     } = this.props;
 
     return (
diff --git a/app/client/src/components/formControls/SwitchControl.tsx b/app/client/src/components/formControls/SwitchControl.tsx
index 7c5a02ad16..6ef651f0fb 100644
--- a/app/client/src/components/formControls/SwitchControl.tsx
+++ b/app/client/src/components/formControls/SwitchControl.tsx
@@ -42,7 +42,7 @@ export class SwitchField extends React.Component<Props, any> {
   }
 
   render() {
-    const { label, isRequired, input, info } = this.props;
+    const { info, input, isRequired, label } = this.props;
 
     return (
       <div>
@@ -64,7 +64,7 @@ export class SwitchField extends React.Component<Props, any> {
 
 class SwitchControl extends BaseControl<SwitchControlProps> {
   render() {
-    const { configProperty, label, isRequired, info } = this.props;
+    const { configProperty, info, isRequired, label } = this.props;
 
     return (
       <Field
diff --git a/app/client/src/components/propertyControls/ButtonTabControl.tsx b/app/client/src/components/propertyControls/ButtonTabControl.tsx
index f2b075cb7a..8c808a555f 100644
--- a/app/client/src/components/propertyControls/ButtonTabControl.tsx
+++ b/app/client/src/components/propertyControls/ButtonTabControl.tsx
@@ -7,7 +7,7 @@ import produce from "immer";
 
 class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
   selectButton = (value: string) => {
-    const { propertyValue, defaultValue } = this.props;
+    const { defaultValue, propertyValue } = this.props;
     const values: string[] = propertyValue
       ? propertyValue.split(",")
       : defaultValue
@@ -24,7 +24,7 @@ class ButtonTabControl extends BaseControl<ButtonTabControlProps> {
     }
   };
   render() {
-    const { propertyValue, options } = this.props;
+    const { options, propertyValue } = this.props;
     return (
       <ButtonTabComponent
         options={options}
diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx
index fff42890d8..78fab615ea 100644
--- a/app/client/src/components/propertyControls/ChartDataControl.tsx
+++ b/app/client/src/components/propertyControls/ChartDataControl.tsx
@@ -97,11 +97,11 @@ type RenderComponentProps = {
 function DataControlComponent(props: RenderComponentProps) {
   const {
     deleteOption,
-    updateOption,
-    item,
-    index,
-    length,
     evaluated,
+    index,
+    item,
+    length,
+    updateOption,
     validationMessage,
   } = props;
 
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index e081757ed0..d2fc9fa4ed 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -11,13 +11,13 @@ import {
 class CodeEditorControl extends BaseControl<ControlProps> {
   render() {
     const {
-      validationMessage,
-      expected,
-      propertyValue,
-      isValid,
       dataTreePath,
       evaluatedValue,
+      expected,
+      isValid,
+      propertyValue,
       useValidationMessage,
+      validationMessage,
     } = this.props;
     const props: Partial<ControlProps> = {};
     if (dataTreePath) props.dataTreePath = dataTreePath;
diff --git a/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx b/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
index b570e3d891..1b504a6d71 100644
--- a/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
+++ b/app/client/src/components/propertyControls/ComputeTablePropertyControl.tsx
@@ -42,16 +42,16 @@ export function InputText(props: {
   theme: EditorTheme;
 }) {
   const {
+    additionalDynamicData,
+    dataTreePath,
     errorMessage,
+    evaluatedValue,
     expected,
-    value,
     isValid,
     onChange,
     placeholder,
-    dataTreePath,
-    evaluatedValue,
-    additionalDynamicData,
     theme,
+    value,
   } = props;
   return (
     <StyledDynamicInput>
@@ -90,14 +90,14 @@ class ComputeTablePropertyControl extends BaseControl<
 > {
   render() {
     const {
+      dataTreePath,
+      defaultValue,
       expected,
-      propertyValue,
       isValid,
       label,
-      dataTreePath,
-      validationMessage,
-      defaultValue,
+      propertyValue,
       theme,
+      validationMessage,
     } = this.props;
     const tableId = this.props.widgetProperties.widgetName;
     const value =
diff --git a/app/client/src/components/propertyControls/CustomFusionChartControl.tsx b/app/client/src/components/propertyControls/CustomFusionChartControl.tsx
index 515efffeb4..b1e518262c 100644
--- a/app/client/src/components/propertyControls/CustomFusionChartControl.tsx
+++ b/app/client/src/components/propertyControls/CustomFusionChartControl.tsx
@@ -5,11 +5,11 @@ class CustomFusionChartControl extends InputTextControl {
   render() {
     const expected = "{\n  type: string,\n  dataSource: Object\n}";
     const {
-      propertyValue,
+      dataTreePath,
       isValid,
       label,
       placeholderText,
-      dataTreePath,
+      propertyValue,
       validationMessage,
     } = this.props;
     return (
diff --git a/app/client/src/components/propertyControls/IconTabControl.tsx b/app/client/src/components/propertyControls/IconTabControl.tsx
index 4646c5c626..d2bbee97bc 100644
--- a/app/client/src/components/propertyControls/IconTabControl.tsx
+++ b/app/client/src/components/propertyControls/IconTabControl.tsx
@@ -6,7 +6,7 @@ import IconTabsComponent, {
 
 class IconTabControl extends BaseControl<IconTabControlProps> {
   selectOption = (value: string) => {
-    const { propertyValue, defaultValue } = this.props;
+    const { defaultValue, propertyValue } = this.props;
     if (propertyValue === value) {
       this.updateProperty(this.props.propertyName, defaultValue);
     } else {
@@ -14,7 +14,7 @@ class IconTabControl extends BaseControl<IconTabControlProps> {
     }
   };
   render() {
-    const { propertyValue, options } = this.props;
+    const { options, propertyValue } = this.props;
     return (
       <IconTabsComponent
         options={options}
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index 545629c6f7..e9db519b0c 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -25,15 +25,15 @@ export function InputText(props: {
   hideEvaluatedValue?: boolean;
 }) {
   const {
+    dataTreePath,
     errorMessage,
+    evaluatedValue,
     expected,
-    value,
+    hideEvaluatedValue,
     isValid,
     onChange,
     placeholder,
-    dataTreePath,
-    evaluatedValue,
-    hideEvaluatedValue,
+    value,
   } = props;
 
   return (
@@ -65,16 +65,16 @@ export function InputText(props: {
 class InputTextControl extends BaseControl<InputControlProps> {
   render() {
     const {
+      additionalAutoComplete,
+      dataTreePath,
+      defaultValue,
       expected,
-      propertyValue,
+      hideEvaluatedValue,
       isValid,
       label,
       placeholderText,
-      dataTreePath,
+      propertyValue,
       validationMessage,
-      defaultValue,
-      additionalAutoComplete,
-      hideEvaluatedValue,
     } = this.props;
 
     return (
diff --git a/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx b/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
index fd49fbc6ed..0b9271c87e 100644
--- a/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
+++ b/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
@@ -93,12 +93,12 @@ function ColumnControlComponent(props: RenderComponentProps) {
   const [value, setValue] = useState(props.item.label);
 
   const {
-    updateOption,
-    onEdit,
-    item,
     deleteOption,
-    toggleVisibility,
     index,
+    item,
+    onEdit,
+    toggleVisibility,
+    updateOption,
   } = props;
   const [visibility, setVisibility] = useState(item.isVisible);
   const debouncedUpdate = debounce(updateOption, 1000);
diff --git a/app/client/src/components/propertyControls/StepControl.tsx b/app/client/src/components/propertyControls/StepControl.tsx
index 3659b0f22e..28d4225aef 100644
--- a/app/client/src/components/propertyControls/StepControl.tsx
+++ b/app/client/src/components/propertyControls/StepControl.tsx
@@ -25,7 +25,7 @@ class StepControl extends BaseControl<StepControlProps> {
   };
 
   render() {
-    const { min, max, steps, displayFormat } = this.getStepTypeControls();
+    const { displayFormat, max, min, steps } = this.getStepTypeControls();
     return (
       <StepComponent
         displayFormat={displayFormat}
diff --git a/app/client/src/components/propertyControls/TabControl.tsx b/app/client/src/components/propertyControls/TabControl.tsx
index 074263af64..64c567015d 100644
--- a/app/client/src/components/propertyControls/TabControl.tsx
+++ b/app/client/src/components/propertyControls/TabControl.tsx
@@ -66,7 +66,7 @@ type RenderComponentProps = {
 };
 
 function TabControlComponent(props: RenderComponentProps) {
-  const { deleteOption, updateOption, item, index } = props;
+  const { deleteOption, index, item, updateOption } = props;
   const debouncedUpdate = debounce(updateOption, 1000);
   const handleChange = useCallback(() => props.onEdit && props.onEdit(index), [
     index,
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 59051e5f89..44040d2d35 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -9,10 +9,10 @@ import { JSXElementConstructor } from "react";
 export type FontFamily = typeof FontFamilies[keyof typeof FontFamilies];
 
 const {
-  default: styled,
-  css,
-  keyframes,
   createGlobalStyle,
+  css,
+  default: styled,
+  keyframes,
   ThemeProvider,
 } = styledComponents as styledComponents.ThemedStyledComponentsModule<Theme>;
 
diff --git a/app/client/src/entities/DataTree/dataTreeFactory.ts b/app/client/src/entities/DataTree/dataTreeFactory.ts
index eb071d4bca..f2e965e874 100644
--- a/app/client/src/entities/DataTree/dataTreeFactory.ts
+++ b/app/client/src/entities/DataTree/dataTreeFactory.ts
@@ -96,12 +96,12 @@ type DataTreeSeed = {
 export class DataTreeFactory {
   static create({
     actions,
-    widgets,
-    widgetsMeta,
-    pageList,
     appData,
     editorConfigs,
+    pageList,
     pluginDependencyConfig,
+    widgets,
+    widgetsMeta,
   }: DataTreeSeed): DataTree {
     const dataTree: DataTree = {};
     actions.forEach((action) => {
diff --git a/app/client/src/pages/AppViewer/viewer/GetAppViewerHeaderCTA.tsx b/app/client/src/pages/AppViewer/viewer/GetAppViewerHeaderCTA.tsx
index 31d109d9bb..905814a8b5 100644
--- a/app/client/src/pages/AppViewer/viewer/GetAppViewerHeaderCTA.tsx
+++ b/app/client/src/pages/AppViewer/viewer/GetAppViewerHeaderCTA.tsx
@@ -24,12 +24,12 @@ const ForkButton = styled(Cta)`
 
 function GetAppViewerHeaderCTA(props: any) {
   const {
-    url,
     canEdit,
     currentApplicationDetails,
     currentUser,
     forkUrl,
     loginUrl,
+    url,
   } = props;
   let CTA = null;
   const dispatch = useDispatch();
diff --git a/app/client/src/pages/AppViewer/viewer/PageTabs.tsx b/app/client/src/pages/AppViewer/viewer/PageTabs.tsx
index 7a5f3e827d..6f36e2066c 100644
--- a/app/client/src/pages/AppViewer/viewer/PageTabs.tsx
+++ b/app/client/src/pages/AppViewer/viewer/PageTabs.tsx
@@ -111,8 +111,8 @@ function PageTabName({ name }: { name: string }) {
 function PageTabContainer({
   children,
   isTabActive,
-  tabsScrollable,
   setShowScrollArrows,
+  tabsScrollable,
 }: {
   children: React.ReactNode;
   isTabActive: boolean;
@@ -140,7 +140,7 @@ type Props = {
 };
 
 export function PageTabs(props: Props) {
-  const { currentApplicationDetails, appPages } = props;
+  const { appPages, currentApplicationDetails } = props;
   const { pathname } = useLocation();
 
   return (
diff --git a/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx b/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx
index 6caef173cb..a6b8eb1cc9 100644
--- a/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx
+++ b/app/client/src/pages/AppViewer/viewer/PageTabsContainer.tsx
@@ -67,7 +67,7 @@ export function PageTabsContainer(props: AppViewerHeaderProps) {
 
   const setShowScrollArrows = useCallback(() => {
     if (tabsRef.current) {
-      const { scrollWidth, offsetWidth, scrollLeft } = tabsRef.current;
+      const { offsetWidth, scrollLeft, scrollWidth } = tabsRef.current;
       setShouldShowLeftArrow(scrollLeft > 0);
       setShouldShowRightArrow(scrollLeft + offsetWidth < scrollWidth);
     }
@@ -76,7 +76,7 @@ export function PageTabsContainer(props: AppViewerHeaderProps) {
   const measuredTabsRef = useCallback((node) => {
     tabsRef.current = node;
     if (node !== null) {
-      const { scrollWidth, offsetWidth } = node;
+      const { offsetWidth, scrollWidth } = node;
       setTabsScrollable(scrollWidth > offsetWidth);
       setShowScrollArrows();
     }
diff --git a/app/client/src/pages/Applications/CreateApplicationForm.tsx b/app/client/src/pages/Applications/CreateApplicationForm.tsx
index 0b14274579..d49bfbc02b 100644
--- a/app/client/src/pages/Applications/CreateApplicationForm.tsx
+++ b/app/client/src/pages/Applications/CreateApplicationForm.tsx
@@ -49,7 +49,7 @@ const validate = (values: CreateApplicationFormValues) => {
 // TODO(abhinav): abstract onCancel out.
 
 function CreateApplicationForm(props: Props) {
-  const { error, handleSubmit, pristine, submitting, invalid } = props;
+  const { error, handleSubmit, invalid, pristine, submitting } = props;
   return (
     <Form onSubmit={handleSubmit(createApplicationFormSubmitHandler)}>
       {error && !pristine && <FormMessage intent="danger" message={error} />}
diff --git a/app/client/src/pages/Applications/ForkApplicationModal.tsx b/app/client/src/pages/Applications/ForkApplicationModal.tsx
index 230e4e472b..d17df5f87b 100644
--- a/app/client/src/pages/Applications/ForkApplicationModal.tsx
+++ b/app/client/src/pages/Applications/ForkApplicationModal.tsx
@@ -32,7 +32,7 @@ type ForkApplicationModalProps = {
 };
 
 function ForkApplicationModal(props: ForkApplicationModalProps) {
-  const { setModalClose, isModalOpen } = props;
+  const { isModalOpen, setModalClose } = props;
   const [organizationId, selectOrganizationId] = useState("");
   const dispatch = useDispatch();
   const userOrgs = useSelector(getUserApplicationsOrgs);
diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx
index 11cecd4ea3..b6b282b884 100644
--- a/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx
+++ b/app/client/src/pages/Applications/ProductUpdatesModal/ReleaseComponent.tsx
@@ -127,7 +127,7 @@ const ReadMore = withTheme(
 );
 
 function ReleaseComponent({ release }: ReleaseProps) {
-  const { name, publishedAt, descriptionHtml } = release;
+  const { descriptionHtml, name, publishedAt } = release;
   const [isCollapsed, setCollapsed] = useState(true);
   const [shouldShowReadMore, setShouldShowReadMore] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx
index 256e104863..eb03198782 100644
--- a/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx
+++ b/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx
@@ -94,7 +94,7 @@ const Header = withTheme(
 );
 
 function ProductUpdatesModal() {
-  const { releaseItems, newReleasesCount } = useSelector(
+  const { newReleasesCount, releaseItems } = useSelector(
     (state: AppState) => state.ui.releases,
   );
   const dispatch = useDispatch();
diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx
index 4fc8f4640c..f3edf0038f 100644
--- a/app/client/src/pages/Applications/index.tsx
+++ b/app/client/src/pages/Applications/index.tsx
@@ -351,7 +351,7 @@ const ApplicationAddCardWrapper = styled(Card)`
   }}
 `;
 
-function OrgMenuItem({ org, isFetchingApplications, selected }: any) {
+function OrgMenuItem({ isFetchingApplications, org, selected }: any) {
   const menuRef = useRef<HTMLAnchorElement>(null);
   useEffect(() => {
     if (selected) {
@@ -549,7 +549,7 @@ function ApplicationsSection(props: any) {
     disabled?: boolean;
     orgSlug: string;
   }) {
-    const { orgName, disabled, orgSlug } = props;
+    const { disabled, orgName, orgSlug } = props;
 
     return (
       <OrgNameWrapper className="t--org-name" disabled={disabled}>
@@ -611,7 +611,7 @@ function ApplicationsSection(props: any) {
   } else {
     organizationsListComponent = updatedOrgs.map(
       (organizationObject: any, index: number) => {
-        const { organization, applications, userRoles } = organizationObject;
+        const { applications, organization, userRoles } = organizationObject;
         const hasManageOrgPermissions = isPermitted(
           organization.userPermissions,
           PERMISSION_TYPE.MANAGE_ORGANIZATION,
diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
index 72bb473d1b..d40006459a 100644
--- a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx
@@ -369,8 +369,8 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
   componentDidMount() {
     const {
       importedCollections,
-      providersTotal,
       providerCategories,
+      providersTotal,
     } = this.props;
     if (providerCategories.length === 0 && enableRapidAPI) {
       this.props.fetchProviderCategories();
@@ -434,17 +434,17 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
   render() {
     const {
       // importedCollections,
-      providers,
-      applicationId,
-      pageId,
-      location,
-      history,
-      // isFetchingProviders,
-      providerCategories,
-      providersTotal,
-      isSwitchingCategory,
       apiOrProviderSearchResults,
+      applicationId,
       fetchProvidersError,
+      history,
+      isSwitchingCategory,
+      // isFetchingProviders,
+      location,
+      pageId,
+      providerCategories,
+      providers,
+      providersTotal,
     } = this.props;
     const { showSearchResults } = this.state;
 
@@ -787,10 +787,10 @@ class ApiHomeScreen extends React.Component<Props, ApiHomeScreenState> {
 const mapStateToProps = (state: AppState) => {
   const { providers } = state.ui;
   const {
-    providersTotal,
-    isSwitchingCategory,
-    fetchProvidersError,
     apiOrProviderSearchResults,
+    fetchProvidersError,
+    isSwitchingCategory,
+    providersTotal,
   } = providers;
   const formData = getFormValues(API_HOME_SCREEN_FORM)(
     state,
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index e0a93284bb..67dd533dce 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -203,17 +203,17 @@ function ApiEditorForm(props: Props) {
   ] = useLocalStorage("apiBindHelpSectionVisible", "true");
 
   const {
-    pluginId,
-    onRunClick,
-    handleSubmit,
-    isRunning,
     actionConfigurationHeaders,
-    httpMethodFromForm,
     actionName,
+    handleSubmit,
     headersCount,
-    paramsCount,
-    settingsConfig,
     hintMessages,
+    httpMethodFromForm,
+    isRunning,
+    onRunClick,
+    paramsCount,
+    pluginId,
+    settingsConfig,
   } = props;
   const dispatch = useDispatch();
   const allowPostBody =
diff --git a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
index a3b03cd6d4..86f3bbf08c 100644
--- a/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
+++ b/app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
@@ -48,11 +48,11 @@ type Props = PostDataProps;
 
 function PostBodyData(props: Props) {
   const {
-    displayFormat,
-    dataTreePath,
-    updateBodyContentType,
-    theme,
     apiId,
+    dataTreePath,
+    displayFormat,
+    theme,
+    updateBodyContentType,
   } = props;
 
   return (
diff --git a/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx b/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
index 14ebeac42c..9da4fa9fac 100644
--- a/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ProviderTemplates.tsx
@@ -266,10 +266,10 @@ class ProviderTemplates extends React.Component<ProviderTemplatesProps> {
 
   render() {
     const {
-      providerTemplates,
       history,
       isFetchingProviderTemplates,
       providerDetails,
+      providerTemplates,
     } = this.props;
     const { applicationId, pageId } = this.props.match.params;
 
diff --git a/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
index fc98490e4e..46a6a0b34a 100644
--- a/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
@@ -117,18 +117,18 @@ type Props = APIFormProps & InjectedFormProps<Action, APIFormProps>;
 
 function RapidApiEditorForm(props: Props) {
   const {
-    onDeleteClick,
-    onRunClick,
+    actionConfiguration,
+    actionConfigurationBodyFormData,
+    actionConfigurationHeaders,
     handleSubmit,
     isDeleting,
     isRunning,
-    templateId,
-    actionConfiguration,
-    actionConfigurationHeaders,
-    actionConfigurationBodyFormData,
+    onDeleteClick,
+    onRunClick,
+    providerCredentialSteps,
     providerImage,
     providerURL,
-    providerCredentialSteps,
+    templateId,
   } = props;
 
   const postbodyResponsePresent =
diff --git a/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx b/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
index e7df48ae39..04148599ca 100644
--- a/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ResultPagination.tsx
@@ -33,18 +33,18 @@ const PaginationContainer = styled.div`
 
 class ResultPagination extends React.Component<Props> {
   render() {
-    const { total, handlePageChange, currentPage = 1 } = this.props;
+    const { currentPage = 1, handlePageChange, total } = this.props;
 
     return (
       <Pagination limit={40} pageCount={5} total={total}>
         {({
-          pages,
+          getPageItemProps,
           hasNextPage,
           hasPreviousPage,
-          previousPage,
           nextPage,
+          pages,
+          previousPage,
           totalPages,
-          getPageItemProps,
         }) => {
           console.log(hasNextPage, "hasNextPage");
 
diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
index 813bf0cf52..bf204f0c7c 100644
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@@ -151,16 +151,16 @@ class ApiEditor extends React.Component<Props> {
 
   render() {
     const {
+      isCreating,
+      isDeleting,
+      isEditorInitialized,
+      isRunning,
       match: {
         params: { apiId },
       },
-      plugins,
-      pluginId,
-      isRunning,
-      isDeleting,
-      isCreating,
       paginationType,
-      isEditorInitialized,
+      pluginId,
+      plugins,
     } = this.props;
     if (!this.props.pluginId && this.props.match.params.apiId) {
       return <EntityNotFoundPane />;
@@ -257,7 +257,7 @@ class ApiEditor extends React.Component<Props> {
 const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
   const apiAction = getActionById(state, props);
   const apiName = getApiName(state, props.match.params.apiId);
-  const { isDeleting, isRunning, isCreating } = state.ui.apiPane;
+  const { isCreating, isDeleting, isRunning } = state.ui.apiPane;
   const pluginId = _.get(apiAction, "pluginId", "");
   const settingsConfig = getPluginSettingConfigs(state, pluginId);
   return {
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
index c8fd253e0a..2f417b4172 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
@@ -118,15 +118,15 @@ class DatasourceDBEditor extends JSONtoForm<Props> {
 
   renderDataSourceConfigForm = (sections: any) => {
     const {
-      isSaving,
       applicationId,
-      pageId,
-      isTesting,
-      isDeleting,
       datasourceId,
       handleDelete,
-      pluginType,
+      isDeleting,
+      isSaving,
+      isTesting,
       messages,
+      pageId,
+      pluginType,
     } = this.props;
     const { viewMode } = this.props;
     return (
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx
index 3ae1eecb05..88e4a5673e 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DatasourceHome.tsx
@@ -130,11 +130,11 @@ class DatasourceHomeScreen extends React.Component<Props> {
 
   render() {
     const {
-      plugins,
-      isSaving,
-      pluginImages,
       applicationId,
+      isSaving,
       pageId,
+      pluginImages,
+      plugins,
     } = this.props;
 
     return (
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx b/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx
index 92be7549fb..4ef9d3810f 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx
@@ -40,7 +40,7 @@ export const renderDatasourceSection = (
           return renderDatasourceSection(section, datasource);
         } else {
           try {
-            const { label, configProperty, controlType } = section;
+            const { configProperty, controlType, label } = section;
             const reactKey = datasource.id + "_" + label;
             let value = get(datasource, configProperty);
 
diff --git a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
index 51b96ab12a..9edf1fefca 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
@@ -237,7 +237,7 @@ export class JSONtoForm<
   };
 
   setupConfig = (config: ControlProps) => {
-    const { controlType, isRequired, configProperty } = config;
+    const { configProperty, controlType, isRequired } = config;
     this.configDetails[configProperty] = controlType;
 
     if (isRequired) {
diff --git a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
index 7edfb2b9e4..2197a81596 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
@@ -253,7 +253,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
   };
 
   createApiAction = () => {
-    const { datasource, actions, pageId } = this.props;
+    const { actions, datasource, pageId } = this.props;
     if (
       !datasource ||
       !datasource.datasourceConfiguration ||
@@ -308,11 +308,11 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
 
   renderHeader = () => {
     const {
-      isSaving,
-      isNewDatasource,
-      pluginImage,
       applicationId,
+      isNewDatasource,
+      isSaving,
       pageId,
+      pluginImage,
     } = this.props;
     return (
       <>
@@ -344,7 +344,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
   };
 
   renderSave = () => {
-    const { isDeleting, isSaving, datasourceId, deleteDatasource } = this.props;
+    const { datasourceId, deleteDatasource, isDeleting, isSaving } = this.props;
     return (
       <SaveButtonContainer>
         <ActionButton
@@ -609,7 +609,7 @@ class DatasourceRestAPIEditor extends React.Component<Props> {
   };
 
   renderOauth2AuthorizationCode = () => {
-    const { pageId, datasourceId, isSaving, datasource } = this.props;
+    const { datasource, datasourceId, isSaving, pageId } = this.props;
     const isAuthorized = _.get(
       datasource,
       "datasourceConfiguration.authentication.isAuthorized",
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index 272c1313cd..0817c753d1 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -75,22 +75,22 @@ class DataSourceEditor extends React.Component<Props> {
 
   render() {
     const {
+      deleteDatasource,
+      formConfig,
+      formData,
+      isDeleting,
+      isNewDatasource,
+      isSaving,
+      isTesting,
       match: {
         params: { datasourceId },
       },
-      isSaving,
-      formData,
-      isTesting,
-      formConfig,
-      isDeleting,
-      deleteDatasource,
-      isNewDatasource,
-      pluginImages,
-      pluginId,
-      viewMode,
-      setDatasourceEditorMode,
-      pluginType,
       openOmnibarReadMore,
+      pluginId,
+      pluginImages,
+      pluginType,
+      setDatasourceEditorMode,
+      viewMode,
     } = this.props;
 
     return (
@@ -173,17 +173,17 @@ export interface DatasourcePaneFunctions {
 class DatasourceEditorRouter extends React.Component<Props> {
   render() {
     const {
-      match: {
-        params: { datasourceId, applicationId, pageId },
-      },
-      isSaving,
       history,
       isDeleting,
-      location,
       isNewDatasource,
-      pluginImages,
-      pluginId,
+      isSaving,
+      location,
+      match: {
+        params: { applicationId, datasourceId, pageId },
+      },
       pluginDatasourceForm,
+      pluginId,
+      pluginImages,
       pluginPackageName,
     } = this.props;
     if (!pluginId && datasourceId) {
diff --git a/app/client/src/pages/Editor/EditorHeader.tsx b/app/client/src/pages/Editor/EditorHeader.tsx
index ff6e3674f0..1370c3ec1d 100644
--- a/app/client/src/pages/Editor/EditorHeader.tsx
+++ b/app/client/src/pages/Editor/EditorHeader.tsx
@@ -146,14 +146,14 @@ type EditorHeaderProps = {
 
 export function EditorHeader(props: EditorHeaderProps) {
   const {
-    currentApplication,
-    isSaving,
-    pageSaveError,
-    pageId,
-    orgId,
     applicationId,
-    publishApplication,
+    currentApplication,
     isPublishing,
+    isSaving,
+    orgId,
+    pageId,
+    pageSaveError,
+    publishApplication,
   } = props;
 
   const dispatch = useDispatch();
diff --git a/app/client/src/pages/Editor/EditorSidebar.tsx b/app/client/src/pages/Editor/EditorSidebar.tsx
index 38e56d3518..7668e7b0f4 100644
--- a/app/client/src/pages/Editor/EditorSidebar.tsx
+++ b/app/client/src/pages/Editor/EditorSidebar.tsx
@@ -296,11 +296,11 @@ class EditorSidebar extends React.Component<Props, State> {
 
   render() {
     const {
+      createButtonTitle,
       isLoading,
       itemRender,
-      selectedItemId,
       location,
-      createButtonTitle,
+      selectedItemId,
     } = this.props;
 
     const { search } = this.state;
diff --git a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
index c68dd2eefc..c58b3440be 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
+++ b/app/client/src/pages/Editor/Explorer/Entity/Name.tsx
@@ -71,7 +71,7 @@ export interface EntityNameProps {
 
 export const EntityName = forwardRef(
   (props: EntityNameProps, ref: React.Ref<HTMLDivElement>) => {
-    const { name, updateEntityName, searchKeyword } = props;
+    const { name, searchKeyword, updateEntityName } = props;
     const tabs:
       | Array<{ id: string; widgetId: string; label: string }>
       | undefined = useSelector((state: AppState) => {
diff --git a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
index f2fafbe660..5d0fe93033 100644
--- a/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
+++ b/app/client/src/pages/Editor/Explorer/EntityExplorer.tsx
@@ -55,7 +55,7 @@ function EntityExplorer(props: IPanelProps) {
     PerformanceTracker.stopTracking();
   });
   const explorerRef = useRef<HTMLDivElement | null>(null);
-  const { searchKeyword, clearSearch } = useFilteredEntities(searchInputRef);
+  const { clearSearch, searchKeyword } = useFilteredEntities(searchInputRef);
   const datasources = useFilteredDatasources(searchKeyword);
 
   const plugins = useSelector(getPlugins);
diff --git a/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx b/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx
index bcb0adbf3c..c859a1583c 100644
--- a/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx
+++ b/app/client/src/pages/Editor/Explorer/TreeDropdown.tsx
@@ -68,13 +68,13 @@ function getSelectedOption(
 
 export default function TreeDropdown(props: TreeDropdownProps) {
   const {
-    selectedValue,
     defaultText,
-    optionTree,
-    onSelect,
-    getDefaults,
-    selectedLabelModifier,
     displayValue,
+    getDefaults,
+    onSelect,
+    optionTree,
+    selectedLabelModifier,
+    selectedValue,
     toggle,
   } = props;
   const selectedOption = getSelectedOption(
diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
index aec72768e8..adc67bc287 100644
--- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
@@ -123,14 +123,14 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
   );
   let shouldExpand = false;
   if (widgetsToExpand.includes(props.widgetId)) shouldExpand = true;
-  const { navigateToWidget, isWidgetSelected } = useWidget(
+  const { isWidgetSelected, navigateToWidget } = useWidget(
     props.widgetId,
     props.widgetType,
     props.pageId,
     props.parentModalId,
   );
 
-  const { widgetType, widgetId, parentModalId } = props;
+  const { parentModalId, widgetId, widgetType } = props;
   /**
    * While navigating to a widget we need to show a modal if the widget is nested within it
    * Since the immediate parent for the widget would be a canvas instead of the modal,
diff --git a/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx b/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
index 3f41f5af3a..8fdece4d9f 100644
--- a/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
@@ -98,10 +98,10 @@ export function PanelPropertiesEditor(
   }, [dispatch, widgetProperties.type, widgetProperties.widgetId]);
 
   const {
-    panelConfig,
-    panelProps,
     closePanel,
+    panelConfig,
     panelParentPropertyPath,
+    panelProps,
     theme,
   } = props;
 
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index c5297e4b87..272655b851 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -53,10 +53,10 @@ const PropertyControl = memo((props: Props) => {
 
   /** get all child enhancments functions */
   const {
-    propertyPaneEnhancmentFn: childWidgetPropertyUpdateEnhancementFn,
     autoCompleteEnhancementFn: childWidgetAutoCompleteEnhancementFn,
     customJSControlEnhancementFn: childWidgetCustomJSControlEnhancementFn,
     hideEvaluatedValueEnhancementFn: childWidgetHideEvaluatedValueEnhancementFn,
+    propertyPaneEnhancmentFn: childWidgetPropertyUpdateEnhancementFn,
   } = useChildWidgetEnhancementFns(widgetProperties.widgetId);
 
   const toggleDynamicProperty = useCallback(
@@ -160,7 +160,7 @@ const PropertyControl = memo((props: Props) => {
           const allUpdates: Record<string, unknown> = {};
           const triggerPaths: string[] = [];
           hookPropertiesUpdates.forEach(
-            ({ propertyPath, propertyValue, isDynamicTrigger }) => {
+            ({ isDynamicTrigger, propertyPath, propertyValue }) => {
               allUpdates[propertyPath] = propertyValue;
               if (isDynamicTrigger) triggerPaths.push(propertyPath);
             },
@@ -261,7 +261,7 @@ const PropertyControl = memo((props: Props) => {
     return { isValid, validationMessage };
   };
 
-  const { propertyName, label } = props;
+  const { label, propertyName } = props;
   if (widgetProperties) {
     const propertyValue = _.get(widgetProperties, propertyName);
     const dataTreePath: any = `${widgetProperties.widgetName}.evaluatedValues.${propertyName}`;
diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
index 0dad7349a8..c08fd6c153 100644
--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@@ -355,22 +355,22 @@ type Props = EditorJSONtoFormProps &
 
 export function EditorJSONtoForm(props: Props) {
   const {
+    actionName,
+    dataSources,
+    DATASOURCES_OPTIONS,
+    documentationLink,
+    editorConfig,
+    executedQueryData,
+    formName,
     handleSubmit,
     isDeleting,
     isRunning,
-    onRunClick,
-    onDeleteClick,
     onCreateDatasourceClick,
-    DATASOURCES_OPTIONS,
-    dataSources,
-    executedQueryData,
-    runErrorMessage,
+    onDeleteClick,
+    onRunClick,
     responseType,
-    documentationLink,
-    editorConfig,
+    runErrorMessage,
     settingConfig,
-    formName,
-    actionName,
   } = props;
 
   let error = runErrorMessage;
diff --git a/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx b/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
index 33a67966b5..fe9bab14bc 100644
--- a/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
@@ -95,12 +95,12 @@ class QueryHomeScreen extends React.Component<QueryHomeScreenProps> {
 
   render() {
     const {
-      dataSources,
       applicationId,
-      pageId,
+      dataSources,
       history,
       isCreating,
       location,
+      pageId,
     } = this.props;
 
     const destinationPageId = new URLSearchParams(location.search).get(
diff --git a/app/client/src/pages/Editor/QueryEditor/Table.tsx b/app/client/src/pages/Editor/QueryEditor/Table.tsx
index d56813fc8b..eb599786c3 100644
--- a/app/client/src/pages/Editor/QueryEditor/Table.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Table.tsx
@@ -209,11 +209,11 @@ function Table(props: TableProps) {
   );
 
   const {
-    getTableProps,
     getTableBodyProps,
+    getTableProps,
     headerGroups,
-    rows,
     prepareRow,
+    rows,
     totalColumnsWidth,
   } = useTable(
     {
diff --git a/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx b/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx
index ac64ee3045..3023376145 100644
--- a/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/TemplateMenu.tsx
@@ -55,7 +55,7 @@ class TemplateMenu extends React.Component<Props> {
   nameInput!: HTMLDivElement | null;
 
   fetchTemplate = (queryType: string) => {
-    const { pluginId, allPluginTemplates } = this.props;
+    const { allPluginTemplates, pluginId } = this.props;
     const pluginTemplates = allPluginTemplates[pluginId];
 
     if (pluginTemplates) {
@@ -64,7 +64,7 @@ class TemplateMenu extends React.Component<Props> {
   };
 
   render() {
-    const { createTemplate, allPluginTemplates, pluginId } = this.props;
+    const { allPluginTemplates, createTemplate, pluginId } = this.props;
     const pluginTemplates = allPluginTemplates[pluginId];
 
     return (
diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx
index 62afe6e0c7..5bcf3def25 100644
--- a/app/client/src/pages/Editor/QueryEditor/index.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/index.tsx
@@ -84,7 +84,7 @@ class QueryEditor extends React.Component<Props> {
   };
 
   handleRunClick = () => {
-    const { match, dataSources } = this.props;
+    const { dataSources, match } = this.props;
     PerformanceTracker.startTracking(
       PerformanceTransactionName.RUN_QUERY_CLICK,
       { queryId: this.props.match.params.queryId },
@@ -110,19 +110,19 @@ class QueryEditor extends React.Component<Props> {
   render() {
     const {
       dataSources,
-      isRunning,
+      editorConfig,
+      isCreating,
       isDeleting,
+      isEditorInitialized,
+      isRunning,
       match: {
         params: { queryId },
       },
-      pluginImages,
       pluginIds,
+      pluginImages,
       responses,
-      isCreating,
       runErrorMessage,
-      editorConfig,
       settingConfig,
-      isEditorInitialized,
     } = this.props;
     const { applicationId, pageId } = this.props.match.params;
 
diff --git a/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx b/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx
index f10e3afbf1..25f9dd690f 100644
--- a/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/ActionForm.tsx
@@ -38,10 +38,10 @@ type Props = StateAndRouteProps & InjectedFormProps<Action, StateAndRouteProps>;
 
 function ActionForm(props: Props) {
   const {
-    match: {
-      params: { pageId, applicationId, apiId },
-    },
     actionName,
+    match: {
+      params: { apiId, applicationId, pageId },
+    },
     plugin,
   } = props;
 
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index 6d636d0729..a15943d0b4 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -122,8 +122,8 @@ class DatasourceSaaSEditor extends JSONtoForm<Props> {
 
   createApiAction = () => {
     const {
-      formData,
       actions,
+      formData,
       match: {
         params: { pageId },
       },
@@ -150,12 +150,12 @@ class DatasourceSaaSEditor extends JSONtoForm<Props> {
 
   renderDataSourceConfigForm = (sections: any) => {
     const {
+      deleteDatasource,
+      isDeleting,
+      isSaving,
       match: {
         params: { applicationId, datasourceId, pageId, pluginPackageName },
       },
-      isSaving,
-      isDeleting,
-      deleteDatasource,
     } = this.props;
 
     return (
diff --git a/app/client/src/pages/Editor/SaaSEditor/ListView.tsx b/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
index 3110c242e0..d0c3877f7f 100644
--- a/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
@@ -81,11 +81,11 @@ class ListView extends React.Component<Props> {
 
   handleCreateNewAPI = (datasource: Datasource) => {
     const {
+      actions,
+      location,
       match: {
         params: { pageId },
       },
-      actions,
-      location,
     } = this.props;
     const params: string = location.search;
     let pgId = new URLSearchParams(params).get("importTo");
@@ -107,7 +107,7 @@ class ListView extends React.Component<Props> {
   };
 
   render() {
-    const { plugin, isCreating, isEditorInitialized } = this.props;
+    const { isCreating, isEditorInitialized, plugin } = this.props;
     if (!plugin) {
       return this.renderNotFound();
     }
@@ -159,10 +159,10 @@ class ListView extends React.Component<Props> {
 
   renderNotFound() {
     const {
+      history,
       match: {
         params: { applicationId, pageId },
       },
-      history,
     } = this.props;
     return (
       <IntegrationHomePage>
diff --git a/app/client/src/pages/Editor/ShareApplicationForm.tsx b/app/client/src/pages/Editor/ShareApplicationForm.tsx
index ab8c7a1e72..d56e342782 100644
--- a/app/client/src/pages/Editor/ShareApplicationForm.tsx
+++ b/app/client/src/pages/Editor/ShareApplicationForm.tsx
@@ -29,13 +29,13 @@ const ShareToggle = styled.div`
 
 export function ShareApplicationForm(props: any) {
   const {
+    changeAppViewAccess,
+    currentApplicationDetails,
+    isChangingViewAccess,
+    isFetchingApplication,
     match: {
       params: { applicationId },
     },
-    isFetchingApplication,
-    isChangingViewAccess,
-    currentApplicationDetails,
-    changeAppViewAccess,
   } = props;
 
   return (
diff --git a/app/client/src/pages/Editor/routes.tsx b/app/client/src/pages/Editor/routes.tsx
index aef4477ba6..a508661d0c 100644
--- a/app/client/src/pages/Editor/routes.tsx
+++ b/app/client/src/pages/Editor/routes.tsx
@@ -193,7 +193,7 @@ type PaneDrawerProps = {
 };
 function PaneDrawer(props: PaneDrawerProps) {
   const showPropertyPane = useShowPropertyPane();
-  const { selectWidget, focusWidget } = useWidgetSelection();
+  const { focusWidget, selectWidget } = useWidgetSelection();
   const dispatch = useDispatch();
   useEffect(() => {
     // This pane drawer is only open when NOT on canvas.
diff --git a/app/client/src/pages/Editor/utils.ts b/app/client/src/pages/Editor/utils.ts
index df7a54747e..a8ad2a30fe 100644
--- a/app/client/src/pages/Editor/utils.ts
+++ b/app/client/src/pages/Editor/utils.ts
@@ -69,7 +69,7 @@ export const draggableElement = (
   };
 
   const calculateNewPosition = () => {
-    const { height, width, top, left } = element.getBoundingClientRect();
+    const { height, left, top, width } = element.getBoundingClientRect();
     const isElementOpen = height && width;
     const {
       left: calculatedLeft,
diff --git a/app/client/src/pages/UserAuth/ForgotPassword.tsx b/app/client/src/pages/UserAuth/ForgotPassword.tsx
index 8907e670da..6f82544d63 100644
--- a/app/client/src/pages/UserAuth/ForgotPassword.tsx
+++ b/app/client/src/pages/UserAuth/ForgotPassword.tsx
@@ -59,9 +59,9 @@ export const ForgotPassword = withTheme(
     const {
       error,
       handleSubmit,
-      submitting,
       submitFailed,
       submitSucceeded,
+      submitting,
     } = props;
 
     return (
diff --git a/app/client/src/pages/UserAuth/Login.tsx b/app/client/src/pages/UserAuth/Login.tsx
index d9c8bd15cc..e3f311da21 100644
--- a/app/client/src/pages/UserAuth/Login.tsx
+++ b/app/client/src/pages/UserAuth/Login.tsx
@@ -85,7 +85,7 @@ if (enableGoogleOAuth) SocialLoginList.push(SocialLoginTypes.GOOGLE);
 if (enableGithubOAuth) SocialLoginList.push(SocialLoginTypes.GITHUB);
 
 export function Login(props: LoginFormProps) {
-  const { error, valid, emailValue: email } = props;
+  const { emailValue: email, error, valid } = props;
   const isFormValid = valid && email && !isEmptyString(email);
   const location = useLocation();
 
diff --git a/app/client/src/pages/UserAuth/ResetPassword.tsx b/app/client/src/pages/UserAuth/ResetPassword.tsx
index 38cf460624..0260d10055 100644
--- a/app/client/src/pages/UserAuth/ResetPassword.tsx
+++ b/app/client/src/pages/UserAuth/ResetPassword.tsx
@@ -72,12 +72,12 @@ export function ResetPassword(props: ResetPasswordProps) {
   const {
     error,
     handleSubmit,
-    pristine,
-    submitting,
-    submitSucceeded,
-    submitFailed,
     initialValues,
     isTokenValid,
+    pristine,
+    submitFailed,
+    submitSucceeded,
+    submitting,
     validatingToken,
     verifyToken,
   } = props;
diff --git a/app/client/src/pages/UserAuth/SignUp.tsx b/app/client/src/pages/UserAuth/SignUp.tsx
index bf6e042ea7..c27b3aeb14 100644
--- a/app/client/src/pages/UserAuth/SignUp.tsx
+++ b/app/client/src/pages/UserAuth/SignUp.tsx
@@ -76,7 +76,7 @@ type SignUpFormProps = InjectedFormProps<
   RouteComponentProps<{ email: string }> & { theme: Theme; emailValue: string };
 
 export function SignUp(props: SignUpFormProps) {
-  const { error, submitting, pristine, valid, emailValue: email } = props;
+  const { emailValue: email, error, pristine, submitting, valid } = props;
   const isFormValid = valid && email && !isEmptyString(email);
 
   const location = useLocation();
diff --git a/app/client/src/pages/UserAuth/helpers.ts b/app/client/src/pages/UserAuth/helpers.ts
index 2d5ba3626e..4bd9956080 100644
--- a/app/client/src/pages/UserAuth/helpers.ts
+++ b/app/client/src/pages/UserAuth/helpers.ts
@@ -49,7 +49,7 @@ export const resetPasswordSubmitHandler = (
   values: ResetPasswordFormValues,
   dispatch: any,
 ): Promise<any> => {
-  const { token, email, password } = values;
+  const { email, password, token } = values;
   return new Promise((resolve, reject) => {
     dispatch({
       type: ReduxActionTypes.RESET_USER_PASSWORD_INIT,
@@ -70,7 +70,7 @@ export const createPasswordSubmitHandler = (
   values: CreatePasswordFormValues,
   dispatch: any,
 ): Promise<any> => {
-  const { token, email, password } = values;
+  const { email, password, token } = values;
   return new Promise((resolve, reject) => {
     dispatch({
       type: ReduxActionTypes.INVITED_USER_SIGNUP_INIT,
diff --git a/app/client/src/pages/common/ErrorPageHeader.tsx b/app/client/src/pages/common/ErrorPageHeader.tsx
index 5e78e2493a..fc6d375623 100644
--- a/app/client/src/pages/common/ErrorPageHeader.tsx
+++ b/app/client/src/pages/common/ErrorPageHeader.tsx
@@ -45,7 +45,7 @@ type ErrorPageHeaderProps = {
 };
 
 export function ErrorPageHeader(props: ErrorPageHeaderProps) {
-  const { user, flushErrors, flushErrorsAndRedirect, safeCrash } = props;
+  const { flushErrors, flushErrorsAndRedirect, safeCrash, user } = props;
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   let loginUrl = AUTH_LOGIN_URL;
diff --git a/app/client/src/pages/common/NotFound.tsx b/app/client/src/pages/common/NotFound.tsx
index a91b32fdad..c28fc29df7 100644
--- a/app/client/src/pages/common/NotFound.tsx
+++ b/app/client/src/pages/common/NotFound.tsx
@@ -26,7 +26,7 @@ interface Props {
 }
 
 function NotFound(props: Props) {
-  const { title, subtitle, buttonText, onBackButton } = props;
+  const { buttonText, onBackButton, subtitle, title } = props;
 
   return (
     <Wrapper>
diff --git a/app/client/src/pages/organization/AppInviteUsersForm.tsx b/app/client/src/pages/organization/AppInviteUsersForm.tsx
index 71a84ed865..d04e033933 100644
--- a/app/client/src/pages/organization/AppInviteUsersForm.tsx
+++ b/app/client/src/pages/organization/AppInviteUsersForm.tsx
@@ -34,14 +34,14 @@ const ShareToggle = styled.div`
 
 function AppInviteUsersForm(props: any) {
   const {
-    isFetchingApplication,
-    isChangingViewAccess,
-    currentApplicationDetails,
-    changeAppViewAccess,
     applicationId,
-    fetchCurrentOrg,
+    changeAppViewAccess,
+    currentApplicationDetails,
     currentUser,
     defaultPageId,
+    fetchCurrentOrg,
+    isChangingViewAccess,
+    isFetchingApplication,
   } = props;
 
   const currentOrg = useSelector(getCurrentAppOrg);
diff --git a/app/client/src/pages/organization/CreateOrganizationForm.tsx b/app/client/src/pages/organization/CreateOrganizationForm.tsx
index 644f24c774..bd44cd533b 100644
--- a/app/client/src/pages/organization/CreateOrganizationForm.tsx
+++ b/app/client/src/pages/organization/CreateOrganizationForm.tsx
@@ -23,10 +23,10 @@ export function CreateApplicationForm(
   const {
     error,
     handleSubmit,
-    pristine,
-    submitting,
     invalid,
     onCancel,
+    pristine,
+    submitting,
   } = props;
   const submitHandler = useCallback(
     async (data, dispatch) => {
diff --git a/app/client/src/pages/organization/Members.tsx b/app/client/src/pages/organization/Members.tsx
index b2b45debe4..2510004dcd 100644
--- a/app/client/src/pages/organization/Members.tsx
+++ b/app/client/src/pages/organization/Members.tsx
@@ -55,9 +55,9 @@ export default function MemberSettings(props: PageProps) {
   }, [orgId]);
 
   const {
-    isFetchingAllUsers,
-    isFetchingAllRoles,
     deletingUserInfo,
+    isFetchingAllRoles,
+    isFetchingAllUsers,
     roleChangingUserInfo,
   } = useSelector(getOrgLoadingStates);
   const allUsers = useSelector(getAllUsers);
diff --git a/app/client/src/pages/organization/OrgInviteUsersForm.tsx b/app/client/src/pages/organization/OrgInviteUsersForm.tsx
index 437c3ab050..ecdfc6203b 100644
--- a/app/client/src/pages/organization/OrgInviteUsersForm.tsx
+++ b/app/client/src/pages/organization/OrgInviteUsersForm.tsx
@@ -206,19 +206,19 @@ function OrgInviteUsersForm(props: any) {
   const [emailError, setEmailError] = useState("");
   const userRef = React.createRef<HTMLDivElement>();
   const {
-    handleSubmit,
     allUsers,
-    submitting,
     anyTouched,
-    submitFailed,
-    submitSucceeded,
     error,
-    fetchUser,
     fetchAllRoles,
-    valid,
     fetchCurrentOrg,
+    fetchUser,
+    handleSubmit,
     isApplicationInvite,
     isLoading,
+    submitFailed,
+    submitSucceeded,
+    submitting,
+    valid,
   } = props;
 
   // set state for checking number of users invited
diff --git a/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts b/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts
index 6c170cb2c0..c485e100f6 100644
--- a/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts
+++ b/app/client/src/reducers/uiReducers/commentsReducer/commentsReducer.ts
@@ -141,7 +141,7 @@ const commentsReducer = createReducer(initialState, {
     state: CommentsReduxState,
     action: ReduxAction<{ threadId: string; applicationId: string }>,
   ) => {
-    const { threadId, applicationId } = action.payload;
+    const { applicationId, threadId } = action.payload;
     state.commentThreadsMap[threadId] = {
       ...state.commentThreadsMap[threadId],
       isPinned: true,
@@ -160,7 +160,7 @@ const commentsReducer = createReducer(initialState, {
       threadId: string;
     }>,
   ) => {
-    const { threadId, commentId } = action.payload;
+    const { commentId, threadId } = action.payload;
 
     const commentThread = state.commentThreadsMap[threadId];
     state.commentThreadsMap[threadId] = {
diff --git a/app/client/src/reducers/uiReducers/commentsReducer/handleAddCommentToThreadSuccess.ts b/app/client/src/reducers/uiReducers/commentsReducer/handleAddCommentToThreadSuccess.ts
index f08725669f..97606eb1e7 100644
--- a/app/client/src/reducers/uiReducers/commentsReducer/handleAddCommentToThreadSuccess.ts
+++ b/app/client/src/reducers/uiReducers/commentsReducer/handleAddCommentToThreadSuccess.ts
@@ -6,7 +6,7 @@ const handleAddCommentToThreadSuccess = (
   state: CommentsReduxState,
   action: ReduxAction<any>,
 ) => {
-  const { commentThreadId, comment } = action.payload;
+  const { comment, commentThreadId } = action.payload;
   const commentThreadInStore = state.commentThreadsMap[commentThreadId];
   const existingComments = get(commentThreadInStore, "comments", []);
   state.commentThreadsMap[commentThreadId] = {
diff --git a/app/client/src/reducers/uiReducers/commentsReducer/handleCreateNewCommentThreadSuccess.ts b/app/client/src/reducers/uiReducers/commentsReducer/handleCreateNewCommentThreadSuccess.ts
index 22e34cbb0b..43a78cc1c5 100644
--- a/app/client/src/reducers/uiReducers/commentsReducer/handleCreateNewCommentThreadSuccess.ts
+++ b/app/client/src/reducers/uiReducers/commentsReducer/handleCreateNewCommentThreadSuccess.ts
@@ -10,7 +10,7 @@ const handleCreateNewCommentThreadSuccess = (
   state: CommentsReduxState,
   action: ReduxAction<any>,
 ) => {
-  const { refId, id, applicationId } = action.payload;
+  const { applicationId, id, refId } = action.payload;
 
   state.commentThreadsMap[id] = action.payload;
 
diff --git a/app/client/src/reducers/uiReducers/editorReducer.tsx b/app/client/src/reducers/uiReducers/editorReducer.tsx
index f4dfa33458..69a0510c35 100644
--- a/app/client/src/reducers/uiReducers/editorReducer.tsx
+++ b/app/client/src/reducers/uiReducers/editorReducer.tsx
@@ -102,12 +102,12 @@ const editorReducer = createReducer(initialState, {
     action: ReduxAction<UpdateCanvasPayload>,
   ) => {
     const {
-      currentPageName,
-      currentLayoutId,
-      pageWidgetId,
       currentApplicationId,
+      currentLayoutId,
       currentPageId,
+      currentPageName,
       pageActions,
+      pageWidgetId,
     } = action.payload;
     state.loadingStates.publishing = false;
     state.loadingStates.publishingError = false;
diff --git a/app/client/src/reducers/uiReducers/propertyPaneReducer.tsx b/app/client/src/reducers/uiReducers/propertyPaneReducer.tsx
index 37a04e7579..0b559556d8 100644
--- a/app/client/src/reducers/uiReducers/propertyPaneReducer.tsx
+++ b/app/client/src/reducers/uiReducers/propertyPaneReducer.tsx
@@ -24,7 +24,7 @@ const propertyPaneReducer = createReducer(initialState, {
     ) {
       return state;
     }
-    const { widgetId, callForDragOrResize } = action.payload;
+    const { callForDragOrResize, widgetId } = action.payload;
     // If callForDragOrResize is true, an action has started or ended.
     // If the action has started, isVisibleBeforeAction should be undefined
     // If the action has ended, isVisibleBeforeAction should be the visible state
diff --git a/app/client/src/reducers/uiReducers/queryPaneReducer.ts b/app/client/src/reducers/uiReducers/queryPaneReducer.ts
index d4e9aef6d4..d954fea897 100644
--- a/app/client/src/reducers/uiReducers/queryPaneReducer.ts
+++ b/app/client/src/reducers/uiReducers/queryPaneReducer.ts
@@ -145,7 +145,7 @@ const queryPaneReducer = createReducer(initialState, {
     state: any,
     action: ReduxAction<{ id: string; error: Error }>,
   ) => {
-    const { id, error } = action.payload;
+    const { error, id } = action.payload;
 
     return {
       ...state,
diff --git a/app/client/src/resizable/index.tsx b/app/client/src/resizable/index.tsx
index 360e82840b..142f7e29e0 100644
--- a/app/client/src/resizable/index.tsx
+++ b/app/client/src/resizable/index.tsx
@@ -99,7 +99,7 @@ export const Resizable = forwardRef(
       x: number;
       y: number;
     }) => {
-      const { width, height, x, y } = rect;
+      const { height, width, x, y } = rect;
       const isColliding = props.isColliding({ width, height }, { x, y });
       if (!isColliding) {
         set({ ...rect, reset: false });
diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts
index dcd97f86c4..78ae82de5d 100644
--- a/app/client/src/sagas/ActionExecutionSagas.ts
+++ b/app/client/src/sagas/ActionExecutionSagas.ts
@@ -446,7 +446,7 @@ export function* executeActionSaga(
   apiAction: RunActionPayload,
   event: ExecuteActionPayloadEvent,
 ) {
-  const { actionId, onSuccess, onError, params } = apiAction;
+  const { actionId, onError, onSuccess, params } = apiAction;
   PerformanceTracker.startAsyncTracking(
     PerformanceTransactionName.EXECUTE_ACTION,
     {
diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts
index 7cd345d7ba..f01caaf990 100644
--- a/app/client/src/sagas/ActionSagas.ts
+++ b/app/client/src/sagas/ActionSagas.ts
@@ -619,7 +619,7 @@ function getDynamicBindingsChangesSaga(
 }
 
 function* setActionPropertySaga(action: ReduxAction<SetActionPropertyPayload>) {
-  const { actionId, value, propertyName } = action.payload;
+  const { actionId, propertyName, value } = action.payload;
   if (!actionId) return;
   if (propertyName === "name") return;
 
diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index 793f3b4a94..ac522f57b2 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -147,7 +147,7 @@ function* syncApiParamsSaga(
 function* handleUpdateBodyContentType(
   action: ReduxAction<{ title: ApiContentTypes; apiId: string }>,
 ) {
-  const { title, apiId } = action.payload;
+  const { apiId, title } = action.payload;
   const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
   const displayFormatObject = POST_BODY_FORMAT_OPTIONS.find(
     (el) => el.label === title,
@@ -348,7 +348,7 @@ function* updateFormFields(
 function* formValueChangeSaga(
   actionPayload: ReduxActionWithMeta<string, { field: string; form: string }>,
 ) {
-  const { form, field } = actionPayload.meta;
+  const { field, form } = actionPayload.meta;
   if (form !== API_EDITOR_FORM_NAME) return;
   if (field === "dynamicBindingPathList" || field === "name") return;
   const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
diff --git a/app/client/src/sagas/ApplicationSagas.tsx b/app/client/src/sagas/ApplicationSagas.tsx
index 44daa0218e..5346152181 100644
--- a/app/client/src/sagas/ApplicationSagas.tsx
+++ b/app/client/src/sagas/ApplicationSagas.tsx
@@ -165,7 +165,7 @@ export function* fetchApplicationSaga(
   action: ReduxAction<FetchApplicationPayload>,
 ) {
   try {
-    const { mode, applicationId } = action.payload;
+    const { applicationId, mode } = action.payload;
     // Get endpoint based on app mode
     const apiEndpoint =
       mode === APP_MODE.EDIT
@@ -382,7 +382,7 @@ export function* createApplicationSaga(
     reject: any;
   }>,
 ) {
-  const { applicationName, icon, color, orgId, reject } = action.payload;
+  const { applicationName, color, icon, orgId, reject } = action.payload;
   try {
     const userOrgs = yield select(getUserApplicationsOrgsList);
     const existingOrgs = userOrgs.filter(
diff --git a/app/client/src/sagas/CommentSagas/index.ts b/app/client/src/sagas/CommentSagas/index.ts
index d2bb0510e6..48989c80fe 100644
--- a/app/client/src/sagas/CommentSagas/index.ts
+++ b/app/client/src/sagas/CommentSagas/index.ts
@@ -115,7 +115,7 @@ function* addCommentToThread(
   action: ReduxAction<AddCommentToCommentThreadRequestPayload>,
 ) {
   const { payload } = action;
-  const { commentBody, commentThread, callback } = payload;
+  const { callback, commentBody, commentThread } = payload;
 
   const response = yield CommentsApi.createNewThreadComment(
     { body: commentBody },
@@ -168,7 +168,7 @@ function* setCommentResolution(
   action: ReduxAction<{ threadId: string; resolved: boolean }>,
 ) {
   try {
-    const { threadId, resolved } = action.payload;
+    const { resolved, threadId } = action.payload;
     const response = yield CommentsApi.updateCommentThread(
       { resolved },
       threadId,
diff --git a/app/client/src/sagas/CurlImportSagas.ts b/app/client/src/sagas/CurlImportSagas.ts
index 9579804f7b..8a21cc3232 100644
--- a/app/client/src/sagas/CurlImportSagas.ts
+++ b/app/client/src/sagas/CurlImportSagas.ts
@@ -19,7 +19,7 @@ import { Variant } from "components/ads/common";
 import { CURL } from "constants/AppsmithActionConstants/ActionConstants";
 
 export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
-  const { type, pageId, name } = action.payload;
+  const { name, pageId, type } = action.payload;
   let { curl } = action.payload;
   try {
     curl = transformCurlImport(curl);
diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts
index 00c1df2757..261d50fc2b 100644
--- a/app/client/src/sagas/DatasourcesSagas.ts
+++ b/app/client/src/sagas/DatasourcesSagas.ts
@@ -561,7 +561,7 @@ function* switchDatasourceSaga(action: ReduxAction<{ datasourceId: string }>) {
 function* formValueChangeSaga(
   actionPayload: ReduxActionWithMeta<string, { field: string; form: string }>,
 ) {
-  const { form, field } = actionPayload.meta;
+  const { field, form } = actionPayload.meta;
   if (form !== DATASOURCE_DB_FORM) return;
   if (field === "name") return;
   yield all([call(updateDraftsSaga)]);
diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx
index 799eb3a5b6..e96f2583c9 100644
--- a/app/client/src/sagas/ErrorSagas.tsx
+++ b/app/client/src/sagas/ErrorSagas.tsx
@@ -145,8 +145,8 @@ export interface ErrorActionPayload {
 
 export function* errorSaga(errorAction: ReduxAction<ErrorActionPayload>) {
   const effects = [ErrorEffectTypes.LOG_ERROR];
-  const { type, payload } = errorAction;
-  const { show = true, error } = payload || {};
+  const { payload, type } = errorAction;
+  const { error, show = true } = payload || {};
   const message = getErrorMessageFromActionType(type, error);
 
   if (show) {
diff --git a/app/client/src/sagas/EvaluationsSaga.ts b/app/client/src/sagas/EvaluationsSaga.ts
index f9a34de445..79b6db90b7 100644
--- a/app/client/src/sagas/EvaluationsSaga.ts
+++ b/app/client/src/sagas/EvaluationsSaga.ts
@@ -53,7 +53,7 @@ const evalErrorHandler = (errors: EvalError[]) => {
       case EvalErrorTypes.DEPENDENCY_ERROR: {
         if (error.context) {
           // Add more info about node for the toast
-          const { node, entityType } = error.context;
+          const { entityType, node } = error.context;
           Toaster.show({
             text: `${error.message} Node was: ${node}`,
             variant: Variant.danger,
@@ -146,7 +146,7 @@ function* evaluateTreeSaga(
       widgetTypeConfigMap,
     },
   );
-  const { errors, dataTree, dependencies, logs } = workerResponse;
+  const { dataTree, dependencies, errors, logs } = workerResponse;
   log.debug({ dataTree: dataTree });
   logs.forEach((evalLog: any) => log.debug(evalLog));
   evalErrorHandler(errors);
diff --git a/app/client/src/sagas/OrgSagas.ts b/app/client/src/sagas/OrgSagas.ts
index f00e18dfe3..201263b504 100644
--- a/app/client/src/sagas/OrgSagas.ts
+++ b/app/client/src/sagas/OrgSagas.ts
@@ -202,7 +202,7 @@ export function* saveOrgSaga(action: ReduxAction<SaveOrgRequest>) {
 export function* createOrgSaga(
   action: ReduxActionWithPromise<CreateOrgRequest>,
 ) {
-  const { resolve, reject, name } = action.payload;
+  const { name, reject, resolve } = action.payload;
   try {
     const request: CreateOrgRequest = { name };
     const response: ApiResponse = yield callAPI(OrgApi.createOrg, request);
diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx
index d8d0c5c06b..807b63af6c 100644
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@@ -227,7 +227,7 @@ export function* fetchPublishedPageSaga(
   pageRequestAction: ReduxAction<{ pageId: string; bustCache: boolean }>,
 ) {
   try {
-    const { pageId, bustCache } = pageRequestAction.payload;
+    const { bustCache, pageId } = pageRequestAction.payload;
     PerformanceTracker.startAsyncTracking(
       PerformanceTransactionName.FETCH_PAGE_API,
       {
@@ -326,7 +326,7 @@ function* savePageSaga(action: ReduxAction<{ isRetry?: boolean }>) {
     );
     const isValidResponse = yield validateResponse(savePageResponse);
     if (isValidResponse) {
-      const { messages, actionUpdates } = savePageResponse.data;
+      const { actionUpdates, messages } = savePageResponse.data;
       // Show toast messages from the server
       if (messages && messages.length) {
         savePageResponse.data.messages.forEach((message) => {
diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts
index acdeb053e4..018583d8e1 100644
--- a/app/client/src/sagas/QueryPaneSagas.ts
+++ b/app/client/src/sagas/QueryPaneSagas.ts
@@ -91,7 +91,7 @@ function* changeQuerySaga(actionPayload: ReduxAction<{ id: string }>) {
 function* formValueChangeSaga(
   actionPayload: ReduxActionWithMeta<string, { field: string; form: string }>,
 ) {
-  const { form, field } = actionPayload.meta;
+  const { field, form } = actionPayload.meta;
   if (field === "dynamicBindingPathList" || field === "name") return;
   if (form !== QUERY_EDITOR_FORM_NAME) return;
   const { values } = yield select(getFormData, QUERY_EDITOR_FORM_NAME);
@@ -125,10 +125,10 @@ function* formValueChangeSaga(
 
 function* handleQueryCreatedSaga(actionPayload: ReduxAction<QueryAction>) {
   const {
-    id,
-    pluginType,
-    pluginId,
     actionConfiguration,
+    id,
+    pluginId,
+    pluginType,
   } = actionPayload.payload;
   if (pluginType === PluginType.DB) {
     yield put(initialize(QUERY_EDITOR_FORM_NAME, actionPayload.payload));
diff --git a/app/client/src/sagas/RecentEntitiesSagas.ts b/app/client/src/sagas/RecentEntitiesSagas.ts
index cdeae94905..ecbef6f83a 100644
--- a/app/client/src/sagas/RecentEntitiesSagas.ts
+++ b/app/client/src/sagas/RecentEntitiesSagas.ts
@@ -63,7 +63,7 @@ function* handleSelectWidget(action: ReduxAction<{ widgetId: string }>) {
 function* handlePathUpdated(
   action: ReduxAction<{ location: typeof window.location }>,
 ) {
-  const { type, id, params } = getRecentEntity(
+  const { id, params, type } = getRecentEntity(
     action.payload.location.pathname,
   );
   if (type && id && id.indexOf(":") === -1) {
diff --git a/app/client/src/sagas/SaaSPaneSagas.ts b/app/client/src/sagas/SaaSPaneSagas.ts
index 4fbe7d7f6a..38208395da 100644
--- a/app/client/src/sagas/SaaSPaneSagas.ts
+++ b/app/client/src/sagas/SaaSPaneSagas.ts
@@ -58,7 +58,7 @@ function* handleActionCreatedSaga(actionPayload: ReduxAction<Action>) {
 function* formValueChangeSaga(
   actionPayload: ReduxActionWithMeta<string, { field: string; form: string }>,
 ) {
-  const { form, field } = actionPayload.meta;
+  const { field, form } = actionPayload.meta;
   if (field === "dynamicBindingPathList" || field === "name") return;
   if (form !== SAAS_EDITOR_FORM) return;
   const { values } = yield select(getFormData, SAAS_EDITOR_FORM);
diff --git a/app/client/src/sagas/WidgetBlueprintSagas.ts b/app/client/src/sagas/WidgetBlueprintSagas.ts
index 13499c496c..a596dda9c0 100644
--- a/app/client/src/sagas/WidgetBlueprintSagas.ts
+++ b/app/client/src/sagas/WidgetBlueprintSagas.ts
@@ -150,8 +150,8 @@ export function* executeWidgetBlueprintChildOperations(
   };
 
   const {
-    widgets,
     message,
+    widgets,
   } = (operation.fn as BlueprintOperationChildOperationsFn)(
     canvasWidgets,
     widgetId,
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index fa05b3a2e5..e5066d0ea7 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -127,8 +127,8 @@ function* getChildWidgetProps(
   params: WidgetAddChild,
   widgets: { [widgetId: string]: FlattenedWidgetProps },
 ) {
-  const { leftColumn, topRow, newWidgetId, props, type } = params;
-  let { rows, columns, parentColumnSpace, parentRowSpace, widgetName } = params;
+  const { leftColumn, newWidgetId, props, topRow, type } = params;
+  let { columns, parentColumnSpace, parentRowSpace, rows, widgetName } = params;
   let minHeight = undefined;
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const { blueprint = undefined, ...restDefaultConfig } = {
@@ -359,7 +359,7 @@ export function* addChildrenSaga(
   addChildrenAction: ReduxAction<WidgetAddChildren>,
 ) {
   try {
-    const { widgetId, children } = addChildrenAction.payload;
+    const { children, widgetId } = addChildrenAction.payload;
     const stateWidgets = yield select(getWidgets);
     const widgets = { ...stateWidgets };
     const widgetNames = Object.keys(widgets).map((w) => widgets[w].widgetName);
@@ -450,7 +450,7 @@ const resizeCanvasToLowestWidget = (
 
 export function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
   try {
-    let { widgetId, parentId } = deleteAction.payload;
+    let { parentId, widgetId } = deleteAction.payload;
     const { disallowUndo, isShortcut } = deleteAction.payload;
 
     if (!widgetId) {
@@ -700,11 +700,11 @@ export function* moveSaga(moveAction: ReduxAction<WidgetMove>) {
     Toaster.clear();
     const start = performance.now();
     const {
-      widgetId,
       leftColumn,
-      topRow,
-      parentId,
       newParentId,
+      parentId,
+      topRow,
+      widgetId,
     } = moveAction.payload;
     const stateWidget: FlattenedWidgetProps = yield select(getWidget, widgetId);
     let widget = Object.assign({}, stateWidget);
@@ -764,11 +764,11 @@ export function* resizeSaga(resizeAction: ReduxAction<WidgetResize>) {
     Toaster.clear();
     const start = performance.now();
     const {
-      widgetId,
+      bottomRow,
       leftColumn,
       rightColumn,
       topRow,
-      bottomRow,
+      widgetId,
     } = resizeAction.payload;
 
     const stateWidget: FlattenedWidgetProps = yield select(getWidget, widgetId);
@@ -893,7 +893,7 @@ function* updateWidgetPropertySaga(
   updateAction: ReduxAction<UpdateWidgetPropertyRequestPayload>,
 ) {
   const {
-    payload: { propertyValue, propertyPath, widgetId },
+    payload: { propertyPath, propertyValue, widgetId },
   } = updateAction;
 
   // Holder object to collect all updates
@@ -1044,9 +1044,9 @@ function* batchUpdateWidgetPropertySaga(
   try {
     if (Object.keys(modify).length > 0) {
       const {
-        propertyUpdates,
-        dynamicTriggerPathList,
         dynamicBindingPathList,
+        dynamicTriggerPathList,
+        propertyUpdates,
       } = getPropertiesToUpdate(widget, modify, triggerPaths);
 
       // We loop over all updates
@@ -1124,7 +1124,7 @@ function* removeWidgetProperties(widget: WidgetProps, paths: string[]) {
 function* deleteWidgetPropertySaga(
   action: ReduxAction<DeleteWidgetPropertyPayload>,
 ) {
-  const { widgetId, propertyPaths } = action.payload;
+  const { propertyPaths, widgetId } = action.payload;
   if (!widgetId) {
     // Handling the case where sometimes widget id is not passed through here
     return;
@@ -1401,10 +1401,10 @@ function* pasteWidgetSaga() {
 
     // Compute the new widget's positional properties
     const {
-      leftColumn,
-      topRow,
-      rightColumn,
       bottomRow,
+      leftColumn,
+      rightColumn,
+      topRow,
     } = yield calculateNewWidgetPosition(
       copiedWidget,
       newWidgetParentId,
@@ -1654,10 +1654,10 @@ function* addTableWidgetFromQuerySaga(action: ReduxAction<string>) {
       },
     };
     const {
-      leftColumn,
-      topRow,
-      rightColumn,
       bottomRow,
+      leftColumn,
+      rightColumn,
+      topRow,
     } = yield calculateNewWidgetPosition(
       newWidget,
       MAIN_CONTAINER_WIDGET_ID,
diff --git a/app/client/src/sagas/userSagas.tsx b/app/client/src/sagas/userSagas.tsx
index ac59d26b38..73d54031d5 100644
--- a/app/client/src/sagas/userSagas.tsx
+++ b/app/client/src/sagas/userSagas.tsx
@@ -44,7 +44,7 @@ import log from "loglevel";
 export function* createUserSaga(
   action: ReduxActionWithPromise<CreateUserRequest>,
 ) {
-  const { email, password, resolve, reject } = action.payload;
+  const { email, password, reject, resolve } = action.payload;
   try {
     const request: CreateUserRequest = { email, password };
     const response: CreateUserResponse = yield callAPI(
@@ -57,7 +57,7 @@ export function* createUserSaga(
       const errorMessage = getResponseErrorMessage(response);
       yield call(reject, { _error: errorMessage });
     } else {
-      const { email, name, id } = response.data;
+      const { email, id, name } = response.data;
       yield put({
         type: ReduxActionTypes.CREATE_USER_SUCCESS,
         payload: {
@@ -133,7 +133,7 @@ export function* getCurrentUserSaga() {
 export function* forgotPasswordSaga(
   action: ReduxActionWithPromise<ForgotPasswordRequest>,
 ) {
-  const { email, resolve, reject } = action.payload;
+  const { email, reject, resolve } = action.payload;
 
   try {
     const request: ForgotPasswordRequest = { email };
@@ -163,7 +163,7 @@ export function* forgotPasswordSaga(
 export function* resetPasswordSaga(
   action: ReduxActionWithPromise<TokenPasswordUpdateRequest>,
 ) {
-  const { email, token, password, resolve, reject } = action.payload;
+  const { email, password, reject, resolve, token } = action.payload;
   try {
     const request: TokenPasswordUpdateRequest = {
       email,
@@ -196,7 +196,7 @@ export function* resetPasswordSaga(
 export function* invitedUserSignupSaga(
   action: ReduxActionWithPromise<TokenPasswordUpdateRequest>,
 ) {
-  const { email, token, password, resolve, reject } = action.payload;
+  const { email, password, reject, resolve, token } = action.payload;
   try {
     const request: TokenPasswordUpdateRequest = { email, password, token };
     const response: ApiResponse = yield callAPI(
@@ -240,7 +240,7 @@ export function* inviteUsers(
     data: { usernames: string[]; orgId: string; roleName: string };
   }>,
 ) {
-  const { data, resolve, reject } = action.payload;
+  const { data, reject, resolve } = action.payload;
   try {
     const response: ApiResponse = yield callAPI(UserApi.inviteUser, {
       usernames: data.usernames,
diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx
index 632f88e28e..3203ae1519 100644
--- a/app/client/src/selectors/editorSelectors.tsx
+++ b/app/client/src/selectors/editorSelectors.tsx
@@ -124,9 +124,9 @@ export const getWidgetCards = createSelector(
     return cards
       .map((widget: WidgetCardProps) => {
         const {
-          rows,
           columns,
           detachFromLayout = false,
+          rows,
         }: any = widgetConfigs.config[widget.type];
         return { ...widget, rows, columns, detachFromLayout };
       })
diff --git a/app/client/src/utils/autocomplete/TernServer.ts b/app/client/src/utils/autocomplete/TernServer.ts
index 5a1863c349..0471d46ce4 100644
--- a/app/client/src/utils/autocomplete/TernServer.ts
+++ b/app/client/src/utils/autocomplete/TernServer.ts
@@ -109,7 +109,7 @@ class TernServer {
     const index = lineValue.indexOf(focusedValue);
     let completions: Completion[] = [];
     let after = "";
-    const { start, end } = data;
+    const { end, start } = data;
     const from = {
       ...start,
       ch: start.ch + index,
diff --git a/app/client/src/utils/hooks/useDynamicAppLayout.tsx b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
index 490dfe2849..2330f7453c 100644
--- a/app/client/src/utils/hooks/useDynamicAppLayout.tsx
+++ b/app/client/src/utils/hooks/useDynamicAppLayout.tsx
@@ -20,7 +20,7 @@ import { calculateDynamicHeight } from "utils/WidgetPropsUtils";
 import { useWindowSizeHooks } from "./dragResizeHooks";
 
 export const useDynamicAppLayout = () => {
-  const { width: screenWidth, height: screenHeight } = useWindowSizeHooks();
+  const { height: screenHeight, width: screenWidth } = useWindowSizeHooks();
   const mainContainer = useSelector((state: AppState) =>
     getWidget(state, MAIN_CONTAINER_WIDGET_ID),
   );
diff --git a/app/client/src/utils/hooks/useIsScrolledToBottom.tsx b/app/client/src/utils/hooks/useIsScrolledToBottom.tsx
index 61e5f6a3cd..f60db912a5 100644
--- a/app/client/src/utils/hooks/useIsScrolledToBottom.tsx
+++ b/app/client/src/utils/hooks/useIsScrolledToBottom.tsx
@@ -10,7 +10,7 @@ const useIsScrolledToBottom = (
   const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
   useEffect(() => {
     const calculateIsScrolledToBottom = (e: any) => {
-      const { scrollHeight, offsetHeight, scrollTop } = e.target;
+      const { offsetHeight, scrollHeight, scrollTop } = e.target;
       setIsScrolledToBottom(scrollHeight - (offsetHeight + scrollTop) < 10);
     };
 
diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx
index 9bca369c55..ea3e3f0657 100644
--- a/app/client/src/widgets/ContainerWidget.tsx
+++ b/app/client/src/widgets/ContainerWidget.tsx
@@ -82,7 +82,7 @@ class ContainerWidget extends BaseWidget<
       return null;
     }
 
-    const { componentWidth, componentHeight } = this.getComponentDimensions();
+    const { componentHeight, componentWidth } = this.getComponentDimensions();
 
     childWidgetData.rightColumn = componentWidth;
     childWidgetData.bottomRow = this.props.shouldScrollContents
diff --git a/app/client/src/widgets/DropdownWidget.tsx b/app/client/src/widgets/DropdownWidget.tsx
index 829f52c7f0..f8e48b2a4a 100644
--- a/app/client/src/widgets/DropdownWidget.tsx
+++ b/app/client/src/widgets/DropdownWidget.tsx
@@ -145,7 +145,7 @@ class DropdownWidget extends BaseWidget<DropdownWidgetProps, WidgetState> {
       value: this.props.selectedOptionValue,
     });
     const computedSelectedIndexArr = this.props.selectedIndexArr || [];
-    const { componentWidth, componentHeight } = this.getComponentDimensions();
+    const { componentHeight, componentWidth } = this.getComponentDimensions();
     return (
       <DropDownComponent
         disabled={this.props.isDisabled}
diff --git a/app/client/src/widgets/ListWidget/ListWidget.tsx b/app/client/src/widgets/ListWidget/ListWidget.tsx
index 2e41d64f6f..8cd8a453bd 100644
--- a/app/client/src/widgets/ListWidget/ListWidget.tsx
+++ b/app/client/src/widgets/ListWidget/ListWidget.tsx
@@ -157,7 +157,7 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
   };
 
   renderChild = (childWidgetData: WidgetProps) => {
-    const { componentWidth, componentHeight } = this.getComponentDimensions();
+    const { componentHeight, componentWidth } = this.getComponentDimensions();
 
     childWidgetData.parentId = this.props.widgetId;
     childWidgetData.shouldScrollContents = this.props.shouldScrollContents;
@@ -204,9 +204,9 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
 
   updateTemplateWidgetProperties = (widget: WidgetProps, itemIndex: number) => {
     const {
-      template,
       dynamicBindingPathList,
       dynamicTriggerPathList,
+      template,
     } = this.props;
     const { widgetName = "" } = widget;
     // Update properties if they're dynamic
@@ -410,7 +410,7 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
    */
   paginateItems = (children: ContainerWidgetProps<WidgetProps>[]) => {
     const { page } = this.state;
-    const { shouldPaginate, perPage } = this.shouldPaginate();
+    const { perPage, shouldPaginate } = this.shouldPaginate();
 
     if (shouldPaginate) {
       return children.slice((page - 1) * perPage, page * perPage);
@@ -495,7 +495,7 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
    */
   shouldPaginate = () => {
     let { gridGap } = this.props;
-    const { items, children } = this.props;
+    const { children, items } = this.props;
     const { componentHeight } = this.getComponentDimensions();
     const templateBottomRow = get(children, "0.children.0.bottomRow");
     const templateHeight = templateBottomRow * 40;
@@ -528,7 +528,7 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
    */
   getPageView() {
     const children = this.renderChildren();
-    const { shouldPaginate, perPage } = this.shouldPaginate();
+    const { perPage, shouldPaginate } = this.shouldPaginate();
 
     if (!isNumber(perPage) || perPage === 0) {
       return (
diff --git a/app/client/src/widgets/MetaHOC.tsx b/app/client/src/widgets/MetaHOC.tsx
index 2ee43f1df9..7166fd6c3f 100644
--- a/app/client/src/widgets/MetaHOC.tsx
+++ b/app/client/src/widgets/MetaHOC.tsx
@@ -122,7 +122,7 @@ const withMeta = (WrappedWidget: typeof BaseWidget) => {
     };
 
     handleUpdateWidgetMetaProperty() {
-      const { updateWidgetMetaProperty, executeAction } = this.context;
+      const { executeAction, updateWidgetMetaProperty } = this.context;
       const { widgetId, widgetName } = this.props;
       /*
        We have kept a map of all updated properties. After debouncing we will
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index ba4f1acb18..885a6e4d4a 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -607,7 +607,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     const { pageSize, filteredTableData = [] } = this.props;
     const tableColumns = this.getTableColumns() || [];
     const transformedData = this.transformData(filteredTableData, tableColumns);
-    const { componentWidth, componentHeight } = this.getComponentDimensions();
+    const { componentHeight, componentWidth } = this.getComponentDimensions();
 
     return (
       <Suspense fallback={<Skeleton />}>
diff --git a/app/client/src/widgets/Tabs/TabsWidget.test.tsx b/app/client/src/widgets/Tabs/TabsWidget.test.tsx
index 72635ff1d5..ca749b4ef0 100644
--- a/app/client/src/widgets/Tabs/TabsWidget.test.tsx
+++ b/app/client/src/widgets/Tabs/TabsWidget.test.tsx
@@ -13,7 +13,7 @@ import { getCanvasWidgetsPayload } from "sagas/PageSagas";
 import { noop } from "utils/AppsmithUtils";
 
 Element.prototype.scrollTo = noop;
-function SetCanvas({ dsl, children }: any) {
+function SetCanvas({ children, dsl }: any) {
   const dispatch = useDispatch();
   const mockResp: any = {
     data: {
diff --git a/app/client/src/widgets/Tabs/TabsWidget.tsx b/app/client/src/widgets/Tabs/TabsWidget.tsx
index 664d6d61f9..35e9d7430b 100644
--- a/app/client/src/widgets/Tabs/TabsWidget.tsx
+++ b/app/client/src/widgets/Tabs/TabsWidget.tsx
@@ -170,7 +170,7 @@ class TabsWidget extends BaseWidget<
     }
     childWidgetData.shouldScrollContents = false;
     childWidgetData.canExtend = this.props.shouldScrollContents;
-    const { componentWidth, componentHeight } = this.getComponentDimensions();
+    const { componentHeight, componentWidth } = this.getComponentDimensions();
     childWidgetData.rightColumn = componentWidth;
     childWidgetData.isVisible = this.props.isVisible;
     childWidgetData.bottomRow = this.props.shouldScrollContents
diff --git a/app/client/src/widgets/VideoWidget.tsx b/app/client/src/widgets/VideoWidget.tsx
index 16dbf4d462..bcb4997576 100644
--- a/app/client/src/widgets/VideoWidget.tsx
+++ b/app/client/src/widgets/VideoWidget.tsx
@@ -111,7 +111,7 @@ class VideoWidget extends BaseWidget<VideoWidgetProps, WidgetState> {
   }
 
   getPageView() {
-    const { url, autoPlay, onEnd, onPause, onPlay } = this.props;
+    const { autoPlay, onEnd, onPause, onPlay, url } = this.props;
     return (
       <Suspense fallback={<Skeleton />}>
         <VideoComponent
diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index 052b98e9ed..9c3d81b764 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -547,7 +547,7 @@ export default class DataTreeEvaluator {
     callBackData?: Array<any>,
   ) {
     // Get the {{binding}} bound values
-    const { stringSegments, jsSnippets } = getDynamicBindings(dynamicBinding);
+    const { jsSnippets, stringSegments } = getDynamicBindings(dynamicBinding);
     if (returnTriggers) {
       const result = this.evaluateDynamicBoundValue(
         data,
@@ -626,7 +626,7 @@ export default class DataTreeEvaluator {
       valueToValidate = triggers;
     }
     const validation = widget.validationPaths[propertyPath];
-    const { parsed, isValid, message, transformed } = validateWidgetProperty(
+    const { isValid, message, parsed, transformed } = validateWidgetProperty(
       propertyPath,
       valueToValidate,
       widget,
diff --git a/app/client/src/workers/evaluation.worker.ts b/app/client/src/workers/evaluation.worker.ts
index fd1e3ff4cb..f08f4f2c30 100644
--- a/app/client/src/workers/evaluation.worker.ts
+++ b/app/client/src/workers/evaluation.worker.ts
@@ -26,7 +26,7 @@ function messageEventListener(
 ) {
   return (e: MessageEvent) => {
     const startTime = performance.now();
-    const { method, requestId, requestData } = e.data;
+    const { method, requestData, requestId } = e.data;
     const responseData = fn(method, requestData);
     const endTime = performance.now();
     ctx.postMessage({
@@ -42,7 +42,7 @@ ctx.addEventListener(
   messageEventListener((method, requestData: any) => {
     switch (method) {
       case EVAL_WORKER_ACTIONS.EVAL_TREE: {
-        const { widgetTypeConfigMap, unevalTree } = requestData;
+        const { unevalTree, widgetTypeConfigMap } = requestData;
         let dataTree: DataTree = unevalTree;
         let errors: EvalError[] = [];
         let logs: any[] = [];
@@ -104,7 +104,7 @@ ctx.addEventListener(
         return { values: cleanValues, errors };
       }
       case EVAL_WORKER_ACTIONS.EVAL_TRIGGER: {
-        const { dynamicTrigger, callbackData, dataTree } = requestData;
+        const { callbackData, dataTree, dynamicTrigger } = requestData;
         if (!dataTreeEvaluator) {
           return { triggers: [], errors: [] };
         }
@@ -152,7 +152,7 @@ ctx.addEventListener(
         return true;
       }
       case EVAL_WORKER_ACTIONS.VALIDATE_PROPERTY: {
-        const { property, value, props, validation } = requestData;
+        const { property, props, validation, value } = requestData;
         return removeFunctions(
           validateWidgetProperty(property, value, props, validation),
         );
diff --git a/app/client/src/workers/evaluationSubstitution.ts b/app/client/src/workers/evaluationSubstitution.ts
index 477cc180d0..d4d4511d82 100644
--- a/app/client/src/workers/evaluationSubstitution.ts
+++ b/app/client/src/workers/evaluationSubstitution.ts
@@ -33,8 +33,8 @@ export const smartSubstituteDynamicValues = (
 ): string => {
   const {
     binding,
-    subValues,
     subBindings,
+    subValues,
   } = filterBindingSegmentsAndRemoveQuotes(
     originalBinding,
     subSegments,
@@ -73,8 +73,8 @@ export const parameterSubstituteDynamicValues = (
 ) => {
   const {
     binding,
-    subValues,
     subBindings,
+    subValues,
   } = filterBindingSegmentsAndRemoveQuotes(
     originalBinding,
     subSegments,
diff --git a/app/client/src/workers/evaluationUtils.ts b/app/client/src/workers/evaluationUtils.ts
index 781408fbe8..05694b1644 100644
--- a/app/client/src/workers/evaluationUtils.ts
+++ b/app/client/src/workers/evaluationUtils.ts
@@ -279,7 +279,7 @@ export function getValidatedTree(tree: DataTree) {
     Object.entries(entity.validationPaths).forEach(([property, validation]) => {
       const value = _.get(entity, property);
       // Pass it through parse
-      const { parsed, isValid, message, transformed } = validateWidgetProperty(
+      const { isValid, message, parsed, transformed } = validateWidgetProperty(
         property,
         value,
         entity,
diff --git a/app/client/src/workers/validations.ts b/app/client/src/workers/validations.ts
index 12878ceb02..4a76c0a60e 100644
--- a/app/client/src/workers/validations.ts
+++ b/app/client/src/workers/validations.ts
@@ -86,7 +86,7 @@ export const VALIDATORS: Record<VALIDATION_TYPES, Validator> = {
     props: WidgetProps,
     dataTree?: DataTree,
   ): ValidationResponse => {
-    const { isValid, parsed, message } = VALIDATORS[VALIDATION_TYPES.TEXT](
+    const { isValid, message, parsed } = VALIDATORS[VALIDATION_TYPES.TEXT](
       value,
       props,
       dataTree,
@@ -265,7 +265,7 @@ export const VALIDATORS: Record<VALIDATION_TYPES, Validator> = {
     props: WidgetProps,
     dataTree?: DataTree,
   ): ValidationResponse => {
-    const { isValid, transformed, parsed } = VALIDATORS.ARRAY(
+    const { isValid, parsed, transformed } = VALIDATORS.ARRAY(
       value,
       props,
       dataTree,
@@ -303,7 +303,7 @@ export const VALIDATORS: Record<VALIDATION_TYPES, Validator> = {
     props: WidgetProps,
     dataTree?: DataTree,
   ): ValidationResponse => {
-    const { isValid, transformed, parsed } = VALIDATORS.ARRAY(
+    const { isValid, parsed, transformed } = VALIDATORS.ARRAY(
       value,
       props,
       dataTree,
@@ -709,7 +709,7 @@ export const VALIDATORS: Record<VALIDATION_TYPES, Validator> = {
     props: WidgetProps,
     dataTree?: DataTree,
   ): ValidationResponse => {
-    const { isValid, parsed, message } = VALIDATORS[VALIDATION_TYPES.ARRAY](
+    const { isValid, message, parsed } = VALIDATORS[VALIDATION_TYPES.ARRAY](
       value,
       props,
       dataTree,

From aeda36f0e08ac7f16fbeb2261d6b8635a88aeab0 Mon Sep 17 00:00:00 2001
From: Nidhi <nidhi@appsmith.com>
Date: Thu, 13 May 2021 14:29:43 +0530
Subject: [PATCH 50/76] Disable cs url as an environment config (#4465)

---
 deploy/k8s/scripts/appsmith-configmap.yaml.sh | 1 -
 deploy/template/docker.env.sh                 | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/deploy/k8s/scripts/appsmith-configmap.yaml.sh b/deploy/k8s/scripts/appsmith-configmap.yaml.sh
index 463b99f299..d664292f6f 100644
--- a/deploy/k8s/scripts/appsmith-configmap.yaml.sh
+++ b/deploy/k8s/scripts/appsmith-configmap.yaml.sh
@@ -30,5 +30,4 @@ data:
   APPSMITH_REDIS_URL: redis://redis-service:6379
   APPSMITH_MONGODB_URI: $mongo_protocol$encoded_mongo_root_user:$encoded_mongo_root_password@$mongo_host/$mongo_db?retryWrites=true&authSource=admin
   APPSMITH_DISABLE_TELEMETRY: "$disable_telemetry"
-  APPSMITH_CLOUD_SERVICES_BASE_URL: "https://cs.appsmith.com"
 EOF
diff --git a/deploy/template/docker.env.sh b/deploy/template/docker.env.sh
index 342287dbc5..6bbeb5e901 100644
--- a/deploy/template/docker.env.sh
+++ b/deploy/template/docker.env.sh
@@ -59,8 +59,4 @@ APPSMITH_DISABLE_TELEMETRY=$disable_telemetry
 # APPSMITH_CODEC_SIZE=
 # *******************************
 
-# ****** CLOUD SERVICES *******
-APPSMITH_CLOUD_SERVICES_BASE_URL=https://cs.appsmith.com
-# *******************************
-
 EOF

From 8ecac87ec7d3cbb1b5661ca038b3dc6a89dcb2a7 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Thu, 13 May 2021 17:38:15 +0530
Subject: [PATCH 51/76] Change the cell renderer function from class property
 to inline and use JSON.stringify to do the comparision.

---
 .../appsmith/TableComponent/index.tsx         |   6 +-
 app/client/src/widgets/TableWidget/index.tsx  | 109 ++++++++----------
 2 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
index 885886fee1..2d7ebbda4c 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableComponent/index.tsx
@@ -254,7 +254,6 @@ function ReactTableComponent(props: ReactTableComponentProps) {
 export default React.memo(ReactTableComponent, (prev, next) => {
   return (
     prev.applyFilter === next.applyFilter &&
-    prev.columnSizeMap === next.columnSizeMap &&
     prev.compactMode === next.compactMode &&
     prev.disableDrag === next.disableDrag &&
     prev.editMode === next.editMode &&
@@ -280,7 +279,10 @@ export default React.memo(ReactTableComponent, (prev, next) => {
     prev.widgetId === next.widgetId &&
     prev.widgetName === next.widgetName &&
     prev.width === next.width &&
+    isEqual(prev.columnSizeMap, next.columnSizeMap) &&
     isEqual(prev.tableData, next.tableData) &&
-    isEqual(prev.columns, next.columns)
+    // Using JSON stringify becuase isEqual doesnt work with functions,
+    // and we are not changing the columns manually.
+    JSON.stringify(prev.columns) === JSON.stringify(next.columns)
   );
 });
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index a3ed198da7..1b15f7ceca 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -124,58 +124,6 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return cellProperties;
   };
 
-  cellRenderer = (props: any) => {
-    const allColumnProperties = this.props.tableColumns || [];
-    const index = props.column.columnProperties.index;
-    const columnProperties = allColumnProperties[index];
-    const isHidden = !columnProperties.isVisible;
-    const { componentWidth } = this.getComponentDimensions();
-
-    let rowIndex: number = props.cell.row.index;
-    const data = this.props.filteredTableData[rowIndex];
-    if (data && data.__originalIndex__) rowIndex = data.__originalIndex__;
-
-    const cellProperties = this.getCellProperties(columnProperties, rowIndex);
-    if (columnProperties.columnType === "button") {
-      const buttonProps = {
-        isSelected: !!props.row.isSelected,
-        onCommandClick: (action: string, onComplete: () => void) =>
-          this.onCommandClick(rowIndex, action, onComplete),
-        backgroundColor: cellProperties.buttonStyle || "rgb(3, 179, 101)",
-        buttonLabelColor: cellProperties.buttonLabelColor || "#FFFFFF",
-        columnActions: [
-          {
-            id: columnProperties.id,
-            label: cellProperties.buttonLabel || "Action",
-            dynamicTrigger: columnProperties.onClick || "",
-          },
-        ],
-      };
-      return renderActions(buttonProps, isHidden, cellProperties);
-    } else if (columnProperties.columnType === "dropdown") {
-      let options = [];
-      try {
-        options = JSON.parse(columnProperties.dropdownOptions || "");
-      } catch (e) {}
-      return renderDropdown({
-        options: options,
-        onItemSelect: this.onItemSelect,
-        onOptionChange: columnProperties.onOptionChange || "",
-        selectedIndex: isNumber(props.cell.value)
-          ? props.cell.value
-          : undefined,
-      });
-    } else {
-      return renderCell(
-        props.cell.value,
-        columnProperties.columnType,
-        isHidden,
-        cellProperties,
-        componentWidth,
-      );
-    }
-  };
-
   getTableColumns = () => {
     let columns: ReactTableColumnProps[] = [];
     const hiddenColumns: ReactTableColumnProps[] = [];
@@ -212,7 +160,54 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
           inputFormat: columnProperties?.inputFormat || "",
         },
         columnProperties: columnProperties,
-        Cell: this.cellRenderer,
+        Cell: (props: any) => {
+          let rowIndex: number = props.cell.row.index;
+          const data = this.props.filteredTableData[rowIndex];
+          if (data && data.__originalIndex__) rowIndex = data.__originalIndex__;
+
+          const cellProperties = this.getCellProperties(
+            columnProperties,
+            rowIndex,
+          );
+          if (columnProperties.columnType === "button") {
+            const buttonProps = {
+              isSelected: !!props.row.isSelected,
+              onCommandClick: (action: string, onComplete: () => void) =>
+                this.onCommandClick(rowIndex, action, onComplete),
+              backgroundColor: cellProperties.buttonStyle || "rgb(3, 179, 101)",
+              buttonLabelColor: cellProperties.buttonLabelColor || "#FFFFFF",
+              columnActions: [
+                {
+                  id: columnProperties.id,
+                  label: cellProperties.buttonLabel || "Action",
+                  dynamicTrigger: columnProperties.onClick || "",
+                },
+              ],
+            };
+            return renderActions(buttonProps, isHidden, cellProperties);
+          } else if (columnProperties.columnType === "dropdown") {
+            let options = [];
+            try {
+              options = JSON.parse(columnProperties.dropdownOptions || "");
+            } catch (e) {}
+            return renderDropdown({
+              options: options,
+              onItemSelect: this.onItemSelect,
+              onOptionChange: columnProperties.onOptionChange || "",
+              selectedIndex: isNumber(props.cell.value)
+                ? props.cell.value
+                : undefined,
+            });
+          } else {
+            return renderCell(
+              props.cell.value,
+              columnProperties.columnType,
+              isHidden,
+              cellProperties,
+              componentWidth,
+            );
+          }
+        },
       };
       if (isHidden) {
         columnData.isHidden = true;
@@ -608,11 +603,9 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
     return selectedRowIndices;
   };
 
-  applyFilters = () => {
-    (filters: ReactTableFilter[]) => {
-      this.resetSelectedRowIndex();
-      this.props.updateWidgetMetaProperty("filters", filters);
-    };
+  applyFilters = (filters: ReactTableFilter[]) => {
+    this.resetSelectedRowIndex();
+    this.props.updateWidgetMetaProperty("filters", filters);
   };
 
   toggleDrag = (disable: boolean) => {

From d27dcca6783b76077757524bd1a38c189a7adbb6 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish@appsmith.com>
Date: Thu, 13 May 2021 17:50:04 +0530
Subject: [PATCH 52/76] - Remove jsx-no-bind and noshadow eslint rules

---
 app/client/.eslintrc.json | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
index 441567e873..7cf9b9c110 100644
--- a/app/client/.eslintrc.json
+++ b/app/client/.eslintrc.json
@@ -35,15 +35,7 @@
     "react/jsx-sort-props": "error",
     "react/jsx-fragments": "error",
     "react/jsx-no-useless-fragment": "error",
-    "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}],
-    "react/jsx-no-bind": ["warn", {
-      "ignoreDOMComponents":  false,
-      "ignoreRefs": true,
-      "allowArrowFunctions":  false,
-      "allowFunctions":  false,
-      "allowBind": false
-    }],
-    "no-shadow": ["warn", { "builtinGlobals": true }]
+    "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}]
   },
   "settings": {
     "react": {

From 2b7212da8c8714f80c8ef881f4acb2d24da1639a Mon Sep 17 00:00:00 2001
From: Trisha Anand <trisha@appsmith.com>
Date: Thu, 13 May 2021 19:52:54 +0530
Subject: [PATCH 53/76] Init minor comment

---
 app/client/src/workers/DataTreeEvaluator.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index 052b98e9ed..afe42e372c 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -417,6 +417,7 @@ export default class DataTreeEvaluator {
           }
 
           if (isWidget(entity)) {
+            // In case the widget has a scope, handle replacement of the variable name with the values from the scope.
             const widgetEntity = entity;
             const defaultPropertyMap = this.widgetConfigMap[widgetEntity.type]
               .defaultProperties;

From 377629955d51fb537255bffd865245dc8f19ae2a Mon Sep 17 00:00:00 2001
From: Trisha Anand <trisha@appsmith.com>
Date: Thu, 13 May 2021 20:01:37 +0530
Subject: [PATCH 54/76] Revert "Init minor comment"

This reverts commit 2b7212da8c8714f80c8ef881f4acb2d24da1639a.
---
 app/client/src/workers/DataTreeEvaluator.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index afe42e372c..052b98e9ed 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -417,7 +417,6 @@ export default class DataTreeEvaluator {
           }
 
           if (isWidget(entity)) {
-            // In case the widget has a scope, handle replacement of the variable name with the values from the scope.
             const widgetEntity = entity;
             const defaultPropertyMap = this.widgetConfigMap[widgetEntity.type]
               .defaultProperties;

From fb8b6d1995e93f31a26e88514c49bc9a7e0cbd4f Mon Sep 17 00:00:00 2001
From: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com>
Date: Thu, 13 May 2021 21:27:19 +0530
Subject: [PATCH 55/76] updated method to print response (#4473)

---
 app/client/cypress/support/commands.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index dfc0cd4425..1054ea3767 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -1870,11 +1870,11 @@ Cypress.Commands.add("testDatasource", () => {
 
 Cypress.Commands.add("saveDatasource", () => {
   cy.get(".t--save-datasource").click();
-  cy.wait("@saveDatasource").should(
-    "have.nested.property",
-    "response.body.responseMeta.status",
-    200,
-  );
+  cy.wait("@saveDatasource")
+    .then((xhr) => {
+      cy.log(JSON.stringify(xhr.response.body));
+    })
+    .should("have.nested.property", "response.body.responseMeta.status", 200);
 });
 
 Cypress.Commands.add("testSaveDatasource", () => {

From 068e4065d7668b3116da406c4dc01789069947c9 Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Fri, 14 May 2021 12:21:09 +0530
Subject: [PATCH 56/76] Expose response headers for API/DB actions (#4336)

* Expose response headers for API/DB actions

* Added responseMeta to actions datatree

* Modified cypress test to account for responseMeta

* Modify cypress test case

* More test changes

* Modified tests
---
 .../Entity_Explorer_Query_Datasource_spec.js           |  5 +++--
 .../ExplorerTests/Entity_Explorer_API_Pane_spec.js     |  5 +++--
 .../Entity_Explorer_CopyQuery_RenameDatasource_spec.js | 10 ++++++----
 app/client/src/entities/DataTree/dataTreeAction.ts     |  5 +++++
 app/client/src/entities/DataTree/dataTreeFactory.ts    |  5 +++--
 .../src/reducers/entityReducers/actionsReducer.tsx     |  9 +++++++++
 app/client/src/utils/autocomplete/EntityDefinitions.ts | 10 ++++++++++
 app/client/src/workers/evaluation.test.ts              |  1 +
 app/client/src/workers/evaluationUtils.test.ts         |  1 +
 9 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Query_Datasource_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Query_Datasource_spec.js
index f094bf74d7..12cd1d8c7a 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Query_Datasource_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Query_Datasource_spec.js
@@ -101,10 +101,11 @@ describe("Entity explorer tests related to query and datasource", function() {
       .find(explorer.collapse)
       .click();
     cy.get(apiwidget.propertyList).then(function($lis) {
-      expect($lis).to.have.length(3);
+      expect($lis).to.have.length(4);
       expect($lis.eq(0)).to.contain("{{Query1.isLoading}}");
       expect($lis.eq(1)).to.contain("{{Query1.data}}");
-      expect($lis.eq(2)).to.contain("{{Query1.run()}}");
+      expect($lis.eq(2)).to.contain("{{Query1.responseMeta}}");
+      expect($lis.eq(3)).to.contain("{{Query1.run()}}");
     });
     cy.Createpage(pageid);
     cy.GlobalSearchEntity("Query1");
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_API_Pane_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_API_Pane_spec.js
index c14b38effc..0e60dda003 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_API_Pane_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_API_Pane_spec.js
@@ -27,10 +27,11 @@ describe("Entity explorer API pane related testcases", function() {
       .find(explorer.collapse)
       .click();
     cy.get(apiwidget.propertyList).then(function($lis) {
-      expect($lis).to.have.length(3);
+      expect($lis).to.have.length(4);
       expect($lis.eq(0)).to.contain("{{FirstAPI.isLoading}}");
       expect($lis.eq(1)).to.contain("{{FirstAPI.data}}");
-      expect($lis.eq(2)).to.contain("{{FirstAPI.run()}}");
+      expect($lis.eq(2)).to.contain("{{FirstAPI.responseMeta}}");
+      expect($lis.eq(3)).to.contain("{{FirstAPI.run()}}");
     });
     cy.get(apiwidget.actionlist)
       .contains(testdata.Get)
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js
index 952c0cdaaf..e136b3b441 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js
@@ -54,10 +54,11 @@ describe("Entity explorer tests related to copy query", function() {
         .find(explorer.collapse)
         .click();
       cy.get(apiwidget.propertyList).then(function($lis) {
-        expect($lis).to.have.length(3);
+        expect($lis).to.have.length(4);
         expect($lis.eq(0)).to.contain("{{Query1.isLoading}}");
         expect($lis.eq(1)).to.contain("{{Query1.data}}");
-        expect($lis.eq(2)).to.contain("{{Query1.run()}}");
+        expect($lis.eq(2)).to.contain("{{Query1.responseMeta}}");
+        expect($lis.eq(3)).to.contain("{{Query1.run()}}");
       });
     });
   });
@@ -77,10 +78,11 @@ describe("Entity explorer tests related to copy query", function() {
       .find(explorer.collapse)
       .click();
     cy.get(apiwidget.propertyList).then(function($lis) {
-      expect($lis).to.have.length(3);
+      expect($lis).to.have.length(4);
       expect($lis.eq(0)).to.contain("{{Query1Copy.isLoading}}");
       expect($lis.eq(1)).to.contain("{{Query1Copy.data}}");
-      expect($lis.eq(2)).to.contain("{{Query1Copy.run()}}");
+      expect($lis.eq(2)).to.contain("{{Query1Copy.responseMeta}}");
+      expect($lis.eq(3)).to.contain("{{Query1Copy.run()}}");
     });
   });
 
diff --git a/app/client/src/entities/DataTree/dataTreeAction.ts b/app/client/src/entities/DataTree/dataTreeAction.ts
index e10f9ba481..da13794861 100644
--- a/app/client/src/entities/DataTree/dataTreeAction.ts
+++ b/app/client/src/entities/DataTree/dataTreeAction.ts
@@ -36,6 +36,11 @@ export const generateDataTreeAction = (
     config: action.config.actionConfiguration,
     dynamicBindingPathList,
     data: action.data ? action.data.body : {},
+    responseMeta: {
+      statusCode: action.data?.statusCode,
+      isExecutionSuccess: action.data?.isExecutionSuccess || false,
+      headers: action.data?.headers,
+    },
     ENTITY_TYPE: ENTITY_TYPE.ACTION,
     isLoading: action.isLoading,
     bindingPaths: getBindingPathsOfAction(action.config, editorConfig),
diff --git a/app/client/src/entities/DataTree/dataTreeFactory.ts b/app/client/src/entities/DataTree/dataTreeFactory.ts
index eb071d4bca..5d4d659bb7 100644
--- a/app/client/src/entities/DataTree/dataTreeFactory.ts
+++ b/app/client/src/entities/DataTree/dataTreeFactory.ts
@@ -1,6 +1,6 @@
 import {
-  ActionData,
   ActionDataState,
+  ActionDataWithMeta,
 } from "reducers/entityReducers/actionsReducer";
 import { WidgetProps } from "widgets/BaseWidget";
 import { ActionResponse } from "api/ActionAPI";
@@ -42,7 +42,8 @@ export enum EvaluationSubstitutionType {
   SMART_SUBSTITUTE = "SMART_SUBSTITUTE",
 }
 
-export interface DataTreeAction extends Omit<ActionData, "data" | "config"> {
+export interface DataTreeAction
+  extends Omit<ActionDataWithMeta, "data" | "config"> {
   data: ActionResponse["body"];
   actionId: string;
   config: Partial<ActionConfig>;
diff --git a/app/client/src/reducers/entityReducers/actionsReducer.tsx b/app/client/src/reducers/entityReducers/actionsReducer.tsx
index 2b2c0496c5..187f55d40d 100644
--- a/app/client/src/reducers/entityReducers/actionsReducer.tsx
+++ b/app/client/src/reducers/entityReducers/actionsReducer.tsx
@@ -16,6 +16,15 @@ export interface ActionData {
   config: Action;
   data?: ActionResponse;
 }
+
+export interface ActionDataWithMeta extends ActionData {
+  responseMeta: {
+    headers?: unknown;
+    isExecutionSuccess: boolean;
+    statusCode?: string;
+  };
+}
+
 export type ActionDataState = ActionData[];
 export interface PartialActionData {
   isLoading: boolean;
diff --git a/app/client/src/utils/autocomplete/EntityDefinitions.ts b/app/client/src/utils/autocomplete/EntityDefinitions.ts
index 865496c010..7717b0f0bf 100644
--- a/app/client/src/utils/autocomplete/EntityDefinitions.ts
+++ b/app/client/src/utils/autocomplete/EntityDefinitions.ts
@@ -14,6 +14,7 @@ const isVisible = {
 export const entityDefinitions = {
   ACTION: (entity: DataTreeAction) => {
     const dataDef = generateTypeDef(entity.data);
+    const responseMetaDef = generateTypeDef(entity.responseMeta);
     let data: Record<string, any> = {
       "!doc": "The response of the action",
     };
@@ -22,12 +23,21 @@ export const entityDefinitions = {
     } else {
       data = { ...data, ...dataDef };
     }
+    let responseMeta: Record<string, any> = {
+      "!doc": "The response meta of the action",
+    };
+    if (_.isString(responseMetaDef)) {
+      responseMeta["!type"] = responseMetaDef;
+    } else {
+      responseMeta = { ...responseMeta, ...responseMetaDef };
+    }
     return {
       "!doc":
         "Actions allow you to connect your widgets to your backend data in a secure manner.",
       "!url": "https://docs.appsmith.com/v/v1.2.1/framework-reference/run",
       isLoading: "bool",
       data,
+      responseMeta,
       run: "fn(onSuccess: fn() -> void, onError: fn() -> void) -> void",
     };
   },
diff --git a/app/client/src/workers/evaluation.test.ts b/app/client/src/workers/evaluation.test.ts
index abffdb4d63..56a3d83843 100644
--- a/app/client/src/workers/evaluation.test.ts
+++ b/app/client/src/workers/evaluation.test.ts
@@ -237,6 +237,7 @@ const BASE_ACTION: DataTreeAction = {
   pluginType: PluginType.API,
   run: {},
   data: {},
+  responseMeta: { isExecutionSuccess: false },
   ENTITY_TYPE: ENTITY_TYPE.ACTION,
   bindingPaths: {
     isLoading: EvaluationSubstitutionType.TEMPLATE,
diff --git a/app/client/src/workers/evaluationUtils.test.ts b/app/client/src/workers/evaluationUtils.test.ts
index 05127e1bc1..6223a739a8 100644
--- a/app/client/src/workers/evaluationUtils.test.ts
+++ b/app/client/src/workers/evaluationUtils.test.ts
@@ -55,6 +55,7 @@ describe("Add functions", () => {
         bindingPaths: {},
         isLoading: false,
         run: {},
+        responseMeta: { isExecutionSuccess: false },
         ENTITY_TYPE: ENTITY_TYPE.ACTION,
         dependencyMap: {},
       },

From b66692ba571a1fbd95257447587544799564064e Mon Sep 17 00:00:00 2001
From: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com>
Date: Fri, 14 May 2021 12:32:25 +0530
Subject: [PATCH 57/76] Test commented (#4476)

---
 .../DatasourceBasicProfile_spec.js            | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/DatasourceBasicProfile_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/DatasourceBasicProfile_spec.js
index cbfdba5572..aac6a3abef 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/DatasourceBasicProfile_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/DatasourceBasicProfile_spec.js
@@ -1,22 +1,26 @@
-const testdata = require("../../../../fixtures/testdata.json");
-describe("Create a rest datasource", function() {
-  beforeEach(() => {
-    cy.startRoutesForDatasource();
-  });
+/*
+ * Commenting this spec as its flaky
+ *
+ * */
+// const testdata = require("../../../../fixtures/testdata.json");
+// describe("Create a rest datasource", function() {
+//   beforeEach(() => {
+//     cy.startRoutesForDatasource();
+//   });
 
-  it("Create a rest datasource", function() {
-    cy.NavigateToAPI_Panel();
-    cy.CreateAPI("Testapi");
-    cy.enterDatasource(testdata.basicURl);
-    cy.get(".t--store-as-datasource").click();
-    cy.addBasicProfileDetails("test", "test@123");
-    cy.saveDatasource();
-    cy.contains(".datasource-highlight", "envyenksqii9nf3.m.pipedream.net");
-    cy.SaveAndRunAPI();
-    cy.wait(2000);
-    var encodedStringBtoA = btoa("test:test@123");
-    cy.log(encodedStringBtoA);
-    cy.ResponseStatusCheck(testdata.successStatusCode);
-    cy.ResponseTextCheck("Basic ".concat(encodedStringBtoA));
-  });
-});
+//   it("Create a rest datasource", function() {
+//     cy.NavigateToAPI_Panel();
+//     cy.CreateAPI("Testapi");
+//     cy.enterDatasource(testdata.basicURl);
+//     cy.get(".t--store-as-datasource").click();
+//     cy.addBasicProfileDetails("test", "test@123");
+//     cy.saveDatasource();
+//     cy.contains(".datasource-highlight", "envyenksqii9nf3.m.pipedream.net");
+//     cy.SaveAndRunAPI();
+//     cy.wait(2000);
+//     var encodedStringBtoA = btoa("test:test@123");
+//     cy.log(encodedStringBtoA);
+//     cy.ResponseStatusCheck(testdata.successStatusCode);
+//     cy.ResponseTextCheck("Basic ".concat(encodedStringBtoA));
+//   });
+// });

From 341a4d62afa038f555e82275773e13e64acdf442 Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Fri, 14 May 2021 14:35:55 +0530
Subject: [PATCH 58/76] Bug/paste widget append copy to name (#4399)

* Changes to retain widget/Action names on copy when there is no clash.

* Updated tests

Co-authored-by: Apple <nandan@thinkify.io>
---
 .../Table_Widget_Copy_Paste_spec.js           |  6 ++---
 ...y_Paste_Delete_Undo_Keyboard_Event_spec.js |  6 ++---
 ...xplorer_CopyQuery_RenameDatasource_spec.js | 17 ++++++------
 .../Actions/ActionEntityContextMenu.tsx       |  2 +-
 .../pages/Editor/Explorer/Actions/helpers.tsx | 12 +++++++--
 app/client/src/sagas/WidgetOperationSagas.tsx | 27 ++++++++++++-------
 6 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js
index e398325e27..c5648f5efb 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Copy_Paste_spec.js
@@ -37,14 +37,14 @@ describe("Test Suite to validate copy/paste table Widget", function() {
       .contains("UNDO")
       .click({ force: true });
     */
-    cy.GlobalSearchEntity("Table2");
+    cy.GlobalSearchEntity("Table1Copy");
     cy.get(".t--entity-collapse-toggle")
       .last()
       .click();
     cy.get(apiwidget.propertyList).then(function($lis) {
       expect($lis).to.have.length(8);
-      expect($lis.eq(0)).to.contain("{{Table2.selectedRow}}");
-      expect($lis.eq(1)).to.contain("{{Table2.selectedRows}}");
+      expect($lis.eq(0)).to.contain("{{Table1Copy.selectedRow}}");
+      expect($lis.eq(1)).to.contain("{{Table1Copy.selectedRows}}");
     });
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js
index c6627d91bf..79701336e5 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js
@@ -45,11 +45,11 @@ describe("Test Suite to validate copy/delete/undo functionalites", function() {
     cy.get(commonlocators.toastAction)
       .contains("UNDO")
       .click({ force: true });
-    cy.GlobalSearchEntity("Form1");
+    cy.GlobalSearchEntity("FormTestCopy");
     cy.get(apiwidget.propertyList).then(function($lis) {
       expect($lis).to.have.length(2);
-      expect($lis.eq(0)).to.contain("{{Form1.isVisible}}");
-      expect($lis.eq(1)).to.contain("{{Form1.data}}");
+      expect($lis.eq(0)).to.contain("{{FormTestCopy.isVisible}}");
+      expect($lis.eq(1)).to.contain("{{FormTestCopy.data}}");
     });
   });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js
index e136b3b441..bf7a8c4c50 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ExplorerTests/Entity_Explorer_CopyQuery_RenameDatasource_spec.js
@@ -72,17 +72,18 @@ describe("Entity explorer tests related to copy query", function() {
       .invoke("show")
       .click({ force: true });
     cy.copyEntityToPage(pageid);
-    cy.SearchEntityandOpen("Query1Copy");
+    cy.SearchEntityandOpen("Query1");
     cy.runQuery();
-    cy.get(`.t--entity.action:contains(Query1Copy)`)
+    cy.get(`.t--entity.action:contains(Query1)`).should("have.length", 2);
+    cy.get(`.t--entity.action:contains(Query1)`)
       .find(explorer.collapse)
-      .click();
+      .click({ multiple: true });
     cy.get(apiwidget.propertyList).then(function($lis) {
       expect($lis).to.have.length(4);
-      expect($lis.eq(0)).to.contain("{{Query1Copy.isLoading}}");
-      expect($lis.eq(1)).to.contain("{{Query1Copy.data}}");
-      expect($lis.eq(2)).to.contain("{{Query1Copy.responseMeta}}");
-      expect($lis.eq(3)).to.contain("{{Query1Copy.run()}}");
+      expect($lis.eq(0)).to.contain("{{Query1.isLoading}}");
+      expect($lis.eq(1)).to.contain("{{Query1.data}}");
+      expect($lis.eq(2)).to.contain("{{Query1.responseMeta}}");
+      expect($lis.eq(3)).to.contain("{{Query1.run()}}");
     });
   });
 
@@ -111,7 +112,7 @@ describe("Entity explorer tests related to copy query", function() {
       );
     });
 
-    cy.SearchEntityandOpen("Query1Copy");
+    cy.SearchEntityandOpen("Query1");
     cy.deleteQuery();
   });
 });
diff --git a/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx
index 2689a1f8bd..f010957b84 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/ActionEntityContextMenu.tsx
@@ -32,7 +32,7 @@ export function ActionEntityContextMenu(props: EntityContextMenuProps) {
         copyActionRequest({
           id: actionId,
           destinationPageId: pageId,
-          name: nextEntityName(`${actionName}Copy`, pageId),
+          name: nextEntityName(actionName, pageId, true),
         }),
       ),
     [dispatch, nextEntityName],
diff --git a/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx b/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx
index 6c84e74c27..e2ffe97c0b 100644
--- a/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx
+++ b/app/client/src/pages/Editor/Explorer/Actions/helpers.tsx
@@ -185,7 +185,11 @@ export const useNewActionName = () => {
   const groupedActions = useMemo(() => {
     return groupBy(actions, "config.pageId");
   }, [actions]);
-  return (name: string, destinationPageId: string) => {
+  return (
+    name: string,
+    destinationPageId: string,
+    isCopyOperation?: boolean,
+  ) => {
     const pageActions = groupedActions[destinationPageId];
     // Get action names of the destination page only
     const actionNames = pageActions
@@ -193,7 +197,11 @@ export const useNewActionName = () => {
       : [];
 
     return actionNames.indexOf(name) > -1
-      ? getNextEntityName(name, actionNames)
+      ? getNextEntityName(
+          isCopyOperation ? `${name}Copy` : name,
+          actionNames,
+          true,
+        )
       : name;
   };
 };
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index fa05b3a2e5..e946bca7ef 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -1294,16 +1294,24 @@ function getNextWidgetName(
   widgets: CanvasWidgetsReduxState,
   type: WidgetType,
   evalTree: Record<string, unknown>,
+  options?: Record<string, unknown>,
 ) {
   // Compute the new widget's name
   const defaultConfig: any = WidgetConfigResponse.config[type];
   const widgetNames = Object.keys(widgets).map((w) => widgets[w].widgetName);
   const entityNames = Object.keys(evalTree);
+  let prefix = defaultConfig.widgetName;
+  if (options && options.prefix) {
+    prefix = `${options.prefix}${
+      widgetNames.indexOf(options.prefix as string) > -1 ? "Copy" : ""
+    }`;
+  }
 
-  return getNextEntityName(defaultConfig.widgetName, [
-    ...widgetNames,
-    ...entityNames,
-  ]);
+  return getNextEntityName(
+    prefix,
+    [...widgetNames, ...entityNames],
+    options?.startWithoutIndex as boolean,
+  );
 }
 
 /**
@@ -1493,13 +1501,8 @@ function* pasteWidgetSaga() {
         } catch (error) {
           log.debug("Error updating table widget properties", error);
         }
-      } else {
-        // Generate a new unique widget name
-        widget.widgetName = getNextWidgetName(widgets, widget.type, evalTree);
       }
 
-      widgetNameMap[oldWidgetName] = widget.widgetName;
-
       // If it is the copied widget, update position properties
       if (widget.widgetId === widgetIdMap[copiedWidget.widgetId]) {
         newWidgetId = widget.widgetId;
@@ -1555,7 +1558,11 @@ function* pasteWidgetSaga() {
         if (newParentId) widget.parentId = newParentId;
       }
       // Generate a new unique widget name
-      widget.widgetName = getNextWidgetName(widgets, widget.type, evalTree);
+      widget.widgetName = getNextWidgetName(widgets, widget.type, evalTree, {
+        prefix: oldWidgetName,
+        startWithoutIndex: true,
+      });
+      widgetNameMap[oldWidgetName] = widget.widgetName;
       // Add the new widget to the canvas widgets
       widgets[widget.widgetId] = widget;
     }

From cab7f4a099be7e104404ce56cd1b9a7a6dba828b Mon Sep 17 00:00:00 2001
From: bhavin <techbhavin@gmail.com>
Date: Fri, 14 May 2021 14:53:22 +0530
Subject: [PATCH 59/76] fix: select disabled option popover overflow

---
 .../designSystems/blueprint/DropdownComponent.tsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 3487aab4b8..bbea0c34db 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -267,6 +267,11 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
               popoverProps={{
                 minimal: true,
                 usePortal: true,
+                modifiers: {
+                  preventOverflow: {
+                    enabled: false,
+                  },
+                },
                 popoverClassName: "select-popover-wrapper",
               }}
             >
@@ -294,6 +299,11 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
               popoverProps={{
                 minimal: true,
                 usePortal: true,
+                modifiers: {
+                  preventOverflow: {
+                    enabled: false,
+                  },
+                },
                 popoverClassName: "select-popover-wrapper",
               }}
               resetOnSelect

From 67e292cc2a04c1299f494312d70069d9bee7dd26 Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Sat, 15 May 2021 00:13:08 +0530
Subject: [PATCH 60/76] Fixed handleSubmit bug in API form editor (pagination
 buttons) (#4477)

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

diff --git a/app/client/src/pages/Editor/APIEditor/Pagination.tsx b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
index 8ba7d963e4..b8876e1862 100644
--- a/app/client/src/pages/Editor/APIEditor/Pagination.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Pagination.tsx
@@ -173,6 +173,7 @@ export default function Pagination(props: PaginationProps) {
                 size={Size.medium}
                 tag="button"
                 text={"Test"}
+                type="button"
               />
             </PaginationFieldWrapper>
             <Step type={TextType.P1}>Next url</Step>
@@ -192,6 +193,7 @@ export default function Pagination(props: PaginationProps) {
                 size={Size.medium}
                 tag="button"
                 text={"Test"}
+                type="button"
               />
             </PaginationFieldWrapper>
           </div>

From 51dd6587cf606025ac272192cc328f118db9dd35 Mon Sep 17 00:00:00 2001
From: Nayan <83352306+nayan-appsmith@users.noreply.github.com>
Date: Sun, 16 May 2021 09:42:10 +0600
Subject: [PATCH 61/76] [Issue #2093]-show last used organizations first in
 home page (#4461)

* [Issue #2093]-show last used organizations first in home page

* -updated as per the comments in PR
---
 app/server/.run/ServerApplication.run.xml     |  2 +-
 .../appsmith/server/constants/FieldName.java  |  1 +
 .../server/controllers/PageController.java    |  3 +-
 .../com/appsmith/server/domains/UserData.java |  5 ++
 .../server/helpers/CollectionUtils.java       | 40 +++++++++
 .../CustomUserDataRepository.java             |  2 +-
 .../CustomUserDataRepositoryImpl.java         |  8 ++
 .../server/services/NewPageServiceImpl.java   |  8 +-
 .../server/services/UserDataService.java      |  1 +
 .../server/services/UserDataServiceImpl.java  | 22 +++++
 .../services/UserOrganizationServiceImpl.java | 15 ++--
 .../server/solutions/ApplicationFetcher.java  | 60 +++++++++-----
 .../server/helpers/CollectionUtilsTest.java   | 83 +++++++++++++++++++
 .../CustomUserDataRepositoryImplTest.java     | 81 ++++++++++++++++++
 .../server/services/UserDataServiceTest.java  | 31 +++++++
 15 files changed, 331 insertions(+), 31 deletions(-)
 create mode 100644 app/server/appsmith-server/src/test/java/com/appsmith/server/helpers/CollectionUtilsTest.java
 create mode 100644 app/server/appsmith-server/src/test/java/com/appsmith/server/repositories/CustomUserDataRepositoryImplTest.java

diff --git a/app/server/.run/ServerApplication.run.xml b/app/server/.run/ServerApplication.run.xml
index 961dd31c5c..7d0d075ffd 100644
--- a/app/server/.run/ServerApplication.run.xml
+++ b/app/server/.run/ServerApplication.run.xml
@@ -19,4 +19,4 @@
       <option name="Make" enabled="true" />
     </method>
   </configuration>
-</component> 
+</component>
\ No newline at end of file
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/constants/FieldName.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/constants/FieldName.java
index ec7d918c25..73484fd42c 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/constants/FieldName.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/constants/FieldName.java
@@ -6,6 +6,7 @@ public class FieldName {
     public static final String DELETED = "deleted";
     public static final String CREATED_AT = "createdAt";
     public static final String DELETED_AT = "deletedAt";
+    public static final String UPDATED_AT = "updatedAt";
     public static final String CURL_CODE = "curlCode";
     public static String ORGANIZATION = "organization";
     public static String ID = "id";
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/PageController.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/PageController.java
index 67379a4ae3..35dff3ce95 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/PageController.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/controllers/PageController.java
@@ -32,8 +32,7 @@ public class PageController {
     private final NewPageService newPageService;
 
     @Autowired
-    public PageController(ApplicationPageService applicationPageService,
-                          NewPageService newPageService) {
+    public PageController(ApplicationPageService applicationPageService, NewPageService newPageService) {
         this.applicationPageService = applicationPageService;
         this.newPageService = newPageService;
     }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/UserData.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/UserData.java
index 0d5b30df11..f61ebf9756 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/UserData.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/domains/UserData.java
@@ -8,6 +8,8 @@ import lombok.Setter;
 import lombok.ToString;
 import org.springframework.data.mongodb.core.mapping.Document;
 
+import java.util.List;
+
 /**
  * This model is intended to hold any user-specific information that is not directly about the user's authentication.
  */
@@ -27,6 +29,9 @@ public class UserData extends BaseDomain {
     // The version where this user has last viewed the release notes.
     private String releaseNotesViewedVersion;
 
+    // list of organisation ids that were recently accessed by the user
+    private List<String> recentlyUsedOrgIds;
+
     public UserData(String userId) {
         this.userId = userId;
     }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/CollectionUtils.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/CollectionUtils.java
index 9d329f7ee2..e6b59a1b00 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/CollectionUtils.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/helpers/CollectionUtils.java
@@ -1,7 +1,11 @@
 package com.appsmith.server.helpers;
 
+
 import java.util.Collection;
+import java.util.LinkedHashSet;
+import java.util.List;
 import java.util.Map;
+import java.util.Set;
 
 public class CollectionUtils {
 
@@ -25,4 +29,40 @@ public class CollectionUtils {
         return (m == null || m.isEmpty());
     }
 
+    /**
+     * Puts an item at the beginning of the list. If the item already exists in other position, it'll move it to first
+     * @param list
+     * @param item
+     * @param <E>
+     */
+    public static <E> void putAtFirst(List<E> list, E item) {
+        // check if item already exists
+        int index = list.indexOf(item);
+        if(index == -1) {  // does not exist so put it at first
+            list.add(0, item);
+        } else if(index > 0) {
+            list.remove(item);
+            list.add(0, item);
+        }
+    }
+
+    /**
+     * Removes duplicate items from an array list
+     * @param list
+     * @param <T>
+     * @return
+     */
+    public static <T> void removeDuplicates(List<T> list)
+    {
+        // Create a new LinkedHashSet
+        Set<T> set = new LinkedHashSet<T>(list);
+
+        // Clear the list
+        list.clear();
+
+        // add the elements of set
+        // with no duplicates to the list
+        list.addAll(set);
+    }
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepository.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepository.java
index cf6cf8d89a..102e12bd88 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepository.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepository.java
@@ -7,5 +7,5 @@ import reactor.core.publisher.Mono;
 public interface CustomUserDataRepository extends AppsmithRepository<UserData> {
 
     Mono<UpdateResult> saveReleaseNotesViewedVersion(String userId, String version);
-
+    Mono<UpdateResult> removeOrgFromRecentlyUsedList(String userId, String organizationId);
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepositoryImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepositoryImpl.java
index 96010eb732..eea4a60049 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepositoryImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomUserDataRepositoryImpl.java
@@ -31,4 +31,12 @@ public class CustomUserDataRepositoryImpl extends BaseAppsmithRepositoryImpl<Use
                 );
     }
 
+    @Override
+    public Mono<UpdateResult> removeOrgFromRecentlyUsedList(String userId, String organizationId) {
+        return mongoOperations.updateFirst(
+                query(where(fieldName(QUserData.userData.userId)).is(userId)),
+                new Update().pull(fieldName(QUserData.userData.recentlyUsedOrgIds), organizationId),
+                UserData.class
+                );
+    }
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewPageServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewPageServiceImpl.java
index fabc926722..d5cc8c5061 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewPageServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewPageServiceImpl.java
@@ -39,6 +39,7 @@ import static com.appsmith.server.acl.AclPermission.READ_PAGES;
 public class NewPageServiceImpl extends BaseService<NewPageRepository, NewPage, String> implements NewPageService {
 
     private final ApplicationService applicationService;
+    private final UserDataService userDataService;
 
     @Autowired
     public NewPageServiceImpl(Scheduler scheduler,
@@ -47,9 +48,10 @@ public class NewPageServiceImpl extends BaseService<NewPageRepository, NewPage,
                               ReactiveMongoTemplate reactiveMongoTemplate,
                               NewPageRepository repository,
                               AnalyticsService analyticsService,
-                              ApplicationService applicationService) {
+                              ApplicationService applicationService, UserDataService userDataService) {
         super(scheduler, validator, mongoConverter, reactiveMongoTemplate, repository, analyticsService);
         this.applicationService = applicationService;
+        this.userDataService = userDataService;
     }
 
     @Override
@@ -169,6 +171,10 @@ public class NewPageServiceImpl extends BaseService<NewPageRepository, NewPage,
                         }
                     }
                     return Mono.just(application);
+                }).flatMap(application -> {
+                    // add this organization id to the recently used organization id of User Data
+                    return userDataService.updateLastUsedOrgList(application.getOrganizationId())
+                            .thenReturn(application);
                 })
                 .cache();
 
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataService.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataService.java
index 288b8a2bbf..d8d7609b07 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataService.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataService.java
@@ -31,4 +31,5 @@ public interface UserDataService {
 
     Mono<Void> makeProfilePhotoResponse(ServerWebExchange exchange);
 
+    Mono<UserData> updateLastUsedOrgList(String currentOrgId);
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataServiceImpl.java
index d1ac5c2966..ae834713d8 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserDataServiceImpl.java
@@ -6,6 +6,7 @@ import com.appsmith.server.domains.User;
 import com.appsmith.server.domains.UserData;
 import com.appsmith.server.exceptions.AppsmithError;
 import com.appsmith.server.exceptions.AppsmithException;
+import com.appsmith.server.helpers.CollectionUtils;
 import com.appsmith.server.repositories.UserDataRepository;
 import com.appsmith.server.solutions.ReleaseNotesService;
 import com.mongodb.DBObject;
@@ -24,6 +25,8 @@ import reactor.core.publisher.Mono;
 import reactor.core.scheduler.Scheduler;
 
 import javax.validation.Validator;
+import java.util.ArrayList;
+import java.util.List;
 import java.util.Map;
 
 import static com.appsmith.server.repositories.BaseAppsmithRepositoryImpl.fieldName;
@@ -207,4 +210,23 @@ public class UserDataServiceImpl extends BaseService<UserDataRepository, UserDat
                 .flatMap(assetId -> assetService.makeImageResponse(exchange, assetId));
     }
 
+    /**
+     * The {@code currentOrgId} is prepended to the list {@link UserData#getRecentlyUsedOrgIds}.
+     * If {@link UserData#getRecentlyUsedOrgIds} is null or empty, a new list will be created first.
+     * @param currentOrgId currently accessed organization
+     * @return Updated {@link UserData}
+     */
+    @Override
+    public Mono<UserData> updateLastUsedOrgList(String currentOrgId) {
+        return this.getForCurrentUser().flatMap(userData -> {
+            List<String> recentlyUsedOrgIds = userData.getRecentlyUsedOrgIds();
+            if(recentlyUsedOrgIds == null) {
+                recentlyUsedOrgIds = new ArrayList<>();
+            }
+            CollectionUtils.removeDuplicates(recentlyUsedOrgIds);
+            CollectionUtils.putAtFirst(recentlyUsedOrgIds, currentOrgId);
+            userData.setRecentlyUsedOrgIds(recentlyUsedOrgIds);
+            return repository.save(userData);
+        });
+    }
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserOrganizationServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserOrganizationServiceImpl.java
index af52fa4a0d..aa5745ad5d 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserOrganizationServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserOrganizationServiceImpl.java
@@ -18,7 +18,9 @@ import com.appsmith.server.exceptions.AppsmithException;
 import com.appsmith.server.helpers.PolicyUtils;
 import com.appsmith.server.notifications.EmailSender;
 import com.appsmith.server.repositories.OrganizationRepository;
+import com.appsmith.server.repositories.UserDataRepository;
 import com.appsmith.server.repositories.UserRepository;
+import com.mongodb.client.result.UpdateResult;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.Example;
@@ -41,6 +43,7 @@ public class UserOrganizationServiceImpl implements UserOrganizationService {
     private final SessionUserService sessionUserService;
     private final OrganizationRepository organizationRepository;
     private final UserRepository userRepository;
+    private final UserDataRepository userDataRepository;
     private final PolicyUtils policyUtils;
     private final EmailSender emailSender;
 
@@ -50,12 +53,12 @@ public class UserOrganizationServiceImpl implements UserOrganizationService {
     public UserOrganizationServiceImpl(SessionUserService sessionUserService,
                                        OrganizationRepository organizationRepository,
                                        UserRepository userRepository,
-                                       PolicyUtils policyUtils,
-                                       EmailSender emailSender
-    ) {
+                                       UserDataRepository userDataRepository, PolicyUtils policyUtils,
+                                       EmailSender emailSender) {
         this.sessionUserService = sessionUserService;
         this.organizationRepository = organizationRepository;
         this.userRepository = userRepository;
+        this.userDataRepository = userDataRepository;
         this.policyUtils = policyUtils;
         this.emailSender = emailSender;
     }
@@ -310,10 +313,12 @@ public class UserOrganizationServiceImpl implements UserOrganizationService {
                             } else {
                                 // If the roleName was not present, then it implies that the user is being removed from the org.
                                 // Since at this point we have already removed the user from the organization, we dont need to do anything else.
+                                // remove the organization from recent org list of UserData
+                                finalUpdatedOrganizationMono = userRemovedOrganizationMono.flatMap(userDataRepository
+                                        .removeOrgFromRecentlyUsedList(user.getId(), organization.getId())::thenReturn);
                             }
 
-                            return finalUpdatedOrganizationMono
-                                    .thenReturn(userRole);
+                            return finalUpdatedOrganizationMono.thenReturn(userRole);
                         }
                     }
                     // The user was not found in the organization. Return an error
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ApplicationFetcher.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ApplicationFetcher.java
index b31c3f850f..f36621a004 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ApplicationFetcher.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/ApplicationFetcher.java
@@ -18,12 +18,13 @@ import org.springframework.stereotype.Component;
 import org.springframework.util.CollectionUtils;
 import reactor.core.publisher.Mono;
 
-import java.util.ArrayList;
-import java.util.Collection;
-import java.util.Collections;
-import java.util.List;
-import java.util.Map;
 import java.util.Set;
+import java.util.Collection;
+import java.util.Map;
+import java.util.ArrayList;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Collections;
 import java.util.function.Function;
 
 import static com.appsmith.server.acl.AclPermission.READ_APPLICATIONS;
@@ -64,11 +65,23 @@ public class ApplicationFetcher {
                 .cache();
 
         return userMono
-                .flatMap(user -> {
+                .zipWith(userDataService.getForCurrentUser().defaultIfEmpty(new UserData()))
+                .flatMap(userAndUserDataTuple -> {
+                    User user = userAndUserDataTuple.getT1();
+                    UserData userData = userAndUserDataTuple.getT2();
+
                     Set<String> orgIds = user.getOrganizationIds();
 
-                    // Collect all the applications as a map with organization id as a key
+                    // create a set of org id where recently used ones will be at the beginning
+                    List<String> recentlyUsedOrgIds = userData.getRecentlyUsedOrgIds();
+                    Set<String> orgIdSortedSet = new LinkedHashSet<>(orgIds.size());
+                    if(recentlyUsedOrgIds != null && recentlyUsedOrgIds.size() > 0) {
+                        // user has a recently used list, add them to the beginning
+                        orgIdSortedSet.addAll(recentlyUsedOrgIds);
+                    }
+                    orgIdSortedSet.addAll(orgIds); // add all other if not added already
 
+                    // Collect all the applications as a map with organization id as a key
                     Mono<Map<String, Collection<Application>>> applicationsMapMono = applicationRepository
                             .findByMultipleOrganizationIds(orgIds, READ_APPLICATIONS)
                             .collectMultimap(Application::getOrganizationId, Function.identity());
@@ -78,29 +91,34 @@ public class ApplicationFetcher {
 
                     return organizationService
                             .findByIdsIn(orgIds, READ_ORGANIZATIONS)
-                            .collectList()
+                            .collectMap(Organization::getId, v -> v)
                             .zipWith(applicationsMapMono)
                             .map(tuple -> {
-                                List<Organization> organizations = tuple.getT1();
+                                Map<String, Organization> organizations = tuple.getT1();
+
                                 Map<String, Collection<Application>> applicationsCollectionByOrgId = tuple.getT2();
 
                                 List<OrganizationApplicationsDTO> organizationApplicationsDTOS = new ArrayList<>();
 
-                                for (Organization organization : organizations) {
-                                    Collection<Application> applicationCollection = applicationsCollectionByOrgId.get(organization.getId());
+                                for(String orgId : orgIdSortedSet) {
+                                    Organization organization = organizations.get(orgId);
+                                    if(organization != null) {
+                                        Collection<Application> applicationCollection = applicationsCollectionByOrgId.get(organization.getId());
 
-                                    final List<Application> applicationList = new ArrayList<>();
-                                    if (!CollectionUtils.isEmpty(applicationCollection)) {
-                                        applicationList.addAll(applicationCollection);
+                                        final List<Application> applicationList = new ArrayList<>();
+                                        if (!CollectionUtils.isEmpty(applicationCollection)) {
+                                            applicationList.addAll(applicationCollection);
+                                        }
+
+                                        OrganizationApplicationsDTO organizationApplicationsDTO = new OrganizationApplicationsDTO();
+                                        organizationApplicationsDTO.setOrganization(organization);
+                                        organizationApplicationsDTO.setApplications(applicationList);
+                                        organizationApplicationsDTO.setUserRoles(organization.getUserRoles());
+
+                                        organizationApplicationsDTOS.add(organizationApplicationsDTO);
                                     }
-
-                                    OrganizationApplicationsDTO organizationApplicationsDTO = new OrganizationApplicationsDTO();
-                                    organizationApplicationsDTO.setOrganization(organization);
-                                    organizationApplicationsDTO.setApplications(applicationList);
-                                    organizationApplicationsDTO.setUserRoles(organization.getUserRoles());
-
-                                    organizationApplicationsDTOS.add(organizationApplicationsDTO);
                                 }
+
                                 userHomepageDTO.setOrganizationApplications(organizationApplicationsDTOS);
                                 return userHomepageDTO;
                             });
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/helpers/CollectionUtilsTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/helpers/CollectionUtilsTest.java
new file mode 100644
index 0000000000..e3c48b4f20
--- /dev/null
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/helpers/CollectionUtilsTest.java
@@ -0,0 +1,83 @@
+package com.appsmith.server.helpers;
+
+import org.junit.Assert;
+import org.junit.Test;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class CollectionUtilsTest {
+
+    @Test
+    public void testPutAtFirstWhenItemDoesNotExist() {
+        List<String> sampleList = new ArrayList<>(3);
+        sampleList.add("a");
+        sampleList.add("b");
+        sampleList.add("c");
+        CollectionUtils.putAtFirst(sampleList, "d");
+        Assert.assertEquals(4, sampleList.size());
+        Assert.assertArrayEquals(new String[]{ "d", "a", "b", "c" }, sampleList.toArray());
+    }
+
+    @Test
+    public void testPutAtFirstWhenItemAlreadyAtFirst() {
+        List<String> sampleList = new ArrayList<>(3);
+        sampleList.add("a");
+        sampleList.add("b");
+        sampleList.add("c");
+        CollectionUtils.putAtFirst(sampleList, "a");
+        Assert.assertEquals(3, sampleList.size());
+        Assert.assertArrayEquals(new String[]{ "a", "b", "c" }, sampleList.toArray());
+    }
+
+    @Test
+    public void testPutAtFirstWhenItemExistsButNotAtFirst() {
+        List<String> sampleList = new ArrayList<>(3);
+        sampleList.add("a");
+        sampleList.add("b");
+        sampleList.add("c");
+        CollectionUtils.putAtFirst(sampleList, "b");
+        Assert.assertEquals(3, sampleList.size());
+        Assert.assertArrayEquals(new String[]{ "b", "a", "c" }, sampleList.toArray());
+    }
+
+    @Test
+    public void testRemoveDuplicatesWhenThereAreDuplicates() {
+        List<String> sampleList = new ArrayList<>(4);
+        sampleList.add("a");
+        sampleList.add("b");
+        sampleList.add("c");
+        sampleList.add("c");
+
+        CollectionUtils.removeDuplicates(sampleList);
+        Assert.assertEquals(3, sampleList.size());
+        Assert.assertArrayEquals(new String[]{ "a", "b", "c" }, sampleList.toArray());
+    }
+
+    @Test
+    public void testRemoveDuplicatesWhenThereAreNoDuplicates() {
+        List<String> sampleList = new ArrayList<>(4);
+        sampleList.add("a");
+        sampleList.add("b");
+        sampleList.add("c");
+
+        CollectionUtils.removeDuplicates(sampleList);
+        Assert.assertEquals(3, sampleList.size());
+        Assert.assertArrayEquals(new String[]{ "a", "b", "c" }, sampleList.toArray());
+    }
+
+    @Test
+    public void testRemoveDuplicatesWhenThereAreMulipleDuplicates() {
+        List<String> sampleList = new ArrayList<>(5);
+        sampleList.add("a");
+        sampleList.add("b");
+        sampleList.add("c");
+        sampleList.add("c");
+        sampleList.add("b");
+
+        CollectionUtils.removeDuplicates(sampleList);
+        Assert.assertEquals(3, sampleList.size());
+        Assert.assertArrayEquals(new String[]{ "a", "b", "c" }, sampleList.toArray());
+    }
+
+}
\ No newline at end of file
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/repositories/CustomUserDataRepositoryImplTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/repositories/CustomUserDataRepositoryImplTest.java
new file mode 100644
index 0000000000..436218c94c
--- /dev/null
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/repositories/CustomUserDataRepositoryImplTest.java
@@ -0,0 +1,81 @@
+package com.appsmith.server.repositories;
+
+import com.appsmith.server.domains.UserData;
+import com.mongodb.client.result.UpdateResult;
+import lombok.extern.slf4j.Slf4j;
+import org.junit.Assert;
+import org.junit.jupiter.api.Test;
+import org.junit.runner.RunWith;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.test.context.junit4.SpringRunner;
+import reactor.core.publisher.Mono;
+import reactor.test.StepVerifier;
+
+import java.util.Arrays;
+import java.util.List;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+@RunWith(SpringRunner.class)
+@SpringBootTest
+@Slf4j
+class CustomUserDataRepositoryImplTest {
+
+    @Autowired
+    private UserDataRepository userDataRepository;
+
+    private Mono<UserData> createUser(String userId, List<String> orgIds) {
+        String sampleUserId = userId;
+        UserData sampleUserData = new UserData();
+        sampleUserData.setUserId(sampleUserId);
+        sampleUserData.setRecentlyUsedOrgIds(List.of("123", "234", "345"));
+        return userDataRepository.save(sampleUserData);
+    }
+
+    @Test
+    void removeOrgFromRecentlyUsedList_WhenOrgIdAlreadyExists_OrgIdRemoved() {
+        // create an user data with 3 org id in the recently used orgid list
+        String sampleUserId = "abcd";
+        Mono<UserData> createUserDataMono = createUser(sampleUserId, List.of("123", "234", "345"));
+
+        // remove the 345 org id from the recently used orgid list
+        Mono<UpdateResult> updateResultMono = createUserDataMono.flatMap(
+                userData -> userDataRepository.removeOrgFromRecentlyUsedList(userData.getUserId(), "345")
+        );
+
+        // read the userdata
+        Mono<UserData> readUserDataMono = userDataRepository.findByUserId(sampleUserId);
+
+        // add the read user data mono after the update mono
+        Mono<UserData> userDataAfterUpdateMono = updateResultMono.then(readUserDataMono);
+
+        StepVerifier.create(userDataAfterUpdateMono).assertNext(userData -> {
+            Assert.assertEquals(2, userData.getRecentlyUsedOrgIds().size());
+            Assert.assertArrayEquals(List.of("123", "234").toArray(), userData.getRecentlyUsedOrgIds().toArray());
+        }).verifyComplete();
+    }
+
+    @Test
+    void removeOrgFromRecentlyUsedList_WhenOrgIdDoesNotExist_NothingRemoved() {
+        // create an user data with 3 org id in the recently used orgid list
+        String sampleUserId = "efgh";
+        Mono<UserData> createUserDataMono = createUser(sampleUserId, List.of("123", "234", "345"));
+
+        // remove the 345 org id from the recently used orgid list
+        Mono<UpdateResult> updateResultMono = createUserDataMono.flatMap(
+                userData -> userDataRepository.removeOrgFromRecentlyUsedList(userData.getUserId(), "678")
+        );
+
+        // read the userdata
+        Mono<UserData> readUserDataMono = userDataRepository.findByUserId(sampleUserId);
+
+        // add the read user data mono after the update mono
+        Mono<UserData> userDataAfterUpdateMono = updateResultMono.then(readUserDataMono);
+
+        StepVerifier.create(userDataAfterUpdateMono).assertNext(userData -> {
+            Assert.assertEquals(3, userData.getRecentlyUsedOrgIds().size());
+            Assert.assertArrayEquals(List.of("123", "234", "345").toArray(), userData.getRecentlyUsedOrgIds().toArray());
+        }).verifyComplete();
+    }
+}
\ No newline at end of file
diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java
index cf314e6c3e..c6ce42a899 100644
--- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java
@@ -1,10 +1,13 @@
 package com.appsmith.server.services;
 
 import com.appsmith.server.domains.Asset;
+import com.appsmith.server.domains.Collection;
 import com.appsmith.server.domains.User;
 import com.appsmith.server.domains.UserData;
 import com.appsmith.server.exceptions.AppsmithException;
 import com.appsmith.server.repositories.AssetRepository;
+import org.apache.commons.compress.utils.Lists;
+import org.junit.Assert;
 import org.junit.Before;
 import org.junit.Test;
 import org.junit.runner.RunWith;
@@ -26,6 +29,7 @@ import reactor.test.StepVerifier;
 import reactor.util.function.Tuple2;
 
 import java.time.Duration;
+import java.util.Arrays;
 
 import static org.assertj.core.api.Assertions.assertThat;
 
@@ -167,4 +171,31 @@ public class UserDataServiceTest {
                 .verify();
     }
 
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void testUpdateLastUsedOrgList_WhenListIsEmpty_orgIdPrepended() {
+        String sampleOrgId = "abcd";
+        final Mono<UserData> saveMono = userDataService.updateLastUsedOrgList(sampleOrgId);
+        StepVerifier.create(saveMono).assertNext(userData -> {
+            Assert.assertEquals(1, userData.getRecentlyUsedOrgIds().size());
+            Assert.assertEquals(sampleOrgId, userData.getRecentlyUsedOrgIds().get(0));
+        }).verifyComplete();
+    }
+
+    @Test
+    @WithUserDetails(value = "api_user")
+    public void testUpdateLastUsedOrgList_WhenListIsNotEmpty_orgIdPrepended() {
+        // set some org id to current user's list
+        UserData existingUserData = new UserData();
+        existingUserData.setRecentlyUsedOrgIds(Arrays.asList("123", "456"));
+        userDataService.updateForCurrentUser(existingUserData).subscribe();
+
+        // now check whether new org id is put at first
+        String sampleOrgId = "abcd";
+        final Mono<UserData> saveMono = userDataService.updateLastUsedOrgList(sampleOrgId);
+        StepVerifier.create(saveMono).assertNext(userData -> {
+            Assert.assertEquals(3, userData.getRecentlyUsedOrgIds().size());
+            Assert.assertEquals(sampleOrgId, userData.getRecentlyUsedOrgIds().get(0));
+        }).verifyComplete();
+    }
 }

From 247e5d7ea4ad40f49c880a740414d19aa65588e0 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumit@appsmith.com>
Date: Mon, 17 May 2021 08:59:17 +0530
Subject: [PATCH 62/76] Feature: return prepared stmt / smart substitution
 params under request params section for debugging (#4421)

- return prepared stmt / smart substitution params under request params section for debugging
---
 .../external/helpers/MustacheHelper.java      | 16 +++++
 .../external/helpers/PluginUtils.java         |  4 ++
 .../models/ActionExecutionRequest.java        |  9 ++-
 .../external/models/PsParameterDTO.java       | 17 +++++
 .../external/models/RequestParamDTO.java      | 14 +++--
 .../plugins/SmartSubstitutionInterface.java   |  3 +-
 .../com/external/plugins/AmazonS3Plugin.java  | 30 ++++-----
 .../external/plugins/AmazonS3PluginTest.java  | 32 +++++-----
 .../com/external/plugins/DynamoPlugin.java    |  4 +-
 .../external/plugins/DynamoPluginTest.java    |  4 +-
 .../external/plugins/ElasticSearchPlugin.java |  6 +-
 .../plugins/ElasticSearchPluginTest.java      |  6 +-
 .../com/external/plugins/FirestorePlugin.java | 26 ++++----
 .../external/plugins/FirestorePluginTest.java | 52 +++++++--------
 .../com/external/plugins/MongoPlugin.java     |  2 +-
 .../com/external/plugins/MongoPluginTest.java | 17 ++++-
 .../com/external/plugins/MssqlPlugin.java     | 17 ++++-
 .../com/external/plugins/MssqlPluginTest.java | 21 ++++++-
 .../com/external/plugins/MySqlPlugin.java     | 26 +++++---
 .../com/external/plugins/MySqlPluginTest.java | 63 ++++++++++++++++++-
 .../com/external/plugins/PostgresPlugin.java  | 16 ++++-
 .../external/plugins/PostgresPluginTest.java  | 21 ++++++-
 .../com/external/plugins/RedisPlugin.java     |  2 +-
 .../com/external/plugins/RedisPluginTest.java |  2 +-
 .../com/external/plugins/RedshiftPlugin.java  |  2 +-
 .../external/plugins/RedshiftPluginTest.java  |  2 +-
 .../external/plugins/RestApiPluginTest.java   |  3 +-
 .../server/services/NewActionServiceImpl.java | 19 +++---
 28 files changed, 315 insertions(+), 121 deletions(-)
 create mode 100644 app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/PsParameterDTO.java

diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/MustacheHelper.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/MustacheHelper.java
index e6ee0eeea6..afa5dbd5cc 100644
--- a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/MustacheHelper.java
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/MustacheHelper.java
@@ -16,6 +16,7 @@ import java.util.List;
 import java.util.Map;
 import java.util.Queue;
 import java.util.Set;
+import java.util.concurrent.atomic.AtomicInteger;
 import java.util.function.Function;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
@@ -367,6 +368,21 @@ public class MustacheHelper {
         return body;
     }
 
+    public static String replaceQuestionMarkWithDollarIndex(String query) {
+        final AtomicInteger counter = new AtomicInteger();
+        String updatedQuery = query.chars()
+                .mapToObj(c -> {
+                    if (c == '?') {
+                        return "$" + counter.incrementAndGet();
+                    }
+
+                    return Character.toString(c);
+                })
+                .collect(Collectors.joining());
+
+        return updatedQuery;
+    }
+
     public static Boolean laxIsBindingPresentInString(String input) {
         return laxMustacheBindingPattern.matcher(input).find();
     }
diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/PluginUtils.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/PluginUtils.java
index 9c129b1150..bc953b7e5d 100644
--- a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/PluginUtils.java
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/helpers/PluginUtils.java
@@ -50,4 +50,8 @@ public class PluginUtils {
     public static String getActionConfigurationPropertyPath(int index) {
         return "actionConfiguration.pluginSpecifiedTemplates[" + index + "].value";
     }
+
+    public static String getPSParamLabel(int i) {
+        return "$" + i;
+    }
 }
diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/ActionExecutionRequest.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/ActionExecutionRequest.java
index d24f3d343a..665aa55add 100644
--- a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/ActionExecutionRequest.java
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/ActionExecutionRequest.java
@@ -1,5 +1,6 @@
 package com.appsmith.external.models;
 
+import com.fasterxml.jackson.annotation.JsonIgnore;
 import lombok.AllArgsConstructor;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
@@ -16,12 +17,14 @@ import java.util.Map;
 @NoArgsConstructor
 @AllArgsConstructor
 public class ActionExecutionRequest {
-    String query;
+    @JsonIgnore
+    String query; // Only used for analytics. Not to be returned back to the client.
     Object body;
     Object headers;
     HttpMethod httpMethod;
     String url;
-    Map<String, ?> properties;
+    @JsonIgnore
+    Map<String, ?> properties; // Only used for analytics. Not to be returned back to the client.
     List<String> executionParameters;
-    List<RequestParamDTO> requestParams;
+    Object requestParams;
 }
diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/PsParameterDTO.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/PsParameterDTO.java
new file mode 100644
index 0000000000..a268a99516
--- /dev/null
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/PsParameterDTO.java
@@ -0,0 +1,17 @@
+package com.appsmith.external.models;
+
+import com.fasterxml.jackson.annotation.JsonPropertyOrder;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.Setter;
+import lombok.ToString;
+
+@Getter
+@Setter
+@ToString
+@AllArgsConstructor
+@JsonPropertyOrder({"value", "type"})
+public class PsParameterDTO {
+    String value;
+    String type;
+}
diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/RequestParamDTO.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/RequestParamDTO.java
index 64f25c1dea..7dcaa3d507 100644
--- a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/RequestParamDTO.java
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/models/RequestParamDTO.java
@@ -1,21 +1,27 @@
 package com.appsmith.external.models;
 
-import com.fasterxml.jackson.annotation.JsonProperty;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonPropertyOrder;
 import lombok.AllArgsConstructor;
 import lombok.Getter;
 import lombok.Setter;
 import lombok.ToString;
 
 import java.util.List;
+import java.util.Map;
 
 @Setter
 @Getter
 @ToString
 @AllArgsConstructor
+@JsonPropertyOrder({"value", "psParams", "types", "label", "configProperty"})
 public class RequestParamDTO {
-    @JsonProperty(access = JsonProperty.Access.WRITE_ONLY)
+    @JsonIgnore
     private String configProperty; // Only meant for internal use. It won't be returned back to the client.
     private Object value;
-    private String label;
-    private List<ParsedDataType> types;
+    @JsonIgnore
+    private String label; // Only meant for internal use. It is returned as key for the RequestParamDTO object.
+    @JsonIgnore
+    private List<ParsedDataType> types; // Not getting used for now but still keeping it here for future use.
+    private Map<String, Object> substitutedParams;
 }
diff --git a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/plugins/SmartSubstitutionInterface.java b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/plugins/SmartSubstitutionInterface.java
index 9f0a88aa4f..42fc69c946 100644
--- a/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/plugins/SmartSubstitutionInterface.java
+++ b/app/server/appsmith-interfaces/src/main/java/com/appsmith/external/plugins/SmartSubstitutionInterface.java
@@ -50,7 +50,8 @@ public interface SmartSubstitutionInterface {
 
     // Default implementation does not do any substitution. The plugin doing intelligent substitution is responsible
     // for overriding this function.
-    default Object substituteValueInInput(int index, String binding, String value, Object input, List<Map.Entry<String, String>> insertedParams, Object... args) throws AppsmithPluginException {
+    default Object substituteValueInInput(int index, String binding, String value, Object input,
+                                          List<Map.Entry<String, String>> insertedParams, Object... args) throws AppsmithPluginException {
         return input;
     }
 }
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/main/java/com/external/plugins/AmazonS3Plugin.java b/app/server/appsmith-plugins/amazons3Plugin/src/main/java/com/external/plugins/AmazonS3Plugin.java
index fc4f5b2c62..c0eceed4b2 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/main/java/com/external/plugins/AmazonS3Plugin.java
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/main/java/com/external/plugins/AmazonS3Plugin.java
@@ -325,7 +325,7 @@ public class AmazonS3Plugin extends BasePlugin {
                 query[0] = s3Action.name();
 
                 requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(ACTION_PROPERTY_INDEX),
-                        properties.get(ACTION_PROPERTY_INDEX).getValue(), null, null));
+                        properties.get(ACTION_PROPERTY_INDEX).getValue(), null, null, null));
 
                 if (properties.size() < (1 + BUCKET_NAME_PROPERTY_INDEX)
                         || properties.get(BUCKET_NAME_PROPERTY_INDEX) == null) {
@@ -341,7 +341,7 @@ public class AmazonS3Plugin extends BasePlugin {
                 final String bucketName = (String) properties.get(BUCKET_NAME_PROPERTY_INDEX).getValue();
                 requestProperties.put("bucket", bucketName == null ? "" : bucketName);
                 requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(BUCKET_NAME_PROPERTY_INDEX),
-                        bucketName, null, null));
+                        bucketName, null, null, null));
 
                 if (StringUtils.isEmpty(bucketName)) {
                     return Mono.error(
@@ -390,7 +390,7 @@ public class AmazonS3Plugin extends BasePlugin {
                             prefix = (String) properties.get(PREFIX_PROPERTY_INDEX).getValue();
                         }
                         requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(PREFIX_PROPERTY_INDEX),
-                                prefix, null, null));
+                                prefix, null, null, null));
 
                         ArrayList<String> listOfFiles = listAllFilesInBucket(connection, bucketName, prefix);
 
@@ -398,7 +398,7 @@ public class AmazonS3Plugin extends BasePlugin {
                                 && properties.get(GET_SIGNED_URL_PROPERTY_INDEX) != null
                                 && properties.get(GET_SIGNED_URL_PROPERTY_INDEX).getValue().equals(YES)) {
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(GET_SIGNED_URL_PROPERTY_INDEX), YES, null,
-                                    null));
+                                    null, null));
 
                             int durationInMinutes;
                             if (properties.size() < (1 + URL_EXPIRY_DURATION_PROPERTY_INDEX)
@@ -424,7 +424,7 @@ public class AmazonS3Plugin extends BasePlugin {
                                 }
                             }
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(URL_EXPIRY_DURATION_PROPERTY_INDEX),
-                                    durationInMinutes, null, null));
+                                    durationInMinutes, null, null, null));
 
                             Calendar calendar = Calendar.getInstance();
                             calendar.add(Calendar.MINUTE, durationInMinutes);
@@ -455,7 +455,7 @@ public class AmazonS3Plugin extends BasePlugin {
                             }
                         } else {
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(GET_SIGNED_URL_PROPERTY_INDEX),
-                                    "", null, null));
+                                    "", null, null, null));
                             actionResult = new ArrayList<>();
                             for (int i = 0; i < listOfFiles.size(); i++) {
                                 HashMap<String, Object> fileInfo = new HashMap<>();
@@ -465,7 +465,7 @@ public class AmazonS3Plugin extends BasePlugin {
                         }
                         break;
                     case UPLOAD_FILE_FROM_BODY:
-                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null));
+                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null, null));
 
                         int durationInMinutes;
                         if (properties.size() < (1 + URL_EXPIRY_DURATION_FOR_UPLOAD_PROPERTY_INDEX)
@@ -503,11 +503,11 @@ public class AmazonS3Plugin extends BasePlugin {
                                 && properties.get(USING_FILEPICKER_FOR_UPLOAD_PROPERTY_INDEX) != null
                                 && properties.get(USING_FILEPICKER_FOR_UPLOAD_PROPERTY_INDEX).getValue().equals(YES)) {
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(USING_FILEPICKER_FOR_UPLOAD_PROPERTY_INDEX), "Base64",
-                                    null, null));
+                                    null, null, null));
                             signedUrl = uploadFileFromBody(connection, bucketName, path, body, true, expiryDateTime);
                         } else {
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(USING_FILEPICKER_FOR_UPLOAD_PROPERTY_INDEX),
-                                    "Text / Binary", null, null));
+                                    "Text / Binary", null, null, null));
                             signedUrl = uploadFileFromBody(connection, bucketName, path, body, false, expiryDateTime);
                         }
                         actionResult = new HashMap<String, Object>();
@@ -515,28 +515,28 @@ public class AmazonS3Plugin extends BasePlugin {
                         ((HashMap<String, Object>) actionResult).put("urlExpiryDate", expiryDateTimeString);
 
                         requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(URL_EXPIRY_DURATION_FOR_UPLOAD_PROPERTY_INDEX),
-                                expiryDateTimeString, null, null));
-                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  body, null, null));
+                                expiryDateTimeString, null, null, null));
+                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  body, null, null, null));
                         break;
                     case READ_FILE:
-                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null));
+                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null, null));
 
                         String result;
                         if (properties.size() > READ_WITH_BASE64_ENCODING_PROPERTY_INDEX
                                 && properties.get(READ_WITH_BASE64_ENCODING_PROPERTY_INDEX) != null
                                 && properties.get(READ_WITH_BASE64_ENCODING_PROPERTY_INDEX).getValue().equals(YES)) {
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(READ_WITH_BASE64_ENCODING_PROPERTY_INDEX),
-                                    YES, null, null));
+                                    YES, null, null, null));
                             result = readFile(connection, bucketName, path, true);
                         } else {
                             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(READ_WITH_BASE64_ENCODING_PROPERTY_INDEX),
-                                    NO, null, null));
+                                    NO, null, null, null));
                             result = readFile(connection, bucketName, path, false);
                         }
                         actionResult = Map.of("fileData", result);
                         break;
                     case DELETE_FILE:
-                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null));
+                        requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null, null));
 
                         /*
                          * - If attempting to delete an object that does not exist, Amazon S3 returns a success message
diff --git a/app/server/appsmith-plugins/amazons3Plugin/src/test/java/com/external/plugins/AmazonS3PluginTest.java b/app/server/appsmith-plugins/amazons3Plugin/src/test/java/com/external/plugins/AmazonS3PluginTest.java
index 7cc02be40d..13351f39d2 100644
--- a/app/server/appsmith-plugins/amazons3Plugin/src/test/java/com/external/plugins/AmazonS3PluginTest.java
+++ b/app/server/appsmith-plugins/amazons3Plugin/src/test/java/com/external/plugins/AmazonS3PluginTest.java
@@ -419,12 +419,12 @@ public class AmazonS3PluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "UPLOAD_FILE_FROM_BODY", null, null)); // Action
+                            "UPLOAD_FILE_FROM_BODY", null, null, null)); // Action
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(1), "bucket_name",
-                            null, null)); // Bucket name
-                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, dummyPath, null, null)); // Path
+                            null, null, null)); // Bucket name
+                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, dummyPath, null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(6), "Base64", null,
-                            null)); // File data type
+                            null, null)); // File data type
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -520,12 +520,12 @@ public class AmazonS3PluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0), "READ_FILE",
-                            null, null)); // Action
+                            null, null, null)); // Action
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(1), "bucket_name",
-                            null, null)); // Bucket name
-                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, dummyPath, null, null)); // Path
+                            null, null, null)); // Bucket name
+                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, dummyPath, null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(5), "YES", null,
-                            null)); // Base64 encode file
+                            null, null)); // Base64 encode file
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -568,10 +568,10 @@ public class AmazonS3PluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0), "DELETE_FILE",
-                            null, null)); // Action
+                            null, null, null)); // Action
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(1), "bucket_name",
-                            null, null)); // Bucket name
-                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, dummyPath, null, null)); // Path
+                            null, null, null)); // Bucket name
+                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, dummyPath, null, null, null)); // Path
                     assertEquals(result.getRequest().getRequestParams().toString(),
                             expectedRequestParams.toString());
                 })
@@ -800,15 +800,15 @@ public class AmazonS3PluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0), "LIST", null
-                            , null)); // Action
+                            , null, null)); // Action
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(1), "bucket_name",
-                            null, null)); // Bucket name
+                            null, null, null)); // Bucket name
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(4), "", null,
-                            null)); // Prefix
+                            null, null)); // Prefix
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(2), "YES", null,
-                            null)); // Generate signed URL
+                            null, null)); // Generate signed URL
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(3), "5", null,
-                            null)); // Expiry duration
+                            null, null)); // Expiry duration
                     assertEquals(result.getRequest().getRequestParams().toString(),
                             expectedRequestParams.toString());
                 })
diff --git a/app/server/appsmith-plugins/dynamoPlugin/src/main/java/com/external/plugins/DynamoPlugin.java b/app/server/appsmith-plugins/dynamoPlugin/src/main/java/com/external/plugins/DynamoPlugin.java
index a48fb7c120..a36ed861e1 100644
--- a/app/server/appsmith-plugins/dynamoPlugin/src/main/java/com/external/plugins/DynamoPlugin.java
+++ b/app/server/appsmith-plugins/dynamoPlugin/src/main/java/com/external/plugins/DynamoPlugin.java
@@ -297,8 +297,8 @@ public class DynamoPlugin extends BasePlugin {
                     );
                 }
                 requestData.put("action", action);
-                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, action, null, null));
-                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  body, null, null));
+                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, action, null, null, null));
+                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  body, null, null, null));
 
                 Map<String, Object> parameters = null;
                 try {
diff --git a/app/server/appsmith-plugins/dynamoPlugin/src/test/java/com/external/plugins/DynamoPluginTest.java b/app/server/appsmith-plugins/dynamoPlugin/src/test/java/com/external/plugins/DynamoPluginTest.java
index afff939ade..98f6368c18 100644
--- a/app/server/appsmith-plugins/dynamoPlugin/src/test/java/com/external/plugins/DynamoPluginTest.java
+++ b/app/server/appsmith-plugins/dynamoPlugin/src/test/java/com/external/plugins/DynamoPluginTest.java
@@ -199,8 +199,8 @@ public class DynamoPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, "DescribeTable", null,
-                            null));
-                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  body, null, null));
+                            null, null));
+                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  body, null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
diff --git a/app/server/appsmith-plugins/elasticSearchPlugin/src/main/java/com/external/plugins/ElasticSearchPlugin.java b/app/server/appsmith-plugins/elasticSearchPlugin/src/main/java/com/external/plugins/ElasticSearchPlugin.java
index d8f9059b90..8d692787ff 100644
--- a/app/server/appsmith-plugins/elasticSearchPlugin/src/main/java/com/external/plugins/ElasticSearchPlugin.java
+++ b/app/server/appsmith-plugins/elasticSearchPlugin/src/main/java/com/external/plugins/ElasticSearchPlugin.java
@@ -82,9 +82,9 @@ public class ElasticSearchPlugin extends BasePlugin {
                 HttpMethod httpMethod = actionConfiguration.getHttpMethod();
                 requestData.put("method", httpMethod.name());
                 requestParams.add(new RequestParamDTO("actionConfiguration.httpMethod", httpMethod.name(), null,
-                        null));
-                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null));
-                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null, null));
+                        null, null));
+                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null, null));
+                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null, null, null));
 
                 final Request request = new Request(httpMethod.toString(), path);
                 ContentType contentType = ContentType.APPLICATION_JSON;
diff --git a/app/server/appsmith-plugins/elasticSearchPlugin/src/test/java/com/external/plugins/ElasticSearchPluginTest.java b/app/server/appsmith-plugins/elasticSearchPlugin/src/test/java/com/external/plugins/ElasticSearchPluginTest.java
index d43fbc22c5..e03dfcf423 100644
--- a/app/server/appsmith-plugins/elasticSearchPlugin/src/test/java/com/external/plugins/ElasticSearchPluginTest.java
+++ b/app/server/appsmith-plugins/elasticSearchPlugin/src/test/java/com/external/plugins/ElasticSearchPluginTest.java
@@ -128,9 +128,9 @@ public class ElasticSearchPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO("actionConfiguration.httpMethod", HttpMethod.GET.toString(),
-                            null, null));
-                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, "/planets/_mget", null, null));
-                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  contentJson, null, null));
+                            null, null, null));
+                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, "/planets/_mget", null, null, null));
+                    expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  contentJson, null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
diff --git a/app/server/appsmith-plugins/firestorePlugin/src/main/java/com/external/plugins/FirestorePlugin.java b/app/server/appsmith-plugins/firestorePlugin/src/main/java/com/external/plugins/FirestorePlugin.java
index a20cfdf614..29301e269c 100644
--- a/app/server/appsmith-plugins/firestorePlugin/src/main/java/com/external/plugins/FirestorePlugin.java
+++ b/app/server/appsmith-plugins/firestorePlugin/src/main/java/com/external/plugins/FirestorePlugin.java
@@ -123,8 +123,8 @@ public class FirestorePlugin extends BasePlugin {
 
             List<RequestParamDTO> requestParams = new ArrayList<>();
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0), method == null ? "" :
-                    method.toString(), null, null));
-            requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null));
+                    method.toString(), null, null, null));
+            requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, path, null, null, null));
 
             final PaginationField paginationField = executeActionDTO == null ? null : executeActionDTO.getPaginationField();
 
@@ -278,7 +278,7 @@ public class FirestorePlugin extends BasePlugin {
                     && !StringUtils.isEmpty((String) properties.get(FIELDVALUE_DELETE_PROPERTY_INDEX).getValue())) {
                 String deletePaths = (String) properties.get(FIELDVALUE_DELETE_PROPERTY_INDEX).getValue();
                 requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(FIELDVALUE_DELETE_PROPERTY_INDEX),
-                        deletePaths, null, null));
+                        deletePaths, null, null, null));
                 List<String> deletePathsList;
                 try {
                     deletePathsList = objectMapper.readValue(deletePaths, new TypeReference<List<String>>(){});
@@ -327,7 +327,7 @@ public class FirestorePlugin extends BasePlugin {
                     && !StringUtils.isEmpty((String) properties.get(FIELDVALUE_TIMESTAMP_PROPERTY_INDEX).getValue())) {
                 String timestampValuePaths = (String) properties.get(FIELDVALUE_TIMESTAMP_PROPERTY_INDEX).getValue();
                 requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(FIELDVALUE_TIMESTAMP_PROPERTY_INDEX),
-                        timestampValuePaths, null, null));
+                        timestampValuePaths, null, null, null));
                 List<String> timestampPathsStringList; // ["key1.key2", "key3.key4"]
                 try {
                     timestampPathsStringList = objectMapper.readValue(timestampValuePaths,
@@ -432,7 +432,7 @@ public class FirestorePlugin extends BasePlugin {
                                 case CREATE_DOCUMENT:
                                 case UPDATE_DOCUMENT:
                                     requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null,
-                                            null));
+                                            null, null));
                                     return Mono.justOrEmpty(DocumentReference.class.getMethod(methodName, Map.class));
                                 default:
                                     return Mono.error(new AppsmithPluginException(
@@ -513,7 +513,7 @@ public class FirestorePlugin extends BasePlugin {
                 return methodGetCollection(collection, properties, paginationField, requestParams);
 
             } else if (method == Method.ADD_TO_COLLECTION) {
-                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null, null));
+                requestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null, null, null));
                 return methodAddToCollection(collection, mapBody);
 
             }
@@ -553,7 +553,7 @@ public class FirestorePlugin extends BasePlugin {
 
             final String orderByString = getPropertyAt(properties, ORDER_PROPERTY_INDEX, "");
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(ORDER_PROPERTY_INDEX),
-                    orderByString, null, null));
+                    orderByString, null, null, null));
 
             final List<String> orderings;
             try {
@@ -566,7 +566,7 @@ public class FirestorePlugin extends BasePlugin {
             Map<String, Object> startAfterTemp = null;
             final String startAfterJson = getPropertyAt(properties, START_AFTER_PROPERTY_INDEX, "{}");
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(START_AFTER_PROPERTY_INDEX),
-                    startAfterJson, null, null));
+                    startAfterJson, null, null, null));
             if (PaginationField.NEXT.equals(paginationField)) {
                 try {
                     startAfterTemp = StringUtils.isEmpty(startAfterJson) ? Collections.emptyMap() : objectMapper.readValue(startAfterJson, Map.class);
@@ -578,7 +578,7 @@ public class FirestorePlugin extends BasePlugin {
             Map<String, Object> endBeforeTemp = null;
             final String endBeforeJson = getPropertyAt(properties, END_BEFORE_PROPERTY_INDEX, "{}");
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(END_BEFORE_PROPERTY_INDEX),
-                    endBeforeJson, null, null));
+                    endBeforeJson, null, null, null));
             if (PaginationField.PREV.equals(paginationField)) {
                 try {
                     endBeforeTemp = StringUtils.isEmpty(endBeforeJson) ? Collections.emptyMap() : objectMapper.readValue(endBeforeJson, Map.class);
@@ -588,13 +588,13 @@ public class FirestorePlugin extends BasePlugin {
             }
 
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(LIMIT_PROPERTY_INDEX),
-                    limitString == null ? "" : limitString, null, null));
+                    limitString == null ? "" : limitString, null, null, null));
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(QUERY_PROPERTY_INDEX),
-                    queryFieldPath == null ? "" : queryFieldPath, null, null));
+                    queryFieldPath == null ? "" : queryFieldPath, null, null, null));
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(OPERATOR_PROPERTY_INDEX),
-                    operatorString == null ? "" : operatorString, null, null));
+                    operatorString == null ? "" : operatorString, null, null, null));
             requestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(QUERY_VALUE_PROPERTY_INDEX),
-                    queryValue == null ? "" : queryValue, null, null));
+                    queryValue == null ? "" : queryValue, null, null, null));
 
             final Map<String, Object> startAfter = startAfterTemp;
             final Map<String, Object> endBefore = endBeforeTemp;
diff --git a/app/server/appsmith-plugins/firestorePlugin/src/test/java/com/external/plugins/FirestorePluginTest.java b/app/server/appsmith-plugins/firestorePlugin/src/test/java/com/external/plugins/FirestorePluginTest.java
index dc63cf037b..d0325aa8eb 100644
--- a/app/server/appsmith-plugins/firestorePlugin/src/test/java/com/external/plugins/FirestorePluginTest.java
+++ b/app/server/appsmith-plugins/firestorePlugin/src/test/java/com/external/plugins/FirestorePluginTest.java
@@ -154,9 +154,9 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "GET_DOCUMENT", null, null)); // Method
+                            "GET_DOCUMENT", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -297,11 +297,11 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "SET_DOCUMENT", null, null)); // Method
+                            "SET_DOCUMENT", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null)); // Body
+                            actionConfiguration.getBody(), null, null, null)); // Body
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -331,11 +331,11 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "CREATE_DOCUMENT", null, null)); // Method
+                            "CREATE_DOCUMENT", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null)); // Body
+                            actionConfiguration.getBody(), null, null, null)); // Body
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -394,9 +394,9 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "DELETE_DOCUMENT", null, null)); // Method
+                            "DELETE_DOCUMENT", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -428,11 +428,11 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "ADD_TO_COLLECTION", null, null)); // Method
+                            "ADD_TO_COLLECTION", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null)); // Body
+                            actionConfiguration.getBody(), null, null, null)); // Body
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -626,23 +626,23 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "GET_COLLECTION", null, null)); // Method
+                            "GET_COLLECTION", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(1),
-                            "[\"firm\", \"name\"]", null, null)); // Order by
+                            "[\"firm\", \"name\"]", null, null, null)); // Order by
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(6), "{}", null,
-                            null)); // Start after
+                            null, null)); // Start after
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(7), "{}", null,
-                            null)); // End before
+                            null, null)); // End before
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(2), "15", null,
-                            null)); // Limit
+                            null, null)); // Limit
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(3), "", null,
-                            null)); // Field Path
+                            null, null)); // Field Path
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(4), "", null,
-                            null)); // Operator
+                            null, null)); // Operator
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(5), "", null,
-                            null)); // Value
+                            null, null)); // Value
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
 
                 })
@@ -783,13 +783,13 @@ public class FirestorePluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(0),
-                            "UPDATE_DOCUMENT", null, null)); // Method
+                            "UPDATE_DOCUMENT", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_PATH, actionConfiguration.getPath(),
-                            null, null)); // Path
+                            null, null, null)); // Path
                     expectedRequestParams.add(new RequestParamDTO(getActionConfigurationPropertyPath(9),
-                            "[\"value\"]", null, null)); // Method
+                            "[\"value\"]", null, null, null)); // Method
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null)); // Body
+                            actionConfiguration.getBody(), null, null, null)); // Body
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
diff --git a/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java b/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java
index 1a335e387e..8fcf54bc3d 100644
--- a/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java
+++ b/app/server/appsmith-plugins/mongoPlugin/src/main/java/com/external/plugins/MongoPlugin.java
@@ -241,7 +241,7 @@ public class MongoPlugin extends BasePlugin {
             Mono<Document> mongoOutputMono = Mono.from(database.runCommand(command));
             ActionExecutionResult result = new ActionExecutionResult();
             List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null
-                    , null));
+                    , null, null));
 
             return mongoOutputMono
                     .onErrorMap(
diff --git a/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java b/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java
index cb0bd64724..b941ce8e3c 100644
--- a/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java
+++ b/app/server/appsmith-plugins/mongoPlugin/src/test/java/com/external/plugins/MongoPluginTest.java
@@ -235,7 +235,7 @@ public class MongoPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null));
+                            actionConfiguration.getBody(), null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -271,7 +271,7 @@ public class MongoPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null));
+                            actionConfiguration.getBody(), null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -799,7 +799,8 @@ public class MongoPluginTest {
 
                     // Assert the debug request parameters are getting set.
                     ActionExecutionRequest request = result.getRequest();
-                    List<Map.Entry<String, String>> parameters = (List<Map.Entry<String, String>>) request.getProperties().get("smart-substitution-parameters");
+                    List<Map.Entry<String, String>> parameters =
+                            (List<Map.Entry<String, String>>) request.getProperties().get("smart-substitution-parameters");
                     assertEquals(parameters.size(), 4);
 
                     Map.Entry<String, String> parameterEntry = parameters.get(0);
@@ -822,6 +823,16 @@ public class MongoPluginTest {
                             List.of(new ParsedDataType(JSON), new ParsedDataType(RAW)).toString(),
                             result.getDataTypes().toString()
                     );
+
+                    String expectedQuery = "{\n" +
+                            "      find: \"users\",\n" +
+                            "      filter: { age: { \"$gte\": 30 } },\n" +
+                            "      sort: { id: 1 },\n" +
+                            "      limit: 10\n" +
+                            "    }";
+                    // check that bindings are not replaced with actual values and not '$i' or '?'
+                    assertEquals(expectedQuery,
+                            ((RequestParamDTO)(((List)result.getRequest().getRequestParams())).get(0)).getValue());
                 })
                 .verifyComplete();
     }
diff --git a/app/server/appsmith-plugins/mssqlPlugin/src/main/java/com/external/plugins/MssqlPlugin.java b/app/server/appsmith-plugins/mssqlPlugin/src/main/java/com/external/plugins/MssqlPlugin.java
index cb42fdb2b6..127d830550 100644
--- a/app/server/appsmith-plugins/mssqlPlugin/src/main/java/com/external/plugins/MssqlPlugin.java
+++ b/app/server/appsmith-plugins/mssqlPlugin/src/main/java/com/external/plugins/MssqlPlugin.java
@@ -14,6 +14,7 @@ import com.appsmith.external.models.DBAuth;
 import com.appsmith.external.models.DatasourceConfiguration;
 import com.appsmith.external.models.DatasourceTestResult;
 import com.appsmith.external.models.Endpoint;
+import com.appsmith.external.models.PsParameterDTO;
 import com.appsmith.external.models.Property;
 import com.appsmith.external.models.RequestParamDTO;
 import com.appsmith.external.models.SSLDetails;
@@ -55,10 +56,13 @@ import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
+import java.util.stream.IntStream;
 
 import static com.appsmith.external.constants.ActionConstants.ACTION_CONFIGURATION_BODY;
+import static com.appsmith.external.helpers.MustacheHelper.replaceQuestionMarkWithDollarIndex;
 import static com.appsmith.external.helpers.PluginUtils.getColumnsListForJdbcPlugin;
 import static com.appsmith.external.helpers.PluginUtils.getIdenticalColumns;
+import static com.appsmith.external.helpers.PluginUtils.getPSParamLabel;
 import static com.appsmith.external.models.Connection.Mode.READ_ONLY;
 import static java.lang.Boolean.FALSE;
 import static java.lang.Boolean.TRUE;
@@ -162,8 +166,10 @@ public class MssqlPlugin extends BasePlugin {
             requestData.put("preparedStatement", TRUE.equals(preparedStatement) ? true : false);
 
             String query = actionConfiguration.getBody();
-            List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null
-                    , null));
+            Map<String, Object> psParams = preparedStatement ? new LinkedHashMap<>() : null;
+            String transformedQuery = preparedStatement ? replaceQuestionMarkWithDollarIndex(query) : query;
+            List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
+                    transformedQuery, null, null, psParams));
 
             return Mono.fromCallable(() -> {
                 try {
@@ -205,6 +211,13 @@ public class MssqlPlugin extends BasePlugin {
                                 parameters);
 
                         requestData.put("ps-parameters", parameters);
+
+                        IntStream.range(0, parameters.size())
+                                .forEachOrdered(i ->
+                                        psParams.put(
+                                                getPSParamLabel(i+1),
+                                                new PsParameterDTO(parameters.get(i).getKey(), parameters.get(i).getValue())));
+
                         isResultSet = preparedQuery.execute();
                         resultSet = preparedQuery.getResultSet();
                     }
diff --git a/app/server/appsmith-plugins/mssqlPlugin/src/test/java/com/external/plugins/MssqlPluginTest.java b/app/server/appsmith-plugins/mssqlPlugin/src/test/java/com/external/plugins/MssqlPluginTest.java
index 79e0dec902..1efb1d2b97 100644
--- a/app/server/appsmith-plugins/mssqlPlugin/src/test/java/com/external/plugins/MssqlPluginTest.java
+++ b/app/server/appsmith-plugins/mssqlPlugin/src/test/java/com/external/plugins/MssqlPluginTest.java
@@ -8,6 +8,7 @@ import com.appsmith.external.models.ActionExecutionResult;
 import com.appsmith.external.models.DBAuth;
 import com.appsmith.external.models.DatasourceConfiguration;
 import com.appsmith.external.models.Endpoint;
+import com.appsmith.external.models.PsParameterDTO;
 import com.appsmith.external.models.Param;
 import com.appsmith.external.models.Property;
 import com.appsmith.external.models.RequestParamDTO;
@@ -228,7 +229,7 @@ public class MssqlPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null));
+                            actionConfiguration.getBody(), null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -311,7 +312,6 @@ public class MssqlPluginTest {
                     Map.Entry<String, String> parameterEntry = parameters.get(0);
                     assertEquals(parameterEntry.getKey(), "1");
                     assertEquals(parameterEntry.getValue(), "INTEGER");
-
                 })
                 .verifyComplete();
     }
@@ -369,6 +369,23 @@ public class MssqlPluginTest {
                                     .toArray()
                     );
 
+                    /*
+                     * - Check if request params are sent back properly.
+                     * - Not replicating the same to other tests as the overall flow remains the same w.r.t. request
+                     *  params.
+                     */
+
+                    // check if '?' is replaced by $i.
+                    assertEquals("SELECT * FROM users where id = $1;",
+                            ((RequestParamDTO)(((List)result.getRequest().getRequestParams())).get(0)).getValue());
+
+                    PsParameterDTO expectedPsParam = new PsParameterDTO("1", "INTEGER");
+                    PsParameterDTO returnedPsParam =
+                            (PsParameterDTO) ((RequestParamDTO) (((List) result.getRequest().getRequestParams())).get(0)).getSubstitutedParams().get("$1");
+                    // Check if prepared stmt param value is correctly sent back.
+                    assertEquals(expectedPsParam.getValue(), returnedPsParam.getValue());
+                    // check if prepared stmt param type is correctly sent back.
+                    assertEquals(expectedPsParam.getType(), returnedPsParam.getType());
                 })
                 .verifyComplete();
     }
diff --git a/app/server/appsmith-plugins/mysqlPlugin/src/main/java/com/external/plugins/MySqlPlugin.java b/app/server/appsmith-plugins/mysqlPlugin/src/main/java/com/external/plugins/MySqlPlugin.java
index ed0374547e..cf15f8fba2 100644
--- a/app/server/appsmith-plugins/mysqlPlugin/src/main/java/com/external/plugins/MySqlPlugin.java
+++ b/app/server/appsmith-plugins/mysqlPlugin/src/main/java/com/external/plugins/MySqlPlugin.java
@@ -15,7 +15,7 @@ import com.appsmith.external.models.DatasourceConfiguration;
 import com.appsmith.external.models.DatasourceStructure;
 import com.appsmith.external.models.DatasourceTestResult;
 import com.appsmith.external.models.Endpoint;
-import com.appsmith.external.models.Param;
+import com.appsmith.external.models.PsParameterDTO;
 import com.appsmith.external.models.Property;
 import com.appsmith.external.models.RequestParamDTO;
 import com.appsmith.external.models.SSLDetails;
@@ -58,9 +58,12 @@ import java.util.List;
 import java.util.Map;
 import java.util.Set;
 import java.util.stream.Collectors;
+import java.util.stream.IntStream;
 
 import static com.appsmith.external.constants.ActionConstants.ACTION_CONFIGURATION_BODY;
+import static com.appsmith.external.helpers.MustacheHelper.replaceQuestionMarkWithDollarIndex;
 import static com.appsmith.external.helpers.PluginUtils.getIdenticalColumns;
+import static com.appsmith.external.helpers.PluginUtils.getPSParamLabel;
 import static io.r2dbc.spi.ConnectionFactoryOptions.SSL;
 import static java.lang.Boolean.FALSE;
 import static java.lang.Boolean.TRUE;
@@ -228,8 +231,10 @@ public class MySqlPlugin extends BasePlugin {
 
             final List<Map<String, Object>> rowsList = new ArrayList<>(50);
             final List<String> columnsList = new ArrayList<>();
-            List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null
-                    , null));
+            Map<String, Object> psParams = preparedStatement ? new LinkedHashMap<>() : null;
+            String transformedQuery = preparedStatement ? replaceQuestionMarkWithDollarIndex(query) : query;
+            List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
+                    transformedQuery, null, null, psParams));
 
             Flux<Result> resultFlux = Mono.from(connection.validate(ValidationDepth.REMOTE))
                     .flatMapMany(isValid -> {
@@ -239,7 +244,8 @@ public class MySqlPlugin extends BasePlugin {
                                     preparedStatement,
                                     mustacheValuesInOrder,
                                     executeActionDTO,
-                                    requestData);
+                                    requestData,
+                                    psParams);
                         }
                         return Flux.error(new StaleConnectionException());
                     });
@@ -316,7 +322,8 @@ public class MySqlPlugin extends BasePlugin {
                                                                  Boolean preparedStatement,
                                                                  List<String> mustacheValuesInOrder,
                                                                  ExecuteActionDTO executeActionDTO,
-                                                                 Map<String, Object> requestData) {
+                                                                 Map<String, Object> requestData,
+                                                                 Map psParams) {
 
             Statement connectionStatement = connection.createStatement(query);
             if (FALSE.equals(preparedStatement) || mustacheValuesInOrder == null || mustacheValuesInOrder.isEmpty()) {
@@ -325,9 +332,7 @@ public class MySqlPlugin extends BasePlugin {
 
             System.out.println("Query : " + query);
 
-            List<Param> params = executeActionDTO.getParams();
             List<Map.Entry<String, String>> parameters = new ArrayList<>();
-
             try {
                 connectionStatement = (Statement) this.smartSubstitutionOfBindings(connectionStatement,
                         mustacheValuesInOrder,
@@ -335,6 +340,13 @@ public class MySqlPlugin extends BasePlugin {
                         parameters);
 
                 requestData.put("ps-parameters", parameters);
+
+                IntStream.range(0, parameters.size())
+                        .forEachOrdered(i ->
+                                psParams.put(
+                                        getPSParamLabel(i+1),
+                                        new PsParameterDTO(parameters.get(i).getKey(), parameters.get(i).getValue())));
+
             } catch (AppsmithPluginException e) {
                 return Flux.error(e);
             }
diff --git a/app/server/appsmith-plugins/mysqlPlugin/src/test/java/com/external/plugins/MySqlPluginTest.java b/app/server/appsmith-plugins/mysqlPlugin/src/test/java/com/external/plugins/MySqlPluginTest.java
index af5bba6b4f..45768c8808 100644
--- a/app/server/appsmith-plugins/mysqlPlugin/src/test/java/com/external/plugins/MySqlPluginTest.java
+++ b/app/server/appsmith-plugins/mysqlPlugin/src/test/java/com/external/plugins/MySqlPluginTest.java
@@ -9,6 +9,8 @@ import com.appsmith.external.models.DBAuth;
 import com.appsmith.external.models.DatasourceConfiguration;
 import com.appsmith.external.models.DatasourceStructure;
 import com.appsmith.external.models.Endpoint;
+import com.appsmith.external.models.PsParameterDTO;
+import com.appsmith.external.models.Param;
 import com.appsmith.external.models.Property;
 import com.appsmith.external.models.RequestParamDTO;
 import com.appsmith.external.models.SSLDetails;
@@ -294,7 +296,7 @@ public class MySqlPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null));
+                            actionConfiguration.getBody(), null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -398,6 +400,65 @@ public class MySqlPluginTest {
         return;
     }
 
+    @Test
+    public void testExecuteWithPreparedStatement() {
+        DatasourceConfiguration dsConfig = createDatasourceConfiguration();
+        Mono<Connection> dsConnectionMono = pluginExecutor.datasourceCreate(dsConfig);
+
+        ActionConfiguration actionConfiguration = new ActionConfiguration();
+        actionConfiguration.setBody("SELECT id FROM users WHERE id = {{binding1}};");
+
+        List<Property> pluginSpecifiedTemplates = new ArrayList<>();
+        pluginSpecifiedTemplates.add(new Property("preparedStatement", "true"));
+        actionConfiguration.setPluginSpecifiedTemplates(pluginSpecifiedTemplates);
+
+        ExecuteActionDTO executeActionDTO = new ExecuteActionDTO();
+        List<Param> params = new ArrayList<>();
+        Param param = new Param();
+        param.setKey("binding1");
+        param.setValue("1");
+        params.add(param);
+        executeActionDTO.setParams(params);
+
+        Mono<ActionExecutionResult> executeMono = dsConnectionMono
+                .flatMap(conn -> pluginExecutor.executeParameterized(conn, executeActionDTO, dsConfig, actionConfiguration));
+
+        StepVerifier.create(executeMono)
+                .assertNext(result -> {
+                    final JsonNode node = ((ArrayNode) result.getBody()).get(0);
+                    assertArrayEquals(
+                            new String[]{
+                                    "id"
+                            },
+                            new ObjectMapper()
+                                    .convertValue(node, LinkedHashMap.class)
+                                    .keySet()
+                                    .toArray()
+                    );
+
+                    /*
+                     * - Check if request params are sent back properly.
+                     * - Not replicating the same to other tests as the overall flow remains the same w.r.t. request
+                     *  params.
+                     */
+
+                    // check if '?' is replaced by $i.
+                    assertEquals("SELECT id FROM users WHERE id = $1;",
+                            ((RequestParamDTO)(((List)result.getRequest().getRequestParams())).get(0)).getValue());
+
+                    PsParameterDTO expectedPsParam = new PsParameterDTO("1", "INTEGER");
+                    PsParameterDTO returnedPsParam =
+                            (PsParameterDTO) ((RequestParamDTO) (((List) result.getRequest().getRequestParams())).get(0)).getSubstitutedParams().get("$1");
+                    // Check if prepared stmt param value is correctly sent back.
+                    assertEquals(expectedPsParam.getValue(), returnedPsParam.getValue());
+                    // check if prepared stmt param type is correctly sent back.
+                    assertEquals(expectedPsParam.getType(), returnedPsParam.getType());
+                })
+                .verifyComplete();
+
+        return;
+    }
+
     @Test
     public void testExecuteDataTypes() {
         DatasourceConfiguration dsConfig = createDatasourceConfiguration();
diff --git a/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java b/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java
index 1c7fb73d1f..823d882831 100644
--- a/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java
+++ b/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java
@@ -15,6 +15,7 @@ import com.appsmith.external.models.DatasourceConfiguration;
 import com.appsmith.external.models.DatasourceStructure;
 import com.appsmith.external.models.DatasourceTestResult;
 import com.appsmith.external.models.Endpoint;
+import com.appsmith.external.models.PsParameterDTO;
 import com.appsmith.external.models.Property;
 import com.appsmith.external.models.RequestParamDTO;
 import com.appsmith.external.models.SSLDetails;
@@ -61,11 +62,14 @@ import java.util.List;
 import java.util.Map;
 import java.util.Set;
 import java.util.stream.Collectors;
+import java.util.stream.IntStream;
 import java.util.stream.Stream;
 
 import static com.appsmith.external.constants.ActionConstants.ACTION_CONFIGURATION_BODY;
+import static com.appsmith.external.helpers.MustacheHelper.replaceQuestionMarkWithDollarIndex;
 import static com.appsmith.external.helpers.PluginUtils.getColumnsListForJdbcPlugin;
 import static com.appsmith.external.helpers.PluginUtils.getIdenticalColumns;
+import static com.appsmith.external.helpers.PluginUtils.getPSParamLabel;
 import static java.lang.Boolean.FALSE;
 import static java.lang.Boolean.TRUE;
 
@@ -212,8 +216,10 @@ public class PostgresPlugin extends BasePlugin {
             requestData.put("preparedStatement", TRUE.equals(preparedStatement) ? true : false);
 
             String query = actionConfiguration.getBody();
-            List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null
-                    , null));
+            Map<String, Object> psParams = preparedStatement ? new LinkedHashMap<>() : null;
+            String transformedQuery = preparedStatement ? replaceQuestionMarkWithDollarIndex(query) : query;
+            List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
+                    transformedQuery, null, null, psParams));
 
             return Mono.fromCallable(() -> {
 
@@ -264,6 +270,12 @@ public class PostgresPlugin extends BasePlugin {
                                 parameters,
                                 connectionFromPool);
 
+                        IntStream.range(0, parameters.size())
+                                .forEachOrdered(i ->
+                                        psParams.put(
+                                                getPSParamLabel(i+1),
+                                                new PsParameterDTO(parameters.get(i).getKey(),parameters.get(i).getValue())));
+
                         requestData.put("ps-parameters", parameters);
                         isResultSet = preparedQuery.execute();
                         resultSet = preparedQuery.getResultSet();
diff --git a/app/server/appsmith-plugins/postgresPlugin/src/test/java/com/external/plugins/PostgresPluginTest.java b/app/server/appsmith-plugins/postgresPlugin/src/test/java/com/external/plugins/PostgresPluginTest.java
index 7c95080250..7e06db46d9 100644
--- a/app/server/appsmith-plugins/postgresPlugin/src/test/java/com/external/plugins/PostgresPluginTest.java
+++ b/app/server/appsmith-plugins/postgresPlugin/src/test/java/com/external/plugins/PostgresPluginTest.java
@@ -9,6 +9,7 @@ import com.appsmith.external.models.DBAuth;
 import com.appsmith.external.models.DatasourceConfiguration;
 import com.appsmith.external.models.DatasourceStructure;
 import com.appsmith.external.models.Endpoint;
+import com.appsmith.external.models.PsParameterDTO;
 import com.appsmith.external.models.Param;
 import com.appsmith.external.models.Property;
 import com.appsmith.external.models.RequestParamDTO;
@@ -320,7 +321,7 @@ public class PostgresPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null));
+                            actionConfiguration.getBody(), null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
@@ -538,7 +539,6 @@ public class PostgresPluginTest {
                     Map.Entry<String, String> parameterEntry = parameters.get(0);
                     assertEquals(parameterEntry.getKey(), "1");
                     assertEquals(parameterEntry.getValue(), "INTEGER");
-
                 })
                 .verifyComplete();
     }
@@ -604,6 +604,23 @@ public class PostgresPluginTest {
                                     .toArray()
                     );
 
+                    /*
+                     * - Check if request params are sent back properly.
+                     * - Not replicating the same to other tests as the overall flow remainst the same w.r.t. request
+                     *  params.
+                     */
+
+                    // check if '?' is replaced by $i.
+                    assertEquals("SELECT * FROM public.\"users\" where id = $1;",
+                            ((RequestParamDTO)(((List)result.getRequest().getRequestParams())).get(0)).getValue());
+
+                    PsParameterDTO expectedPsParam = new PsParameterDTO("1", "INTEGER");
+                    PsParameterDTO returnedPsParam =
+                            (PsParameterDTO) ((RequestParamDTO) (((List) result.getRequest().getRequestParams())).get(0)).getSubstitutedParams().get("$1");
+                    // Check if prepared stmt param value is correctly sent back.
+                    assertEquals(expectedPsParam.getValue(), returnedPsParam.getValue());
+                    // check if prepared stmt param type is correctly sent back.
+                    assertEquals(expectedPsParam.getType(), returnedPsParam.getType());
                 })
                 .verifyComplete();
     }
diff --git a/app/server/appsmith-plugins/redisPlugin/src/main/java/com/external/plugins/RedisPlugin.java b/app/server/appsmith-plugins/redisPlugin/src/main/java/com/external/plugins/RedisPlugin.java
index acfc7736ea..4a5dfcd059 100644
--- a/app/server/appsmith-plugins/redisPlugin/src/main/java/com/external/plugins/RedisPlugin.java
+++ b/app/server/appsmith-plugins/redisPlugin/src/main/java/com/external/plugins/RedisPlugin.java
@@ -55,7 +55,7 @@ public class RedisPlugin extends BasePlugin {
 
             String query = actionConfiguration.getBody();
             List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null
-                    , null));
+                    , null, null));
 
             return Mono.fromCallable(() -> {
                 if (StringUtils.isNullOrEmpty(query)) {
diff --git a/app/server/appsmith-plugins/redisPlugin/src/test/java/com/external/plugins/RedisPluginTest.java b/app/server/appsmith-plugins/redisPlugin/src/test/java/com/external/plugins/RedisPluginTest.java
index fc36e69df4..72198786c1 100644
--- a/app/server/appsmith-plugins/redisPlugin/src/test/java/com/external/plugins/RedisPluginTest.java
+++ b/app/server/appsmith-plugins/redisPlugin/src/test/java/com/external/plugins/RedisPluginTest.java
@@ -232,7 +232,7 @@ public class RedisPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            getActionConfiguration.getBody(), null, null));
+                            getActionConfiguration.getBody(), null, null, null));
                     assertEquals(actionExecutionResult.getRequest().getRequestParams().toString(),
                             expectedRequestParams.toString());
                 }).verifyComplete();
diff --git a/app/server/appsmith-plugins/redshiftPlugin/src/main/java/com/external/plugins/RedshiftPlugin.java b/app/server/appsmith-plugins/redshiftPlugin/src/main/java/com/external/plugins/RedshiftPlugin.java
index 928ca4fc65..05883d7dd5 100644
--- a/app/server/appsmith-plugins/redshiftPlugin/src/main/java/com/external/plugins/RedshiftPlugin.java
+++ b/app/server/appsmith-plugins/redshiftPlugin/src/main/java/com/external/plugins/RedshiftPlugin.java
@@ -222,7 +222,7 @@ public class RedshiftPlugin extends BasePlugin {
 
             String query = actionConfiguration.getBody();
             List<RequestParamDTO> requestParams = List.of(new RequestParamDTO(ACTION_CONFIGURATION_BODY,  query, null
-                    , null));
+                    , null, null));
 
             if (query == null) {
                 return Mono.error(
diff --git a/app/server/appsmith-plugins/redshiftPlugin/src/test/java/com/external/plugins/RedshiftPluginTest.java b/app/server/appsmith-plugins/redshiftPlugin/src/test/java/com/external/plugins/RedshiftPluginTest.java
index e3098ad032..3220738872 100644
--- a/app/server/appsmith-plugins/redshiftPlugin/src/test/java/com/external/plugins/RedshiftPluginTest.java
+++ b/app/server/appsmith-plugins/redshiftPlugin/src/test/java/com/external/plugins/RedshiftPluginTest.java
@@ -281,7 +281,7 @@ public class RedshiftPluginTest {
                      */
                     List<RequestParamDTO> expectedRequestParams = new ArrayList<>();
                     expectedRequestParams.add(new RequestParamDTO(ACTION_CONFIGURATION_BODY,
-                            actionConfiguration.getBody(), null, null));
+                            actionConfiguration.getBody(), null, null, null));
                     assertEquals(result.getRequest().getRequestParams().toString(), expectedRequestParams.toString());
                 })
                 .verifyComplete();
diff --git a/app/server/appsmith-plugins/restApiPlugin/src/test/java/com/external/plugins/RestApiPluginTest.java b/app/server/appsmith-plugins/restApiPlugin/src/test/java/com/external/plugins/RestApiPluginTest.java
index 4aee6bda20..1ea8592bb1 100644
--- a/app/server/appsmith-plugins/restApiPlugin/src/test/java/com/external/plugins/RestApiPluginTest.java
+++ b/app/server/appsmith-plugins/restApiPlugin/src/test/java/com/external/plugins/RestApiPluginTest.java
@@ -378,7 +378,8 @@ public class RestApiPluginTest {
 
                     // Assert the debug request parameters are getting set.
                     ActionExecutionRequest request = result.getRequest();
-                    List<Map.Entry<String, String>> parameters = (List<Map.Entry<String, String>>) request.getProperties().get("smart-substitution-parameters");
+                    List<Map.Entry<String, String>> parameters =
+                            (List<Map.Entry<String, String>>) request.getProperties().get("smart-substitution-parameters");
                     assertEquals(parameters.size(), 7);
 
                     Map.Entry<String, String> parameterEntry = parameters.get(0);
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
index 5a8af359b2..6712b5e93b 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/NewActionServiceImpl.java
@@ -60,6 +60,7 @@ import java.time.Instant;
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.HashSet;
+import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
@@ -655,22 +656,24 @@ public class NewActionServiceImpl extends BaseService<NewActionRepository, NewAc
                 .map(result -> addDataTypes(result));
     }
 
-    // Add label and data types to request param entities.
+    /*
+     * - Get label for request params.
+     * - Transform request params list: [""] to a map: {"label": {"value": ...}}
+     * - Rearrange request params in the order as they appear in query editor form.
+     */
     private void transformRequestParams(ActionExecutionResult result, Map<String, String> labelMap) {
-        List<RequestParamDTO> transformedParams = new ArrayList<>();
+        Map<String, Object> transformedParams = new LinkedHashMap<>();
         Map<String, RequestParamDTO> requestParamsConfigMap = new HashMap();
-        result.getRequest().getRequestParams().stream()
-                .forEach(param -> requestParamsConfigMap.put(param.getConfigProperty(), param));
+        ((List)result.getRequest().getRequestParams()).stream()
+                .forEach(param -> requestParamsConfigMap.put(((RequestParamDTO) param).getConfigProperty(),
+                        (RequestParamDTO) param));
 
         labelMap.entrySet().stream()
                 .forEach(e -> {
                     String configProperty = e.getKey();
                     if(requestParamsConfigMap.containsKey(configProperty)) {
                         RequestParamDTO param = requestParamsConfigMap.get(configProperty);
-                        param.setTypes(param.getValue() != null ?
-                                getDisplayDataTypes(param.getValue()) : new ArrayList<>());
-                        param.setLabel(e.getValue());
-                        transformedParams.add(param);
+                        transformedParams.put(e.getValue(), param);
                     }
                 });
 

From 21948ab254a68f561312bffe25e7272790d933d1 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumit@appsmith.com>
Date: Mon, 17 May 2021 11:19:19 +0530
Subject: [PATCH 63/76] Fix: postgres plugin: add support for jsonb type
 (#4519)

* add support for jsonb type
---
 .../com/external/plugins/PostgresPlugin.java  | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java b/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java
index 823d882831..bab35287cd 100644
--- a/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java
+++ b/app/server/appsmith-plugins/postgresPlugin/src/main/java/com/external/plugins/PostgresPlugin.java
@@ -77,10 +77,20 @@ public class PostgresPlugin extends BasePlugin {
 
     static final String JDBC_DRIVER = "org.postgresql.Driver";
 
-    private static final String SSL = "useSSL";
-
     private static final String DATE_COLUMN_TYPE_NAME = "date";
 
+    private static final String TIMESTAMP_TYPE_NAME = "timestamp";
+
+    private static final String TIMESTAMPTZ_TYPE_NAME = "timestamptz";
+
+    private static final String TIME_TYPE_NAME = "time";
+
+    private static final String TIMETZ_TYPE_NAME = "timetz";
+
+    private static final String INTERVAL_TYPE_NAME = "interval";
+
+    private static final String JSONB_TYPE_NAME = "jsonb";
+
     private static final int MINIMUM_POOL_SIZE = 1;
 
     private static final int MAXIMUM_POOL_SIZE = 5;
@@ -310,7 +320,7 @@ public class PostgresPlugin extends BasePlugin {
                                 } else if (DATE_COLUMN_TYPE_NAME.equalsIgnoreCase(typeName)) {
                                     value = DateTimeFormatter.ISO_DATE.format(resultSet.getDate(i).toLocalDate());
 
-                                } else if ("timestamp".equalsIgnoreCase(typeName)) {
+                                } else if (TIMESTAMP_TYPE_NAME.equalsIgnoreCase(typeName)) {
                                     value = DateTimeFormatter.ISO_DATE_TIME.format(
                                             LocalDateTime.of(
                                                     resultSet.getDate(i).toLocalDate(),
@@ -318,23 +328,25 @@ public class PostgresPlugin extends BasePlugin {
                                             )
                                     ) + "Z";
 
-                                } else if ("timestamptz".equalsIgnoreCase(typeName)) {
+                                } else if (TIMESTAMPTZ_TYPE_NAME.equalsIgnoreCase(typeName)) {
                                     value = DateTimeFormatter.ISO_DATE_TIME.format(
                                             resultSet.getObject(i, OffsetDateTime.class)
                                     );
 
-                                } else if ("time".equalsIgnoreCase(typeName) || "timetz".equalsIgnoreCase(typeName)) {
+                                } else if (TIME_TYPE_NAME.equalsIgnoreCase(typeName) || TIMETZ_TYPE_NAME.equalsIgnoreCase(typeName)) {
                                     value = resultSet.getString(i);
 
-                                } else if ("interval".equalsIgnoreCase(typeName)) {
+                                } else if (INTERVAL_TYPE_NAME.equalsIgnoreCase(typeName)) {
                                     value = resultSet.getObject(i).toString();
 
                                 } else if (typeName.startsWith("_")) {
                                     value = resultSet.getArray(i).getArray();
 
+                                } else if (JSONB_TYPE_NAME.equalsIgnoreCase(typeName)) {
+                                    value = resultSet.getString(i);
+
                                 } else {
                                     value = resultSet.getObject(i);
-
                                 }
 
                                 row.put(metaData.getColumnName(i), value);

From 95a385dad773cf80ff89c65276e973d177c15762 Mon Sep 17 00:00:00 2001
From: Shrikant Sharat Kandula <shrikant@appsmith.com>
Date: Mon, 17 May 2021 12:01:09 +0530
Subject: [PATCH 64/76] Update names in comments when user name is changed
 (#4466)

* Update names in comments when changed

* Move database operation to repository class
---
 .../server/events/UserChangedEvent.java       | 13 +++++
 .../repositories/CustomCommentRepository.java |  2 +
 .../CustomCommentRepositoryImpl.java          | 11 ++++
 .../server/services/CommentServiceImpl.java   | 20 ++++++--
 .../server/services/UserServiceImpl.java      | 14 ++++--
 .../server/solutions/UserChangedHandler.java  | 50 +++++++++++++++++++
 6 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 app/server/appsmith-server/src/main/java/com/appsmith/server/events/UserChangedEvent.java
 create mode 100644 app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserChangedHandler.java

diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/events/UserChangedEvent.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/events/UserChangedEvent.java
new file mode 100644
index 0000000000..ea6c2a0bec
--- /dev/null
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/events/UserChangedEvent.java
@@ -0,0 +1,13 @@
+package com.appsmith.server.events;
+
+import com.appsmith.server.domains.User;
+import lombok.Data;
+import lombok.RequiredArgsConstructor;
+
+@Data
+@RequiredArgsConstructor
+public class UserChangedEvent {
+
+    private final User user;
+
+}
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java
index 38ce4c6d4d..e071c9ae9e 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepository.java
@@ -10,4 +10,6 @@ public interface CustomCommentRepository extends AppsmithRepository<Comment> {
 
     Mono<UpdateResult> deleteReaction(String commentId, Comment.Reaction reaction);
 
+    Mono<Void> updateAuthorNames(String authorId, String authorName);
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java
index 78d187bd26..a8bfd5cbfa 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/repositories/CustomCommentRepositoryImpl.java
@@ -61,4 +61,15 @@ public class CustomCommentRepositoryImpl extends BaseAppsmithRepositoryImpl<Comm
         );
     }
 
+    @Override
+    public Mono<Void> updateAuthorNames(String authorId, String authorName) {
+        return mongoOperations
+                .updateMulti(
+                        Query.query(Criteria.where("authorId").is(authorId)),
+                        Update.update("authorName", authorName),
+                        Comment.class
+                )
+                .then();
+    }
+
 }
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java
index 432f0c84b1..8d5678fee2 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/CommentServiceImpl.java
@@ -42,6 +42,7 @@ public class CommentServiceImpl extends BaseService<CommentRepository, Comment,
 
     private final CommentThreadRepository threadRepository;
 
+    private final UserService userService;
     private final SessionUserService sessionUserService;
     private final ApplicationService applicationService;
 
@@ -56,6 +57,7 @@ public class CommentServiceImpl extends BaseService<CommentRepository, Comment,
             CommentRepository repository,
             AnalyticsService analyticsService,
             CommentThreadRepository threadRepository,
+            UserService userService,
             SessionUserService sessionUserService,
             ApplicationService applicationService,
             PolicyGenerator policyGenerator,
@@ -63,6 +65,7 @@ public class CommentServiceImpl extends BaseService<CommentRepository, Comment,
     ) {
         super(scheduler, validator, mongoConverter, reactiveMongoTemplate, repository, analyticsService);
         this.threadRepository = threadRepository;
+        this.userService = userService;
         this.sessionUserService = sessionUserService;
         this.applicationService = applicationService;
         this.policyGenerator = policyGenerator;
@@ -76,15 +79,24 @@ public class CommentServiceImpl extends BaseService<CommentRepository, Comment,
             return Mono.empty();
         }
 
-        return Mono.zip(
-                sessionUserService.getCurrentUser(),
-                threadRepository.findById(threadId, AclPermission.COMMENT_ON_THREAD)
-        )
+        final Mono<User> userMono = sessionUserService.getCurrentUser()
+                .flatMap(user -> {
+                    if (user.getId() == null) {
+                        return userService.findByEmail(user.getEmail());
+                    } else {
+                        return Mono.just(user);
+                    }
+                });
+
+        final Mono<CommentThread> threadMono = threadRepository.findById(threadId, AclPermission.COMMENT_ON_THREAD);
+
+        return Mono.zip(userMono, threadMono)
                 .switchIfEmpty(Mono.error(new AppsmithException(AppsmithError.ACL_NO_RESOURCE_FOUND, "comment thread", threadId)))
                 .flatMap(tuple -> {
                     final User user = tuple.getT1();
                     final CommentThread thread = tuple.getT2();
 
+                    comment.setAuthorId(user.getId());
                     comment.setThreadId(threadId);
 
                     final Set<Policy> policies = policyGenerator.getAllChildPolicies(
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserServiceImpl.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserServiceImpl.java
index 31c51aeb28..34c5fdab4c 100644
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserServiceImpl.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/services/UserServiceImpl.java
@@ -26,6 +26,7 @@ import com.appsmith.server.repositories.ApplicationRepository;
 import com.appsmith.server.repositories.OrganizationRepository;
 import com.appsmith.server.repositories.PasswordResetTokenRepository;
 import com.appsmith.server.repositories.UserRepository;
+import com.appsmith.server.solutions.UserChangedHandler;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.mongodb.core.ReactiveMongoTemplate;
@@ -76,6 +77,7 @@ public class UserServiceImpl extends BaseService<UserRepository, User, String> i
     private final ConfigService configService;
     private final CommonConfig commonConfig;
     private final EmailConfig emailConfig;
+    private final UserChangedHandler userChangedHandler;
 
     private static final String WELCOME_USER_EMAIL_TEMPLATE = "email/welcomeUserTemplate.html";
     private static final String FORGOT_PASSWORD_EMAIL_TEMPLATE = "email/forgotPasswordTemplate.html";
@@ -105,7 +107,8 @@ public class UserServiceImpl extends BaseService<UserRepository, User, String> i
                            RoleGraph roleGraph,
                            ConfigService configService,
                            CommonConfig commonConfig,
-                           EmailConfig emailConfig) {
+                           EmailConfig emailConfig,
+                           UserChangedHandler userChangedHandler) {
         super(scheduler, validator, mongoConverter, reactiveMongoTemplate, repository, analyticsService);
         this.organizationService = organizationService;
         this.sessionUserService = sessionUserService;
@@ -120,6 +123,7 @@ public class UserServiceImpl extends BaseService<UserRepository, User, String> i
         this.configService = configService;
         this.commonConfig = commonConfig;
         this.emailConfig = emailConfig;
+        this.userChangedHandler = userChangedHandler;
     }
 
     @Override
@@ -527,7 +531,8 @@ public class UserServiceImpl extends BaseService<UserRepository, User, String> i
                     BeanCopyUtils.copyNewFieldValuesIntoOldObject(userUpdate, existingUser);
                     return existingUser;
                 })
-                .flatMap(repository::save);
+                .flatMap(repository::save)
+                .map(userChangedHandler::publish);
     }
 
     /**
@@ -751,11 +756,12 @@ public class UserServiceImpl extends BaseService<UserRepository, User, String> i
 
         return sessionUserService.getCurrentUser()
                 .flatMap(user ->
-                        update(user.getEmail(), allUpdates, fieldName(QUser.user.email))
+                        update(user.getEmail(), allowedUpdates, fieldName(QUser.user.email))
                                 .then(exchange == null
                                         ? repository.findByEmail(user.getEmail())
                                         : sessionUserService.refreshCurrentUser(exchange))
-                );
+                )
+                .map(userChangedHandler::publish);
     }
 
     public Map<String, String> getEmailParams(Organization organization, User inviter, String inviteUrl, boolean isNewUser) {
diff --git a/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserChangedHandler.java b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserChangedHandler.java
new file mode 100644
index 0000000000..921580c22e
--- /dev/null
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/solutions/UserChangedHandler.java
@@ -0,0 +1,50 @@
+package com.appsmith.server.solutions;
+
+import com.appsmith.server.domains.User;
+import com.appsmith.server.events.UserChangedEvent;
+import com.appsmith.server.repositories.CommentRepository;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.context.ApplicationEventPublisher;
+import org.springframework.context.event.EventListener;
+import org.springframework.scheduling.annotation.Async;
+import org.springframework.stereotype.Component;
+import reactor.core.publisher.Mono;
+import reactor.core.scheduler.Schedulers;
+
+@Component
+@RequiredArgsConstructor
+@Slf4j
+public class UserChangedHandler {
+
+    private final ApplicationEventPublisher applicationEventPublisher;
+
+    private final CommentRepository commentRepository;
+
+    public User publish(User user) {
+        applicationEventPublisher.publishEvent(new UserChangedEvent(user));
+        return user;
+    }
+
+    @Async
+    @EventListener
+    public void handle(UserChangedEvent event) {
+        // The `user` object is expected to contain the NEW name.
+        final User user = event.getUser();
+        log.debug("Handling user document changes {}", user);
+        updateNameInComments(user)
+                .subscribeOn(Schedulers.elastic())
+                .subscribe();
+    }
+
+    private Mono<Void> updateNameInComments(User user) {
+        if (user.getId() == null) {
+            log.warn("Attempt to update name in comments for user with null ID.");
+            return Mono.empty();
+        }
+
+        log.debug("Updating name in comments for user {}", user.getId());
+        return commentRepository.updateAuthorNames(user.getId(), user.getName());
+    }
+
+}

From e4ee2b07c9010a640ad1e852d625d58d89a178c6 Mon Sep 17 00:00:00 2001
From: Apeksha Bhosale <7846888+ApekshaBhosale@users.noreply.github.com>
Date: Mon, 17 May 2021 12:51:48 +0530
Subject: [PATCH 65/76] r.match on API pane error (#4497)

* r.match on API pane error

* Pr comment fixed
---
 app/client/src/sagas/ApiPaneSagas.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index 793f3b4a94..b934608c32 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -1,7 +1,10 @@
 /**
  * Handles the Api pane ui state. It looks into the routing based on actions too
  * */
-import { get, omit, cloneDeep } from "lodash";
+import get from "lodash/get";
+import isObject from "lodash/isObject";
+import omit from "lodash/omit";
+import cloneDeep from "lodash/cloneDeep";
 import { all, select, put, takeEvery, call, take } from "redux-saga/effects";
 import * as Sentry from "@sentry/react";
 import {
@@ -76,6 +79,9 @@ function* syncApiParamsSaga(
   //Payload here contains the path and query params of a typical url like https://{domain}/{path}?{query_params}
   let value = actionPayload.payload;
   // Regular expression to find the query params group
+  if (isObject(value)) {
+    value = get(value, "datasourceConfiguration.url", "");
+  }
   const queryParamsRegEx = /(\/[\s\S]*?)(\?(?![^{]*})[\s\S]*)?$/;
   value = (value.match(queryParamsRegEx) || [])[2] || "";
   const padQueryParams = { key: "", value: "" };

From cbace9d5d78e2caa1944b1f8a143def9d2332ee4 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Mon, 17 May 2021 15:31:22 +0530
Subject: [PATCH 66/76] Fix: Debugger showing previous application logs (#4455)

---
 .../ClientSideTests/Debugger/Logs_spec.js        | 16 ++++++++++++++++
 app/client/cypress/locators/Debugger.json        |  3 +++
 app/client/src/actions/debuggerActions.ts        |  4 ++++
 .../src/constants/ReduxActionConstants.tsx       |  1 +
 .../src/reducers/uiReducers/debuggerReducer.ts   |  5 +++++
 app/client/src/sagas/InitSagas.ts                |  2 ++
 6 files changed, 31 insertions(+)
 create mode 100644 app/client/cypress/locators/Debugger.json

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js
index e884caf535..992fe23a68 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js
@@ -1,4 +1,6 @@
 const dsl = require("../../../../fixtures/buttondsl.json");
+const commonlocators = require("../../../../locators/commonlocators.json");
+const debuggerLocators = require("../../../../locators/Debugger.json");
 
 describe("Debugger logs", function() {
   before(() => {
@@ -11,4 +13,18 @@ describe("Debugger logs", function() {
     cy.get(".t--debugger").click();
     cy.get(".t--debugger-log-state").contains("Test");
   });
+
+  it("Reset debugger state", function() {
+    cy.get(".t--property-control-visible")
+      .find(".t--js-toggle")
+      .click();
+    cy.testJsontext("visible", "Test");
+
+    cy.get(commonlocators.homeIcon).click({ force: true });
+    cy.generateUUID().then((id) => {
+      cy.CreateAppInFirstListedOrg(id);
+
+      cy.contains(debuggerLocators.debuggerIcon, 0);
+    });
+  });
 });
diff --git a/app/client/cypress/locators/Debugger.json b/app/client/cypress/locators/Debugger.json
new file mode 100644
index 0000000000..f2186aa053
--- /dev/null
+++ b/app/client/cypress/locators/Debugger.json
@@ -0,0 +1,3 @@
+{
+    "debuggerIcon": ".t--debugger"
+}
\ No newline at end of file
diff --git a/app/client/src/actions/debuggerActions.ts b/app/client/src/actions/debuggerActions.ts
index a0ca54e4a7..a44558e514 100644
--- a/app/client/src/actions/debuggerActions.ts
+++ b/app/client/src/actions/debuggerActions.ts
@@ -29,3 +29,7 @@ export const updateErrorLog = (payload: Message) => ({
   type: ReduxActionTypes.DEBUGGER_UPDATE_ERROR_LOG,
   payload,
 });
+
+export const resetDebuggerState = () => ({
+  type: ReduxActionTypes.RESET_DEBUGGER_STATE,
+});
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
index 9fc10fd0c2..0d02d16487 100644
--- a/app/client/src/constants/ReduxActionConstants.tsx
+++ b/app/client/src/constants/ReduxActionConstants.tsx
@@ -76,6 +76,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   DEBUGGER_UPDATE_ERROR_LOG: "DEBUGGER_UPDATE_ERROR_LOG",
   DEBUGGER_UPDATE_ERROR_LOGS: "DEBUGGER_UPDATE_ERROR_LOGS",
   CLEAR_DEBUGGER_LOGS: "CLEAR_DEBUGGER_LOGS",
+  RESET_DEBUGGER_STATE: "RESET_DEBUGGER_STATE",
   SHOW_DEBUGGER: "SHOW_DEBUGGER",
   SET_THEME: "SET_THEME",
   FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
diff --git a/app/client/src/reducers/uiReducers/debuggerReducer.ts b/app/client/src/reducers/uiReducers/debuggerReducer.ts
index 4ad5fa9126..ea8901f307 100644
--- a/app/client/src/reducers/uiReducers/debuggerReducer.ts
+++ b/app/client/src/reducers/uiReducers/debuggerReducer.ts
@@ -105,6 +105,11 @@ const debuggerReducer = createReducer(initialState, {
       errors: { ...action.payload },
     };
   },
+  [ReduxActionTypes.RESET_DEBUGGER_STATE]: () => {
+    return {
+      ...initialState,
+    };
+  },
 });
 
 export interface DebuggerReduxState {
diff --git a/app/client/src/sagas/InitSagas.ts b/app/client/src/sagas/InitSagas.ts
index b062e74110..7a3665cb31 100644
--- a/app/client/src/sagas/InitSagas.ts
+++ b/app/client/src/sagas/InitSagas.ts
@@ -46,6 +46,7 @@ import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
 import { executePageLoadActions } from "actions/widgetActions";
+import { resetDebuggerState } from "actions/debuggerActions";
 
 function* failFastApiCalls(
   triggerActions: Array<ReduxAction<unknown> | ReduxActionWithoutPayload>,
@@ -267,6 +268,7 @@ export function* initializeAppViewerSaga(
 function* resetEditorSaga() {
   yield put(resetEditorSuccess());
   yield put(resetRecentEntities());
+  yield put(resetDebuggerState());
 }
 
 export default function* watchInitSagas() {

From 7df8581a5fa2b567c3ca10124a69373a36c45ca3 Mon Sep 17 00:00:00 2001
From: Sumit Kumar <sumit@appsmith.com>
Date: Mon, 17 May 2021 18:42:54 +0530
Subject: [PATCH 67/76] change java version to 11.0.10 to allow TLSv1 for mysql
 (#4528)

* Change docker image java version to 11.0.10 to allow TLSv1 for mysql.
---
 app/server/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/server/Dockerfile b/app/server/Dockerfile
index b193784132..25bda26541 100644
--- a/app/server/Dockerfile
+++ b/app/server/Dockerfile
@@ -1,6 +1,6 @@
 #When you are building, name it appsmith-server which is how it is referenced in docker-compose.yml
 
-FROM adoptopenjdk/openjdk11:alpine-jre
+FROM adoptopenjdk/openjdk11:jre-11.0.10_9-alpine
 
 LABEL maintainer="tech@appsmith.com"
 

From 5abd651e25d0661d24cd5799bc323d23892c8c7a Mon Sep 17 00:00:00 2001
From: Apple <nandan@thinkify.io>
Date: Mon, 17 May 2021 21:36:46 +0530
Subject: [PATCH 68/76] updated test

---
 .../ClientSideTests/FormWidgets/DatePicker_2_spec.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_2_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_2_spec.js
index 1f8676f85c..9938981e83 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_2_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/DatePicker_2_spec.js
@@ -74,9 +74,9 @@ describe("DatePicker Widget Property pane tests with js bindings", function() {
     cy.get(".t--property-control-defaultdate .bp3-input").type("2020-02-01");
     cy.closePropertyPane();
     cy.openPropertyPane("datepickerwidget2");
-    cy.get(formWidgetsPage.toggleJsMinDate).click();
+    cy.get(formWidgetsPage.toggleJsMinDate).click({ force: true });
     cy.get(".t--property-control-mindate .bp3-input").type("2020-01-01");
-    cy.get(formWidgetsPage.toggleJsMaxDate).click();
+    cy.get(formWidgetsPage.toggleJsMaxDate).click({ force: true });
     cy.get(".t--property-control-maxdate .bp3-input").type("2020-02-10");
     cy.closePropertyPane();
   });

From 1e052a9462a6121ed3c88e8d9639439c080e954a Mon Sep 17 00:00:00 2001
From: Shrikant Sharat Kandula <shrikant@appsmith.com>
Date: Tue, 18 May 2021 11:22:54 +0530
Subject: [PATCH 69/76] Fix redirectUrl not being encoded (#4546)

---
 app/client/src/api/ApiUtils.ts                   | 2 +-
 app/client/src/pages/UserAuth/Login.tsx          | 8 +++++---
 app/client/src/pages/UserAuth/SignUp.tsx         | 7 +++++--
 app/client/src/pages/UserAuth/ThirdPartyAuth.tsx | 5 +++--
 app/client/src/pages/common/ErrorPageHeader.tsx  | 5 +++--
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/client/src/api/ApiUtils.ts b/app/client/src/api/ApiUtils.ts
index 2da9b22cf9..c6d0c24656 100644
--- a/app/client/src/api/ApiUtils.ts
+++ b/app/client/src/api/ApiUtils.ts
@@ -102,7 +102,7 @@ export const apiFailureResponseInterceptor = (error: any) => {
         // Redirect to login and set a redirect url.
         history.replace({
           pathname: AUTH_LOGIN_URL,
-          search: `redirectUrl=${currentUrl}`,
+          search: `redirectUrl=${encodeURIComponent(currentUrl)}`,
         });
         return Promise.reject({
           code: ERROR_CODES.REQUEST_NOT_AUTHORISED,
diff --git a/app/client/src/pages/UserAuth/Login.tsx b/app/client/src/pages/UserAuth/Login.tsx
index e3f311da21..600142955a 100644
--- a/app/client/src/pages/UserAuth/Login.tsx
+++ b/app/client/src/pages/UserAuth/Login.tsx
@@ -97,9 +97,11 @@ export function Login(props: LoginFormProps) {
 
   let loginURL = "/api/v1/" + LOGIN_SUBMIT_PATH;
   let signupURL = SIGN_UP_URL;
-  if (queryParams.has("redirectUrl")) {
-    loginURL += `?redirectUrl=${queryParams.get("redirectUrl")}`;
-    signupURL += `?redirectUrl=${queryParams.get("redirectUrl")}`;
+  const redirectUrl = queryParams.get("redirectUrl");
+  if (redirectUrl != null) {
+    const encodedRedirectUrl = encodeURIComponent(redirectUrl);
+    loginURL += `?redirectUrl=${encodedRedirectUrl}`;
+    signupURL += `?redirectUrl=${encodedRedirectUrl}`;
   }
 
   let forgotPasswordURL = `${FORGOT_PASSWORD_URL}`;
diff --git a/app/client/src/pages/UserAuth/SignUp.tsx b/app/client/src/pages/UserAuth/SignUp.tsx
index c27b3aeb14..97604e2671 100644
--- a/app/client/src/pages/UserAuth/SignUp.tsx
+++ b/app/client/src/pages/UserAuth/SignUp.tsx
@@ -93,8 +93,11 @@ export function SignUp(props: SignUpFormProps) {
   let signupURL = "/api/v1/" + SIGNUP_SUBMIT_PATH;
   if (queryParams.has("appId")) {
     signupURL += `?appId=${queryParams.get("appId")}`;
-  } else if (queryParams.has("redirectUrl")) {
-    signupURL += `?redirectUrl=${queryParams.get("redirectUrl")}`;
+  } else {
+    const redirectUrl = queryParams.get("redirectUrl");
+    if (redirectUrl != null) {
+      signupURL += `?redirectUrl=${encodeURIComponent(redirectUrl)}`;
+    }
   }
 
   return (
diff --git a/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx b/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
index 8c6d2af3a5..44dbf87e7f 100644
--- a/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
+++ b/app/client/src/pages/UserAuth/ThirdPartyAuth.tsx
@@ -68,8 +68,9 @@ function SocialLoginButton(props: {
   const initiateOnboarding = useIntiateOnboarding();
   const queryParams = new URLSearchParams(location.search);
   let url = props.url;
-  if (queryParams.has("redirectUrl")) {
-    url += `?redirectUrl=${queryParams.get("redirectUrl")}`;
+  const redirectUrl = queryParams.get("redirectUrl");
+  if (redirectUrl != null) {
+    url += `?redirectUrl=${encodeURIComponent(redirectUrl)}`;
   }
   return (
     <StyledSocialLoginButton
diff --git a/app/client/src/pages/common/ErrorPageHeader.tsx b/app/client/src/pages/common/ErrorPageHeader.tsx
index fc6d375623..91894a23d0 100644
--- a/app/client/src/pages/common/ErrorPageHeader.tsx
+++ b/app/client/src/pages/common/ErrorPageHeader.tsx
@@ -49,8 +49,9 @@ export function ErrorPageHeader(props: ErrorPageHeaderProps) {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   let loginUrl = AUTH_LOGIN_URL;
-  if (queryParams.has("redirectUrl")) {
-    loginUrl += `?redirectUrl=${queryParams.get("redirectUrl")}`;
+  const redirectUrl = queryParams.get("redirectUrl");
+  if (redirectUrl != null) {
+    loginUrl += `?redirectUrl=${encodeURIComponent(redirectUrl)}`;
   }
 
   return (

From 08966499bed5f476bcf3c26974565ae4a4539d9d Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Tue, 18 May 2021 17:17:22 +0530
Subject: [PATCH 70/76] Remove request/response data from copies of an executed
 API (#4521)

---
 app/client/src/reducers/entityReducers/actionsReducer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/client/src/reducers/entityReducers/actionsReducer.tsx b/app/client/src/reducers/entityReducers/actionsReducer.tsx
index 187f55d40d..01b84929b1 100644
--- a/app/client/src/reducers/entityReducers/actionsReducer.tsx
+++ b/app/client/src/reducers/entityReducers/actionsReducer.tsx
@@ -303,6 +303,7 @@ const actionsReducer = createReducer(initialState, {
         .filter((a) => a.config.id === action.payload.id)
         .map((a) => ({
           ...a,
+          data: undefined,
           config: {
             ...a.config,
             id: "TEMP_COPY_ID",

From 4733edfccd03f7cbf8c8aa4d486103803c84959b Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Tue, 18 May 2021 17:17:43 +0530
Subject: [PATCH 71/76] Fixed query params parsing in API pane (#4482)

* Fixed query params parsing when there are mulitple "="s.

* Added cypress tests to validate query params parsing
---
 app/client/cypress/fixtures/testdata.json            |  3 ++-
 .../ClientSideTests/ApiPaneTests/API_Edit_spec.js    | 12 ++++++++++++
 app/client/cypress/locators/apiWidgetslocator.json   |  5 ++++-
 app/client/cypress/support/commands.js               |  8 ++++++++
 app/client/src/sagas/ApiPaneSagas.ts                 |  6 +++++-
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/fixtures/testdata.json b/app/client/cypress/fixtures/testdata.json
index 61d619d292..cc934021ca 100644
--- a/app/client/cypress/fixtures/testdata.json
+++ b/app/client/cypress/fixtures/testdata.json
@@ -122,5 +122,6 @@
   "accessTokenUrl": "https://oauth.mocklab.io/oauth/token",
   "oauthResponse": "169444434892406",
   "authorizationURL": "https://oauth.mocklab.io/oauth/authorize",
-  "basicURl": "https://envyenksqii9nf3.m.pipedream.net"
+  "basicURl": "https://envyenksqii9nf3.m.pipedream.net",
+  "methodWithQueryParam": "users?q=mimeType='application/vnd.google-apps.spreadsheet'"
 }
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js
index d46a3b1ec0..918c4592da 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js
@@ -39,4 +39,16 @@ describe("API Panel Test Functionality", function() {
     cy.xpath(apiwidget.headerKey).should("be.visible");
     cy.xpath(apiwidget.headerKey).should("have.value", "");
   });
+
+  it("Should correctly parse query params", function() {
+    cy.NavigateToAPI_Panel();
+    cy.CreateAPI("APIWithQueryParams");
+    cy.get("textarea").should(
+      "have.attr",
+      "placeholder",
+      "https://mock-api.appsmith.com/users",
+    );
+    cy.enterDatasourceAndPath(testdata.baseUrl, testdata.methodWithQueryParam);
+    cy.ValidateQueryParams({ key: "q", value:"mimeType='application/vnd.google-apps.spreadsheet'" });
+  });
 });
diff --git a/app/client/cypress/locators/apiWidgetslocator.json b/app/client/cypress/locators/apiWidgetslocator.json
index 2727f72efe..9bdb4100dd 100644
--- a/app/client/cypress/locators/apiWidgetslocator.json
+++ b/app/client/cypress/locators/apiWidgetslocator.json
@@ -52,5 +52,8 @@
   "actionlist": ".action div div",
   "settings": "li:contains('Settings')",
   "onPageLoad": "[data-cy=executeOnLoad]",
-  "renameEntity": ".single-select >div:contains('Edit Name')"
+  "renameEntity": ".single-select >div:contains('Edit Name')",
+  "paramsTab": "//li//span[text()='Params']",
+  "paramKey": "(//div[contains(@class,'t--actionConfiguration.queryParameters[0].key.0')]//textarea)[1]",
+  "paramValue": "(//div[contains(@class,'t--actionConfiguration.queryParameters[0].value.0')]//textarea)[1]"
 }
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 1054ea3767..3bd45b491d 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -2342,3 +2342,11 @@ Cypress.Commands.add("callApi", (apiname) => {
 Cypress.Commands.add("assertPageSave", () => {
   cy.get(commonlocators.saveStatusSuccess);
 });
+
+Cypress.Commands.add("ValidateQueryParams", (param) => {
+  cy.xpath(apiwidget.paramsTab)
+      .should("be.visible")
+      .click({ force: true });
+  cy.xpath(apiwidget.paramKey).first().contains(param.key);
+  cy.xpath(apiwidget.paramValue).first().contains(param.value);
+});
diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index 8b2f7bd0db..8ea71706e0 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -90,7 +90,11 @@ function* syncApiParamsSaga(
     if (value.indexOf("?") > -1) {
       const paramsString = value.substr(value.indexOf("?") + 1);
       const params = paramsString.split("&").map((p) => {
-        const keyValue = p.split("=");
+        const firstEqualPos = p.indexOf("=");
+        const keyValue =
+          firstEqualPos > -1
+            ? [p.substring(0, firstEqualPos), p.substring(firstEqualPos + 1)]
+            : [];
         return { key: keyValue[0], value: keyValue[1] || "" };
       });
       if (params.length < 2) {

From 51b98eed2f59521fa85eccca4e162a0ae710ce4e Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Tue, 18 May 2021 17:21:32 +0530
Subject: [PATCH 72/76] Fix: Debugger shows errors for evaluations done on page
 load (#4552)

---
 .../cypress/fixtures/debuggerTableDsl.json    | 42 +++++++++++++++++
 .../Debugger/PageOnLoad_spec.js               | 23 +++++++++
 app/client/src/actions/actionActions.ts       |  6 +++
 .../src/constants/ReduxActionConstants.tsx    |  1 +
 app/client/src/sagas/ActionExecutionSagas.ts  |  3 ++
 app/client/src/sagas/DebuggerSagas.ts         | 47 +++++++++++++++++--
 6 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 app/client/cypress/fixtures/debuggerTableDsl.json
 create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js

diff --git a/app/client/cypress/fixtures/debuggerTableDsl.json b/app/client/cypress/fixtures/debuggerTableDsl.json
new file mode 100644
index 0000000000..afaed3b2cf
--- /dev/null
+++ b/app/client/cypress/fixtures/debuggerTableDsl.json
@@ -0,0 +1,42 @@
+{
+    "dsl": {
+      "widgetName": "MainContainer",
+      "backgroundColor": "none",
+      "rightColumn": 1224,
+      "snapColumns": 16,
+      "detachFromLayout": true,
+      "widgetId": "0",
+      "topRow": 0,
+      "bottomRow": 1280,
+      "containerStyle": "none",
+      "snapRows": 33,
+      "parentRowSpace": 1,
+      "type": "CANVAS_WIDGET",
+      "canExtend": true,
+      "version": 9,
+      "minHeight": 1292,
+      "parentColumnSpace": 1,
+      "dynamicBindingPathList": [],
+      "leftColumn": 0,
+      "children": [
+        {
+          "isVisible": true,
+          "label": "Data",
+          "widgetName": "Table1",
+          "searchKey": "",
+          "tableData": "{{TestApi.data.users}}",
+          "type": "TABLE_WIDGET",
+          "isLoading": false,
+          "parentColumnSpace": 74,
+          "parentRowSpace": 40,
+          "leftColumn": 1,
+          "rightColumn": 9,
+          "topRow": 7,
+          "bottomRow": 14,
+          "parentId": "0",
+          "widgetId": "7miqot30xy",
+          "dynamicBindingPathList": []
+        }
+      ]
+    }
+  }
\ No newline at end of file
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js
new file mode 100644
index 0000000000..2fd3a73d96
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/PageOnLoad_spec.js
@@ -0,0 +1,23 @@
+const dsl = require("../../../../fixtures/debuggerTableDsl.json");
+const explorer = require("../../../../locators/explorerlocators.json");
+const debuggerLocators = require("../../../../locators/Debugger.json");
+const testdata = require("../../../../fixtures/testdata.json");
+
+describe("Check debugger logs state when there are onPageLoad actions", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
+  it("Check debugger logs state when there are onPageLoad actions", function() {
+    cy.openPropertyPane("tablewidget");
+    cy.testJsontext("tabledata", "{{TestApi.data.users}}");
+    cy.NavigateToAPI_Panel();
+    cy.CreateAPI("TestApi");
+    cy.enterDatasourceAndPath(testdata.baseUrl, testdata.methods);
+    cy.SaveAndRunAPI();
+
+    cy.get(explorer.addWidget).click();
+
+    cy.reload();
+    cy.contains(debuggerLocators.debuggerIcon, 0);
+  });
+});
diff --git a/app/client/src/actions/actionActions.ts b/app/client/src/actions/actionActions.ts
index 673f0b1282..3e79882a47 100644
--- a/app/client/src/actions/actionActions.ts
+++ b/app/client/src/actions/actionActions.ts
@@ -233,6 +233,12 @@ export const updateActionProperty = (
   });
 };
 
+export const executePageLoadActionsComplete = () => {
+  return {
+    type: ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE,
+  };
+};
+
 export const setActionsToExecuteOnPageLoad = (
   actions: Array<{
     executeOnLoad: boolean;
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
index 0d02d16487..6a38c03ab5 100644
--- a/app/client/src/constants/ReduxActionConstants.tsx
+++ b/app/client/src/constants/ReduxActionConstants.tsx
@@ -226,6 +226,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   RESET_PASSWORD_VERIFY_TOKEN_SUCCESS: "RESET_PASSWORD_VERIFY_TOKEN_SUCCESS",
   RESET_PASSWORD_VERIFY_TOKEN_INIT: "RESET_PASSWORD_VERIFY_TOKEN_INIT",
   EXECUTE_PAGE_LOAD_ACTIONS: "EXECUTE_PAGE_LOAD_ACTIONS",
+  EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE: "EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE",
   SWITCH_ORGANIZATION_INIT: "SWITCH_ORGANIZATION_INIT",
   SWITCH_ORGANIZATION_SUCCESS: "SWITCH_ORGANIZATION_SUCCESS",
   FETCH_ORG_ROLES_INIT: "FETCH_ORG_ROLES_INIT",
diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts
index 78ae82de5d..7414a7edc3 100644
--- a/app/client/src/sagas/ActionExecutionSagas.ts
+++ b/app/client/src/sagas/ActionExecutionSagas.ts
@@ -44,6 +44,7 @@ import {
 import {
   executeApiActionRequest,
   executeApiActionSuccess,
+  executePageLoadActionsComplete,
   showRunActionConfirmModal,
   updateAction,
 } from "actions/actionActions";
@@ -999,6 +1000,8 @@ function* executePageLoadActionsSaga() {
     PerformanceTracker.stopAsyncTracking(
       PerformanceTransactionName.EXECUTE_PAGE_LOAD_ACTIONS,
     );
+
+    yield put(executePageLoadActionsComplete());
   } catch (e) {
     log.error(e);
 
diff --git a/app/client/src/sagas/DebuggerSagas.ts b/app/client/src/sagas/DebuggerSagas.ts
index d072aad539..e2c6c223e8 100644
--- a/app/client/src/sagas/DebuggerSagas.ts
+++ b/app/client/src/sagas/DebuggerSagas.ts
@@ -12,13 +12,15 @@ import {
   call,
 } from "redux-saga/effects";
 import { getDataTree } from "selectors/dataTreeSelectors";
-import { isEmpty, set } from "lodash";
+import { isEmpty, set, get } from "lodash";
 import { getDebuggerErrors } from "selectors/debuggerSelectors";
 import { getAction } from "selectors/entitiesSelector";
 import { Action, PluginType } from "entities/Action";
 import LOG_TYPE from "entities/AppsmithConsole/logtype";
-import { DataTree } from "entities/DataTree/dataTreeFactory";
+import { DataTree, DataTreeWidget } from "entities/DataTree/dataTreeFactory";
 import { isWidget } from "workers/evaluationUtils";
+import { getWidget } from "./selectors";
+import { WidgetProps } from "widgets/BaseWidget";
 
 function* onWidgetUpdateSaga(payload: LogActionPayload) {
   if (!payload.source) return;
@@ -125,6 +127,7 @@ function* debuggerLogSaga(action: ReduxAction<Message>) {
       if (payload.source && payload.source.propertyPath) {
         if (payload.text) {
           yield put(errorLog(payload));
+
           yield put(debuggerLog(payload));
         }
       }
@@ -166,6 +169,42 @@ function* debuggerLogSaga(action: ReduxAction<Message>) {
   }
 }
 
-export default function* debuggerSagasListeners() {
-  yield all([takeEvery(ReduxActionTypes.DEBUGGER_LOG_INIT, debuggerLogSaga)]);
+// Pass through error list once after on page load actions executions are complete
+function* onExecutePageActionsCompleteSaga() {
+  yield take(ReduxActionTypes.SET_EVALUATED_TREE);
+
+  const dataTree: DataTree = yield select(getDataTree);
+  const errors = yield select(getDebuggerErrors);
+  const updatedErrors = { ...errors };
+  const errorIds = Object.keys(errors);
+
+  for (const id of errorIds) {
+    const splits = id.split("-");
+    const entityId = splits[0];
+    const propertyName = splits[1];
+    const widget: WidgetProps | null = yield select(getWidget, entityId);
+
+    if (widget) {
+      const dataTreeWidget = dataTree[widget.widgetName] as DataTreeWidget;
+
+      if (!get(dataTreeWidget.invalidProps, propertyName, null)) {
+        delete updatedErrors[id];
+      }
+    }
+  }
+
+  yield put({
+    type: ReduxActionTypes.DEBUGGER_UPDATE_ERROR_LOGS,
+    payload: updatedErrors,
+  });
+}
+
+export default function* debuggerSagasListeners() {
+  yield all([
+    takeEvery(ReduxActionTypes.DEBUGGER_LOG_INIT, debuggerLogSaga),
+    takeEvery(
+      ReduxActionTypes.EXECUTE_PAGE_LOAD_ACTIONS_COMPLETE,
+      onExecutePageActionsCompleteSaga,
+    ),
+  ]);
 }

From b1c523eef499419da77f119e1b810fe4019ba7dd Mon Sep 17 00:00:00 2001
From: Shrikant Sharat Kandula <shrikant@appsmith.com>
Date: Tue, 18 May 2021 17:48:40 +0530
Subject: [PATCH 73/76] Fix flaky UserData test

---
 .../server/services/UserDataServiceTest.java  | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java
index c6ce42a899..784e9a648a 100644
--- a/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java
+++ b/app/server/appsmith-server/src/test/java/com/appsmith/server/services/UserDataServiceTest.java
@@ -1,12 +1,10 @@
 package com.appsmith.server.services;
 
 import com.appsmith.server.domains.Asset;
-import com.appsmith.server.domains.Collection;
 import com.appsmith.server.domains.User;
 import com.appsmith.server.domains.UserData;
 import com.appsmith.server.exceptions.AppsmithException;
 import com.appsmith.server.repositories.AssetRepository;
-import org.apache.commons.compress.utils.Lists;
 import org.junit.Assert;
 import org.junit.Before;
 import org.junit.Test;
@@ -185,17 +183,20 @@ public class UserDataServiceTest {
     @Test
     @WithUserDetails(value = "api_user")
     public void testUpdateLastUsedOrgList_WhenListIsNotEmpty_orgIdPrepended() {
-        // set some org id to current user's list
-        UserData existingUserData = new UserData();
-        existingUserData.setRecentlyUsedOrgIds(Arrays.asList("123", "456"));
-        userDataService.updateForCurrentUser(existingUserData).subscribe();
+        // Set an initial list of org ids to the current user.
+        UserData changes = new UserData();
+        changes.setRecentlyUsedOrgIds(Arrays.asList("123", "456"));
 
-        // now check whether new org id is put at first
-        String sampleOrgId = "abcd";
-        final Mono<UserData> saveMono = userDataService.updateLastUsedOrgList(sampleOrgId);
-        StepVerifier.create(saveMono).assertNext(userData -> {
+        final Mono<UserData> resultMono = userDataService.updateForCurrentUser(changes)
+                .flatMap(userData -> {
+                    // Now check whether a new org id is put at first.
+                    String sampleOrgId = "sample-org-id";
+                    return userDataService.updateLastUsedOrgList(sampleOrgId);
+                });
+
+        StepVerifier.create(resultMono).assertNext(userData -> {
             Assert.assertEquals(3, userData.getRecentlyUsedOrgIds().size());
-            Assert.assertEquals(sampleOrgId, userData.getRecentlyUsedOrgIds().get(0));
+            Assert.assertEquals("sample-org-id", userData.getRecentlyUsedOrgIds().get(0));
         }).verifyComplete();
     }
 }

From 9e082a6156384f28ad3a5b5656178117961a5077 Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Tue, 18 May 2021 19:24:40 +0530
Subject: [PATCH 74/76] Feature: Show widget error state (#4558)

---
 .../Debugger/Widget_Error_spec.js             |  17 +
 app/client/cypress/support/commands.js        |   2 +-
 .../CodeEditor/styledComponents.ts            |  10 +-
 .../editorComponents/Debugger/index.tsx       |  10 +-
 .../WidgetNameComponent/SettingsControl.tsx   |  47 +-
 .../WidgetNameComponent/index.tsx             |   5 +-
 .../mockResponses/WidgetConfigResponse.tsx    |   3 +
 app/client/src/sagas/EvaluationsSaga.ts       |   3 +
 .../src/utils/WidgetPropsUtils.test.tsx       | 542 +++++++++++++++++-
 app/client/src/utils/WidgetPropsUtils.tsx     |  72 +++
 app/client/src/utils/helpers.test.ts          |  86 +++
 app/client/src/utils/helpers.tsx              |  25 +
 app/client/src/widgets/BaseWidget.tsx         |   7 +
 app/client/src/workers/DataTreeEvaluator.ts   |   4 +-
 app/client/src/workers/evaluationUtils.ts     |  22 +-
 15 files changed, 831 insertions(+), 24 deletions(-)
 create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Widget_Error_spec.js
 create mode 100644 app/client/src/utils/helpers.test.ts

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Widget_Error_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Widget_Error_spec.js
new file mode 100644
index 0000000000..3daf51823b
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Widget_Error_spec.js
@@ -0,0 +1,17 @@
+const dsl = require("../../../../fixtures/buttondsl.json");
+
+describe("Widget error state", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
+  it("Check widget error state", function() {
+    cy.openPropertyPane("buttonwidget");
+
+    cy.get(".t--property-control-visible")
+      .find(".t--js-toggle")
+      .click();
+    cy.testJsontext("visible", "Test");
+
+    cy.contains(".t--widget-error-count", 1);
+  });
+});
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 3bd45b491d..9e4d949e44 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -1143,7 +1143,7 @@ Cypress.Commands.add("widgetText", (text, inputcss, innercss) => {
   cy.get(inputcss)
     .first()
     .trigger("mouseover", { force: true });
-  cy.get(innercss).should("have.text", text);
+  cy.contains(innercss, text);
 });
 
 Cypress.Commands.add("editColName", (text) => {
diff --git a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
index 3272c2f646..1054a84b21 100644
--- a/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
+++ b/app/client/src/components/editorComponents/CodeEditor/styledComponents.ts
@@ -422,20 +422,13 @@ export const DynamicAutocompleteInputWrapper = styled.div<{
   height: 100%;
   flex: 1;
   position: relative;
-  border-color: ${(props) =>
-    !props.isError && props.isActive && props.skin === Skin.DARK
-      ? Colors.ALABASTER
-      : "transparent"};
+  border: 1px solid ${(props) => (!props.isError ? "transparent" : "red")};
   > span:first-of-type {
     width: 30px;
     position: absolute;
     right: 0px;
   }
   &:hover {
-    border-color: ${(props) =>
-      !props.isError && props.skin === Skin.DARK
-        ? Colors.ALABASTER
-        : "transparent"};
     .lightning-menu {
       background: ${(props) => (!props.isNotHover ? "#090707" : "")};
       svg {
@@ -451,7 +444,6 @@ export const DynamicAutocompleteInputWrapper = styled.div<{
       }
     }
   }
-  border: 0px;
   border-radius: 0px;
   .lightning-menu {
     z-index: 1 !important;
diff --git a/app/client/src/components/editorComponents/Debugger/index.tsx b/app/client/src/components/editorComponents/Debugger/index.tsx
index 2e7ebb0fb7..368d73be84 100644
--- a/app/client/src/components/editorComponents/Debugger/index.tsx
+++ b/app/client/src/components/editorComponents/Debugger/index.tsx
@@ -18,7 +18,7 @@ const Container = styled.div<{ errorCount: number }>`
   right: 20px;
   bottom: 20px;
   cursor: pointer;
-  padding: 19px;
+  padding: ${(props) => props.theme.spaces[6]}px;
   color: ${(props) => props.theme.colors.debugger.floatingButton.color};
   border-radius: 50px;
   box-shadow: ${(props) => props.theme.colors.debugger.floatingButton.shadow};
@@ -33,11 +33,9 @@ const Container = styled.div<{ errorCount: number }>`
 
   .debugger-count {
     color: ${Colors.WHITE};
-    font-size: 14px;
-    font-weight: 500;
     ${(props) => getTypographyByKey(props, "h6")}
-    height: 20px;
-    padding: 6px;
+    height: 16px;
+    padding: ${(props) => props.theme.spaces[1]}px;
     background-color: ${(props) =>
       !!props.errorCount
         ? props.theme.colors.debugger.floatingButton.errorCount
@@ -75,7 +73,7 @@ function Debugger() {
         errorCount={errorCount}
         onClick={onClick}
       >
-        <Icon name="bug" size={IconSize.XXXL} />
+        <Icon name="bug" size={IconSize.XL} />
         <div className="debugger-count">{errorCount}</div>
       </Container>
     );
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
index b33a28bd0f..6e3dfc2255 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
@@ -1,5 +1,6 @@
 import React, { CSSProperties } from "react";
 import { ControlIcons } from "icons/ControlIcons";
+import Icon, { IconSize } from "components/ads/Icon";
 import { Colors } from "constants/Colors";
 import styled from "styled-components";
 import { Tooltip, Classes } from "@blueprintjs/core";
@@ -34,18 +35,41 @@ const SettingsWrapper = styled.div`
 `;
 
 const WidgetName = styled.span`
-  margin-right: 5px;
+  margin-right: ${(props) => props.theme.spaces[1] + 1}px;
+  margin-left: ${(props) => props.theme.spaces[3]}px;
+`;
+
+const StyledErrorIcon = styled(Icon)`
+  &:hover {
+    svg {
+      path {
+        fill: ${Colors.WHITE};
+      }
+    }
+  }
+  margin-right: ${(props) => props.theme.spaces[1]}px;
 `;
 
 type SettingsControlProps = {
   toggleSettings: (e: any) => void;
   activity: Activities;
   name: string;
+  errorCount: number;
 };
 
 const SettingsIcon = ControlIcons.SETTINGS_CONTROL;
 
-const getStyles = (activity: Activities): CSSProperties | undefined => {
+const getStyles = (
+  activity: Activities,
+  errorCount: number,
+): CSSProperties | undefined => {
+  if (errorCount > 0) {
+    return {
+      background: "red",
+      color: Colors.WHITE,
+    };
+  }
+
   switch (activity) {
     case Activities.ACTIVE:
       return {
@@ -69,7 +93,9 @@ export function SettingsControl(props: SettingsControlProps) {
   const settingsIcon = (
     <SettingsIcon
       color={
-        props.activity === Activities.HOVERING
+        !!props.errorCount
+          ? Colors.WHITE
+          : props.activity === Activities.HOVERING
           ? Colors.BLACK_PEARL
           : Colors.WHITE
       }
@@ -77,6 +103,13 @@ export function SettingsControl(props: SettingsControlProps) {
       width={12}
     />
   );
+  const errorIcon = (
+    <StyledErrorIcon
+      fillColor={Colors.WHITE}
+      name="warning"
+      size={IconSize.SMALL}
+    />
+  );
 
   return (
     <StyledTooltip
@@ -87,8 +120,14 @@ export function SettingsControl(props: SettingsControlProps) {
       <SettingsWrapper
         className="t--widget-propertypane-toggle"
         onClick={props.toggleSettings}
-        style={getStyles(props.activity)}
+        style={getStyles(props.activity, props.errorCount)}
       >
+        {!!props.errorCount && (
+          <>
+            {errorIcon}
+            <span className="t--widget-error-count">{props.errorCount}</span>
+          </>
+        )}
         <WidgetName className="t--widget-name">{props.name}</WidgetName>
         {settingsIcon}
       </SettingsWrapper>
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
index 0e5a653bde..98d46c85d1 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
@@ -41,6 +41,7 @@ type WidgetNameComponentProps = {
   parentId?: string;
   type: WidgetType;
   showControls?: boolean;
+  errorCount: number;
 };
 
 export function WidgetNameComponent(props: WidgetNameComponentProps) {
@@ -95,7 +96,8 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
     props.showControls ||
     ((focusedWidget === props.widgetId || selectedWidget === props.widgetId) &&
       !isDragging &&
-      !isResizing);
+      !isResizing) ||
+    !!props.errorCount;
 
   let currentActivity = Activities.NONE;
   if (focusedWidget === props.widgetId) currentActivity = Activities.HOVERING;
@@ -111,6 +113,7 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
       <ControlGroup>
         <SettingsControl
           activity={currentActivity}
+          errorCount={props.errorCount}
           name={props.widgetName}
           toggleSettings={togglePropertyEditor}
         />
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index 1282219042..7899c9e378 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -129,6 +129,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       columns: 5,
       widgetName: "DatePicker",
       defaultDate: moment().toISOString(),
+      minDate: "2001-01-01 00:00",
+      maxDate: "2041-12-31 23:59",
       version: 2,
       isRequired: false,
     },
@@ -303,6 +305,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     FILE_PICKER_WIDGET: {
       rows: 1,
       files: [],
+      allowedFileTypes: [],
       label: "Select Files",
       columns: 4,
       maxNumFiles: 1,
diff --git a/app/client/src/sagas/EvaluationsSaga.ts b/app/client/src/sagas/EvaluationsSaga.ts
index 79b6db90b7..83edd6db0c 100644
--- a/app/client/src/sagas/EvaluationsSaga.ts
+++ b/app/client/src/sagas/EvaluationsSaga.ts
@@ -58,6 +58,9 @@ const evalErrorHandler = (errors: EvalError[]) => {
             text: `${error.message} Node was: ${node}`,
             variant: Variant.danger,
           });
+          AppsmithConsole.error({
+            text: `${error.message} Node was: ${node}`,
+          });
           // Send the generic error message to sentry for better grouping
           Sentry.captureException(new Error(error.message), {
             tags: {
diff --git a/app/client/src/utils/WidgetPropsUtils.test.tsx b/app/client/src/utils/WidgetPropsUtils.test.tsx
index 592130a3b0..07e2edcf18 100644
--- a/app/client/src/utils/WidgetPropsUtils.test.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.test.tsx
@@ -1,6 +1,9 @@
 import * as generators from "../utils/generators";
 import { RenderModes, WidgetTypes } from "constants/WidgetConstants";
-import { migrateChartDataFromArrayToObject } from "./WidgetPropsUtils";
+import {
+  migrateChartDataFromArrayToObject,
+  migrateInitialValues,
+} from "./WidgetPropsUtils";
 
 describe("WidgetProps tests", () => {
   it("it checks if array to object migration functions for chart widget ", () => {
@@ -88,3 +91,540 @@ describe("WidgetProps tests", () => {
     expect(result).toStrictEqual(output);
   });
 });
+
+describe("Initial value migration test", () => {
+  const containerWidget = {
+    widgetName: "MainContainer",
+    backgroundColor: "none",
+    rightColumn: 1118,
+    snapColumns: 16,
+    detachFromLayout: true,
+    widgetId: "0",
+    topRow: 0,
+    bottomRow: 560,
+    snapRows: 33,
+    isLoading: false,
+    parentRowSpace: 1,
+    type: WidgetTypes.CANVAS_WIDGET,
+    renderMode: RenderModes.CANVAS,
+    canExtend: true,
+    version: 18,
+    minHeight: 600,
+    parentColumnSpace: 1,
+    dynamicTriggerPathList: [],
+    dynamicBindingPathList: [],
+    leftColumn: 0,
+  };
+
+  it("Input widget", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Input1",
+          rightColumn: 8,
+          widgetId: "ra3vyy3nt2",
+          topRow: 1,
+          bottomRow: 2,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "",
+          type: WidgetTypes.INPUT_WIDGET,
+          version: 1,
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 3,
+          inputType: "TEXT",
+          renderMode: RenderModes.CANVAS,
+          resetOnSubmit: false,
+        },
+      ],
+    };
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Input1",
+          rightColumn: 8,
+          widgetId: "ra3vyy3nt2",
+          topRow: 1,
+          bottomRow: 2,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "",
+          type: "INPUT_WIDGET",
+          version: 1,
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          renderMode: "CANVAS",
+          leftColumn: 3,
+          inputType: "TEXT",
+          // will not override existing property
+          resetOnSubmit: false,
+          // following properties get added
+          isRequired: false,
+          isDisabled: false,
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("DROP_DOWN_WIDGET", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Select1",
+          rightColumn: 6,
+          widgetId: "1e3ytl2pl9",
+          topRow: 3,
+          bottomRow: 4,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "",
+          type: WidgetTypes.DROP_DOWN_WIDGET,
+          version: 1,
+          parentId: "0",
+          isLoading: false,
+          defaultOptionValue: "GREEN",
+          selectionType: "SINGLE_SELECT",
+          parentColumnSpace: 67.375,
+          renderMode: RenderModes.CANVAS,
+          leftColumn: 1,
+          options: [
+            {
+              label: "Blue",
+              value: "BLUE",
+            },
+            {
+              label: "Green",
+              value: "GREEN",
+            },
+            {
+              label: "Red",
+              value: "RED",
+            },
+          ],
+        },
+      ],
+    };
+
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Select1",
+          rightColumn: 6,
+          widgetId: "1e3ytl2pl9",
+          topRow: 3,
+          bottomRow: 4,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "",
+          type: WidgetTypes.DROP_DOWN_WIDGET,
+          version: 1,
+          parentId: "0",
+          isLoading: false,
+          defaultOptionValue: "GREEN",
+          selectionType: "SINGLE_SELECT",
+          parentColumnSpace: 67.375,
+          renderMode: "CANVAS",
+          leftColumn: 1,
+          options: [
+            {
+              label: "Blue",
+              value: "BLUE",
+            },
+            {
+              label: "Green",
+              value: "GREEN",
+            },
+            {
+              label: "Red",
+              value: "RED",
+            },
+          ],
+          // following properties get added
+          isRequired: false,
+          isDisabled: false,
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("DATE_PICKER_WIDGET2", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "DatePicker1",
+          defaultDate: "2021-05-12T06:50:51.743Z",
+          rightColumn: 7,
+          dateFormat: "YYYY-MM-DD HH:mm",
+          widgetId: "5jbfazqnca",
+          topRow: 2,
+          bottomRow: 3,
+          parentRowSpace: 40,
+          isVisible: true,
+          datePickerType: "DATE_PICKER",
+          label: "",
+          type: WidgetTypes.DATE_PICKER_WIDGET2,
+          renderMode: RenderModes.CANVAS,
+          version: 2,
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 2,
+          isDisabled: false,
+        },
+      ],
+    };
+
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "DatePicker1",
+          defaultDate: "2021-05-12T06:50:51.743Z",
+          rightColumn: 7,
+          dateFormat: "YYYY-MM-DD HH:mm",
+          widgetId: "5jbfazqnca",
+          topRow: 2,
+          bottomRow: 3,
+          parentRowSpace: 40,
+          isVisible: true,
+          datePickerType: "DATE_PICKER",
+          label: "",
+          type: WidgetTypes.DATE_PICKER_WIDGET2,
+          renderMode: RenderModes.CANVAS,
+          version: 2,
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 2,
+          isDisabled: false,
+          // following properties get added
+          isRequired: false,
+          minDate: "2001-01-01 00:00",
+          maxDate: "2041-12-31 23:59",
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("SWITCH_WIDGET", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Switch1",
+          rightColumn: 5,
+          widgetId: "4ksqurxmwn",
+          topRow: 2,
+          bottomRow: 3,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "Label",
+          type: WidgetTypes.SWITCH_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          defaultSwitchState: true,
+          version: 1,
+          alignWidget: "LEFT",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 3,
+        },
+      ],
+    };
+
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Switch1",
+          rightColumn: 5,
+          widgetId: "4ksqurxmwn",
+          topRow: 2,
+          bottomRow: 3,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "Label",
+          type: WidgetTypes.SWITCH_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          defaultSwitchState: true,
+          version: 1,
+          alignWidget: "LEFT",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 3,
+          // following properties get added
+          isDisabled: false,
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("Video widget", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Video1",
+          rightColumn: 9,
+          dynamicPropertyPathList: [],
+          widgetId: "ti5b5f5hvq",
+          topRow: 3,
+          bottomRow: 10,
+          parentRowSpace: 40,
+          isVisible: true,
+          type: WidgetTypes.VIDEO_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          onPlay: "",
+          url: "https://www.youtube.com/watch?v=mzqK0QIZRLs",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 2,
+          autoPlay: false,
+        },
+      ],
+    };
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Video1",
+          rightColumn: 9,
+          dynamicPropertyPathList: [],
+          widgetId: "ti5b5f5hvq",
+          topRow: 3,
+          bottomRow: 10,
+          parentRowSpace: 40,
+          isVisible: true,
+          type: WidgetTypes.VIDEO_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          onPlay: "",
+          url: "https://www.youtube.com/watch?v=mzqK0QIZRLs",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 2,
+          autoPlay: false,
+          // following properties get added
+          isRequired: false,
+          isDisabled: false,
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("CHECKBOX_WIDGET", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Checkbox1",
+          rightColumn: 8,
+          widgetId: "djxhhl1p7t",
+          topRow: 4,
+          bottomRow: 5,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "Label",
+          type: WidgetTypes.CHECKBOX_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          alignWidget: "LEFT",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 5,
+          defaultCheckedState: true,
+        },
+      ],
+    };
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "Checkbox1",
+          rightColumn: 8,
+          widgetId: "djxhhl1p7t",
+          topRow: 4,
+          bottomRow: 5,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "Label",
+          type: WidgetTypes.CHECKBOX_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          alignWidget: "LEFT",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 5,
+          defaultCheckedState: true,
+          // following properties get added
+          isDisabled: false,
+          isRequired: false,
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("RADIO_GROUP_WIDGET", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "RadioGroup1",
+          rightColumn: 5,
+          widgetId: "4ixyqnw2no",
+          topRow: 3,
+          bottomRow: 5,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "",
+          type: WidgetTypes.RADIO_GROUP_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          parentId: "0",
+          isLoading: false,
+          defaultOptionValue: "Y",
+          parentColumnSpace: 67.375,
+          leftColumn: 2,
+          options: [
+            {
+              label: "Yes",
+              value: "Y",
+            },
+            {
+              label: "No",
+              value: "N",
+            },
+          ],
+        },
+      ],
+    };
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "RadioGroup1",
+          rightColumn: 5,
+          widgetId: "4ixyqnw2no",
+          topRow: 3,
+          bottomRow: 5,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "",
+          type: WidgetTypes.RADIO_GROUP_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          parentId: "0",
+          isLoading: false,
+          defaultOptionValue: "Y",
+          parentColumnSpace: 67.375,
+          leftColumn: 2,
+          options: [
+            {
+              label: "Yes",
+              value: "Y",
+            },
+            {
+              label: "No",
+              value: "N",
+            },
+          ],
+          // following properties get added
+          isDisabled: false,
+          isRequired: false,
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+
+  it("FILE_PICKER_WIDGET", () => {
+    const input = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "FilePicker1",
+          rightColumn: 5,
+          isDefaultClickDisabled: true,
+          widgetId: "fzajyy8qft",
+          topRow: 4,
+          bottomRow: 5,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "Select Files",
+          maxFileSize: 5,
+          type: WidgetTypes.FILE_PICKER_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          fileDataType: "Base64",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 1,
+          files: [],
+          maxNumFiles: 1,
+        },
+      ],
+    };
+
+    const output = {
+      ...containerWidget,
+      children: [
+        {
+          widgetName: "FilePicker1",
+          rightColumn: 5,
+          isDefaultClickDisabled: true,
+          widgetId: "fzajyy8qft",
+          topRow: 4,
+          bottomRow: 5,
+          parentRowSpace: 40,
+          isVisible: true,
+          label: "Select Files",
+          maxFileSize: 5,
+          type: WidgetTypes.FILE_PICKER_WIDGET,
+          renderMode: RenderModes.CANVAS,
+          version: 1,
+          fileDataType: "Base64",
+          parentId: "0",
+          isLoading: false,
+          parentColumnSpace: 67.375,
+          leftColumn: 1,
+          files: [],
+          maxNumFiles: 1,
+          // following properties get added
+          isDisabled: false,
+          isRequired: false,
+          allowedFileTypes: [],
+        },
+      ],
+    };
+
+    expect(migrateInitialValues(input)).toEqual(output);
+  });
+});
diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx
index ef6498b393..62656657c4 100644
--- a/app/client/src/utils/WidgetPropsUtils.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.tsx
@@ -546,6 +546,73 @@ export const calculateDynamicHeight = (
   return minmumHeight;
 };
 
+export const migrateInitialValues = (
+  currentDSL: ContainerWidgetProps<WidgetProps>,
+) => {
+  currentDSL.children = currentDSL.children?.map((child: WidgetProps) => {
+    if (child.type === WidgetTypes.INPUT_WIDGET) {
+      child = {
+        isRequired: false,
+        isDisabled: false,
+        resetOnSubmit: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.DROP_DOWN_WIDGET) {
+      child = {
+        isRequired: false,
+        isDisabled: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.DATE_PICKER_WIDGET2) {
+      child = {
+        minDate: "2001-01-01 00:00",
+        maxDate: "2041-12-31 23:59",
+        isRequired: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.SWITCH_WIDGET) {
+      child = {
+        isDisabled: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.ICON_WIDGET) {
+      child = {
+        isRequired: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.VIDEO_WIDGET) {
+      child = {
+        isRequired: false,
+        isDisabled: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.CHECKBOX_WIDGET) {
+      child = {
+        isDisabled: false,
+        isRequired: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.RADIO_GROUP_WIDGET) {
+      child = {
+        isDisabled: false,
+        isRequired: false,
+        ...child,
+      };
+    } else if (child.type === WidgetTypes.FILE_PICKER_WIDGET) {
+      child = {
+        isDisabled: false,
+        isRequired: false,
+        allowedFileTypes: [],
+        ...child,
+      };
+    } else if (child.children && child.children.length > 0) {
+      child = migrateInitialValues(child);
+    }
+    return child;
+  });
+  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>) => {
@@ -654,6 +721,11 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
     currentDSL.version = 18;
   }
 
+  if (currentDSL.version === 18) {
+    currentDSL = migrateInitialValues(currentDSL);
+    currentDSL.version = 19;
+  }
+
   return currentDSL;
 };
 
diff --git a/app/client/src/utils/helpers.test.ts b/app/client/src/utils/helpers.test.ts
new file mode 100644
index 0000000000..b9a613979c
--- /dev/null
+++ b/app/client/src/utils/helpers.test.ts
@@ -0,0 +1,86 @@
+import { flattenObject } from "./helpers";
+
+describe("flattenObject test", () => {
+  it("Check if non nested object is returned correctly", () => {
+    const testObject = {
+      isVisible: true,
+      isDisabled: false,
+      tableData: false,
+    };
+
+    expect(flattenObject(testObject)).toStrictEqual(testObject);
+  });
+
+  it("Check if nested objects are returned correctly", () => {
+    const tests = [
+      {
+        input: {
+          isVisible: true,
+          isDisabled: false,
+          tableData: false,
+          settings: {
+            color: [
+              {
+                headers: {
+                  left: true,
+                },
+              },
+            ],
+          },
+        },
+        output: {
+          isVisible: true,
+          isDisabled: false,
+          tableData: false,
+          "settings.color[0].headers.left": true,
+        },
+      },
+      {
+        input: {
+          isVisible: true,
+          isDisabled: false,
+          tableData: false,
+          settings: {
+            color: true,
+          },
+        },
+        output: {
+          isVisible: true,
+          isDisabled: false,
+          tableData: false,
+          "settings.color": true,
+        },
+      },
+      {
+        input: {
+          numbers: [1, 2, 3],
+          color: { header: "red" },
+        },
+        output: {
+          "numbers[0]": 1,
+          "numbers[1]": 2,
+          "numbers[2]": 3,
+          "color.header": "red",
+        },
+      },
+      {
+        input: {
+          name: null,
+          color: { header: {} },
+          users: {
+            id: undefined,
+          },
+        },
+        output: {
+          "color.header": {},
+          name: null,
+          "users.id": undefined,
+        },
+      },
+    ];
+
+    tests.map((test) =>
+      expect(flattenObject(test.input)).toStrictEqual(test.output),
+    );
+  });
+});
diff --git a/app/client/src/utils/helpers.tsx b/app/client/src/utils/helpers.tsx
index 6a9f52bf05..5534d658df 100644
--- a/app/client/src/utils/helpers.tsx
+++ b/app/client/src/utils/helpers.tsx
@@ -287,3 +287,28 @@ export const scrollbarWidth = () => {
   document.body.removeChild(scrollDiv);
   return scrollbarWidth;
 };
+
+// Flatten object
+// From { isValid: false, settings: { color: false}}
+// To { isValid: false, settings.color: false}
+export const flattenObject = (data: Record<string, any>) => {
+  const result: Record<string, any> = {};
+  function recurse(cur: any, prop: any) {
+    if (Object(cur) !== cur) {
+      result[prop] = cur;
+    } else if (Array.isArray(cur)) {
+      for (let i = 0, l = cur.length; i < l; i++)
+        recurse(cur[i], prop + "[" + i + "]");
+      if (cur.length == 0) result[prop] = [];
+    } else {
+      let isEmpty = true;
+      for (const p in cur) {
+        isEmpty = false;
+        recurse(cur[p], prop ? prop + "." + p : p);
+      }
+      if (isEmpty && prop) result[prop] = {};
+    }
+  }
+  recurse(data, "");
+  return result;
+};
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index baa8de6de3..0e47cd7579 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -15,6 +15,7 @@ import {
   CSSUnit,
   CONTAINER_GRID_PADDING,
 } from "constants/WidgetConstants";
+import { memoize } from "lodash";
 import DraggableComponent from "components/editorComponents/DraggableComponent";
 import ResizableComponent from "components/editorComponents/ResizableComponent";
 import { WidgetExecuteActionPayload } from "constants/AppsmithActionConstants/ActionConstants";
@@ -35,6 +36,7 @@ import OverlayCommentsWrapper from "comments/inlineComments/OverlayCommentsWrapp
 import PreventInteractionsOverlay from "components/editorComponents/PreventInteractionsOverlay";
 import AppsmithConsole from "utils/AppsmithConsole";
 import { ENTITY_TYPE } from "entities/AppsmithConsole";
+import { flattenObject } from "utils/helpers";
 
 /***
  * BaseWidget
@@ -176,6 +178,10 @@ abstract class BaseWidget<
     };
   }
 
+  getErrorCount = memoize((invalidProps) => {
+    return Object.values(flattenObject(invalidProps)).filter((e) => !!e).length;
+  }, JSON.stringify);
+
   render() {
     return this.getWidgetView();
   }
@@ -209,6 +215,7 @@ abstract class BaseWidget<
       <>
         {!this.props.disablePropertyPane && (
           <WidgetNameComponent
+            errorCount={this.getErrorCount(this.props.invalidProps)}
             parentId={this.props.parentId}
             showControls={showControls}
             type={this.props.type}
diff --git a/app/client/src/workers/DataTreeEvaluator.ts b/app/client/src/workers/DataTreeEvaluator.ts
index 9c3d81b764..5aad90de95 100644
--- a/app/client/src/workers/DataTreeEvaluator.ts
+++ b/app/client/src/workers/DataTreeEvaluator.ts
@@ -88,7 +88,9 @@ export default class DataTreeEvaluator {
     const evaluateEnd = performance.now();
     // Validate Widgets
     const validateStart = performance.now();
-    this.evalTree = getValidatedTree(evaluatedTree);
+    const { errors, validatedTree } = getValidatedTree(evaluatedTree);
+    this.evalTree = validatedTree;
+    this.errors = this.errors.concat(errors);
     const validateEnd = performance.now();
 
     this.oldUnEvalTree = unEvalTree;
diff --git a/app/client/src/workers/evaluationUtils.ts b/app/client/src/workers/evaluationUtils.ts
index 05694b1644..c165af4542 100644
--- a/app/client/src/workers/evaluationUtils.ts
+++ b/app/client/src/workers/evaluationUtils.ts
@@ -1,5 +1,7 @@
 import {
   DependencyMap,
+  EvalError,
+  EvalErrorTypes,
   isChildPropertyPath,
   isDynamicValue,
 } from "utils/DynamicBindingUtils";
@@ -270,7 +272,8 @@ export function validateWidgetProperty(
 }
 
 export function getValidatedTree(tree: DataTree) {
-  return Object.keys(tree).reduce((tree, entityKey: string) => {
+  const errors: EvalError[] = [];
+  const validatedTree = Object.keys(tree).reduce((tree, entityKey: string) => {
     const entity = tree[entityKey] as DataTreeWidget;
     if (!isWidget(entity)) {
       return tree;
@@ -295,6 +298,18 @@ export function getValidatedTree(tree: DataTree) {
       const safeEvaluatedValue = removeFunctions(evaluatedValue);
       _.set(parsedEntity, `evaluatedValues.${property}`, safeEvaluatedValue);
       if (!isValid) {
+        errors.push({
+          type: EvalErrorTypes.WIDGET_PROPERTY_VALIDATION_ERROR,
+          message: message || "",
+          context: {
+            source: {
+              id: parsedEntity.widgetId,
+              name: parsedEntity.widgetName,
+              type: ENTITY_TYPE.WIDGET,
+              propertyPath: property,
+            },
+          },
+        });
         _.set(parsedEntity, `invalidProps.${property}`, true);
         _.set(parsedEntity, `validationMessages.${property}`, message);
       } else {
@@ -304,6 +319,11 @@ export function getValidatedTree(tree: DataTree) {
     });
     return { ...tree, [entityKey]: parsedEntity };
   }, tree);
+
+  return {
+    validatedTree,
+    errors,
+  };
 }
 
 export const getAllPaths = (

From b14f04317280319990d9ea7a57766a92d27aa5dd Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Tue, 18 May 2021 21:40:53 +0530
Subject: [PATCH 75/76] Fix/datasource request headers in api (#4481)

* Show datasource headers when used in an API
---
 .../fields/EmbeddedDatasourcePathField.tsx    |  27 +--
 .../form/fields/KeyValueFieldArray.tsx        |  37 ++--
 .../src/pages/Editor/APIEditor/Form.tsx       | 163 +++++++++++++++++-
 3 files changed, 196 insertions(+), 31 deletions(-)

diff --git a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
index 0955c7e891..49f5d63d39 100644
--- a/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
+++ b/app/client/src/components/editorComponents/form/fields/EmbeddedDatasourcePathField.tsx
@@ -12,7 +12,8 @@ import CodeEditor, {
 import { API_EDITOR_FORM_NAME } from "constants/forms";
 import { AppState } from "reducers";
 import { connect } from "react-redux";
-import _ from "lodash";
+import get from "lodash/get";
+import merge from "lodash/merge";
 import {
   DEFAULT_DATASOURCE,
   EmbeddedRestDatasource,
@@ -61,19 +62,27 @@ const DatasourceContainer = styled.div`
   position: relative;
   width: calc(100% - 155px);
 `;
+
+const apiFormValueSelector = formValueSelector(API_EDITOR_FORM_NAME);
 class EmbeddedDatasourcePathComponent extends React.Component<Props> {
   handleDatasourceUrlUpdate = (datasourceUrl: string) => {
     const { datasource, orgId, pluginId } = this.props;
     const urlHasUpdated =
       datasourceUrl !== datasource.datasourceConfiguration?.url;
     if (urlHasUpdated) {
-      this.props.updateDatasource({
-        ...DEFAULT_DATASOURCE(pluginId, orgId),
+      const isDatasourceRemoved =
+        datasourceUrl.indexOf(datasource.datasourceConfiguration?.url) === -1;
+      let newDatasource = isDatasourceRemoved
+        ? { ...DEFAULT_DATASOURCE(pluginId, orgId) }
+        : { ...datasource };
+      newDatasource = {
+        ...newDatasource,
         datasourceConfiguration: {
-          ...datasource.datasourceConfiguration,
+          ...newDatasource.datasourceConfiguration,
           url: datasourceUrl,
         },
-      });
+      };
+      this.props.updateDatasource(newDatasource);
     }
   };
 
@@ -95,7 +104,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
         path: "",
       };
     }
-    if ("id" in datasource && datasource.id) {
+    if (datasource && datasource.hasOwnProperty("id")) {
       const datasourceUrl = datasource.datasourceConfiguration.url;
       if (value.includes(datasourceUrl)) {
         return {
@@ -213,7 +222,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
       datasource,
       input: { value },
     } = this.props;
-    const datasourceUrl = _.get(datasource, "datasourceConfiguration.url", "");
+    const datasourceUrl = get(datasource, "datasourceConfiguration.url", "");
     const displayValue = `${datasourceUrl}${value}`;
     const input = {
       ...this.props.input,
@@ -261,8 +270,6 @@ class EmbeddedDatasourcePathComponent extends React.Component<Props> {
   }
 }
 
-const apiFormValueSelector = formValueSelector(API_EDITOR_FORM_NAME);
-
 const mapStateToProps = (
   state: AppState,
   ownProps: { pluginId: string },
@@ -275,7 +282,7 @@ const mapStateToProps = (
       (d) => d.id === datasourceFromAction.id,
     );
     if (datasourceFromDataSourceList) {
-      datasourceMerged = _.merge(
+      datasourceMerged = merge(
         {},
         datasourceFromAction,
         datasourceFromDataSourceList,
diff --git a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
index 514a02a016..83a488a1c2 100644
--- a/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
+++ b/app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
@@ -14,8 +14,12 @@ import {
 import Text, { Case, TextType } from "components/ads/Text";
 import { Classes } from "components/ads/common";
 
-const KeyValueStackContainer = styled.div`
-  padding: ${(props) => props.theme.spaces[4]}px
+type CustomStack = {
+  removeTopPadding?: boolean;
+};
+
+const KeyValueStackContainer = styled.div<CustomStack>`
+  padding: ${(props) => (props.removeTopPadding ? 0 : props.theme.spaces[4])}px
     ${(props) => props.theme.spaces[14]}px
     ${(props) => props.theme.spaces[11] + 1}px
     ${(props) => props.theme.spaces[11] + 2}px;
@@ -89,19 +93,21 @@ function KeyValueRow(props: Props & WrappedFieldArrayProps) {
   }, [props.fields, props.pushFields]);
 
   return (
-    <KeyValueStackContainer>
-      <FlexContainer>
-        <Flex className="key-value" size={1}>
-          <Text case={Case.CAPITALIZE} type={TextType.H6}>
-            Key
-          </Text>
-        </Flex>
-        <Flex className="key-value" size={3}>
-          <Text case={Case.CAPITALIZE} type={TextType.H6}>
-            Value
-          </Text>
-        </Flex>
-      </FlexContainer>
+    <KeyValueStackContainer removeTopPadding={props.hideHeader}>
+      {!props.hideHeader && (
+        <FlexContainer>
+          <Flex className="key-value" size={1}>
+            <Text case={Case.CAPITALIZE} type={TextType.H6}>
+              Key
+            </Text>
+          </Flex>
+          <Flex className="key-value" size={3}>
+            <Text case={Case.CAPITALIZE} type={TextType.H6}>
+              Value
+            </Text>
+          </Flex>
+        </FlexContainer>
+      )}
       {props.fields.length > 0 && (
         <>
           {props.fields.map((field: any, index: number) => {
@@ -224,6 +230,7 @@ type Props = {
   placeholder?: string;
   pushFields?: boolean;
   dataTreePath?: string;
+  hideHeader?: boolean;
   theme?: EditorTheme;
 };
 
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index 67dd533dce..bf56507d33 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -37,6 +37,8 @@ import { createMessage, WIDGET_BIND_HELP } from "constants/messages";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import CloseEditor from "components/editorComponents/CloseEditor";
 import { useParams } from "react-router";
+import get from "lodash/get";
+import { Icon as ButtonIcon } from "@blueprintjs/core";
 
 const Form = styled.form`
   display: flex;
@@ -163,7 +165,6 @@ const Link = styled.a`
     margin-left: ${(props) => props.theme.spaces[1] + 1}px;
   }
 `;
-
 interface APIFormProps {
   pluginId: string;
   onRunClick: (paginationField?: PaginationField) => void;
@@ -174,6 +175,7 @@ interface APIFormProps {
   appName: string;
   httpMethodFromForm: string;
   actionConfigurationHeaders?: any;
+  datasourceHeaders?: any;
   actionName: string;
   apiId: string;
   apiName: string;
@@ -195,8 +197,98 @@ export const NameWrapper = styled.div`
   }
 `;
 
+export const ShowHideImportedHeaders = styled.button`
+  background: #ebebeb;
+  color: #4b4848;
+  padding: 3px 5px;
+  border: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 12px;
+  height: 20px;
+`;
+
+const Flex = styled.div<{ size: number }>`
+  flex: ${(props) => props.size};
+  ${(props) =>
+    props.size === 3
+      ? `
+    margin-left: ${props.theme.spaces[4]}px;
+  `
+      : null};
+  width: 100%;
+  position: relative;
+  min-height: 32px;
+  height: auto;
+  background-color: #fafafa;
+  border-color: #d3dee3;
+  border-bottom: 1px solid #e8e8e8;
+  color: #4b4848;
+  display: flex;
+  align-items: center;
+`;
+
+const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: calc(100% - 30px);
+
+  .key-value {
+    padding: ${(props) => props.theme.spaces[2]}px 0px
+      ${(props) => props.theme.spaces[2]}px
+      ${(props) => props.theme.spaces[1]}px;
+    .${Classes.TEXT} {
+      color: ${(props) => props.theme.colors.apiPane.text};
+    }
+  }
+  .key-value:nth-child(2) {
+    margin-left: ${(props) => props.theme.spaces[4]}px;
+  }
+  .disabled {
+    background: #e8e8e8;
+  }
+`;
+
+const KeyValueStackContainer = styled.div`
+  padding: ${(props) => props.theme.spaces[4]}px
+    ${(props) => props.theme.spaces[14]}px 0
+    ${(props) => props.theme.spaces[11] + 2}px;
+`;
+const FormRowWithLabel = styled(FormRow)`
+  flex-wrap: wrap;
+  ${FormLabel} {
+    width: 100%;
+  }
+  & svg {
+    cursor: pointer;
+  }
+`;
+
+function ImportedHeaders(props: { headers: any }) {
+  return (
+    <>
+      {props.headers.map((header: any, index: number) => {
+        return (
+          <FormRowWithLabel key={index}>
+            <FlexContainer>
+              <Flex className="key-value disabled" size={1}>
+                <Text type={TextType.H6}>{header.key}</Text>
+              </Flex>
+              <Flex className="key-value disabled" size={3}>
+                <Text type={TextType.H6}>{header.value}</Text>
+              </Flex>
+            </FlexContainer>
+          </FormRowWithLabel>
+        );
+      })}
+    </>
+  );
+}
+
 function ApiEditorForm(props: Props) {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [showInheritedAttributes, toggleInheritedAttributes] = useState(false);
   const [
     apiBindHelpSectionVisible,
     setApiBindHelpSectionVisible,
@@ -327,9 +419,54 @@ function ApiEditorForm(props: Props) {
                         />
                       </HelpSection>
                     )}
+                    {props.datasourceHeaders.length > 0 && (
+                      <KeyValueStackContainer>
+                        <ShowHideImportedHeaders
+                          onClick={(e) => {
+                            e.preventDefault();
+                            toggleInheritedAttributes(!showInheritedAttributes);
+                          }}
+                        >
+                          <ButtonIcon
+                            icon={
+                              showInheritedAttributes ? "eye-open" : "eye-off"
+                            }
+                            iconSize={14}
+                          />
+                          &nbsp;&nbsp;
+                          <Text case={Case.CAPITALIZE} type={TextType.P2}>
+                            {showInheritedAttributes
+                              ? "Showing inherited headers"
+                              : `${props.datasourceHeaders.length} headers`}
+                          </Text>
+                        </ShowHideImportedHeaders>
+                      </KeyValueStackContainer>
+                    )}
+                    {props.datasourceHeaders.length > 0 && (
+                      <KeyValueStackContainer>
+                        <FormRowWithLabel>
+                          <FlexContainer>
+                            <Flex className="key-value" size={1}>
+                              <Text case={Case.CAPITALIZE} type={TextType.H6}>
+                                Key
+                              </Text>
+                            </Flex>
+                            <Flex className="key-value" size={3}>
+                              <Text case={Case.CAPITALIZE} type={TextType.H6}>
+                                Value
+                              </Text>
+                            </Flex>
+                          </FlexContainer>
+                        </FormRowWithLabel>
+                        {showInheritedAttributes && (
+                          <ImportedHeaders headers={props.datasourceHeaders} />
+                        )}
+                      </KeyValueStackContainer>
+                    )}
                     <KeyValueFieldArray
                       actionConfig={actionConfigurationHeaders}
                       dataTreePath={`${actionName}.config.headers`}
+                      hideHeader={!!props.datasourceHeaders.length}
                       label="Headers"
                       name="actionConfiguration.headers"
                       placeholder="Value"
@@ -407,10 +544,16 @@ const selector = formValueSelector(API_EDITOR_FORM_NAME);
 
 export default connect((state: AppState) => {
   const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod");
-  const actionConfigurationHeaders = selector(
-    state,
-    "actionConfiguration.headers",
-  );
+  const actionConfigurationHeaders =
+    selector(state, "actionConfiguration.headers") || [];
+  let datasourceFromAction = selector(state, "datasource");
+  if (datasourceFromAction && datasourceFromAction.hasOwnProperty("id")) {
+    datasourceFromAction = state.entities.datasources.list.find(
+      (d) => d.id === datasourceFromAction.id,
+    );
+  }
+  const datasourceHeaders =
+    get(datasourceFromAction, "datasourceConfiguration.headers") || [];
   const apiId = selector(state, "id");
   const actionName = getApiName(state, apiId) || "";
   const headers = selector(state, "actionConfiguration.headers");
@@ -420,7 +563,14 @@ export default connect((state: AppState) => {
     const validHeaders = headers.filter(
       (value) => value.key && value.key !== "",
     );
-    headersCount = validHeaders.length;
+    headersCount += validHeaders.length;
+  }
+
+  if (Array.isArray(datasourceHeaders)) {
+    const validHeaders = datasourceHeaders.filter(
+      (value: any) => value.key && value.key !== "",
+    );
+    headersCount += validHeaders.length;
   }
 
   const params = selector(state, "actionConfiguration.queryParameters");
@@ -437,6 +587,7 @@ export default connect((state: AppState) => {
     apiId,
     httpMethodFromForm,
     actionConfigurationHeaders,
+    datasourceHeaders,
     headersCount,
     paramsCount,
     hintMessages,

From 8c8141650a78f484346486dcc9ec96b53e7a7127 Mon Sep 17 00:00:00 2001
From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Date: Tue, 18 May 2021 23:59:39 +0530
Subject: [PATCH 76/76] Feature: Widget grouping Phase I (Multi select and Bulk
 Delete) + Canvas Enhancements. (#4219)

* Feature: Canvas layer enhancements(DIP)

* feedback fixes

* fixing build

* dip

* dip

* dip

* fixing build

* dip

* dev fixes

* dip

* Fixing top bottom resize handles

* dip

* reposition widget name on top edges.

* dip

* dip

* dip

* dip

* renaming selectedWidget to lastSelectedWidget

* code clean up

* Fixing list widget as per grid scale.

* Fixing existing specs.

* Adding migration test cases.

* dip

* FIxing proppane in modal.

* fixing modal z-indedx.

* fix for modal name.

* dip

* dip

* dip

* adding test cases for hotkeys.

* dip

* dip

* fixing build

* Trying some performance improvements for jests.

* 17 mins with runinband lets try without it.

* minor bug fixes.

* code clean up

* save migrated app on fetch.

* fixing few cypress tests

* fixing cypress tests

* fixing cypress tests.

* fixing cypress

* updated DSL

* Addressing code review comments.

* test fails

* dip

* eslint fixes.

* fixing debugger cypress tests.

* updating latest page version.

* updating migration changes to cypress dsl's.

* updating chart data fixes for cypress tests.

Co-authored-by: Apple <nandan@thinkify.io>
---
 .../cypress/fixtures/CanvasResizeDsl.json     |   2 +-
 app/client/cypress/fixtures/Mapdsl.json       |   2 +-
 .../cypress/fixtures/chartUpdatedDsl.json     | 184 +++++++++++
 .../cypress/fixtures/displayWidgetDsl.json    |   1 -
 app/client/cypress/fixtures/formdsl.json      |   2 +-
 .../Applications/DuplicateApplication_spec.js |   1 +
 .../Applications/ForkApplication_spec.js      |   1 +
 .../ClientSideTests/Debugger/Logs_spec.js     |   1 +
 .../DisplayWidgets/Chart_spec.js              |   8 +-
 .../DisplayWidgets/Modal_spec.js              |   2 +-
 .../Entity_Explorer_DragAndDropWidget_spec.js |   3 +-
 ...y_Paste_Delete_Undo_Keyboard_Event_spec.js |   3 +-
 .../GlobalSearch/GlobalSearch_spec.js         |   4 +-
 .../Onboarding/Onboarding_spec.js             |   2 +-
 app/client/cypress/support/commands.js        |   8 +-
 app/client/jest.config.js                     |   3 +
 app/client/src/actions/pageActions.tsx        |   6 +
 app/client/src/actions/widgetActions.tsx      |  20 +-
 .../appsmith/PositionedContainer.tsx          |  16 +-
 .../designSystems/appsmith/TabsComponent.tsx  |   2 +-
 .../blueprint/ModalComponent.tsx              |   3 +-
 .../editorComponents/Debugger/index.tsx       |   2 +
 .../editorComponents/DragLayerComponent.tsx   |   5 +-
 .../editorComponents/DraggableComponent.tsx   |  24 +-
 .../editorComponents/DropTargetComponent.tsx  |   9 +-
 .../components/editorComponents/Dropzone.tsx  |   3 +
 .../editorComponents/ResizableComponent.tsx   |  17 +-
 .../components/editorComponents/Sidebar.tsx   |   3 +-
 .../WidgetNameComponent/SettingsControl.tsx   |   1 +
 .../WidgetNameComponent/index.tsx             |  35 +-
 app/client/src/constants/Colors.tsx           |   1 +
 app/client/src/constants/DefaultTheme.tsx     |   4 +-
 app/client/src/constants/Layers.tsx           |  17 +-
 .../src/constants/ReduxActionConstants.tsx    |   4 +
 app/client/src/constants/WidgetConstants.tsx  |  12 +-
 app/client/src/constants/messages.ts          |   4 +
 .../mockResponses/WidgetConfigResponse.tsx    | 191 +++++++----
 app/client/src/pages/Editor/Canvas.tsx        |   6 +-
 .../Editor/Explorer/Widgets/WidgetEntity.tsx  |   2 +-
 .../Editor/Explorer/Widgets/WidgetGroup.tsx   |   2 +-
 .../src/pages/Editor/GlobalHotKeys.test.tsx   | 105 ++++++
 app/client/src/pages/Editor/GlobalHotKeys.tsx |  57 +++-
 .../src/pages/Editor/PropertyPane/index.tsx   |   4 +-
 app/client/src/pages/Editor/WidgetCard.tsx    |  16 +-
 app/client/src/pages/Editor/WidgetsEditor.tsx |   8 +-
 .../reducers/uiReducers/dragResizeReducer.ts  |  49 ++-
 app/client/src/sagas/OnboardingSagas.ts       |  19 +-
 app/client/src/sagas/PageSagas.tsx            |  15 +-
 app/client/src/sagas/WidgetOperationSagas.tsx | 307 +++++++++++++-----
 app/client/src/sagas/index.tsx                |  73 +++--
 app/client/src/sagas/selectors.tsx            |  22 +-
 .../src/selectors/propertyPaneSelectors.tsx   |  23 +-
 app/client/src/selectors/ui.ts                |   7 +
 app/client/src/selectors/ui.tsx               |   4 -
 app/client/src/templates/default.ts           |   4 +-
 app/client/src/utils/AppsmithUtils.tsx        |   4 +
 .../src/utils/WidgetPropsUtils.test.tsx       |  67 ++++
 app/client/src/utils/WidgetPropsUtils.tsx     |  35 ++
 .../src/utils/hooks/dragResizeHooks.tsx       |  12 +-
 .../src/utils/hooks/useClickOpenPropPane.tsx  |  23 +-
 app/client/src/widgets/BaseWidget.tsx         |   1 +
 app/client/src/widgets/InputWidget.tsx        |   7 +-
 .../widgets/ListWidget/ListWidget.test.tsx    |   3 +-
 .../src/widgets/ListWidget/ListWidget.tsx     |   6 +-
 app/client/src/widgets/ModalWidget.tsx        |   6 +-
 .../src/widgets/Tabs/TabsWidget.test.tsx      |  39 +--
 app/client/src/widgets/Tabs/TabsWidget.tsx    |   6 +-
 .../test/factories/WidgetFactoryUtils.ts      |   7 +
 app/client/test/sagas.ts                      |  59 ++++
 app/client/test/setup.ts                      |  26 +-
 app/client/test/testCommon.tsx                |  81 +++++
 app/client/test/testUtils.tsx                 |  44 ++-
 72 files changed, 1396 insertions(+), 359 deletions(-)
 create mode 100644 app/client/cypress/fixtures/chartUpdatedDsl.json
 create mode 100644 app/client/src/pages/Editor/GlobalHotKeys.test.tsx
 create mode 100644 app/client/src/selectors/ui.ts
 delete mode 100644 app/client/src/selectors/ui.tsx
 create mode 100644 app/client/test/sagas.ts
 create mode 100644 app/client/test/testCommon.tsx

diff --git a/app/client/cypress/fixtures/CanvasResizeDsl.json b/app/client/cypress/fixtures/CanvasResizeDsl.json
index 0ade4a1ac2..f26b52f98f 100644
--- a/app/client/cypress/fixtures/CanvasResizeDsl.json
+++ b/app/client/cypress/fixtures/CanvasResizeDsl.json
@@ -7,7 +7,7 @@
         "detachFromLayout": true,
         "widgetId": "0",
         "topRow": 0,
-        "bottomRow": 2960,
+        "bottomRow": 740,
         "containerStyle": "none",
         "snapRows": 33,
         "parentRowSpace": 1,
diff --git a/app/client/cypress/fixtures/Mapdsl.json b/app/client/cypress/fixtures/Mapdsl.json
index 490ab5f87b..2f75e8c860 100644
--- a/app/client/cypress/fixtures/Mapdsl.json
+++ b/app/client/cypress/fixtures/Mapdsl.json
@@ -144,7 +144,7 @@
                 "parentRowSpace": 38,
                 "leftColumn": 3,
                 "rightColumn": 11,
-                "topRow": 0,
+                "topRow": 1,
                 "bottomRow": 12,
                 "parentId": "yt4ouwn0sk",
                 "widgetId": "673etzjyv9",
diff --git a/app/client/cypress/fixtures/chartUpdatedDsl.json b/app/client/cypress/fixtures/chartUpdatedDsl.json
new file mode 100644
index 0000000000..20a57d6a5c
--- /dev/null
+++ b/app/client/cypress/fixtures/chartUpdatedDsl.json
@@ -0,0 +1,184 @@
+{
+    "dsl": {
+        "widgetName": "MainContainer",
+        "backgroundColor": "none",
+        "rightColumn": 966,
+        "snapColumns": 64,
+        "detachFromLayout": true,
+        "widgetId": "0",
+        "topRow": 0,
+        "bottomRow": 5168,
+        "containerStyle": "none",
+        "snapRows": 129,
+        "parentRowSpace": 1,
+        "type": "CANVAS_WIDGET",
+        "canExtend": true,
+        "version": 20,
+        "minHeight": 450,
+        "parentColumnSpace": 1,
+        "dynamicBindingPathList": [],
+        "leftColumn": 0,
+        "children": [
+            {
+                "backgroundColor": "#FFFFFF",
+                "widgetName": "Container1",
+                "rightColumn": 32,
+                "orientation": "VERTICAL",
+                "snapColumns": 16,
+                "widgetId": "mxbaasg65u",
+                "containerStyle": "card",
+                "topRow": 0,
+                "bottomRow": 36,
+                "parentRowSpace": 38,
+                "isVisible": true,
+                "type": "CONTAINER_WIDGET",
+                "version": 1,
+                "isLoading": false,
+                "parentColumnSpace": 75.25,
+                "dynamicBindingPathList": [],
+                "leftColumn": 0,
+                "children": [
+                    {
+                        "backgroundColor": "transparent",
+                        "widgetName": "59gdivzv7s",
+                        "rightColumn": 2408,
+                        "orientation": "VERTICAL",
+                        "snapColumns": 16,
+                        "detachFromLayout": true,
+                        "widgetId": "bxekwxgc1i",
+                        "containerStyle": "none",
+                        "topRow": 0,
+                        "bottomRow": 20,
+                        "parentRowSpace": 1,
+                        "isVisible": true,
+                        "type": "CANVAS_WIDGET",
+                        "canExtend": false,
+                        "version": 1,
+                        "isLoading": false,
+                        "parentColumnSpace": 1,
+                        "leftColumn": 0,
+                        "dynamicBindingPathList": [],
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "backgroundColor": "#FFFFFF",
+                "widgetName": "Container3",
+                "rightColumn": 64,
+                "orientation": "VERTICAL",
+                "snapColumns": 16,
+                "widgetId": "i331vll2mg",
+                "containerStyle": "card",
+                "topRow": 36,
+                "bottomRow": 92,
+                "parentRowSpace": 38,
+                "isVisible": true,
+                "type": "CONTAINER_WIDGET",
+                "version": 1,
+                "isLoading": false,
+                "parentColumnSpace": 75.25,
+                "dynamicBindingPathList": [],
+                "leftColumn": 0,
+                "children": [
+                    {
+                        "backgroundColor": "transparent",
+                        "widgetName": "rhfg2vf1n5",
+                        "rightColumn": 4816,
+                        "orientation": "VERTICAL",
+                        "snapColumns": 16,
+                        "detachFromLayout": true,
+                        "widgetId": "rglduihhzk",
+                        "containerStyle": "none",
+                        "topRow": 0,
+                        "bottomRow": 20,
+                        "parentRowSpace": 1,
+                        "isVisible": true,
+                        "type": "CANVAS_WIDGET",
+                        "canExtend": false,
+                        "version": 1,
+                        "isLoading": false,
+                        "parentColumnSpace": 1,
+                        "leftColumn": 0,
+                        "dynamicBindingPathList": [],
+                        "children": [
+                            {
+                                "isVisible": true,
+                                "widgetName": "Chart1",
+                                "chartType": "LINE_CHART",
+                                "chartName": "Last week's revenue",
+                                "allowHorizontalScroll": false,
+                                "version": 1,
+                                "chartData": {
+                                    "q4pm3w97mo": {
+                                        "seriesName": "Sales",
+                                        "data": ""
+                                    }
+                                },
+                                "xAxisName": "Last Week",
+                                "yAxisName": "Total Order Revenue $",
+                                "type": "CHART_WIDGET",
+                                "isLoading": false,
+                                "parentColumnSpace": 14.59375,
+                                "parentRowSpace": 10,
+                                "leftColumn": 20,
+                                "rightColumn": 44,
+                                "topRow": 16,
+                                "bottomRow": 48,
+                                "parentId": "rglduihhzk",
+                                "widgetId": "snzfh3qjo8",
+                                "dynamicBindingPathList": [],
+                                "dynamicTriggerPathList": []
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "backgroundColor": "#FFFFFF",
+                "widgetName": "Container4",
+                "rightColumn": 64,
+                "orientation": "VERTICAL",
+                "snapColumns": 16,
+                "widgetId": "qznzsquf70",
+                "containerStyle": "card",
+                "topRow": 0,
+                "bottomRow": 36,
+                "parentRowSpace": 38,
+                "isVisible": true,
+                "type": "CONTAINER_WIDGET",
+                "version": 1,
+                "isLoading": false,
+                "parentColumnSpace": 75.25,
+                "dynamicBindingPathList": [],
+                "leftColumn": 32,
+                "children": [
+                    {
+                        "backgroundColor": "transparent",
+                        "widgetName": "3bn6uv0vy4",
+                        "rightColumn": 2408,
+                        "orientation": "VERTICAL",
+                        "snapColumns": 16,
+                        "detachFromLayout": true,
+                        "widgetId": "7vm5mdu8ey",
+                        "containerStyle": "none",
+                        "topRow": 0,
+                        "bottomRow": 1368,
+                        "parentRowSpace": 1,
+                        "isVisible": true,
+                        "type": "CANVAS_WIDGET",
+                        "canExtend": false,
+                        "version": 1,
+                        "isLoading": false,
+                        "parentColumnSpace": 1,
+                        "leftColumn": 0,
+                        "dynamicBindingPathList": [],
+                        "children": [
+                            null
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/app/client/cypress/fixtures/displayWidgetDsl.json b/app/client/cypress/fixtures/displayWidgetDsl.json
index 01da343433..e2fbfa257b 100644
--- a/app/client/cypress/fixtures/displayWidgetDsl.json
+++ b/app/client/cypress/fixtures/displayWidgetDsl.json
@@ -14,7 +14,6 @@
        "type": "CANVAS_WIDGET",
        "canExtend": true,
        "dynamicBindingPathList": [],
-       "version": 4,
        "minHeight": 1292,
        "parentColumnSpace": 1,
        "leftColumn": 0,
diff --git a/app/client/cypress/fixtures/formdsl.json b/app/client/cypress/fixtures/formdsl.json
index 866f2a0255..f8859c48a5 100644
--- a/app/client/cypress/fixtures/formdsl.json
+++ b/app/client/cypress/fixtures/formdsl.json
@@ -199,7 +199,7 @@
                   "backgroundColor": "Gray",
                   "rightColumn": 11,
                   "widgetId": "z62mnh15y5",
-                  "topRow": 0,
+                  "topRow": 1,
                   "bottomRow": 13,
                   "parentRowSpace": 38,
                   "isVisible": true,
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/DuplicateApplication_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/DuplicateApplication_spec.js
index e824916c33..31427f6462 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/DuplicateApplication_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/DuplicateApplication_spec.js
@@ -6,6 +6,7 @@ let duplicateApplicationDsl;
 
 describe("Duplicate application", function() {
   before(() => {
+    dsl.dsl.version = 20; // latest migrated version
     cy.addDsl(dsl);
   });
 
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/ForkApplication_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/ForkApplication_spec.js
index f0d29008c1..4defd83f1b 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/ForkApplication_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Applications/ForkApplication_spec.js
@@ -5,6 +5,7 @@ let forkedApplicationDsl;
 
 describe("Fork application across orgs", function() {
   before(() => {
+    dsl.dsl.version = 20; // latest migrated version
     cy.addDsl(dsl);
   });
 
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js
index 992fe23a68..50309718f1 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js
@@ -15,6 +15,7 @@ describe("Debugger logs", function() {
   });
 
   it("Reset debugger state", function() {
+    cy.openPropertyPane("buttonwidget");
     cy.get(".t--property-control-visible")
       .find(".t--js-toggle")
       .click();
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js
index 261a1741fe..91abacd7e7 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Chart_spec.js
@@ -1,7 +1,7 @@
 const commonlocators = require("../../../../locators/commonlocators.json");
 const viewWidgetsPage = require("../../../../locators/ViewWidgets.json");
 const publish = require("../../../../locators/publishWidgetspage.json");
-const dsl = require("../../../../fixtures/displayWidgetDsl.json");
+const dsl = require("../../../../fixtures/chartUpdatedDsl.json");
 const pages = require("../../../../locators/Pages.json");
 
 describe("Chart Widget Functionality", function() {
@@ -43,7 +43,11 @@ describe("Chart Widget Functionality", function() {
     cy.get(viewWidgetsPage.chartType)
       .last()
       .should("have.text", "Column Chart");
-    cy.testJsontext("chartseries", JSON.stringify(this.data.chartInput));
+    cy.testJsontext(
+      "chart-series-data-control",
+      JSON.stringify(this.data.chartInput),
+    );
+    cy.get(".t--propertypane").click("right");
     cy.get(viewWidgetsPage.chartWidget)
       .should("be.visible")
       .and((chart) => {
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js
index ba257c5ae2..e36c3f6648 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js
@@ -8,7 +8,7 @@ describe("Modal Widget Functionality", function() {
 
   it("Add new Modal", () => {
     cy.get(explorer.addWidget).click();
-    cy.dragAndDropToCanvas("modalwidget", { x: 300, y: -300 });
+    cy.dragAndDropToCanvas("modalwidget", { x: 300, y: 300 });
     cy.get(".t--modal-widget").should("exist");
   });
 
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
index a2d387bd31..06b63c3340 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js
@@ -15,7 +15,8 @@ describe("Entity explorer Drag and Drop widgets testcases", function() {
     cy.get(commonlocators.entityExplorersearch)
       .clear()
       .type("form");
-    cy.dragAndDropToCanvas("formwidget", { x: 300, y: -300 });
+    cy.dragAndDropToCanvas("formwidget", { x: 300, y: 80 });
+    cy.get(formWidgetsPage.formD).click();
     /**
      * @param{Text} Random Text
      * @param{FormWidget}Mouseover
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js
index 79701336e5..2a4774093a 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Widgets_Copy_Paste_Delete_Undo_Keyboard_Event_spec.js
@@ -28,7 +28,8 @@ describe("Test Suite to validate copy/delete/undo functionalites", function() {
     cy.wait(500);
     cy.get(commonlocators.toastBody)
       .first()
-      .contains("Copied");
+      .contains("Copied")
+      .click();
     cy.get("body").type(`{${modifierKey}}v`, { force: true });
     cy.wait("@updateLayout").should(
       "have.nested.property",
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js
index 3f60f9e819..b6fabfd216 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/GlobalSearch/GlobalSearch_spec.js
@@ -42,8 +42,8 @@ describe("GlobalSearch", function() {
       .its("store")
       .invoke("getState")
       .then((state) => {
-        const { selectedWidget } = state.ui.widgetDragResize;
-        expect(selectedWidget).to.be.equal(table.widgetId);
+        const { lastSelectedWidget } = state.ui.widgetDragResize;
+        expect(lastSelectedWidget).to.be.equal(table.widgetId);
       });
   });
 
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/Onboarding_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/Onboarding_spec.js
index d8712160d2..98de0012e7 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/Onboarding_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Onboarding/Onboarding_spec.js
@@ -50,7 +50,7 @@ describe("Onboarding", function() {
 
         // Add widget
         cy.get(".t--add-widget").click();
-        cy.dragAndDropToCanvas("tablewidget", { x: 30, y: -30 });
+        cy.dragAndDropToCanvas("tablewidget", { x: 360, y: 20 });
 
         // wait for animation duration
         // eslint-disable-next-line cypress/no-unnecessary-waiting
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
index 9e4d949e44..5b8e20e933 100644
--- a/app/client/cypress/support/commands.js
+++ b/app/client/cypress/support/commands.js
@@ -2011,8 +2011,8 @@ Cypress.Commands.add("dragAndDropToCanvas", (widgetType, { x, y }) => {
     .trigger("mousedown", { button: 0 }, { force: true })
     .trigger("mousemove", x, y, { force: true });
   cy.get(explorer.dropHere)
-    .click()
-    .trigger("mouseup", { force: true });
+    .click(x, y + 20)
+    .trigger("mouseup", x, y + 20, { force: true });
 });
 
 Cypress.Commands.add("executeDbQuery", (queryName) => {
@@ -2035,7 +2035,9 @@ Cypress.Commands.add("openPropertyPane", (widgetType) => {
     .first()
     .trigger("mouseover", { force: true })
     .wait(500);
-  cy.get(`${selector}:first-of-type .t--widget-propertypane-toggle`)
+  cy.get(
+    `${selector}:first-of-type .t--widget-propertypane-toggle > .t--widget-name`,
+  )
     .first()
     .click({ force: true });
   // eslint-disable-next-line cypress/no-unnecessary-waiting
diff --git a/app/client/jest.config.js b/app/client/jest.config.js
index c88bf5f8ec..f390ccddc2 100644
--- a/app/client/jest.config.js
+++ b/app/client/jest.config.js
@@ -27,6 +27,9 @@ module.exports = {
     "test/(.*)": "<rootDir>/test/$1",
   },
   globals: {
+    "ts-jest": {
+      isolatedModules: true,
+    },
     APPSMITH_FEATURE_CONFIGS: {
       sentry: {
         dsn: parseConfig("__APPSMITH_SENTRY_DSN__"),
diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx
index f454c0349d..3bf4ab40ab 100644
--- a/app/client/src/actions/pageActions.tsx
+++ b/app/client/src/actions/pageActions.tsx
@@ -203,6 +203,12 @@ export type WidgetDelete = {
   isShortcut?: boolean;
 };
 
+export type MultipleWidgetDeletePayload = {
+  widgetIds: string[];
+  disallowUndo?: boolean;
+  isShortcut?: boolean;
+};
+
 export type WidgetResize = {
   widgetId: string;
   leftColumn: number;
diff --git a/app/client/src/actions/widgetActions.tsx b/app/client/src/actions/widgetActions.tsx
index 03e1f59548..be7a5674d4 100644
--- a/app/client/src/actions/widgetActions.tsx
+++ b/app/client/src/actions/widgetActions.tsx
@@ -65,11 +65,27 @@ export const focusWidget = (
 
 export const selectWidget = (
   widgetId?: string,
-): ReduxAction<{ widgetId?: string }> => ({
+  isMultiSelect?: boolean,
+): ReduxAction<{ widgetId?: string; isMultiSelect?: boolean }> => ({
   type: ReduxActionTypes.SELECT_WIDGET,
-  payload: { widgetId },
+  payload: { widgetId, isMultiSelect },
 });
 
+export const selectAllWidgets = (
+  widgetIds?: string[],
+): ReduxAction<{ widgetIds?: string[] }> => {
+  return {
+    type: ReduxActionTypes.SELECT_MULTIPLE_WIDGETS,
+    payload: { widgetIds },
+  };
+};
+
+export const selectAllWidgetsInit = () => {
+  return {
+    type: ReduxActionTypes.SELECT_MULTIPLE_WIDGETS_INIT,
+  };
+};
+
 export const showModal = (id: string) => {
   return {
     type: ReduxActionTypes.SHOW_MODAL,
diff --git a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
index db47d63a73..141b14ce28 100644
--- a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
+++ b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
@@ -1,9 +1,11 @@
-import React, { CSSProperties, ReactNode, useMemo } from "react";
+import React, { CSSProperties, ReactNode, useCallback, useMemo } from "react";
 import { BaseStyle } from "widgets/BaseWidget";
 import { WIDGET_PADDING } from "constants/WidgetConstants";
 import { generateClassName } from "utils/generators";
 import styled from "styled-components";
 import { useClickOpenPropPane } from "utils/hooks/useClickOpenPropPane";
+import { stopEventPropagation } from "utils/AppsmithUtils";
+import { Layers } from "constants/Layers";
 
 const PositionedWidget = styled.div`
   &:hover {
@@ -42,14 +44,24 @@ export function PositionedContainer(props: PositionedContainerProps) {
       height: props.style.componentHeight + (props.style.heightUnit || "px"),
       width: props.style.componentWidth + (props.style.widthUnit || "px"),
       padding: padding + "px",
+      zIndex: Layers.positionedWidget,
+      backgroundColor: "inherit",
     };
   }, [props.style]);
 
+  const openPropPane = useCallback((e) => openPropertyPane(e, props.widgetId), [
+    props.widgetId,
+    openPropertyPane,
+  ]);
+
   return (
     <PositionedWidget
       className={containerClassName}
+      data-testid="test-widget"
       id={props.widgetId}
-      onClickCapture={openPropertyPane}
+      onClick={stopEventPropagation}
+      // Positioned Widget is the top enclosure for all widgets and clicks on/inside the widget should not be propogated/bubbled out of this Container.
+      onClickCapture={openPropPane}
       //Before you remove: This is used by property pane to reference the element
       style={containerStyle}
     >
diff --git a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
index 75a541f905..db529b820c 100644
--- a/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/TabsComponent.tsx
@@ -44,7 +44,7 @@ const TabsContainerWrapper = styled.div<{
 `;
 
 const ChildrenWrapper = styled.div`
-  height: 100%;
+  height: calc(100% - 40px);
   width: 100%;
   position: relative;
   background: ${(props) => props.theme.colors.builderBodyBG};
diff --git a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
index e287d0662e..7057751358 100644
--- a/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/ModalComponent.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, RefObject, useRef, useEffect } from "react";
 import { Overlay, Classes } from "@blueprintjs/core";
 import styled from "styled-components";
 import { getCanvasClassName } from "utils/generators";
+import { Layers } from "constants/Layers";
 
 const Container = styled.div<{
   width: number;
@@ -80,7 +81,7 @@ export function ModalComponent(props: ModalComponentProps) {
       left={props.left}
       top={props.top}
       width={props.width}
-      zIndex={props.zIndex !== undefined ? props.zIndex : 2}
+      zIndex={props.zIndex !== undefined ? props.zIndex : Layers.modalWidget}
     >
       <Overlay
         canEscapeKeyClose={props.canEscapeKeyClose}
diff --git a/app/client/src/components/editorComponents/Debugger/index.tsx b/app/client/src/components/editorComponents/Debugger/index.tsx
index 368d73be84..3a7ceb08fa 100644
--- a/app/client/src/components/editorComponents/Debugger/index.tsx
+++ b/app/client/src/components/editorComponents/Debugger/index.tsx
@@ -10,8 +10,10 @@ import { showDebugger as showDebuggerAction } from "actions/debuggerActions";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { Colors } from "constants/Colors";
 import { getTypographyByKey } from "constants/DefaultTheme";
+import { Layers } from "constants/Layers";
 
 const Container = styled.div<{ errorCount: number }>`
+  z-index: ${Layers.debugger};
   background-color: ${(props) =>
     props.theme.colors.debugger.floatingButton.background};
   position: fixed;
diff --git a/app/client/src/components/editorComponents/DragLayerComponent.tsx b/app/client/src/components/editorComponents/DragLayerComponent.tsx
index cba0ce3b78..a4c82fa59e 100644
--- a/app/client/src/components/editorComponents/DragLayerComponent.tsx
+++ b/app/client/src/components/editorComponents/DragLayerComponent.tsx
@@ -31,8 +31,9 @@ const WrappedDragLayer = styled.div<{
   );
   background-size: ${(props) => props.columnWidth}px
     ${(props) => props.rowHeight}px;
-  background-position: -${(props) => props.columnWidth / 2}px -${(props) =>
-      props.rowHeight / 2}px;
+  background-position: -${(props) => props.columnWidth / 2 - 3.5}px -${(
+      props,
+    ) => props.rowHeight / 2 - 1.5}px;
 `;
 
 type DragLayerProps = {
diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index 6f20eedd6b..60f334bf90 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -68,9 +68,12 @@ function DraggableComponent(props: DraggableComponentProps) {
   // This state tells us which widget is selected
   // The value is the widgetId of the selected widget
   const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
+    (state: AppState) => state.ui.widgetDragResize.lastSelectedWidget,
   );
 
+  const selectedWidgets = useSelector(
+    (state: AppState) => state.ui.widgetDragResize.selectedWidgets,
+  );
   // This state tels us which widget is focused
   // The value is the widgetId of the focused widget.
   const focusedWidget = useSelector(
@@ -142,16 +145,6 @@ function DraggableComponent(props: DraggableComponentProps) {
   // True when any widget is dragging or resizing, including this one
   const isResizingOrDragging = !!isResizing || !!isDragging;
 
-  // When the draggable is clicked
-  const handleClick = (e: any) => {
-    if (!isResizingOrDragging) {
-      selectWidget &&
-        selectedWidget !== props.widgetId &&
-        selectWidget(props.widgetId);
-    }
-    e.stopPropagation();
-  };
-
   // When mouse is over this draggable
   const handleMouseOver = (e: any) => {
     focusWidget &&
@@ -160,7 +153,9 @@ function DraggableComponent(props: DraggableComponentProps) {
       focusWidget(props.widgetId);
     e.stopPropagation();
   };
-
+  const shouldRenderComponent = !(
+    selectedWidgets.includes(props.widgetId) && isDragging
+  );
   // Display this draggable based on the current drag state
   const style: CSSProperties = {
     display: isCurrentWidgetDragging ? "none" : "block",
@@ -187,14 +182,9 @@ function DraggableComponent(props: DraggableComponentProps) {
 
   const className = `${classNameForTesting}`;
 
-  const shouldRenderComponent = !(
-    selectedWidget === props.widgetId && isDragging
-  );
-
   return (
     <DraggableWrapper
       className={className}
-      onClick={handleClick}
       onMouseOver={handleMouseOver}
       ref={drag}
       style={style}
diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx
index d8c21c0694..631cf4f8a1 100644
--- a/app/client/src/components/editorComponents/DropTargetComponent.tsx
+++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx
@@ -74,7 +74,7 @@ export function DropTargetComponent(props: DropTargetComponentProps) {
   const { updateWidget } = useContext(EditorContext);
   const occupiedSpaces = useSelector(getOccupiedSpaces);
   const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
+    (state: AppState) => state.ui.widgetDragResize.lastSelectedWidget,
   );
   const isResizing = useSelector(
     (state: AppState) => state.ui.widgetDragResize.isResizing,
@@ -99,7 +99,7 @@ export function DropTargetComponent(props: DropTargetComponentProps) {
   const [rows, setRows] = useState(snapRows);
 
   const showPropertyPane = useShowPropertyPane();
-  const { focusWidget, selectWidget } = useWidgetSelection();
+  const { deselectAll, focusWidget, selectWidget } = useWidgetSelection();
   const updateCanvasSnapRows = useCanvasSnapRowsUpdateHook();
 
   useEffect(() => {
@@ -237,12 +237,9 @@ export function DropTargetComponent(props: DropTargetComponentProps) {
   const handleFocus = (e: any) => {
     if (!isResizing && !isDragging) {
       if (!props.parentId) {
-        selectWidget && selectWidget(props.widgetId);
+        deselectAll();
         focusWidget && focusWidget(props.widgetId);
         showPropertyPane && showPropertyPane();
-      } else {
-        selectWidget && selectWidget(props.parentId);
-        focusWidget && focusWidget(props.parentId);
       }
     }
     // commenting this out to allow propagation of click events
diff --git a/app/client/src/components/editorComponents/Dropzone.tsx b/app/client/src/components/editorComponents/Dropzone.tsx
index 29a83003d3..78cd278b8c 100644
--- a/app/client/src/components/editorComponents/Dropzone.tsx
+++ b/app/client/src/components/editorComponents/Dropzone.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { snapToGrid } from "utils/helpers";
 import { IntentColors } from "constants/DefaultTheme";
 import { useSpring, animated, interpolate, config } from "react-spring";
+import { Layers } from "constants/Layers";
 
 const SPRING_CONFIG = {
   ...config.gentle,
@@ -124,6 +125,7 @@ export const DropZone = forwardRef(
           height={props.height * props.parentRowHeight}
           ref={ref}
           style={{
+            zIndex: Layers.animatedDropZone,
             transform: interpolate(
               [X, Y],
               (x: number, y: number) => `translate3d(${x}px,${y}px,0)`,
@@ -135,6 +137,7 @@ export const DropZone = forwardRef(
           candrop={props.canDrop}
           height={props.height * props.parentRowHeight}
           style={{
+            zIndex: Layers.animatedSnappingDropZone,
             transform: interpolate(
               [snappedX, snappedY],
               (x: number, y: number) => `translate3d(${x}px,${y}px,0)`,
diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx
index 5fc2e4edc6..493e1d15e7 100644
--- a/app/client/src/components/editorComponents/ResizableComponent.tsx
+++ b/app/client/src/components/editorComponents/ResizableComponent.tsx
@@ -22,7 +22,7 @@ import {
 import { useSelector } from "react-redux";
 import { AppState } from "reducers";
 import Resizable from "resizable";
-import { isDropZoneOccupied, getSnapColumns } from "utils/WidgetPropsUtils";
+import { getSnapColumns, isDropZoneOccupied } from "utils/WidgetPropsUtils";
 import {
   VisibilityContainer,
   LeftHandleStyles,
@@ -58,7 +58,10 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
   const { selectWidget } = useWidgetSelection();
   const { setIsResizing } = useWidgetDragResize();
   const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
+    (state: AppState) => state.ui.widgetDragResize.lastSelectedWidget,
+  );
+  const selectedWidgets = useSelector(
+    (state: AppState) => state.ui.widgetDragResize.selectedWidgets,
   );
   const focusedWidget = useSelector(
     (state: AppState) => state.ui.widgetDragResize.focusedWidget,
@@ -70,6 +73,7 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
   const isResizing = useSelector(
     (state: AppState) => state.ui.widgetDragResize.isResizing,
   );
+
   const occupiedSpacesBySiblingWidgets =
     occupiedSpaces && props.parentId && occupiedSpaces[props.parentId]
       ? occupiedSpaces[props.parentId]
@@ -77,7 +81,9 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
 
   // isFocused (string | boolean) -> isWidgetFocused (boolean)
   const isWidgetFocused =
-    focusedWidget === props.widgetId || selectedWidget === props.widgetId;
+    focusedWidget === props.widgetId ||
+    selectedWidget === props.widgetId ||
+    selectedWidgets.includes(props.widgetId);
 
   // Calculate the dimensions of the widget,
   // The ResizableContainer's size prop is controlled
@@ -139,9 +145,10 @@ export const ResizableComponent = memo((props: ResizableComponentProps) => {
       return true;
     }
 
+    // Minimum row and columns to be set to a widget.
     if (
-      newRowCols.rightColumn - newRowCols.leftColumn < 1 ||
-      newRowCols.bottomRow - newRowCols.topRow < 1
+      newRowCols.rightColumn - newRowCols.leftColumn < 2 ||
+      newRowCols.bottomRow - newRowCols.topRow < 4
     ) {
       return true;
     }
diff --git a/app/client/src/components/editorComponents/Sidebar.tsx b/app/client/src/components/editorComponents/Sidebar.tsx
index 8282baf2ff..73093e7658 100644
--- a/app/client/src/components/editorComponents/Sidebar.tsx
+++ b/app/client/src/components/editorComponents/Sidebar.tsx
@@ -7,12 +7,13 @@ import * as Sentry from "@sentry/react";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
+import { Layers } from "constants/Layers";
 
 const SidebarWrapper = styled.div`
   background-color: ${Colors.MINE_SHAFT};
   padding: 0;
   width: ${(props) => props.theme.sidebarWidth};
-  z-index: 3;
+  z-index: ${Layers.sideBar};
 
   color: ${(props) => props.theme.colors.textOnDarkBG};
   overflow-y: auto;
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
index 6e3dfc2255..e0409bc315 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/SettingsControl.tsx
@@ -119,6 +119,7 @@ export function SettingsControl(props: SettingsControlProps) {
     >
       <SettingsWrapper
         className="t--widget-propertypane-toggle"
+        data-testid="t--widget-propertypane-toggle"
         onClick={props.toggleSettings}
         style={getStyles(props.activity, props.errorCount)}
       >
diff --git a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
index 98d46c85d1..c4e1d5473c 100644
--- a/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
+++ b/app/client/src/components/editorComponents/WidgetNameComponent/index.tsx
@@ -9,19 +9,20 @@ import {
   useWidgetSelection,
 } from "utils/hooks/dragResizeHooks";
 import AnalyticsUtil from "utils/AnalyticsUtil";
-import { WidgetType } from "constants/WidgetConstants";
+import { WidgetType, WidgetTypes } from "constants/WidgetConstants";
 import PerformanceTracker, {
   PerformanceTransactionName,
 } from "utils/PerformanceTracker";
 
-const PositionStyle = styled.div`
+const PositionStyle = styled.div<{ topRow: number }>`
   position: absolute;
-  top: -${(props) => props.theme.spaces[10]}px;
+  top: ${(props) =>
+    props.topRow > 2 ? `${-1 * props.theme.spaces[10]}px` : "calc(100%)"};
   height: ${(props) => props.theme.spaces[10]}px;
-  width: 100%;
-  left: 0;
+  right: 0;
   display: flex;
   padding: 0 4px;
+  cursor: pointer;
 `;
 
 const ControlGroup = styled.div`
@@ -41,6 +42,7 @@ type WidgetNameComponentProps = {
   parentId?: string;
   type: WidgetType;
   showControls?: boolean;
+  topRow: number;
   errorCount: number;
 };
 
@@ -52,7 +54,10 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
     (state: AppState) => state.ui.propertyPane,
   );
   const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
+    (state: AppState) => state.ui.widgetDragResize.lastSelectedWidget,
+  );
+  const selectedWidgets = useSelector(
+    (state: AppState) => state.ui.widgetDragResize.selectedWidgets,
   );
   const focusedWidget = useSelector(
     (state: AppState) => state.ui.widgetDragResize.focusedWidget,
@@ -91,25 +96,35 @@ export function WidgetNameComponent(props: WidgetNameComponentProps) {
     e.preventDefault();
     e.stopPropagation();
   };
+  const showAsSelected =
+    selectedWidget === props.widgetId ||
+    selectedWidgets.includes(props.widgetId);
 
   const showWidgetName =
     props.showControls ||
-    ((focusedWidget === props.widgetId || selectedWidget === props.widgetId) &&
+    ((focusedWidget === props.widgetId || showAsSelected) &&
       !isDragging &&
       !isResizing) ||
     !!props.errorCount;
 
-  let currentActivity = Activities.NONE;
+  let currentActivity =
+    props.type === WidgetTypes.MODAL_WIDGET
+      ? Activities.HOVERING
+      : Activities.NONE;
   if (focusedWidget === props.widgetId) currentActivity = Activities.HOVERING;
-  if (selectedWidget === props.widgetId) currentActivity = Activities.SELECTED;
+  if (showAsSelected) currentActivity = Activities.SELECTED;
   if (
+    showAsSelected &&
     propertyPaneState.isVisible &&
     propertyPaneState.widgetId === props.widgetId
   )
     currentActivity = Activities.ACTIVE;
 
   return showWidgetName ? (
-    <PositionStyle data-testid="t--settings-controls-positioned-wrapper">
+    <PositionStyle
+      data-testid="t--settings-controls-positioned-wrapper"
+      topRow={props.topRow}
+    >
       <ControlGroup>
         <SettingsControl
           activity={currentActivity}
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index 0099b1ee0f..3019078c18 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -10,6 +10,7 @@ export const Colors: Record<string, string> = {
   MYSTIC: "#E1E8ED",
   AQUA_HAZE: "#EEF2F5",
   GRAY_CHATEAU: "#A2A6A8",
+  DARK_GRAY: "#A9A7A7",
   LIGHT_GREYISH_BLUE: "#B0BFCB",
   SUNGLOW: "#FFCB33",
   SOFT_ORANGE: "#f7c75b",
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 44040d2d35..b2aa0c35bc 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -2151,7 +2151,7 @@ export const theme: Theme = {
     paneTextUnderline: Colors.LIGHT_GREYISH_BLUE,
     paneSectionLabel: Colors.CADET_BLUE,
     navBG: Colors.SHARK,
-    grid: Colors.TROUT,
+    grid: Colors.ALTO2,
     containerBorder: Colors.FRENCH_PASS,
     menuButtonBGInactive: Colors.JUNGLE_MIST,
     menuIconColorInactive: Colors.OXFORD_BLUE,
@@ -2229,7 +2229,7 @@ export const theme: Theme = {
   },
   headerHeight: "48px",
   smallHeaderHeight: "35px",
-  canvasPadding: "20px 0 200px 0",
+  canvasPadding: "0 0 200px 0",
   sideNav: {
     maxWidth: 220,
     minWidth: 50,
diff --git a/app/client/src/constants/Layers.tsx b/app/client/src/constants/Layers.tsx
index 7942685514..d920d0a20e 100644
--- a/app/client/src/constants/Layers.tsx
+++ b/app/client/src/constants/Layers.tsx
@@ -14,9 +14,24 @@ enum Indices {
 
 export const Layers = {
   dropZone: Indices.Layer0,
+
   dragPreview: Indices.Layer1,
-  widgetName: Indices.Layer2,
+  // All Widgets Parent layer
+  positionedWidget: Indices.Layer1,
+  // Modal needs to higher than other widgets.
+  modalWidget: Indices.Layer2,
+  // Layers when dragging
+  animatedSnappingDropZone: Indices.Layer2,
+
+  animatedDropZone: Indices.Layer3,
+  // Must be higher than any widget
+  widgetName: Indices.Layer3,
   apiPane: Indices.Layer3,
+  // Propane needs to match sidebar to show propane on top side bar.
+  // Sidebar needs to be more than modal so that u can use side bar whilst u have the modal showing up on the canvas.
+  sideBar: Indices.Layer3,
+  propertyPane: Indices.Layer3,
+
   help: Indices.Layer4,
   dynamicAutoComplete: Indices.Layer5,
   debugger: Indices.Layer6,
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
index 6a38c03ab5..3bc34f2071 100644
--- a/app/client/src/constants/ReduxActionConstants.tsx
+++ b/app/client/src/constants/ReduxActionConstants.tsx
@@ -102,6 +102,8 @@ export const ReduxActionTypes: { [key: string]: string } = {
   WIDGET_MOVE: "WIDGET_MOVE",
   WIDGET_RESIZE: "WIDGET_RESIZE",
   WIDGET_DELETE: "WIDGET_DELETE",
+  WIDGET_BULK_DELETE: "WIDGET_BULK_DELETE",
+  WIDGET_SINGLE_DELETE: "WIDGET_SINGLE_DELETE",
   SHOW_PROPERTY_PANE: "SHOW_PROPERTY_PANE",
   UPDATE_CANVAS_LAYOUT: "UPDATE_CANVAS_LAYOUT",
   UPDATE_WIDGET_PROPERTY_REQUEST: "UPDATE_WIDGET_PROPERTY_REQUEST",
@@ -258,6 +260,8 @@ export const ReduxActionTypes: { [key: string]: string } = {
   INVITED_USER_SIGNUP_INIT: "INVITED_USER_SIGNUP_INIT",
   DISABLE_WIDGET_DRAG: "DISABLE_WIDGET_DRAG",
   SELECT_WIDGET: "SELECT_WIDGET",
+  SELECT_MULTIPLE_WIDGETS: "SELECT_MULTIPLE_WIDGETS",
+  SELECT_MULTIPLE_WIDGETS_INIT: "SELECT_MULTIPLE_WIDGETS_INIT",
   FOCUS_WIDGET: "FOCUS_WIDGET",
   SET_WIDGET_DRAGGING: "SET_WIDGET_DRAGGING",
   SET_WIDGET_RESIZING: "SET_WIDGET_RESIZING",
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 8d477e78d7..12c34a9ff1 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -96,19 +96,23 @@ export const layoutConfigurations: LayoutConfigurations = {
   FLUID: { minWidth: -1, maxWidth: -1 },
 };
 
+export const LATEST_PAGE_VERSION = 20;
+
 export const GridDefaults = {
   DEFAULT_CELL_SIZE: 1,
   DEFAULT_WIDGET_WIDTH: 200,
   DEFAULT_WIDGET_HEIGHT: 100,
-  DEFAULT_GRID_COLUMNS: 16,
-  DEFAULT_GRID_ROW_HEIGHT: 40,
+  DEFAULT_GRID_COLUMNS: 64,
+  DEFAULT_GRID_ROW_HEIGHT: 10,
   CANVAS_EXTENSION_OFFSET: 2,
 };
 
+// calculated as (GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.8;
 export const CONTAINER_GRID_PADDING =
-  (GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.8;
+  GridDefaults.DEFAULT_GRID_ROW_HEIGHT * 0.4;
 
-export const WIDGET_PADDING = (GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.2;
+// calculated as (GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 0.5) * 0.2;
+export const WIDGET_PADDING = GridDefaults.DEFAULT_GRID_ROW_HEIGHT * 0.4;
 
 export const WIDGET_CLASSNAME_PREFIX = "WIDGET_";
 export const MAIN_CONTAINER_WIDGET_ID = "0";
diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts
index 363db122e2..38c0ec9c7c 100644
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@@ -247,6 +247,8 @@ export const ERROR_EVAL_TRIGGER = (message: string) =>
 
 export const WIDGET_DELETE = (widgetName: string) =>
   `${widgetName} widget deleted`;
+export const WIDGET_BULK_DELETE = (widgetName: string) =>
+  `${widgetName} widgets deleted`;
 export const WIDGET_COPY = (widgetName: string) => `Copied ${widgetName}`;
 export const ERROR_WIDGET_COPY_NO_WIDGET_SELECTED = () =>
   `Please select a widget to copy`;
@@ -255,6 +257,8 @@ export const ERROR_WIDGET_COPY_NOT_ALLOWED = () =>
 export const WIDGET_CUT = (widgetName: string) => `Cut ${widgetName}`;
 export const ERROR_WIDGET_CUT_NO_WIDGET_SELECTED = () =>
   `Please select a widget to cut`;
+export const SELECT_ALL_WIDGETS_MSG = () =>
+  `All widgets in this page including modals have been selected`;
 export const ERROR_ADD_WIDGET_FROM_QUERY = () => `Failed to add widget`;
 
 export const REST_API_AUTHORIZATION_SUCCESSFUL = () =>
diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
index 7899c9e378..521ce177cf 100644
--- a/app/client/src/mockResponses/WidgetConfigResponse.tsx
+++ b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -9,6 +9,10 @@ import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReduc
 import { getDynamicBindings } from "utils/DynamicBindingUtils";
 import { Colors } from "constants/Colors";
 import FileDataTypes from "widgets/FileDataTypes";
+/*
+ ********************************{Grid Density Migration}*********************************
+ */
+export const GRID_DENSITY_MIGRATION_V1 = 4;
 
 /**
  * this config sets the default values of properties being used in the widget
@@ -18,8 +22,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     BUTTON_WIDGET: {
       text: "Submit",
       buttonStyle: "PRIMARY_BUTTON",
-      rows: 1,
-      columns: 2,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 2 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Button",
       isDisabled: false,
       isVisible: true,
@@ -32,15 +36,15 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       fontStyle: "BOLD",
       textAlign: "LEFT",
       textColor: Colors.THUNDER,
-      rows: 1,
-      columns: 4,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 4 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Text",
       version: 1,
     },
     RICH_TEXT_EDITOR_WIDGET: {
       defaultText: "This is the initial <b>content</b> of the editor",
-      rows: 5,
-      columns: 8,
+      rows: 5 * GRID_DENSITY_MIGRATION_V1,
+      columns: 8 * GRID_DENSITY_MIGRATION_V1,
       isDisabled: false,
       isVisible: true,
       widgetName: "RichTextEditor",
@@ -54,16 +58,16 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       imageShape: "RECTANGLE",
       maxZoomLevel: 1,
       image: "",
-      rows: 3,
-      columns: 4,
+      rows: 3 * GRID_DENSITY_MIGRATION_V1,
+      columns: 4 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Image",
       version: 1,
     },
     INPUT_WIDGET: {
       inputType: "TEXT",
-      rows: 1,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
       label: "",
-      columns: 5,
+      columns: 5 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Input",
       version: 1,
       resetOnSubmit: true,
@@ -72,8 +76,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     },
     SWITCH_WIDGET: {
       label: "Label",
-      rows: 1,
-      columns: 2,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 2 * GRID_DENSITY_MIGRATION_V1,
       defaultSwitchState: true,
       widgetName: "Switch",
       alignWidget: "LEFT",
@@ -82,14 +86,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     },
     ICON_WIDGET: {
       widgetName: "Icon",
-      rows: 1,
-      columns: 1,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 1 * GRID_DENSITY_MIGRATION_V1,
       version: 1,
     },
     CONTAINER_WIDGET: {
       backgroundColor: "#FFFFFF",
-      rows: 10,
-      columns: 8,
+      rows: 10 * GRID_DENSITY_MIGRATION_V1,
+      columns: 8 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Container",
       containerStyle: "card",
       children: [],
@@ -112,10 +116,10 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     DATE_PICKER_WIDGET: {
       isDisabled: false,
       datePickerType: "DATE_PICKER",
-      rows: 1,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
       label: "",
       dateFormat: "YYYY-MM-DD HH:mm",
-      columns: 5,
+      columns: 5 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "DatePicker",
       defaultDate: moment().format("YYYY-MM-DD HH:mm"),
       version: 1,
@@ -123,10 +127,10 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     DATE_PICKER_WIDGET2: {
       isDisabled: false,
       datePickerType: "DATE_PICKER",
-      rows: 1,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
       label: "",
       dateFormat: "YYYY-MM-DD HH:mm",
-      columns: 5,
+      columns: 5 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "DatePicker",
       defaultDate: moment().toISOString(),
       minDate: "2001-01-01 00:00",
@@ -135,16 +139,16 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       isRequired: false,
     },
     VIDEO_WIDGET: {
-      rows: 7,
-      columns: 7,
+      rows: 7 * GRID_DENSITY_MIGRATION_V1,
+      columns: 7 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Video",
       url: "https://www.youtube.com/watch?v=mzqK0QIZRLs",
       autoPlay: false,
       version: 1,
     },
     TABLE_WIDGET: {
-      rows: 7,
-      columns: 8,
+      rows: 7 * GRID_DENSITY_MIGRATION_V1,
+      columns: 8 * GRID_DENSITY_MIGRATION_V1,
       label: "Data",
       widgetName: "Table",
       searchKey: "",
@@ -262,8 +266,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       version: 1,
     },
     DROP_DOWN_WIDGET: {
-      rows: 1,
-      columns: 5,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 5 * GRID_DENSITY_MIGRATION_V1,
       label: "",
       selectionType: "SINGLE_SELECT",
       options: [
@@ -278,8 +282,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       isDisabled: false,
     },
     CHECKBOX_WIDGET: {
-      rows: 1,
-      columns: 3,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 3 * GRID_DENSITY_MIGRATION_V1,
       label: "Label",
       defaultCheckedState: true,
       widgetName: "Checkbox",
@@ -289,8 +293,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       isRequired: false,
     },
     RADIO_GROUP_WIDGET: {
-      rows: 2,
-      columns: 3,
+      rows: 2 * GRID_DENSITY_MIGRATION_V1,
+      columns: 3 * GRID_DENSITY_MIGRATION_V1,
       label: "",
       options: [
         { label: "Yes", value: "Y" },
@@ -303,11 +307,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       isDisabled: false,
     },
     FILE_PICKER_WIDGET: {
-      rows: 1,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
       files: [],
       allowedFileTypes: [],
       label: "Select Files",
-      columns: 4,
+      columns: 4 * GRID_DENSITY_MIGRATION_V1,
       maxNumFiles: 1,
       maxFileSize: 5,
       fileDataType: FileDataTypes.Base64,
@@ -318,8 +322,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       isDisabled: false,
     },
     TABS_WIDGET: {
-      rows: 7,
-      columns: 8,
+      rows: 7 * GRID_DENSITY_MIGRATION_V1,
+      columns: 8 * GRID_DENSITY_MIGRATION_V1,
       shouldScrollContents: false,
       widgetName: "Tabs",
       tabsObj: {
@@ -367,8 +371,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       version: 2,
     },
     MODAL_WIDGET: {
-      rows: 6,
-      columns: 6,
+      rows: 6 * GRID_DENSITY_MIGRATION_V1,
+      columns: 6 * GRID_DENSITY_MIGRATION_V1,
       size: "MODAL_SMALL",
       canEscapeKeyClose: true,
       // detachFromLayout is set true for widgets that are not bound to the widgets within the layout.
@@ -396,8 +400,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                 view: [
                   {
                     type: "ICON_WIDGET",
-                    position: { left: 14, top: 0 },
-                    size: { rows: 1, cols: 2 },
+                    position: { left: 14 * GRID_DENSITY_MIGRATION_V1, top: 1 },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 2 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     props: {
                       iconName: "cross",
                       iconSize: 24,
@@ -407,8 +414,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                   },
                   {
                     type: "TEXT_WIDGET",
-                    position: { left: 0, top: 0 },
-                    size: { rows: 1, cols: 10 },
+                    position: { left: 1, top: 1 },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 10 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     props: {
                       text: "Modal Title",
                       fontSize: "HEADING1",
@@ -417,8 +427,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                   },
                   {
                     type: "BUTTON_WIDGET",
-                    position: { left: 9, top: 4 },
-                    size: { rows: 1, cols: 3 },
+                    position: {
+                      left: 9 * GRID_DENSITY_MIGRATION_V1,
+                      top: 4 * GRID_DENSITY_MIGRATION_V1,
+                    },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 3 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     props: {
                       text: "Cancel",
                       buttonStyle: "SECONDARY_BUTTON",
@@ -427,8 +443,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                   },
                   {
                     type: "BUTTON_WIDGET",
-                    position: { left: 12, top: 4 },
-                    size: { rows: 1, cols: 4 },
+                    position: {
+                      left: 12 * GRID_DENSITY_MIGRATION_V1,
+                      top: 4 * GRID_DENSITY_MIGRATION_V1,
+                    },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 4 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     props: {
                       text: "Confirm",
                       buttonStyle: "PRIMARY_BUTTON",
@@ -475,8 +497,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       version: 1,
     },
     CHART_WIDGET: {
-      rows: 8,
-      columns: 6,
+      rows: 8 * GRID_DENSITY_MIGRATION_V1,
+      columns: 6 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Chart",
       chartType: "LINE_CHART",
       chartName: "Last week's revenue",
@@ -521,16 +543,16 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       yAxisName: "Total Order Revenue $",
     },
     FORM_BUTTON_WIDGET: {
-      rows: 1,
-      columns: 3,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 3 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "FormButton",
       text: "Submit",
       isDefaultClickDisabled: true,
       version: 1,
     },
     FORM_WIDGET: {
-      rows: 13,
-      columns: 7,
+      rows: 13 * GRID_DENSITY_MIGRATION_V1,
+      columns: 7 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Form",
       backgroundColor: "white",
       children: [],
@@ -549,8 +571,11 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                 view: [
                   {
                     type: "TEXT_WIDGET",
-                    size: { rows: 1, cols: 6 },
-                    position: { top: 0, left: 0 },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 6 * GRID_DENSITY_MIGRATION_V1,
+                    },
+                    position: { top: 1, left: 1.5 },
                     props: {
                       text: "Form",
                       fontSize: "HEADING1",
@@ -559,8 +584,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                   },
                   {
                     type: "FORM_BUTTON_WIDGET",
-                    size: { rows: 1, cols: 4 },
-                    position: { top: 11, left: 12 },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 4 * GRID_DENSITY_MIGRATION_V1,
+                    },
+                    position: {
+                      top: 11.25 * GRID_DENSITY_MIGRATION_V1,
+                      left: 11.6 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     props: {
                       text: "Submit",
                       buttonStyle: "PRIMARY_BUTTON",
@@ -571,8 +602,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                   },
                   {
                     type: "FORM_BUTTON_WIDGET",
-                    size: { rows: 1, cols: 4 },
-                    position: { top: 11, left: 8 },
+                    size: {
+                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 4 * GRID_DENSITY_MIGRATION_V1,
+                    },
+                    position: {
+                      top: 11.25 * GRID_DENSITY_MIGRATION_V1,
+                      left: 7.5 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     props: {
                       text: "Reset",
                       buttonStyle: "SECONDARY_BUTTON",
@@ -589,8 +626,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       },
     },
     MAP_WIDGET: {
-      rows: 12,
-      columns: 8,
+      rows: 12 * GRID_DENSITY_MIGRATION_V1,
+      columns: 8 * GRID_DENSITY_MIGRATION_V1,
       isDisabled: false,
       isVisible: true,
       widgetName: "Map",
@@ -604,8 +641,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     },
     SKELETON_WIDGET: {
       isLoading: true,
-      rows: 1,
-      columns: 1,
+      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+      columns: 1 * GRID_DENSITY_MIGRATION_V1,
       widgetName: "Skeleton",
       version: 1,
     },
@@ -619,8 +656,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
     [WidgetTypes.LIST_WIDGET]: {
       backgroundColor: "",
       itemBackgroundColor: "white",
-      rows: 10,
-      columns: 8,
+      rows: 10 * GRID_DENSITY_MIGRATION_V1,
+      columns: 8 * GRID_DENSITY_MIGRATION_V1,
       gridType: "vertical",
       enhancements: {
         child: {
@@ -719,7 +756,10 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                 view: [
                   {
                     type: "CONTAINER_WIDGET",
-                    size: { rows: 4, cols: 16 },
+                    size: {
+                      rows: 4 * GRID_DENSITY_MIGRATION_V1,
+                      cols: 16 * GRID_DENSITY_MIGRATION_V1,
+                    },
                     position: { top: 0, left: 0 },
                     props: {
                       backgroundColor: "white",
@@ -744,7 +784,10 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                                 view: [
                                   {
                                     type: "IMAGE_WIDGET",
-                                    size: { rows: 3, cols: 4 },
+                                    size: {
+                                      rows: 3 * GRID_DENSITY_MIGRATION_V1,
+                                      cols: 4 * GRID_DENSITY_MIGRATION_V1,
+                                    },
                                     position: { top: 0, left: 0 },
                                     props: {
                                       defaultImage:
@@ -762,8 +805,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                                   },
                                   {
                                     type: "TEXT_WIDGET",
-                                    size: { rows: 1, cols: 6 },
-                                    position: { top: 0, left: 4 },
+                                    size: {
+                                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                                      cols: 6 * GRID_DENSITY_MIGRATION_V1,
+                                    },
+                                    position: {
+                                      top: 0,
+                                      left: 4 * GRID_DENSITY_MIGRATION_V1,
+                                    },
                                     props: {
                                       text: "{{currentItem.name}}",
                                       textStyle: "HEADING",
@@ -778,8 +827,14 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
                                   },
                                   {
                                     type: "TEXT_WIDGET",
-                                    size: { rows: 1, cols: 6 },
-                                    position: { top: 1, left: 4 },
+                                    size: {
+                                      rows: 1 * GRID_DENSITY_MIGRATION_V1,
+                                      cols: 6 * GRID_DENSITY_MIGRATION_V1,
+                                    },
+                                    position: {
+                                      top: 1 * GRID_DENSITY_MIGRATION_V1,
+                                      left: 4 * GRID_DENSITY_MIGRATION_V1,
+                                    },
                                     props: {
                                       text: "{{currentItem.num}}",
                                       textStyle: "BODY",
diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx
index 36d71047ed..f1bb5c20da 100644
--- a/app/client/src/pages/Editor/Canvas.tsx
+++ b/app/client/src/pages/Editor/Canvas.tsx
@@ -16,7 +16,11 @@ const Canvas = memo((props: CanvasProps) => {
     return (
       <>
         <PropertyPane />
-        <ArtBoard className="t--canvas-artboard" width={props.dsl.rightColumn}>
+        <ArtBoard
+          className="t--canvas-artboard"
+          data-testid="t--canvas-artboard"
+          width={props.dsl.rightColumn}
+        >
           {props.dsl.widgetId &&
             WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)}
         </ArtBoard>
diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
index adc67bc287..4c959e173c 100644
--- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
+++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx
@@ -80,7 +80,7 @@ const useWidget = (
   parentModalId?: string,
 ) => {
   const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
+    (state: AppState) => state.ui.widgetDragResize.lastSelectedWidget,
   );
   const isWidgetSelected = useMemo(() => selectedWidget === widgetId, [
     selectedWidget,
diff --git a/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx b/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx
index 4b42a13ced..4cd0ed234f 100644
--- a/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx
+++ b/app/client/src/pages/Editor/Explorer/Widgets/WidgetGroup.tsx
@@ -32,7 +32,7 @@ const StyledLink = styled(Link)`
 export const ExplorerWidgetGroup = memo((props: ExplorerWidgetGroupProps) => {
   const params = useParams<ExplorerURLParams>();
   const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
+    (state: AppState) => state.ui.widgetDragResize.lastSelectedWidget,
   );
 
   const childNode = (
diff --git a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx
new file mode 100644
index 0000000000..f3c7c75997
--- /dev/null
+++ b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx
@@ -0,0 +1,105 @@
+// These need to be at the top to avoid imports not being mocked. ideally should be in setup.ts but will override for all other tests
+const mockGenerator = function*() {
+  yield all([]);
+};
+
+// top avoid the first middleware run which wud initiate all sagas.
+jest.mock("sagas", () => ({
+  rootSaga: mockGenerator,
+}));
+
+// only the deafault exports are mocked to avoid overriding utilities exported out of them. defaults are marked to avoid worker initiation and page api calls in tests.
+jest.mock("sagas/EvaluationsSaga", () => ({
+  ...jest.requireActual("sagas/EvaluationsSaga"),
+  default: mockGenerator,
+}));
+jest.mock("sagas/PageSagas", () => ({
+  ...jest.requireActual("sagas/PageSagas"),
+  default: mockGenerator,
+}));
+
+import React from "react";
+import {
+  buildChildren,
+  widgetCanvasFactory,
+} from "test/factories/WidgetFactoryUtils";
+import { render, fireEvent } from "test/testUtils";
+import GlobalHotKeys from "./GlobalHotKeys";
+import MainContainer from "./MainContainer";
+import { MemoryRouter } from "react-router-dom";
+import * as utilities from "selectors/editorSelectors";
+import store from "store";
+import { sagasToRunForTests } from "test/sagas";
+import { all } from "@redux-saga/core/effects";
+import {
+  dispatchTestKeyboardEventWithCode,
+  MockApplication,
+  useMockDsl,
+} from "test/testCommon";
+const mockGetCanvasWidgetDsl = jest.spyOn(utilities, "getCanvasWidgetDsl");
+const mockGetIsFetchingPage = jest.spyOn(utilities, "getIsFetchingPage");
+function UpdatedMainContaner({ dsl }: any) {
+  useMockDsl(dsl);
+  return <MainContainer />;
+}
+
+it("Cmd + A - select all widgets on canvas", () => {
+  const children: any = buildChildren([
+    { type: "TABS_WIDGET" },
+    { type: "SWITCH_WIDGET" },
+  ]);
+  const dsl: any = widgetCanvasFactory.build({
+    children,
+  });
+  mockGetCanvasWidgetDsl.mockImplementation(() => dsl);
+  mockGetIsFetchingPage.mockImplementation(() => false);
+
+  const component = render(
+    <MemoryRouter initialEntries={["/applications/app_id/pages/page_id/edit"]}>
+      <MockApplication>
+        <GlobalHotKeys>
+          <UpdatedMainContaner dsl={dsl} />
+        </GlobalHotKeys>
+      </MockApplication>
+    </MemoryRouter>,
+    { initialState: store.getState(), sagasToRun: sagasToRunForTests },
+  );
+  let propPane = component.queryByTestId("t--propertypane");
+  expect(propPane).toBeNull();
+  const canvasWidgets = component.queryAllByTestId("test-widget");
+  expect(canvasWidgets.length).toBe(2);
+  if (canvasWidgets[1].firstChild) {
+    fireEvent.mouseOver(canvasWidgets[1].firstChild);
+    fireEvent.click(canvasWidgets[1].firstChild);
+  }
+  propPane = component.queryByTestId("t--propertypane");
+  expect(propPane).not.toBeNull();
+
+  const artBoard: any = component.queryByTestId("t--canvas-artboard");
+  // deselect all other widgets
+  fireEvent.click(artBoard);
+
+  dispatchTestKeyboardEventWithCode(
+    component.container,
+    "keydown",
+    "A",
+    65,
+    false,
+    true,
+  );
+  let selectedWidgets = component.queryAllByTestId(
+    "t--widget-propertypane-toggle",
+  );
+  expect(selectedWidgets.length).toBe(2);
+  dispatchTestKeyboardEventWithCode(
+    component.container,
+    "keydown",
+    "escape",
+    27,
+    false,
+    false,
+  );
+  selectedWidgets = component.queryAllByTestId("t--widget-propertypane-toggle");
+  expect(selectedWidgets.length).toBe(0);
+});
+afterAll(() => jest.resetModules());
diff --git a/app/client/src/pages/Editor/GlobalHotKeys.tsx b/app/client/src/pages/Editor/GlobalHotKeys.tsx
index 616fc39d59..fd619c508e 100644
--- a/app/client/src/pages/Editor/GlobalHotKeys.tsx
+++ b/app/client/src/pages/Editor/GlobalHotKeys.tsx
@@ -4,14 +4,17 @@ import { AppState } from "reducers";
 import { Hotkey, Hotkeys } from "@blueprintjs/core";
 import { HotkeysTarget } from "@blueprintjs/core/lib/esnext/components/hotkeys/hotkeysTarget.js";
 import {
+  closePropertyPane,
   copyWidget,
   cutWidget,
   deleteSelectedWidget,
   pasteWidget,
+  selectAllWidgetsInit,
+  selectAllWidgets,
 } from "actions/widgetActions";
 import { toggleShowGlobalSearchModal } from "actions/globalSearchActions";
 import { isMac } from "utils/helpers";
-import { getSelectedWidget } from "selectors/ui";
+import { getSelectedWidget, getSelectedWidgets } from "selectors/ui";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import { getSelectedText } from "utils/helpers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
@@ -30,7 +33,11 @@ type Props = {
   toggleShowGlobalSearchModal: () => void;
   resetCommentMode: () => void;
   openDebugger: () => void;
+  closeProppane: () => void;
+  selectAllWidgetsInit: () => void;
+  deselectAllWidgets: () => void;
   selectedWidget?: string;
+  selectedWidgets: string[];
   isDebuggerOpen: boolean;
   children: React.ReactNode;
 };
@@ -38,9 +45,13 @@ type Props = {
 @HotkeysTarget
 class GlobalHotKeys extends React.Component<Props> {
   public stopPropagationIfWidgetSelected(e: KeyboardEvent): boolean {
-    if (
+    const multipleWidgetsSelected =
+      this.props.selectedWidgets && this.props.selectedWidgets.length;
+    const singleWidgetSelected =
       this.props.selectedWidget &&
-      this.props.selectedWidget != MAIN_CONTAINER_WIDGET_ID &&
+      this.props.selectedWidget != MAIN_CONTAINER_WIDGET_ID;
+    if (
+      (singleWidgetSelected || multipleWidgetsSelected) &&
       !getSelectedText()
     ) {
       e.preventDefault();
@@ -50,6 +61,12 @@ class GlobalHotKeys extends React.Component<Props> {
     return false;
   }
 
+  public areMultipleWidgetsSelected() {
+    const multipleWidgetsSelected =
+      this.props.selectedWidgets && this.props.selectedWidgets.length >= 2;
+    return !!multipleWidgetsSelected;
+  }
+
   public renderHotkeys() {
     return (
       <Hotkeys>
@@ -103,7 +120,10 @@ class GlobalHotKeys extends React.Component<Props> {
           group="Canvas"
           label="Copy Widget"
           onKeyDown={(e: any) => {
-            if (this.stopPropagationIfWidgetSelected(e)) {
+            if (
+              this.stopPropagationIfWidgetSelected(e) &&
+              !this.areMultipleWidgetsSelected()
+            ) {
               this.props.copySelectedWidget();
             }
           }}
@@ -145,16 +165,35 @@ class GlobalHotKeys extends React.Component<Props> {
           group="Canvas"
           label="Cut Widget"
           onKeyDown={(e: any) => {
-            if (this.stopPropagationIfWidgetSelected(e)) {
+            if (
+              this.stopPropagationIfWidgetSelected(e) &&
+              !this.areMultipleWidgetsSelected()
+            ) {
               this.props.cutSelectedWidget();
             }
           }}
         />
+        <Hotkey
+          combo="mod + a"
+          global
+          group="Canvas"
+          label="Select all Widget"
+          onKeyDown={(e: any) => {
+            this.props.selectAllWidgetsInit();
+            e.preventDefault();
+          }}
+        />
         <Hotkey
           combo="esc"
           global
-          label="Escape"
-          onKeyDown={this.props.resetCommentMode}
+          group="Canvas"
+          label="Deselect all Widget"
+          onKeyDown={(e: any) => {
+            this.props.resetCommentMode();
+            this.props.deselectAllWidgets();
+            this.props.closeProppane();
+            e.preventDefault();
+          }}
         />
       </Hotkeys>
     );
@@ -167,6 +206,7 @@ class GlobalHotKeys extends React.Component<Props> {
 
 const mapStateToProps = (state: AppState) => ({
   selectedWidget: getSelectedWidget(state),
+  selectedWidgets: getSelectedWidgets(state),
   isDebuggerOpen: state.ui.debugger.isOpen,
 });
 
@@ -179,6 +219,9 @@ const mapDispatchToProps = (dispatch: any) => {
     toggleShowGlobalSearchModal: () => dispatch(toggleShowGlobalSearchModal()),
     resetCommentMode: () => dispatch(setCommentModeAction(false)),
     openDebugger: () => dispatch(showDebugger()),
+    closeProppane: () => dispatch(closePropertyPane()),
+    selectAllWidgetsInit: () => dispatch(selectAllWidgetsInit()),
+    deselectAllWidgets: () => dispatch(selectAllWidgets([])),
   };
 };
 
diff --git a/app/client/src/pages/Editor/PropertyPane/index.tsx b/app/client/src/pages/Editor/PropertyPane/index.tsx
index 3382066828..b7b3c705f4 100644
--- a/app/client/src/pages/Editor/PropertyPane/index.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/index.tsx
@@ -39,6 +39,7 @@ import PropertyPaneHelpButton from "pages/Editor/PropertyPaneHelpButton";
 import { getProppanePreference } from "selectors/usersSelectors";
 import { PropertyPanePositionConfig } from "reducers/uiReducers/usersReducer";
 import { get } from "lodash";
+import { Layers } from "constants/Layers";
 
 const PropertyPaneWrapper = styled(PaneWrapper)<{
   themeMode?: EditorTheme;
@@ -204,7 +205,7 @@ class PropertyPane extends Component<PropertyPaneProps, PropertyPaneState> {
           position={this.props?.propPanePreference?.position}
           targetNode={el}
           themeMode={this.getPopperTheme()}
-          zIndex={3}
+          zIndex={Layers.propertyPane}
         >
           {content}
         </Popper>
@@ -228,6 +229,7 @@ class PropertyPane extends Component<PropertyPaneProps, PropertyPaneState> {
     return (
       <PropertyPaneWrapper
         className={"t--propertypane"}
+        data-testid={"t--propertypane"}
         onClick={(e: any) => {
           e.stopPropagation();
         }}
diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx
index 545596a2b9..12fdcbbf76 100644
--- a/app/client/src/pages/Editor/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/WidgetCard.tsx
@@ -6,14 +6,11 @@ import styled from "styled-components";
 import { WidgetIcons } from "icons/WidgetIcons";
 import {
   useWidgetDragResize,
-  useShowPropertyPane,
   useWidgetSelection,
 } from "utils/hooks/dragResizeHooks";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { generateReactKey } from "utils/generators";
 import { Colors } from "constants/Colors";
-import { AppState } from "reducers";
-import { useSelector } from "react-redux";
 
 type CardProps = {
   details: WidgetCardProps;
@@ -81,15 +78,9 @@ export const IconLabel = styled.h5`
 
 function WidgetCard(props: CardProps) {
   const { setIsDragging } = useWidgetDragResize();
-  const { selectWidget } = useWidgetSelection();
-
-  const selectedWidget = useSelector(
-    (state: AppState) => state.ui.widgetDragResize.selectedWidget,
-  );
-
+  const { deselectAll } = useWidgetSelection();
   // Generate a new widgetId which can be used in the future for this widget.
   const [widgetId, setWidgetId] = useState(generateReactKey());
-  const showPropertyPane = useShowPropertyPane();
   const [, drag, preview] = useDrag({
     item: { ...props.details, widgetId },
     begin: () => {
@@ -97,11 +88,8 @@ function WidgetCard(props: CardProps) {
         widgetType: props.details.type,
         widgetName: props.details.widgetCardName,
       });
-      showPropertyPane && showPropertyPane(undefined);
       setIsDragging && setIsDragging(true);
-
-      // Make sure that this widget is selected
-      selectWidget && selectedWidget !== widgetId && selectWidget(widgetId);
+      deselectAll();
     },
     end: (widget, monitor) => {
       AnalyticsUtil.logEvent("WIDGET_CARD_DROP", {
diff --git a/app/client/src/pages/Editor/WidgetsEditor.tsx b/app/client/src/pages/Editor/WidgetsEditor.tsx
index 365361f36d..9e50109c1e 100644
--- a/app/client/src/pages/Editor/WidgetsEditor.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor.tsx
@@ -25,6 +25,7 @@ import { getCurrentApplication } from "selectors/applicationSelectors";
 import { MainContainerLayoutControl } from "./MainContainerLayoutControl";
 import { useDynamicAppLayout } from "utils/hooks/useDynamicAppLayout";
 import Debugger from "components/editorComponents/Debugger";
+import { closePropertyPane } from "actions/widgetActions";
 
 const EditorWrapper = styled.div`
   display: flex;
@@ -53,7 +54,7 @@ const CanvasContainer = styled.section`
 
 /* eslint-disable react/display-name */
 function WidgetsEditor() {
-  const { focusWidget, selectWidget } = useWidgetSelection();
+  const { deselectAll, focusWidget, selectWidget } = useWidgetSelection();
   const params = useParams<{ applicationId: string; pageId: string }>();
   const dispatch = useDispatch();
 
@@ -98,8 +99,9 @@ function WidgetsEditor() {
 
   const handleWrapperClick = useCallback(() => {
     focusWidget && focusWidget();
-    selectWidget && selectWidget();
-  }, [focusWidget, selectWidget]);
+    deselectAll && deselectAll();
+    dispatch(closePropertyPane());
+  }, [focusWidget, deselectAll]);
 
   const pageLoading = (
     <Centered>
diff --git a/app/client/src/reducers/uiReducers/dragResizeReducer.ts b/app/client/src/reducers/uiReducers/dragResizeReducer.ts
index 5c825b6877..c7cd1a6dc3 100644
--- a/app/client/src/reducers/uiReducers/dragResizeReducer.ts
+++ b/app/client/src/reducers/uiReducers/dragResizeReducer.ts
@@ -1,11 +1,13 @@
 import { createImmerReducer } from "utils/AppsmithUtils";
 import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
+import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 
 const initialState: WidgetDragResizeState = {
   isDraggingDisabled: false,
   isDragging: false,
   isResizing: false,
-  selectedWidget: undefined,
+  lastSelectedWidget: undefined,
+  selectedWidgets: [],
   focusedWidget: undefined,
   selectedWidgetAncestory: [],
 };
@@ -31,9 +33,47 @@ export const widgetDraggingReducer = createImmerReducer(initialState, {
   },
   [ReduxActionTypes.SELECT_WIDGET]: (
     state: WidgetDragResizeState,
-    action: ReduxAction<{ widgetId?: string }>,
+    action: ReduxAction<{ widgetId?: string; isMultiSelect?: boolean }>,
   ) => {
-    state.selectedWidget = action.payload.widgetId;
+    if (action.payload.widgetId === MAIN_CONTAINER_WIDGET_ID) return;
+    if (action.payload.isMultiSelect) {
+      const widgetId = action.payload.widgetId || "";
+      const removeSelection = state.selectedWidgets.includes(widgetId);
+      if (removeSelection) {
+        state.selectedWidgets = state.selectedWidgets.filter(
+          (each) => each !== widgetId,
+        );
+      } else if (!!widgetId) {
+        state.selectedWidgets = [...state.selectedWidgets, widgetId];
+      }
+      if (state.selectedWidgets.length === 1) {
+        state.lastSelectedWidget = state.selectedWidgets[0];
+      } else {
+        state.lastSelectedWidget = "";
+      }
+    } else {
+      state.lastSelectedWidget = action.payload.widgetId;
+      if (action.payload.widgetId) {
+        state.selectedWidgets = [action.payload.widgetId];
+      } else {
+        state.selectedWidgets = [];
+      }
+    }
+  },
+  [ReduxActionTypes.SELECT_MULTIPLE_WIDGETS]: (
+    state: WidgetDragResizeState,
+    action: ReduxAction<{ widgetIds?: string[] }>,
+  ) => {
+    const { widgetIds } = action.payload;
+    if (widgetIds) {
+      if (widgetIds.length > 1) {
+        state.selectedWidgets = widgetIds || [];
+        state.lastSelectedWidget = "";
+      } else {
+        state.selectedWidgets = [];
+        state.lastSelectedWidget = widgetIds[0];
+      }
+    }
   },
   [ReduxActionTypes.FOCUS_WIDGET]: (
     state: WidgetDragResizeState,
@@ -53,9 +93,10 @@ export type WidgetDragResizeState = {
   isDraggingDisabled: boolean;
   isDragging: boolean;
   isResizing: boolean;
-  selectedWidget?: string;
+  lastSelectedWidget?: string;
   focusedWidget?: string;
   selectedWidgetAncestory: string[];
+  selectedWidgets: string[];
 };
 
 export default widgetDraggingReducer;
diff --git a/app/client/src/sagas/OnboardingSagas.ts b/app/client/src/sagas/OnboardingSagas.ts
index 256836c9a3..0a3372fc4c 100644
--- a/app/client/src/sagas/OnboardingSagas.ts
+++ b/app/client/src/sagas/OnboardingSagas.ts
@@ -90,6 +90,7 @@ import {
 } from "../actions/controlActions";
 import OnSubmitGif from "assets/gifs/onsubmit.gif";
 import { checkAndGetPluginFormConfigsSaga } from "sagas/PluginSagas";
+import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse";
 
 export const getCurrentStep = (state: AppState) =>
   state.ui.onBoarding.currentStep;
@@ -674,14 +675,14 @@ function* addWidget(widgetConfig: any) {
 }
 
 const getStandupTableDimensions = () => {
-  const columns = 16;
-  const rows = 15;
-  const topRow = 2;
+  const columns = 16 * GRID_DENSITY_MIGRATION_V1;
+  const rows = 15 * GRID_DENSITY_MIGRATION_V1;
+  const topRow = 2 * GRID_DENSITY_MIGRATION_V1;
   const bottomRow = rows + topRow;
   return {
     parentRowSpace: 40,
     parentColumnSpace: 1,
-    topRow: 2,
+    topRow,
     bottomRow,
     leftColumn: 0,
     rightColumn: columns,
@@ -691,13 +692,13 @@ const getStandupTableDimensions = () => {
 };
 
 const getStandupInputDimensions = () => {
-  const columns = 6;
-  const rows = 1;
-  const leftColumn = 5;
+  const columns = 6 * GRID_DENSITY_MIGRATION_V1;
+  const rows = 1 * GRID_DENSITY_MIGRATION_V1;
+  const leftColumn = 5 * GRID_DENSITY_MIGRATION_V1;
   const rightColumn = leftColumn + columns;
   return {
-    topRow: 1,
-    bottomRow: 2,
+    topRow: 1 * GRID_DENSITY_MIGRATION_V1,
+    bottomRow: 2 * GRID_DENSITY_MIGRATION_V1,
     leftColumn,
     rightColumn,
     rows,
diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx
index 807b63af6c..4c7d33a305 100644
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@@ -20,6 +20,7 @@ import {
   updateCurrentPage,
   updateWidgetNameSuccess,
   updateAndSaveLayout,
+  saveLayout,
 } from "actions/pageActions";
 import PageApi, {
   ClonePageRequest,
@@ -49,7 +50,10 @@ import {
 import history from "utils/history";
 import { BUILDER_PAGE_URL } from "constants/routes";
 import { isNameValid } from "utils/helpers";
-import { extractCurrentDSL } from "utils/WidgetPropsUtils";
+import {
+  checkIfMigrationIsNeeded,
+  extractCurrentDSL,
+} from "utils/WidgetPropsUtils";
 import {
   getAllPageIds,
   getEditorConfigs,
@@ -182,6 +186,7 @@ export function* fetchPageSaga(
       id,
     });
     const isValidResponse = yield validateResponse(fetchPageResponse);
+    const willPageBeMigrated = checkIfMigrationIsNeeded(fetchPageResponse);
 
     if (isValidResponse) {
       // Clear any existing caches
@@ -196,12 +201,16 @@ export function* fetchPageSaga(
       yield put(updateCurrentPage(id));
       // dispatch fetch page success
       yield put(fetchPageSuccess());
-
+      const extractedDSL = extractCurrentDSL(fetchPageResponse);
       yield put({
         type: ReduxActionTypes.UPDATE_CANVAS_STRUCTURE,
-        payload: extractCurrentDSL(fetchPageResponse),
+        payload: extractedDSL,
       });
 
+      if (willPageBeMigrated) {
+        yield put(saveLayout());
+      }
+
       PerformanceTracker.stopAsyncTracking(
         PerformanceTransactionName.FETCH_PAGE_API,
       );
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index 4430950c51..a7e16db98b 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -4,6 +4,7 @@ import {
   ReduxActionTypes,
 } from "constants/ReduxActionConstants";
 import {
+  MultipleWidgetDeletePayload,
   updateAndSaveLayout,
   WidgetAddChild,
   WidgetAddChildren,
@@ -18,6 +19,7 @@ import {
 import {
   getSelectedWidget,
   getWidget,
+  getWidgetImmediateChildren,
   getWidgetMetaProps,
   getWidgets,
 } from "./selectors";
@@ -52,7 +54,7 @@ import {
   isPathADynamicTrigger,
 } from "utils/DynamicBindingUtils";
 import { WidgetProps } from "widgets/BaseWidget";
-import _, { cloneDeep, isString, set, remove } from "lodash";
+import _, { cloneDeep, flattenDeep, isString, set, remove } from "lodash";
 import WidgetFactory from "utils/WidgetFactory";
 import {
   buildWidgetBlueprint,
@@ -68,7 +70,9 @@ import {
   WidgetType,
   WidgetTypes,
 } from "constants/WidgetConstants";
-import WidgetConfigResponse from "mockResponses/WidgetConfigResponse";
+import WidgetConfigResponse, {
+  GRID_DENSITY_MIGRATION_V1,
+} from "mockResponses/WidgetConfigResponse";
 import {
   flushDeletedWidgets,
   getCopiedWidgets,
@@ -88,6 +92,8 @@ import {
 import {
   closePropertyPane,
   forceOpenPropertyPane,
+  selectAllWidgets,
+  selectWidget,
 } from "actions/widgetActions";
 import { getDataTree } from "selectors/dataTreeSelectors";
 import {
@@ -111,7 +117,9 @@ import {
   WIDGET_COPY,
   WIDGET_CUT,
   WIDGET_DELETE,
+  WIDGET_BULK_DELETE,
   ERROR_WIDGET_COPY_NOT_ALLOWED,
+  SELECT_ALL_WIDGETS_MSG,
 } from "constants/messages";
 import AppsmithConsole from "utils/AppsmithConsole";
 import { ENTITY_TYPE } from "entities/AppsmithConsole";
@@ -120,6 +128,7 @@ import {
   doesTriggerPathsContainPropertyPath,
   handleSpecificCasesWhilePasting,
 } from "./WidgetOperationUtils";
+import { getSelectedWidgets } from "selectors/ui";
 import { getParentWithEnhancementFn } from "./WidgetEnhancementHelpers";
 
 function* getChildWidgetProps(
@@ -448,6 +457,107 @@ const resizeCanvasToLowestWidget = (
     GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
 };
 
+export function* deleteAllSelectedWidgetsSaga(
+  deleteAction: ReduxAction<MultipleWidgetDeletePayload>,
+) {
+  try {
+    const { disallowUndo = false, isShortcut } = deleteAction.payload;
+    const stateWidgets = yield select(getWidgets);
+    const widgets = { ...stateWidgets };
+    const selectedWidgets: string[] = yield select(getSelectedWidgets);
+    if (!(selectedWidgets && selectedWidgets.length !== 1)) return;
+    const widgetsToBeDeleted = yield all(
+      selectedWidgets.map((eachId) => {
+        return call(getAllWidgetsInTree, eachId, widgets);
+      }),
+    );
+    const falttendedWidgets: any = flattenDeep(widgetsToBeDeleted);
+    const parentUpdatedWidgets = falttendedWidgets.reduce(
+      (allWidgets: any, eachWidget: any) => {
+        const { parentId, widgetId } = eachWidget;
+        const stateParent: FlattenedWidgetProps = allWidgets[parentId];
+        let parent = { ...stateParent };
+        if (parent.children) {
+          parent = {
+            ...parent,
+            children: parent.children.filter((c) => c !== widgetId),
+          };
+          allWidgets[parentId] = parent;
+        }
+        return allWidgets;
+      },
+      widgets,
+    );
+    const finalWidgets: CanvasWidgetsReduxState = _.omit(
+      parentUpdatedWidgets,
+      falttendedWidgets.map((widgets: any) => widgets.widgetId),
+    );
+
+    yield put(updateAndSaveLayout(finalWidgets));
+    yield put(selectWidget(""));
+    const bulkDeleteKey = selectedWidgets.join(",");
+    const saveStatus: boolean = yield saveDeletedWidgets(
+      falttendedWidgets,
+      bulkDeleteKey,
+    );
+    if (saveStatus && !disallowUndo) {
+      // close property pane after delete
+      yield put(closePropertyPane());
+      Toaster.show({
+        text: createMessage(WIDGET_BULK_DELETE, `${selectedWidgets.length}`),
+        hideProgressBar: false,
+        variant: Variant.success,
+        dispatchableAction: {
+          type: ReduxActionTypes.UNDO_DELETE_WIDGET,
+          payload: {
+            widgetId: bulkDeleteKey,
+          },
+        },
+      });
+      setTimeout(() => {
+        if (bulkDeleteKey) {
+          flushDeletedWidgets(bulkDeleteKey);
+          AppsmithConsole.info({
+            logType: LOG_TYPE.ENTITY_DELETED,
+            text: `${selectedWidgets.length} were deleted`,
+            source: {
+              name: "Group Delete",
+              type: ENTITY_TYPE.WIDGET,
+              id: bulkDeleteKey,
+            },
+          });
+        }
+      }, WIDGET_DELETE_UNDO_TIMEOUT);
+    }
+  } catch (error) {
+    yield put({
+      type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR,
+      payload: {
+        action: ReduxActionTypes.WIDGET_DELETE,
+        error,
+      },
+    });
+  }
+}
+
+export function* deleteSagaInit(deleteAction: ReduxAction<WidgetDelete>) {
+  const { widgetId } = deleteAction.payload;
+  const selectedWidget = yield select(getSelectedWidget);
+  const selectedWidgets: string[] = yield select(getSelectedWidgets);
+  if (selectedWidgets.length > 1) {
+    yield put({
+      type: ReduxActionTypes.WIDGET_BULK_DELETE,
+      payload: deleteAction.payload,
+    });
+  }
+  if (!!widgetId || !!selectedWidget) {
+    yield put({
+      type: ReduxActionTypes.WIDGET_SINGLE_DELETE,
+      payload: deleteAction.payload,
+    });
+  }
+}
+
 export function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
   try {
     let { parentId, widgetId } = deleteAction.payload;
@@ -497,7 +607,7 @@ export function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
       widgets[parentId] = parent;
 
       const otherWidgetsToDelete = getAllWidgetsInTree(widgetId, widgets);
-      const saveStatus = yield saveDeletedWidgets(
+      const saveStatus: boolean = yield saveDeletedWidgets(
         otherWidgetsToDelete,
         widgetId,
       );
@@ -608,89 +718,108 @@ export function* undoDeleteSaga(action: ReduxAction<{ widgetId: string }>) {
   const deletedWidgets: FlattenedWidgetProps[] = yield getDeletedWidgets(
     action.payload.widgetId,
   );
+  const deletedWidgetIds = action.payload.widgetId.split(",");
   if (deletedWidgets && Array.isArray(deletedWidgets)) {
-    // Find the parent in the list of deleted widgets
-    const deletedWidget = deletedWidgets.find(
-      (widget) => widget.widgetId === action.payload.widgetId,
-    );
-
-    // If the deleted widget is in fact available.
-    if (deletedWidget) {
-      // Log an undo event
-      AnalyticsUtil.logEvent("WIDGET_DELETE_UNDO", {
-        widgetName: deletedWidget.widgetName,
-        widgetType: deletedWidget.type,
-      });
-    }
-
     // Get the current list of widgets from reducer
+    const formTree = deletedWidgets.reduce((widgetTree, each) => {
+      widgetTree[each.widgetId] = each;
+      return widgetTree;
+    }, {} as CanvasWidgetsReduxState);
     const stateWidgets = yield select(getWidgets);
-    let widgets = { ...stateWidgets };
-    // For each deleted widget
-    deletedWidgets.forEach((widget) => {
-      // Add it to the widgets list we fetched from reducer
-      widgets[widget.widgetId] = widget;
-      // If the widget in question is the deleted widget
-      if (widget.widgetId === action.payload.widgetId) {
-        //SPECIAL HANDLING FOR TAB IN A TABS WIDGET
-        if (
-          widget.tabId &&
-          widget.type === WidgetTypes.CANVAS_WIDGET &&
-          widget.parentId
-        ) {
-          const parent = cloneDeep(widgets[widget.parentId]);
-          if (parent.tabsObj) {
-            try {
-              const tabs = Object.values(parent.tabsObj);
-              parent.tabsObj[widget.tabId] = {
-                id: widget.tabId,
-                widgetId: widget.widgetId,
-                label: widget.tabName || widget.widgetName,
-                isVisible: true,
-              };
+    const deletedWidgetGroups = deletedWidgetIds.map((each) => ({
+      widget: formTree[each],
+      widgetsToRestore: getAllWidgetsInTree(each, formTree),
+    }));
+    const finalWidgets = deletedWidgetGroups.reduce(
+      (reducedWidgets, deletedWidgetGroup) => {
+        const {
+          widget: deletedWidget,
+          widgetsToRestore: deletedWidgets,
+        } = deletedWidgetGroup;
+        let widgets = cloneDeep(reducedWidgets);
+
+        // If the deleted widget is in fact available.
+        if (deletedWidget) {
+          // Log an undo event
+          AnalyticsUtil.logEvent("WIDGET_DELETE_UNDO", {
+            widgetName: deletedWidget.widgetName,
+            widgetType: deletedWidget.type,
+          });
+        }
+
+        // For each deleted widget
+        deletedWidgets.forEach((widget: FlattenedWidgetProps) => {
+          // Add it to the widgets list we fetched from reducer
+          widgets[widget.widgetId] = widget;
+          // If the widget in question is the deleted widget
+          if (deletedWidgetIds.includes(widget.widgetId)) {
+            //SPECIAL HANDLING FOR TAB IN A TABS WIDGET
+            if (
+              widget.tabId &&
+              widget.type === WidgetTypes.CANVAS_WIDGET &&
+              widget.parentId
+            ) {
+              const parent = cloneDeep(widgets[widget.parentId]);
+              if (parent.tabsObj) {
+                try {
+                  const tabs = Object.values(parent.tabsObj);
+                  parent.tabsObj[widget.tabId] = {
+                    id: widget.tabId,
+                    widgetId: widget.widgetId,
+                    label: widget.tabName || widget.widgetName,
+                    isVisible: true,
+                  };
+                  widgets = {
+                    ...widgets,
+                    [widget.parentId]: {
+                      ...widgets[widget.parentId],
+                      tabsObj: parent.tabsObj,
+                    },
+                  };
+                } catch (error) {
+                  log.debug("Error deleting tabs widget: ", { error });
+                }
+              } else {
+                parent.tabs = JSON.stringify([
+                  {
+                    id: widget.tabId,
+                    widgetId: widget.widgetId,
+                    label: widget.tabName || widget.widgetName,
+                  },
+                ]);
+                widgets = {
+                  ...widgets,
+                  [widget.parentId]: parent,
+                };
+              }
+            }
+            let newChildren = [widget.widgetId];
+            if (widget.parentId && widgets[widget.parentId].children) {
+              // Concatenate the list of parents children with the current widgetId
+              newChildren = newChildren.concat(
+                widgets[widget.parentId].children,
+              );
+            }
+            if (widget.parentId) {
               widgets = {
                 ...widgets,
                 [widget.parentId]: {
                   ...widgets[widget.parentId],
-                  tabsObj: parent.tabsObj,
+                  children: newChildren,
                 },
               };
-            } catch (error) {
-              log.debug("Error deleting tabs widget: ", { error });
             }
-          } else {
-            parent.tabs = JSON.stringify([
-              {
-                id: widget.tabId,
-                widgetId: widget.widgetId,
-                label: widget.tabName || widget.widgetName,
-              },
-            ]);
-            widgets = {
-              ...widgets,
-              [widget.parentId]: parent,
-            };
           }
-        }
-        let newChildren = [widget.widgetId];
-        if (widget.parentId && widgets[widget.parentId].children) {
-          // Concatenate the list of parents children with the current widgetId
-          newChildren = newChildren.concat(widgets[widget.parentId].children);
-        }
-        if (widget.parentId) {
-          widgets = {
-            ...widgets,
-            [widget.parentId]: {
-              ...widgets[widget.parentId],
-              children: newChildren,
-            },
-          };
-        }
-      }
-    });
+        });
+        return widgets;
+      },
+      stateWidgets,
+    );
 
-    yield put(updateAndSaveLayout(widgets));
-    yield put(forceOpenPropertyPane(action.payload.widgetId));
+    yield put(updateAndSaveLayout(finalWidgets));
+    if (deletedWidgetIds.length === 1) {
+      yield put(forceOpenPropertyPane(action.payload.widgetId));
+    }
     yield flushDeletedWidgets(action.payload.widgetId);
   }
 }
@@ -1631,8 +1760,8 @@ function* cutWidgetSaga() {
 
 function* addTableWidgetFromQuerySaga(action: ReduxAction<string>) {
   try {
-    const columns = 8;
-    const rows = 7;
+    const columns = 8 * GRID_DENSITY_MIGRATION_V1;
+    const rows = 7 * GRID_DENSITY_MIGRATION_V1;
     const queryName = action.payload;
     const widgets = yield select(getWidgets);
     const evalTree = yield select(getDataTree);
@@ -1743,6 +1872,21 @@ function* selectedWidgetAncestrySaga(
   }
 }
 
+function* selectAllWidgetsSaga() {
+  const allWidgetsOnMainContainer: string[] = yield select(
+    getWidgetImmediateChildren,
+    MAIN_CONTAINER_WIDGET_ID,
+  );
+  if (allWidgetsOnMainContainer && allWidgetsOnMainContainer.length) {
+    yield put(selectAllWidgets(allWidgetsOnMainContainer));
+    Toaster.show({
+      text: createMessage(SELECT_ALL_WIDGETS_MSG),
+      variant: Variant.info,
+      duration: 3000,
+    });
+  }
+}
+
 export default function* widgetOperationSagas() {
   yield all([
     takeEvery(
@@ -1750,7 +1894,12 @@ export default function* widgetOperationSagas() {
       addTableWidgetFromQuerySaga,
     ),
     takeEvery(ReduxActionTypes.WIDGET_ADD_CHILD, addChildSaga),
-    takeEvery(ReduxActionTypes.WIDGET_DELETE, deleteSaga),
+    takeEvery(ReduxActionTypes.WIDGET_DELETE, deleteSagaInit),
+    takeEvery(ReduxActionTypes.WIDGET_SINGLE_DELETE, deleteSaga),
+    takeEvery(
+      ReduxActionTypes.WIDGET_BULK_DELETE,
+      deleteAllSelectedWidgetsSaga,
+    ),
     takeLatest(ReduxActionTypes.WIDGET_MOVE, moveSaga),
     takeLatest(ReduxActionTypes.WIDGET_RESIZE, resizeSaga),
     takeEvery(
@@ -1784,5 +1933,9 @@ export default function* widgetOperationSagas() {
     takeEvery(ReduxActionTypes.CUT_SELECTED_WIDGET, cutWidgetSaga),
     takeEvery(ReduxActionTypes.WIDGET_ADD_CHILDREN, addChildrenSaga),
     takeLatest(ReduxActionTypes.SELECT_WIDGET, selectedWidgetAncestrySaga),
+    takeLatest(
+      ReduxActionTypes.SELECT_MULTIPLE_WIDGETS_INIT,
+      selectAllWidgetsSaga,
+    ),
   ]);
 }
diff --git a/app/client/src/sagas/index.tsx b/app/client/src/sagas/index.tsx
index 6caee17a09..eda82abbdc 100644
--- a/app/client/src/sagas/index.tsx
+++ b/app/client/src/sagas/index.tsx
@@ -32,43 +32,44 @@ import debuggerSagas from "./DebuggerSagas";
 import log from "loglevel";
 import * as sentry from "@sentry/react";
 
-export function* rootSaga() {
-  const sagas = [
-    initSagas,
-    pageSagas,
-    fetchWidgetCardsSaga,
-    watchActionSagas,
-    watchActionExecutionSagas,
-    widgetOperationSagas,
-    errorSagas,
-    watchDatasourcesSagas,
-    applicationSagas,
-    apiPaneSagas,
-    userSagas,
-    pluginSagas,
-    orgSagas,
-    importedCollectionsSagas,
-    providersSagas,
-    curlImportSagas,
-    queryPaneSagas,
-    modalSagas,
-    batchSagas,
-    themeSagas,
-    evaluationsSaga,
-    onboardingSaga,
-    actionExecutionChangeListeners,
-    utilSagas,
-    saaSPaneSagas,
-    globalSearchSagas,
-    recentEntitiesSagas,
-    commentSagas,
-    websocketSagas,
-    debuggerSagas,
-    utilSagas,
-    saaSPaneSagas,
-  ];
+const sagas = [
+  initSagas,
+  pageSagas,
+  fetchWidgetCardsSaga,
+  watchActionSagas,
+  watchActionExecutionSagas,
+  widgetOperationSagas,
+  errorSagas,
+  watchDatasourcesSagas,
+  applicationSagas,
+  apiPaneSagas,
+  userSagas,
+  pluginSagas,
+  orgSagas,
+  importedCollectionsSagas,
+  providersSagas,
+  curlImportSagas,
+  queryPaneSagas,
+  modalSagas,
+  batchSagas,
+  themeSagas,
+  evaluationsSaga,
+  onboardingSaga,
+  actionExecutionChangeListeners,
+  utilSagas,
+  saaSPaneSagas,
+  globalSearchSagas,
+  recentEntitiesSagas,
+  commentSagas,
+  websocketSagas,
+  debuggerSagas,
+  utilSagas,
+  saaSPaneSagas,
+];
+
+export function* rootSaga(sagasToRun = sagas) {
   yield all(
-    sagas.map((saga) =>
+    sagasToRun.map((saga) =>
       spawn(function*() {
         while (true) {
           try {
diff --git a/app/client/src/sagas/selectors.tsx b/app/client/src/sagas/selectors.tsx
index 05acd6e33d..68aceef628 100644
--- a/app/client/src/sagas/selectors.tsx
+++ b/app/client/src/sagas/selectors.tsx
@@ -123,7 +123,27 @@ export const getPluginIdOfPackageName = (
 };
 
 export const getSelectedWidget = (state: AppState) => {
-  const selectedWidgetId = state.ui.widgetDragResize.selectedWidget;
+  const selectedWidgetId = state.ui.widgetDragResize.lastSelectedWidget;
   if (!selectedWidgetId) return;
   return state.entities.canvasWidgets[selectedWidgetId];
 };
+
+export const getWidgetImmediateChildren = createSelector(
+  getWidget,
+  (widget: WidgetProps) => {
+    const childrenIds: string[] = [];
+    if (widget === undefined) {
+      return [];
+    }
+    const { children = [] } = widget;
+    if (children && children.length) {
+      for (const childIndex in children) {
+        if (children.hasOwnProperty(childIndex)) {
+          const child = children[childIndex];
+          childrenIds.push(child);
+        }
+      }
+    }
+    return childrenIds;
+  },
+);
diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx
index 0c8d3b453e..6522862a3b 100644
--- a/app/client/src/selectors/propertyPaneSelectors.tsx
+++ b/app/client/src/selectors/propertyPaneSelectors.tsx
@@ -8,6 +8,7 @@ import { getDataTree } from "selectors/dataTreeSelectors";
 import { DataTree, DataTreeWidget } from "entities/DataTree/dataTreeFactory";
 import { PropertyPaneReduxState } from "reducers/uiReducers/propertyPaneReducer";
 import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
+import { getSelectedWidget, getSelectedWidgets } from "./ui";
 
 const getPropertyPaneState = (state: AppState): PropertyPaneReduxState =>
   state.ui.propertyPane;
@@ -64,6 +65,24 @@ const isResizingorDragging = (state: AppState) =>
 export const getIsPropertyPaneVisible = createSelector(
   getPropertyPaneState,
   isResizingorDragging,
-  (pane: PropertyPaneReduxState, isResizingorDragging: boolean) =>
-    !!(!isResizingorDragging && pane.isVisible && pane.widgetId),
+  getSelectedWidget,
+  getSelectedWidgets,
+  (
+    pane: PropertyPaneReduxState,
+    isResizingorDragging: boolean,
+    lastSelectedWidget,
+    widgets,
+  ) => {
+    const isWidgetSelected = pane.widgetId
+      ? lastSelectedWidget === pane.widgetId || widgets.includes(pane.widgetId)
+      : false;
+    const multipleWidgetsSelected = !!(widgets && widgets.length >= 2);
+    return !!(
+      isWidgetSelected &&
+      !multipleWidgetsSelected &&
+      !isResizingorDragging &&
+      pane.isVisible &&
+      pane.widgetId
+    );
+  },
 );
diff --git a/app/client/src/selectors/ui.ts b/app/client/src/selectors/ui.ts
new file mode 100644
index 0000000000..a0de172b7a
--- /dev/null
+++ b/app/client/src/selectors/ui.ts
@@ -0,0 +1,7 @@
+import { AppState } from "reducers";
+
+export const getSelectedWidget = (state: AppState) =>
+  state.ui.widgetDragResize.lastSelectedWidget;
+
+export const getSelectedWidgets = (state: AppState) =>
+  state.ui.widgetDragResize.selectedWidgets;
diff --git a/app/client/src/selectors/ui.tsx b/app/client/src/selectors/ui.tsx
deleted file mode 100644
index b506d7d803..0000000000
--- a/app/client/src/selectors/ui.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { AppState } from "reducers";
-
-export const getSelectedWidget = (state: AppState) =>
-  state.ui.widgetDragResize.selectedWidget;
diff --git a/app/client/src/templates/default.ts b/app/client/src/templates/default.ts
index 7755fa680b..249f498bbd 100644
--- a/app/client/src/templates/default.ts
+++ b/app/client/src/templates/default.ts
@@ -1,8 +1,10 @@
+import { GridDefaults } from "constants/WidgetConstants";
+
 export default {
   widgetName: "MainContainer",
   backgroundColor: "none",
   rightColumn: 1242,
-  snapColumns: 16,
+  snapColumns: GridDefaults.DEFAULT_GRID_COLUMNS,
   widgetId: "0",
   topRow: 0,
   bottomRow: 1292,
diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx
index ae8d6dc29b..20976e2c59 100644
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@@ -153,6 +153,10 @@ export const noop = () => {
   console.log("noop");
 };
 
+export const stopEventPropagation = (e: any) => {
+  e.stopPropagation();
+};
+
 export const createNewQueryName = (
   queries: ActionDataState,
   pageId: string,
diff --git a/app/client/src/utils/WidgetPropsUtils.test.tsx b/app/client/src/utils/WidgetPropsUtils.test.tsx
index 07e2edcf18..2b774e45fb 100644
--- a/app/client/src/utils/WidgetPropsUtils.test.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.test.tsx
@@ -2,8 +2,15 @@ import * as generators from "../utils/generators";
 import { RenderModes, WidgetTypes } from "constants/WidgetConstants";
 import {
   migrateChartDataFromArrayToObject,
+  migrateToNewLayout,
   migrateInitialValues,
 } from "./WidgetPropsUtils";
+import {
+  buildChildren,
+  buildDslWithChildren,
+} from "test/factories/WidgetFactoryUtils";
+import { cloneDeep } from "lodash";
+import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse";
 
 describe("WidgetProps tests", () => {
   it("it checks if array to object migration functions for chart widget ", () => {
@@ -90,6 +97,66 @@ describe("WidgetProps tests", () => {
 
     expect(result).toStrictEqual(output);
   });
+  it("Grid density migration - Main container widgets", () => {
+    const dsl: any = buildDslWithChildren([{ type: "TABS_WIDGET" }]);
+    const newMigratedDsl: any = migrateToNewLayout(cloneDeep(dsl));
+    expect(dsl.children[0].topRow * GRID_DENSITY_MIGRATION_V1).toBe(
+      newMigratedDsl.children[0].topRow,
+    );
+    expect(dsl.children[0].bottomRow * GRID_DENSITY_MIGRATION_V1).toBe(
+      newMigratedDsl.children[0].bottomRow,
+    );
+    expect(dsl.children[0].rightColumn * GRID_DENSITY_MIGRATION_V1).toBe(
+      newMigratedDsl.children[0].rightColumn,
+    );
+    expect(dsl.children[0].leftColumn * GRID_DENSITY_MIGRATION_V1).toBe(
+      newMigratedDsl.children[0].leftColumn,
+    );
+  });
+
+  it("Grid density migration - widgets inside a container", () => {
+    const childrenInsideContainer = buildChildren([
+      { type: "SWITCH_WIDGET" },
+      { type: "FORM_WIDGET" },
+      { type: "CONTAINER_WIDGET" },
+    ]);
+    const dslWithContainer: any = buildDslWithChildren([
+      { type: "CONTAINER_WIDGET", children: childrenInsideContainer },
+    ]);
+    const newMigratedDsl: any = migrateToNewLayout(cloneDeep(dslWithContainer));
+    // Container migrated checks
+    const containerWidget = dslWithContainer.children[0];
+    const migratedContainer = newMigratedDsl.children[0];
+    expect(containerWidget.topRow * GRID_DENSITY_MIGRATION_V1).toBe(
+      migratedContainer.topRow,
+    );
+    expect(containerWidget.bottomRow * GRID_DENSITY_MIGRATION_V1).toBe(
+      migratedContainer.bottomRow,
+    );
+    expect(containerWidget.rightColumn * GRID_DENSITY_MIGRATION_V1).toBe(
+      migratedContainer.rightColumn,
+    );
+    expect(containerWidget.leftColumn * GRID_DENSITY_MIGRATION_V1).toBe(
+      migratedContainer.leftColumn,
+    );
+    // Children inside container miragted
+
+    containerWidget.children.forEach((eachChild: any, index: any) => {
+      const migratedChild = migratedContainer.children[index];
+      expect(eachChild.topRow * GRID_DENSITY_MIGRATION_V1).toBe(
+        migratedChild.topRow,
+      );
+      expect(eachChild.bottomRow * GRID_DENSITY_MIGRATION_V1).toBe(
+        migratedChild.bottomRow,
+      );
+      expect(eachChild.rightColumn * GRID_DENSITY_MIGRATION_V1).toBe(
+        migratedChild.rightColumn,
+      );
+      expect(eachChild.leftColumn * GRID_DENSITY_MIGRATION_V1).toBe(
+        migratedChild.leftColumn,
+      );
+    });
+  });
 });
 
 describe("Initial value migration test", () => {
diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx
index 62656657c4..54979e9b1b 100644
--- a/app/client/src/utils/WidgetPropsUtils.tsx
+++ b/app/client/src/utils/WidgetPropsUtils.tsx
@@ -10,6 +10,7 @@ import {
 } from "widgets/BaseWidget";
 import {
   GridDefaults,
+  LATEST_PAGE_VERSION,
   MAIN_CONTAINER_WIDGET_ID,
   RenderMode,
   WidgetType,
@@ -32,6 +33,7 @@ import * as Sentry from "@sentry/react";
 import { migrateTextStyleFromTextWidget } from "./migrations/TextWidgetReplaceTextStyle";
 import { nextAvailableRowInContainer } from "entities/Widget/utils";
 import { DATA_BIND_REGEX_GLOBAL } from "constants/BindingsConstants";
+import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse";
 
 export type WidgetOperationParams = {
   operation: WidgetOperation;
@@ -726,9 +728,42 @@ const transformDSL = (currentDSL: ContainerWidgetProps<WidgetProps>) => {
     currentDSL.version = 19;
   }
 
+  if (currentDSL.version === 19) {
+    currentDSL.snapColumns = GridDefaults.DEFAULT_GRID_COLUMNS;
+    currentDSL.snapRows = getCanvasSnapRows(
+      currentDSL.bottomRow,
+      currentDSL.detachFromLayout || false,
+    );
+    currentDSL = migrateToNewLayout(currentDSL);
+    currentDSL.version = LATEST_PAGE_VERSION;
+  }
+
   return currentDSL;
 };
 
+export const migrateToNewLayout = (dsl: ContainerWidgetProps<WidgetProps>) => {
+  const scaleWidget = (widgetProps: WidgetProps) => {
+    widgetProps.bottomRow *= GRID_DENSITY_MIGRATION_V1;
+    widgetProps.topRow *= GRID_DENSITY_MIGRATION_V1;
+    widgetProps.leftColumn *= GRID_DENSITY_MIGRATION_V1;
+    widgetProps.rightColumn *= GRID_DENSITY_MIGRATION_V1;
+    if (widgetProps.children && widgetProps.children.length) {
+      widgetProps.children.forEach((eachWidgetProp: WidgetProps) => {
+        scaleWidget(eachWidgetProp);
+      });
+    }
+  };
+  scaleWidget(dsl);
+  return dsl;
+};
+
+export const checkIfMigrationIsNeeded = (
+  fetchPageResponse?: FetchPageResponse,
+) => {
+  const currentDSL = fetchPageResponse?.data.layouts[0].dsl || defaultDSL;
+  return currentDSL.version !== LATEST_PAGE_VERSION;
+};
+
 export const extractCurrentDSL = (
   fetchPageResponse?: FetchPageResponse,
 ): ContainerWidgetProps<WidgetProps> => {
diff --git a/app/client/src/utils/hooks/dragResizeHooks.tsx b/app/client/src/utils/hooks/dragResizeHooks.tsx
index f31ff28353..496fda89c8 100644
--- a/app/client/src/utils/hooks/dragResizeHooks.tsx
+++ b/app/client/src/utils/hooks/dragResizeHooks.tsx
@@ -1,6 +1,10 @@
 import { useDispatch } from "react-redux";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
-import { focusWidget, selectWidget } from "actions/widgetActions";
+import {
+  focusWidget,
+  selectAllWidgets,
+  selectWidget,
+} from "actions/widgetActions";
 import { useCallback, useEffect, useState } from "react";
 
 export const useShowPropertyPane = () => {
@@ -63,8 +67,8 @@ export const useWidgetSelection = () => {
   const dispatch = useDispatch();
   return {
     selectWidget: useCallback(
-      (widgetId?: string) => {
-        dispatch(selectWidget(widgetId));
+      (widgetId?: string, isMultiSelect?: boolean) => {
+        dispatch(selectWidget(widgetId, isMultiSelect));
       },
       [dispatch],
     ),
@@ -72,9 +76,9 @@ export const useWidgetSelection = () => {
       (widgetId?: string) => dispatch(focusWidget(widgetId)),
       [dispatch],
     ),
+    deselectAll: useCallback(() => dispatch(selectAllWidgets([])), [dispatch]),
   };
 };
-
 export const useWidgetDragResize = () => {
   const dispatch = useDispatch();
   return {
diff --git a/app/client/src/utils/hooks/useClickOpenPropPane.tsx b/app/client/src/utils/hooks/useClickOpenPropPane.tsx
index 2697d0c145..91b7f3c1c8 100644
--- a/app/client/src/utils/hooks/useClickOpenPropPane.tsx
+++ b/app/client/src/utils/hooks/useClickOpenPropPane.tsx
@@ -1,5 +1,7 @@
-import { useShowPropertyPane } from "utils/hooks/dragResizeHooks";
-import { selectWidget } from "actions/widgetActions";
+import {
+  useShowPropertyPane,
+  useWidgetSelection,
+} from "utils/hooks/dragResizeHooks";
 import {
   getCurrentWidgetId,
   getIsPropertyPaneVisible,
@@ -11,6 +13,7 @@ import { getAppMode } from "selectors/applicationSelectors";
 
 export const useClickOpenPropPane = () => {
   const showPropertyPane = useShowPropertyPane();
+  const { selectWidget } = useWidgetSelection();
   const isPropPaneVisible = useSelector(getIsPropertyPaneVisible);
   const selectedWidgetId = useSelector(getCurrentWidgetId);
   const focusedWidget = useSelector(
@@ -26,15 +29,25 @@ export const useClickOpenPropPane = () => {
   const isDragging = useSelector(
     (state: AppState) => state.ui.widgetDragResize.isDragging,
   );
-  const openPropertyPane = () => {
+  const openPropertyPane = (e: any, targetWidgetId: string) => {
     // ignore click captures if the component was resizing or dragging coz it is handled internally in draggable component
-    if (isResizing || isDragging || appMode !== APP_MODE.EDIT) return;
+    if (
+      isResizing ||
+      isDragging ||
+      appMode !== APP_MODE.EDIT ||
+      targetWidgetId !== focusedWidget
+    )
+      return;
     if (
       (!isPropPaneVisible && selectedWidgetId === focusedWidget) ||
       selectedWidgetId !== focusedWidget
     ) {
-      selectWidget(focusedWidget);
+      const isMultiSelect = e.metaKey || e.ctrlKey;
+      selectWidget(focusedWidget, isMultiSelect);
       showPropertyPane(focusedWidget, undefined, true);
+      if (isMultiSelect) {
+        e.stopPropagation();
+      }
     }
   };
   return openPropertyPane;
diff --git a/app/client/src/widgets/BaseWidget.tsx b/app/client/src/widgets/BaseWidget.tsx
index 0e47cd7579..a8dc16f609 100644
--- a/app/client/src/widgets/BaseWidget.tsx
+++ b/app/client/src/widgets/BaseWidget.tsx
@@ -218,6 +218,7 @@ abstract class BaseWidget<
             errorCount={this.getErrorCount(this.props.invalidProps)}
             parentId={this.props.parentId}
             showControls={showControls}
+            topRow={this.props.detachFromLayout ? 4 : this.props.topRow}
             type={this.props.type}
             widgetId={this.props.widgetId}
             widgetName={this.props.widgetName}
diff --git a/app/client/src/widgets/InputWidget.tsx b/app/client/src/widgets/InputWidget.tsx
index 29ad9fa842..7517e7b5a6 100644
--- a/app/client/src/widgets/InputWidget.tsx
+++ b/app/client/src/widgets/InputWidget.tsx
@@ -13,6 +13,7 @@ import { createMessage, FIELD_REQUIRED_ERROR } from "constants/messages";
 import { DerivedPropertiesMap } from "utils/WidgetFactory";
 import * as Sentry from "@sentry/react";
 import withMeta, { WithMeta } from "./MetaHOC";
+import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse";
 
 class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
   constructor(props: InputWidgetProps) {
@@ -314,8 +315,10 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
         isLoading={this.props.isLoading}
         label={this.props.label}
         multiline={
-          this.props.bottomRow - this.props.topRow > 1 &&
-          this.props.inputType === "TEXT"
+          // GRID_DENSITY_MIGRATION_V1 used to adjust code as per new scaled canvas.
+          (this.props.bottomRow - this.props.topRow) /
+            GRID_DENSITY_MIGRATION_V1 >
+            1 && this.props.inputType === "TEXT"
         }
         onFocusChange={this.handleFocusChange}
         onKeyDown={this.handleKeyDown}
diff --git a/app/client/src/widgets/ListWidget/ListWidget.test.tsx b/app/client/src/widgets/ListWidget/ListWidget.test.tsx
index b6e65184c5..aa6cdb8fed 100644
--- a/app/client/src/widgets/ListWidget/ListWidget.test.tsx
+++ b/app/client/src/widgets/ListWidget/ListWidget.test.tsx
@@ -14,7 +14,8 @@ describe("<ListWidget />", () => {
   const initialState = {
     ui: {
       widgetDragResize: {
-        selectedWidget: "Widget1",
+        lastSelectedWidget: "Widget1",
+        selectedWidgets: ["Widget1"],
       },
       propertyPane: {
         isVisible: true,
diff --git a/app/client/src/widgets/ListWidget/ListWidget.tsx b/app/client/src/widgets/ListWidget/ListWidget.tsx
index 8cd8a453bd..26dbf5c508 100644
--- a/app/client/src/widgets/ListWidget/ListWidget.tsx
+++ b/app/client/src/widgets/ListWidget/ListWidget.tsx
@@ -398,7 +398,8 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
     return children.map((child: ContainerWidgetProps<WidgetProps>, index) => {
       return {
         ...child,
-        onClick: () => this.onItemClick(index, this.props.onListItemClick),
+        onClickCapture: () =>
+          this.onItemClick(index, this.props.onListItemClick),
       };
     });
   };
@@ -498,7 +499,8 @@ class ListWidget extends BaseWidget<ListWidgetProps<WidgetProps>, WidgetState> {
     const { children, items } = this.props;
     const { componentHeight } = this.getComponentDimensions();
     const templateBottomRow = get(children, "0.children.0.bottomRow");
-    const templateHeight = templateBottomRow * 40;
+    const templateHeight =
+      templateBottomRow * GridDefaults.DEFAULT_GRID_ROW_HEIGHT;
 
     try {
       gridGap = parseInt(gridGap);
diff --git a/app/client/src/widgets/ModalWidget.tsx b/app/client/src/widgets/ModalWidget.tsx
index 07cada407e..a740c9eaec 100644
--- a/app/client/src/widgets/ModalWidget.tsx
+++ b/app/client/src/widgets/ModalWidget.tsx
@@ -20,11 +20,13 @@ import { getWidget } from "sagas/selectors";
 const MODAL_SIZE: { [id: string]: { width: number; height: number } } = {
   MODAL_SMALL: {
     width: 456,
-    height: GridDefaults.DEFAULT_GRID_ROW_HEIGHT * 6,
+    // adjust if DEFAULT_GRID_ROW_HEIGHT changes
+    height: GridDefaults.DEFAULT_GRID_ROW_HEIGHT * 24,
   },
   MODAL_LARGE: {
     width: 532,
-    height: GridDefaults.DEFAULT_GRID_ROW_HEIGHT * 15,
+    // adjust if DEFAULT_GRID_ROW_HEIGHT changes
+    height: GridDefaults.DEFAULT_GRID_ROW_HEIGHT * 60,
   },
 };
 
diff --git a/app/client/src/widgets/Tabs/TabsWidget.test.tsx b/app/client/src/widgets/Tabs/TabsWidget.test.tsx
index ca749b4ef0..fff9f140c4 100644
--- a/app/client/src/widgets/Tabs/TabsWidget.test.tsx
+++ b/app/client/src/widgets/Tabs/TabsWidget.test.tsx
@@ -3,48 +3,20 @@ import {
   widgetCanvasFactory,
 } from "test/factories/WidgetFactoryUtils";
 import { render, fireEvent } from "test/testUtils";
-
 import Canvas from "pages/Editor/Canvas";
 import React from "react";
-import { useDispatch } from "react-redux";
-import { editorInitializer } from "utils/EditorUtils";
-import { initCanvasLayout } from "actions/pageActions";
-import { getCanvasWidgetsPayload } from "sagas/PageSagas";
-import { noop } from "utils/AppsmithUtils";
+import { MockPageDSL } from "test/testCommon";
 
-Element.prototype.scrollTo = noop;
-function SetCanvas({ children, dsl }: any) {
-  const dispatch = useDispatch();
-  const mockResp: any = {
-    data: {
-      id: "asa",
-      name: "App",
-      applicationId: "asa",
-      layouts: [
-        {
-          id: "w323",
-          dsl,
-          layoutOnLoadActions: [],
-          layoutActions: [],
-        },
-      ],
-    },
-  };
-  const canvasWidgetsPayload = getCanvasWidgetsPayload(mockResp);
-  dispatch(initCanvasLayout(canvasWidgetsPayload));
-  return children;
-}
 describe("Tabs widget functional cases", () => {
   it("Should render 2 tabs by default", () => {
-    editorInitializer();
     const children: any = buildChildren([{ type: "TABS_WIDGET" }]);
     const dsl: any = widgetCanvasFactory.build({
       children,
     });
     const component = render(
-      <SetCanvas dsl={dsl}>
+      <MockPageDSL dsl={dsl}>
         <Canvas dsl={dsl} />
-      </SetCanvas>,
+      </MockPageDSL>,
     );
     const tab1 = component.queryByText("Tab 1");
     const tab2 = component.queryByText("Tab 2");
@@ -53,7 +25,6 @@ describe("Tabs widget functional cases", () => {
   });
 
   it("Should render components inside tabs by default", () => {
-    editorInitializer();
     const tab1Children = buildChildren([
       { type: "SWITCH_WIDGET", label: "Tab1 Switch" },
       { type: "CHECKBOX_WIDGET", label: "Tab1 Checkbox" },
@@ -69,9 +40,9 @@ describe("Tabs widget functional cases", () => {
       children,
     });
     const component = render(
-      <SetCanvas dsl={dsl}>
+      <MockPageDSL dsl={dsl}>
         <Canvas dsl={dsl} />
-      </SetCanvas>,
+      </MockPageDSL>,
     );
     const tab1 = component.queryByText("Tab 1");
     const tab2: any = component.queryByText("Tab 2");
diff --git a/app/client/src/widgets/Tabs/TabsWidget.tsx b/app/client/src/widgets/Tabs/TabsWidget.tsx
index 35e9d7430b..f8cd1ec930 100644
--- a/app/client/src/widgets/Tabs/TabsWidget.tsx
+++ b/app/client/src/widgets/Tabs/TabsWidget.tsx
@@ -10,6 +10,7 @@ import { WidgetOperations } from "widgets/BaseWidget";
 import * as Sentry from "@sentry/react";
 import { generateReactKey } from "utils/generators";
 import withMeta, { WithMeta } from "../MetaHOC";
+import { GRID_DENSITY_MIGRATION_V1 } from "mockResponses/WidgetConfigResponse";
 
 class TabsWidget extends BaseWidget<
   TabsWidgetProps<TabContainerWidgetProps>,
@@ -196,8 +197,11 @@ class TabsWidget extends BaseWidget<
         const columns =
           (this.props.rightColumn - this.props.leftColumn) *
           this.props.parentColumnSpace;
+        // GRID_DENSITY_MIGRATION_V1 used to adjust code as per new scaled canvas.
         const rows =
-          (this.props.bottomRow - this.props.topRow - 1) *
+          (this.props.bottomRow -
+            this.props.topRow -
+            GRID_DENSITY_MIGRATION_V1) *
           this.props.parentRowSpace;
         const config = {
           type: WidgetTypes.CANVAS_WIDGET,
diff --git a/app/client/test/factories/WidgetFactoryUtils.ts b/app/client/test/factories/WidgetFactoryUtils.ts
index 55f06e9d59..7200938d47 100644
--- a/app/client/test/factories/WidgetFactoryUtils.ts
+++ b/app/client/test/factories/WidgetFactoryUtils.ts
@@ -26,3 +26,10 @@ export const buildChildren = (children: Partial<WidgetProps>[]) => {
     console.error("Check if child widget data provided");
   }
 };
+
+export const buildDslWithChildren = (childData: Partial<WidgetProps>[]) => {
+  const children: any = buildChildren(childData);
+  return widgetCanvasFactory.build({
+    children,
+  });
+};
diff --git a/app/client/test/sagas.ts b/app/client/test/sagas.ts
new file mode 100644
index 0000000000..3a15551947
--- /dev/null
+++ b/app/client/test/sagas.ts
@@ -0,0 +1,59 @@
+import initSagas from "../src/sagas/InitSagas";
+import apiPaneSagas from "../src/sagas/ApiPaneSagas";
+import userSagas from "../src/sagas/userSagas";
+import pluginSagas from "../src/sagas/PluginSagas";
+import orgSagas from "../src/sagas/OrgSagas";
+import importedCollectionsSagas from "../src/sagas/CollectionSagas";
+import providersSagas from "../src/sagas/ProvidersSaga";
+import curlImportSagas from "../src/sagas/CurlImportSagas";
+import queryPaneSagas from "../src/sagas/QueryPaneSagas";
+import modalSagas from "../src/sagas/ModalSagas";
+import batchSagas from "../src/sagas/BatchSagas";
+import themeSagas from "../src/sagas/ThemeSaga";
+import onboardingSaga from "../src/sagas/OnboardingSagas";
+import utilSagas from "../src/sagas/UtilSagas";
+import saaSPaneSagas from "../src/sagas/SaaSPaneSagas";
+import actionExecutionChangeListeners from "../src/sagas/WidgetLoadingSaga";
+import globalSearchSagas from "../src/sagas/GlobalSearchSagas";
+import recentEntitiesSagas from "../src/sagas/RecentEntitiesSagas";
+import commentSagas from "../src/sagas/CommentSagas";
+import websocketSagas from "../src/sagas/WebsocketSagas";
+import debuggerSagas from "../src/sagas/DebuggerSagas";
+import { fetchWidgetCardsSaga } from "../src/sagas/WidgetSidebarSagas";
+import { watchActionSagas } from "../src/sagas/ActionSagas";
+import { watchActionExecutionSagas } from "../src/sagas/ActionExecutionSagas";
+import widgetOperationSagas from "../src/sagas/WidgetOperationSagas";
+import applicationSagas from "../src/sagas/ApplicationSagas";
+import { watchDatasourcesSagas } from "../src/sagas/DatasourcesSagas";
+
+export const sagasToRunForTests = [
+  initSagas,
+  fetchWidgetCardsSaga,
+  watchActionSagas,
+  watchActionExecutionSagas,
+  widgetOperationSagas,
+  watchDatasourcesSagas,
+  applicationSagas,
+  apiPaneSagas,
+  userSagas,
+  pluginSagas,
+  orgSagas,
+  importedCollectionsSagas,
+  providersSagas,
+  curlImportSagas,
+  queryPaneSagas,
+  modalSagas,
+  batchSagas,
+  themeSagas,
+  onboardingSaga,
+  actionExecutionChangeListeners,
+  utilSagas,
+  saaSPaneSagas,
+  globalSearchSagas,
+  recentEntitiesSagas,
+  commentSagas,
+  websocketSagas,
+  debuggerSagas,
+  utilSagas,
+  saaSPaneSagas,
+];
diff --git a/app/client/test/setup.ts b/app/client/test/setup.ts
index 9a04bae542..207fdeaa70 100644
--- a/app/client/test/setup.ts
+++ b/app/client/test/setup.ts
@@ -3,9 +3,29 @@ import { handlers } from "./__mocks__/apiHandlers";
 export const server = setupServer(...handlers);
 
 // establish API mocking before all tests
-beforeAll(() => server.listen())
+beforeAll(() => server.listen());
 // reset any request handlers that are declared as a part of our tests
 // (i.e. for testing one-time error scenarios)
-afterEach(() => server.resetHandlers())
+afterEach(() => server.resetHandlers());
 // clean up once the tests are done
-afterAll(() => server.close())
+afterAll(() => server.close());
+
+// popper.js fix for jest tests
+document.createRange = () => {
+  const range = new Range();
+
+  range.getBoundingClientRect = jest.fn();
+
+  range.getClientRects = () => {
+    return {
+      item: () => null,
+      length: 0,
+      [Symbol.iterator]: jest.fn(),
+    };
+  };
+
+  return range;
+};
+
+// jest events doesnt seem to be handling scrollTo
+Element.prototype.scrollTo = () => {};
diff --git a/app/client/test/testCommon.tsx b/app/client/test/testCommon.tsx
new file mode 100644
index 0000000000..ee3740ff6a
--- /dev/null
+++ b/app/client/test/testCommon.tsx
@@ -0,0 +1,81 @@
+import { getCanvasWidgetsPayload } from "sagas/PageSagas";
+import { updateCurrentPage } from "actions/pageActions";
+import { editorInitializer } from "utils/EditorUtils";
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+import { initEditor } from "actions/initActions";
+import { useDispatch } from "react-redux";
+
+export const useMockDsl = (dsl: any) => {
+  const dispatch = useDispatch();
+  const mockResp: any = {
+    data: {
+      id: "page_id",
+      name: "Page1",
+      applicationId: "app_id",
+      layouts: [
+        {
+          id: "layout_id",
+          dsl,
+          layoutOnLoadActions: [],
+          layoutActions: [],
+        },
+      ],
+    },
+  };
+  const canvasWidgetsPayload = getCanvasWidgetsPayload(mockResp);
+  dispatch({
+    type: "UPDATE_LAYOUT",
+    payload: { widgets: canvasWidgetsPayload.widgets },
+  });
+
+  dispatch(updateCurrentPage(mockResp.data.id));
+};
+export function MockPageDSL({ dsl, children }: any) {
+  editorInitializer();
+  useMockDsl(dsl);
+  return children;
+}
+export function MockApplication({ children }: any) {
+  editorInitializer();
+  const dispatch = useDispatch();
+  dispatch(initEditor("app_id", "page_id"));
+  const mockResp: any = {
+    organizationId: "org_id",
+    pages: [{ id: "page_id", name: "Page1", isDefault: true }],
+    id: "app_id",
+    isDefault: true,
+    name: "Page1",
+  };
+  dispatch({
+    type: ReduxActionTypes.FETCH_APPLICATION_SUCCESS,
+    payload: mockResp,
+  });
+  return children;
+}
+
+//got it from @blueprintjs/test-commons to dispatch hotkeys events
+export function dispatchTestKeyboardEventWithCode(
+  target: EventTarget,
+  eventType: string,
+  key: string,
+  keyCode: number,
+  shift = false,
+  meta = false,
+) {
+  const event = document.createEvent("KeyboardEvent");
+  (event as any).initKeyboardEvent(
+    eventType,
+    true,
+    true,
+    window,
+    key,
+    0,
+    meta,
+    false,
+    shift,
+  );
+  Object.defineProperty(event, "key", { get: () => key });
+  Object.defineProperty(event, "which", { get: () => keyCode });
+
+  target.dispatchEvent(event);
+}
diff --git a/app/client/test/testUtils.tsx b/app/client/test/testUtils.tsx
index 11f9f623f7..22134739c5 100644
--- a/app/client/test/testUtils.tsx
+++ b/app/client/test/testUtils.tsx
@@ -1,20 +1,53 @@
 import React, { ReactElement } from "react";
 import { render, RenderOptions, queries } from "@testing-library/react";
-import { Provider } from "react-redux";
+import { Provider, useDispatch } from "react-redux";
 import { ThemeProvider } from "../src/constants/DefaultTheme";
-import store, { testStore } from "../src/store";
 import { getCurrentThemeDetails } from "../src/selectors/themeSelectors";
 import * as customQueries from "./customQueries";
 import { BrowserRouter } from "react-router-dom";
-import { AppState } from "reducers";
+import appReducer, { AppState } from "reducers";
 import { DndProvider } from "react-dnd";
 import TouchBackend from "react-dnd-touch-backend";
+import { noop } from "utils/AppsmithUtils";
+import { getCanvasWidgetsPayload } from "sagas/PageSagas";
+import { updateCurrentPage } from "actions/pageActions";
+import { editorInitializer } from "utils/EditorUtils";
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+import { initEditor } from "actions/initActions";
+import { applyMiddleware, compose, createStore } from "redux";
+import { reduxBatch } from "@manaflair/redux-batch";
+import createSagaMiddleware from "redux-saga";
+import store, { testStore } from "store";
+import { sagasToRunForTests } from "./sagas";
+import { all, call, spawn } from "redux-saga/effects";
+const testSagaMiddleware = createSagaMiddleware();
+
+const testStoreWithTestMiddleWare = (initialState: Partial<AppState>) =>
+  createStore(
+    appReducer,
+    initialState,
+    compose(reduxBatch, applyMiddleware(testSagaMiddleware), reduxBatch),
+  );
+
+const rootSaga = function*(sagasToRun = sagasToRunForTests) {
+  yield all(
+    sagasToRun.map((saga) =>
+      spawn(function*() {
+        while (true) {
+          yield call(saga);
+          break;
+        }
+      }),
+    ),
+  );
+};
 
 const customRender = (
   ui: ReactElement,
   state?: {
     url?: string;
     initialState?: Partial<AppState>;
+    sagasToRun?: typeof sagasToRunForTests;
   },
   options?: Omit<RenderOptions, "queries">,
 ) => {
@@ -23,6 +56,11 @@ const customRender = (
   if (state && state.initialState) {
     reduxStore = testStore(state.initialState || {});
   }
+  if (state && state.sagasToRun) {
+    reduxStore = testStoreWithTestMiddleWare(reduxStore.getState());
+    testSagaMiddleware.run(() => rootSaga(state.sagasToRun));
+  }
+
   const defaultTheme = getCurrentThemeDetails(reduxStore.getState());
   return render(
     <BrowserRouter>