diff --git a/app/client/cypress/fixtures/Mapdsl.json b/app/client/cypress/fixtures/Mapdsl.json index 93d3df14b1..482d036670 100644 --- a/app/client/cypress/fixtures/Mapdsl.json +++ b/app/client/cypress/fixtures/Mapdsl.json @@ -1,6 +1,5 @@ - { -"dsl": { + "dsl": { "widgetName": "MainContainer", "backgroundColor": "none", "rightColumn": 1224, @@ -20,203 +19,203 @@ "parentColumnSpace": 1, "leftColumn": 0, "children": [ - { - "backgroundColor": "#FFFFFF", - "widgetName": "Container1", - "type": "CONTAINER_WIDGET", - "containerStyle": "card", + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 8, + "topRow": 0, + "bottomRow": 9, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "a78zsh8adr", + "type": "CANVAS_WIDGET", + "containerStyle": "none", "isVisible": true, "isLoading": false, - "parentColumnSpace": 75.25, - "parentRowSpace": 38, - "dynamicBindings": {}, + "parentColumnSpace": 1, + "parentRowSpace": 1, "leftColumn": 0, - "rightColumn": 8, + "rightColumn": 602, "topRow": 0, - "bottomRow": 9, + "bottomRow": 342, "snapColumns": 16, "orientation": "VERTICAL", "children": [ - { - "backgroundColor": "transparent", - "widgetName": "a78zsh8adr", - "type": "CANVAS_WIDGET", - "containerStyle": "none", - "isVisible": true, - "isLoading": false, - "parentColumnSpace": 1, - "parentRowSpace": 1, - "leftColumn": 0, - "rightColumn": 602, - "topRow": 0, - "bottomRow": 342, - "snapColumns": 16, - "orientation": "VERTICAL", - "children": [ - { - "text": "Title", - "textStyle": "HEADING", - "widgetName": "Text1", - "type": "TEXT_WIDGET", - "isVisible": true, - "isLoading": false, - "parentColumnSpace": 35.25, - "parentRowSpace": 38, - "dynamicBindings": {}, - "leftColumn": 0, - "rightColumn": 3, - "topRow": 0, - "bottomRow": 1, - "widgetId": "5mijsozz1o" - } - ], - "widgetId": "hvosuw4z59", - "detachFromLayout": true, - "canExtend": false - } + { + "text": "Title", + "textStyle": "HEADING", + "widgetName": "Text1", + "type": "TEXT_WIDGET", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 35.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 3, + "topRow": 0, + "bottomRow": 1, + "widgetId": "5mijsozz1o" + } ], - "widgetId": "go64l3m18d" - }, - { - "backgroundColor": "#FFFFFF", - "widgetName": "Container3", - "type": "CONTAINER_WIDGET", - "containerStyle": "card", + "widgetId": "hvosuw4z59", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "go64l3m18d" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 9, + "bottomRow": 23, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "ycnnb3haff", + "type": "CANVAS_WIDGET", + "containerStyle": "none", "isVisible": true, "isLoading": false, - "parentColumnSpace": 75.25, - "parentRowSpace": 38, - "dynamicBindings": {}, + "parentColumnSpace": 1, + "parentRowSpace": 1, "leftColumn": 0, - "rightColumn": 16, - "topRow": 9, - "bottomRow": 23, + "rightColumn": 1204, + "topRow": 0, + "bottomRow": 532, "snapColumns": 16, "orientation": "VERTICAL", "children": [ - { - "backgroundColor": "transparent", - "widgetName": "ycnnb3haff", - "type": "CANVAS_WIDGET", - "containerStyle": "none", - "isVisible": true, - "isLoading": false, - "parentColumnSpace": 1, - "parentRowSpace": 1, - "leftColumn": 0, - "rightColumn": 1204, - "topRow": 0, - "bottomRow": 532, - "snapColumns": 16, - "orientation": "VERTICAL", - "children": [ - { - "text": "Title", - "textStyle": "HEADING", - "widgetName": "Text3", - "type": "TEXT_WIDGET", - "isVisible": true, - "isLoading": false, - "parentColumnSpace": 72.875, - "parentRowSpace": 38, - "dynamicBindings": {}, - "leftColumn": 0, - "rightColumn": 3, - "topRow": 0, - "bottomRow": 1, - "widgetId": "ig6nii17j0" - }, - { - "isVisible": true, - "isDisabled": false, - "widgetName": "Map1", - "enableSearch": true, - "zoomLevel": 50, - "enablePickLocation": true, - "allowZoom": true, - "mapCenter": { - "lat": 20.593684, - "long": 78.96288 - }, - "defaultMarkers": "[\n {\n \"lat\": -34.397,\n \"long\": 150.644,\n \"title\": \"Test A\"\n }\n]", - "type": "MAP_WIDGET", - "isLoading": false, - "parentColumnSpace": 71.75, - "parentRowSpace": 38, - "leftColumn": 3, - "rightColumn": 11, - "topRow": 0, - "bottomRow": 12, - "parentId": "yt4ouwn0sk", - "widgetId": "673etzjyv9", - "dynamicBindings": {} - } - ], - "widgetId": "yt4ouwn0sk", - "detachFromLayout": true, - "canExtend": false - } + { + "text": "Title", + "textStyle": "HEADING", + "widgetName": "Text3", + "type": "TEXT_WIDGET", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 72.875, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 3, + "topRow": 0, + "bottomRow": 1, + "widgetId": "ig6nii17j0" + }, + { + "isVisible": true, + "isDisabled": false, + "widgetName": "Map1", + "enableSearch": true, + "zoomLevel": 50, + "enablePickLocation": true, + "allowZoom": true, + "mapCenter": { + "lat": 20.593684, + "long": 78.96288 + }, + "defaultMarkers": "[\n {\n \"lat\": -34.397,\n \"long\": 150.644,\n \"title\": \"Test A\"\n }\n]", + "type": "MAP_WIDGET", + "isLoading": false, + "parentColumnSpace": 71.75, + "parentRowSpace": 38, + "leftColumn": 3, + "rightColumn": 11, + "topRow": 0, + "bottomRow": 12, + "parentId": "yt4ouwn0sk", + "widgetId": "673etzjyv9", + "dynamicBindings": {} + } ], - "widgetId": "s2x1p6okr1" - }, - { - "backgroundColor": "#FFFFFF", - "widgetName": "Container4", - "type": "CONTAINER_WIDGET", - "containerStyle": "card", + "widgetId": "yt4ouwn0sk", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "s2x1p6okr1" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container4", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 8, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 9, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "796xzyf2fj", + "type": "CANVAS_WIDGET", + "containerStyle": "none", "isVisible": true, "isLoading": false, - "parentColumnSpace": 75.25, - "parentRowSpace": 38, - "dynamicBindings": {}, - "leftColumn": 8, - "rightColumn": 16, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, "topRow": 0, - "bottomRow": 9, + "bottomRow": 342, "snapColumns": 16, "orientation": "VERTICAL", "children": [ - { - "backgroundColor": "transparent", - "widgetName": "796xzyf2fj", - "type": "CANVAS_WIDGET", - "containerStyle": "none", - "isVisible": true, - "isLoading": false, - "parentColumnSpace": 1, - "parentRowSpace": 1, - "leftColumn": 0, - "rightColumn": 602, - "topRow": 0, - "bottomRow": 342, - "snapColumns": 16, - "orientation": "VERTICAL", - "children": [ - { - "text": "Title", - "textStyle": "HEADING", - "widgetName": "Text2", - "type": "TEXT_WIDGET", - "isVisible": true, - "isLoading": false, - "parentColumnSpace": 35.25, - "parentRowSpace": 38, - "dynamicBindings": {}, - "leftColumn": 0, - "rightColumn": 3, - "topRow": 0, - "bottomRow": 1, - "widgetId": "8oo6fcjhy4" - } - ], - "widgetId": "tf53p2yg6n", - "detachFromLayout": true, - "canExtend": false - } + { + "text": "Title", + "textStyle": "HEADING", + "widgetName": "Text2", + "type": "TEXT_WIDGET", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 35.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 3, + "topRow": 0, + "bottomRow": 1, + "widgetId": "8oo6fcjhy4" + } ], - "widgetId": "2q5e9wr5vi" - } + "widgetId": "tf53p2yg6n", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "2q5e9wr5vi" + } ] -}, -"layoutOnLoadActions": [] + }, + "layoutOnLoadActions": [] } \ No newline at end of file diff --git a/app/client/cypress/fixtures/TextTabledsl.json b/app/client/cypress/fixtures/TextTabledsl.json new file mode 100644 index 0000000000..fc74351bf7 --- /dev/null +++ b/app/client/cypress/fixtures/TextTabledsl.json @@ -0,0 +1,183 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1292, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 4, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 8, + "topRow": 0, + "bottomRow": 9, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "2maowfwe99", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, + "topRow": 0, + "bottomRow": 342, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "isVisible": true, + "text": "Label", + "textStyle": "LABEL", + "textAlign": "LEFT", + "widgetName": "Text4", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 4, + "rightColumn": 9, + "topRow": 3, + "bottomRow": 4, + "parentId": "rlnoulfiiz", + "widgetId": "ljzwxmav4b" + } + ], + "widgetId": "rlnoulfiiz", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "6ro2rmfbpz" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 9, + "bottomRow": 23, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "8muuok24ny", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 1204, + "topRow": 0, + "bottomRow": 532, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "isVisible": true, + "label": "Data", + "widgetName": "Table1", + "tableData": "[\n {\n \"id\": 2381224,\n \"email\": \"michael.lawson@reqres.in\",\n \"userName\": \"Michael Lawson\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 2736212,\n \"email\": \"lindsay.ferguson@reqres.in\",\n \"userName\": \"Lindsay Ferguson\",\n \"productName\": \"Tuna Salad\",\n \"orderAmount\": 9.99\n },\n {\n \"id\": 6788734,\n \"email\": \"tobias.funke@reqres.in\",\n \"userName\": \"Tobias Funke\",\n \"productName\": \"Beef steak\",\n \"orderAmount\": 19.99\n },\n {\n \"id\": 7434532,\n \"email\": \"byron.fields@reqres.in\",\n \"userName\": \"Byron Fields\",\n \"productName\": \"Chicken Sandwich\",\n \"orderAmount\": 4.99\n },\n {\n \"id\": 7434532,\n \"email\": \"ryan.holmes@reqres.in\",\n \"userName\": \"Ryan Holmes\",\n \"productName\": \"Avocado Panini\",\n \"orderAmount\": 7.99\n }\n]", + "type": "TABLE_WIDGET", + "isLoading": false, + "parentColumnSpace": 71.75, + "parentRowSpace": 38, + "leftColumn": 1, + "rightColumn": 10, + "topRow": 1, + "bottomRow": 8, + "parentId": "tyiwk4xuq0", + "widgetId": "c5h0m17qxj", + "dynamicBindings": { + "selectedRow": true + } + } + ], + "widgetId": "tyiwk4xuq0", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "3oe1ka7jon" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container4", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 8, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 9, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "rcpfairf1h", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, + "topRow": 0, + "bottomRow": 342, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [], + "widgetId": "q0atwguzda", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "l5lvm9yd4e" + } + ] + }, + "layoutOnLoadActions": [] +} \ No newline at end of file diff --git a/app/client/cypress/fixtures/commondsl.json b/app/client/cypress/fixtures/commondsl.json index 7a1cae3cf3..961aec8c89 100644 --- a/app/client/cypress/fixtures/commondsl.json +++ b/app/client/cypress/fixtures/commondsl.json @@ -1,514 +1,514 @@ { - "dsl": { -    "widgetName": "MainContainer", -    "backgroundColor": "none", -    "rightColumn": 1224, -    "snapColumns": 16, -    "detachFromLayout": true, -    "widgetId": "0", -    "topRow": 0, -    "bottomRow": 1292, -    "containerStyle": "none", -    "snapRows": 33, -    "parentRowSpace": 1, -    "type": "CANVAS_WIDGET", -    "canExtend": true, -    "dynamicBindings": {}, -    "version": 3, -    "minHeight": 1292, -    "parentColumnSpace": 1, -    "leftColumn": 0, -    "children": [ -        { -            "backgroundColor": "#C0C0C0", -            "widgetName": "Aditya", -            "rightColumn": 8, -            "orientation": "VERTICAL", -            "snapColumns": 16, -            "widgetId": "gmm48aishv", -            "containerStyle": "card", -            "topRow": 0, -            "bottomRow": 9, -            "parentRowSpace": 38, -            "isVisible": true, -            "type": "CONTAINER_WIDGET", -            "dynamicBindings": {}, -            "isLoading": false, -            "shouldScrollContents": true, -            "parentColumnSpace": 75.25, -            "leftColumn": 0, -            "children": [ -                { -                    "backgroundColor": "#FFFFFF", -                    "widgetName": "jmwwbtgjry", -                    "rightColumn": 602, -                    "orientation": "VERTICAL", -                    "snapColumns": 16, -                    "detachFromLayout": true, -                    "widgetId": "hjiybwqair", -                    "containerStyle": "none", -                    "topRow": 0, -                    "bottomRow": 342, -                    "parentRowSpace": 1, -                    "isVisible": true, -                    "type": "CANVAS_WIDGET", -                    "canExtend": false, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "leftColumn": 0, -                    "children": [ -                        { -                            "onTextChanged": "{{showAlert('Ahello')}}", -                            "widgetName": "input", -                            "rightColumn": 11, -                            "widgetId": "oudih5fvwa", -                            "topRow": 6, -                            "bottomRow": 7, -                            "isValid": "{{input.isRequired ? input.text && descriptionInput.text.length > 0 ? input.regex ? new RegExp(input.regex).test(input.text) : true : input.regex ? new RegExp(input.regex).test(input.text) : true}}", -                            "parentRowSpace": 38, -                            "isVisible": true, -                            "label": "Test Input Label", -                            "type": "INPUT_WIDGET", -                            "dynamicBindings": { -                                "isValid": true -                            }, -                            "parentId": "iw4o07jvik", -                            "isLoading": false, -                            "parentColumnSpace": 34.6875, -                            "leftColumn": 6, -                            "dynamicTriggers": { -                                "onTextChanged": true -                            }, -                            "inputType": "NUMBER", -                            "placeholderText": "aditya", -                            "defaultText": "" -                        }, -                        { -                            "widgetName": "TestTextBox", -                            "rightColumn": 5, -                            "widgetId": "4d8d2eh4xg", -                            "dynamicProperties": {}, -                            "topRow": 2, -                            "bottomRow": 3, -                            "parentRowSpace": 38, -                            "isVisible": true, -                            "type": "TEXT_WIDGET", -                            "dynamicBindings": {}, -                            "shouldScroll": true, -                            "parentId": "hjiybwqair", -                            "isLoading": false, -                            "parentColumnSpace": 34.6875, -                            "leftColumn": 1, -                            "text": "Test text", -                            "textStyle": "HEADING" -                        }, -                        { -                            "widgetName": "Submitbutton", -                            "rightColumn": 12, -                            "onClick": "{{showModal()}}", -                            "isDefaultClickDisabled": true, -                            "widgetId": "3p92qmlzfl", -                            "buttonStyle": "PRIMARY_BUTTON", -                            "topRow": 1, -                            "bottomRow": 2, -                            "parentRowSpace": 38, -                            "isVisible": true, -                            "type": "BUTTON_WIDGET", -                            "dynamicBindings": {}, -                            "parentId": "hjiybwqair", -                            "isLoading": false, -                            "parentColumnSpace": 34.6875, -                            "leftColumn": 10, -                            "dynamicTriggers": { -                                "onClick": true -                            }, -                            "text": "Test Button Text", -                            "isDisabled": false -                        } -                    ] -                } -            ], -            "text": "n TexttuTest Button Text" -        }, -        { -            "backgroundColor": "#FFFFFF", -            "widgetName": "Container3", -            "rightColumn": 16, -            "orientation": "VERTICAL", -            "snapColumns": 16, -            "widgetId": "28hfrtdb1a", -            "containerStyle": "card", -            "topRow": 9, -            "bottomRow": 23, -            "parentRowSpace": 38, -            "isVisible": true, -            "type": "CONTAINER_WIDGET", -            "dynamicBindings": {}, -            "isLoading": false, -            "parentColumnSpace": 75.25, -            "leftColumn": 0, -            "children": [ -                { -                    "backgroundColor": "#FFFFFF", -                    "widgetName": "lvl7ajf1rn", -                    "rightColumn": 1204, -                    "orientation": "VERTICAL", -                    "snapColumns": 16, -                    "detachFromLayout": true, -                    "widgetId": "ac4kpozgg3", -                    "containerStyle": "none", -                    "topRow": 0, -                    "bottomRow": 532, -                    "parentRowSpace": 1, -                    "isVisible": true, -                    "type": "CANVAS_WIDGET", -                    "canExtend": false, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "leftColumn": 0, -                    "children": [ -                        { -                            "widgetName": "Table1", -                            "rightColumn": 11, -                            "widgetId": "yum9t90tb2", -                            "topRow": 1, -                            "bottomRow": 8, -                            "parentRowSpace": 38, -                            "tableData": "{{UsersApi.data}}", -                            "isVisible": true, -                            "label": "Data", -                            "type": "TABLE_WIDGET", -                            "dynamicBindings": { -                                "tableData": true, -                                "selectedRow": true -                            }, -                            "isLoading": false, -                            "parentColumnSpace": 71.75, -                            "leftColumn": 1, -                            "dynamicTriggers": { -                                "onRowSelected": true -                            }, -                            "onRowSelected": "{{navigateTo()}}", -                            "selectedRow": "{{Table1.tableData[Table1.selectedRowIndex]}}" -                        } -                    ] -                } -            ] -        }, -        { -            "backgroundColor": "#FFFFFF", -            "widgetName": "Container4", -            "rightColumn": 16, -            "orientation": "VERTICAL", -            "snapColumns": 16, -            "widgetId": "ii6dnhfrba", -            "containerStyle": "card", -            "topRow": 0, -            "bottomRow": 9, -            "parentRowSpace": 38, -            "isVisible": true, -            "type": "CONTAINER_WIDGET", -            "dynamicBindings": {}, -            "isLoading": false, -            "parentColumnSpace": 75.25, -            "leftColumn": 8, -            "children": [ -                { -                    "backgroundColor": "#FFFFFF", -                    "widgetName": "rnz3m8xrzc", -                    "rightColumn": 602, -                    "orientation": "VERTICAL", -                    "snapColumns": 16, -                    "detachFromLayout": true, -                    "widgetId": "iw4o07jvik", -                    "containerStyle": "none", -                    "topRow": 0, -                    "bottomRow": 342, -                    "parentRowSpace": 1, -                    "isVisible": true, -                    "type": "CANVAS_WIDGET", -                    "canExtend": false, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "leftColumn": 0, -                    "children": [] -                } -            ] -        }, -        { -            "widgetName": "TestModal", -            "rightColumn": 0, -            "detachFromLayout": true, -            "widgetId": "s8mtp5krfz", -            "topRow": 0, -            "bottomRow": 0, -            "parentRowSpace": 1, -            "isVisible": false, -            "canOutsideClickClose": true, -            "type": "MODAL_WIDGET", -            "canEscapeKeyClose": true, -            "dynamicBindings": {}, -            "parentId": "0", -            "shouldScrollContents": true, -            "blueprint": { -                "view": [ -                    { -                        "position": { -                            "top": 0, -                            "left": 0 -                        }, -                        "type": "CANVAS_WIDGET", -                        "props": { -                            "shouldScrollContents": false, -                            "blueprint": { -                                "view": [ -                                    { -                                        "size": { -                                            "rows": 1, -                                            "cols": 1 -                                        }, -                                        "position": { -                                            "top": 0, -                                            "left": 15 -                                        }, -                                        "type": "ICON_WIDGET", -                                        "props": { -                                            "color": "#040627", -                                            "iconName": "cross", -                                            "iconSize": 24 -                                        } -                                    }, -                                    { -                                        "size": { -                                            "rows": 1, -                                            "cols": 15 -                                        }, -                                        "position": { -                                            "top": 0, -                                            "left": 0 -                                        }, -                                        "type": "TEXT_WIDGET", -                                        "props": { -                                            "text": "Modal Title", -                                            "textStyle": "HEADING" -                                        } -                                    }, -                                    { -                                        "size": { -                                            "rows": 1, -                                            "cols": 3 -                                        }, -                                        "position": { -                                            "top": 4, -                                            "left": 10 -                                        }, -                                        "type": "BUTTON_WIDGET", -                                        "props": { -                                            "buttonStyle": "SECONDARY_BUTTON", -                                            "text": "Cancel" -                                        } -                                    }, -                                    { -                                        "size": { -                                            "rows": 1, -                                            "cols": 3 -                                        }, -                                        "position": { -                                            "top": 4, -                                            "left": 13 -                                        }, -                                        "type": "BUTTON_WIDGET", -                                        "props": { -                                            "buttonStyle": "PRIMARY_BUTTON", -                                            "text": "Confirm" -                                        } -                                    } -                                ], -                                "operations": [ -                                    { -                                        "type": "MODIFY_PROPS" -                                    } -                                ] -                            }, -                            "detachFromLayout": true, -                            "children": [], -                            "isVisible": true, -                            "isDisabled": false, -                            "canExtend": true -                        } -                    } -                ] -            }, -            "isLoading": false, -            "parentColumnSpace": 1, -            "size": "MODAL_SMALL", -            "leftColumn": 0, -            "children": [ -                { -                    "widgetName": "Canvas1", -                    "rightColumn": 0, -                    "detachFromLayout": true, -                    "widgetId": "dma7flgdrm", -                    "topRow": 0, -                    "bottomRow": 0, -                    "parentRowSpace": 1, -                    "isVisible": true, -                    "canExtend": true, -                    "type": "CANVAS_WIDGET", -                    "parentId": "s8mtp5krfz", -                    "shouldScrollContents": false, -                    "blueprint": { -                        "view": [ -                            { -                                "size": { -                                    "rows": 1, -                                    "cols": 1 -                                }, -                                "position": { -                                    "top": 0, -                                    "left": 15 -                                }, -                                "type": "ICON_WIDGET", -                                "props": { -                                    "color": "#040627", -                                    "iconName": "cross", -                                    "iconSize": 24 -                                } -                            }, -                            { -                                "size": { -                                    "rows": 1, -                                    "cols": 15 -                                }, -                                "position": { -                                    "top": 0, -                                    "left": 0 -                                }, -                                "type": "TEXT_WIDGET", -                                "props": { -                                    "text": "Modal Title", -                                    "textStyle": "HEADING" -                                } -                            }, -                            { -                                "size": { -                                    "rows": 1, -                                    "cols": 3 -                                }, -                                "position": { -                                    "top": 4, -                                    "left": 10 -                                }, -                                "type": "BUTTON_WIDGET", -                                "props": { -                                    "buttonStyle": "SECONDARY_BUTTON", -                                    "text": "Cancel" -                                } -                            }, -                            { -                                "size": { -                                    "rows": 1, -                                    "cols": 3 -                                }, -                                "position": { -                                    "top": 4, -                                    "left": 13 -                                }, -                                "type": "BUTTON_WIDGET", -                                "props": { -                                    "buttonStyle": "PRIMARY_BUTTON", -                                    "text": "Confirm" -                                } -                            } -                        ], -                        "operations": [ -                            { -                                "type": "MODIFY_PROPS" -                            } -                        ] -                    }, -                    "minHeight": 0, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "leftColumn": 0, -                    "children": [ -                        { -                            "widgetName": "Icon1", -                            "rightColumn": 16, -                            "onClick": "{{closeModal('TestModal')}}", -                            "color": "#040627", -                            "iconName": "cross", -                            "widgetId": "n5fc0ven2a", -                            "topRow": 0, -                            "bottomRow": 1, -                            "isVisible": true, -                            "type": "ICON_WIDGET", -                            "parentId": "dma7flgdrm", -                            "isLoading": false, -                            "leftColumn": 15, -                            "iconSize": 24 -                        }, -                        { -                            "isLoading": false, -                            "widgetName": "Text1", -                            "rightColumn": 15, -                            "leftColumn": 0, -                            "widgetId": "s818l5hhvq", -                            "topRow": 0, -                            "bottomRow": 1, -                            "isVisible": true, -                            "text": "Modal Title", -                            "textStyle": "HEADING", -                            "type": "TEXT_WIDGET", -                            "parentId": "dma7flgdrm" -                        }, -                        { -                            "widgetName": "Button1", -                            "rightColumn": 13, -                            "isDefaultClickDisabled": true, -                            "widgetId": "io777lh7bc", -                            "buttonStyle": "SECONDARY_BUTTON", -                            "topRow": 4, -                            "bottomRow": 5, -                            "isVisible": true, -                            "type": "BUTTON_WIDGET", -                            "parentId": "dma7flgdrm", -                            "isLoading": false, -                            "leftColumn": 10, -                            "text": "Cancel", -                            "isDisabled": false -                        }, -                        { -                            "widgetName": "Button2", -                            "rightColumn": 16, -                            "isDefaultClickDisabled": true, -                            "widgetId": "gexp49bfyb", -                            "buttonStyle": "PRIMARY_BUTTON", -                            "topRow": 4, -                            "bottomRow": 5, -                            "isVisible": true, -                            "type": "BUTTON_WIDGET", -                            "parentId": "dma7flgdrm", -                            "isLoading": false, -                            "leftColumn": 13, -                            "text": "Confirm", -                            "isDisabled": false -                        } -                    ], -                    "isDisabled": false -                } -            ] -        } -    ] - }, - "layoutOnLoadActions": [ -    [ -        { -            "id": "5e906ba76e910873a331b648", -            "name": "UsersApi", -            "pluginType": "API", -            "jsonPathKeys": [] -        } -    ] + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1292, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 3, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#C0C0C0", + "widgetName": "Aditya", + "rightColumn": 8, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "gmm48aishv", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 9, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "shouldScrollContents": true, + "parentColumnSpace": 75.25, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "jmwwbtgjry", + "rightColumn": 602, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "hjiybwqair", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 342, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "onTextChanged": "", + "widgetName": "input", + "rightColumn": 11, + "widgetId": "oudih5fvwa", + "topRow": 6, + "bottomRow": 7, + "isValid": "{{input.isRequired ? input.text && descriptionInput.text.length > 0 ? input.regex ? new RegExp(input.regex).test(input.text) : true : input.regex ? new RegExp(input.regex).test(input.text) : true}}", + "parentRowSpace": 38, + "isVisible": true, + "label": "Test Input Label", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true + }, + "parentId": "iw4o07jvik", + "isLoading": false, + "parentColumnSpace": 34.6875, + "leftColumn": 6, + "dynamicTriggers": { + "onTextChanged": true + }, + "inputType": "", + "placeholderText": "", + "defaultText": "" + }, + { + "widgetName": "TestTextBox", + "rightColumn": 5, + "widgetId": "4d8d2eh4xg", + "dynamicProperties": {}, + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 38, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": {}, + "shouldScroll": true, + "parentId": "hjiybwqair", + "isLoading": false, + "parentColumnSpace": 34.6875, + "leftColumn": 1, + "text": "Test text", + "textStyle": "HEADING" + }, + { + "widgetName": "Submitbutton", + "rightColumn": 12, + "onClick": "{{showModal()}}", + "isDefaultClickDisabled": true, + "widgetId": "3p92qmlzfl", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 38, + "isVisible": true, + "type": "BUTTON_WIDGET", + "dynamicBindings": {}, + "parentId": "hjiybwqair", + "isLoading": false, + "parentColumnSpace": 34.6875, + "leftColumn": 10, + "dynamicTriggers": { + "onClick": true + }, + "text": "Test Button Text", + "isDisabled": false + } + ] + } + ], + "text": "n TexttuTest Button Text" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "rightColumn": 16, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "28hfrtdb1a", + "containerStyle": "card", + "topRow": 9, + "bottomRow": 23, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "lvl7ajf1rn", + "rightColumn": 1204, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "ac4kpozgg3", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 532, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Table1", + "rightColumn": 11, + "widgetId": "yum9t90tb2", + "topRow": 1, + "bottomRow": 8, + "parentRowSpace": 38, + "tableData": "{{UsersApi.data}}", + "isVisible": true, + "label": "Data", + "type": "TABLE_WIDGET", + "dynamicBindings": { + "tableData": true, + "selectedRow": true + }, + "isLoading": false, + "parentColumnSpace": 71.75, + "leftColumn": 1, + "dynamicTriggers": { + "onRowSelected": true + }, + "onRowSelected": "{{navigateTo()}}", + "selectedRow": "{{Table1.tableData[Table1.selectedRowIndex]}}" + } + ] + } + ] + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container4", + "rightColumn": 16, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "ii6dnhfrba", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 9, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 8, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "rnz3m8xrzc", + "rightColumn": 602, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "iw4o07jvik", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 342, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + } + ] + }, + { + "widgetName": "TestModal", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "s8mtp5krfz", + "topRow": 0, + "bottomRow": 0, + "parentRowSpace": 1, + "isVisible": false, + "canOutsideClickClose": true, + "type": "MODAL_WIDGET", + "canEscapeKeyClose": true, + "dynamicBindings": {}, + "parentId": "0", + "shouldScrollContents": true, + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 1 + }, + "position": { + "top": 0, + "left": 15 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 15 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "detachFromLayout": true, + "children": [], + "isVisible": true, + "isDisabled": false, + "canExtend": true + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 1, + "size": "MODAL_SMALL", + "leftColumn": 0, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 0, + "detachFromLayout": true, + "widgetId": "dma7flgdrm", + "topRow": 0, + "bottomRow": 0, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": true, + "type": "CANVAS_WIDGET", + "parentId": "s8mtp5krfz", + "shouldScrollContents": false, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 1 + }, + "position": { + "top": 0, + "left": 15 + }, + "type": "ICON_WIDGET", + "props": { + "color": "#040627", + "iconName": "cross", + "iconSize": 24 + } + }, + { + "size": { + "rows": 1, + "cols": 15 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 10 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "SECONDARY_BUTTON", + "text": "Cancel" + } + }, + { + "size": { + "rows": 1, + "cols": 3 + }, + "position": { + "top": 4, + "left": 13 + }, + "type": "BUTTON_WIDGET", + "props": { + "buttonStyle": "PRIMARY_BUTTON", + "text": "Confirm" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Icon1", + "rightColumn": 16, + "onClick": "{{closeModal('TestModal')}}", + "color": "#040627", + "iconName": "cross", + "widgetId": "n5fc0ven2a", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "type": "ICON_WIDGET", + "parentId": "dma7flgdrm", + "isLoading": false, + "leftColumn": 15, + "iconSize": 24 + }, + { + "isLoading": false, + "widgetName": "Text1", + "rightColumn": 15, + "leftColumn": 0, + "widgetId": "s818l5hhvq", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "text": "Modal Title", + "textStyle": "HEADING", + "type": "TEXT_WIDGET", + "parentId": "dma7flgdrm" + }, + { + "widgetName": "Button1", + "rightColumn": 13, + "isDefaultClickDisabled": true, + "widgetId": "io777lh7bc", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 4, + "bottomRow": 5, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "dma7flgdrm", + "isLoading": false, + "leftColumn": 10, + "text": "Cancel", + "isDisabled": false + }, + { + "widgetName": "Button2", + "rightColumn": 16, + "isDefaultClickDisabled": true, + "widgetId": "gexp49bfyb", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 4, + "bottomRow": 5, + "isVisible": true, + "type": "BUTTON_WIDGET", + "parentId": "dma7flgdrm", + "isLoading": false, + "leftColumn": 13, + "text": "Confirm", + "isDisabled": false + } + ], + "isDisabled": false + } + ] + } ] - } \ No newline at end of file + }, + "layoutOnLoadActions": [ + [ + { + "id": "5e906ba76e910873a331b648", + "name": "UsersApi", + "pluginType": "API", + "jsonPathKeys": [] + } + ] + ] +} \ No newline at end of file diff --git a/app/client/cypress/fixtures/example.json b/app/client/cypress/fixtures/example.json index 47dc71d630..56e72b7ce2 100644 --- a/app/client/cypress/fixtures/example.json +++ b/app/client/cypress/fixtures/example.json @@ -1,5 +1,83 @@ { - "name": "Using fixtures to represent data", + "country": "India", + "link": "www.google.com", + "command": "{command}{A}{del}", + "marker": [ + { + "lat": -34.397, + "lng": 150.644, + "title": "Marker Test" + } + ], + "location2": "Australia", + "name": "containtest", + "colour": "Red", + "Hover": "mouseover", + "inputdata": "one", + "text": "Adi12", + "number": "2", + "default": "initial", + "radio1": "test1", + "radio2": "test2", + "radio3": "test3", + "radio4": "test4", + "textcheck": "checker", + "textverify": "input", + "alert": "hello", + "layoutId": "5e86eb6492fdf85af565096f", + "contains": "lock", + "input": [ + { + "label": "Option 1", + "value": "1" + }, + { + "label": "Option 2", + "value": "2" + }, + { + "label": "Option 3", + "value": "3" + }, + { + "label": "Option 4", + "value": "4" + }, + { + "label": "Option 5", + "value": "5" + } + ], + "para": "This is to test the system data.", + "regex": "z{3}", + "chartInput": [ + { + "x": "Day1", + "y": 10000 + }, + { + "x": "Day2", + "y": 12000 + }, + { + "x": "Day3", + "y": 32000 + } + ], + "series": "Weekly", + "plan": "Weekly plan", + "ylabel": "total wages", + "placeholder": "check", + "chartIndata": "App Sign Up", + "dropdownInput": "TestD", + "radioInputName": "Test Radio", + "checkbocInputName": "value", + "defaultimage": "https://i0.wp.com/www.heyuguys.com/images/2016/04/The-Joker.png?fit=1920%2C960", + "NewImage": "https://cdn.dribbble.com/users/1787323/screenshots/4563995/dribbbe_hammer-01.png", + "textfun": "{{Table1.selectedRow.userName}}", + "textfunID": "{{Table1.selectedRow.id}}", + "textfunemail": "{{Table1.selectedRow.email}}", + "name1": "Using fixtures to represent data", "email": "hello@cypress.io", "body": "Fixtures are a great way to mock data for responses to routes", "ButtonLabel": "Test Button", @@ -15,5 +93,7 @@ "DatepickerLable": "date", "RichTextEditorName": "RichtextEditor", "HtmlText": "This is the initialcontent

This is a Heading

This is a paragraph.

", - "RichTexteditorBody": "Here is the text area to edit html" + "RichTexteditorBody": "Here is the text area to edit html", + "userApi": "http://postgrest.appsmith.com:3000", + "validateImage": "https://cdn.dribbble.com/users/1787323/screenshots/4563995/dribbbe_hammer-01.png" } \ No newline at end of file diff --git a/app/client/cypress/fixtures/formdsl.json b/app/client/cypress/fixtures/formdsl.json index 640a46ee6a..d41b11e29e 100644 --- a/app/client/cypress/fixtures/formdsl.json +++ b/app/client/cypress/fixtures/formdsl.json @@ -1,509 +1,508 @@ { "dsl": { -  "widgetName": "MainContainer", -  "backgroundColor": "none", -  "rightColumn": 1224, -  "snapColumns": 16, -  "detachFromLayout": true, -  "widgetId": "0", -  "topRow": 0, -  "bottomRow": 1292, -  "containerStyle": "none", -  "snapRows": 33, -  "parentRowSpace": 1, -  "type": "CANVAS_WIDGET", -  "canExtend": true, -  "dynamicBindings": {}, -  "version": 3, -  "minHeight": 1292, -  "parentColumnSpace": 1, -  "leftColumn": 0, -  "children": [ -    { -      "backgroundColor": "#FFFFFF", -      "widgetName": "Container1", -      "rightColumn": 8, -      "orientation": "VERTICAL", -      "snapColumns": 16, -      "widgetId": "gmm48aishv", -      "containerStyle": "card", -      "topRow": 0, -      "bottomRow": 9, -      "parentRowSpace": 38, -      "isVisible": true, -      "type": "CONTAINER_WIDGET", -      "dynamicBindings": {}, -      "isLoading": false, -      "parentColumnSpace": 75.25, -      "leftColumn": 0, -      "children": [ -        { -          "backgroundColor": "#FFFFFF", -          "widgetName": "jmwwbtgjry", -          "rightColumn": 602, -          "orientation": "VERTICAL", -          "snapColumns": 16, -          "detachFromLayout": true, -          "widgetId": "hjiybwqair", -          "containerStyle": "none", -          "topRow": 0, -          "bottomRow": 342, -          "parentRowSpace": 1, -          "isVisible": true, -          "type": "CANVAS_WIDGET", -          "canExtend": false, -          "isLoading": false, -          "parentColumnSpace": 1, -          "leftColumn": 0, -          "children": [ -            { -              "widgetName": "Dropdown1", -              "rightColumn": 8, -              "selectedOptionArr": "{{\n        Dropdown1.selectionType === \"MULTI_SELECT\"\n          ? Dropdown1.options.filter((opt, index) =>\n              _.includes(Dropdown1.selectedIndexArr, index),\n            )\n          : undefined\n      }}", -              "widgetId": "n9hyiainl8", -              "topRow": 0, -              "bottomRow": 1, -              "isValid": "{{Dropdown1.isRequired ? Dropdown1.selectionType === 'SINGLE_SELECT' ? !!Dropdown1.selectedOption : !!Dropdown1.selectedIndexArr && Dropdown1.selectedIndexArr.length > 0 : true}}", -              "parentRowSpace": 38, -              "isVisible": true, -              "label": "Test Dropdown", -              "type": "DROP_DOWN_WIDGET", -              "dynamicBindings": { -                "selectedOptionArr": true, -                "isValid": true, -                "selectedIndexArr": true, -                "selectedOption": true, -                "selectedIndex": true -              }, -              "selectedOption": "{{\n        Dropdown1.selectionType === 'SINGLE_SELECT'\n          ? Dropdown1.options[Dropdown1.selectedIndex]\n          : undefined\n      }}", -              "isLoading": false, -              "selectionType": "MULTI_SELECT", -              "parentColumnSpace": 34.6875, -              "leftColumn": 0, -              "options": "[\n  {\n    \"label\": \"Option 1\",\n    \"value\": \"1\"\n  },\n  {\n    \"label\": \"Option 2\",\n    \"value\": \"2\"\n  },\n  {\n    \"label\": \"Option 3\",\n    \"value\": \"3\"\n  },\n  {\n    \"label\": \"Option 4\",\n    \"value\": \"4\"\n  },\n  {\n    \"label\": \"Option 5\",\n    \"value\": \"5\"\n  }\n]" -            }, -            { -              "isRequired": true, -              "widgetName": "checker", -              "rightColumn": 14, -              "widgetId": "b9wzxcluhi", -              "topRow": 1, -              "bottomRow": 2, -              "parentRowSpace": 38, -              "isVisible": true, -              "label": "Test Checkbox", -              "type": "CHECKBOX_WIDGET", -              "dynamicBindings": {}, -              "isLoading": false, -              "parentColumnSpace": 34.6875, -              "leftColumn": 11, -              "dynamicTriggers": { -                "onCheckChange": true -              }, -              "defaultCheckedState": true, -              "onCheckChange": "{{navigateToUrl('Awww.google.com')}}" -            }, -            { -              "widgetName": "RichTextEditor1", -              "rightColumn": 11, -              "widgetId": "x0v0ywkeod", -              "topRow": 3, -              "bottomRow": 8, -              "parentRowSpace": 38, -              "isVisible": true, -              "type": "RICH_TEXT_EDITOR_WIDGET", -              "dynamicBindings": {}, -              "isLoading": false, -              "parentColumnSpace": 34.6875, -              "leftColumn": 3, -              "dynamicTriggers": { -                "onTextChange": true -              }, -              "defaultText": "", -              "text": "This is the initial content of the editor", -              "isDisabled": false, -              "onTextChange": "{{navigateTo()}}" -            }, -            { -              "widgetName": "Adi12", -              "rightColumn": 16, -              "widgetId": "76qupajn9l", -              "topRow": 3, -              "bottomRow": 5, -              "isValid": "{{ Adi12.isRequired ? !!Adi12.selectedOptionValue : true }}", -              "parentRowSpace": 38, -              "isVisible": true, -              "label": "Test Radio", -              "type": "RADIO_GROUP_WIDGET", -              "dynamicBindings": { -                "isValid": true, -                "selectedOption": true -              }, -              "selectedOption": "{{_.find(Adi12.options, { value: Adi12.selectedOptionValue })}}", -              "isLoading": false, -              "defaultOptionValue": "1", -              "parentColumnSpace": 34.6875, -              "leftColumn": 12, -              "dynamicTriggers": { -                "onSelectionChange": true -              }, -              "onSelectionChange": "{{navigateTo()}}", -              "options": [ -                { -                  "id": "1", -                  "label": "jarvis", -                  "value": "1" -                }, -                { -                  "id": "2", -                  "label": "marvel", -                  "value": "2" -                }, -                { -                  "label": "iron", -                  "value": "4" -                } -              ] -            } -          ] -        } -      ] -    }, -    { -      "backgroundColor": "#FFFFFF", -      "widgetName": "Container3", -      "rightColumn": 16, -      "orientation": "VERTICAL", -      "snapColumns": 16, -      "widgetId": "28hfrtdb1a", -      "containerStyle": "card", -      "topRow": 9, -      "bottomRow": 23, -      "parentRowSpace": 38, -      "isVisible": true, -      "type": "CONTAINER_WIDGET", -      "dynamicBindings": {}, -      "isLoading": false, -      "parentColumnSpace": 75.25, -      "leftColumn": 0, -      "children": [ -        { -          "backgroundColor": "#FFFFFF", -          "widgetName": "lvl7ajf1rn", -          "rightColumn": 1204, -          "orientation": "VERTICAL", -          "snapColumns": 16, -          "detachFromLayout": true, -          "widgetId": "ac4kpozgg3", -          "containerStyle": "none", -          "topRow": 0, -          "bottomRow": 532, -          "parentRowSpace": 1, -          "isVisible": true, -          "type": "CANVAS_WIDGET", -          "canExtend": false, -          "isLoading": false, -          "parentColumnSpace": 1, -          "leftColumn": 0, -          "children": [ -            { -              "widgetName": "Form1", -              "backgroundColor": "Gray", -              "rightColumn": 11, -              "widgetId": "z62mnh15y5", -              "topRow": 0, -              "bottomRow": 13, -              "parentRowSpace": 38, -              "isVisible": true, -              "type": "FORM_WIDGET", -              "dynamicBindings": {}, -              "blueprint": { -                "view": [ -                  { -                    "position": { -                      "top": 0, -                      "left": 0 -                    }, -                    "type": "CANVAS_WIDGET", -                    "props": { -                      "blueprint": { -                        "view": [ -                          { -                            "size": { -                              "rows": 1, -                              "cols": 12 -                            }, -                            "position": { -                              "top": 0, -                              "left": 0 -                            }, -                            "type": "TEXT_WIDGET", -                            "props": { -                              "text": "Title", -                              "textStyle": "HEADING" -                            } -                          }, -                          { -                            "size": { -                              "rows": 1, -                              "cols": 4 -                            }, -                            "position": { -                              "top": 11, -                              "left": 12 -                            }, -                            "type": "FORM_BUTTON_WIDGET", -                            "props": { -                              "resetFormOnClick": false, -                              "disabledWhenInvalid": true, -                              "buttonStyle": "PRIMARY_BUTTON", -                              "text": "Submit" -                            } -                          }, -                          { -                            "size": { -                              "rows": 1, -                              "cols": 4 -                            }, -                            "position": { -                              "top": 11, -                              "left": 8 -                            }, -                            "type": "FORM_BUTTON_WIDGET", -                            "props": { -                              "resetFormOnClick": true, -                              "disabledWhenInvalid": false, -                              "buttonStyle": "SECONDARY_BUTTON", -                              "text": "Reset" -                            } -                          } -                        ] -                      }, -                      "detachFromLayout": true, -                      "children": [], -                      "containerStyle": "none", -                      "canExtend": false -                    } -                  } -                ] -              }, -              "isLoading": false, -              "parentColumnSpace": 71.75, -              "leftColumn": 5, -              "children": [ -                { -                  "widgetName": "Canvas1", -                  "rightColumn": 430.5, -                  "detachFromLayout": true, -                  "widgetId": "nxlutw2g3v", -                  "containerStyle": "none", -                  "topRow": 0, -                  "bottomRow": 494, -                  "parentRowSpace": 1, -                  "isVisible": true, -                  "canExtend": false, -                  "type": "CANVAS_WIDGET", -                  "dynamicBindings": {}, -                  "blueprint": { -                    "view": [ -                      { -                        "size": { -                          "rows": 1, -                          "cols": 12 -                        }, -                        "position": { -                          "top": 0, -                          "left": 0 -                        }, -                        "type": "TEXT_WIDGET", -                        "props": { -                          "text": "Title", -                          "textStyle": "HEADING" -                        } -                      }, -                      { -                        "size": { -                          "rows": 1, -                          "cols": 4 -                        }, -                        "position": { -                          "top": 11, -                          "left": 12 -                        }, -                        "type": "FORM_BUTTON_WIDGET", -                        "props": { -                          "resetFormOnClick": false, -                          "disabledWhenInvalid": true, -                          "buttonStyle": "PRIMARY_BUTTON", -                          "text": "Submit" -                        } -                      }, -                      { -                        "size": { -                          "rows": 1, -                          "cols": 4 -                        }, -                        "position": { -                          "top": 11, -                          "left": 8 -                        }, -                        "type": "FORM_BUTTON_WIDGET", -                        "props": { -                          "resetFormOnClick": true, -                          "disabledWhenInvalid": false, -                          "buttonStyle": "SECONDARY_BUTTON", -                          "text": "Reset" -                        } -                      } -                    ] -                  }, -                  "minHeight": 494, -                  "isLoading": false, -                  "parentColumnSpace": 1, -                  "leftColumn": 0, -                  "children": [ -                    { -                      "isLoading": false, -                      "widgetName": "Text1", -                      "rightColumn": 12, -                      "leftColumn": 0, -                      "widgetId": "uvz6hzdz7c", -                      "topRow": 0, -                      "bottomRow": 1, -                      "isVisible": true, -                      "text": "Title", -                      "textStyle": "HEADING", -                      "type": "TEXT_WIDGET", -                      "dynamicBindings": {} -                    }, -                    { -                      "resetFormOnClick": false, -                      "widgetName": "FormButton1", -                      "rightColumn": 16, -                      "isDefaultClickDisabled": true, -                      "widgetId": "tf20n9k4z2", -                      "buttonStyle": "PRIMARY_BUTTON", -                      "topRow": 11, -                      "bottomRow": 12, -                      "isVisible": true, -                      "type": "FORM_BUTTON_WIDGET", -                      "dynamicBindings": {}, -                      "isLoading": false, -                      "disabledWhenInvalid": true, -                      "leftColumn": 12, -                      "text": "Submit" -                    }, -                    { -                      "resetFormOnClick": true, -                      "widgetName": "FormButton2", -                      "rightColumn": 12, -                      "isDefaultClickDisabled": true, -                      "widgetId": "6xnpe13jie", -                      "buttonStyle": "SECONDARY_BUTTON", -                      "topRow": 11, -                      "bottomRow": 12, -                      "isVisible": true, -                      "type": "FORM_BUTTON_WIDGET", -                      "dynamicBindings": {}, -                      "isLoading": false, -                      "disabledWhenInvalid": false, -                      "leftColumn": 8, -                      "text": "Reset" -                    } -                  ] -                } -              ] -            } -          ] -        } -      ] -    }, -    { -      "backgroundColor": "#FFFFFF", -      "widgetName": "Container4", -      "rightColumn": 16, -      "orientation": "VERTICAL", -      "snapColumns": 16, -      "widgetId": "ii6dnhfrba", -      "containerStyle": "card", -      "topRow": 0, -      "bottomRow": 9, -      "parentRowSpace": 38, -      "isVisible": true, -      "type": "CONTAINER_WIDGET", -      "dynamicBindings": {}, -      "isLoading": false, -      "parentColumnSpace": 75.25, -      "leftColumn": 8, -      "children": [ -        { -          "backgroundColor": "#FFFFFF", -          "widgetName": "rnz3m8xrzc", -          "rightColumn": 602, -          "orientation": "VERTICAL", -          "snapColumns": 16, -          "detachFromLayout": true, -          "widgetId": "iw4o07jvik", -          "containerStyle": "none", -          "topRow": 0, -          "bottomRow": 342, -          "parentRowSpace": 1, -          "isVisible": true, -          "type": "CANVAS_WIDGET", -          "canExtend": false, -          "isLoading": false, -          "parentColumnSpace": 1, -          "leftColumn": 0, -          "children": [ -            { -              "widgetName": "FilePicker1", -              "rightColumn": 8, -              "isDefaultClickDisabled": true, -              "widgetId": "q5skceaq3h", -              "topRow": 1, -              "bottomRow": 2, -              "isValid": "{{ FilePicker1.isRequired ? FilePicker1.files.length > 0 : true }}", -              "parentRowSpace": 38, -              "isVisible": true, -              "label": "Upload Files", -              "maxFileSize": "", -              "type": "FILE_PICKER_WIDGET", -              "dynamicBindings": { -                "isValid": true -              }, -              "isLoading": false, -              "parentColumnSpace": 34.6875, -              "leftColumn": 4, -              "files": [] -            }, -            { -              "widgetName": "DatePicker1", -              "rightColumn": 11, -              "dateFormat": "DD/MM/YYYY", -              "widgetId": "qx038sqrin", -              "topRow": 7, -              "bottomRow": 8, -              "isValid": "{{ DatePicker1.isRequired ? !!DatePicker1.selectedDate : true }}", -              "parentRowSpace": 38, -              "isVisible": true, -              "datePickerType": "DATE_PICKER", -              "label": "From Date", -              "type": "DATE_PICKER_WIDGET", -              "dynamicBindings": { -                "isValid": true -              }, -              "isLoading": false, -              "enableTimePicker": true, -              "parentColumnSpace": 34.6875, -              "leftColumn": 3, -              "isDisabled": false -            } -          ] -        } -      ] -    } -  ] + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1292, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 3, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "rightColumn": 8, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "gmm48aishv", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 9, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "jmwwbtgjry", + "rightColumn": 602, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "hjiybwqair", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 342, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Dropdown1", + "rightColumn": 8, + "selectedOptionArr": "{{\n Dropdown1.selectionType === \"MULTI_SELECT\"\n ? Dropdown1.options.filter((opt, index) =>\n _.includes(Dropdown1.selectedIndexArr, index),\n)\n : undefined\n}}", + "widgetId": "n9hyiainl8", + "topRow": 0, + "bottomRow": 1, + "isValid": "{{Dropdown1.isRequired ? Dropdown1.selectionType === 'SINGLE_SELECT' ? !!Dropdown1.selectedOption : !!Dropdown1.selectedIndexArr && Dropdown1.selectedIndexArr.length > 0 : true}}", + "parentRowSpace": 38, + "isVisible": true, + "label": "Test Dropdown", + "type": "DROP_DOWN_WIDGET", + "dynamicBindings": { + "selectedOptionArr": true, + "isValid": true, + "selectedIndexArr": true, + "selectedOption": true, + "selectedIndex": true + }, + "selectedOption": "{{\nDropdown1.selectionType === 'SINGLE_SELECT'\n ? Dropdown1.options[Dropdown1.selectedIndex]\n: undefined\n}}", + "isLoading": false, + "selectionType": "", + "parentColumnSpace": 34.6875, + "leftColumn": 0, + "options": "[\n {\n \"label\": \"Option 1\",\n \"value\": \"1\"\n },\n {\n \"label\": \"Option 2\",\n \"value\": \"2\"\n },\n {\n \"label\": \"Option 3\",\n \"value\": \"3\"\n },\n {\n \"label\": \"Option 4\",\n \"value\": \"4\"\n },\n {\n \"label\": \"Option 5\",\n \"value\": \"5\"\n }\n]" + }, + { + "isRequired": true, + "widgetName": "checker", + "rightColumn": 14, + "widgetId": "b9wzxcluhi", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 38, + "isVisible": true, + "label": "Test Checkbox", + "type": "CHECKBOX_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 34.6875, + "leftColumn": 11, + "dynamicTriggers": { + "onCheckChange": true + }, + "defaultCheckedState": true, + "onCheckChange": "{{navigateToUrl('Awww.google.com')}}" + }, + { + "widgetName": "RichTextEditor1", + "rightColumn": 11, + "widgetId": "x0v0ywkeod", + "topRow": 3, + "bottomRow": 8, + "parentRowSpace": 38, + "isVisible": true, + "type": "RICH_TEXT_EDITOR_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 34.6875, + "leftColumn": 3, + "dynamicTriggers": { + "onTextChange": true + }, + "defaultText": "", + "text": "This is the initial content of the editor", + "isDisabled": false, + "onTextChange": "{{navigateTo()}}" + }, + { + "widgetName": "Adi12", + "rightColumn": 16, + "widgetId": "76qupajn9l", + "topRow": 3, + "bottomRow": 5, + "isValid": "{{ Adi12.isRequired ? !!Adi12.selectedOptionValue : true }}", + "parentRowSpace": 38, + "isVisible": true, + "label": "Test Radio", + "type": "RADIO_GROUP_WIDGET", + "dynamicBindings": { + "isValid": true, + "selectedOption": true + }, + "selectedOption": "{{_.find(Adi12.options, { value: Adi12.selectedOptionValue })}}", + "isLoading": false, + "defaultOptionValue": "1", + "parentColumnSpace": 34.6875, + "leftColumn": 12, + "dynamicTriggers": { + "onSelectionChange": true + }, + "onSelectionChange": "{{navigateTo()}}", + "options": [ + { + "id": "1", + "label": "jarvis", + "value": "1" + }, + { + "id": "2", + "label": "marvel", + "value": "2" + }, + { + "label": "iron", + "value": "4" + } + ] + } + ] + } + ] + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "rightColumn": 16, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "28hfrtdb1a", + "containerStyle": "card", + "topRow": 9, + "bottomRow": 23, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "lvl7ajf1rn", + "rightColumn": 1204, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "ac4kpozgg3", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 532, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Form1", + "backgroundColor": "Gray", + "rightColumn": 11, + "widgetId": "z62mnh15y5", + "topRow": 0, + "bottomRow": 13, + "parentRowSpace": 38, + "isVisible": true, + "type": "FORM_WIDGET", + "dynamicBindings": {}, + "blueprint": { + "view": [ + { + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": false, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "detachFromLayout": true, + "children": [], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 71.75, + "leftColumn": 5, + "children": [ + { + "widgetName": "Canvas1", + "rightColumn": 430.5, + "detachFromLayout": true, + "widgetId": "nxlutw2g3v", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 494, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "dynamicBindings": {}, + "blueprint": { + "view": [ + { + "size": { + "rows": 1, + "cols": 12 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "TEXT_WIDGET", + "props": { + "text": "Title", + "textStyle": "HEADING" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 12 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": false, + "disabledWhenInvalid": true, + "buttonStyle": "PRIMARY_BUTTON", + "text": "Submit" + } + }, + { + "size": { + "rows": 1, + "cols": 4 + }, + "position": { + "top": 11, + "left": 8 + }, + "type": "FORM_BUTTON_WIDGET", + "props": { + "resetFormOnClick": true, + "disabledWhenInvalid": false, + "buttonStyle": "SECONDARY_BUTTON", + "text": "Reset" + } + } + ] + }, + "minHeight": 494, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "isLoading": false, + "widgetName": "Text1", + "rightColumn": 12, + "leftColumn": 0, + "widgetId": "uvz6hzdz7c", + "topRow": 0, + "bottomRow": 1, + "isVisible": true, + "text": "Title", + "textStyle": "HEADING", + "type": "TEXT_WIDGET", + "dynamicBindings": {} + }, + { + "resetFormOnClick": false, + "widgetName": "FormButton1", + "rightColumn": 16, + "isDefaultClickDisabled": true, + "widgetId": "tf20n9k4z2", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 11, + "bottomRow": 12, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "disabledWhenInvalid": true, + "leftColumn": 12, + "text": "Submit" + }, + { + "resetFormOnClick": true, + "widgetName": "FormButton2", + "rightColumn": 12, + "isDefaultClickDisabled": true, + "widgetId": "6xnpe13jie", + "buttonStyle": "SECONDARY_BUTTON", + "topRow": 11, + "bottomRow": 12, + "isVisible": true, + "type": "FORM_BUTTON_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "disabledWhenInvalid": false, + "leftColumn": 8, + "text": "Reset" + } + ] + } + ] + } + ] + } + ] + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container4", + "rightColumn": 16, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "ii6dnhfrba", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 9, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 8, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "rnz3m8xrzc", + "rightColumn": 602, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "iw4o07jvik", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 342, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "FilePicker1", + "rightColumn": 8, + "isDefaultClickDisabled": true, + "widgetId": "q5skceaq3h", + "topRow": 1, + "bottomRow": 2, + "isValid": "{{ FilePicker1.isRequired ? FilePicker1.files.length > 0 : true }}", + "parentRowSpace": 38, + "isVisible": true, + "label": "Upload Files", + "maxFileSize": "", + "type": "FILE_PICKER_WIDGET", + "dynamicBindings": { + "isValid": true + }, + "isLoading": false, + "parentColumnSpace": 34.6875, + "leftColumn": 4, + "files": [] + }, + { + "widgetName": "DatePicker1", + "rightColumn": 11, + "dateFormat": "DD/MM/YYYY", + "widgetId": "qx038sqrin", + "topRow": 7, + "bottomRow": 8, + "isValid": "{{ DatePicker1.isRequired ? !!DatePicker1.selectedDate : true }}", + "parentRowSpace": 38, + "isVisible": true, + "datePickerType": "DATE_PICKER", + "label": "From Date", + "type": "DATE_PICKER_WIDGET", + "dynamicBindings": { + "isValid": true + }, + "isLoading": false, + "enableTimePicker": true, + "parentColumnSpace": 34.6875, + "leftColumn": 3, + "isDisabled": false + } + ] + } + ] + } + ] }, "layoutOnLoadActions": [] - } - \ No newline at end of file + } \ No newline at end of file diff --git a/app/client/cypress/fixtures/layoutdsl.json b/app/client/cypress/fixtures/layoutdsl.json index eae95b168e..d410fc03dd 100644 --- a/app/client/cypress/fixtures/layoutdsl.json +++ b/app/client/cypress/fixtures/layoutdsl.json @@ -1,438 +1,547 @@ { - "dsl": { -     "widgetName": "MainContainer", -     "backgroundColor": "none", -     "rightColumn": 1224, -     "snapColumns": 16, -     "detachFromLayout": true, -     "widgetId": "0", -     "topRow": 0, -     "bottomRow": 1292, -     "containerStyle": "none", -     "snapRows": 33, -     "parentRowSpace": 1, -     "type": "CANVAS_WIDGET", -     "canExtend": true, -     "dynamicBindings": {}, -     "version": 3, -     "minHeight": 1292, -     "parentColumnSpace": 1, -     "leftColumn": 0, -     "children": [ -         { -             "backgroundColor": "#FFFFFF", -             "widgetName": "Container1", -             "rightColumn": 8, -             "orientation": "VERTICAL", -             "snapColumns": 16, -             "widgetId": "8elnkhrzdb", -             "containerStyle": "card", -             "topRow": 0, -             "bottomRow": 9, -             "parentRowSpace": 38, -             "isVisible": true, -             "type": "CONTAINER_WIDGET", -             "dynamicBindings": {}, -             "isLoading": false, -             "parentColumnSpace": 75.25, -             "leftColumn": 0, -             "children": [ -                 { -                     "backgroundColor": "#FFFFFF", -                     "widgetName": "s3m9o0kzef", -                     "rightColumn": 602, -                     "orientation": "VERTICAL", -                     "snapColumns": 16, -                     "detachFromLayout": true, -                     "widgetId": "4utikp3lta", -                     "containerStyle": "none", -                     "topRow": 0, -                     "bottomRow": 342, -                     "parentRowSpace": 1, -                     "isVisible": true, -                     "type": "CANVAS_WIDGET", -                     "canExtend": false, -                     "isLoading": false, -                     "parentColumnSpace": 1, -                     "leftColumn": 0, -                     "children": [ -                         { -                             "widgetName": "Text1", -                             "rightColumn": 3, -                             "widgetId": "6350kah7vo", -                             "topRow": 0, -                             "bottomRow": 1, -                             "parentRowSpace": 38, -                             "isVisible": true, -                             "type": "TEXT_WIDGET", -                             "dynamicBindings": {}, -                             "isLoading": false, -                             "parentColumnSpace": 35.25, -                             "leftColumn": 0, -                             "text": "Title", -                             "textStyle": "HEADING" -                         } -                     ] -                 } -             ] -         }, -         { -             "backgroundColor": "#FFFFFF", -             "widgetName": "Container3", -             "rightColumn": 16, -             "orientation": "VERTICAL", -             "snapColumns": 16, -             "widgetId": "eavpzddsyy", -             "containerStyle": "card", -             "topRow": 9, -             "bottomRow": 23, -             "parentRowSpace": 38, -             "isVisible": true, -             "type": "CONTAINER_WIDGET", -             "dynamicBindings": {}, -             "isLoading": false, -             "parentColumnSpace": 75.25, -             "leftColumn": 0, -             "children": [ -                 { -                     "backgroundColor": "#FFFFFF", -                     "widgetName": "7023pcljqc", -                     "rightColumn": 1204, -                     "orientation": "VERTICAL", -                     "snapColumns": 16, -                     "detachFromLayout": true, -                     "widgetId": "fwrt1tntll", -                     "containerStyle": "none", -                     "topRow": 0, -                     "bottomRow": 532, -                     "parentRowSpace": 1, -                     "isVisible": true, -                     "type": "CANVAS_WIDGET", -                     "canExtend": false, -                     "isLoading": false, -                     "parentColumnSpace": 1, -                     "leftColumn": 0, -                     "children": [ -                         { -                             "widgetName": "Text3", -                             "rightColumn": 3, -                             "widgetId": "lzz2qxcwi5", -                             "topRow": 0, -                             "bottomRow": 1, -                             "parentRowSpace": 38, -                             "isVisible": true, -                             "type": "TEXT_WIDGET", -                             "dynamicBindings": {}, -                             "isLoading": false, -                             "parentColumnSpace": 72.875, -                             "leftColumn": 0, -                             "text": "Title", -                             "textStyle": "HEADING" -                         }, -                         { -                             "widgetName": "Aditya", -                             "rightColumn": 15, -                             "widgetId": "p4ph0yxggg", -                             "topRow": 1, -                             "bottomRow": 7, -                             "tabs": [ -                                 { -                                     "label": "Tab 1", -                                     "id": "tab1" -                                 }, -                                 { -                                     "label": "Tab 2", -                                     "id": "tab2" -                                 } -                             ], -                             "parentRowSpace": 38, -                             "isVisible": true, -                             "type": "TABS_WIDGET", -                             "dynamicBindings": {}, -                             "parentId": "fwrt1tntll", -                             "shouldScrollContents": true, -                             "blueprint": { -                                 "view": [ -                                     { -                                         "size": { -                                             "rows": 6, -                                             "cols": 16 -                                         }, -                                         "position": { -                                             "top": 0, -                                             "left": 0 -                                         }, -                                         "type": "CANVAS_WIDGET", -                                         "props": { -                                             "tabId": "tab1", -                                             "detachFromLayout": true, -                                             "children": [], -                                             "containerStyle": "none", -                                             "canExtend": false -                                         } -                                     }, -                                     { -                                         "size": { -                                             "rows": 6, -                                             "cols": 16 -                                         }, -                                         "position": { -                                             "top": 0, -                                             "left": 0 -                                         }, -                                         "type": "CANVAS_WIDGET", -                                         "props": { -                                             "tabId": "tab2", -                                             "detachFromLayout": true, -                                             "children": [], -                                             "containerStyle": "none", -                                             "canExtend": false -                                         } -                                     } -                                 ] -                             }, -                             "isLoading": false, -                             "parentColumnSpace": 71.75, -                             "leftColumn": 3, -                             "children": [ -                                 { -                                     "tabId": "tab1", -                                     "widgetName": "Canvas1", -                                     "rightColumn": 574, -                                     "detachFromLayout": true, -                                     "widgetId": "s3lmx5acn6", -                                     "containerStyle": "none", -                                     "topRow": 0, -                                     "bottomRow": 266, -                                     "parentRowSpace": 1, -                                     "isVisible": true, -                                     "canExtend": false, -                                     "type": "CANVAS_WIDGET", -                                     "parentId": "p4ph0yxggg", -                                     "minHeight": 266, -                                     "isLoading": false, -                                     "parentColumnSpace": 1, -                                     "leftColumn": 0, -                                     "children": [ -                                         { -                                             "widgetName": "Input1", -                                             "rightColumn": 6, -                                             "widgetId": "tl5p847ta8", -                                             "topRow": 0, -                                             "bottomRow": 1, -                                             "isValid": "{{Input1.isRequired ? Input1.text && descriptionInput.text.length > 0 ? Input1.regex ? new RegExp(Input1.regex).test(Input1.text) : true : Input1.regex ? new RegExp(Input1.regex).test(Input1.text) : true}}", -                                             "parentRowSpace": 38, -                                             "isVisible": true, -                                             "label": "Label me", -                                             "type": "INPUT_WIDGET", -                                             "dynamicBindings": { -                                                 "isValid": true -                                             }, -                                             "parentId": "s3lmx5acn6", -                                             "isLoading": false, -                                             "parentColumnSpace": 51.4375, -                                             "leftColumn": 1, -                                             "inputType": "TEXT" -                                         }, -                                         { -                                             "widgetName": "Checkbox1", -                                             "rightColumn": 6, -                                             "widgetId": "e0da18s6li", -                                             "topRow": 2, -                                             "bottomRow": 3, -                                             "parentRowSpace": 38, -                                             "isVisible": true, -                                             "label": "Label me", -                                             "type": "CHECKBOX_WIDGET", -                                             "dynamicBindings": {}, -                                             "parentId": "s3lmx5acn6", -                                             "isLoading": false, -                                             "parentColumnSpace": 51.4375, -                                             "leftColumn": 3, -                                             "defaultCheckedState": true -                                         }, -                                         { -                                             "widgetName": "RadioGroup1", -                                             "rightColumn": 12, -                                             "widgetId": "xop37d5kql", -                                             "topRow": 1, -                                             "bottomRow": 3, -                                             "isValid": "{{ RadioGroup1.isRequired ? !!RadioGroup1.selectedOptionValue : true }}", -                                             "parentRowSpace": 38, -                                             "isVisible": true, -                                             "label": "Label", -                                             "type": "RADIO_GROUP_WIDGET", -                                             "dynamicBindings": { -                                                 "isValid": true, -                                                 "selectedOption": true -                                             }, -                                             "selectedOption": "{{_.find(RadioGroup1.options, { value: RadioGroup1.selectedOptionValue })}}", -                                             "parentId": "s3lmx5acn6", -                                             "isLoading": false, -                                             "defaultOptionValue": "1", -                                             "parentColumnSpace": 51.4375, -                                             "leftColumn": 9, -                                             "options": [ -                                                 { -                                                     "id": "1", -                                                     "label": "Alpha", -                                                     "value": "1" -                                                 }, -                                                 { -                                                     "id": "2", -                                                     "label": "Bravo", -                                                     "value": "2" -                                                 }, -                                                 { -                                                     "id": "3", -                                                     "label": "Charlie", -                                                     "value": "3" -                                                 } -                                             ] -                                         }, -                                         { -                                             "widgetName": "Button1", -                                             "rightColumn": 9, -                                             "isDefaultClickDisabled": true, -                                             "widgetId": "ih7kwqfhsb", -                                             "buttonStyle": "PRIMARY_BUTTON", -                                             "topRow": 3, -                                             "bottomRow": 4, -                                             "parentRowSpace": 38, -                                             "isVisible": true, -                                             "type": "BUTTON_WIDGET", -                                             "dynamicBindings": {}, -                                             "parentId": "s3lmx5acn6", -                                             "isLoading": false, -                                             "parentColumnSpace": 51.4375, -                                             "leftColumn": 7, -                                             "text": "Submit", -                                             "isDisabled": false -                                         } -                                     ] -                                 }, -                                 { -                                     "tabId": "tab2", -                                     "widgetName": "Canvas2", -                                     "rightColumn": 574, -                                     "detachFromLayout": true, -                                     "widgetId": "4gm6hualwh", -                                     "containerStyle": "none", -                                     "topRow": 0, -                                     "bottomRow": 266, -                                     "parentRowSpace": 1, -                                     "isVisible": true, -                                     "canExtend": false, -                                     "type": "CANVAS_WIDGET", -                                     "parentId": "p4ph0yxggg", -                                     "minHeight": 266, -                                     "isLoading": false, -                                     "parentColumnSpace": 1, -                                     "leftColumn": 0, -                                     "children": [ -                                         { -                                             "widgetName": "RichTextEditor1", -                                             "rightColumn": 12, -                                             "isDefaultClickDisabled": true, -                                             "widgetId": "k3ec6crxfs", -                                             "topRow": 0, -                                             "bottomRow": 5, -                                             "parentRowSpace": 38, -                                             "isVisible": true, -                                             "type": "RICH_TEXT_EDITOR_WIDGET", -                                             "dynamicBindings": {}, -                                             "parentId": "4gm6hualwh", -                                             "isLoading": false, -                                             "parentColumnSpace": 51.4375, -                                             "leftColumn": 4, -                                             "defaultText": "This is the initial content of the editor", -                                             "isDisabled": false -                                         }, -                                         { -                                             "widgetName": "Checkbox2", -                                             "rightColumn": 4, -                                             "widgetId": "68e5f5kehb", -                                             "topRow": 1, -                                             "bottomRow": 2, -                                             "parentRowSpace": 38, -                                             "isVisible": true, -                                             "label": "Label me", -                                             "type": "CHECKBOX_WIDGET", -                                             "dynamicBindings": {}, -                                             "parentId": "4gm6hualwh", -                                             "isLoading": false, -                                             "parentColumnSpace": 51.4375, -                                             "leftColumn": 1, -                                             "defaultCheckedState": true -                                         } -                                     ] -                                 } -                             ], -                             "selectedTab": "AAditya" -                         } -                     ] -                 } -             ] -         }, -         { -             "backgroundColor": "#FFFFFF", -             "widgetName": "Container4", -             "rightColumn": 16, -             "orientation": "VERTICAL", -             "snapColumns": 16, -             "widgetId": "m2nzemp45g", -             "containerStyle": "card", -             "topRow": 0, -             "bottomRow": 9, -             "parentRowSpace": 38, -             "isVisible": true, -             "type": "CONTAINER_WIDGET", -             "dynamicBindings": {}, -             "isLoading": false, -             "parentColumnSpace": 75.25, -             "leftColumn": 8, -             "children": [ -                 { -                     "backgroundColor": "#FFFFFF", -                     "widgetName": "hr7raim6z1", -                     "rightColumn": 602, -                     "orientation": "VERTICAL", -                     "snapColumns": 16, -                     "detachFromLayout": true, -                     "widgetId": "nlnjrkg0uh", -                     "containerStyle": "none", -                     "topRow": 0, -                     "bottomRow": 342, -                     "parentRowSpace": 1, -                     "isVisible": true, -                     "type": "CANVAS_WIDGET", -                     "canExtend": false, -                     "isLoading": false, -                     "parentColumnSpace": 1, -                     "leftColumn": 0, -                     "children": [ -                         { -                             "widgetName": "Text2", -                             "rightColumn": 3, -                             "widgetId": "k7lop1jds0", -                             "topRow": 0, -                             "bottomRow": 1, -                             "parentRowSpace": 38, -                             "isVisible": true, -                             "type": "TEXT_WIDGET", -                             "dynamicBindings": {}, -                             "isLoading": false, -                             "parentColumnSpace": 35.25, -                             "leftColumn": 0, -                             "text": "Title", -                             "textStyle": "HEADING" -                         } -                     ] -                 } -             ] -         } -     ] - }, - "layoutOnLoadActions": [] - } - \ No newline at end of file + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1254, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 4, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "rightColumn": 8, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "8elnkhrzdb", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 9, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "s3m9o0kzef", + "rightColumn": 602, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "4utikp3lta", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 342, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text1", + "rightColumn": 3, + "widgetId": "6350kah7vo", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 38, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 35.25, + "leftColumn": 0, + "text": "Title", + "textStyle": "HEADING" + } + ] + } + ] + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "rightColumn": 16, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "eavpzddsyy", + "containerStyle": "card", + "topRow": 9, + "bottomRow": 20, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "7023pcljqc", + "rightColumn": 1204, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "fwrt1tntll", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 532, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text3", + "rightColumn": 3, + "widgetId": "lzz2qxcwi5", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 38, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 72.875, + "leftColumn": 0, + "text": "Title", + "textStyle": "HEADING" + }, + { + "widgetName": "Tab", + "rightColumn": 7, + "widgetId": "p4ph0yxggg", + "topRow": 2, + "bottomRow": 8, + "tabs": [ + { + "label": "Tab 1", + "id": "tab1" + }, + { + "label": "Tab 2", + "id": "tab2" + }, + { + "id": "tab6zuucm7r5j", + "label": "Tab 3" + }, + { + "id": "tab5fcogap5gv", + "label": "Tab 4" + } + ], + "parentRowSpace": 38, + "isVisible": true, + "type": "TABS_WIDGET", + "dynamicBindings": {}, + "parentId": "fwrt1tntll", + "shouldScrollContents": true, + "blueprint": { + "view": [ + { + "size": { + "rows": 6, + "cols": 16 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "tabId": "tab1", + "detachFromLayout": true, + "children": [], + "containerStyle": "none", + "canExtend": false + } + }, + { + "size": { + "rows": 6, + "cols": 16 + }, + "position": { + "top": 0, + "left": 0 + }, + "type": "CANVAS_WIDGET", + "props": { + "tabId": "tab2", + "detachFromLayout": true, + "children": [], + "containerStyle": "none", + "canExtend": false + } + } + ] + }, + "isLoading": false, + "parentColumnSpace": 71.75, + "leftColumn": 1, + "children": [ + { + "tabId": "tab1", + "widgetName": "Canvas1", + "rightColumn": 574, + "detachFromLayout": true, + "widgetId": "s3lmx5acn6", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 266, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 266, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Input1", + "rightColumn": 6, + "widgetId": "tl5p847ta8", + "topRow": 0, + "bottomRow": 1, + "isValid": "{{Input1.isRequired ? Input1.text && descriptionInput.text.length > 0 ? Input1.regex ? new RegExp(Input1.regex).test(Input1.text) : true : Input1.regex ? new RegExp(Input1.regex).test(Input1.text) : true}}", + "parentRowSpace": 38, + "isVisible": true, + "label": "Label me", + "type": "INPUT_WIDGET", + "dynamicBindings": { + "isValid": true + }, + "parentId": "s3lmx5acn6", + "isLoading": false, + "parentColumnSpace": 51.4375, + "leftColumn": 1, + "inputType": "TEXT" + }, + { + "widgetName": "Checkbox1", + "rightColumn": 6, + "widgetId": "e0da18s6li", + "topRow": 2, + "bottomRow": 3, + "parentRowSpace": 38, + "isVisible": true, + "label": "Label me", + "type": "CHECKBOX_WIDGET", + "dynamicBindings": {}, + "parentId": "s3lmx5acn6", + "isLoading": false, + "parentColumnSpace": 51.4375, + "leftColumn": 3, + "defaultCheckedState": true + }, + { + "widgetName": "RadioGroup1", + "rightColumn": 12, + "widgetId": "xop37d5kql", + "topRow": 1, + "bottomRow": 3, + "isValid": "{{ RadioGroup1.isRequired ? !!RadioGroup1.selectedOptionValue : true }}", + "parentRowSpace": 38, + "isVisible": true, + "label": "Label", + "type": "RADIO_GROUP_WIDGET", + "dynamicBindings": { + "isValid": true, + "selectedOption": true + }, + "selectedOption": "{{_.find(RadioGroup1.options, { value: RadioGroup1.selectedOptionValue })}}", + "parentId": "s3lmx5acn6", + "isLoading": false, + "defaultOptionValue": "1", + "parentColumnSpace": 51.4375, + "leftColumn": 9, + "options": [ + { + "id": "1", + "label": "Alpha", + "value": "1" + }, + { + "id": "2", + "label": "Bravo", + "value": "2" + }, + { + "id": "3", + "label": "Charlie", + "value": "3" + } + ] + }, + { + "widgetName": "Button1", + "rightColumn": 9, + "isDefaultClickDisabled": true, + "widgetId": "ih7kwqfhsb", + "buttonStyle": "PRIMARY_BUTTON", + "topRow": 3, + "bottomRow": 4, + "parentRowSpace": 38, + "isVisible": true, + "type": "BUTTON_WIDGET", + "dynamicBindings": {}, + "parentId": "s3lmx5acn6", + "isLoading": false, + "parentColumnSpace": 51.4375, + "leftColumn": 7, + "text": "Submit", + "isDisabled": false + } + ] + }, + { + "tabId": "tab2", + "widgetName": "Canvas2", + "rightColumn": 574, + "detachFromLayout": true, + "widgetId": "4gm6hualwh", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 228, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 266, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Checkbox2", + "rightColumn": 4, + "widgetId": "68e5f5kehb", + "topRow": 1, + "bottomRow": 2, + "parentRowSpace": 38, + "isVisible": true, + "label": "Label me", + "type": "CHECKBOX_WIDGET", + "dynamicBindings": {}, + "parentId": "4gm6hualwh", + "isLoading": false, + "parentColumnSpace": 51.4375, + "leftColumn": 1, + "defaultCheckedState": true + } + ] + }, + { + "tabId": "tabp0uz4ucxjy", + "widgetName": "Canvas3", + "rightColumn": 430.5, + "detachFromLayout": true, + "widgetId": "d3vnpcqfux", + "containerStyle": "none", + "topRow": 1, + "bottomRow": 229, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 228, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + }, + { + "tabId": "tab9deewfrkvy", + "widgetName": "Canvas4", + "rightColumn": 1076.25, + "detachFromLayout": true, + "widgetId": "f12x4oh4im", + "containerStyle": "none", + "topRow": 1, + "bottomRow": 305, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 304, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + }, + { + "tabId": "tab5mky7wi8s7", + "widgetName": "Canvas5", + "rightColumn": 1076.25, + "detachFromLayout": true, + "widgetId": "7mvuw32897", + "containerStyle": "none", + "topRow": 1, + "bottomRow": 305, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 304, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + }, + { + "tabId": "tabf93xg6z8ic", + "widgetName": "Canvas6", + "rightColumn": 1076.25, + "detachFromLayout": true, + "widgetId": "z7br5p9n30", + "containerStyle": "none", + "topRow": 1, + "bottomRow": 305, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 304, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + }, + { + "tabId": "tabvpmnf6jds8", + "widgetName": "Canvas7", + "rightColumn": 1076.25, + "detachFromLayout": true, + "widgetId": "msmbeq6d5x", + "containerStyle": "none", + "topRow": 1, + "bottomRow": 305, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 304, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + }, + { + "tabId": "tabq1fozv19qz", + "widgetName": "Canvas8", + "rightColumn": 1076.25, + "detachFromLayout": true, + "widgetId": "mkl9qtbdxw", + "containerStyle": "none", + "topRow": 1, + "bottomRow": 305, + "parentRowSpace": 1, + "isVisible": true, + "canExtend": false, + "type": "CANVAS_WIDGET", + "parentId": "p4ph0yxggg", + "minHeight": 304, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [] + } + ], + "selectedTab": "Tab 2" + } + ] + } + ] + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container4", + "rightColumn": 16, + "orientation": "VERTICAL", + "snapColumns": 16, + "widgetId": "m2nzemp45g", + "containerStyle": "card", + "topRow": 0, + "bottomRow": 9, + "parentRowSpace": 38, + "isVisible": true, + "type": "CONTAINER_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 75.25, + "leftColumn": 8, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "hr7raim6z1", + "rightColumn": 602, + "orientation": "VERTICAL", + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "nlnjrkg0uh", + "containerStyle": "none", + "topRow": 0, + "bottomRow": 342, + "parentRowSpace": 1, + "isVisible": true, + "type": "CANVAS_WIDGET", + "canExtend": false, + "isLoading": false, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "widgetName": "Text2", + "rightColumn": 3, + "widgetId": "k7lop1jds0", + "topRow": 0, + "bottomRow": 1, + "parentRowSpace": 38, + "isVisible": true, + "type": "TEXT_WIDGET", + "dynamicBindings": {}, + "isLoading": false, + "parentColumnSpace": 35.25, + "leftColumn": 0, + "text": "Title", + "textStyle": "HEADING" + } + ] + } + ] + } + ] + }, + "layoutOnLoadActions": [] +} \ No newline at end of file diff --git a/app/client/cypress/fixtures/tableWidgetDsl.json b/app/client/cypress/fixtures/tableWidgetDsl.json new file mode 100644 index 0000000000..d0df88b443 --- /dev/null +++ b/app/client/cypress/fixtures/tableWidgetDsl.json @@ -0,0 +1,84 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1254, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 4, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 23, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "transparent", + "widgetName": "8muuok24ny", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 1204, + "topRow": 0, + "bottomRow": 532, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "isVisible": true, + "label": "Data", + "widgetName": "Table1", + "tableData": "", + "type": "TABLE_WIDGET", + "isLoading": false, + "parentColumnSpace": 71.75, + "parentRowSpace": 38, + "leftColumn": 2, + "rightColumn": 10, + "topRow": 3, + "bottomRow": 10, + "parentId": "tyiwk4xuq0", + "widgetId": "5up3r2iuvs", + "dynamicBindings": { + "selectedRow": true + } + } + ], + "widgetId": "tyiwk4xuq0", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "3oe1ka7jon" + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/fixtures/uiBindDsl.json b/app/client/cypress/fixtures/uiBindDsl.json new file mode 100644 index 0000000000..56a5f97104 --- /dev/null +++ b/app/client/cypress/fixtures/uiBindDsl.json @@ -0,0 +1,394 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1254, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 3, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 1, + "rightColumn": 15, + "topRow": 0, + "bottomRow": 15, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "utncsu66ty", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, + "topRow": 0, + "bottomRow": 342, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "isVisible": true, + "isDisabled": false, + "datePickerType": "DATE_PICKER", + "dateFormat": "DD/MM/YYYY", + "label": "Date", + "widgetName": "DatePicker1", + "defaultDate": "2020-04-25T13:33:46.277+05:30", + "type": "DATE_PICKER_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 1, + "rightColumn": 9, + "topRow": 1, + "bottomRow": 2, + "parentId": "acizsl94my", + "widgetId": "o87a4mf3lq", + "dynamicProperties": {}, + "dynamicBindings": { + "isValid": true + }, + "dynamicTriggers": { + "onDateSelected": true + }, + "onDateSelected": "{{showModal('Modal1')}}" + }, + { + "isVisible": true, + "isDisabled": false, + "datePickerType": "DATE_PICKER", + "dateFormat": "DD/MM/YYYY", + "label": "Date", + "widgetName": "DatePicker2", + "defaultDate": "2020-04-24T13:03:46.277+05:30", + "type": "DATE_PICKER_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 1, + "rightColumn": 9, + "topRow": 3, + "bottomRow": 4, + "parentId": "acizsl94my", + "widgetId": "tq86uzjesl" + }, + { + "isVisible": true, + "text": "{{DatePicker1.defaultDate}}", + "textStyle": "LABEL", + "widgetName": "Text5", + "type": "TEXT_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "leftColumn": 4, + "rightColumn": 8, + "topRow": 5, + "bottomRow": 6, + "parentId": "acizsl94my", + "widgetId": "dodyn4d4qd", + "dynamicBindings": { + "text": true + } + } + ], + "widgetId": "acizsl94my", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "mp429a7dl3" + }, + { + "isVisible": false, + "size": "MODAL_SMALL", + "canEscapeKeyClose": true, + "detachFromLayout": true, + "canOutsideClickClose": true, + "shouldScrollContents": true, + "widgetName": "Modal1", + "children": [ + { + "isVisible": true, + "widgetName": "Canvas1", + "detachFromLayout": true, + "canExtend": true, + "isDisabled": false, + "shouldScrollContents": false, + "children": [ + { + "isVisible": true, + "widgetName": "Icon1", + "iconName": "cross", + "iconSize": 24, + "color": "#040627", + "type": "ICON_WIDGET", + "isLoading": false, + "leftColumn": 15, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 1, + "parentId": "cwamdbv44c", + "widgetId": "t3sjfihdb1", + "onClick": "{{closeModal('Modal1')}}" + }, + { + "isVisible": true, + "text": "Modal Title", + "textStyle": "HEADING", + "widgetName": "Text4", + "type": "TEXT_WIDGET", + "isLoading": false, + "leftColumn": 0, + "rightColumn": 15, + "topRow": 0, + "bottomRow": 1, + "parentId": "cwamdbv44c", + "widgetId": "x893ud3zjh", + "dynamicBindings": {} + }, + { + "isVisible": true, + "text": "Cancel", + "buttonStyle": "SECONDARY_BUTTON", + "widgetName": "Button2", + "isDisabled": false, + "isDefaultClickDisabled": true, + "type": "BUTTON_WIDGET", + "isLoading": false, + "leftColumn": 10, + "rightColumn": 13, + "topRow": 4, + "bottomRow": 5, + "parentId": "cwamdbv44c", + "widgetId": "q9snwskqan" + }, + { + "isVisible": true, + "text": "Confirm", + "buttonStyle": "PRIMARY_BUTTON", + "widgetName": "Button3", + "isDisabled": false, + "isDefaultClickDisabled": true, + "type": "BUTTON_WIDGET", + "isLoading": false, + "leftColumn": 13, + "rightColumn": 16, + "topRow": 4, + "bottomRow": 5, + "parentId": "cwamdbv44c", + "widgetId": "tufuj2kdpz" + } + ], + "blueprint": { + "view": [ + { + "type": "ICON_WIDGET", + "position": { + "left": 15, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 1 + }, + "props": { + "iconName": "cross", + "iconSize": 24, + "color": "#040627" + } + }, + { + "type": "TEXT_WIDGET", + "position": { + "left": 0, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 15 + }, + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 10, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Cancel", + "buttonStyle": "SECONDARY_BUTTON" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 13, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Confirm", + "buttonStyle": "PRIMARY_BUTTON" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + }, + "minHeight": 0, + "type": "CANVAS_WIDGET", + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 0, + "topRow": 0, + "bottomRow": 0, + "parentId": "bx9a2jg08o", + "widgetId": "cwamdbv44c" + } + ], + "blueprint": { + "view": [ + { + "type": "CANVAS_WIDGET", + "position": { + "left": 0, + "top": 0 + }, + "props": { + "detachFromLayout": true, + "canExtend": true, + "isVisible": true, + "isDisabled": false, + "shouldScrollContents": false, + "children": [], + "blueprint": { + "view": [ + { + "type": "ICON_WIDGET", + "position": { + "left": 15, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 1 + }, + "props": { + "iconName": "cross", + "iconSize": 24, + "color": "#040627" + } + }, + { + "type": "TEXT_WIDGET", + "position": { + "left": 0, + "top": 0 + }, + "size": { + "rows": 1, + "cols": 15 + }, + "props": { + "text": "Modal Title", + "textStyle": "HEADING" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 10, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Cancel", + "buttonStyle": "SECONDARY_BUTTON" + } + }, + { + "type": "BUTTON_WIDGET", + "position": { + "left": 13, + "top": 4 + }, + "size": { + "rows": 1, + "cols": 3 + }, + "props": { + "text": "Confirm", + "buttonStyle": "PRIMARY_BUTTON" + } + } + ], + "operations": [ + { + "type": "MODIFY_PROPS" + } + ] + } + } + } + ] + }, + "type": "MODAL_WIDGET", + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 0, + "topRow": 0, + "bottomRow": 0, + "parentId": "0", + "widgetId": "bx9a2jg08o" + } + ] + } +} diff --git a/app/client/cypress/fixtures/viewdsl.json b/app/client/cypress/fixtures/viewdsl.json index 7c4f191394..19c9d06392 100644 --- a/app/client/cypress/fixtures/viewdsl.json +++ b/app/client/cypress/fixtures/viewdsl.json @@ -1,268 +1,268 @@ { "dsl": { -    "widgetName": "MainContainer", -    "backgroundColor": "none", -    "rightColumn": 1224, -    "snapColumns": 16, -    "detachFromLayout": true, -    "widgetId": "0", -    "topRow": 0, -    "bottomRow": 1292, -    "containerStyle": "none", -    "snapRows": 33, -    "parentRowSpace": 1, -    "type": "CANVAS_WIDGET", -    "canExtend": true, -    "dynamicBindings": {}, -    "version": 3, -    "minHeight": 1292, -    "parentColumnSpace": 1, -    "leftColumn": 0, -    "children": [ -        { -            "backgroundColor": "#FFFFFF", -            "widgetName": "Container1", -            "type": "CONTAINER_WIDGET", -            "containerStyle": "card", -            "isVisible": true, -            "isLoading": false, -            "parentColumnSpace": 75.25, -            "parentRowSpace": 38, -            "dynamicBindings": {}, -            "leftColumn": 0, -            "rightColumn": 8, -            "topRow": 0, -            "bottomRow": 9, -            "snapColumns": 16, -            "orientation": "VERTICAL", -            "children": [ -                { -                    "backgroundColor": "#FFFFFF", -                    "widgetName": "c7p0vl1zqc", -                    "type": "CANVAS_WIDGET", -                    "containerStyle": "none", -                    "isVisible": true, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "parentRowSpace": 1, -                    "leftColumn": 0, -                    "rightColumn": 602, -                    "topRow": 0, -                    "bottomRow": 342, -                    "snapColumns": 16, -                    "orientation": "VERTICAL", -                    "children": [ -                        { -                            "text": "Title", -                            "textStyle": "HEADING", -                            "widgetName": "Text1", -                            "type": "TEXT_WIDGET", -                            "isVisible": true, -                            "isLoading": false, -                            "parentColumnSpace": 35.25, -                            "parentRowSpace": 38, -                            "dynamicBindings": {}, -                            "leftColumn": 0, -                            "rightColumn": 3, -                            "topRow": 0, -                            "bottomRow": 1, -                            "widgetId": "5bjvswgbeq" -                        }, -                        { -                            "isVisible": true, -                            "defaultImage": "https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-5.jpg", -                            "imageShape": "RECTANGLE", -                            "image": "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", -                            "widgetName": "Image1", -                            "type": "IMAGE_WIDGET", -                            "isLoading": false, -                            "parentColumnSpace": 34.6875, -                            "parentRowSpace": 38, -                            "dynamicBindings": {}, -                            "leftColumn": 5, -                            "rightColumn": 7, -                            "topRow": 2, -                            "bottomRow": 5, -                            "widgetId": "csc9e18wrn" -                        } -                    ], -                    "widgetId": "odbku2ed33", -                    "detachFromLayout": true, -                    "canExtend": false -                } -            ], -            "widgetId": "sicjgah1h4" -        }, -        { -            "backgroundColor": "#FFFFFF", -            "widgetName": "Container3", -            "type": "CONTAINER_WIDGET", -            "containerStyle": "card", -            "isVisible": true, -            "isLoading": false, -            "parentColumnSpace": 75.25, -            "parentRowSpace": 38, -            "dynamicBindings": {}, -            "leftColumn": 0, -            "rightColumn": 16, -            "topRow": 9, -            "bottomRow": 23, -            "snapColumns": 16, -            "orientation": "VERTICAL", -            "children": [ -                { -                    "backgroundColor": "#FFFFFF", -                    "widgetName": "l02um7toe4", -                    "type": "CANVAS_WIDGET", -                    "containerStyle": "none", -                    "isVisible": true, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "parentRowSpace": 1, -                    "leftColumn": 0, -                    "rightColumn": 1204, -                    "topRow": 0, -                    "bottomRow": 532, -                    "snapColumns": 16, -                    "orientation": "VERTICAL", -                    "children": [ -                        { -                            "text": "Title", -                            "textStyle": "HEADING", -                            "widgetName": "Text3", -                            "type": "TEXT_WIDGET", -                            "isVisible": true, -                            "isLoading": false, -                            "parentColumnSpace": 72.875, -                            "parentRowSpace": 38, -                            "dynamicBindings": {}, -                            "leftColumn": 0, -                            "rightColumn": 3, -                            "topRow": 0, -                            "bottomRow": 1, -                            "widgetId": "x6fphn5297" -                        }, -                        { -                            "isVisible": true, -                            "widgetName": "Chart1", -                            "chartType": "BAR_CHART", -                            "chartName": "App Sign Up", -                            "allowHorizontalScroll": false, -                            "chartData": [ -                                { -                                    "seriesName": "", -                                    "data": [ -                                        { -                                            "x": "Mon", -                                            "y": 10000 -                                        }, -                                        { -                                            "x": "Tue", -                                            "y": 12000 -                                        }, -                                        { -                                            "x": "Wed", -                                            "y": 32000 -                                        }, -                                        { -                                            "x": "Thu", -                                            "y": 28000 -                                        }, -                                        { -                                            "x": "Fri", -                                            "y": 14000 -                                        }, -                                        { -                                            "x": "Sat", -                                            "y": 19000 -                                        }, -                                        { -                                            "x": "Sun", -                                            "y": 36000 -                                        } -                                    ] -                                } -                            ], -                            "xAxisName": "Last Week", -                            "yAxisName": "Total Order Revenue $", -                            "type": "CHART_WIDGET", -                            "isLoading": false, -                            "parentColumnSpace": 71.75, -                            "parentRowSpace": 38, -                            "dynamicBindings": {}, -                            "leftColumn": 3, -                            "rightColumn": 13, -                            "topRow": 2, -                            "bottomRow": 10, -                            "parentId": "mt3eypejz7", -                            "widgetId": "km95vrd4sy" -                        } -                    ], -                    "widgetId": "mt3eypejz7", -                    "detachFromLayout": true, -                    "canExtend": false -                } -            ], -            "widgetId": "oz8vs26002" -        }, -        { -            "backgroundColor": "#FFFFFF", -            "widgetName": "Container4", -            "type": "CONTAINER_WIDGET", -            "containerStyle": "card", -            "isVisible": true, -            "isLoading": false, -            "parentColumnSpace": 75.25, -            "parentRowSpace": 38, -            "dynamicBindings": {}, -            "leftColumn": 8, -            "rightColumn": 16, -            "topRow": 0, -            "bottomRow": 9, -            "snapColumns": 16, -            "orientation": "VERTICAL", -            "children": [ -                { -                    "backgroundColor": "#FFFFFF", -                    "widgetName": "9w520wvlzd", -                    "type": "CANVAS_WIDGET", -                    "containerStyle": "none", -                    "isVisible": true, -                    "isLoading": false, -                    "parentColumnSpace": 1, -                    "parentRowSpace": 1, -                    "leftColumn": 0, -                    "rightColumn": 602, -                    "topRow": 0, -                    "bottomRow": 342, -                    "snapColumns": 16, -                    "orientation": "VERTICAL", -                    "children": [ -                        { -                            "text": "Title", -                            "textStyle": "HEADING", -                            "widgetName": "Text2", -                            "type": "TEXT_WIDGET", -                            "isVisible": true, -                            "isLoading": false, -                            "parentColumnSpace": 35.25, -                            "parentRowSpace": 38, -                            "dynamicBindings": {}, -                            "leftColumn": 0, -                            "rightColumn": 3, -                            "topRow": 0, -                            "bottomRow": 1, -                            "widgetId": "ffvzxjjeok" -                        } -                    ], -                    "widgetId": "5kvdaa6y6m", -                    "detachFromLayout": true, -                    "canExtend": false -                } -            ], -            "widgetId": "z6owhekptc" -        } -    ] + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 1224, + "snapColumns": 16, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 1292, + "containerStyle": "none", + "snapRows": 33, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "dynamicBindings": {}, + "version": 3, + "minHeight": 1292, + "parentColumnSpace": 1, + "leftColumn": 0, + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container1", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 8, + "topRow": 0, + "bottomRow": 9, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "c7p0vl1zqc", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, + "topRow": 0, + "bottomRow": 342, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "text": "Title", + "textStyle": "HEADING", + "widgetName": "Text1", + "type": "TEXT_WIDGET", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 35.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 3, + "topRow": 0, + "bottomRow": 1, + "widgetId": "5bjvswgbeq" + }, + { + "isVisible": true, + "defaultImage": "https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-5.jpg", + "imageShape": "RECTANGLE", + "image": "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940hotos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + "widgetName": "Image1", + "type": "IMAGE_WIDGET", + "isLoading": false, + "parentColumnSpace": 34.6875, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 5, + "rightColumn": 7, + "topRow": 2, + "bottomRow": 5, + "widgetId": "csc9e18wrn" + } + ], + "widgetId": "odbku2ed33", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "sicjgah1h4" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container3", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 16, + "topRow": 9, + "bottomRow": 23, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "l02um7toe4", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 1204, + "topRow": 0, + "bottomRow": 532, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "text": "Title", + "textStyle": "HEADING", + "widgetName": "Text3", + "type": "TEXT_WIDGET", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 72.875, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 3, + "topRow": 0, + "bottomRow": 1, + "widgetId": "x6fphn5297" + }, + { + "isVisible": true, + "widgetName": "Chart1", + "chartType": "BAR_CHART", + "chartName": "App Sign Up", + "allowHorizontalScroll": false, + "chartData": [ + { + "seriesName": "", + "data": [ + { + "x": "Mon", + "y": 10000 + }, + { + "x": "Tue", + "y": 12000 + }, + { + "x": "Wed", + "y": 32000 + }, + { + "x": "Thu", + "y": 28000 + }, + { + "x": "Fri", + "y": 14000 + }, + { + "x": "Sat", + "y": 19000 + }, + { + "x": "Sun", + "y": 36000 + } + ] + } + ], + "xAxisName": "Last Week", + "yAxisName": "Total Order Revenue $", + "type": "CHART_WIDGET", + "isLoading": false, + "parentColumnSpace": 71.75, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 3, + "rightColumn": 13, + "topRow": 2, + "bottomRow": 10, + "parentId": "mt3eypejz7", + "widgetId": "km95vrd4sy" + } + ], + "widgetId": "mt3eypejz7", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "oz8vs26002" + }, + { + "backgroundColor": "#FFFFFF", + "widgetName": "Container4", + "type": "CONTAINER_WIDGET", + "containerStyle": "card", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 75.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 8, + "rightColumn": 16, + "topRow": 0, + "bottomRow": 9, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "backgroundColor": "#FFFFFF", + "widgetName": "9w520wvlzd", + "type": "CANVAS_WIDGET", + "containerStyle": "none", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 1, + "parentRowSpace": 1, + "leftColumn": 0, + "rightColumn": 602, + "topRow": 0, + "bottomRow": 342, + "snapColumns": 16, + "orientation": "VERTICAL", + "children": [ + { + "text": "Title", + "textStyle": "HEADING", + "widgetName": "Text2", + "type": "TEXT_WIDGET", + "isVisible": true, + "isLoading": false, + "parentColumnSpace": 35.25, + "parentRowSpace": 38, + "dynamicBindings": {}, + "leftColumn": 0, + "rightColumn": 3, + "topRow": 0, + "bottomRow": 1, + "widgetId": "ffvzxjjeok" + } + ], + "widgetId": "5kvdaa6y6m", + "detachFromLayout": true, + "canExtend": false + } + ], + "widgetId": "z6owhekptc" + } + ] }, "layoutOnLoadActions": [] - } + } \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_DatePicker_Text_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_DatePicker_Text_spec.js new file mode 100644 index 0000000000..52a8e26d8e --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_DatePicker_Text_spec.js @@ -0,0 +1,58 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const formWidgetsPage = require("../../../locators/FormWidgets.json"); +const widgetsPage = require("../../../locators/Widgets.json"); +const dsl = require("../../../fixtures/uiBindDsl.json"); + +describe("Binding the Datepicker and Text Widget", function() { + let nextDay; + let dateDp2; + before(() => { + cy.addDsl(dsl); + }); + + it("DatePicker1-text: Change the date in DatePicker1 and Validate the same in text widget", function() { + cy.openPropertyPane("textwidget"); + + /** + * Bind the datepicker1 to text widget + */ + cy.testJsontext("text", "{{DatePicker1.defaultDate}}"); + cy.get(commonlocators.editPropCrossButton).click(); + + /** + * Fetching the date on DatePicker2 + */ + + cy.get(formWidgetsPage.datepickerWidget + " .bp3-input") + .eq(1) + .invoke("val") + .then(val => { + dateDp2 = val; + cy.log(dateDp2); + }); + + /** + * Changing date on datepicker1 to current date +1 + */ + cy.openPropertyPane("datepickerwidget"); + cy.SetDateToToday(); + cy.get(formWidgetsPage.nextDayBtn).click(); + cy.get(commonlocators.onDateSelectedField).click(); + cy.get(commonlocators.editPropCrossButton).click(); + + /** + *Validate the date in text widget + */ + + nextDay = Cypress.moment() + .add(1, "days") + .format("YYYY-MM-DD"); + cy.get(commonlocators.labelTextStyle).should("contain", nextDay); + }); + + it("Validate the Date is not changed in DatePicker2", function() { + cy.get(formWidgetsPage.datepickerWidget + " .bp3-input") + .eq(1) + .should("have.value", dateDp2); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js new file mode 100644 index 0000000000..4a454bffec --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_tableApi_spec.js @@ -0,0 +1,45 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const dsl = require("../../../fixtures/tableWidgetDsl.json"); +const pages = require("../../../locators/Pages.json"); +const apiPage = require("../../../locators/ApiEditor.json"); +let apiData; + +describe("Test Create Api and Bind to Table widget", function() { + before(() => { + cy.addDsl(dsl); + }); + + it("Test_Add users api and execute api", function() { + cy.NavigateToApiEditor(); + cy.testCreateApiButton(); + cy.createApi(this.data.userApi, "users"); + cy.get(apiPage.responseBody) + .contains("name") + .siblings("span") + .invoke("text") + .then(text => { + cy.log(text); + apiData = text; + cy.log("val1:" + apiData); + }); + }); + + it("Test_Validate the Api data is updated on Table widget", function() { + cy.get(pages.pagesIcon).click({ force: true }); + cy.openPropertyPane("tablewidget"); + cy.testJsontext("tabledata", "{{Api1.data}}"); + cy.get(commonlocators.editPropCrossButton).click(); + + /** + * readTabledata--> is to read the table contents + * @param --> "row num" and "col num" + */ + cy.readTabledata("0", "1").then(tabData => { + expect(apiData).to.eq(`\"${tabData}\"`); + }); + }); + + afterEach(() => { + // put your clean up code if any + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/Binding/TextTable.js b/app/client/cypress/integration/Smoke_TestSuite/Binding/TextTable.js new file mode 100644 index 0000000000..e71dd67dac --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/Binding/TextTable.js @@ -0,0 +1,29 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const dsl = require("../../../fixtures/TextTabledsl.json"); + +describe("Text-Table Binding Functionality", function() { + before(() => { + cy.addDsl(dsl); + }); + it("Text-Table Binding Functionality For Username", function() { + cy.openPropertyPane("tablewidget"); + /** + * @param(Index) Provide index value to select the row. + */ + cy.isSelectRow(1); + cy.openPropertyPane("textwidget"); + cy.testJsontext("text", JSON.stringify(this.data.textfun)); + /** + * @param{Row Index} Provide the row index + * @param(Column Index) Provide column index + */ + cy.readTabledata("1", "2").then(tabData => { + const tabValue = `\"${tabData}\"`; + cy.get(commonlocators.TextInside).should("have.text", tabValue); + }); + }); + afterEach(() => { + // put your clean up code if any + cy.get(commonlocators.editPropCrossButton).click(); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js index 6f017d1aca..d1e8449912 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Container_spec.js @@ -1,4 +1,5 @@ const commonlocators = require("../../../locators/commonlocators.json"); +const widgetsPage = require("../../../locators/Widgets.json"); const dsl = require("../../../fixtures/commondsl.json"); describe("Container Widget Functionality", function() { @@ -8,9 +9,31 @@ describe("Container Widget Functionality", function() { it("Container Widget Functionality", function() { cy.openPropertyPane("containerwidget"); - - //Checking the edit props for container changing the background color of container - cy.testCodeMirror("#C0C0C0"); + /** + * @param{Text} Random Text + * @param{ContainerWidget}Mouseover + * @param{ContainerPre Css} Assertion + */ + cy.widgetText( + "job", + widgetsPage.containerWidget, + commonlocators.containerInnerText, + ); + /** + * @param{Text} Random Colour + */ + cy.testCodeMirror(this.data.colour); + cy.get(widgetsPage.containerD) + .should("have.css", "background-color") + .and("eq", "rgb(255, 0, 0)"); + /** + * @param{toggleButton Css} Assert to be checked + */ + cy.togglebar(widgetsPage.Scrollbutton); + cy.get(widgetsPage.containerD) + .eq(0) + .scrollIntoView({ easing: "linear" }) + .should("be.visible"); cy.get(commonlocators.editPropCrossButton).click(); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js index 2aa7858fec..fb185b354e 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js @@ -1,5 +1,6 @@ const commonlocators = require("../../../locators/commonlocators.json"); const dsl = require("../../../fixtures/commondsl.json"); +const widgetsPage = require("../../../locators/Widgets.json"); describe("Input Widget Functionality", function() { beforeEach(() => { @@ -7,11 +8,54 @@ describe("Input Widget Functionality", function() { }); it("Input Widget Functionality", function() { cy.openPropertyPane("inputwidget"); - - //Checking the edit props for container and changing the Input label name - cy.testCodeMirror("Test Input Label"); - - cy.get(commonlocators.editPropCrossButton).click(); + /** + * @param{Text} Random Text + * @param{InputWidget}Mouseover + * @param{InputPre Css} Assertion + */ + cy.widgetText("day", widgetsPage.inputWidget, widgetsPage.inputval); + /** + * @param{Text} Random Value + */ + cy.testCodeMirror(this.data.inputdata); + cy.get(widgetsPage.label) + .first() + .trigger(this.data.Hover, { force: true }) + .should("have.text", "one"); + cy.get(widgetsPage.datatype) + .find(commonlocators.dropdownbuttonclick) + .click({ force: true }) + .get(commonlocators.dropdownmenu) + .children() + .contains("Number") + .click(); + cy.get(widgetsPage.innertext) + .click({ force: true }) + .type(this.data.para) + .should("be.empty"); + cy.openPropertyPane("inputwidget"); + cy.get(widgetsPage.defaultInput) + .type(this.data.command) + .type("hello"); + cy.get(widgetsPage.placeholder) + .type(this.data.command) + .type(this.data.placeholder); + /** + * @param{Widget} Widget InnerCss + */ + cy.get(widgetsPage.innertext) + .invoke("attr", "placeholder") + .should("contain", "check"); + cy.get(widgetsPage.Regex) + .click() + .type(this.data.regex); + /** + * @param{Show Alert} Css for InputChange + */ + cy.getAlert(commonlocators.optionchangetextInput); + cy.get(widgetsPage.inputButtonPos) + .eq(0) + .click({ force: true }); }); afterEach(() => { diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js index 98aabbf050..184cdcb55f 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/CheckBox_spec.js @@ -1,4 +1,6 @@ const commonlocators = require("../../../locators/commonlocators.json"); +const formWidgetsPage = require("../../../locators/FormWidgets.json"); +const widgetsPage = require("../../../locators/Widgets.json"); const dsl = require("../../../fixtures/formdsl.json"); describe("Checkbox Widget Functionality", function() { @@ -8,10 +10,32 @@ describe("Checkbox Widget Functionality", function() { it("Checkbox Widget Functionality", function() { cy.openPropertyPane("checkboxwidget"); - - //Checking the edit props for Checkbox and also the properties of Checkbox widget - cy.testCodeMirror("Test Checkbox"); - cy.get(commonlocators.editPropCrossButton).click(); + /** + * @param{Text} Random Text + * @param{CheckboxWidget}Mouseover + * @param{CheckboxPre Css} Assertion + */ + cy.widgetText( + "checker", + formWidgetsPage.checkboxWidget, + widgetsPage.checkboxInput, + ); + /** + * @param{Text} Random Value + */ + cy.testCodeMirror(this.data.checkbocInputName); + cy.get(widgetsPage.checkboxLabel).should("have.text", "value"); + /** + * @param{toggleButton Css} Assert to be checked + */ + cy.togglebar(widgetsPage.defaultcheck); + /** + * @param{Show Alert} Css for InputChange + */ + cy.getAlert(commonlocators.optionchangetextCheckbox); + cy.get(widgetsPage.checkboxLabel) + .contains("value") + .click({ force: true }); }); afterEach(() => { diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js index 0396785d3f..2bc690df72 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/DatePicker_spec.js @@ -10,15 +10,30 @@ describe("DatePicker Widget Functionality", function() { it("DatePicker Widget Functionality", function() { cy.openPropertyPane("datepickerwidget"); - //Checking the edit props for DatePicker and also the properties of DatePicker widget - cy.testCodeMirror(this.data.DatepickerLable); - // changing the date to today cy.SetDateToToday(); + //changing the Button Name + cy.widgetText( + this.data.Datepickername, + formWidgetsPage.datepickerWidget, + formWidgetsPage.datepickerWidget + " pre", + ); + + //Checking the edit props for DatePicker and also the properties of DatePicker widget + cy.testCodeMirror(this.data.DatepickerLable); + cy.wait("@updateLayout"); + // change the date to next day cy.get(".t--property-control-defaultdate input").click(); - cy.get(".DayPicker-Day[aria-selected='true'] + div").click(); + + /** + * setDate--> is a Command to select the date in the date picker + * @param1 --> its takes currentday+ eg: 1 + * @param2 --> user date formate + */ + cy.setDate(1, "ddd MMM DD YYYY"); + const nd = Cypress.moment() .add(1, "days") .format("DD/MM/YYYY"); diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js index 009138a766..733d7bf8b4 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Dropdown_spec.js @@ -8,21 +8,38 @@ describe("Dropdown Widget Functionality", function() { }); it("Dropdown Widget Functionality", function() { cy.openPropertyPane("dropdownwidget"); - - //Checking the edit props for Dropdown and also the properties of Dropdown widget - cy.testCodeMirror("Test Dropdown"); - + /** + * @param{Text} Random Text + * @param{DropdownWidget}Mouseover + * @param{DropdownPre Css} Assertion + */ + cy.widgetText( + "lock", + formWidgetsPage.dropdownWidget, + commonlocators.containerInnerText, + ); + /** + * @param{Text} Random Value + */ + cy.testCodeMirror(this.data.dropdownInput); + cy.get(formWidgetsPage.labelvalue).should("have.text", "TestD"); cy.get(formWidgetsPage.dropdownSelectionType) - .find(".bp3-button") + .find(commonlocators.dropdownbuttonclick) .click({ force: true }) - .get("ul.bp3-menu") + .get(commonlocators.dropdownmenu) .children() .contains("Multi Select") .click(); cy.get(formWidgetsPage.dropdownSelectionType) - .find(".bp3-button > .bp3-button-text") + .find(commonlocators.menuSelection) .should("have.text", "Multi Select"); - cy.get(commonlocators.editPropCrossButton).click(); + /** + * @param{Show Alert} Css for InputChange + */ + cy.getAlert(commonlocators.optionchangetextDropdown); + cy.get(formWidgetsPage.dropdownInput).click({ force: true }); + cy.get(formWidgetsPage.dropdownInput).type("Option"); + cy.dropdownDynamic("Option 1"); }); afterEach(() => { diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js index 0dca03bb01..914461bfae 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FormWidget_spec.js @@ -1,4 +1,5 @@ const commonlocators = require("../../../locators/commonlocators.json"); +const formWidgetsPage = require("../../../locators/FormWidgets.json"); const dsl = require("../../../fixtures/formdsl.json"); describe("Form Widget Functionality", function() { @@ -7,10 +8,30 @@ describe("Form Widget Functionality", function() { }); it("Form Widget Functionality", function() { cy.openPropertyPane("formwidget"); - - //Checking the edit props for Form and also the properties of Form widget - cy.testCodeMirror("Gray"); - + /** + * @param{Text} Random Text + * @param{FormWidget}Mouseover + * @param{FormPre Css} Assertion + */ + cy.widgetText( + "FormTest", + formWidgetsPage.formWidget, + formWidgetsPage.formInner, + ); + /** + * @param{Text} Random Colour + */ + cy.testCodeMirror(this.data.colour); + cy.get(formWidgetsPage.formD) + .should("have.css", "background-color") + .and("eq", "rgb(255, 0, 0)"); + /** + * @param{toggleButton Css} Assert to be checked + */ + cy.togglebar(commonlocators.scrollView); + cy.get(formWidgetsPage.formD) + .scrollTo("bottom") + .should("be.visible"); cy.get(commonlocators.editPropCrossButton).click(); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js index 033a5c6e20..c6e6d9cca8 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/Radio_spec.js @@ -8,21 +8,65 @@ describe("Radio Widget Functionality", function() { }); it("Radio Widget Functionality", function() { cy.openPropertyPane("radiogroupwidget"); - - //Checking the edit props for Radio Widget and also the properties of Radio widget - cy.testCodeMirror("Test Radio"); + /** + * @param{Text} Random Text + * @param{RadioWidget}Mouseover + * @param{RadioPre Css} Assertion + */ + cy.widgetText( + "radiotest", + formWidgetsPage.radioWidget, + formWidgetsPage.radioInput, + ); + /** + * @param{Text} Random Colour + */ + cy.testCodeMirror(this.data.radioInputName); + cy.get(formWidgetsPage.labelradio) + .eq(0) + .should("have.text", "Test Radio"); + /** + * @param{IndexValue} Provide Input Index Value + * @param{Text} Index Text Value. + * + */ + cy.radioInput(0, this.data.radio1); + cy.get(formWidgetsPage.labelradio) + .eq(1) + .should("have.text", "test1"); + cy.radioInput(1, "1"); + cy.radioInput(2, this.data.radio2); + cy.get(formWidgetsPage.labelradio) + .eq(2) + .should("have.text", "test2"); + cy.radioInput(3, "2"); + cy.radioInput(4, this.data.radio3); + cy.get(formWidgetsPage.labelradio) + .eq(3) + .should("have.text", "test3"); + cy.radioInput(5, "3"); + cy.get(formWidgetsPage.radioAddButton).click({ force: true }); + cy.radioInput(6, this.data.radio4); + cy.get(formWidgetsPage.labelradio) + .eq(4) + .should("have.text", "test4"); + cy.get(formWidgetsPage.deleteradiovalue) + .eq(3) + .click({ force: true }); + cy.get(formWidgetsPage.labelradio).should("not.have.value", "test4"); + /** + * @param{Show Alert} Css for InputChange + */ + cy.getAlert(commonlocators.optionchangeRadioselect); + cy.get(formWidgetsPage.defaultSelect); cy.get(formWidgetsPage.radioOnSelectionChangeDropdown) .get(commonlocators.dropdownSelectButton) .click({ force: true }) - .get("ul.bp3-menu") - .children() - .contains("Navigate To") - .click(); - cy.get(formWidgetsPage.radioOnSelectionChangeDropdown) - .get(commonlocators.dropdownSelectButton) - .find("> .bp3-button-text") - .should("have.text", "Navigate To"); - cy.get(commonlocators.editPropCrossButton).click(); + .type(this.data.command) + .type("2"); + cy.get(formWidgetsPage.labelradio) + .eq(3) + .click({ force: true }); }); afterEach(() => { diff --git a/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/Tab_spec.js b/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/Tab_spec.js new file mode 100644 index 0000000000..61421cf2ef --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/LayoutWidgets/Tab_spec.js @@ -0,0 +1,47 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const Layoutpage = require("../../../locators/Layout.json"); +const widgetsPage = require("../../../locators/Widgets.json"); +const dsl = require("../../../fixtures/layoutdsl.json"); + +describe("Tab widget test", function() { + beforeEach(() => { + cy.addDsl(dsl); + }); + it("Tab Widget Functionality Test", function() { + cy.openPropertyPane("tabswidget"); + /** + * @param{Text} Random Text + * @param{TabWidget}Mouseover + * @param{TabPre Css} Assertion + */ + cy.widgetText("tab", Layoutpage.tabWidget, Layoutpage.tabInput); + /** + * @param{IndexValue} Provide input Index Value + * @param{Text} Provide Index Text Value + */ + cy.tabVerify(0, "Aditya"); + cy.tabVerify(1, "test"); + //Default tab selection and validation + cy.get(Layoutpage.tabDefault) + .type(this.data.command) + .type("test"); + cy.get(Layoutpage.tabWidget) + .contains("test") + .click({ force: true }) + .should("be.visible"); + /** + * @param{toggleButton Css} Assert to be checked + */ + cy.togglebar(widgetsPage.Scrollbutton) + .check({ force: true }) + .should("be.checked"); + cy.get(Layoutpage.tabContainer) + .scrollIntoView({ easing: "linear" }) + .should("be.visible"); + cy.get(commonlocators.crossbutton).click({ force: true }); + }); + + afterEach(() => { + // put your clean up code if any + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js index 89e3025c06..df65dfc326 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js @@ -9,18 +9,59 @@ describe("Chart Widget Functionality", function() { it("Chart Widget Functionality", function() { cy.openPropertyPane("chartwidget"); - //Checking the edit props for Chart and also the properties of Chart widget - cy.testCodeMirror("App Sign Up"); - cy.get(viewWidgetsPage.chartSelectChartType) - .find(".bp3-button") + + /** + * @param{Text} Random Text + * @param{ChartWidget}Mouseover + * @param{ChartPre Css} Assertion + */ + cy.widgetText( + "Test", + viewWidgetsPage.chartWidget, + commonlocators.containerInnerText, + ); + /** + * @param{Text} Random Input Value + */ + cy.testCodeMirror(this.data.chartIndata); + cy.get(viewWidgetsPage.chartInnerText) + .contains("App Sign Up") + .should("have.text", "App Sign Up"); + + cy.get(viewWidgetsPage.chartType) + .find(commonlocators.dropdownbuttonclick) .click({ force: true }) - .get("ul.bp3-menu") + .get(commonlocators.dropdownmenu) .children() - .contains("Bar Chart") + .contains("Column Chart") .click(); - cy.get(viewWidgetsPage.chartSelectChartType) - .find(".bp3-button > .bp3-button-text") - .should("have.text", "Bar Chart"); + cy.get(viewWidgetsPage.chartType) + .find(commonlocators.menuSelection) + .should("have.text", "Column Chart"); + cy.get(viewWidgetsPage.chartWidget) + .should("be.visible") + .and(chart => { + expect(chart.height()).to.be.greaterThan(200); + }); + cy.get(viewWidgetsPage.chartWidget).should("have.css", "opacity", "1"); + const labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; + [0, 1, 2, 3, 4, 5, 6].forEach(k => { + cy.get(viewWidgetsPage.rectangleChart) + .eq(k) + .trigger("mousemove", { force: true }); + cy.get(viewWidgetsPage.Chartlabel) + .eq(k) + .should("have.text", labels[k]); + }); + cy.get(viewWidgetsPage.xlabel) + .click({ force: true }) + .type(this.data.command) + .type(this.data.plan); + cy.get(viewWidgetsPage.ylabel) + .click({ force: true }) + .type(this.data.command) + .type(this.data.ylabel); + //Close edit prop cy.get(commonlocators.editPropCrossButton).click(); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js index 029e8cb935..0641894410 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Image_spec.js @@ -9,10 +9,27 @@ describe("Image Widget Functionality", function() { it("Image Widget Functionality", function() { cy.openPropertyPane("imagewidget"); - //Checking the edit props for Image and also the properties of Image widget - cy.testCodeMirror( - "https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", + /** + * @param{Text} Random Text + * @param{ImageWidget}Mouseover + * @param{ImagePre Css} Assertion + */ + cy.widgetText( + "img", + viewWidgetsPage.imageWidget, + viewWidgetsPage.imagecontainer, ); + cy.get(viewWidgetsPage.defaultImage) + .click({ force: true }) + .type(this.data.command) + .type(this.data.defaultimage); + /** + * @param{URL} ImageUrl + */ + cy.testCodeMirror(this.data.NewImage); + cy.get(viewWidgetsPage.imageinner) + .invoke("attr", "src") + .should("contain", this.data.validateImage); cy.get(commonlocators.editPropCrossButton).click(); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Map_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Map_spec.js new file mode 100644 index 0000000000..c3c8f38153 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Map_spec.js @@ -0,0 +1,55 @@ +const commonlocators = require("../../../locators/commonlocators.json"); +const viewWidgetsPage = require("../../../locators/ViewWidgets.json"); +const dsl = require("../../../fixtures/Mapdsl.json"); + +describe("Map Widget Functionality", function() { + beforeEach(() => { + cy.addDsl(dsl); + }); + it("Map Widget Functionality", function() { + cy.openPropertyPane("mapwidget"); + /** + * @param{Text} Random Text + * @param{MapWidget}Mouseover + * @param{MapPre Css} Assertion + */ + cy.widgetText( + "Maptest", + viewWidgetsPage.mapWidget, + viewWidgetsPage.mapInner, + ); + cy.get(viewWidgetsPage.mapinitialloc) + .click({ force: true }) + .clear() + .type(this.data.country) + .type("{enter}"); + cy.get(viewWidgetsPage.mapInput) + .click({ force: true }) + .type(this.data.command) + .type(JSON.stringify(this.data.marker), { + parseSpecialCharSequences: false, + }); + cy.get(viewWidgetsPage.zoomLevel) + .eq(0) + .click({ force: true }); + cy.get(viewWidgetsPage.zoomLevel) + .eq(1) + .click({ force: true }); + /** + * @param{Show Alert} Css for InputChange + */ + cy.getAlert(commonlocators.mapOptionChange); + cy.get(viewWidgetsPage.mapSearch).should("be.visible"); + cy.get(viewWidgetsPage.mapSearch) + .invoke("attr", "placeholder") + .should("contain", "Enter location to search"); + cy.get(viewWidgetsPage.mapSearch) + .click({ force: true }) + .clear() + .type(this.data.location2) + .type("{enter}"); + }); + afterEach(() => { + // put your clean up code if any + }); +}); diff --git a/app/client/cypress/locators/ApiEditor.json b/app/client/cypress/locators/ApiEditor.json index 3ae8fd7d0d..1d5244da53 100644 --- a/app/client/cypress/locators/ApiEditor.json +++ b/app/client/cypress/locators/ApiEditor.json @@ -11,5 +11,6 @@ "addToPageBtnsId": ".t--addToPageButtons", "ApiHomePage": ".t--apiHomePage", "formActionButtons": ".t--formActionButtons", - "dataSourceField": ".t--dataSourceField" + "dataSourceField": ".t--dataSourceField", + "responseBody":".CodeMirror-code span.cm-string.cm-property" } diff --git a/app/client/cypress/locators/FormWidgets.json b/app/client/cypress/locators/FormWidgets.json index fdcef1d862..fc4201c470 100644 --- a/app/client/cypress/locators/FormWidgets.json +++ b/app/client/cypress/locators/FormWidgets.json @@ -4,9 +4,24 @@ "dropdownSelectionType": ".t--property-control-selectiontype", "radioWidget": ".t--draggable-radiogroupwidget", "radioOnSelectionChangeDropdown": ".t--property-control-onselectionchange", - "datepickerWidget":".t--draggable-datepickerwidget", - "filepickerWidget":".t--draggable-filepickerwidget", - "formWidget":".t--draggable-formwidget", - "richTextEditorWidget":".t--draggable-richtexteditorwidget", - "richEditorOnTextChange":".t--property-control-ontextchange" -} \ No newline at end of file + "nextDayBtn": ".DayPicker-Day[aria-selected='true'] + div.DayPicker-Day", + "datepickerWidget": ".t--draggable-datepickerwidget", + "filepickerWidget": ".t--draggable-filepickerwidget", + "formWidget": ".t--draggable-formwidget", + "richTextEditorWidget": ".t--draggable-richtexteditorwidget", + "richEditorOnTextChange": ".t--property-control-ontextchange", + "optionvalue": ".t--property-control-defaultselectedvalue .kDwnRc", + "defselected": ".CodeMirror textarea", + "dropdowninner": ".bp3-button > .bp3-button-text", + "Textinput": ".t--property-control-options .CodeMirror textarea", + "labelvalue": ".t--draggable-dropdownwidget label", + "dropdownInput": ".bp3-tag-input-values", + "labelradio": ".t--draggable-radiogroupwidget label", + "deleteradiovalue": ".t--property-control-options mask", + "inputRadio": ".t--draggable-radiogroupwidget input", + "defaultSelect": ".t--property-control-defaultselectedvalue .CodeMirror-code", + "formInner": ".t--draggable-formwidget pre", + "radioInput": ".t--draggable-radiogroupwidget pre", + "radioAddButton": ".t--property-control-options button", + "formD": "div[type='FORM_WIDGET']" + } \ No newline at end of file diff --git a/app/client/cypress/locators/Layout.json b/app/client/cypress/locators/Layout.json new file mode 100644 index 0000000000..da4dfd643c --- /dev/null +++ b/app/client/cypress/locators/Layout.json @@ -0,0 +1,9 @@ +{ + "tabWidget": ".t--draggable-tabswidget", + "tabInput": ".t--draggable-tabswidget pre", + "tabName": ".t--property-control-tabs input", + "tabDefault": ".t--property-control-defaulttab .CodeMirror-code", + "tabButton": ".t--property-control-tabs button", + "tabDelete": ".t--property-control-tabs mask", + "tabContainer": "div[type='TABS_WIDGET']" +} \ No newline at end of file diff --git a/app/client/cypress/locators/ViewWidgets.json b/app/client/cypress/locators/ViewWidgets.json index 77e26eed8d..242824e97c 100644 --- a/app/client/cypress/locators/ViewWidgets.json +++ b/app/client/cypress/locators/ViewWidgets.json @@ -1,5 +1,31 @@ { "imageWidget": ".t--draggable-imagewidget", "chartWidget": ".t--draggable-chartwidget", - "chartSelectChartType": ".t--property-control-charttype" -} + "chartType": ".t--property-control-charttype", + "destin": ".appsmith_widget_01ewdomru7", + "mapWidget": ".t--draggable-mapwidget", + "dropdownSelectButton": ".t--open-dropdown-Select", + "dismissbutton": ".dismissButton", + "search": "input[placeholder='Enter location']", + "enablesearch": ".t--property-control-enablesearchlocation input", + "enablepicklocation": ".t--property-control-enablepicklocation input", + "enablecreatemarker": ".t--property-control-createnewmarker input", + "zoom": ".t--property-control-zoomable input", + "searchloc": "input[placeholder='Enter location to search']", + "imagecontainer": ".t--draggable-imagewidget pre", + "imageinner": ".t--draggable-imagewidget img", + "chartInnerText": ".t--draggable-chartwidget text", + "inputChartValue": ".t--property-control-chartdata .CodeMirror textarea", + "chartButton": ".t--property-control-chartdata button", + "rectangleChart": ".t--draggable-chartwidget g rect", + "xlabel": ".t--property-control-x-axislabel .CodeMirror-code", + "ylabel": ".t--property-control-y-axislabel .CodeMirror-code", + "mapInner": ".t--draggable-mapwidget pre", + "mapInput": ".t--property-control-defaultmarkers .CodeMirror-code", + "mapinitialloc": ".t--property-control-initiallocation input", + "mapSearch": ".t--draggable-mapwidget input", + "createMarker": ".t--property-control-createnewmarker [type='checkbox']", + "zoomLevel": ".t--property-control-zoomlevel svg", + "defaultImage": ".t--property-control-defaultimage .CodeMirror-code", + "Chartlabel": ".t--draggable-chartwidget g:nth-child(5) text" +} \ No newline at end of file diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 0a6e9058b2..f3411e687a 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -1,16 +1,37 @@ { - "containerWidget":".t--draggable-containerwidget", - "inputWidget":".t--draggable-inputwidget", - "togglebutton":"input[type='checkbox']", - "inputPropsDataType":".t--property-control-datatype", - "inputdatatypeplaceholder":".t--property-control-placeholder", - "buttonWidget":".t--draggable-buttonwidget", - "textWidget":".t--draggable-textwidget", - "tableWidget":".t--draggable-tablewidget", - "tableOnRowSelected":".t--property-control-onrowselected", - "dropdownSelectButton":".t--open-dropdown-Select", + "containerWidget": ".t--draggable-containerwidget", + "inputWidget": ".t--draggable-inputwidget", + "togglebutton": "input[type='checkbox']", + "inputPropsDataType": ".t--property-control-datatype", + "inputdatatypeplaceholder": ".t--property-control-placeholder", + "buttonWidget": ".t--draggable-buttonwidget", + "textWidget": ".t--draggable-textwidget", + "tableWidget": ".t--draggable-tablewidget", + "tableOnRowSelected": ".t--property-control-onrowselected", + "dropdownSelectButton": ".t--open-dropdown-Select", "buttonOnClick": ".t--property-control-onclick", - "deleteWidget":".t--modal-widget>div .t--widget-delete-control", - "textbuttonWidget":".t--draggable-buttonwidget button.bp3-button[type='button']" - + "Scrollbutton": ".t--property-control-scrollcontents input", + "label": ".t--draggable-inputwidget label", + "inputval": ".t--draggable-inputwidget pre", + "dataclass": "'.bp3-input", + "datatype": ".t--property-control-datatype", + "innertext": ".t--draggable-inputwidget input", + "defaultinput": ".t--property-control-defaultinput", + "requiredjs": ".t--property-control-required input", + "visible": ".t--property-control-visible input", + "disable": ".t--property-control-disabled", + "menubar": ".bp3-menu", + "menupop": ".bp3-popover", + "defaultcheck": ".t--property-control-defaultselected input", + "indicator": ".bp3-checkbox", + "Regex": ".t--property-control-regex .CodeMirror-lines", + "RadioInput": ".t--property-control-options input", + "checkboxInput": ".t--draggable-checkboxwidget pre", + "checkboxLabel": ".t--draggable-checkboxwidget label", + "containerD": "div[type='CONTAINER_WIDGET']", + "defaultInput": ".t--property-control-defaultinput .CodeMirror-code", + "placeholder": ".t--property-control-placeholder .CodeMirror-code", + "inputButtonPos": ".t--draggable-inputwidget button", + "deleteWidget": ".t--modal-widget>div .t--widget-delete-control", + "textbuttonWidget": ".t--draggable-buttonwidget button.bp3-button[type='button']" } \ No newline at end of file diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index 4b48c96a7a..3baff1cc5d 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -1,17 +1,36 @@ { - "editIcon":".t--widget-propertypane-toggle", - "editPropCrossButton":".t--property-pane-close-btn", - "deleteWidgetIcon":".t--widget-delete-control", - "dropdownSelectButton":".t--open-dropdown-Select-Action", - "homeIcon":".bp3-icon.bp3-icon-home", - "typeWidgetName":".bp3-editable-text-editing>input", - "requiredCheckbox":".t--property-control-required input[type='checkbox']", - "visibleCheckbox":".t--property-control-visible input[type='checkbox']", - "disableCheckbox":".t--property-control-disabled input[type='checkbox']", - "labelTextStyle":".bp3-ui-text span", - "bodyTextStyle":".bp3-running-text span", - "headingTextStyle":".bp3-heading span", - "editWidgetName":".bp3-editable-text", - "dropDownIcon":".t--property-control-textstyle span.bp3-icon-chevron-down" + "editIcon": ".t--widget-propertypane-toggle", + "editPropCrossButton": ".t--property-pane-close-btn", + "deleteWidgetIcon": ".t--widget-delete-control", + "dropdownSelectButton": ".t--open-dropdown-Select-Action", + "crossbutton": ".t--property-pane-close-btn", + "dropdownAction": ".t--open-dropdown-Select-Action", + "datatypedropdown": ".t--property-control-datatype button", + "Alerttypedropdown": ".t--open-dropdown-Select-type", + "dropdownmenu": "ul.bp3-menu", + "containerInnerText": ".t--draggable-containerwidget pre", + "optionchangetextDropdown": " .t--property-control-onoptionchange .CodeMirror-code", + "optionchangetextCheckbox": ".t--property-control-oncheckchange .CodeMirror-code", + "optionchangetextInput": ".t--property-control-ontextchanged .CodeMirror-code", + "optionchangeRadioselect": ".t--property-control-onselectionchange .CodeMirror-code", + "onMarkerclick": ".t--property-control-onmarkerclick .CodeMirror-code", + "success": "div[type='success']", + "mapOptionChange": ".t--property-control-onmarkerclick .CodeMirror-code", + "dropdownbuttonclick": ".bp3-button", + "menuSelection": ".bp3-button > .bp3-button-text", + "scrollView": ".t--property-control-scrollcontents input", + "InputforText": ".t--property-control-text .CodeMirror-code", + "TextInside": ".bp3-ui-text span", + "homeIcon": ".bp3-icon.bp3-icon-home", + "typeWidgetName": ".bp3-editable-text-editing>input", + "requiredCheckbox": ".t--property-control-required input[type='checkbox']", + "visibleCheckbox": ".t--property-control-visible input[type='checkbox']", + "disableCheckbox": ".t--property-control-disabled input[type='checkbox']", + "labelTextStyle": ".bp3-ui-text span", + "bodyTextStyle": ".bp3-running-text span", + "headingTextStyle": ".bp3-heading span", + "editWidgetName": ".bp3-editable-text", + "dropDownIcon": ".t--property-control-textstyle span.bp3-icon-chevron-down", + "onDateSelectedField":".t--property-control-ondateselected" } \ No newline at end of file diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 3071fbd716..9db1760254 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -7,6 +7,7 @@ const commonlocators = require("../locators/commonlocators.json"); const queryEditor = require("../locators/QueryEditor.json"); const modalWidgetPage = require("../locators/ModalWidget.json"); const widgetsPage = require("../locators/Widgets.json"); +const LayoutPage = require("../locators/Layout.json"); const formWidgetsPage = require("../locators/FormWidgets.json"); const ApiEditor = require("../locators/ApiEditor.json"); const apiwidget = require("../locators/apiWidgetslocator.json"); @@ -15,9 +16,9 @@ const headerkey = "(//pre//span)[3]"; const headervalue = "(//pre//span)[4]"; Cypress.Commands.add("CreateApp", appname => { - cy.get(homePage.CreateApp) - .contains("Create Application") - .click({ force: true }); + // cy.get(homePage.CreateApp) + cy.contains("Create New").click({ force: true }); + // .click({ force: true }); cy.get("form input").type(appname); cy.get(homePage.CreateApp) .contains("Submit") @@ -31,38 +32,6 @@ Cypress.Commands.add("CreateApp", appname => { cy.get("@getUser").should("have.property", "status", 200); }); -Cypress.Commands.add("DeleteApp", appName => { - cy.get(commonlocators.homeIcon).click({ force: true }); - cy.wait("@applications"); - cy.get(homePage.searchInput) - .focus() - .type(appName); - cy.wait(2000); - cy.get(homePage.appMoreIcon) - .first() - .click({ force: true }); - cy.get(homePage.deleteButton).click({ force: true }); - //following code was added as it was failing intermitently - /* - cy.get(homePage.selectAction).should("be.visible"); - cy.get(homePage.selectAction).click({ force: true }); - cy.get(homePage.deleteApp).should("be.visible"); - cy.get(homePage.deleteApp).click({ force: true }); - cy.wait("@deleteApp"); - cy.wait("@deleteApp").should( - "have.nested.property", - "response.body.responseMeta.status", - 200, - ); - cy.wait("@getPagesForApp"); - cy.wait("@applications").should( - "have.nested.property", - "response.body.responseMeta.status", - 200, - ); - */ -}); - Cypress.Commands.add("LogintoApp", (uname, pword) => { cy.visit("/user/login"); cy.get(loginPage.username).should("be.visible"); @@ -75,6 +44,11 @@ Cypress.Commands.add("LogintoApp", (uname, pword) => { 200, ); }); +Cypress.Commands.add("LogOut", () => { + cy.request("POST", "/api/v1/logout").then(response => { + expect(response.status).equal(200); + }); +}); Cypress.Commands.add("NavigateToWidgets", pageName => { cy.get(pages.pagesIcon).click({ force: true }); @@ -366,7 +340,6 @@ Cypress.Commands.add("testCodeMirror", value => { .clear({ force: true, }); - // cy.wait("@updateLayout"); } cy.get(".CodeMirror textarea") @@ -375,21 +348,36 @@ Cypress.Commands.add("testCodeMirror", value => { force: true, parseSpecialCharSequences: false, }); - // cy.wait("@updateLayout"); cy.get(".CodeMirror textarea") .first() .should("have.value", value); }); }); +Cypress.Commands.add("testJsontext", (endp, value) => { + cy.get(".t--property-control-" + endp + " .CodeMirror textarea") + .first() + .focus({ force: true }) + .type("{uparrow}", { force: true }) + .type("{ctrl}{shift}{downarrow}", { force: true }); + cy.focused().then($cm => { + if ($cm.val() !== "") { + cy.get(".CodeMirror textarea") + .first() + .clear({ + force: true, + }); + } + cy.get(".CodeMirror textarea") + .first() + .type(value, { + force: true, + parseSpecialCharSequences: false, + }); + }); +}); + Cypress.Commands.add("SetDateToToday", () => { - cy.get(formWidgetsPage.datepickerWidget) - .first() - .trigger("mouseover"); - cy.get(formWidgetsPage.datepickerWidget) - .children(commonlocators.editicon) - .first() - .click({ force: true }); cy.get(".t--property-control-defaultdate input").click(); cy.get(".bp3-datepicker-footer span") .contains("Today") @@ -437,25 +425,19 @@ Cypress.Commands.add("addDsl", dsl => { let currentURL; let pageid; let layoutId; - // cy.Createpage("TestDsl") - - // Extracting the Page id from the Url cy.url().then(url => { currentURL = url; const myRegexp = /pages(.*)/; const match = myRegexp.exec(currentURL); pageid = match[1].split("/")[1]; cy.log(pageid + "page id"); - //Fetch the layout id cy.server(); cy.request("GET", "api/v1/pages/" + pageid).then(response => { const len = JSON.stringify(response.body); cy.log(len); layoutId = JSON.parse(len).data.layouts[0].id; - // Dumpimg the DSL to the created page - cy.request( "PUT", "api/v1/layouts/" + layoutId + "/pages/" + pageid, @@ -482,6 +464,77 @@ Cypress.Commands.add("DeleteAppByApi", () => { }); }); }); +Cypress.Commands.add("togglebar", value => { + cy.get(value) + .check({ force: true }) + .should("be.checked"); +}); +Cypress.Commands.add("radiovalue", (value, value2) => { + cy.get(value) + .click() + .clear() + .type(value2); +}); +Cypress.Commands.add("optionValue", (value, value2) => { + cy.get(value) + .click() + .clear() + .type(value2); +}); +Cypress.Commands.add("dropdownDynamic", text => { + cy.wait(2000); + cy.get("ul[class='bp3-menu']") + .first() + .contains(text) + .click({ force: true }) + .should("have.text", text); +}); + +Cypress.Commands.add("getAlert", alertcss => { + cy.get(commonlocators.dropdownSelectButton).click({ force: true }); + cy.get(widgetsPage.menubar) + .contains("Show Alert") + .click({ force: true }) + .should("have.text", "Show Alert"); + + cy.get(alertcss) + .click({ force: true }) + .type("{command}{A}{del}") + .type("hello") + .should("not.to.be.empty"); + cy.get(".t--open-dropdown-Select-type").click({ force: true }); + cy.get(".bp3-popover-content .bp3-menu li") + .contains("Success") + .click({ force: true }); +}); +Cypress.Commands.add("widgetText", (text, inputcss, innercss) => { + cy.get(commonlocators.editWidgetName) + .dblclick({ force: true }) + .type(text) + .type("{enter}"); + cy.get(inputcss) + .first() + .trigger("mouseover", { force: true }); + cy.get(innercss).should("have.text", text); +}); +Cypress.Commands.add("radioInput", (index, text) => { + cy.get(widgetsPage.RadioInput) + .eq(index) + .click() + .clear() + .type(text); +}); +Cypress.Commands.add("tabVerify", (index, text) => { + cy.get(".t--property-control-tabs input") + .eq(index) + .click({ force: true }) + .clear() + .type(text); + cy.get(LayoutPage.tabWidget) + .contains(text) + .click({ force: true }) + .should("be.visible"); +}); Cypress.Commands.add("NavigateToDatasourceEditor", () => { cy.get(datasourceEditor.datasourceEditorIcon).click({ force: true }); @@ -649,3 +702,71 @@ Cypress.Commands.add("openPropertyPane", widgetType => { .first() .click(); }); + +Cypress.Commands.add("createApi", (url, parameters) => { + cy.get("@createNewApi").then(response => { + cy.get(ApiEditor.ApiNameField).should("be.visible"); + cy.expect(response.response.body.responseMeta.success).to.eq(true); + cy.get(ApiEditor.ApiNameField).should( + "have.value", + response.response.body.data.name, + ); + }); + + cy.get(ApiEditor.dataSourceField).click(); + cy.contains(url).click({ + force: true, + }); + cy.get(".CodeMirror.CodeMirror-empty textarea") + .first() + .click({ force: true }) + .type(parameters, { force: true }); + cy.SaveAPI(); + cy.get(ApiEditor.formActionButtons).should("be.visible"); + cy.get(ApiEditor.ApiRunBtn).should("not.be.disabled"); +}); + +Cypress.Commands.add("isSelectRow", index => { + cy.get( + '.e-gridcontent.e-lib.e-droppable td[index="' + + index + + '"][aria-colindex="' + + index + + '"]', + ).click({ force: true }); +}); + +Cypress.Commands.add("readTabledata", (rowNum, colNum) => { + const selector = `.t--draggable-tablewidget .e-gridcontent.e-lib.e-droppable td[index=${rowNum}][aria-colindex=${colNum}]`; + const tabVal = cy.get(selector).invoke("text"); + return tabVal; +}); + +Cypress.Commands.add("getDate", (date, dateFormate) => { + const expDate = Cypress.moment() + .add(date, "days") + .format(dateFormate); + cy.log(date); + return expDate; +}); + +Cypress.Commands.add("setDate", (date, dateFormate) => { + const expDate = Cypress.moment() + .add(date, "days") + .format(dateFormate); + const sel = `.DayPicker-Day[aria-label=\"${expDate}\"]`; + cy.get(sel).click(); +}); + +Cypress.Commands.add("pageNo", index => { + cy.get(".e-pagercontainer a") + .eq(index) + .click({ force: true }) + .should("be.visible"); +}); + +Cypress.Commands.add("pageNoValidate", index => { + const data = '.e-numericcontainer a[index="' + index + '"]'; + const pageVal = cy.get(data); + return pageVal; +}); diff --git a/app/client/cypress/support/index.js b/app/client/cypress/support/index.js index 32be4a565c..03e4da6d60 100644 --- a/app/client/cypress/support/index.js +++ b/app/client/cypress/support/index.js @@ -103,10 +103,10 @@ beforeEach(function() { after(function() { // ---commenting Publish app and Delete page as of now--- // - //cy.Deletepage(pageid); //cy.PublishtheApp(); - //cy.DeleteApp(appId); //-- Deleting the application by Api---// cy.DeleteAppByApi(); + //-- LogOut Application---// + cy.LogOut(); }); diff --git a/app/client/docker/nginx-linux.conf b/app/client/docker/nginx-linux.conf index 024d2faf18..ca465a819c 100644 --- a/app/client/docker/nginx-linux.conf +++ b/app/client/docker/nginx-linux.conf @@ -10,6 +10,8 @@ server { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; location / { proxy_pass http://localhost:3000; @@ -17,11 +19,19 @@ server { location /api { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; proxy_pass https://release-api.appsmith.com; } location /oauth2 { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_pass https://release-api.appsmith.com; + } + + location /login { + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; proxy_pass https://release-api.appsmith.com; } @@ -41,6 +51,8 @@ server { proxy_ssl_server_name on; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; location / { proxy_pass http://localhost:3000; @@ -48,11 +60,19 @@ server { location /api { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; proxy_pass https://release-api.appsmith.com; } location /oauth2 { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_pass https://release-api.appsmith.com; + } + + location /login { + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; proxy_pass https://release-api.appsmith.com; } } diff --git a/app/client/docker/nginx-mac.conf b/app/client/docker/nginx-mac.conf index 5df1155b1e..7ddbe37121 100644 --- a/app/client/docker/nginx-mac.conf +++ b/app/client/docker/nginx-mac.conf @@ -17,14 +17,24 @@ server { location /api { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_pass https://release-api.appsmith.com; } location /oauth2 { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_pass https://release-api.appsmith.com; } + location /login { + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + + proxy_pass https://release-api.appsmith.com; + } } server { @@ -48,11 +58,21 @@ server { location /api { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; proxy_pass https://release-api.appsmith.com; } location /oauth2 { proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + + proxy_pass https://release-api.appsmith.com; + } + + location /login { + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Host $host; + proxy_pass https://release-api.appsmith.com; } } diff --git a/app/client/netlify.toml b/app/client/netlify.toml index 67a2676411..e0f566fe0f 100644 --- a/app/client/netlify.toml +++ b/app/client/netlify.toml @@ -7,43 +7,58 @@ [context.production.environment] REACT_APP_ENVIRONMENT = "PRODUCTION" REACT_APP_BASE_URL = "https://api.appsmith.com" + APP_HOST = "app.appsmith.com" [context.release] [context.release.environment] REACT_APP_ENVIRONMENT = "STAGING" REACT_APP_BASE_URL = "https://release-api.appsmith.com" + APP_HOST = "release.app.appsmith.com" [context.develop] [context.develop.environment] REACT_APP_ENVIRONMENT = "DEVELOPMENT" REACT_APP_BASE_URL = "https://release-api.appsmith.com" + APP_HOST = "develop.app.appsmith.com" [context.a] [context.a.environment] REACT_APP_ENVIRONMENT = "STAGING" REACT_APP_BASE_URL = "https://release-api.appsmith.com" + APP_HOST = "a.app.appsmith.com" [context.b] [context.b.environment] REACT_APP_ENVIRONMENT = "STAGING" REACT_APP_BASE_URL = "https://release-api.appsmith.com" + APP_HOST = "b.app.appsmith.com" [context.deploy-preview] [context.deploy-preview.environment] REACT_APP_ENVIRONMENT = "STAGING" REACT_APP_BASE_URL = "https://release-api.appsmith.com" + # Not adding an APP_HOST here because the URL is dynamic in nature and cannot be determined. [[redirects]] from = "/api/*" to = "API_PLACEHOLDER/api/:splat" status = 200 force = true + headers = { X-Forwarded-Host = "APP_HOST_PLACEHOLDER", X-Forwarded-Proto = "https" } [[redirects]] from = "/oauth2/*" to = "API_PLACEHOLDER/oauth2/:splat" status = 200 force = true + headers = { X-Forwarded-Host = "APP_HOST_PLACEHOLDER", X-Forwarded-Proto = "https" } + +[[redirects]] + from = "/login/*" + to = "API_PLACEHOLDER/login/:splat" + status = 200 + force = true + headers = { X-Forwarded-Host = "APP_HOST_PLACEHOLDER", X-Forwarded-Proto = "https" } # This must be the last redirect in the chain because it's a catch-all [[redirects]] diff --git a/app/client/src/actions/datasourceActions.ts b/app/client/src/actions/datasourceActions.ts index 2afa942ec9..f6044a47ea 100644 --- a/app/client/src/actions/datasourceActions.ts +++ b/app/client/src/actions/datasourceActions.ts @@ -22,6 +22,13 @@ export const updateDatasource = (payload: Datasource) => { }; }; +export const changeDatasource = (payload: Datasource) => { + return { + type: ReduxActionTypes.CHANGE_DATASOURCE, + payload, + }; +}; + export const testDatasource = (payload: Partial) => { return { type: ReduxActionTypes.TEST_DATASOURCE_INIT, diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx index 9ac522005b..b3ff617ec4 100644 --- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx +++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx @@ -68,6 +68,7 @@ class DatePickerComponent extends React.Component< componentDidUpdate(prevProps: DatePickerComponentProps) { if ( + this.props.selectedDate !== this.state.selectedDate && !moment(this.props.selectedDate).isSame( moment(prevProps.selectedDate), "seconds", @@ -145,7 +146,7 @@ class DatePickerComponent extends React.Component< }; onDateSelected = (selectedDate: Date) => { - const date = moment(selectedDate).toISOString(true); + const date = selectedDate ? moment(selectedDate).toISOString(true) : ""; this.setState({ selectedDate: date }); this.props.onDateSelected(date); }; diff --git a/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx b/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx index 743e06863c..cd7472b06d 100644 --- a/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx +++ b/app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx @@ -663,7 +663,7 @@ function useApiOptionTree() { const apiName = createNewApiName(actions, pageId); if (setter) { setter({ - value: `${apiName}.run`, + value: `${apiName}`, type: ActionType.api, }); dispatch(createNewApiAction(pageId)); diff --git a/app/client/src/components/formControls/KeyValueArrayControl.tsx b/app/client/src/components/formControls/KeyValueArrayControl.tsx index fa53a7f572..d9eb2757ec 100644 --- a/app/client/src/components/formControls/KeyValueArrayControl.tsx +++ b/app/client/src/components/formControls/KeyValueArrayControl.tsx @@ -27,9 +27,9 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => { let isRequired: boolean | undefined; useEffect(() => { - // Always maintain 2 rows - if (props.fields.length < 2) { - for (let i = props.fields.length; i < 2; i += 1) { + // Always maintain 1 row + if (props.fields.length < 1) { + for (let i = props.fields.length; i < 1; i += 1) { props.fields.push({ [keyName[1]]: "", [valueName[1]]: "" }); } } diff --git a/app/client/src/components/formControls/KeyValueInputControl.tsx b/app/client/src/components/formControls/KeyValueInputControl.tsx index 7c0c3b675a..2380198cb0 100644 --- a/app/client/src/components/formControls/KeyValueInputControl.tsx +++ b/app/client/src/components/formControls/KeyValueInputControl.tsx @@ -18,24 +18,14 @@ const FormRowWithLabel = styled.div` const KeyValueRow = (props: Props & WrappedFieldArrayProps) => { useEffect(() => { - // Always maintain 2 rows - if (props.fields.length < 2) { - for (let i = props.fields.length; i < 2; i += 1) { + // Always maintain 1 row + if (props.fields.length < 1) { + for (let i = props.fields.length; i < 1; i += 1) { props.fields.push({ key: "", value: "" }); } } }, [props.fields]); - useEffect(() => { - if (typeof props.fields.getAll() === "string") { - const fieldsValue: [] = JSON.parse(`${props.fields.getAll()}`); - props.fields.removeAll(); - fieldsValue.forEach((value, index) => { - props.fields.insert(index, value); - }); - } - }, [props.fields]); - return (
{typeof props.fields.getAll() === "object" && ( diff --git a/app/client/src/components/propertyControls/DatePickerControl.tsx b/app/client/src/components/propertyControls/DatePickerControl.tsx index 25862437f3..d8fb165eaa 100644 --- a/app/client/src/components/propertyControls/DatePickerControl.tsx +++ b/app/client/src/components/propertyControls/DatePickerControl.tsx @@ -70,11 +70,9 @@ class DatePickerControl extends BaseControl< } onDateSelected = (date: Date): void => { - this.setState({ selectedDate: moment(date).toISOString(true) }); - this.updateProperty( - this.props.propertyName, - moment(date).toISOString(true), - ); + const selectedDate = date ? moment(date).toISOString(true) : ""; + this.setState({ selectedDate: selectedDate }); + this.updateProperty(this.props.propertyName, selectedDate); }; formatDate = (date: Date): string => { diff --git a/app/client/src/configs/prod.config.ts b/app/client/src/configs/prod.config.ts index 92085575c4..82f2e039c9 100644 --- a/app/client/src/configs/prod.config.ts +++ b/app/client/src/configs/prod.config.ts @@ -4,6 +4,7 @@ import { HOTJAR_PROD_HJSV, } from "constants/ThirdPartyConstants"; import { AppsmithUIConfigs } from "./types"; +import { FeatureFlagEnum } from "utils/featureFlags"; export const prodConfig = (baseUrl: string): AppsmithUIConfigs => ({ sentry: { @@ -24,7 +25,11 @@ export const prodConfig = (baseUrl: string): AppsmithUIConfigs => ({ apiUrl: "/api/", baseUrl, logLevel: "error", - featureFlags: [], + featureFlags: [ + FeatureFlagEnum.ApiPaneV2, + FeatureFlagEnum.DatasourcePane, + FeatureFlagEnum.QueryPane, + ], }); export default prodConfig; diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 13d2056eef..534a964a51 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -67,9 +67,12 @@ export const ReduxActionTypes: { [key: string]: string } = { CREATE_DATASOURCE_FROM_FORM_INIT: "CREATE_DATASOURCE_FROM_FORM_INIT", UPDATE_DATASOURCE_INIT: "UPDATE_DATASOURCE_INIT", UPDATE_DATASOURCE_SUCCESS: "UPDATE_DATASOURCE_SUCCESS", + CHANGE_DATASOURCE: "CHANGE_DATASOURCE", SELECT_PLUGIN: "SELECT_PLUGIN", TEST_DATASOURCE_INIT: "TEST_DATASOURCE_INIT", TEST_DATASOURCE_SUCCESS: "TEST_DATASOURCE_SUCCESS", + DELETE_DATASOURCE_DRAFT: "DELETE_DATASOURCE_DRAFT", + UPDATE_DATASOURCE_DRAFT: "UPDATE_DATASOURCE_DRAFT", FETCH_PUBLISHED_PAGE_INIT: "FETCH_PUBLISHED_PAGE_INIT", FETCH_PUBLISHED_PAGE_SUCCESS: "FETCH_PUBLISHED_PAGE_SUCCESS", DELETE_DATASOURCE_INIT: "DELETE_DATASOURCE_INIT", diff --git a/app/client/src/pages/Applications/ApplicationCard.tsx b/app/client/src/pages/Applications/ApplicationCard.tsx index c3b19680b4..77f1a1d464 100644 --- a/app/client/src/pages/Applications/ApplicationCard.tsx +++ b/app/client/src/pages/Applications/ApplicationCard.tsx @@ -97,9 +97,14 @@ const ApplicationTitle = styled.div` top: ${props => props.theme.spaces[4]}px; cursor: pointer; } + .apptitle{ + white-space: nowrap; + width: 70%; + overflow: hidden; + text-overflow: ellipsis; + } } `; - const ApplicationImage = styled.div` && { height: 100%; @@ -131,7 +136,6 @@ const APPLICATION_CONTROL_FONTSIZE_INDEX = 6; type ApplicationCardProps = { application: ApplicationPayload; - loading: boolean; duplicate?: (applicationId: string) => void; share?: (applicationId: string) => void; delete?: (applicationId: string) => void; @@ -189,9 +193,8 @@ export const ApplicationCard = (props: ApplicationCardProps) => { return ( - {props.application.name} +
{props.application.name}
{hasEditPermission && ( diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx index 3d520b10df..0263578a2d 100644 --- a/app/client/src/pages/Applications/index.tsx +++ b/app/client/src/pages/Applications/index.tsx @@ -32,9 +32,16 @@ const ApplicationCardsWrapper = styled.div` flex-flow: row wrap; justify-content: flex-start; align-items: space-evenly; + font-size: ${props => props.theme.fontSizes[4]}px; `; -const Wrapper = styled(Card)` +const OrgName = styled.div` + font-size: ${props => props.theme.fontSizes[6]}px; + padding-top: ${props => props.theme.spaces[2]}px; + padding-left: ${props => props.theme.spaces[5]}px; +`; + +const ApplicationAddCardWrapper = styled(Card)` display: flex; flex-direction: column; justify-content: center; @@ -84,18 +91,6 @@ class Applications extends Component { ? AppToaster.show({ message: DELETING_APPLICATION }) : AppToaster.clear()} { - AnalyticsUtil.logEvent("CREATE_APP_CLICK", {}); - }, - }} search={{ placeholder: "Search", queryFn: this.props.searchApplications, @@ -110,18 +105,21 @@ class Applications extends Component { return ( <> -

{organization.name}

+ {organization.name} + + {hasCreateApplicationPemission && ( - + - +
Create New
+ } Form={CreateApplicationForm} title={"Create Application"} @@ -132,36 +130,18 @@ class Applications extends Component { application.pages?.length > 0 && ( ) ); })} + ); })} - {/* - Hello} - Form={CreateApplicationForm} - title={"Create Application"} - /> - {applicationList.map((application: ApplicationPayload) => { - return ( - application.pageCount > 0 && ( - - ) - ); - })} - */} + ); } diff --git a/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx b/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx index c4b9addb19..156bbf0f29 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx @@ -42,6 +42,7 @@ class Collapsible extends React.Component { render() { const { children, title } = this.props; + const { isOpen } = this.state; return ( <> @@ -57,7 +58,7 @@ class Collapsible extends React.Component { > {title} diff --git a/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx b/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx index fbc85aadf5..380545aa15 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx @@ -4,25 +4,31 @@ import { WrappedFieldInputProps } from "redux-form"; import Edit from "assets/images/EditPen.svg"; -const InputContainer = styled.div` +const InputContainer = styled.div<{ focused: boolean }>` align-items: center; display: flex; width: 300px; input { margin-left: 10px; font-size: 18px; - border: 0; + border: ${props => (props.focused ? 1 : 0)}; display: block; width: 100%; font-weight: 500; line-height: 24px; text-overflow: ellipsis; + :hover { + cursor: ${props => (props.focused ? "auto" : "pointer")}; + } } `; const EditPen = styled.img` height: 17px; width: 17px; + :hover { + cursor: pointer; + } `; interface FormTitleProps { @@ -32,7 +38,7 @@ interface FormTitleProps { interface FormTitleState { readOnly: boolean; - hideIcon: boolean; + focused: boolean; } class FormTitle extends React.Component { @@ -43,7 +49,7 @@ class FormTitle extends React.Component { this.state = { readOnly: false, - hideIcon: false, + focused: false, }; } @@ -59,13 +65,13 @@ class FormTitle extends React.Component { event.target.select(); }; - onFocus = (event: any) => { - event.target.select(); - this.setState({ hideIcon: true }); + onFocus = () => { + this.nameInput?.select(); + this.setState({ focused: true }); }; - onBlur = (e: any) => { - this.setState({ hideIcon: false }); + onBlur = () => { + this.setState({ focused: false }); }; onPressEnter = (event: any) => { @@ -75,10 +81,10 @@ class FormTitle extends React.Component { render() { const { input } = this.props; - const { hideIcon } = this.state; + const { focused } = this.state; return ( - + { this.nameInput = input; @@ -93,7 +99,9 @@ class FormTitle extends React.Component { onFocus={this.onFocus} onBlur={this.onBlur} /> - {!hideIcon && } + {!focused && ( + + )} ); } diff --git a/app/client/src/pages/Editor/DataSourceSidebar.tsx b/app/client/src/pages/Editor/DataSourceSidebar.tsx index 6131ff82a3..8a5f5c831e 100644 --- a/app/client/src/pages/Editor/DataSourceSidebar.tsx +++ b/app/client/src/pages/Editor/DataSourceSidebar.tsx @@ -16,6 +16,7 @@ import { initDatasourcePane, storeDatastoreRefs, deleteDatasource, + changeDatasource, } from "actions/datasourceActions"; import { ControlIcons } from "icons/ControlIcons"; import { theme } from "constants/DefaultTheme"; @@ -25,10 +26,7 @@ import ImageAlt from "assets/images/placeholder-image.svg"; import Postgres from "assets/images/Postgress.png"; import MongoDB from "assets/images/MongoDB.png"; import RestTemplateImage from "assets/images/RestAPI.png"; -import { - DATA_SOURCES_EDITOR_ID_URL, - DATA_SOURCES_EDITOR_URL, -} from "constants/routes"; +import { DATA_SOURCES_EDITOR_URL } from "constants/routes"; import { REST_PLUGIN_PACKAGE_NAME } from "constants/ApiEditorConstants"; import { PLUGIN_PACKAGE_POSTGRES, @@ -36,6 +34,7 @@ import { } from "constants/QueryEditorConstants"; import { AppState } from "reducers"; import { Datasource } from "api/DatasourcesApi"; +import Fuse from "fuse.js"; interface ReduxDispatchProps { initDatasourcePane: (pluginType: string, urlId?: string) => void; @@ -44,6 +43,7 @@ interface ReduxDispatchProps { storeDatastoreRefs: (refsList: []) => void; fetchFormConfig: (id: string) => void; deleteDatasource: (id: string) => void; + onDatasourceChange: (datasource: Datasource) => void; } interface ReduxStateProps { @@ -51,6 +51,7 @@ interface ReduxStateProps { plugins: Plugin[]; datastoreRefs: Record; formConfigs: Record; + drafts: Record; } type DataSourceSidebarProps = {}; @@ -172,6 +173,15 @@ const Container = styled.div` } `; +const DraftIconIndicator = styled.span<{ isHidden: boolean }>` + width: 8px; + height: 8px; + border-radius: 8px; + background-color: #f2994a; + margin: 0 5px; + opacity: ${({ isHidden }) => (isHidden ? 0 : 1)}; +`; + type Props = DataSourceSidebarProps & RouteComponentProps<{ pageId: string; @@ -181,6 +191,15 @@ type Props = DataSourceSidebarProps & ReduxStateProps & ReduxDispatchProps; +const FUSE_OPTIONS = { + shouldSort: true, + threshold: 0.5, + location: 0, + minMatchCharLength: 3, + findAllMatches: true, + keys: ["name"], +}; + class DataSourceSidebar extends React.Component { refsCollection: any; @@ -202,6 +221,13 @@ class DataSourceSidebar extends React.Component { storeDatastoreRefs(this.refsCollection); } + shouldComponentUpdate(nextProps: Readonly): boolean { + if (Object.keys(nextProps.drafts) !== Object.keys(this.props.drafts)) { + return true; + } + return nextProps.dataSources !== this.props.dataSources; + } + handleCreateNewDatasource = () => { const { history } = this.props; const { pageId, applicationId } = this.props.match.params; @@ -210,17 +236,7 @@ class DataSourceSidebar extends React.Component { }; handleItemSelected = (datasource: Datasource) => { - const { history, formConfigs } = this.props; - const { pageId, applicationId } = this.props.match.params; - - this.props.initializeForm(datasource); - this.props.selectPlugin(datasource.pluginId); - if (!formConfigs[datasource.pluginId]) { - this.props.fetchFormConfig(datasource.pluginId); - } - history.push( - DATA_SOURCES_EDITOR_ID_URL(applicationId, pageId, datasource.id), - ); + this.props.onDatasourceChange(datasource); }; handleSearchChange = (e: React.ChangeEvent<{ value: string }>) => { @@ -230,6 +246,13 @@ class DataSourceSidebar extends React.Component { }); }; + getSearchFilteredList = () => { + const { search } = this.state; + const { dataSources } = this.props; + const fuse = new Fuse(dataSources, FUSE_OPTIONS); + return search ? fuse.search(search) : dataSources; + }; + getImageSource = (pluginId: string) => { const { plugins } = this.props; const plugin = plugins.find(plugin => plugin.id === pluginId); @@ -246,16 +269,19 @@ class DataSourceSidebar extends React.Component { } }; - renderItem = (datasources: Datasource[]) => { + renderItem = () => { const { match: { params: { datasourceId }, }, datastoreRefs, deleteDatasource, + drafts, } = this.props; - return datasources.map(datasource => { + const filteredList = this.getSearchFilteredList(); + + return filteredList.map(datasource => { return ( { /> {datasource.name} + { @@ -300,7 +327,6 @@ class DataSourceSidebar extends React.Component { render() { const { search } = this.state; - const { dataSources } = this.props; const { match: { params: { datasourceId }, @@ -328,24 +354,28 @@ class DataSourceSidebar extends React.Component { onClick={this.handleCreateNewDatasource} /> - {this.renderItem(dataSources)} + {this.renderItem()} ); } } const mapStateToProps = (state: AppState): ReduxStateProps => { + const { drafts } = state.ui.datasourcePane; return { formConfigs: state.entities.plugins.formConfigs, dataSources: getDataSources(state), plugins: getPlugins(state), datastoreRefs: state.ui.datasourcePane.datasourceRefs, + drafts, }; }; const mapDispatchToProps = (dispatch: Function): ReduxDispatchProps => ({ initDatasourcePane: (pluginType: string, urlId?: string) => dispatch(initDatasourcePane(pluginType, urlId)), + onDatasourceChange: (datasource: Datasource) => + dispatch(changeDatasource(datasource)), fetchFormConfig: (id: string) => dispatch(fetchPluginForm({ id })), selectPlugin: (pluginId: string) => dispatch(selectPlugin(pluginId)), initializeForm: (data: Record) => diff --git a/app/client/src/pages/Editor/QueryEditor/Form.tsx b/app/client/src/pages/Editor/QueryEditor/Form.tsx index 983c6f3e99..18bd39582e 100644 --- a/app/client/src/pages/Editor/QueryEditor/Form.tsx +++ b/app/client/src/pages/Editor/QueryEditor/Form.tsx @@ -10,7 +10,6 @@ import { ColumnsDirective, ColumnDirective, } from "@syncfusion/ej2-react-grids"; -import ReactJson from "react-json-view"; import styled, { createGlobalStyle } from "styled-components"; import { Popover, Icon } from "@blueprintjs/core"; import { components, MenuListComponentProps } from "react-select"; @@ -29,8 +28,9 @@ import { Datasource } from "api/DatasourcesApi"; import { RestAction } from "api/ActionAPI"; import { QUERY_EDITOR_FORM_NAME } from "constants/forms"; import { PLUGIN_PACKAGE_POSTGRES } from "constants/QueryEditorConstants"; -import { Colors } from "constants/Colors"; import "@syncfusion/ej2-react-grids/styles/material.css"; +import { Colors } from "constants/Colors"; +import JSONViewer from "./JSONViewer"; const QueryFormContainer = styled.div` font-size: 20px; @@ -180,6 +180,10 @@ const StyledGridComponent = styled(GridComponent)` } `; +const ErrorMessage = styled.p` + font-size: 14px; + color: ${Colors.RED}; +`; const CreateDatasource = styled.div` height: 44px; display: flex; @@ -212,6 +216,7 @@ type QueryFormProps = { executedQueryData: any; applicationId: string; selectedPluginPackage: string; + runErrorMessage: string | undefined; pageId: string; location: { state: any; @@ -241,6 +246,7 @@ const QueryEditorForm: React.FC = (props: Props) => { selectedPluginPackage, createTemplate, isCreating, + runErrorMessage, } = props; const [showTemplateMenu, setMenuVisibility] = useState(true); @@ -446,6 +452,13 @@ const QueryEditorForm: React.FC = (props: Props) => { )} + {runErrorMessage && ( + <> +

Query error

+ {runErrorMessage} + + )} + {executedQueryData && dataSources.length && (

Query response

@@ -470,16 +483,7 @@ const QueryEditorForm: React.FC = (props: Props) => { ) : ( - + )} diff --git a/app/client/src/pages/Editor/QueryEditor/JSONViewer.tsx b/app/client/src/pages/Editor/QueryEditor/JSONViewer.tsx new file mode 100644 index 0000000000..43306d43f5 --- /dev/null +++ b/app/client/src/pages/Editor/QueryEditor/JSONViewer.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import ReactJson from "react-json-view"; +import styled from "styled-components"; +import { Card } from "@blueprintjs/core"; + +const OutputContainer = styled.div` + background: #f5f6f7; + border: 1px solid #d0d7dd; + box-sizing: border-box; + border-radius: 4px; + padding: 6px; +`; + +const Record = styled(Card)` + margin: 5px; +`; + +type JSONOutputProps = { + src: []; +}; + +type Props = JSONOutputProps; + +class JSONOutput extends React.Component { + render() { + const { src } = this.props; + const reactJsonProps = { + name: null, + enableClipboard: false, + displayObjectSize: false, + displayDataTypes: false, + style: { + fontSize: "14px", + }, + }; + + if (!src.length) { + return ( + + + + + + ); + } + + return ( + + {src.map((record, index) => { + return ( + + + + ); + })} + + ); + } +} + +export default JSONOutput; diff --git a/app/client/src/pages/Editor/QueryEditor/Templates.tsx b/app/client/src/pages/Editor/QueryEditor/Templates.tsx index b302520349..43841e514d 100644 --- a/app/client/src/pages/Editor/QueryEditor/Templates.tsx +++ b/app/client/src/pages/Editor/QueryEditor/Templates.tsx @@ -42,7 +42,7 @@ const Templates: Record = { create: `INSERT INTO users( id, name, gender, avatar, email, address, role) VALUES (?, ?, ?, ?, ?, ?, ?);`, - read: "SELECT * FROM users LIMIT 10 ORDER BY id", + read: "SELECT * FROM users ORDER BY id LIMIT 10", delete: `DELETE FROM users WHERE id=?`, update: `UPDATE users Set status='APPROVED' diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx index 0868762830..4480ad2a91 100644 --- a/app/client/src/pages/Editor/QueryEditor/index.tsx +++ b/app/client/src/pages/Editor/QueryEditor/index.tsx @@ -45,6 +45,7 @@ type QueryPageProps = { submitForm: (name: string) => void; createAction: (values: RestAction) => void; runAction: (action: RestAction, actionId: string) => void; + runErrorMessage: Record; deleteAction: (id: string) => void; updateAction: (data: RestAction) => void; createTemplate: (template: string) => void; @@ -91,6 +92,7 @@ class QueryEditor extends React.Component { selectedPluginPackage, apiPane, isCreating, + runErrorMessage, } = this.props; const { applicationId, pageId } = this.props.match.params; @@ -135,6 +137,7 @@ class QueryEditor extends React.Component { DATASOURCES_OPTIONS={DATASOURCES_OPTIONS} selectedPluginPackage={selectedPluginPackage} executedQueryData={executedQueryData[queryId]} + runErrorMessage={runErrorMessage[queryId]} /> ) : ( { } const mapStateToProps = (state: AppState): any => { + const { runErrorMessage } = state.ui.queryPane; const formData = getFormValues(QUERY_EDITOR_FORM_NAME)(state) as RestAction; const initialValues = getFormInitialValues(QUERY_EDITOR_FORM_NAME)( state, @@ -163,6 +167,7 @@ const mapStateToProps = (state: AppState): any => { ); return { + runErrorMessage, apiPane: state.ui.apiPane, pluginIds: getPluginIdsOfPackageNames(state, PLUGIN_PACKAGE_DBS), dataSources: getDataSources(state), diff --git a/app/client/src/reducers/uiReducers/datasourcePaneReducer.ts b/app/client/src/reducers/uiReducers/datasourcePaneReducer.ts index 59d706c1da..5a84c73649 100644 --- a/app/client/src/reducers/uiReducers/datasourcePaneReducer.ts +++ b/app/client/src/reducers/uiReducers/datasourcePaneReducer.ts @@ -2,15 +2,18 @@ import React from "react"; import { createReducer } from "utils/AppsmithUtils"; import { ReduxActionTypes, ReduxAction } from "constants/ReduxActionConstants"; import { Datasource } from "api/DatasourcesApi"; +import _ from "lodash"; const initialState: DatasourcePaneReduxState = { selectedPlugin: "", datasourceRefs: {}, + drafts: {}, }; export interface DatasourcePaneReduxState { selectedPlugin: string; datasourceRefs: {}; + drafts: Record; } const datasourcePaneReducer = createReducer(initialState, { @@ -42,6 +45,25 @@ const datasourcePaneReducer = createReducer(initialState, { }, }; }, + [ReduxActionTypes.UPDATE_DATASOURCE_DRAFT]: ( + state: DatasourcePaneReduxState, + action: ReduxAction<{ id: string; draft: Partial }>, + ) => { + return { + ...state, + drafts: { + ...state.drafts, + [action.payload.id]: action.payload.draft, + }, + }; + }, + [ReduxActionTypes.DELETE_DATASOURCE_DRAFT]: ( + state: DatasourcePaneReduxState, + action: ReduxAction<{ id: string }>, + ) => ({ + ...state, + drafts: _.omit(state.drafts, action.payload.id), + }), }); export default datasourcePaneReducer; diff --git a/app/client/src/reducers/uiReducers/queryPaneReducer.ts b/app/client/src/reducers/uiReducers/queryPaneReducer.ts index 97be99adf3..0e1823eae4 100644 --- a/app/client/src/reducers/uiReducers/queryPaneReducer.ts +++ b/app/client/src/reducers/uiReducers/queryPaneReducer.ts @@ -5,6 +5,7 @@ import { ReduxAction, } from "constants/ReduxActionConstants"; import { RestAction } from "api/ActionAPI"; +import _ from "lodash"; const initialState: QueryPaneReduxState = { isFetching: false, @@ -13,6 +14,7 @@ const initialState: QueryPaneReduxState = { isSaving: {}, isDeleting: {}, runQuerySuccessData: {}, + runErrorMessage: {}, lastUsed: "", }; @@ -22,6 +24,7 @@ export interface QueryPaneReduxState { isSaving: Record; isDeleting: Record; runQuerySuccessData: {}; + runErrorMessage: Record; lastUsed: string; isCreating: boolean; } @@ -134,6 +137,8 @@ const queryPaneReducer = createReducer(initialState, { state: any, action: ReduxAction<{ actionId: string; data: object }>, ) => { + const { actionId } = action.payload; + return { ...state, isRunning: { @@ -144,17 +149,24 @@ const queryPaneReducer = createReducer(initialState, { ...state.runQuerySuccessData, [action.payload.actionId]: action.payload.data, }, + runErrorMessage: _.omit(state.runErrorMessage, [actionId]), }; }, [ReduxActionErrorTypes.RUN_QUERY_ERROR]: ( state: any, - action: ReduxAction<{ actionId: string }>, + action: ReduxAction<{ actionId: string; message: string }>, ) => { + const { actionId, message } = action.payload; + return { ...state, isRunning: { ...state.isRunning, - [action.payload.actionId]: false, + [actionId]: false, + }, + runErrorMessage: { + ...state.runError, + [actionId]: message, }, }; }, diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts index 8fee85a881..094db1272a 100644 --- a/app/client/src/sagas/DatasourcesSagas.ts +++ b/app/client/src/sagas/DatasourcesSagas.ts @@ -1,16 +1,25 @@ -import { all, put, takeEvery, select } from "redux-saga/effects"; -import { change, initialize } from "redux-form"; +import { all, put, takeEvery, select, call } from "redux-saga/effects"; +import { change, initialize, getFormValues } from "redux-form"; import _ from "lodash"; import { ReduxAction, ReduxActionErrorTypes, ReduxActionTypes, + ReduxFormActionTypes, + ReduxActionWithMeta, } from "constants/ReduxActionConstants"; import { getCurrentApplicationId, getCurrentPageId, } from "selectors/editorSelectors"; -import { getDatasourceRefs, getPluginForm } from "selectors/entitiesSelector"; +import { + getDatasourceRefs, + getPluginForm, + getDatasource, + getDatasourceDraft, +} from "selectors/entitiesSelector"; +import { selectPlugin } from "actions/datasourceActions"; +import { fetchPluginForm } from "actions/pluginActions"; import { GenericApiResponse } from "api/ApiResponses"; import DatasourcesApi, { CreateDatasourceConfig, @@ -99,6 +108,12 @@ export function* deleteDatasourceSaga( type: ReduxActionTypes.DELETE_DATASOURCE_SUCCESS, payload: response.data, }); + yield put({ + type: ReduxActionTypes.DELETE_DATASOURCE_DRAFT, + payload: { + id: response.data.id, + }, + }); history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId)); } } catch (error) { @@ -125,6 +140,12 @@ function* updateDatasourceSaga(actionPayload: ReduxAction) { type: ReduxActionTypes.UPDATE_DATASOURCE_SUCCESS, payload: response.data, }); + yield put({ + type: ReduxActionTypes.DELETE_DATASOURCE_DRAFT, + payload: { + id: response.data.id, + }, + }); } } catch (error) { yield put({ @@ -269,6 +290,60 @@ function* createDatasourceFromFormSaga( } } +function* updateDraftsSaga() { + const values = yield select(getFormValues(DATASOURCE_DB_FORM)); + + if (!values.id) return; + const datasource = yield select(getDatasource, values.id); + + if (_.isEqual(values, datasource)) { + yield put({ + type: ReduxActionTypes.DELETE_DATASOURCE_DRAFT, + payload: { id: values.id }, + }); + } else { + yield put({ + type: ReduxActionTypes.UPDATE_DATASOURCE_DRAFT, + payload: { id: values.id, draft: values }, + }); + } +} + +function* changeDatasourceSaga(actionPayload: ReduxAction) { + const { id, pluginId } = actionPayload.payload; + const datasource = actionPayload.payload; + const state = yield select(); + const draft = yield select(getDatasourceDraft, id); + const formConfigs = state.entities.plugins.formConfigs; + const applicationId = yield select(getCurrentApplicationId); + const pageId = yield select(getCurrentPageId); + let data; + + if (_.isEmpty(draft)) { + data = actionPayload.payload; + } else { + data = draft; + } + + yield put(initialize(DATASOURCE_DB_FORM, data)); + yield put(selectPlugin(pluginId)); + + if (!formConfigs[pluginId]) { + yield put(fetchPluginForm({ id: pluginId })); + } + history.push( + DATA_SOURCES_EDITOR_ID_URL(applicationId, pageId, datasource.id), + ); +} + +function* formValueChangeSaga( + actionPayload: ReduxActionWithMeta, +) { + const { form } = actionPayload.meta; + if (form !== DATASOURCE_DB_FORM) return; + yield all([call(updateDraftsSaga)]); +} + export function* watchDatasourcesSagas() { yield all([ takeEvery(ReduxActionTypes.FETCH_DATASOURCES_INIT, fetchDatasourcesSaga), @@ -280,5 +355,8 @@ export function* watchDatasourcesSagas() { takeEvery(ReduxActionTypes.UPDATE_DATASOURCE_INIT, updateDatasourceSaga), takeEvery(ReduxActionTypes.TEST_DATASOURCE_INIT, testDatasourceSaga), takeEvery(ReduxActionTypes.DELETE_DATASOURCE_INIT, deleteDatasourceSaga), + takeEvery(ReduxActionTypes.CHANGE_DATASOURCE, changeDatasourceSaga), + // Intercepting the redux-form change actionType + takeEvery(ReduxFormActionTypes.VALUE_CHANGE, formValueChangeSaga), ]); } diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts index c2c7dfc79c..4606c7fdac 100644 --- a/app/client/src/sagas/QueryPaneSagas.ts +++ b/app/client/src/sagas/QueryPaneSagas.ts @@ -246,6 +246,7 @@ export function* executeQuerySaga( type: ReduxActionErrorTypes.RUN_QUERY_ERROR, payload: { actionId: actionPayload.payload.actionId, + message: error.message, show: false, }, }); diff --git a/app/client/src/selectors/entitiesSelector.ts b/app/client/src/selectors/entitiesSelector.ts index 38c4423025..6ac1d16d87 100644 --- a/app/client/src/selectors/entitiesSelector.ts +++ b/app/client/src/selectors/entitiesSelector.ts @@ -8,6 +8,7 @@ import { QUERY_CONSTANT } from "constants/QueryEditorConstants"; import { API_CONSTANT } from "constants/ApiEditorConstants"; import { createSelector } from "reselect"; import { Page } from "constants/ReduxActionConstants"; +import { Datasource } from "api/DatasourcesApi"; export const getEntities = (state: AppState): AppState["entities"] => state.entities; @@ -107,6 +108,20 @@ export const getActions = (state: AppState): ActionDataState => export const getDatasourceRefs = (state: AppState): any => state.ui.datasourcePane.datasourceRefs; +export const getDatasource = ( + state: AppState, + datasourceId: string, +): Partial | undefined => + state.entities.datasources.list.find( + datasource => datasource.id === datasourceId, + ); + +export const getDatasourceDraft = (state: AppState, id: string) => { + const drafts = state.ui.datasourcePane.drafts; + if (id in drafts) return drafts[id]; + return {}; +}; + export const getPlugins = (state: AppState) => state.entities.plugins.list; export const getApiActions = (state: AppState): ActionDataState => {