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

11 files changed, 73 insertions, 3 deletions

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 120846b8d..c05033b51 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -379,6 +379,7 @@ export default class ChannelHeader extends React.Component {
         if (isDirect) {
             dropdownContents.push(
                 <li
+                    id='channelEditHeaderDirect'
                     key='edit_header_direct'
                     role='presentation'
                 >
@@ -397,6 +398,7 @@ export default class ChannelHeader extends React.Component {
         } else if (isGroup) {
             dropdownContents.push(
                 <li
+                    id='channelEditHeaderGroup'
                     key='edit_header_direct'
                     role='presentation'
                 >
@@ -415,6 +417,7 @@ export default class ChannelHeader extends React.Component {
 
             dropdownContents.push(
                 <li
+                    id='channelnotificationPreferencesGroup'
                     key='notification_preferences'
                     role='presentation'
                 >
@@ -437,6 +440,7 @@ export default class ChannelHeader extends React.Component {
 
             dropdownContents.push(
                 <li
+                    id='channelAddMembersGroup'
                     key='add_members'
                     role='presentation'
                 >
@@ -455,6 +459,7 @@ export default class ChannelHeader extends React.Component {
         } else {
             dropdownContents.push(
                 <li
+                    id='channelViewInfo'
                     key='view_info'
                     role='presentation'
                 >
@@ -473,6 +478,7 @@ export default class ChannelHeader extends React.Component {
 
             dropdownContents.push(
                 <li
+                    id='channelNotificationPreferences'
                     key='notification_preferences'
                     role='presentation'
                 >
@@ -503,6 +509,7 @@ export default class ChannelHeader extends React.Component {
             if (!ChannelStore.isDefault(channel)) {
                 dropdownContents.push(
                     <li
+                        id='channelAddMembers'
                         key='add_members'
                         role='presentation'
                     >
@@ -522,6 +529,7 @@ export default class ChannelHeader extends React.Component {
 
                 dropdownContents.push(
                     <li
+                        id='channelManageMembers'
                         key='manage_members'
                         role='presentation'
                     >
@@ -548,6 +556,7 @@ export default class ChannelHeader extends React.Component {
 
             const deleteOption = (
                 <li
+                    id='channelDelete'
                     key='delete_channel'
                     role='presentation'
                 >
@@ -570,6 +579,7 @@ export default class ChannelHeader extends React.Component {
             if (ChannelUtils.showManagementOptions(channel, isAdmin, isSystemAdmin, isChannelAdmin)) {
                 dropdownContents.push(
                     <li
+                        id='channelEditHeader'
                         key='set_channel_header'
                         role='presentation'
                     >
@@ -591,6 +601,7 @@ export default class ChannelHeader extends React.Component {
 
                 dropdownContents.push(
                     <li
+                        id='channelEditPurpose'
                         key='set_channel_purpose'
                         role='presentation'
                     >
@@ -612,6 +623,7 @@ export default class ChannelHeader extends React.Component {
 
                 dropdownContents.push(
                     <li
+                        id='channelRename'
                         key='rename_channel'
                         role='presentation'
                     >
@@ -651,6 +663,7 @@ export default class ChannelHeader extends React.Component {
             if (!ChannelStore.isDefault(channel) && canLeave) {
                 dropdownContents.push(
                     <li
+                        id='channelLeave'
                         key='leave_channel'
                         role='presentation'
                     >
@@ -707,6 +720,7 @@ export default class ChannelHeader extends React.Component {
                 overlay={toggleFavoriteTooltip}
             >
                 <a
+                    id='toggleFavorite'
                     href='#'
                     onClick={this.toggleFavorite}
                     className='channel-header__favorites'
@@ -751,10 +765,10 @@ export default class ChannelHeader extends React.Component {
                                     {toggleFavorite}
                                     <div className='dropdown'>
                                         <a
+                                            id='channelHeaderDropdown'
                                             href='#'
                                             className='dropdown-toggle theme'
                                             type='button'
-                                            id='channel_header_dropdown'
                                             data-toggle='dropdown'
                                             aria-expanded='true'
                                         >
@@ -789,7 +803,7 @@ export default class ChannelHeader extends React.Component {
                                 <a
                                     href='#'
                                     type='button'
-                                    id='pinned-posts-button'
+                                    id='pinnedPostsButton'
                                     className='pinned-posts-button'
                                     onClick={this.getPinnedPosts}
                                 >
@@ -813,6 +827,7 @@ export default class ChannelHeader extends React.Component {
                                         overlay={recentMentionsTooltip}
                                     >
                                         <a
+                                            id='searchMentions'
                                             href='#'
                                             type='button'
                                             onClick={this.searchMentions}
@@ -830,6 +845,7 @@ export default class ChannelHeader extends React.Component {
                                         overlay={flaggedTooltip}
                                     >
                                         <a
+                                            id='flaggedPostsButton'
                                             href='#'
                                             type='button'
                                             onClick={this.getFlagged}
diff --git a/webapp/components/channel_invite_button.jsx b/webapp/components/channel_invite_button.jsx
index 7c2718cb9..2ef8fb4af 100644
--- a/webapp/components/channel_invite_button.jsx
+++ b/webapp/components/channel_invite_button.jsx
@@ -55,6 +55,7 @@ export default class ChannelInviteButton extends React.Component {
     render() {
         return (
             <SpinnerButton
+                id='addMembers'
                 className='btn btn-sm btn-primary'
                 onClick={this.handleClick}
                 spinning={this.state.addingUser}
diff --git a/webapp/components/channel_members_dropdown.jsx b/webapp/components/channel_members_dropdown.jsx
index a7b3259af..5ccdcd4c1 100644
--- a/webapp/components/channel_members_dropdown.jsx
+++ b/webapp/components/channel_members_dropdown.jsx
@@ -131,6 +131,7 @@ export default class ChannelMembersDropdown extends React.Component {
                 removeFromChannel = (
                     <li role='presentation'>
                         <a
+                            id='removeFromChannel'
                             role='menuitem'
                             href='#'
                             onClick={this.handleRemoveFromChannel}
@@ -149,6 +150,7 @@ export default class ChannelMembersDropdown extends React.Component {
                 makeChannelMember = (
                     <li role='presentation'>
                         <a
+                            id='makeChannelMember'
                             role='menuitem'
                             href='#'
                             onClick={this.handleMakeChannelMember}
@@ -167,6 +169,7 @@ export default class ChannelMembersDropdown extends React.Component {
                 makeChannelAdmin = (
                     <li role='presentation'>
                         <a
+                            id='makeChannelAdmin'
                             role='menuitem'
                             href='#'
                             onClick={this.handleMakeChannelAdmin}
@@ -183,6 +186,7 @@ export default class ChannelMembersDropdown extends React.Component {
             return (
                 <div className='dropdown member-drop'>
                     <a
+                        id='channelMemberDropdown'
                         href='#'
                         className='dropdown-toggle theme'
                         type='button'
@@ -206,6 +210,7 @@ export default class ChannelMembersDropdown extends React.Component {
         } else if (this.canRemoveMember()) {
             return (
                 <button
+                    id='removeMember'
                     type='button'
                     className='btn btn-danger btn-message'
                     onClick={this.handleRemoveFromChannel}
diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx
index 96d90e5cc..ec5423fe2 100644
--- a/webapp/components/channel_members_modal.jsx
+++ b/webapp/components/channel_members_modal.jsx
@@ -41,6 +41,7 @@ export default class ChannelMembersModal extends React.Component {
                             />
                         </Modal.Title>
                         <a
+                            id='showInviteModal'
                             className='btn btn-md btn-primary'
                             href='#'
                             onClick={() => {
@@ -71,4 +72,4 @@ ChannelMembersModal.propTypes = {
     onModalDismissed: React.PropTypes.func.isRequired,
     showInviteModal: React.PropTypes.func.isRequired,
     channel: React.PropTypes.object.isRequired
-};
\ No newline at end of file
+};
diff --git a/webapp/components/channel_notifications_modal.jsx b/webapp/components/channel_notifications_modal.jsx
index e78755fe3..2f76f19e1 100644
--- a/webapp/components/channel_notifications_modal.jsx
+++ b/webapp/components/channel_notifications_modal.jsx
@@ -135,6 +135,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelNotificationGlobalDefault'
                                 type='radio'
                                 name='desktopNotificationLevel'
                                 checked={notifyActive[0]}
@@ -153,6 +154,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelNotificationAllActivity'
                                 type='radio'
                                 name='desktopNotificationLevel'
                                 checked={notifyActive[1]}
@@ -165,6 +167,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelNotificationMentions'
                                 type='radio'
                                 name='desktopNotificationLevel'
                                 checked={notifyActive[2]}
@@ -177,6 +180,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelNotificationNever'
                                 type='radio'
                                 name='desktopNotificationLevel'
                                 checked={notifyActive[3]}
@@ -287,6 +291,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelUnreadAll'
                                 type='radio'
                                 name='markUnreadLevel'
                                 checked={this.state.unreadLevel === 'all'}
@@ -302,6 +307,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelUnreadMentions'
                                 type='radio'
                                 name='markUnreadLevel'
                                 checked={this.state.unreadLevel === 'mention'}
@@ -459,6 +465,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelPushNotificationGlobalDefault'
                                 type='radio'
                                 name='pushNotificationLevel'
                                 checked={notifyActive[0]}
@@ -477,6 +484,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelPushNotificationAllActivity'
                                 type='radio'
                                 name='pushNotificationLevel'
                                 checked={notifyActive[1]}
@@ -489,6 +497,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelPushNotificationMentions'
                                 type='radio'
                                 name='pushNotificationLevel'
                                 checked={notifyActive[2]}
@@ -501,6 +510,7 @@ export default class ChannelNotificationsModal extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='channelPushNotificationNever'
                                 type='radio'
                                 name='pushNotificationLevel'
                                 checked={notifyActive[3]}
diff --git a/webapp/components/team_general_tab.jsx b/webapp/components/team_general_tab.jsx
index bc6c70e7f..288faae6c 100644
--- a/webapp/components/team_general_tab.jsx
+++ b/webapp/components/team_general_tab.jsx
@@ -275,6 +275,7 @@ class GeneralTab extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='teamOpenInvite'
                                 name='userOpenInviteOptions'
                                 type='radio'
                                 defaultChecked={this.state.allow_open_invite}
@@ -290,6 +291,7 @@ class GeneralTab extends React.Component {
                     <div className='radio'>
                         <label>
                             <input
+                                id='teamOpenInviteNo'
                                 name='userOpenInviteOptions'
                                 type='radio'
                                 defaultChecked={!this.state.allow_open_invite}
@@ -349,6 +351,7 @@ class GeneralTab extends React.Component {
                         <label className='col-sm-5 control-label visible-xs-block'/>
                         <div className='col-sm-12'>
                             <input
+                                id='teamInviteId'
                                 className='form-control'
                                 type='text'
                                 onChange={this.updateInviteId}
@@ -357,6 +360,7 @@ class GeneralTab extends React.Component {
                             />
                             <div className='padding-top x2'>
                                 <a
+                                    id='teamInviteIdRegenerate'
                                     href='#'
                                     onClick={this.handleGenerateInviteId}
                                 >
@@ -430,6 +434,7 @@ class GeneralTab extends React.Component {
                     <label className='col-sm-5 control-label'>{teamNameLabel}</label>
                     <div className='col-sm-7'>
                         <input
+                            id='teamName'
                             className='form-control'
                             type='text'
                             maxLength={Constants.MAX_TEAMNAME_LENGTH.toString()}
@@ -488,6 +493,7 @@ class GeneralTab extends React.Component {
                     <label className='col-sm-5 control-label'>{teamDescriptionLabel}</label>
                     <div className='col-sm-7'>
                         <input
+                            id='teamDescription'
                             className='form-control'
                             type='text'
                             maxLength={Constants.MAX_TEAMDESCRIPTION_LENGTH.toString()}
@@ -537,6 +543,7 @@ class GeneralTab 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/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})}