Fix geosolutions-it#10954 Review button styles and remove transitions (geosolutions-it#11961)

allyoucanmap · web-flow · commit 9272d1565b31 · 2026-02-06T14:20:21.000+05:45
diff --git a/package.json b/package.json
@@ -89,7 +89,6 @@
     "prettier": "3.5.1",
     "process": "0.11.10",
     "raw-loader": "0.5.1",
-    "react-transition-group": "1.1.3",
     "readline-promise": "1.0.4",
     "redux-devtools": "3.4.0",
     "redux-devtools-dock-monitor": "1.1.2",
@@ -194,7 +193,6 @@
     "qrcode.react": "0.9.3",
     "query-string": "6.9.0",
     "react": "16.14.0",
-    "react-addons-css-transition-group": "15.6.2",
     "react-bootstrap": "0.31.0",
     "react-checkbox-tree": "1.5.1",
     "react-codemirror2": "4.0.0",
diff --git a/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx b/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
@@ -71,7 +71,6 @@ const FeatureInfoEditor = ({
         <Portal>
             <ResizableModal
                 modalClassName="ms-feature-info-editor"
-                fade
                 show={showEditor}
                 title={<Message msgId="layerProperties.editCustomFormat"/>}
                 size="lg"
diff --git a/web/client/components/background/BackgroundDialog.jsx b/web/client/components/background/BackgroundDialog.jsx
@@ -284,7 +284,6 @@ export default class BackgroundDialog extends React.Component {
             fitContent
             title={<Message msgId={this.props.editing ? 'backgroundDialog.editTitle' : 'backgroundDialog.addTitle'}/>}
             show
-            fade
             clickOutEnabled={false}
             bodyClassName="ms-flex modal-properties-container background-dialog"
             loading={this.props.loading}
diff --git a/web/client/components/data/identify/GeocodeViewer.jsx b/web/client/components/data/identify/GeocodeViewer.jsx
@@ -28,7 +28,6 @@ export default ({latlng, enableRevGeocode, hideRevGeocode = () => {}, showModalR
     return enableRevGeocode && latlng ? (
         <Portal>
             <ResizableModal
-                fade
                 title={<span><Glyphicon glyph="map-marker"/>&nbsp;<Message msgId="identifyRevGeocodeModalTitle" /></span>}
                 size="xs"
                 show={showModalReverse}
diff --git a/web/client/components/data/identify/IdentifyContainer.jsx b/web/client/components/data/identify/IdentifyContainer.jsx
@@ -147,7 +147,6 @@ export default props => {
                         <Toolbar
                             btnDefaultProps={{ bsStyle: 'primary', className: 'square-button' }}
                             buttons={getFeatureButtons(props)}
-                            transitionProps={null}
                         />
                     </div>
                 </div>,
@@ -172,17 +171,12 @@ export default props => {
                     <Toolbar
                         btnDefaultProps={{ bsStyle: 'primary', className: 'square-button' }}
                         buttons={toolButtons}
-                        transitionProps={null
-                            /* transitions was causing a bad rendering of toolbar present in the identify panel
-                                 * for this reason they ahve been disabled
-                                */
-                        }/>
+                    />
                 </div>)
             ].filter(headRow => headRow)}
             siblings={
                 <Portal>
                     <ResizableModal
-                        fade
                         title={<Message msgId="warning"/>}
                         size="xs"
                         show={warning}
diff --git a/web/client/components/data/identify/coordinates/__tests__/Editor-test.jsx b/web/client/components/data/identify/coordinates/__tests__/Editor-test.jsx
@@ -28,7 +28,7 @@ describe('Identify Coordinate Editor component', () => {
         };
         const spyonChange = expect.spyOn(actions, 'onSubmit');
         ReactDOM.render(<Editor onSubmit={actions.onSubmit} />, document.getElementById("container"));
-        const button = document.querySelector('span > button');
+        const button = document.querySelector('.tools > button.square-button');
         expect(button.classList.contains('disabled')).toBe(true);
         const latLonFields = document.querySelectorAll('input');
         ReactTestUtils.Simulate.focus(latLonFields[0]);
diff --git a/web/client/components/geostory/builder/Builder.jsx b/web/client/components/geostory/builder/Builder.jsx
@@ -101,7 +101,6 @@ class Builder extends React.Component {
                             className: "square-button",
                             bsStyle: "primary"
                         }}
-                        transitionProps={false}
                         buttons={[
                             {
                                 visible: !isSettingsEnabled,
diff --git a/web/client/components/geostory/common/MapEditor.jsx b/web/client/components/geostory/common/MapEditor.jsx
@@ -84,7 +84,6 @@ const MapEditor = ({
                         </Col>
                     </Row>
                     <Toolbar
-                        transitionProps={false}
                         btnGroupProps={{
                             className: "ms-geostory-map-editor-toolbar"
                         }}
diff --git a/web/client/components/geostory/contents/carousel/__tests__/Carousel-test.jsx b/web/client/components/geostory/contents/carousel/__tests__/Carousel-test.jsx
@@ -64,15 +64,15 @@ describe('Carousel component', () => {
         // Carousel toolbar
         const [toolbar] = el.getElementsByClassName('ms-content-toolbar');
         expect(toolbar).toExist();
-        const buttons = toolbar.querySelectorAll('.btn-group span button');
+        const buttons = toolbar.querySelectorAll('.btn-group button');
         expect(buttons.length).toBe(2);
         expect(buttons[0].querySelector('.glyphicon-plus')).toExist();
         expect(buttons[1].querySelector('.glyphicon-trash')).toExist();
 
         // Carousel item toolbar
         const itemToolbar = container.querySelector('.ms-geo-carousel-item-wrapper .ms-content-toolbar');
         expect(itemToolbar).toBeTruthy();
-        const itemButtons = itemToolbar.querySelectorAll('.btn-group span button');
+        const itemButtons = itemToolbar.querySelectorAll('.btn-group button');
         expect(itemButtons.length).toBe(3);
         expect(itemButtons[0].querySelector('.glyphicon-pencil')).toExist();
         expect(itemButtons[1].querySelector('.glyphicon-trash')).toExist();
@@ -94,15 +94,15 @@ describe('Carousel component', () => {
         // Carousel toolbar
         const [toolbar] = el.getElementsByClassName('ms-content-toolbar');
         expect(toolbar).toExist();
-        const buttons = toolbar.querySelectorAll('.btn-group span button');
+        const buttons = toolbar.querySelectorAll('.btn-group button');
         expect(buttons.length).toBe(2);
         expect(buttons[0].classList.contains('disabled')).toBeTruthy();
         expect(buttons[1].classList.contains('disabled')).toBeFalsy();
 
         // Carousel item toolbar
         const itemToolbar = container.querySelector('.ms-geo-carousel-item-wrapper .ms-content-toolbar');
         expect(itemToolbar).toBeTruthy();
-        const itemButtons = itemToolbar.querySelectorAll('.btn-group span button');
+        const itemButtons = itemToolbar.querySelectorAll('.btn-group button');
         expect(itemButtons.length).toBe(3);
         expect(itemButtons[0].classList.contains('disabled')).toBeFalsy();
         expect(itemButtons[1].classList.contains('disabled')).toBeTruthy();
@@ -177,7 +177,7 @@ describe('Carousel component', () => {
         // Carousel toolbar
         const [toolbar] = el.getElementsByClassName('ms-content-toolbar');
         expect(toolbar).toExist();
-        const buttons = toolbar.querySelectorAll('.btn-group span button');
+        const buttons = toolbar.querySelectorAll('.btn-group button');
         expect(buttons.length).toBe(2);
         const [addButton] = buttons;
         expect(addButton.querySelector('.glyphicon-plus')).toExist();
@@ -202,7 +202,7 @@ describe('Carousel component', () => {
         // Carousel toolbar
         const [toolbar] = el.getElementsByClassName('ms-content-toolbar');
         expect(toolbar).toExist();
-        const buttons = toolbar.querySelectorAll('.btn-group span button');
+        const buttons = toolbar.querySelectorAll('.btn-group button');
         expect(buttons.length).toBe(2);
         const removeButton = buttons[1];
         expect(removeButton.querySelector('.glyphicon-trash')).toExist();
@@ -233,7 +233,7 @@ describe('Carousel component', () => {
         // Carousel item toolbar
         const itemToolbar = container.querySelectorAll('.ms-geo-carousel-item-wrapper .ms-content-toolbar');
         expect(itemToolbar.length).toBeTruthy();
-        const itemButtons = itemToolbar[1].querySelectorAll('.btn-group span button');
+        const itemButtons = itemToolbar[1].querySelectorAll('.btn-group button');
         expect(itemButtons.length).toBe(3);
         const removeButton = itemButtons[1];
         TestUtils.Simulate.click(removeButton);
@@ -263,7 +263,7 @@ describe('Carousel component', () => {
         // Carousel item toolbar
         const itemToolbar = container.querySelector('.ms-geo-carousel-item-wrapper .ms-content-toolbar');
         expect(itemToolbar).toBeTruthy();
-        const itemButtons = itemToolbar.querySelectorAll('.btn-group span button');
+        const itemButtons = itemToolbar.querySelectorAll('.btn-group button');
         expect(itemButtons.length).toBe(3);
         const markerButton = itemButtons[2];
         TestUtils.Simulate.click(markerButton);
diff --git a/web/client/components/geostory/contents/carousel/carouselItem/ItemThumbnail.jsx b/web/client/components/geostory/contents/carousel/carouselItem/ItemThumbnail.jsx
@@ -39,7 +39,6 @@ export default (props) => {
             fitContent
             title={<Message msgId={props.editing ? 'geostory.carouselEditTitle' : 'geostory.carouselAddTitle'}/>}
             show
-            fade
             clickOutEnabled={false}
             bodyClassName="ms-flex modal-properties-container background-dialog"
             onClose={props.onClose}
diff --git a/web/client/components/mapcontrols/annotations/CoordinatesEditor.jsx b/web/client/components/mapcontrols/annotations/CoordinatesEditor.jsx
@@ -47,7 +47,6 @@ import MeasureEditor from './MeasureEditor';
  * @prop {boolean} isMouseLeaveEnabled Flag used to run actions on mouseLeave the coord row
  * @prop {string} format decimal or aeronautical degree for coordinates
  * @prop {object} componentsValidation it contains parameters for validation of the form based on the types
- * @prop {object} transitionProps properties of the transition for drag component
  * @prop {object} properties of the GeoJSON feature being edited
  * @prop {string} type of the feature (Polygon, LineString, Point, Circle, Text)
  * @prop {string} mapProjection crs of the map
@@ -69,7 +68,6 @@ class CoordinatesEditor extends React.Component {
         format: PropTypes.string,
         aeronauticalOptions: PropTypes.object,
         componentsValidation: PropTypes.object,
-        transitionProps: PropTypes.object,
         properties: PropTypes.object,
         mapProjection: PropTypes.string,
         features: PropTypes.array,
@@ -110,11 +108,6 @@ class CoordinatesEditor extends React.Component {
             "Circle": {min: 1, max: 1, add: true, remove: false, validation: "validateCircle", notValid: "annotations.editor.notValidCircle"},
             "Text": {min: 1, max: 1, add: true, remove: false, validation: "validateText", notValid: "annotations.editor.notValidText"}
         },
-        transitionProps: {
-            transitionName: "switch-panel-transition",
-            transitionEnterTimeout: 300,
-            transitionLeaveTimeout: 300
-        },
         features: [],
         isDraggable: true,
         isMouseEnterEnabled: false,
diff --git a/web/client/components/misc/ResizableModal.jsx b/web/client/components/misc/ResizableModal.jsx
@@ -13,7 +13,6 @@ import { Glyphicon } from 'react-bootstrap';
 import Dialog from './Dialog';
 import Toolbar from './toolbar/Toolbar';
 import { withState } from 'recompose';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import LoadingSpinner from './LoadingSpinner';
 import FlexBox from '../layout/FlexBox';
 import Text from '../layout/Text';
@@ -84,7 +83,6 @@ const ResizableModalComp = ({
     draggable = false,
     fullscreenState,
     onFullscreen,
-    fade = false,
     fitContent,
     modalClassName = '',
     dialogClassName = '',
@@ -133,13 +131,7 @@ const ResizableModalComp = ({
                 )}
             </Dialog>
         </div>) : null;
-    return fade ?
-        (<ReactCSSTransitionGroup
-            transitionName="ms-resizable-modal-fade"
-            transitionEnterTimeout={300}
-            transitionLeaveTimeout={300}>
-            {dialog}
-        </ReactCSSTransitionGroup>) : dialog;
+    return dialog;
 };
 
 const ResizableModal = withState('fullscreenState', 'onFullscreen', ({initialFullscreenState = 'collapsed'}) => initialFullscreenState)(ResizableModalComp);
diff --git a/web/client/components/misc/toolbar/Toolbar.jsx b/web/client/components/misc/toolbar/Toolbar.jsx
@@ -6,7 +6,6 @@
  * LICENSE file in the root directory of this source tree.
 */
 import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import { ButtonGroup } from 'react-bootstrap';
 
 import ToolbarButton from './ToolbarButton';
@@ -23,25 +22,18 @@ import ToolbarButton from './ToolbarButton';
 *  - All properties for @see components.misc.toolbar.ToolbarButton and react-bootstrap button
 * @param  {object} [btnDefaultProps] A series of default Props for buttons
 * @param  {object} [btnGroupProps] Props to add to the react-bootstrap `ButtonGroup` component
-* @param  {object|boolean} [transitionProps] properties of ReactCSSTransitionGroup. If false transition are  disabled. (for vertical toolbar)
 */
 export default ({
     buttons = [],
     btnGroupProps = {},
-    btnDefaultProps = {},
-    transitionProps = {
-        transitionName: "toolbar-btn-transition",
-        transitionEnterTimeout: 300,
-        transitionLeaveTimeout: 300
-    }} = {}) => {
+    btnDefaultProps = {}
+}) => {
     const renderButtons = () => buttons.map(
         ({ visible = true, Element, renderButton, ...props }, index) => visible
             ? (renderButton ? renderButton : (Element && <Element key={props.key || index} {...props} /> || <ToolbarButton key={props.key || index} {...btnDefaultProps} {...props} />))
             : null
     );
     return (<ButtonGroup {...btnGroupProps}>
-        {transitionProps
-            ? <ReactCSSTransitionGroup {...transitionProps}>{renderButtons()}</ReactCSSTransitionGroup>
-            : renderButtons()}
+        {renderButtons()}
     </ButtonGroup>);
 };
diff --git a/web/client/components/misc/toolbar/__tests__/Toolbar-test.jsx b/web/client/components/misc/toolbar/__tests__/Toolbar-test.jsx
@@ -57,7 +57,7 @@ describe("Toolbar component", () => {
     });
     // Optionally removes css animation group
     it('test disable animation', () => {
-        ReactDOM.render(<Toolbar key={"toolbar"} transitionProps={false} buttons={[{
+        ReactDOM.render(<Toolbar key={"toolbar"} buttons={[{
             id: "button",
             visible: true,
             tooltip: "hello",
diff --git a/web/client/components/search/SearchBarToolbar.jsx b/web/client/components/search/SearchBarToolbar.jsx
@@ -35,7 +35,6 @@ export default ({
     {loading && <Spinner style={getSpinnerStyle(splitTools)} spinnerName="pulse" noFadeIn/>}
     <Toolbar
         btnGroupProps = {{ className: 'btn-group-menu-options'}}
-        transitionProps = {null}
         btnDefaultProps = {{ className: 'square-button', bsStyle: 'primary' }}
         {...toolbarProps}
         buttons={toolbarButtons}/>
diff --git a/web/client/plugins/Annotations/components/GeometryEditor.jsx b/web/client/plugins/Annotations/components/GeometryEditor.jsx
@@ -18,7 +18,6 @@ class GeometryEditor extends React.Component {
         options: PropTypes.object,
         onRemove: PropTypes.func,
         onChange: PropTypes.func,
-        transitionProps: PropTypes.object,
         selected: PropTypes.object,
         featureType: PropTypes.string,
         format: PropTypes.string,
@@ -47,11 +46,6 @@ class GeometryEditor extends React.Component {
         onChangeFormat: () => {},
         onSetInvalidSelected: () => {},
         onChangeText: () => {},
-        transitionProps: {
-            transitionName: "switch-panel-transition",
-            transitionEnterTimeout: 300,
-            transitionLeaveTimeout: 300
-        },
         onValidateFeature: () => {},
         enableHeightField: false
     };
diff --git a/web/client/plugins/Map.jsx b/web/client/plugins/Map.jsx
@@ -9,7 +9,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect, createPlugin } from '../utils/PluginsUtils';
-import Spinner from 'react-spinkit';
 import './map/css/map.css';
 import Message from '../components/I18N/Message';
 import ConfigUtils from '../utils/ConfigUtils';
@@ -34,6 +33,7 @@ import backgroundSelector from "../epics/backgroundselector";
 import API from '../api/catalog';
 import { MapLibraries } from '../utils/MapTypeUtils';
 import {getHighlightLayerOptions} from "../utils/HighlightUtils";
+import Spinner from '../components/layout/Spinner';
 
 /**
  * The Map plugin allows adding mapping library dependent functionality using support tools.
@@ -429,9 +429,11 @@ class MapPlugin extends React.Component {
             height: "100%",
             display: "flex",
             justifyContent: "center",
-            alignItems: "center"
+            alignItems: "center",
+            gap: "0.5rem",
+            fontSize: "1rem"
         }} className="mapLoadingMessage">
-            {this.props.loadingSpinner ? <Spinner spinnerName="circle" overrideSpinnerClassName="spinner"/> : null}
+            {this.props.loadingSpinner ? <Spinner /> : null}
             <Message msgId={this.props.mapLoadingMessage}/>
         </div>);
     }
diff --git a/web/client/plugins/QueryPanel.jsx b/web/client/plugins/QueryPanel.jsx
@@ -343,7 +343,6 @@ class QueryPanel extends React.Component {
             />
             <Portal>
                 <ResizableModal
-                    fade
                     show={this.state.showModal}
                     title={<Message msgId="queryform.changedFilter"/>}
                     size="xs"
diff --git a/web/client/plugins/RulesEditor.jsx b/web/client/plugins/RulesEditor.jsx
@@ -91,14 +91,14 @@ class RulesEditorComponent extends React.Component {
              return this.props.editing
                  ? <div className="rulesmanager-editor"><Editor disableDetails={this.props.disableDetails} loading={this.props.loading} enabled={this.props.editing} onClose={() => this.props.setEditing(false)} catalog={this.props.catalog}/></div>
                  : (<div className="ms-vertical-toolbar rules-editor re-toolbar" id={this.props.id}>
-                     <Toolbar loading={this.props.loading} transitionProps={false} btnGroupProps={{vertical: true}} btnDefaultProps={{ tooltipPosition: 'right', className: 'square-button', bsStyle: 'primary'}} />
+                     <Toolbar loading={this.props.loading} btnGroupProps={{vertical: true}} btnDefaultProps={{ tooltipPosition: 'right', className: 'square-button', bsStyle: 'primary'}} />
                  </div>);
          }
          // render for gs instances
          return this.props.editingGSInstance
              ? <div className="rulesmanager-editor"><GSInstanceEditorComp disableDetails={this.props.disableDetails} loading={this.props.loading} enabled={this.props.editingGSInstance} onClose={() => this.props.setEditing(false)} catalog={this.props.catalog}/></div>
              : (<div className="ms-vertical-toolbar rules-editor re-toolbar" id={this.props.id}>
-                 <Toolbar loading={this.props.loading} transitionProps={false} btnGroupProps={{vertical: true}} btnDefaultProps={{ tooltipPosition: 'right', className: 'square-button', bsStyle: 'primary'}} />
+                 <Toolbar loading={this.props.loading} btnGroupProps={{vertical: true}} btnDefaultProps={{ tooltipPosition: 'right', className: 'square-button', bsStyle: 'primary'}} />
              </div>);
      }
 }
diff --git a/web/client/plugins/Toolbar.jsx b/web/client/plugins/Toolbar.jsx
@@ -10,20 +10,11 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { CSSTransitionGroup } from 'react-transition-group';
 import { isFeatureGridOpen } from '../selectors/featuregrid';
 import { mapLayoutValuesSelector } from '../selectors/maplayout';
 import { createSelector } from 'reselect';
 import ToolsContainer from './containers/ToolsContainer';
 
-class AnimatedContainer extends React.Component {
-    render() {
-        const {children, ...props} = this.props;
-        return (<CSSTransitionGroup {...props} transitionName="toolbarexpand" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
-            {children}
-        </CSSTransitionGroup>);
-    }
-}
 // only for tests
 class NormalContainer extends React.Component {
     render() {
@@ -109,8 +100,8 @@ class Toolbar extends React.Component {
     };
 
     render() {
-        const Container = this.props.disableAnimation ? NormalContainer : AnimatedContainer;
-        return (<ToolsContainer id={this.props.id} className={"mapToolbar btn-group-" + this.props.layout}
+        const Container = NormalContainer;
+        return (<ToolsContainer id={this.props.id} className={`mapToolbar ${this.props.layout === 'horizontal' ? 'btn-group' : 'btn-group-' + this.props.layout}`}
             toolCfg={this.props.btnConfig}
             container={Container}
             toolStyle={this.props.buttonStyle}
diff --git a/web/client/themes/default/less/common.less b/web/client/themes/default/less/common.less
diff --git a/web/client/themes/default/less/loaders.less b/web/client/themes/default/less/loaders.less
diff --git a/web/client/themes/default/less/map-toolbar.less b/web/client/themes/default/less/map-toolbar.less
diff --git a/web/client/themes/default/less/modal.less b/web/client/themes/default/less/modal.less
diff --git a/web/client/themes/default/less/resources-catalog/_resources-panel-wrapper.less b/web/client/themes/default/less/resources-catalog/_resources-panel-wrapper.less
diff --git a/web/client/themes/default/less/resources-catalog/_utility.less b/web/client/themes/default/less/resources-catalog/_utility.less
diff --git a/web/client/themes/default/less/square-button.less b/web/client/themes/default/less/square-button.less
diff --git a/web/client/themes/default/less/switchpanel.less b/web/client/themes/default/less/switchpanel.less

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,6 @@ class Builder extends React.Component {`
`101`	`101`	`className: "square-button",`
`102`	`102`	`bsStyle: "primary"`
`103`	`103`	`}}`
`104`		`- transitionProps={false}`
`105`	`104`	`buttons={[`
`106`	`105`	`{`
`107`	`106`	`visible: !isSettingsEnabled,`