diff --git a/app/client/cypress/fixtures/modalScroll.json b/app/client/cypress/fixtures/modalScroll.json new file mode 100644 index 0000000000..b8e66c7f49 --- /dev/null +++ b/app/client/cypress/fixtures/modalScroll.json @@ -0,0 +1,600 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 629, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1850, + "containerStyle": "none", + "snapRows": 128, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 53, + "minHeight": 1860, + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "widgetName": "Modal1", + "isCanvas": true, + "displayName": "Modal", + "iconSVG": "/static/media/icon.4975978e.svg", + "topRow": 36, + "bottomRow": 60, + "parentRowSpace": 10, + "type": "MODAL_WIDGET", + "hideCard": false, + "shouldScrollContents": true, + "animateLoading": true, + "parentColumnSpace": 22.375, + "leftColumn": 19, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 537, + "detachFromLayout": true, + "displayName": "Canvas", + "widgetId": "hmlytxiqib", + "topRow": 0, + "bottomRow": 400, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 1, + "hideCard": true, + "parentId": "gpqlcp5eb9", + "shouldScrollContents": false, + "minHeight": 240, + "renderMode": "CANVAS", + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Icon1", + "rightColumn": 64, + "onClick": "{{closeModal('Modal1')}}", + "color": "#040627", + "iconName": "cross", + "displayName": "Icon", + "iconSVG": "/static/media/icon.31d6cfe0.svg", + "widgetId": "zmepy7lc3r", + "topRow": 1, + "bottomRow": 5, + "isVisible": true, + "type": "ICON_WIDGET", + "version": 1, + "hideCard": true, + "parentId": "hmlytxiqib", + "renderMode": "CANVAS", + "isLoading": false, + "leftColumn": 56, + "iconSize": 24, + "key": "iuyrb7k3se" + }, + { + "widgetName": "Text1", + "displayName": "Text", + "iconSVG": "/static/media/icon.97c59b52.svg", + "topRow": 1, + "bottomRow": 5, + "type": "TEXT_WIDGET", + "hideCard": false, + "animateLoading": true, + "leftColumn": 1, + "shouldTruncate": false, + "truncateButtonColor": "#FFC13D", + "text": "Modal Title", + "key": "peb0i069ic", + "rightColumn": 41, + "textAlign": "LEFT", + "widgetId": "njfdmp6chc", + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "shouldScroll": false, + "version": 1, + "parentId": "hmlytxiqib", + "renderMode": "CANVAS", + "isLoading": false, + "fontSize": "HEADING1" + }, + { + "widgetName": "Button1", + "onClick": "{{closeModal('Modal1')}}", + "buttonColor": "#03B365", + "displayName": "Button", + "iconSVG": "/static/media/icon.cca02633.svg", + "topRow": 34, + "bottomRow": 38, + "type": "BUTTON_WIDGET", + "hideCard": false, + "animateLoading": true, + "leftColumn": 36, + "text": "Close", + "isDisabled": false, + "key": "8ieezy6pr0", + "rightColumn": 48, + "isDefaultClickDisabled": true, + "widgetId": "g4nkbpq5o2", + "buttonStyle": "PRIMARY", + "isVisible": true, + "recaptchaType": "V3", + "version": 1, + "parentId": "hmlytxiqib", + "renderMode": "CANVAS", + "isLoading": false, + "buttonVariant": "SECONDARY", + "placement": "CENTER" + }, + { + "widgetName": "Button2", + "buttonColor": "#03B365", + "displayName": "Button", + "iconSVG": "/static/media/icon.cca02633.svg", + "topRow": 16, + "bottomRow": 20, + "type": "BUTTON_WIDGET", + "hideCard": false, + "animateLoading": true, + "leftColumn": 48, + "text": "Confirm", + "isDisabled": false, + "key": "8ieezy6pr0", + "rightColumn": 60, + "isDefaultClickDisabled": true, + "widgetId": "9gac5c13qe", + "buttonStyle": "PRIMARY_BUTTON", + "isVisible": true, + "recaptchaType": "V3", + "version": 1, + "parentId": "hmlytxiqib", + "renderMode": "CANVAS", + "isLoading": false, + "buttonVariant": "PRIMARY", + "placement": "CENTER" + }, + { + "widgetName": "Table1", + "defaultPageSize": 0, + "columnOrder": [ + "step", + "task", + "status", + "action" + ], + "isVisibleDownload": true, + "displayName": "Table", + "iconSVG": "/static/media/icon.db8a9cbd.svg", + "topRow": 6, + "bottomRow": 34, + "isSortable": true, + "parentRowSpace": 10, + "type": "TABLE_WIDGET", + "defaultSelectedRow": "0", + "hideCard": false, + "animateLoading": true, + "parentColumnSpace": 6.9375, + "dynamicBindingPathList": [ + { + "key": "primaryColumns.step.computedValue" + }, + { + "key": "primaryColumns.task.computedValue" + }, + { + "key": "primaryColumns.status.computedValue" + }, + { + "key": "primaryColumns.action.computedValue" + } + ], + "leftColumn": 7, + "primaryColumns": { + "step": { + "index": 0, + "width": 150, + "id": "step", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "step", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.step))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + }, + "task": { + "index": 1, + "width": 150, + "id": "task", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "task", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.task))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + }, + "status": { + "index": 2, + "width": 150, + "id": "status", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "status", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.status))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + }, + "action": { + "index": 3, + "width": 150, + "id": "action", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "button", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDisabled": false, + "isDerived": false, + "label": "action", + "onClick": "{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}", + "computedValue": "{{Table1.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + } + }, + "delimiter": ",", + "key": "o1l7ntycyd", + "derivedColumns": {}, + "rightColumn": 41, + "textSize": "PARAGRAPH", + "widgetId": "amcaiq96zp", + "isVisibleFilters": true, + "tableData": [ + { + "step": "#1", + "task": "Drop a table", + "status": "✅", + "action": "" + }, + { + "step": "#2", + "task": "Create a query fetch_users with the Mock DB", + "status": "--", + "action": "" + }, + { + "step": "#3", + "task": "Bind the query using => fetch_users.data", + "status": "--", + "action": "" + } + ], + "isVisible": true, + "label": "Data", + "searchKey": "", + "enableClientSideSearch": true, + "version": 3, + "totalRecordsCount": 0, + "parentId": "hmlytxiqib", + "renderMode": "CANVAS", + "isLoading": false, + "horizontalAlignment": "LEFT", + "isVisibleSearch": true, + "isVisiblePagination": true, + "verticalAlignment": "CENTER", + "columnSizeMap": { + "task": 245, + "step": 62, + "status": 75 + } + } + ], + "isDisabled": false, + "key": "7q00195olh" + } + ], + "key": "y4h3pi0oe2", + "height": 240, + "rightColumn": 43, + "detachFromLayout": true, + "widgetId": "gpqlcp5eb9", + "canOutsideClickClose": true, + "canEscapeKeyClose": true, + "version": 2, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "width": 456 + }, + { + "widgetName": "Button3", + "onClick": "{{showModal('Modal1')}}", + "buttonColor": "#03B365", + "displayName": "Button", + "iconSVG": "/static/media/icon.cca02633.svg", + "topRow": 75, + "bottomRow": 79, + "parentRowSpace": 10, + "type": "BUTTON_WIDGET", + "hideCard": false, + "animateLoading": true, + "parentColumnSpace": 22.375, + "dynamicTriggerPathList": [ + { + "key": "onClick" + } + ], + "leftColumn": 16, + "dynamicBindingPathList": [], + "text": "Submit", + "isDisabled": false, + "key": "8ieezy6pr0", + "rightColumn": 32, + "isDefaultClickDisabled": true, + "widgetId": "69ygydup95", + "isVisible": true, + "recaptchaType": "V3", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "buttonVariant": "PRIMARY", + "placement": "CENTER" + }, + { + "boxShadow": "NONE", + "widgetName": "Container1", + "borderColor": "transparent", + "isCanvas": true, + "displayName": "Container", + "iconSVG": "/static/media/icon.1977dca3.svg", + "topRow": 14, + "bottomRow": 54, + "parentRowSpace": 10, + "type": "CONTAINER_WIDGET", + "hideCard": false, + "shouldScrollContents": true, + "animateLoading": true, + "parentColumnSpace": 17.5625, + "dynamicTriggerPathList": [], + "leftColumn": 38, + "dynamicBindingPathList": [], + "children": [ + { + "widgetName": "Canvas2", + "rightColumn": 421.5, + "detachFromLayout": true, + "displayName": "Canvas", + "widgetId": "l277ovqxgj", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 700, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "version": 1, + "hideCard": true, + "parentId": "98bc1f30j7", + "minHeight": 400, + "renderMode": "CANVAS", + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Table2", + "defaultPageSize": 0, + "columnOrder": [ + "step", + "task", + "status", + "action" + ], + "isVisibleDownload": true, + "displayName": "Table", + "iconSVG": "/static/media/icon.db8a9cbd.svg", + "topRow": 4, + "bottomRow": 68, + "isSortable": true, + "parentRowSpace": 10, + "type": "TABLE_WIDGET", + "defaultSelectedRow": "0", + "hideCard": false, + "animateLoading": true, + "parentColumnSpace": 17.5625, + "dynamicBindingPathList": [ + { + "key": "primaryColumns.step.computedValue" + }, + { + "key": "primaryColumns.task.computedValue" + }, + { + "key": "primaryColumns.status.computedValue" + }, + { + "key": "primaryColumns.action.computedValue" + } + ], + "leftColumn": 11, + "primaryColumns": { + "step": { + "index": 0, + "width": 150, + "id": "step", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "step", + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.step))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + }, + "task": { + "index": 1, + "width": 150, + "id": "task", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "task", + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.task))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + }, + "status": { + "index": 2, + "width": 150, + "id": "status", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "text", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDerived": false, + "label": "status", + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.status))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + }, + "action": { + "index": 3, + "width": 150, + "id": "action", + "horizontalAlignment": "LEFT", + "verticalAlignment": "CENTER", + "columnType": "button", + "textSize": "PARAGRAPH", + "enableFilter": true, + "enableSort": true, + "isVisible": true, + "isCellVisible": true, + "isDisabled": false, + "isDerived": false, + "label": "action", + "onClick": "{{currentRow.step === '#1' ? showAlert('Done', 'success') : currentRow.step === '#2' ? navigateTo('https://docs.appsmith.com/core-concepts/connecting-to-data-sources/querying-a-database',undefined,'NEW_WINDOW') : navigateTo('https://docs.appsmith.com/core-concepts/displaying-data-read/display-data-tables',undefined,'NEW_WINDOW')}}", + "computedValue": "{{Table2.sanitizedTableData.map((currentRow) => ( currentRow.action))}}", + "buttonColor": "#03B365", + "menuColor": "#03B365", + "labelColor": "#FFFFFF" + } + }, + "delimiter": ",", + "key": "co25fvur9p", + "derivedColumns": {}, + "rightColumn": 45, + "textSize": "PARAGRAPH", + "widgetId": "mk1uhpxi36", + "isVisibleFilters": true, + "tableData": [ + { + "step": "#1", + "task": "Drop a table", + "status": "✅", + "action": "" + }, + { + "step": "#2", + "task": "Create a query fetch_users with the Mock DB", + "status": "--", + "action": "" + }, + { + "step": "#3", + "task": "Bind the query using => fetch_users.data", + "status": "--", + "action": "" + } + ], + "isVisible": true, + "label": "Data", + "searchKey": "", + "enableClientSideSearch": true, + "version": 3, + "totalRecordsCount": 0, + "parentId": "l277ovqxgj", + "renderMode": "CANVAS", + "isLoading": false, + "horizontalAlignment": "LEFT", + "isVisibleSearch": true, + "isVisiblePagination": true, + "verticalAlignment": "CENTER", + "columnSizeMap": { + "task": 245, + "step": 62, + "status": 75 + } + } + ], + "key": "3avcmqtfo4" + } + ], + "borderWidth": "0", + "key": "8xetlh4788", + "backgroundColor": "#FFFFFF", + "rightColumn": 62, + "widgetId": "98bc1f30j7", + "containerStyle": "card", + "isVisible": true, + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "0" + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canva_scrolling_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canva_scrolling_spec.js new file mode 100644 index 0000000000..f53798b6b0 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Canva_scrolling_spec.js @@ -0,0 +1,15 @@ +const dsl = require("../../../../fixtures/modalScroll.json"); + +describe("Modal Widget Functionality", function() { + before(() => { + cy.addDsl(dsl); + cy.wait(7000); + }); + + it("Open Modal from button and test scroll", () => { + cy.PublishtheApp(); + cy.get(".t--widget-buttonwidget button").click({ force: true }); + cy.get(".t--modal-widget").should("exist"); + cy.get(".t--modal-widget").scrollTo("bottom"); + }); +}); diff --git a/app/client/src/widgets/CanvasWidget.tsx b/app/client/src/widgets/CanvasWidget.tsx index 767bb7c445..6a2b7e905f 100644 --- a/app/client/src/widgets/CanvasWidget.tsx +++ b/app/client/src/widgets/CanvasWidget.tsx @@ -3,7 +3,9 @@ import { WidgetProps } from "widgets/BaseWidget"; import ContainerWidget, { ContainerWidgetProps, } from "widgets/ContainerWidget/widget"; +import { GridDefaults } from "constants/WidgetConstants"; import DropTargetComponent from "components/editorComponents/DropTargetComponent"; +import { getCanvasSnapRows } from "utils/WidgetPropsUtils"; import { getCanvasClassName } from "utils/generators"; import WidgetFactory, { DerivedPropertiesMap } from "utils/WidgetFactory"; @@ -57,9 +59,16 @@ class CanvasWidget extends ContainerWidget { } getPageView() { + let height = 0; + const snapRows = getCanvasSnapRows( + this.props.bottomRow, + this.props.canExtend, + ); + height = snapRows * GridDefaults.DEFAULT_GRID_ROW_HEIGHT; + const style: CSSProperties = { width: "100%", - height: "100%", + height: `${height}px`, background: "none", position: "relative", };