Fixing issue with ids for selenium (#5859)

* Fixing issue with ids for selenium

* removing comment

3 files changed, 12 insertions, 3 deletions

diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx
index 9f3c4f0cf..2da500394 100644
--- a/webapp/components/setting_item_max.jsx
+++ b/webapp/components/setting_item_max.jsx
@@ -107,7 +107,7 @@ export default class SettingItemMax extends React.Component {
                             {clientError}
                             {submit}
                             <a
-                                id={this.props.title + 'Cancel'}
+                                id={Utils.createSafeId(this.props.title.toString() + 'Cancel')}
                                 className='btn btn-sm'
                                 href='#'
                                 onClick={this.props.updateSection}
diff --git a/webapp/components/setting_item_min.jsx b/webapp/components/setting_item_min.jsx
index 4f756c46e..da86ed4a7 100644
--- a/webapp/components/setting_item_min.jsx
+++ b/webapp/components/setting_item_min.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import {FormattedMessage} from 'react-intl';
+import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
 
@@ -12,7 +13,7 @@ export default class SettingItemMin extends React.Component {
             editButton = (
                 <li className='col-xs-12 col-sm-3 section-edit'>
                     <a
-                        id={this.props.title}
+                        id={Utils.createSafeId(this.props.title.toString() + 'Edit')}
                         className='theme'
                         href='#'
                         onClick={this.props.updateSection}
@@ -35,7 +36,7 @@ export default class SettingItemMin extends React.Component {
                 <li className='col-xs-12 col-sm-9 section-title'>{this.props.title}</li>
                 {editButton}
                 <li
-                    id={this.props.title + 'Desc'}
+                    id={Utils.createSafeId(this.props.title.toString() + 'Desc')}
                     className='col-xs-12 section-describe'
                 >
                     {this.props.describe}
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index b3370e88c..820f1a1c7 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -31,6 +31,14 @@ export function isMac() {
     return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
 }
 
+export function createSafeId(str) {
+    if (str === null) {
+        return null;
+    }
+
+    return str.replace(' ', '_');
+}
+
 export function cmdOrCtrlPressed(e) {
     return (isMac() && e.metaKey) || (!isMac() && e.ctrlKey && !e.altKey);
 }