fix: reset the filepicker widget when the user goes to a different link (#15626)

* fix: reset the the fileficker widget

* test: add test-case for file-picker

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}}"
+      }
+    ]
+  }
+}

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");
+  });
+});

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", "");
   });
 });

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"
 }

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") {
+      let updatedFiles = [];
-        const updatedFiles = this.props.selectedFiles
+      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[]) => {