[MM-53166] Reset notification sounds modal selection when settings canceled (#24871)

* fix: 24849 - reset notification selection

* test: 24849 - add notification e2e test

* test: 24849 - add notification e2e test

* fix: 24849 - lint error

* feat: 24849 - add and enable calls plugin

* fix: 24849 - fix plugins lint

* fix: 24849 - e2e and desktop component

* fix: 24849 - e2e class queries

* test: 24829 - update snapshot

* test: 24849 - change MM code and remove call sound

---------

Co-authored-by: dhnlr <work@dhnlr,com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/user_settings/notifications/desktop_notification_setting/__snapshots__/desktop_notification_settings.test.tsx.snap

@@ -844,6 +844,11 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
                 className="react-select notification-sound-dropdown"
                 classNamePrefix="react-select"
                 clearable={false}
+                components={
+                  Object {
+                    "SingleValue": [Function],
+                  }
+                }
                 defaultInputValue=""
                 defaultMenuIsOpen={false}
                 defaultValue={null}
@@ -1033,6 +1038,11 @@ exports[`components/user_settings/notifications/DesktopNotificationSettings shou
               className="react-select notification-sound-dropdown"
               classNamePrefix="react-select"
               clearable={false}
+              components={
+                Object {
+                  "SingleValue": [Function],
+                }
+              }
               defaultInputValue=""
               defaultMenuIsOpen={false}
               defaultValue={null}

webapp/channels/src/components/user_settings/notifications/desktop_notification_setting/desktop_notification_settings.tsx

@@ -53,11 +53,9 @@ export default class DesktopNotificationSettings extends React.PureComponent<Pro
 
     constructor(props: Props) {
         super(props);
-        const selectedOption = {value: props.selectedSound, label: props.selectedSound};
-        const callsSelectedOption = {value: props.callsSelectedSound, label: props.callsSelectedSound};
         this.state = {
-            selectedOption,
-            callsSelectedOption,
+            selectedOption: {value: props.selectedSound, label: props.selectedSound},
+            callsSelectedOption: {value: props.callsSelectedSound, label: props.callsSelectedSound},
             blurDropdown: false,
         };
         this.dropdownSoundRef = React.createRef();
@@ -163,6 +161,7 @@ export default class DesktopNotificationSettings extends React.PureComponent<Pro
                         value={this.state.selectedOption}
                         isSearchable={false}
                         ref={this.dropdownSoundRef}
+                        components={{SingleValue: (props) => <div data-testid='displaySoundNotificationValue'>{props.children}</div>}}
                     /></div>);
             }
 
@@ -191,6 +190,7 @@ export default class DesktopNotificationSettings extends React.PureComponent<Pro
                             value={this.state.callsSelectedOption}
                             isSearchable={false}
                             ref={this.callsDropdownRef}
+                            components={{SingleValue: (props) => <div data-testid='displayCallsSoundNotificationValue'>{props.children}</div>}}
                         /></div>);
                 }
 
@@ -502,10 +502,15 @@ export default class DesktopNotificationSettings extends React.PureComponent<Pro
 
     componentDidUpdate(prevProps: Props) {
         this.blurDropdown();
-
         if (prevProps.active && !this.props.active && this.props.areAllSectionsInactive) {
             this.focusEditButton();
         }
+        if (this.props.selectedSound !== prevProps.selectedSound) {
+            this.setState({selectedOption: {value: this.props.selectedSound, label: this.props.selectedSound}});
+        }
+        if (this.props.callsSelectedSound !== prevProps.callsSelectedSound) {
+            this.setState({callsSelectedOption: {value: this.props.callsSelectedSound, label: this.props.callsSelectedSound}});
+        }
     }
 
     render() {