diff --git a/app/client/cypress/fixtures/filePickerV2_reset_check_dsl.json b/app/client/cypress/fixtures/filePickerV2_reset_check_dsl.json new file mode 100644 index 0000000000..07c76b7fcf --- /dev/null +++ b/app/client/cypress/fixtures/filePickerV2_reset_check_dsl.json @@ -0,0 +1,188 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896.0, + "snapColumns": 64.0, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0.0, + "bottomRow": 5000.0, + "containerStyle": "none", + "snapRows": 125.0, + "parentRowSpace": 1.0, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 59.0, + "minHeight": 1292.0, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1.0, + "dynamicBindingPathList": [], + "leftColumn": 0.0, + "children": [ + { + "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}", + "widgetName": "Tabs1", + "isCanvas": true, + "displayName": "Tabs", + "iconSVG": "/static/media/icon.74a6d653c8201e66f1cd367a3fba2657.svg", + "topRow": 10.0, + "bottomRow": 50.0, + "parentRowSpace": 10.0, + "type": "TABS_WIDGET", + "hideCard": false, + "shouldScrollContents": false, + "animateLoading": true, + "parentColumnSpace": 13.09375, + "leftColumn": 8.0, + "dynamicBindingPathList": [ + { "key": "accentColor" }, + { "key": "borderRadius" }, + { "key": "boxShadow" } + ], + "children": [ + { + "tabId": "tab1", + "boxShadow": "none", + "widgetName": "Canvas1", + "displayName": "Canvas", + "topRow": 0.0, + "bottomRow": 390.0, + "parentRowSpace": 1.0, + "type": "CANVAS_WIDGET", + "canExtend": true, + "hideCard": true, + "shouldScrollContents": false, + "minHeight": 400.0, + "parentColumnSpace": 1.0, + "leftColumn": 0.0, + "dynamicBindingPathList": [ + { "key": "borderRadius" }, + { "key": "accentColor" } + ], + "children": [ + { + "boxShadow": "none", + "widgetName": "FilePicker1", + "buttonColor": "{{appsmith.theme.colors.primaryColor}}", + "displayName": "FilePicker", + "iconSVG": "/static/media/icon.7c5ad9c357928c6ff5701bf51a56c2e5.svg", + "searchTags": ["upload"], + "topRow": 8.0, + "bottomRow": 12.0, + "parentRowSpace": 10.0, + "allowedFileTypes": [], + "type": "FILE_PICKER_WIDGET_V2", + "hideCard": false, + "animateLoading": true, + "parentColumnSpace": 4.59765625, + "leftColumn": 3.0, + "dynamicBindingPathList": [ + { "key": "buttonColor" }, + { "key": "borderRadius" } + ], + "isDisabled": false, + "key": "6d43gv0ltb", + "isRequired": false, + "isDeprecated": false, + "rightColumn": 39.0, + "isDefaultClickDisabled": true, + "widgetId": "l76mjy7qiy", + "isVisible": true, + "label": "Select Files", + "maxFileSize": 5.0, + "version": 1.0, + "fileDataType": "Base64", + "parentId": "mi3m3dpg0h", + "selectedFiles": [], + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "files": [], + "maxNumFiles": 1.0 + } + ], + "isDisabled": false, + "key": "38m1jzj81f", + "isDeprecated": false, + "tabName": "Tab 1", + "rightColumn": 314.25, + "detachFromLayout": true, + "widgetId": "mi3m3dpg0h", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisible": true, + "version": 1.0, + "parentId": "sp6t272na4", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" + }, + { + "tabId": "tab2", + "boxShadow": "none", + "widgetName": "Canvas2", + "displayName": "Canvas", + "topRow": 0.0, + "bottomRow": 400.0, + "parentRowSpace": 1.0, + "type": "CANVAS_WIDGET", + "canExtend": true, + "hideCard": true, + "shouldScrollContents": false, + "minHeight": 400.0, + "parentColumnSpace": 1.0, + "leftColumn": 0.0, + "dynamicBindingPathList": [ + { "key": "borderRadius" }, + { "key": "accentColor" } + ], + "children": [], + "isDisabled": false, + "key": "38m1jzj81f", + "isDeprecated": false, + "tabName": "Tab 2", + "rightColumn": 314.25, + "detachFromLayout": true, + "widgetId": "kyae0c0jak", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisible": true, + "version": 1.0, + "parentId": "sp6t272na4", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" + } + ], + "key": "8pfobt9gem", + "isDeprecated": false, + "rightColumn": 32.0, + "widgetId": "sp6t272na4", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "defaultTab": "Tab 1", + "shouldShowTabs": true, + "tabsObj": { + "tab1": { + "label": "Tab 1", + "id": "tab1", + "widgetId": "mi3m3dpg0h", + "isVisible": true, + "index": 0.0 + }, + "tab2": { + "label": "Tab 2", + "id": "tab2", + "widgetId": "kyae0c0jak", + "isVisible": true, + "index": 1.0 + } + }, + "isVisible": true, + "version": 3.0, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}" + } + ] + } +} diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_Widget_reset_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_Widget_reset_spec.js new file mode 100644 index 0000000000..a83a8d5f29 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_Widget_reset_spec.js @@ -0,0 +1,36 @@ +const commonlocators = require("../../../../../locators/commonlocators.json"); +const dsl = require("../../../../../fixtures/filePickerV2_reset_check_dsl.json"); +const Layoutpage = require("../../../../../locators/Layout.json"); +const widgetsPage = require("../../../../../locators/Widgets.json"); + +describe("Checkbox Widget Functionality", function() { + before(() => { + cy.addDsl(dsl); + }); + + it("Check if the uploaded data reset when tab switch in the TabsWidget", () => { + cy.get(widgetsPage.filepickerwidgetv2).should("contain", "Select Files"); + cy.get(widgetsPage.filepickerwidgetv2).click(); + cy.get(commonlocators.filePickerInput) + .first() + .attachFile("testFile.mov"); + cy.get(commonlocators.filePickerUploadButton).click(); + cy.get(widgetsPage.filepickerwidgetv2).should( + "contain", + "1 files selected", + ); + cy.get(Layoutpage.tabWidget) + .contains("Tab 2") + .click({ force: true }); + cy.get(Layoutpage.tabWidget) + .contains("Tab 2") + .should("have.class", "is-selected"); + cy.get(Layoutpage.tabWidget) + .contains("Tab 1") + .click({ force: true }); + cy.get(Layoutpage.tabWidget) + .contains("Tab 1") + .should("have.class", "is-selected"); + cy.get(widgetsPage.filepickerwidgetv2).should("contain", "Select Files"); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_spec.js index 164870c84e..0d0a8ef063 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_spec.js @@ -1,5 +1,6 @@ const explorer = require("../../../../../locators/explorerlocators.json"); const commonlocators = require("../../../../../locators/commonlocators.json"); +const widgetsPage = require("../../../../../locators/Widgets.json"); const widgetName = "filepickerwidgetv2"; @@ -7,7 +8,7 @@ describe("File picker widget v2", () => { it("1. Drag & drop FilePicker/Text widgets", () => { cy.get(explorer.addWidget).click(); cy.dragAndDropToCanvas(widgetName, { x: 300, y: 300 }); - cy.get(`.t--widget-${widgetName}`).should("exist"); + cy.get(widgetsPage.filepickerwidgetv2).should("exist"); cy.dragAndDropToCanvas("textwidget", { x: 300, y: 500 }); cy.openPropertyPane("textwidget"); cy.updateCodeInput(".t--property-control-text", `{{FilePicker1.isDirty}}`); @@ -17,7 +18,7 @@ describe("File picker widget v2", () => { // Check if initial value of isDirty is false cy.get(".t--widget-textwidget").should("contain", "false"); // Upload a new file - cy.get(`.t--widget-${widgetName}`).click(); + cy.get(widgetsPage.filepickerwidgetv2).click(); cy.get(commonlocators.filePickerInput) .first() .attachFile("testFile.mov"); @@ -28,12 +29,18 @@ describe("File picker widget v2", () => { cy.get(".t--widget-textwidget").should("contain", "true"); }); - it("Check if the uploaded data retains when shifting to query page", () => { + it("Check if the uploaded data reset when back from query page", () => { + cy.openPropertyPane("textwidget"); + cy.updateCodeInput( + ".t--property-control-text", + `{{FilePicker1.files[0].name}}`, + ); cy.createAndFillApi("{{FilePicker1.files[0]}}", ""); cy.get(".t--more-action-menu") .first() .click({ force: true }); cy.get(explorer.widgetSwitchId).click(); - cy.get(`.t--widget-${widgetName}`).should("contain", "1 files selected"); + cy.get(widgetsPage.filepickerwidgetv2).should("contain", "Select Files"); + cy.get(`.t--widget-textwidget`).should("contain", ""); }); }); diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 5ee58ad4cb..b504ec0482 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -182,5 +182,6 @@ "selectedTextSize": ".t--property-control-textsize .bp3-popover-target .sub-text", "colorPickerV2Popover": ".t--colorpicker-v2-popover", "colorPickerV2Color": ".t--colorpicker-v2-color", - "modalCloseButton": ".t--draggable-iconbuttonwidget .bp3-button" + "modalCloseButton": ".t--draggable-iconbuttonwidget .bp3-button", + "filepickerwidgetv2": ".t--widget-filepickerwidgetv2" } diff --git a/app/client/src/widgets/FilePickerWidgetV2/widget/index.tsx b/app/client/src/widgets/FilePickerWidgetV2/widget/index.tsx index e620edd517..3a74d0ce93 100644 --- a/app/client/src/widgets/FilePickerWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/FilePickerWidgetV2/widget/index.tsx @@ -551,14 +551,17 @@ class FilePickerWidget extends BaseWidget< * Uppy provides an argument called reason. It helps us to distinguish on which event the file-removed event was called. * Refer to the following issue to know about reason prop: https://github.com/transloadit/uppy/pull/2323 */ - if (reason !== "cancel-all") { - const updatedFiles = this.props.selectedFiles + let updatedFiles = []; + if (reason === "removed-by-user") { + updatedFiles = this.props.selectedFiles ? this.props.selectedFiles.filter((dslFile) => { return file.id !== dslFile.id; }) : []; - this.props.updateWidgetMetaProperty("selectedFiles", updatedFiles); + } else if (reason === "cancel-all") { + updatedFiles = []; } + this.props.updateWidgetMetaProperty("selectedFiles", updatedFiles); }); this.state.uppy.on("files-added", (files: any[]) => {