Some fixes to tooltips and docs

geosolutions-it · May 28, 2019 · 71b2235 · 71b2235
2 parents be13354 + 410fb7d
commit 71b2235
Show file tree

Hide file tree

Showing 25 changed files with 553 additions and 433 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-[![Stories in Ready](https://badge.waffle.io/geosolutions-it/MapStore2.png?label=ready&title=Ready)](https://waffle.io/geosolutions-it/MapStore2)
 [![Build Status](https://travis-ci.org/geosolutions-it/MapStore2.svg?branch=master)](https://travis-ci.org/geosolutions-it/MapStore2)
 [![Coverage Status](https://coveralls.io/repos/geosolutions-it/MapStore2/badge.svg?branch=master&service=github)](https://coveralls.io/github/geosolutions-it/MapStore2?branch=master)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/1648d484427346e2877006dc287379b6)](https://app.codacy.com/app/geosolutions/MapStore2?utm_source=github.com&utm_medium=referral&utm_content=geosolutions-it/MapStore2&utm_campaign=badger)

diff --git a/docs/developer-guide/release.md b/docs/developer-guide/release.md
@@ -5,9 +5,9 @@ Then you can check each entry on the GitHub issue when done until the release is
 ## Changelog generation
 Add an entry in the changelog like this:
 ```
-## [2018.02.00](https://github.com/geosolutions-it/MapStore2/tree/2018.02.00) (2018-09-11)
+## [2018.02.00](https://github.com/geosolutions-it/MapStore2/tree/v2018.02.00) (2018-09-11)
 
- - **[Full Changelog](https://github.com/geosolutions-it/MapStore2/compare/tv2018.01.00...v2018.02.00)**
+ - **[Full Changelog](https://github.com/geosolutions-it/MapStore2/compare/v2018.01.00...v2018.02.00)**
 
  - **[Implemented enhancements](https://github.com/geosolutions-it/MapStore2/issues?q=is%3Aissue+milestone%3A%222018.02.00%22+is%3Aclosed+label%3Aenhancement)**
 

diff --git a/web/client/actions/controls.js b/web/client/actions/controls.js
@@ -59,8 +59,11 @@ function setControlProperty(control, property, value, toggle) {
  * Sets a list of properties at once
  * @memberof actions.controls
  * @param {string} control  control name
- * @param {object} properties the properties to set, as key (property name), value pairs
+ * @param {array} properties the properties to set, pairs of keys and related values
  * @return {object} of type `SET_CONTROL_PROPERTIES` with control and properties
+ *
+ * @example
+ * setControlProperties('metadataexplorer', 'enabled', true, 'group', 'newgroup')
  */
 function setControlProperties(control, ...properties) {
     return {

diff --git a/web/client/components/TOC/Toolbar.jsx b/web/client/components/TOC/Toolbar.jsx
@@ -71,6 +71,7 @@ class Toolbar extends React.Component {
             confirmDeleteCancelText: '',
             createWidgetTooltip: '',
             addLayerTooltip: '',
+            addLayerToGroupTooltip: '',
             addGroupTooltip: '',
             addSubGroupTooltip: '',
             zoomToTooltip: {
@@ -190,7 +191,7 @@ class Toolbar extends React.Component {
                     <OverlayTrigger
                         key="addLayer"
                         placement="top"
-                        overlay={<Tooltip id="toc-tooltip-addLayer">{this.props.text.addLayerTooltip}</Tooltip>}>
+                            overlay={<Tooltip id="toc-tooltip-addLayer">{status === 'GROUP' ? this.props.text.addLayerToGroupTooltip : this.props.text.addLayerTooltip}</Tooltip>}>
                             <Button key="addLayer" bsStyle="primary" className="square-button-md" onClick={this.addLayer}>
                                 <Glyphicon glyph="add-layer" />
                             </Button>
@@ -200,7 +201,7 @@ class Toolbar extends React.Component {
                     <OverlayTrigger
                         key="addGroup"
                         placement="top"
-                            overlay={<Tooltip id="toc-tooltip-addGroup">{this.getStatus() === 'GROUP' ? this.props.text.addSubGroupTooltip : this.props.text.addGroupTooltip}</Tooltip>}>
+                            overlay={<Tooltip id="toc-tooltip-addGroup">{status === 'GROUP' ? this.props.text.addSubGroupTooltip : this.props.text.addGroupTooltip}</Tooltip>}>
                             <Button key="addGroup" bsStyle="primary" className="square-button-md" onClick={this.addGroup}>
                             <Glyphicon glyph="add-folder" />
                         </Button>
@@ -238,7 +239,7 @@ class Toolbar extends React.Component {
                         key="featuresGrid"
                         placement="top"
                         overlay={<Tooltip id="toc-tooltip-featuresGrid">{this.props.text.featuresGridTooltip}</Tooltip>}>
-                        <Button bsStyle="primary" className="square-button-md" onClick={this.brosweData}>
+                        <Button bsStyle="primary" className="square-button-md" onClick={this.browseData}>
                             <Glyphicon glyph="features-grid" />
                         </Button>
                     </OverlayTrigger>
@@ -308,7 +309,7 @@ class Toolbar extends React.Component {
         </ButtonGroup>) : null;
     }
 
-    brosweData = () => {
+    browseData = () => {
         this.props.onToolsActions.onBrowseData({
             url: this.props.selectedLayers[0].search.url || this.props.selectedLayers[0].url,
             name: this.props.selectedLayers[0].name,

diff --git a/web/client/components/data/identify/viewers/row/PropertiesViewer.jsx b/web/client/components/data/identify/viewers/row/PropertiesViewer.jsx
@@ -44,10 +44,9 @@ class PropertiesViewer extends React.Component {
         }
     };
 
-
     getBodyItems = () => {
         return Object.keys(this.props)
-            .filter(this.toExlude)
+            .filter(this.toExclude)
             .map((key) => {
                 const val = this.renderProperty(this.props[key]);
                 return <p key={key} style={this.props.listStyle}><b>{key}</b> {containsHTML(val) ? <span dangerouslySetInnerHTML={{__html: val}}/> : val}</p>;
@@ -87,6 +86,7 @@ class PropertiesViewer extends React.Component {
         }
         return JSON.stringify(prop);
     };
+
     render() {
         return (
             <div style={this.props.componentStyle}>
@@ -96,7 +96,7 @@ class PropertiesViewer extends React.Component {
         );
     }
 
-    toExlude = (propName) => {
+    toExclude = (propName) => {
         return alwaysExcluded
             .concat(this.props.exclude)
             .indexOf(propName) === -1;

diff --git a/web/client/components/manager/users/GroupCard.jsx b/web/client/components/manager/users/GroupCard.jsx
@@ -24,6 +24,8 @@ class GroupCard extends React.Component {
         style: PropTypes.object,
         group: PropTypes.object,
         innerItemStyle: PropTypes.object,
+        avatarStyle: PropTypes.object,
+        nameStyle: PropTypes.object,
         actions: PropTypes.array
     };
 
@@ -34,7 +36,22 @@ class GroupCard extends React.Component {
             backgroundPosition: "center",
             backgroundRepeat: "repeat-x"
         },
-        innerItemStyle: {"float": "left", margin: "10px"}
+        innerItemStyle: {
+            marginTop: "35px",
+            marginLeft: "9px"
+        },
+        avatarStyle: {
+            margin: "10px"
+        },
+        nameStyle: {
+            position: "absolute",
+            left: "80px",
+            top: "30px",
+            width: "75%",
+            borderBottom: "1px solid #ddd",
+            fontSize: 18,
+            fontWeight: "bold"
+        }
     };
 
     renderStatus = () => {
@@ -47,26 +64,33 @@ class GroupCard extends React.Component {
     };
 
     renderAvatar = () => {
-        return (<div key="avatar" style={this.props.innerItemStyle} ><Button bsStyle="primary" type="button" className="square-button">
+        return (<div key="avatar" style={this.props.avatarStyle} ><Button bsStyle="primary" type="button" className="square-button">
             <Glyphicon glyph="1-group" />
             </Button></div>);
     };
 
     renderDescription = () => {
-        return (<div className="group-thumb-description">
+        return (<div className="group-thumb-description" style={this.props.innerItemStyle}>
             <div><strong><Message msgId="usergroups.description" /></strong></div>
             <div>{this.props.group.description ? this.props.group.description : <Message msgId="usergroups.noDescriptionAvailable" />}</div>
         </div>);
     };
 
+    renderName = () => {
+        return (<div key="name" style={this.props.nameStyle}>{this.props.group.groupName}</div>);
+    };
+
     render() {
         return (
            <GridCard className="group-thumb" style={this.props.style} header={this.props.group.groupName}
                 actions={this.props.actions}
                >
-            {this.renderAvatar()}
+            <div className="user-data-container">
+                {this.renderAvatar()}
+                {this.renderName()}
+                {this.renderDescription()}
+            </div>
             {this.renderStatus()}
-            {this.renderDescription()}
            </GridCard>
         );
     }

diff --git a/web/client/components/manager/users/GroupDialog.jsx b/web/client/components/manager/users/GroupDialog.jsx
@@ -85,9 +85,9 @@ class GroupDialog extends React.Component {
     };
 
     renderGeneral = () => {
-        return (<div style={{clear: "both"}}>
+        return (<div style={{clear: "both", marginTop: "10px"}}>
         <FormGroup>
-            <ControlLabel><Message msgId="usergroups.groupName"/></ControlLabel>
+            <ControlLabel><Message msgId="usergroups.groupName"/>{' '}<span style={{ fontWeight: 'bold' }}>*</span></ControlLabel>
             <FormControl ref="groupName"
                 key="groupName"
                 type="text"
@@ -110,6 +110,7 @@ class GroupDialog extends React.Component {
                 onChange={this.handleChange}
                 value={this.props.group && this.props.group.description || ""}/>
         </FormGroup>
+        <div style={{ fontStyle: 'italic' }}><Message msgId="users.requiredFiedsMessage"/></div>
         </div>);
     };
 
@@ -168,7 +169,7 @@ class GroupDialog extends React.Component {
 
     renderMembersTab = () => {
         let availableUsers = this.props.availableUsers.filter((user) => findIndex(this.getCurrentGroupMembers(), member => member.id === user.id) < 0).map(u => ({value: u.id, label: u.name}));
-        return (<div>
+        return (<div style={{marginTop: "10px"}}>
             <label key="member-label" className="control-label"><Message msgId="usergroups.groupMembers" /></label>
             <div key="member-list" style={
             {
@@ -177,7 +178,7 @@ class GroupDialog extends React.Component {
                 overflow: "auto",
                 boxShadow: "inset 0 2px 5px 0 #AAA"
             }} >{this.renderMembers()}</div>
-            <div key="add-member" >
+            <div key="add-member" style={{marginTop: "10px"}}>
                 <label key="add-member-label" className="control-label"><Message msgId="usergroups.addMember" /></label>
                 <Select
                     isLoading={this.props.availableUsersLoading}
@@ -210,18 +211,18 @@ class GroupDialog extends React.Component {
               >
             <span role="header">
                 <button onClick={this.props.onClose} className="login-panel-close close">
-                    {this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}
+                    {this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span><Glyphicon glyph="1-close"/></span>}
                 </button>
                 <span className="user-panel-title">{(this.props.group && this.props.group.groupName) || <Message msgId="usergroups.newGroup" />}</span>
             </span>
             <div role="body">
-            <Tabs defaultActiveKey={1} onSelect={ ( key) => { this.setState({key}); }} key="tab-panel">
-                <Tab eventKey={1} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 1 ? "success" : "primary"}><Glyphicon glyph="1-group"/></Button>} >
+            <Tabs justified defaultActiveKey={1} onSelect={ ( key) => { this.setState({key}); }} key="tab-panel">
+                <Tab eventKey={1} title={<Glyphicon glyph="1-group" style={{ display: 'block', padding: 8 }} />} >
                     {this.renderGeneral()}
                     {this.checkNameLenght()}
                     {this.checkDescLenght()}
                 </Tab>
-                <Tab eventKey={2} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 2 ? "success" : "primary"}><Glyphicon glyph="1-group-add"/></Button>} >
+                <Tab eventKey={2} title={<Glyphicon glyph="1-group-add" style={{ display: 'block', padding: 8 }} />} >
                     {this.renderMembersTab()}
                 </Tab>
             </Tabs>

diff --git a/web/client/components/manager/users/UserDialog.jsx b/web/client/components/manager/users/UserDialog.jsx
@@ -15,9 +15,9 @@ const PropTypes = require('prop-types');
  */
 
 const React = require('react');
-
 const {Alert, Tabs, Tab, Button, Glyphicon, Checkbox, FormControl, FormGroup, ControlLabel} = require('react-bootstrap');
-
+const tooltip = require('../../../components/misc/enhancers/tooltip');
+const GlyphiconTooltip = tooltip(Glyphicon);
 const Dialog = require('../../../components/misc/Dialog');
 const UserGroups = require('./UserGroups');
 const assign = require('object-assign');
@@ -47,7 +47,8 @@ class UserDialog extends React.Component {
         inputStyle: PropTypes.object,
         attributes: PropTypes.array,
         minPasswordSize: PropTypes.number,
-        hidePasswordFields: PropTypes.bool
+        hidePasswordFields: PropTypes.bool,
+        buttonTooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
     };
 
     static defaultProps = {
@@ -102,20 +103,26 @@ class UserDialog extends React.Component {
     };
 
     renderPasswordFields = () => {
+
         return (
           <div>
               <FormGroup validationState={this.getPwStyle()}>
-                  <ControlLabel><Message msgId="user.password"/></ControlLabel>
+                  <ControlLabel><Message msgId="user.password"/>
+                    {' '}<span style={{ fontWeight: 'bold' }}>*</span>
+                    <GlyphiconTooltip tooltipId="user.passwordMessage" tooltipPosition="right"
+                    glyph="info-sign" style={{position: "relative", marginLeft: "10px", display: "inline-block", width: 24}}
+                    helpText="Password must contain at least 6 characters"/>
+                  </ControlLabel>
                   <FormControl ref="newPassword"
-                      key="newPassword"
-                      type="password"
-                      name="newPassword"
-                      autoComplete="new-password"
-                      style={this.props.inputStyle}
-                      onChange={this.handleChange} />
+                   key="newPassword"
+                   type="password"
+                   name="newPassword"
+                   autoComplete="new-password"
+                   style={this.props.inputStyle}
+                   onChange={this.handleChange} />
               </FormGroup>
               <FormGroup validationState={ (this.isValidPassword() ? "success" : "error") }>
-                  <ControlLabel><Message msgId="user.retypePwd"/></ControlLabel>
+                  <ControlLabel><Message msgId="user.retypePwd"/>{' '}<span style={{ fontWeight: 'bold' }}>*</span></ControlLabel>
                   <FormControl ref="confirmPassword"
                       key="confirmPassword"
                       name="confirmPassword"
@@ -129,9 +136,9 @@ class UserDialog extends React.Component {
     };
 
     renderGeneral = () => {
-        return (<div style={{clear: "both"}}>
+        return (<div style={{clear: "both", marginTop: "10px"}}>
           <FormGroup>
-              <ControlLabel><Message msgId="user.username"/></ControlLabel>
+              <ControlLabel><Message msgId="user.username"/>{' '}<span style={{ fontWeight: 'bold' }}>*</span></ControlLabel>
               <FormControl ref="name"
                   key="name"
                   type="text"
@@ -147,20 +154,21 @@ class UserDialog extends React.Component {
             <option value="USER">USER</option>
           </select>
           <FormGroup>
-              <ControlLabel><Message msgId="users.enabled"/></ControlLabel>
+              <ControlLabel style={{"float": "left", marginRight: "10px"}}><Message msgId="users.enabled"/></ControlLabel>
               <Checkbox
                   defaultChecked={this.props.user && (this.props.user.enabled === undefined ? false : this.props.user.enabled)}
                   type="checkbox"
                   key={"enabled" + (this.props.user ? this.props.user.enabled : "missing")}
                   name="enabled"
                   onClick={(evt) => {this.props.onChange("enabled", evt.target.checked ? true : false); }} />
           </FormGroup>
-          </div>);
+            <div style={{ fontStyle: 'italic' }}><Message msgId="users.requiredFiedsMessage"/></div>
+        </div>);
     };
 
     renderAttributes = () => {
         return this.props.attributes.map((attr, index) => {
-            return (<FormGroup key={"form-n-" + index}>
+            return (<FormGroup key={"form-n-" + index} style={{marginTop: "10px"}}>
               <ControlLabel>{attr.name}</ControlLabel>
               <FormControl ref={"attribute." + attr.name}
               key={"attribute." + attr.name}
@@ -218,18 +226,18 @@ class UserDialog extends React.Component {
           <span role="header">
               <span className="user-panel-title">{(this.props.user && this.props.user.name) || <Message msgId="users.newUser" />}</span>
               <button onClick={this.props.onClose} className="login-panel-close close">
-                  {this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span>×</span>}
+                  {this.props.closeGlyph ? <Glyphicon glyph={this.props.closeGlyph}/> : <span><Glyphicon glyph="1-close"/></span>}
               </button>
           </span>
           <div role="body">
-          <Tabs defaultActiveKey={1} onSelect={ ( key) => { this.setState({key}); }} key="tab-panel" id="userDetails-tabs">
-              <Tab eventKey={1} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 1 ? "success" : "primary"}><Glyphicon glyph="user"/></Button>} >
+          <Tabs justified defaultActiveKey={1} onSelect={ ( key) => { this.setState({key}); }} key="tab-panel" id="userDetails-tabs">
+              <Tab eventKey={1} title={<Glyphicon glyph="user" style={{ display: 'block', padding: 8 }}/>} >
                   {this.renderGeneral()}
               </Tab>
-              <Tab eventKey={2} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 2 ? "success" : "primary"}><Glyphicon glyph="info-sign"/></Button>} >
+              <Tab eventKey={2} title={<Glyphicon glyph="info-sign" style={{ display: 'block', padding: 8 }}/>} >
                   {this.renderAttributes()}
               </Tab>
-              <Tab eventKey={3} title={<Button className="square-button" bsSize={this.props.buttonSize} bsStyle={this.state.key === 3 ? "success" : "primary"}><Glyphicon glyph="1-group"/></Button>} >
+              <Tab eventKey={3} title={<Glyphicon glyph="1-group" style={{ display: 'block', padding: 8 }}/>} >
                   {this.renderGroups()}
               </Tab>
           </Tabs>
@@ -244,7 +252,7 @@ class UserDialog extends React.Component {
     isMainPasswordValid = (password) => {
         let p = password || this.props.user.newPassword || "";
         // Empty password field will signal the GeoStoreDAO not to change the password
-        if (p === "") {
+        if (p === "" && this.props.user && this.props.user.id) {
             return true;
         }
         return (p.length >= this.props.minPasswordSize) && !(/[^a-zA-Z0-9\!\@\#\$\%\&\*]/.test(p));

diff --git a/web/client/components/manager/users/UserGroups.jsx b/web/client/components/manager/users/UserGroups.jsx
@@ -63,13 +63,14 @@ class UserCard extends React.Component {
         value={ (this.props.user && this.props.user.groups ? this.props.user.groups : this.getDefaultGroups() ).map(group => group.id) }
         options={this.getOptions()}
         onChange={this.onChange}
+        style={{marginTop: "10px"}}
         />);
     };
 
     render() {
         return this.props.groups ? (
-           <div key="groups-page">
-             <span><Message msgId="users.selectedGroups" /></span>
+           <div style={{marginTop: "10px"}} key="groups-page">
+             <span><Message msgId="users.selectedGroups"/></span>
              {this.renderGroupsSelector()}
          </div>
         ) : null;