[Feature] Grid Widget (#2389)

* Updated test * updated assertions * Resizing image to take full width of table cell * updated assertion * Stop updating dynamicBindingPathList directly from widget * Fix selectedRow and selectedRows computations * Fix primaryColumns computations * Updated test for derived column * Added tests for computed value * Added check clear data * Reordering of test * updated common method * Made image size as 100% of table cell size * add templating logic * Updated flow and dsl * Clear old primary columns * Updated testname * updated assertion * use evaluated values for children * Fix primary columns update on component mount and component update * add isArray check * remove property pane enhancement reducer * add property pane enhancement reducer * disable items other than template + fix running property enchancment on drop of list widget * disbled drag, resize, settingsControl, drag for items other than template * add grid options * uncomment the widget operation for add child for grid children * handle delete scenario for child widget in list widget * WIP: Use the new delete and update property features * add listdsl.json for testcases * add test cases for correct no. of items being rendered * add test cases currentItem binding in list widget * change dragEnabled to dragDisabled * change resizeEnabled to resizeDisabled * change settingsControlEnabled to settingsControlDisabled * change dropEnabled to dropDisabled * update settingsControlDisabled default value * Use deleteProperties in propertyControls * Fix unsetting of array indices when deleting widget properties * remove old TableWidget.tsx file * Fix derived column property update on primary column property update * Handle undefined primary columns * Fix filepicker immutable prop issue * Fix object.freeze issue when adding ids to the property pane configuration * fix widget issue in grid * Fix column actions dynamicBindingPathList inclusion issue * remove consoles + fix typo around batch update * Remove redundant tests * js binding test for date picker * hydate enhancement map on copy list widget * check for dynamicleaf * fixes * improve check * fix getNextWidgetName * update template in list widget when copying * updating template copy logic when copying widget * update dynamicBindingPathList in copied widget * Add path parameter to hidden functions in property pane configs * fix copy bug when copying list widget * add computed list property control * Remove time column type Fix editor prompt for currentRow Fix undefined derivedColumns scenario Remove validations for primaryColums and derivedColumns Fix section toggle for video, image and button column types * Fix table widget actions and custom column migrations * Add logs for cyclical dependency map ♻️ * Process array differences * add property control for list widget * Fix onClick migrations * Property pane config parity * binding and trigger paths from the property pane config (#2920) * try react virtualized library * Fix unit test * Fix unit test ✅ * Fix minor issues in table widget * Add default meta props to binding paths to ensure eval and validation * Dummy commit 🎉 * Remove unnecessary datepicker test Fix chart data as string issue * Achieve table column sorting and resizing parity with release * handle scenario where last column isn't available to access * Fix for panel config path not existing in the widget * Fix bindings in currentRow (default) Add dummy property pane config for canvas widget * Update canvas widgets with dynamicPathLists on delete of property paths * Add all diffs to change paths and trim later * Add back default properties 🚶🏻‍♂️ * Use object based paths instead of arrays for primaryColumns and derivedColumns * Fix issue in reordered columns * Fix inccorect update order * add virtualized list * Fix failing property pane tests * minor change * minor list widget change * Remove .vscode from git * Rename ads to alloy Fix isVisible in list widget * move grid component to widget folder * fix import in widget registry * add sticky row in virtualized list * add sticky container * Fix Height of grid widget items container * fix dragging of items in children other than template children * update list widget * update list widget * Fix padding in list widget * hide scrollbar in list widget list * fix copy bug in list widget * regenrate enhancement map on undo delete widget * Use enhancementmap for autocomplete in list widget Basic styles for list widget scrollbar * add custom control in widget config * minor commit * update scrollbar styles * remove unused variable * fix typo in custom control * comment out test cases * remove unused imports * remove unused imports * add JSON stringify in interweave * add noPad styling in dragLayer for noPad prop * implement grid gap * add list item background color prop * add white color in color picker control * fix gap in last list item * remove onBeforeParse in textcomponent * remove virtualization in grid widget * allow overflow-y * add onListItemClick action * add beta label * add pagination * fix actions in pagination in list widget * add list widget icon * add list background color default value * remove extra div * fix pagination issue * fix list widget crashing on perpage change * extract child operation function to widgetblueprint saga * refactor enhancements * add enhancement hook * refactor propertyUpdate hook enhancment * remove enhacement map * revert renaming ads to alloy * add autopagination * Cleanup unused vars Re-write loop using map Fix binding with external input widget * update default background color * remove unnessary scrol + fix pagination per page * remove console.log * use grid gap in pixel instead of snap * fix list widget tests for binding * add tests for on click action and pagination * remove unnecessary imports * remove overflow hidden in list component * Add feature to enable template actions * update property pane help text for list widget * disable pagination in editor view * update property pane options * add test case for action * uncomment tests * fix grid gap validation * update test cases * fix property pane opening issue for list tempalte * Disable form widgets in list widget * fix template issue for actions * add validation tests for list data * update starting template * add selectedRow + enable pagination in edit mode * remove extra padding in list widget + popper fix on settingDisabled * add stop propagation for button click * fix click event in edit mode * disallow filepicker widget for list widget * add test for list widget entity definition for selectItem * remove unused imports * fix test * remove evaluated value for list child widgets * add comment * remove log * fix copying bug in list widget * add check for not allowing template to copy * fix test * add test for property pane actions * remove unused import * add draglayercomponent test * add test for draggable component * add test for evaluatedvalue popup * add test for messages.ts * add test for widgeticons * add test for property pane selector * add test for widget config response * start testing widget configresponse * add test for enhancements in widget config * add test for codeeditor * add test for base widget + list widget * add test for executeWidgetBlueprintChildOperations * remove unused import * add test for widget operation utils * remove unused import * add test for handleSpecificCasesWhilePasting * remove unused function * remove unused import * add empty list styling * resolve all review comments * fix message test * add test for widget operation utils * fix merge conflicts * move validations in property config Co-authored-by: Abhinav Jha <[email protected]> Co-authored-by: nandan.anantharamu <[email protected]> Co-authored-by: vicky-primathon.in <[email protected]> Co-authored-by: Pawan Kumar <[email protected]> Co-authored-by: Piyush <[email protected]> Co-authored-by: hetunandu <[email protected]> Co-authored-by: Hetu Nandu <[email protected]> Co-authored-by: root <[email protected]>
appsmithorg · Apr 23, 2021 · 1717b0e · 1717b0e
1 parent 2eec2fb
commit 1717b0e
Show file tree

Hide file tree

Showing 75 changed files with 3,677 additions and 149 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 .idea
 *.iml
 .env
+.vscode/*
 
 # test coverage
-coverage-summary.json
+coverage-summary.json
diff --git a/app/client/.gitignore b/app/client/.gitignore
@@ -43,3 +43,5 @@ storybook-static/*
 build-storybook.log
 
 .eslintcache
+.vscode
+TODO
diff --git a/app/client/cypress/.eslintrc.json b/app/client/cypress/.eslintrc.json
@@ -2,6 +2,9 @@
   "env": {
     "cypress/globals": true
   },
+  "rules": {
+    "cypress/no-unnecessary-waiting": 0
+  },
   "extends": [
     "plugin:cypress/recommended"
   ]

diff --git a/app/client/cypress/fixtures/listdsl.json b/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"
+          }
+        }
+      }
+    ]
+  }
+}
diff --git a/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/List_spec.js b/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
+  });
+});
diff --git a/app/client/cypress/locators/commonlocators.json b/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"

diff --git a/app/client/cypress/manual_TestSuite/new_Table_Spec.js b/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

diff --git a/app/client/package.json b/app/client/package.json
@@ -87,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",
@@ -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",
@@ -193,8 +195,8 @@
     "@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",

diff --git a/app/client/src/actions/controlActions.tsx b/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 = (

diff --git a/app/client/src/actions/pageActions.tsx b/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;

diff --git a/app/client/src/actions/propertyPaneActions.test.ts b/app/client/src/actions/propertyPaneActions.test.ts
@@ -0,0 +1,11 @@
+import * as actions from "./propertyPaneActions";
+import { ReduxActionTypes } from "constants/ReduxActionConstants";
+
+describe("property pane action actions", () => {
+  it("should create an action hide Property Pane", () => {
+    const expectedAction = {
+      type: ReduxActionTypes.HIDE_PROPERTY_PANE,
+    };
+    expect(actions.hidePropertyPane()).toEqual(expectedAction);
+  });
+});
diff --git a/app/client/src/actions/propertyPaneActions.ts b/app/client/src/actions/propertyPaneActions.ts
@@ -8,3 +8,9 @@ export const updateWidgetName = (widgetId: string, newName: string) => {
     },
   };
 };
+
+export const hidePropertyPane = () => {
+  return {
+    type: ReduxActionTypes.HIDE_PROPERTY_PANE,
+  };
+};
diff --git a/app/client/src/assets/icons/widget/list.svg b/app/client/src/assets/icons/widget/list.svg