Merge branch 'release-v1.5.29'

nik0811 · Nov 9, 2021 · 1fee2c1 · 1fee2c1
2 parents 76a79ee + 29f5962
commit 1fee2c1
Show file tree

Hide file tree

Showing 97 changed files with 2,667 additions and 1,008 deletions.
diff --git a/.github/ISSUE_TEMPLATE/--epic.yaml b/.github/ISSUE_TEMPLATE/--epic.yaml
@@ -27,10 +27,10 @@ body:
   attributes:
     label: Requirements 
     value: |
-      | Requirement   | User Story | Importance | Notes |
-      | ------------- | ------------- | ------------- | ------------- |
-      | e.g. Must be mobile responsive  | e.g. as a user, I want to be able to access the platform via mobile phone  | High, Low or Medium  | Content Cell  |
-      | e.g. The user should be able to leave a comment | e.g as a user, I want to be able to communicate with the other members on the canvas  | High, Low or Medium  | Content Cell  |
+      | Requirement   | User Story    |
+      | ------------- | ------------- |
+      | e.g. Must be mobile responsive  | e.g. as a user, I want to be able to access the platform via mobile phone  |
+      | e.g. The user should be able to leave a comment | e.g as a user, I want to be able to communicate with the other members on the canvas  |
   validations:
     required: false
 - type: textarea

diff --git a/app/client/.babelrc b/app/client/.babelrc
@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    ["module-resolver", {
+      "root": ["./src"],
+      "alias": {
+        "utils": "./src/utils/",
+        "test/*": ["../test/*"],
+        "underscore": "lodash",
+        "constants": "./src/constants/",
+        "components": "./src/components/",
+        "selectors": "./src/selectors/",
+        "reducers": "./src/reducers/",
+        "actions":"./src/actions/",
+        "api": "./src/api/",
+        "assets": "./src/assets/",
+        "sagas": "./src/sagas/",
+      }
+    }]
+  ]
+}
diff --git a/app/client/.eslintrc.json b/app/client/.eslintrc.json
@@ -36,11 +36,12 @@
     "react/jsx-fragments": "error",
     "react/jsx-no-useless-fragment": "error",
     "sort-destructure-keys/sort-destructure-keys": ["error", {"caseSensitive": false}],
-    "no-console": ["error", {
-      "allow": ["error"]
-    }]
+    "no-console": "warn"
   },
   "settings": {
+    "import/resolver": {
+      "babel-module": {}
+    },
     "react": {
       "pragma": "React",
       // Tells eslint-plugin-react to automatically detect the version of React to use

diff --git a/...nt/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_tooltip_spec.js b/...nt/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_tooltip_spec.js
@@ -16,22 +16,21 @@ describe("Button Widget Functionality - Validate tooltip visibility", function()
     );
     cy.get(widgetsPage.buttonWidget).trigger("mouseover");
     // tooltip should show on hover
-    cy.get(".bp3-popover.bp3-tooltip .bp3-popover-content").should(
+    cy.get(".bp3-popover2-content").should(
       "have.text",
       "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
     );
   });
 
   it("Validate tooltip hidden for disabled button", function() {
     // first disable button
-    cy.get(widgetsPage.toggleDisable).click({ force: true });
-    cy.testJsontext("disabled", "true");
+    cy.get(".t--property-control-disabled .bp3-switch").click({ force: true });
     cy.validateDisableWidget(
       widgetsPage.buttonWidget,
       commonlocators.disabledField,
     );
     // hover on button and check tooltip should not show
     cy.get(widgetsPage.buttonWidget).trigger("mouseover");
-    cy.get(".bp3-popover.bp3-tooltip .bp3-popover-content").should("not.exist");
+    cy.get(".bp3-popover2-content").should("not.exist");
   });
 });
diff --git a/...client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js b/...client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/FormWidget_spec.js
@@ -48,46 +48,46 @@ describe("Form Widget Functionality", function() {
     cy.get(".t--entity").should("contain", "Form");
   });
   it("Form Widget Functionality", function() {
-    cy.openPropertyPane("formwidget");
-    /**
-     * @param{Text} Random Text
-     * @param{FormWidget}Mouseover
-     * @param{FormPre Css} Assertion
-     */
-    // Change the form name
-    cy.widgetText(
-      "FormTest",
-      formWidgetsPage.formWidget,
-      formWidgetsPage.formInner,
-    );
-    /**
-     * @param{Text} Random Colour
-     */
-    // Change the form  background color
-    cy.get(widgetsPage.backgroundcolorPicker)
-      .first()
-      .click({ force: true });
-    cy.xpath(widgetsPage.greenColor).click();
-    // Verify the form background color
-    cy.get(formWidgetsPage.formD)
-      .should("have.css", "background-color")
-      .and("eq", "rgb(3, 179, 101)");
-    /**
-     * @param{toggleButton Css} Assert to be checked
-     */
-    // Check the Scroll and verify
-    cy.togglebar(commonlocators.scrollView);
-    cy.get(formWidgetsPage.formD)
-      .scrollTo("bottom")
-      .should("be.visible");
-    // Close the form propert pane
-    cy.get(commonlocators.editPropCrossButton).click({ force: true });
+    // cy.openPropertyPane("formwidget");
+    // /**
+    //  * @param{Text} Random Text
+    //  * @param{FormWidget}Mouseover
+    //  * @param{FormPre Css} Assertion
+    //  */
+    // // Change the form name
+    // cy.widgetText(
+    //   "FormTest",
+    //   formWidgetsPage.formWidget,
+    //   formWidgetsPage.formInner,
+    // );
+    // /**
+    //  * @param{Text} Random Colour
+    //  */
+    // // Change the form  background color
+    // cy.get(widgetsPage.backgroundcolorPicker)
+    //   .first()
+    //   .click({ force: true });
+    // cy.xpath(widgetsPage.greenColor).click();
+    // // Verify the form background color
+    // cy.get(formWidgetsPage.formD)
+    //   .should("have.css", "background-color")
+    //   .and("eq", "rgb(128, 128, 128)");
+    // /**
+    //  * @param{toggleButton Css} Assert to be checked
+    //  */
+    // // Check the Scroll and verify
+    // cy.togglebar(commonlocators.scrollView);
+    // cy.get(formWidgetsPage.formD)
+    //   .scrollTo("bottom")
+    //   .should("be.visible");
+    // // Close the form propert pane
+    // cy.get(commonlocators.editPropCrossButton).click({ force: true });
   });
   it("Form Widget Functionality To Verify The Colour", function() {
     cy.PublishtheApp();
     cy.get(formWidgetsPage.formD)
       .should("have.css", "background-color")
-      .and("eq", "rgb(3, 179, 101)");
+      .and("eq", "rgb(128, 128, 128)");
   });
   it("Form Widget Functionality To Unchecked Visible Widget", function() {
     cy.openPropertyPane("formwidget");

diff --git a/app/client/package.json b/app/client/package.json
@@ -24,24 +24,6 @@
     "@sentry/react": "^6.2.4",
     "@sentry/tracing": "^6.2.4",
     "@sentry/webpack-plugin": "^1.12.1",
-    "@types/chance": "^1.0.7",
-    "@types/lodash": "^4.14.120",
-    "@types/moment-timezone": "^0.5.10",
-    "@types/nanoid": "^2.0.0",
-    "@types/node": "^10.12.18",
-    "@types/prismjs": "^1.16.1",
-    "@types/react": "^16.8.2",
-    "@types/react-custom-scrollbars": "^4.0.7",
-    "@types/react-dom": "^16.8.0",
-    "@types/react-helmet": "^5.0.14",
-    "@types/react-instantsearch-dom": "^6.3.0",
-    "@types/react-redux": "^7.0.1",
-    "@types/react-router-dom": "^5.1.2",
-    "@types/react-syntax-highlighter": "^13.5.2",
-    "@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",
@@ -52,6 +34,7 @@
     "@uppy/url": "^1.5.16",
     "@uppy/webcam": "^1.8.4",
     "@welldone-software/why-did-you-render": "^4.2.5",
+    "acorn-walk": "^8.2.0",
     "algoliasearch": "^4.2.0",
     "astring": "^1.7.5",
     "axios": "^0.21.1",
@@ -213,6 +196,24 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.1.1",
     "@types/codemirror": "^0.0.96",
+    "@types/chance": "^1.0.7",
+    "@types/lodash": "^4.14.120",
+    "@types/moment-timezone": "^0.5.10",
+    "@types/nanoid": "^2.0.0",
+    "@types/node": "^10.12.18",
+    "@types/prismjs": "^1.16.1",
+    "@types/react": "^16.8.2",
+    "@types/react-custom-scrollbars": "^4.0.7",
+    "@types/react-dom": "^16.8.0",
+    "@types/react-helmet": "^5.0.14",
+    "@types/react-instantsearch-dom": "^6.3.0",
+    "@types/react-redux": "^7.0.1",
+    "@types/react-router-dom": "^5.1.2",
+    "@types/react-syntax-highlighter": "^13.5.2",
+    "@types/react-table": "^7.0.13",
+    "@types/styled-components": "^5.1.3",
+    "@types/tinycolor2": "^1.4.2",
+    "@types/zipcelx": "^1.5.0",
     "@types/deep-diff": "^1.0.0",
     "@types/downloadjs": "^1.4.2",
     "@types/draft-js": "^0.11.1",
@@ -236,6 +237,7 @@
     "@types/toposort": "^2.0.3",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-styled-components": "^1.10.7",
     "cra-bundle-analyzer": "^0.1.0",
     "craco-babel-loader": "^0.1.4",
@@ -247,7 +249,9 @@
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-config-react": "^1.1.7",
+    "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^2.3.0",

diff --git a/app/client/src/actions/evaluationActions.ts b/app/client/src/actions/evaluationActions.ts
@@ -37,7 +37,6 @@ export const EVALUATE_REDUX_ACTIONS = [
   // JS Actions
   ReduxActionTypes.FETCH_JS_ACTIONS_SUCCESS,
   ReduxActionTypes.CREATE_JS_ACTION_SUCCESS,
-  ReduxActionTypes.UPDATE_JS_ACTION_SUCCESS,
   ReduxActionErrorTypes.FETCH_JS_ACTIONS_ERROR,
   ReduxActionTypes.DELETE_JS_ACTION_SUCCESS,
   ReduxActionTypes.COPY_JS_ACTION_SUCCESS,
@@ -46,6 +45,7 @@ export const EVALUATE_REDUX_ACTIONS = [
   ReduxActionTypes.FETCH_JS_ACTIONS_FOR_PAGE_SUCCESS,
   ReduxActionTypes.FETCH_JS_ACTIONS_VIEW_MODE_SUCCESS,
   ReduxActionErrorTypes.FETCH_JS_ACTIONS_VIEW_MODE_ERROR,
+  ReduxActionTypes.UPDATE_JS_ACTION_BODY_SUCCESS,
   // App Data
   ReduxActionTypes.SET_APP_MODE,
   ReduxActionTypes.FETCH_USER_DETAILS_SUCCESS,

diff --git a/app/client/src/actions/jsPaneActions.ts b/app/client/src/actions/jsPaneActions.ts
@@ -16,13 +16,30 @@ export const updateJSCollection = (
   payload: { body, id },
 });
 
+export const updateJSCollectionBody = (
+  body: string,
+  id: string,
+): ReduxAction<{ body: string; id: string }> => ({
+  type: ReduxActionTypes.UPDATE_JS_ACTION_BODY_INIT,
+  payload: { body, id },
+});
+
 export const updateJSCollectionSuccess = (payload: { data: JSCollection }) => {
   return {
     type: ReduxActionTypes.UPDATE_JS_ACTION_SUCCESS,
     payload,
   };
 };
 
+export const updateJSCollectionBodySuccess = (payload: {
+  data: JSCollection;
+}) => {
+  return {
+    type: ReduxActionTypes.UPDATE_JS_ACTION_BODY_SUCCESS,
+    payload,
+  };
+};
+
 export const refactorJSCollectionAction = (payload: {
   refactorAction: RefactorAction;
   actionCollection: JSCollection;

diff --git a/app/client/src/api/GitSyncAPI.tsx b/app/client/src/api/GitSyncAPI.tsx
@@ -68,9 +68,10 @@ class GitSyncAPI extends Api {
     destinationBranch,
     sourceBranch,
   }: MergeBranchPayload): AxiosPromise<ApiResponse> {
-    return Api.post(
-      `${GitSyncAPI.baseURL}/merge/${applicationId}?sourceBranch=${sourceBranch}&destinationBranch=${destinationBranch}`,
-    );
+    return Api.post(`${GitSyncAPI.baseURL}/merge/${applicationId}`, {
+      sourceBranch,
+      destinationBranch,
+    });
   }
 
   static connect(payload: ConnectToGitPayload, applicationId: string) {

diff --git a/app/client/src/components/ads/DialogComponent.tsx b/app/client/src/components/ads/DialogComponent.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useState, useEffect } from "react";
 import styled from "styled-components";
 import { Dialog, Classes } from "@blueprintjs/core";
 import { Colors } from "constants/Colors";
+import Icon, { IconName, IconSize } from "./Icon";
 
 const StyledDialog = styled(Dialog)<{
   setMaxWidth?: boolean;
@@ -86,6 +87,13 @@ const StyledDialog = styled(Dialog)<{
   }
 `;
 
+const HeaderIconWrapper = styled.div`
+  padding: 5px;
+  border-radius: 50%;
+  margin-right: 10px;
+  background: ${(props) => props.theme.colors.modal.iconBg};
+`;
+
 const TriggerWrapper = styled.div`
   margin-right: 4px;
 `;
@@ -94,6 +102,11 @@ type DialogComponentProps = {
   isOpen?: boolean;
   canOutsideClickClose?: boolean;
   title?: string;
+  headerIcon?: {
+    name: IconName;
+    fillColor?: string;
+    hoverColor?: string;
+  };
   trigger?: ReactNode;
   setMaxWidth?: boolean;
   children: ReactNode;
@@ -125,6 +138,16 @@ export function DialogComponent(props: DialogComponentProps) {
   }, [props.isOpen]);
 
   const getHeader = props.getHeader;
+  const headerIcon = props.headerIcon ? (
+    <HeaderIconWrapper>
+      <Icon
+        fillColor={props.headerIcon.fillColor}
+        hoverFillColor={props.headerIcon.hoverColor}
+        name={props.headerIcon.name}
+        size={IconSize.XL}
+      />
+    </HeaderIconWrapper>
+  ) : null;
 
   return (
     <>
@@ -143,6 +166,7 @@ export function DialogComponent(props: DialogComponentProps) {
         canEscapeKeyClose={!!props.canEscapeKeyClose}
         canOutsideClickClose={!!props.canOutsideClickClose}
         className={props.className}
+        icon={headerIcon}
         isOpen={isOpen}
         maxHeight={props.maxHeight}
         maxWidth={props.maxWidth}

diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx
@@ -79,6 +79,7 @@ export type DropdownProps = CommonComponentProps &
     dontUsePortal?: boolean;
     hideSubText?: boolean;
     boundary?: PopperBoundary;
+    defaultIcon?: IconName;
   };
 export interface DefaultDropDownValueNodeProps {
   selected: DropdownOption;
@@ -685,7 +686,7 @@ export default function Dropdown(props: DropdownProps) {
             <DropdownIcon
               fillColor={downIconColor}
               hoverFillColor={downIconColor}
-              name="expand-more"
+              name={props.defaultIcon || "expand-more"}
               size={IconSize.XXL}
             />
           )

diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx
@@ -29,13 +29,16 @@ export type EditableTextProps = CommonComponentProps & {
   isError?: boolean;
 };
 
+// Width of the component when the `filled` prop is false
+export const UNFILLED_WIDTH = 243;
+
 export const EditableTextWrapper = styled.div<{
   filled: boolean;
 }>`
   ${(props) =>
     !props.filled
       ? `
-    width: 243px;
+    width: ${UNFILLED_WIDTH}px;
   `
       : `
     width: 100%;