[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>

e2e-tests/cypress/tests/integration/channels/notifications/reset_notification_when_settings_canceled_spec.js

@@ -0,0 +1,66 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+// Stage: @prod
+// Group: @channels @notifications
+
+describe('Notifications', () => {
+    before(() => {
+        cy.apiInitSetup().then(({team, user, channel}) => {
+            // # Login as user and visit channel
+            cy.apiLogin(user);
+            cy.visit(`/${team.name}/channels/${channel.name}`);
+        });
+    });
+
+    it('MM-T5458 Notification sound modal selection should reset when settings canceled', () => {
+        // # Call function that clicks on Settings -> Notifications -> Desktop Notifications -> Notification sound -> Change sound -> Cancel -> Desktop Notifications
+        openSettingsAndChangeNotification();
+    });
+
+    function openSettingsAndChangeNotification() {
+        // # Open 'Settings' modal
+        cy.uiOpenSettingsModal().within(() => {
+            // # Navigate to Desktop Notification Settings
+            navigateToDesktopNotificationSettings();
+
+            // # Change Notification selection
+            setNotificationSound();
+
+            // # Click Cancel button
+            cy.uiCancelButton().click();
+
+            // # Navigate to Desktop Notification Settings
+            navigateToDesktopNotificationSettings();
+            cy.uiClose();
+        });
+    }
+
+    function setNotificationSound() {
+        // # Change Notification sound selection value is set to Down
+        cy.get('#displaySoundNotification').click();
+        cy.findByText('Down').click();
+
+        // * Verify Notification display changed to Down
+        verifyNotificationSelectionValue('Down');
+    }
+
+    function navigateToDesktopNotificationSettings() {
+        // # Click on the 'Edit' button next to Desktop Notifications
+        cy.get('#desktopEdit').should('be.visible').click();
+
+        // * Verify that the Notification sound is set to Bing
+        verifyNotificationSelectionValue('Bing');
+    }
+
+    function verifyNotificationSelectionValue(value) {
+        // * Verify that the Notification sound is set to certain value
+        cy.get('#displaySoundNotification').findByTestId('displaySoundNotificationValue').should('contain', value);
+    }
+});

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,
+            selectedOption: {value: props.selectedSound, label: props.selectedSound},
-            callsSelectedOption,
+            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() {