Fix: FilePicker widget was not setting loading state to true on calli…

…ng action (#1985) * set loading state on calling action in file picker * add test cases for file picker loading state * add tests cases * add isLoading state in state instead meta Co-authored-by: Pawan Kumar <[email protected]>
appsmithorg · Dec 3, 2020 · 91127ed · 91127ed
1 parent 6a7403d
commit 91127ed
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 5 deletions.
diff --git a/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FilePicker_spec.js b/app/client/cypress/integration/Smoke_TestSuite/FormWidgets/FilePicker_spec.js
@@ -15,6 +15,18 @@ describe("FilePicker Widget Functionality", function() {
     cy.get(commonlocators.editPropCrossButton).click();
   });
 
+  it("It checks the loading state of filepicker on call the action", function() {
+    cy.openPropertyPane("filepickerwidget");
+    const fixturePath = "example.json";
+    cy.getAlert(commonlocators.filePickerOnFilesSelected);
+    cy.get(commonlocators.filePickerButton).click();
+    cy.get(commonlocators.filePickerInput)
+      .first()
+      .attachFile(fixturePath);
+    cy.get(commonlocators.filePickerUploadButton).click();
+    cy.get(".bp3-spinner").should("have.length", 1);
+  });
+
   afterEach(() => {
     // put your clean up code if any
   });

diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
@@ -80,5 +80,10 @@
   "changeZoomlevel": ".t--property-control-maxzoomlevel .bp3-button",
   "selectedZoomlevel": ".t--property-control-maxzoomlevel button span",
   "imgWidget": "div[data-testid='styledImage']",
-  "selectTab": ".t--tab-Tab"
-}
+  "selectTab": ".t--tab-Tab",
+  "filePickerButton": ".t--widget-filepickerwidget",
+  "filePickerInput": ".uppy-Dashboard-input",
+  "filePickerUploadButton": ".uppy-StatusBar-actionBtn--upload",
+  "filePickerOnFilesSelected": ".t--property-control-onfilesselected"
+
+}
diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js
@@ -1,5 +1,7 @@
 /// <reference types="Cypress" />
 
+require("cypress-file-upload");
+
 const loginPage = require("../locators/LoginPage.json");
 const homePage = require("../locators/HomePage.json");
 const pages = require("../locators/Pages.json");

diff --git a/app/client/package.json b/app/client/package.json
@@ -179,6 +179,7 @@
     "babel-plugin-styled-components": "^1.10.7",
     "craco-babel-loader": "^0.1.4",
     "cypress": "5.3.0",
+    "cypress-file-upload": "^4.1.1",
     "cypress-multi-reporters": "^1.2.4",
     "cypress-xpath": "^1.4.0",
     "dotenv": "^8.1.0",

diff --git a/app/client/src/widgets/FilepickerWidget.tsx b/app/client/src/widgets/FilepickerWidget.tsx
@@ -33,6 +33,7 @@ class FilePickerWidget extends BaseWidget<
     super(props);
     this.state = {
       version: 0,
+      isLoading: false,
     };
   }
 
@@ -158,7 +159,12 @@ class FilePickerWidget extends BaseWidget<
     };
   }
 
-  onFilesSelected() {
+  /**
+   * this function is called when user selects the files and it do two things:
+   * 1. calls the action if any
+   * 2. set isLoading prop to true when calling the action
+   */
+  onFilesSelected = () => {
     if (this.props.onFilesSelected) {
       this.executeAction({
         dynamicString: this.props.onFilesSelected,
@@ -167,15 +173,24 @@ class FilePickerWidget extends BaseWidget<
           callback: this.handleFileUploaded,
         },
       });
+
+      this.setState({ isLoading: true });
     }
-  }
+  };
 
+  /**
+   * sets uploadFilesUrl in meta propety and sets isLoading to false
+   *
+   * @param result
+   */
   handleFileUploaded = (result: ExecutionResult) => {
     if (result.success) {
       this.props.updateWidgetMetaProperty(
         "uploadedFileUrls",
         this.props.uploadedFileUrlPaths,
       );
+
+      this.setState({ isLoading: false });
     }
   };
 
@@ -213,7 +228,7 @@ class FilePickerWidget extends BaseWidget<
         key={this.props.widgetId}
         label={this.props.label}
         files={this.props.files || []}
-        isLoading={this.props.isLoading}
+        isLoading={this.props.isLoading || this.state.isLoading}
         isDisabled={this.props.isDisabled}
       />
     );
@@ -226,6 +241,7 @@ class FilePickerWidget extends BaseWidget<
 
 export interface FilePickerWidgetState extends WidgetState {
   version: number;
+  isLoading: boolean;
 }
 
 export interface FilePickerWidgetProps extends WidgetProps, WithMeta {

diff --git a/app/client/yarn.lock b/app/client/yarn.lock
@@ -7536,6 +7536,13 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+cypress-file-upload@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-4.1.1.tgz#952713c8104ab7008de99c65bd63f74b244fe4df"
+  integrity sha512-tX6UhuJ63rNgjdzxglpX+ZYf/bM6PDhFMtt1qCBljLtAgdearqyfD1AHqyh59rOHCjfM+bf6FA3o9b/mdaX6pw==
+  dependencies:
+    mime "^2.4.4"
+
 cypress-multi-reporters@^1.2.4:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/cypress-multi-reporters/-/cypress-multi-reporters-1.4.0.tgz#5f1d0484a20959cfe782f1bf65ad16c6ad804da7"