Add IDs to Team Settings, Channel Settings, Account Settings (Display & Advanced) (#5823)

* Add IDs to Channel Notification Preferences

* Add IDs to Display Settings

* Add ID to language dropdown

* Add Ids

* Add ids

* Add Ids

* Add Ids

* Add Ids

* Add Id

* Add Ids

* Add Ids

* Fix duplicate Id

5 files changed, 30 insertions, 0 deletions

diff --git a/webapp/components/user_settings/import_theme_modal.jsx b/webapp/components/user_settings/import_theme_modal.jsx
index 7ae057cc4..9d3cff53d 100644
--- a/webapp/components/user_settings/import_theme_modal.jsx
+++ b/webapp/components/user_settings/import_theme_modal.jsx
@@ -173,6 +173,7 @@ export default class ImportThemeModal extends React.Component {
                             <div className='form-group less'>
                                 <div className='col-sm-12'>
                                     <input
+                                        id='themeVector'
                                         type='text'
                                         className='form-control'
                                         value={this.state.value}
@@ -186,6 +187,7 @@ export default class ImportThemeModal extends React.Component {
                         </Modal.Body>
                         <Modal.Footer>
                             <button
+                                id='cancelButton'
                                 type='button'
                                 className='btn btn-default'
                                 onClick={() => this.setState({show: false})}
@@ -196,6 +198,7 @@ export default class ImportThemeModal extends React.Component {
                                 />
                             </button>
                             <button
+                                id='submitButton'
                                 onClick={this.handleSubmit}
                                 type='submit'
                                 className='btn btn-primary'
diff --git a/webapp/components/user_settings/manage_languages.jsx b/webapp/components/user_settings/manage_languages.jsx
index 4f5eb223d..2955c8030 100644
--- a/webapp/components/user_settings/manage_languages.jsx
+++ b/webapp/components/user_settings/manage_languages.jsx
@@ -96,6 +96,7 @@ export default class ManageLanguage extends React.Component {
                 </label>
                 <div className='padding-top'>
                     <select
+                        id='displayLanguage'
                         ref='language'
                         className='form-control'
                         value={this.state.locale}
diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx
index 3459af8b3..970856acc 100644
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -185,6 +185,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                             <div className='radio'>
                                 <label>
                                     <input
+                                        id='postFormattingOn'
                                         type='radio'
                                         name='formatting'
                                         checked={this.state.settings.formatting !== 'false'}
@@ -200,6 +201,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                             <div className='radio'>
                                 <label>
                                     <input
+                                        id='postFormattingOff'
                                         type='radio'
                                         name='formatting'
                                         checked={this.state.settings.formatting === 'false'}
@@ -261,6 +263,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                                 <div className='radio'>
                                     <label>
                                         <input
+                                            id='joinLeaveOn'
                                             type='radio'
                                             name='join_leave'
                                             checked={this.state.settings.join_leave !== 'false'}
@@ -276,6 +279,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                                 <div className='radio'>
                                     <label>
                                         <input
+                                            id='joinLeaveOff'
                                             type='radio'
                                             name='join_leave'
                                             checked={this.state.settings.join_leave === 'false'}
@@ -367,6 +371,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='ctrlSendOn'
                                 type='radio'
                                 name='sendOnCtrlEnter'
                                 checked={ctrlSendActive[0]}
@@ -382,6 +387,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='ctrlSendOff'
                                 type='radio'
                                 name='sendOnCtrlEnter'
                                 checked={ctrlSendActive[1]}
@@ -464,6 +470,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
                             <div className='checkbox'>
                                 <label>
                                     <input
+                                        id={'advancedPreviewFeatures' + feature.label}
                                         type='checkbox'
                                         checked={this.state.settings[Constants.FeatureTogglePrefix + feature.label] === 'true'}
                                         onChange={(e) => {
@@ -524,6 +531,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
             <div>
                 <div className='modal-header'>
                     <button
+                        id='closeButton'
                         type='button'
                         className='close'
                         data-dismiss='modal'
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index f51128b6f..60f322467 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -160,6 +160,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='collapseFormat'
                                 type='radio'
                                 name='collapseFormat'
                                 checked={collapseFormat[0]}
@@ -175,6 +176,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='collapseFormatOff'
                                 type='radio'
                                 name='collapseFormat'
                                 checked={collapseFormat[1]}
@@ -277,6 +279,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='clockFormat12h'
                                 type='radio'
                                 name='clockFormat'
                                 checked={clockFormat[0]}
@@ -292,6 +295,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='clockFormat24h'
                                 type='radio'
                                 name='clockFormat'
                                 checked={clockFormat[1]}
@@ -397,6 +401,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='nameFormatUsername'
                                 type='radio'
                                 name='nameFormat'
                                 checked={nameFormat[1]}
@@ -409,6 +414,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='nameFormatNickname'
                                 type='radio'
                                 name='nameFormat'
                                 checked={nameFormat[0]}
@@ -421,6 +427,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='nameFormatFullName'
                                 type='radio'
                                 name='nameFormat'
                                 checked={nameFormat[2]}
@@ -511,6 +518,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='messageFormatStandard'
                                 type='radio'
                                 name='messageDisplay'
                                 checked={messageDisplay[0]}
@@ -533,6 +541,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='messageFormatCompact'
                                 type='radio'
                                 name='messageDisplay'
                                 checked={messageDisplay[1]}
@@ -626,6 +635,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelDisplayFormatFullScreen'
                                 type='radio'
                                 name='channelDisplayMode'
                                 checked={channelDisplayMode[0]}
@@ -641,6 +651,7 @@ export default class UserSettingsDisplay extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelDisplayFormatCentered'
                                 type='radio'
                                 name='channelDisplayMode'
                                 checked={channelDisplayMode[1]}
@@ -735,6 +746,7 @@ export default class UserSettingsDisplay extends React.Component {
                         className='dropdown'
                     >
                         <select
+                            id='displayFontSelect'
                             className='form-control'
                             type='text'
                             value={this.state.selectedFont}
@@ -830,6 +842,7 @@ export default class UserSettingsDisplay extends React.Component {
             <div>
                 <div className='modal-header'>
                     <button
+                        id='closeButton'
                         type='button'
                         className='close'
                         data-dismiss='modal'
diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx
index 5a286a396..35df0bd13 100644
--- a/webapp/components/user_settings/user_settings_theme.jsx
+++ b/webapp/components/user_settings/user_settings_theme.jsx
@@ -218,6 +218,7 @@ export default class ThemeSetting extends React.Component {
                 >
                     <label>
                         <input
+                            id='standardThemes'
                             type='radio'
                             name='theme'
                             checked={!displayCustom}
@@ -241,6 +242,7 @@ export default class ThemeSetting extends React.Component {
                 >
                     <label>
                         <input
+                            id='customThemes'
                             type='radio'
                             name='theme'
                             checked={displayCustom}
@@ -260,6 +262,7 @@ export default class ThemeSetting extends React.Component {
                 <div key='otherThemes'>
                     <br/>
                     <a
+                        id='otherThemes'
                         href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
                         target='_blank'
                         rel='noopener noreferrer'
@@ -278,6 +281,7 @@ export default class ThemeSetting extends React.Component {
                     className='padding-top'
                 >
                     <a
+                        id='slackImportTheme'
                         className='theme'
                         onClick={this.handleImportModal}
                     >
@@ -295,6 +299,7 @@ export default class ThemeSetting extends React.Component {
                     <div className='checkbox user-settings__submit-checkbox'>
                         <label>
                             <input
+                                id='applyThemeToAllTeams'
                                 type='checkbox'
                                 checked={this.state.applyToAllTeams}
                                 onChange={(e) => this.setState({applyToAllTeams: e.target.checked})}