geosolutions-it#9034: Fix - Spinner no longer appear when saving a re…

…source (geosolutions-it#9044)
dsuren1 · Mar 29, 2023 · 278daab · 278daab
1 parent e8bec47
commit 278daab
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 7 deletions.
diff --git a/web/client/components/resources/modals/Save.jsx b/web/client/components/resources/modals/Save.jsx
@@ -9,8 +9,8 @@
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { lazy } from 'react';
-// require('./css/modals.css');
 import { Grid } from 'react-bootstrap';
+import isEqual from 'lodash/isEqual';
 
 import Message from '../../I18N/Message';
 import Portal from '../../misc/Portal';
@@ -127,11 +127,24 @@ class SaveModal extends React.Component {
  dialogClassName: '',
  detailsComponent: require('./enhancers/handleDetails').default((DetailsComp))
  };
+
+ componentDidUpdate(prevProps) {
+ if (
+ this.props.errors &&
+ this.props.errors.length > 0 &&
+ !isEqual(this.props.errors, prevProps.errors) &&
+ this.state?.loading
+ ) {
+ this.setState({ loading: false });
+ }
+ }
+
  onCloseMapPropertiesModal = () => {
  this.props.onClose();
  }
 
  onSave = () => {
+ this.setState({loading: true});
  this.props.onSave({...this.props.resource, permission: this.props.rules});
  };
 
@@ -144,7 +157,7 @@ class SaveModal extends React.Component {
 
  return (<Portal key="saveDialog">
  <ResizableModal
- loading={this.props.loading}
+ loading={this.props.loading || this.state?.loading}
  title={<Message msgId={this.props.title}/>}
  show={this.props.show}
  clickOutEnabled={this.props.clickOutEnabled}
@@ -154,13 +167,13 @@ class SaveModal extends React.Component {
  buttons={[{
  text: <Message msgId="close"/>,
  onClick: this.onCloseMapPropertiesModal,
- disabled: this.props.resource.loading
+ disabled: this.isLoading()
  }, {
  text: <span><Message msgId={this.props.saveButtonLabel}/></span>,
  onClick: () => { this.onSave(); },
- disabled: !this.isValidForm() || this.props.loading || !this.props.canSave
+ disabled: this.isSaveDisabled()
  }]}
- showClose={!this.props.resource.loading}
+ showClose={!this.isLoading()}
  onClose={this.onCloseMapPropertiesModal}>
  <Grid fluid>
  <div className="ms-map-properties">
@@ -202,7 +215,19 @@ class SaveModal extends React.Component {
  </ResizableModal>
  </Portal>);
  }
- isValidForm = () => get(this.props.resource, "metadata.name") && (!this.props.enableFileDrop || this.props.fileDropStatus === 'accepted')
+ isValidForm = () =>
+ get(this.props.resource, "metadata.name") &&
+ (!this.props.enableFileDrop || this.props.fileDropStatus === "accepted");
+
+ isLoading = () => {
+ return (
+ this.props.loading || this.props.resource?.loading || this.state?.loading
+ );
+ };
+
+ isSaveDisabled = () => {
+ return !this.isValidForm() || this.isLoading() || !this.props.canSave;
+ };
 }
 
 export default SaveModal;
diff --git a/web/client/components/resources/modals/__tests__/Save-test.jsx b/web/client/components/resources/modals/__tests__/Save-test.jsx
@@ -10,6 +10,7 @@ import expect from 'expect';
 import { find, get } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import TestUtils from 'react-dom/test-utils';
 
 import MetadataModal from '../Save';
 
@@ -165,5 +166,57 @@ describe('This test for dashboard save form', () => {
  expect(saveButton).toExist();
  expect(saveButton.classList.contains('disabled')).toBe(false);
  });
+ it('modal save button is disabled when resource is loading', () => {
+ const user = {role: 'ADMIN'};
+ const Modal = ReactDOM.render(<MetadataModal user={user} show loading id="map-save"/>, document.getElementById('container'));
+ expect(Modal).toBeTruthy();
+
+ const buttons = document.getElementsByTagName('button');
+ const saveButton = find(buttons, button => button.childNodes[0] && (button.childNodes[0].textContent === 'save' ||
+ get(button.childNodes[0].childNodes[0], 'textContent') === 'save'));
+ const closeButton = find(buttons, button => button.childNodes[0] && (button.childNodes[0].textContent === 'close' ||
+ get(button.childNodes[0].childNodes[0], 'textContent') === 'close'));
+ const closeButtonModal = document.querySelector('.glyphicon-1-close');
 
+ // Save button
+ expect(saveButton).toBeTruthy();
+ expect(saveButton.classList.contains('disabled')).toBe(true);
+ // Close button
+ expect(closeButton).toBeTruthy();
+ expect(closeButton.classList.contains('disabled')).toBe(true);
+ // Close button on modal header
+ expect(closeButtonModal).toBeFalsy();
+ });
+ it('modal save button is disabled when save is in progress', () => {
+ const user = {role: 'ADMIN'};
+ const Modal = ReactDOM.render(<MetadataModal user={user} show id="map-save"/>, document.getElementById('container'));
+ expect(Modal).toBeTruthy();
+
+ const buttons = document.getElementsByTagName('button');
+ const saveButton = find(buttons, button => button.childNodes[0] && (button.childNodes[0].textContent === 'save' ||
+ get(button.childNodes[0].childNodes[0], 'textContent') === 'save'));
+ expect(saveButton).toBeTruthy();
+ TestUtils.Simulate.click(saveButton);
+ expect(saveButton.classList.contains('disabled')).toBe(true);
+ });
+ it('modal display spinner when loading', () => {
+ const user = {role: 'ADMIN'};
+ const Modal = ReactDOM.render(<MetadataModal user={user} loading show id="map-save"/>, document.getElementById('container'));
+ expect(Modal).toBeTruthy();
+ const [spinner] = document.getElementsByClassName('mapstore-inline-loader');
+ expect(spinner).toBeTruthy();
+ });
+ it('modal hide spinner when error', () => {
+ const user = {role: 'ADMIN'};
+ let Modal = ReactDOM.render(<MetadataModal user={user} show id="map-save"/>, document.getElementById('container'));
+ expect(Modal).toBeTruthy();
+ const buttons = document.getElementsByTagName('button');
+ const saveButton = find(buttons, button => button.childNodes[0] && (button.childNodes[0].textContent === 'save' ||
+ get(button.childNodes[0].childNodes[0], 'textContent') === 'save'));
+ TestUtils.Simulate.click(saveButton);
+ Modal = ReactDOM.render(<MetadataModal errors={["Network error"]} user={user} show id="map-save"/>, document.getElementById('container'));
+ expect(Modal).toBeTruthy();
+ const [spinner] = document.getElementsByClassName('mapstore-inline-loader');
+ expect(spinner).toBeFalsy();
+ });
 });
diff --git a/web/client/themes/default/less/loaders.less b/web/client/themes/default/less/loaders.less
@@ -56,7 +56,7 @@
  }
  .mapstore-inline-loader {
  margin: @padding-left-square-md;
- .mapstore-circle-loader-with-css-variables(@icon-size-md/10, @icon-size-md, @theme-vars[loader-primary-color], @theme-vars[loader-primary-fade-color]);
+ .mapstore-circle-loader-with-css-variables((@icon-size-md/10), @icon-size-md, @theme-vars[loader-primary-color], @theme-vars[loader-primary-fade-color]);
  }
 }