[Feature] Grid Widget

.gitignore

@@ -2,6 +2,7 @@
 .idea
 *.iml
 .env
+.vscode/*
 
 # test coverage
-coverage-summary.json
+coverage-summary.json

app/client/.gitignore

@@ -43,3 +43,5 @@ storybook-static/*
 build-storybook.log
 
 .eslintcache
+.vscode
+TODO

app/client/cypress/.eslintrc.json

@@ -2,6 +2,9 @@
   "env": {
     "cypress/globals": true
   },
+  "rules": {
+    "cypress/no-unnecessary-waiting": 0
+  },
   "extends": [
     "plugin:cypress/recommended"
   ]

app/client/cypress/fixtures/listdsl.json

@@ -0,0 +1,161 @@
+{
+  "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,
+        "enhancements": true,
+        "backgroundColor": "",
+        "gridType": "vertical",
+        "gridGap": 0,
+        "items": "[\n  {\n    \"id\": 1,\n    \"email\": \"[email protected]\",\n    \"first_name\": \"Michael\",\n    \"last_name\": \"Lawson\",\n    \"avatar\": \"https://reqres.in/img/faces/7-image.jpg\"\n  },\n  {\n    \"id\": 2,\n    \"email\": \"[email protected]\",\n    \"first_name\": \"Lindsay\",\n    \"last_name\": \"Ferguson\",\n    \"avatar\": \"https://reqres.in/img/faces/8-image.jpg\"\n  },\n {\n    \"id\": 3,\n    \"email\": \"[email protected]\",\n    \"first_name\": \"Brock\",\n    \"last_name\": \"Lesnar\",\n    \"avatar\": \"https://reqres.in/img/faces/8-image.jpg\"\n  }\n]",
+        "widgetName": "List1",
+        "children": [
+          {
+            "isVisible": true,
+            "widgetName": "Canvas1",
+            "containerStyle": "none",
+            "canExtend": false,
+            "detachFromLayout": true,
+            "dropDisabled": true,
+            "children": [
+              {
+                "isVisible": true,
+                "backgroundColor": "white",
+                "widgetName": "Container1",
+                "containerStyle": "card",
+                "children": [
+                  {
+                    "isVisible": true,
+                    "widgetName": "Canvas2",
+                    "containerStyle": "none",
+                    "canExtend": false,
+                    "detachFromLayout": true,
+                    "children": [
+                      {
+                        "isVisible": true,
+                        "text": "Label",
+                        "textStyle": "LABEL",
+                        "textAlign": "LEFT",
+                        "widgetName": "Text1",
+                        "type": "TEXT_WIDGET",
+                        "isLoading": false,
+                        "parentColumnSpace": 32,
+                        "parentRowSpace": 40,
+                        "leftColumn": 2,
+                        "rightColumn": 6,
+                        "topRow": 0,
+                        "bottomRow": 1,
+                        "parentId": "dinv2tsatk",
+                        "widgetId": "k6ct7dxg4w"
+                      },
+                      {
+                        "isVisible":true,
+                        "text":"Submit",
+                        "buttonStyle":"PRIMARY_BUTTON",
+                        "widgetName":"Button1",
+                        "isDisabled":false,
+                        "isDefaultClickDisabled":true,
+                        "version":1,
+                        "type":"BUTTON_WIDGET",
+                        "isLoading":false,
+                        "parentColumnSpace":29.25,
+                        "parentRowSpace":40,
+                        "leftColumn":6,
+                        "rightColumn":8,
+                        "topRow":1,
+                        "bottomRow":2,
+                        "parentId":"dinv2tsatk",
+                        "widgetId":"fuw9p7cuek"
+                     }
+                    ],
+                    "minHeight": null,
+                    "type": "CANVAS_WIDGET",
+                    "isLoading": false,
+                    "parentColumnSpace": 1,
+                    "parentRowSpace": 1,
+                    "leftColumn": 0,
+                    "rightColumn": null,
+                    "topRow": 0,
+                    "bottomRow": null,
+                    "parentId": "4ruj7xl5ri",
+                    "widgetId": "dinv2tsatk"
+                  }
+                ],
+                "dragDisabled": true,
+                "isDeletable": false,
+                "disablePropertyPane": true,
+                "type": "CONTAINER_WIDGET",
+                "isLoading": false,
+                "leftColumn": 0,
+                "rightColumn": 16,
+                "topRow": 0,
+                "bottomRow": 4,
+                "parentId": "0pvmmqr77m",
+                "widgetId": "4ruj7xl5ri"
+              }
+            ],
+            "minHeight": 400,
+            "type": "CANVAS_WIDGET",
+            "isLoading": false,
+            "parentColumnSpace": 1,
+            "parentRowSpace": 1,
+            "leftColumn": 0,
+            "rightColumn": 592,
+            "topRow": 0,
+            "bottomRow": 400,
+            "parentId": "5bwz8xcvhj",
+            "widgetId": "0pvmmqr77m"
+          }
+        ],
+        "type": "LIST_WIDGET",
+        "isLoading": false,
+        "parentColumnSpace": 74,
+        "parentRowSpace": 40,
+        "leftColumn": 0,
+        "rightColumn": 8,
+        "topRow": 0,
+        "bottomRow": 10,
+        "parentId": "0",
+        "widgetId": "5bwz8xcvhj",
+        "dynamicBindingPathList": [],
+        "template": {
+          "Text1": {
+            "isVisible": true,
+            "text": "Label",
+            "textStyle": "LABEL",
+            "textAlign": "LEFT",
+            "widgetName": "Text1",
+            "type": "TEXT_WIDGET",
+            "isLoading": false,
+            "parentColumnSpace": 32,
+            "parentRowSpace": 40,
+            "leftColumn": 0,
+            "rightColumn": 4,
+            "topRow": 0,
+            "bottomRow": 1,
+            "parentId": "dinv2tsatk",
+            "widgetId": "k6ct7dxg4w"
+          }
+        }
+      }
+    ]
+  }
+}

app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js

@@ -0,0 +1,89 @@
+const commonlocators = require("../../../locators/commonlocators.json");
+const widgetsPage = require("../../../locators/Widgets.json");
+const dsl = require("../../../fixtures/listdsl.json");
+const publishPage = require("../../../locators/publishWidgetspage.json");
+
+describe("Container Widget Functionality", function() {
+  const items = JSON.parse(dsl.dsl.children[0].items);
+
+  before(() => {
+    cy.addDsl(dsl);
+  });
+
+  it("checks if list shows correct no. of items", function() {
+    cy.get(commonlocators.containerWidget).then(function($lis) {
+      expect($lis).to.have.length(2);
+    });
+  });
+
+  it("checks currentItem binding", function() {
+    cy.SearchEntityandOpen("Text1");
+    cy.getCodeMirror().then(($cm) => {
+      cy.get(".CodeMirror textarea")
+        .first()
+        .type(`{{currentItem.first_name}}`, {
+          force: true,
+          parseSpecialCharSequences: false,
+        });
+    });
+
+    cy.wait(1000);
+
+    cy.closePropertyPane();
+
+    cy.get(commonlocators.TextInside).then(function($lis) {
+      expect($lis.eq(0)).to.contain(items[0].first_name);
+      expect($lis.eq(1)).to.contain(items[1].first_name);
+    });
+  });
+
+  it("checks button action", function() {
+    cy.SearchEntityandOpen("Button1");
+    cy.getCodeMirror().then(($cm) => {
+      cy.get(".CodeMirror textarea")
+        .first()
+        .type(`{{currentItem.first_name}}`, {
+          force: true,
+          parseSpecialCharSequences: false,
+        });
+    });
+    cy.addAction("{{currentItem.first_name}}");
+
+    cy.PublishtheApp();
+
+    cy.get(`${widgetsPage.widgetBtn}`)
+      .first()
+      .click();
+
+    cy.get(commonlocators.toastmsg).contains(items[0].first_name);
+  });
+
+  it("it checks onListItem click action", function() {
+    cy.get(publishPage.backToEditor).click({ force: true });
+
+    cy.SearchEntityandOpen("List1");
+    cy.addAction("{{currentItem.first_name}}");
+
+    cy.PublishtheApp();
+
+    cy.get(
+      "div[type='LIST_WIDGET'] .t--widget-containerwidget:first-child",
+    ).click();
+
+    cy.get(commonlocators.toastmsg).contains(items[0].first_name);
+  });
+
+  it("it checks pagination", function() {
+    // clicking on second pagination button
+    cy.get(`${commonlocators.paginationButton}-2`).click();
+
+    // now we are on the second page which shows first the 3rd item in the list
+    cy.get(commonlocators.TextInside).then(function($lis) {
+      expect($lis.eq(0)).to.contain(items[2].first_name);
+    });
+  });
+
+  afterEach(() => {
+    // put your clean up code if any
+  });
+});

app/client/cypress/locators/commonlocators.json

@@ -105,6 +105,8 @@
   "globalSearchInput": ".t--global-search-input",
   "globalSearchTrigger": ".t--global-search-modal-trigger",
   "globalSearchClearInput": ".t--global-clear-input",
+  "containerWidget": ".t--widget-containerwidget",
+  "paginationButton": ".rc-pagination-item",
   "switchWidgetActive": ".t--switch-widget-active",
   "switchWidgetInActive": ".t--switch-widget-inactive",
   "switchWidgetLoading": ".t--switch-widget-loading"

app/client/cypress/manual_TestSuite/new_Table_Spec.js

@@ -12,13 +12,11 @@ describe("Table functionality ", function() {
     // Navigate to add background colour and Text colour
     // Ensure the row colour gets overlapped on table colour
   });
-
   it("Collapse the tabs of Property pane", function() {
     // Add a table
     // Click on the property pane
     // Collapse the General ,Action and Tab option
   });
-
   it("Bind the column with same name", function() {
     // Add a table
     // Click on the property pane

app/client/package.json

@@ -73,6 +73,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",
@@ -86,6 +87,7 @@
     "popper.js": "^1.15.0",
     "prettier": "^1.18.2",
     "prismjs": "^1.23.0",
+    "rc-pagination": "^3.1.3",
     "re-reselect": "^3.4.0",
     "react": "^16.12.0",
     "react-base-table": "^1.9.1",
@@ -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",
@@ -129,7 +130,8 @@
     "tinycolor2": "^1.4.1",
     "toposort": "^2.0.2",
     "ts-loader": "^6.0.4",
-    "typescript": "^3.9.2",
+    "tslib": "^2.1.0",
+    "typescript": "^4.1.3",
     "unescape-js": "^1.1.4",
     "url-search-params-polyfill": "^8.0.0",
     "worker-loader": "^3.0.2"
@@ -176,7 +178,7 @@
     "@storybook/preset-create-react-app": "^3.1.4",
     "@storybook/react": "^5.3.19",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.2.5",
+    "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.1",
     "@types/codemirror": "^0.0.96",
     "@types/deep-diff": "^1.0.0",
@@ -186,14 +188,15 @@
     "@types/react-beautiful-dnd": "^11.0.4",
     "@types/react-select": "^3.0.5",
     "@types/react-tabs": "^2.3.1",
+    "@types/react-test-renderer": "^17.0.1",
     "@types/react-window": "^1.8.2",
     "@types/redux-form": "^8.1.9",
     "@types/redux-mock-store": "^1.0.2",
     "@types/styled-system": "^5.1.9",
     "@types/tern": "0.22.0",
     "@types/toposort": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.6.0",
-    "@typescript-eslint/parser": "^4.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-styled-components": "^1.10.7",
     "craco-babel-loader": "^0.1.4",

app/client/src/actions/controlActions.tsx

@@ -22,6 +22,7 @@ export const updateWidgetPropertyRequest = (
 export interface BatchPropertyUpdatePayload {
   modify?: Record<string, unknown>; //Key value pairs of paths and values to update
   remove?: string[]; //Array of paths to delete
+  triggerPaths?: string[]; // Array of paths in the modify and remove list which are trigger paths
 }
 
 export const batchUpdateWidgetProperty = (

app/client/src/actions/pageActions.tsx

@@ -1,15 +1,15 @@
-import { FetchPageRequest, PageLayout, SavePageResponse } from "api/PageApi";
-import { WidgetOperation } from "widgets/BaseWidget";
 import { WidgetType } from "constants/WidgetConstants";
 import {
   EvaluationReduxAction,
   ReduxAction,
   ReduxActionTypes,
   UpdateCanvasPayload,
 } from "constants/ReduxActionConstants";
-import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import { WidgetOperation } from "widgets/BaseWidget";
+import { FetchPageRequest, PageLayout, SavePageResponse } from "api/PageApi";
 import { APP_MODE, UrlDataState } from "reducers/entityReducers/appReducer";
+import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
 
 export interface FetchPageListPayload {
   applicationId: string;