[MM-59051] : Email notification setting 'Immediately' is unclear given the help text description [Fixed] (#29940)

* Altered the forms, some little more work to go

* Adjusted the status rendering according to chosed options when email settings dialoge is closed

* addressed linting issues

* Update snapshots

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

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

@@ -30,14 +30,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
     inputs={
       Array [
         <fieldset>
-          <legend
+          <fieldset>
-            className="form-legend"
-          >
-            <Memo(MemoizedFormattedMessage)
-              defaultMessage="Send email notifications"
-              id="user.settings.notifications.email.send"
-            />
-          </legend>
             <div
               className="radio"
             >
@@ -52,8 +45,8 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   type="radio"
                 />
                 <Memo(MemoizedFormattedMessage)
-                defaultMessage="Immediately"
+                  defaultMessage="On"
-                id="user.settings.notifications.email.immediately"
+                  id="user.settings.notifications.email.on"
                 />
               </label>
             </div>
@@ -71,19 +64,19 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   type="radio"
                 />
                 <Memo(MemoizedFormattedMessage)
-                defaultMessage="Never"
+                  defaultMessage="Off"
-                id="user.settings.notifications.email.never"
+                  id="user.settings.notifications.email.off"
                 />
               </label>
             </div>
+          </fieldset>
           <div
             className="mt-3"
           >
             <Memo(MemoizedFormattedMessage)
-              defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+              defaultMessage="When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
               id="user.settings.notifications.emailInfo"
             />
-             
           </div>
         </fieldset>,
         null,
@@ -130,18 +123,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
             <fieldset
               key="userNotificationEmailOptions"
             >
-              <legend
+              <fieldset>
-                className="form-legend"
-              >
-                <FormattedMessage
-                  defaultMessage="Send email notifications"
-                  id="user.settings.notifications.email.send"
-                >
-                  <span>
-                    Send email notifications
-                  </span>
-                </FormattedMessage>
-              </legend>
                 <div
                   className="radio"
                 >
@@ -156,11 +138,11 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                       type="radio"
                     />
                     <FormattedMessage
-                    defaultMessage="Immediately"
+                      defaultMessage="On"
-                    id="user.settings.notifications.email.immediately"
+                      id="user.settings.notifications.email.on"
                     >
                       <span>
-                      Immediately
+                        On
                       </span>
                     </FormattedMessage>
                   </label>
@@ -179,27 +161,27 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                       type="radio"
                     />
                     <FormattedMessage
-                    defaultMessage="Never"
+                      defaultMessage="Off"
-                    id="user.settings.notifications.email.never"
+                      id="user.settings.notifications.email.off"
                     >
                       <span>
-                      Never
+                        Off
                       </span>
                     </FormattedMessage>
                   </label>
                 </div>
+              </fieldset>
               <div
                 className="mt-3"
               >
                 <FormattedMessage
-                  defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+                  defaultMessage="When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
                   id="user.settings.notifications.emailInfo"
                 >
                   <span>
-                    Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.
+                    When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.
                   </span>
                 </FormattedMessage>
-                 
               </div>
             </fieldset>
           </div>
@@ -287,8 +269,8 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
 <SettingItemMin
   describe={
     <Memo(MemoizedFormattedMessage)
-      defaultMessage="Never"
+      defaultMessage="Off"
-      id="user.settings.notifications.email.never"
+      id="user.settings.notifications.email.off"
     />
   }
   section="email"
@@ -306,8 +288,8 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
 <SettingItemMin
   describe={
     <Memo(MemoizedFormattedMessage)
-      defaultMessage="Immediately"
+      defaultMessage="On"
-      id="user.settings.notifications.email.immediately"
+      id="user.settings.notifications.email.on"
     />
   }
   section="email"
@@ -359,6 +341,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
               id="user.settings.notifications.email.send"
             />
           </legend>
+          <fieldset>
             <div
               className="radio"
             >
@@ -373,12 +356,11 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   type="radio"
                 />
                 <Memo(MemoizedFormattedMessage)
-                defaultMessage="Immediately"
+                  defaultMessage="As soon as you’re away for 5 minutes"
-                id="user.settings.notifications.email.immediately"
+                  id="user.settings.notifications.email.asSoonAsYouAreAwayForFiveMinutes"
                 />
               </label>
             </div>
-          <fieldset>
             <div
               className="radio"
             >
@@ -422,7 +404,6 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 />
               </label>
             </div>
-          </fieldset>
             <div
               className="radio"
             >
@@ -442,16 +423,12 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 />
               </label>
             </div>
+          </fieldset>
           <div
             className="mt-3"
           >
             <Memo(MemoizedFormattedMessage)
-              defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+              defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes. If you choose to receive notifications every 15 minutes or every hour, notifications during that period will be combined into a single email."
-              id="user.settings.notifications.emailInfo"
-            />
-             
-            <Memo(MemoizedFormattedMessage)
-              defaultMessage="Notifications received over the time period selected are combined and sent in a single email."
               id="user.settings.notifications.emailBatchingInfo"
             />
           </div>
@@ -512,6 +489,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                   </span>
                 </FormattedMessage>
               </legend>
+              <fieldset>
                 <div
                   className="radio"
                 >
@@ -526,16 +504,15 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                       type="radio"
                     />
                     <FormattedMessage
-                    defaultMessage="Immediately"
+                      defaultMessage="As soon as you’re away for 5 minutes"
-                    id="user.settings.notifications.email.immediately"
+                      id="user.settings.notifications.email.asSoonAsYouAreAwayForFiveMinutes"
                     >
                       <span>
-                      Immediately
+                        As soon as you’re away for 5 minutes
                       </span>
                     </FormattedMessage>
                   </label>
                 </div>
-              <fieldset>
                 <div
                   className="radio"
                 >
@@ -587,7 +564,6 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                     </FormattedMessage>
                   </label>
                 </div>
-              </fieldset>
                 <div
                   className="radio"
                 >
@@ -611,24 +587,16 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                     </FormattedMessage>
                   </label>
                 </div>
+              </fieldset>
               <div
                 className="mt-3"
               >
                 <FormattedMessage
-                  defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+                  defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes. If you choose to receive notifications every 15 minutes or every hour, notifications during that period will be combined into a single email."
-                  id="user.settings.notifications.emailInfo"
-                >
-                  <span>
-                    Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.
-                  </span>
-                </FormattedMessage>
-                 
-                <FormattedMessage
-                  defaultMessage="Notifications received over the time period selected are combined and sent in a single email."
                   id="user.settings.notifications.emailBatchingInfo"
                 >
                   <span>
-                    Notifications received over the time period selected are combined and sent in a single email.
+                    Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes. If you choose to receive notifications every 15 minutes or every hour, notifications during that period will be combined into a single email.
                   </span>
                 </FormattedMessage>
               </div>
@@ -731,14 +699,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
   inputs={
     Array [
       <fieldset>
-        <legend
+        <fieldset>
-          className="form-legend"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Send email notifications"
-            id="user.settings.notifications.email.send"
-          />
-        </legend>
           <div
             className="radio"
           >
@@ -753,8 +714,8 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 type="radio"
               />
               <Memo(MemoizedFormattedMessage)
-              defaultMessage="Immediately"
+                defaultMessage="On"
-              id="user.settings.notifications.email.immediately"
+                id="user.settings.notifications.email.on"
               />
             </label>
           </div>
@@ -772,19 +733,19 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 type="radio"
               />
               <Memo(MemoizedFormattedMessage)
-              defaultMessage="Never"
+                defaultMessage="Off"
-              id="user.settings.notifications.email.never"
+                id="user.settings.notifications.email.off"
               />
             </label>
           </div>
+        </fieldset>
         <div
           className="mt-3"
         >
           <Memo(MemoizedFormattedMessage)
-            defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+            defaultMessage="When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
             id="user.settings.notifications.emailInfo"
           />
-           
         </div>
       </fieldset>,
       null,
@@ -811,14 +772,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
   inputs={
     Array [
       <fieldset>
-        <legend
+        <fieldset>
-          className="form-legend"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Send email notifications"
-            id="user.settings.notifications.email.send"
-          />
-        </legend>
           <div
             className="radio"
           >
@@ -833,8 +787,8 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 type="radio"
               />
               <Memo(MemoizedFormattedMessage)
-              defaultMessage="Immediately"
+                defaultMessage="On"
-              id="user.settings.notifications.email.immediately"
+                id="user.settings.notifications.email.on"
               />
             </label>
           </div>
@@ -852,19 +806,19 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 type="radio"
               />
               <Memo(MemoizedFormattedMessage)
-              defaultMessage="Never"
+                defaultMessage="Off"
-              id="user.settings.notifications.email.never"
+                id="user.settings.notifications.email.off"
               />
             </label>
           </div>
+        </fieldset>
         <div
           className="mt-3"
         >
           <Memo(MemoizedFormattedMessage)
-            defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+            defaultMessage="When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
             id="user.settings.notifications.emailInfo"
           />
-           
         </div>
       </fieldset>,
       <React.Fragment>
@@ -912,14 +866,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
   inputs={
     Array [
       <fieldset>
-        <legend
+        <fieldset>
-          className="form-legend"
-        >
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Send email notifications"
-            id="user.settings.notifications.email.send"
-          />
-        </legend>
           <div
             className="radio"
           >
@@ -934,8 +881,8 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 type="radio"
               />
               <Memo(MemoizedFormattedMessage)
-              defaultMessage="Immediately"
+                defaultMessage="On"
-              id="user.settings.notifications.email.immediately"
+                id="user.settings.notifications.email.on"
               />
             </label>
           </div>
@@ -953,19 +900,19 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 type="radio"
               />
               <Memo(MemoizedFormattedMessage)
-              defaultMessage="Never"
+                defaultMessage="Off"
-              id="user.settings.notifications.email.never"
+                id="user.settings.notifications.email.off"
               />
             </label>
           </div>
+        </fieldset>
         <div
           className="mt-3"
         >
           <Memo(MemoizedFormattedMessage)
-            defaultMessage="Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
+            defaultMessage="When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes."
             id="user.settings.notifications.emailInfo"
           />
-           
         </div>
       </fieldset>,
       null,

webapp/channels/src/components/user_settings/notifications/email_notification_setting/email_notification_setting.tsx

@@ -191,12 +191,21 @@ export default class EmailNotificationSetting extends React.PureComponent<Props,
         } else if (enableEmail) {
             switch (newInterval) {
             case Preferences.INTERVAL_IMMEDIATE:
+                if (this.props.enableEmailBatching) {
                     description = (
                         <FormattedMessage
-                        id='user.settings.notifications.email.immediately'
+                            id='user.settings.notifications.email.asSoonAsYouAreAwayForFiveMinutes'
-                        defaultMessage='Immediately'
+                            defaultMessage='As soon as you’re away for 5 minutes'
                         />
                     );
+                } else {
+                    description = (
+                        <FormattedMessage
+                            id='user.settings.notifications.email.on'
+                            defaultMessage='On'
+                        />
+                    );
+                }
                 break;
             case Preferences.INTERVAL_HOUR:
                 description = (
@@ -216,19 +225,29 @@ export default class EmailNotificationSetting extends React.PureComponent<Props,
                 );
                 break;
             default:
-                description = (
+                description = this.props.enableEmailBatching ? (
                     <FormattedMessage
                         id='user.settings.notifications.email.never'
                         defaultMessage='Never'
                     />
+                ) : (
+                    <FormattedMessage
+                        id='user.settings.notifications.email.off'
+                        defaultMessage='Off'
+                    />
                 );
             }
         } else {
-            description = (
+            description = this.props.enableEmailBatching ? (
                 <FormattedMessage
                     id='user.settings.notifications.email.never'
                     defaultMessage='Never'
                 />
+            ) : (
+                <FormattedMessage
+                    id='user.settings.notifications.email.off'
+                    defaultMessage='Off'
+                />
             );
         }
 
@@ -277,11 +296,29 @@ export default class EmailNotificationSetting extends React.PureComponent<Props,
         }
 
         const {newInterval} = this.state;
-        let batchingOptions = null;
+        let emailOptions = null;
-        let batchingInfo = null;
+        let emailInfo = null;
+        let emailTitle = null;
         if (this.props.enableEmailBatching) {
-            batchingOptions = (
+            emailOptions = (
                 <fieldset>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='emailNotificationImmediately'
+                                type='radio'
+                                name='emailNotifications'
+                                checked={newInterval === Preferences.INTERVAL_IMMEDIATE}
+                                data-enable-email={'true'}
+                                data-email-interval={Preferences.INTERVAL_IMMEDIATE}
+                                onChange={this.handleChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.email.asSoonAsYouAreAwayForFiveMinutes'
+                                defaultMessage='As soon as you’re away for 5 minutes'
+                            />
+                        </label>
+                    </div>
                     <div className='radio'>
                         <label>
                             <input
@@ -317,13 +354,85 @@ export default class EmailNotificationSetting extends React.PureComponent<Props,
                             />
                         </label>
                     </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='emailNotificationNever'
+                                type='radio'
+                                name='emailNotifications'
+                                checked={newInterval === Preferences.INTERVAL_NEVER}
+                                data-enable-email={'false'}
+                                data-email-interval={Preferences.INTERVAL_NEVER}
+                                onChange={this.handleChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.email.never'
+                                defaultMessage='Never'
+                            />
+                        </label>
+                    </div>
                 </fieldset>
             );
 
-            batchingInfo = (
+            emailInfo = (
                 <FormattedMessage
                     id='user.settings.notifications.emailBatchingInfo'
-                    defaultMessage='Notifications received over the time period selected are combined and sent in a single email.'
+                    defaultMessage='Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes. If you choose to receive notifications every 15 minutes or every hour, notifications during that period will be combined into a single email.'
+                />
+            );
+
+            emailTitle = ( // Renders only in case emails are batched
+                <legend className='form-legend'>
+                    <FormattedMessage
+                        id='user.settings.notifications.email.send'
+                        defaultMessage='Send email notifications'
+                    />
+                </legend>
+            );
+        } else {
+            emailOptions = (
+                <fieldset>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='emailNotificationImmediately'
+                                type='radio'
+                                name='emailNotifications'
+                                checked={newInterval === Preferences.INTERVAL_IMMEDIATE}
+                                data-enable-email={'true'}
+                                data-email-interval={Preferences.INTERVAL_IMMEDIATE}
+                                onChange={this.handleChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.email.on'
+                                defaultMessage='On'
+                            />
+                        </label>
+                    </div>
+                    <div className='radio'>
+                        <label>
+                            <input
+                                id='emailNotificationNever'
+                                type='radio'
+                                name='emailNotifications'
+                                checked={newInterval === Preferences.INTERVAL_NEVER}
+                                data-enable-email={'false'}
+                                data-email-interval={Preferences.INTERVAL_NEVER}
+                                onChange={this.handleChange}
+                            />
+                            <FormattedMessage
+                                id='user.settings.notifications.email.off'
+                                defaultMessage='Off'
+                            />
+                        </label>
+                    </div>
+                </fieldset>
+            );
+
+            emailInfo = (
+                <FormattedMessage
+                    id='user.settings.notifications.emailInfo'
+                    defaultMessage='When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.'
                 />
             );
         }
@@ -364,54 +473,10 @@ export default class EmailNotificationSetting extends React.PureComponent<Props,
                 }
                 inputs={[
                     <fieldset key='userNotificationEmailOptions'>
-                        <legend className='form-legend'>
+                        {emailTitle}
-                            <FormattedMessage
+                        {emailOptions}
-                                id='user.settings.notifications.email.send'
-                                defaultMessage='Send email notifications'
-                            />
-                        </legend>
-                        <div className='radio'>
-                            <label>
-                                <input
-                                    id='emailNotificationImmediately'
-                                    type='radio'
-                                    name='emailNotifications'
-                                    checked={newInterval === Preferences.INTERVAL_IMMEDIATE}
-                                    data-enable-email={'true'}
-                                    data-email-interval={Preferences.INTERVAL_IMMEDIATE}
-                                    onChange={this.handleChange}
-                                />
-                                <FormattedMessage
-                                    id='user.settings.notifications.email.immediately'
-                                    defaultMessage='Immediately'
-                                />
-                            </label>
-                        </div>
-                        {batchingOptions}
-                        <div className='radio'>
-                            <label>
-                                <input
-                                    id='emailNotificationNever'
-                                    type='radio'
-                                    name='emailNotifications'
-                                    checked={newInterval === Preferences.INTERVAL_NEVER}
-                                    data-enable-email={'false'}
-                                    data-email-interval={Preferences.INTERVAL_NEVER}
-                                    onChange={this.handleChange}
-                                />
-                                <FormattedMessage
-                                    id='user.settings.notifications.email.never'
-                                    defaultMessage='Never'
-                                />
-                            </label>
-                        </div>
                         <div className='mt-3'>
-                            <FormattedMessage
+                            {emailInfo}
-                                id='user.settings.notifications.emailInfo'
-                                defaultMessage='Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.'
-                            />
-                            {' '}
-                            {batchingInfo}
                         </div>
                     </fieldset>,
                     threadsNotificationSelection,

webapp/channels/src/i18n/en.json

@@ -5839,16 +5839,18 @@
   "user.settings.notifications.desktopNotificationSound.soundUpstairs": "Upstairs",
   "user.settings.notifications.desktopNotificationSound.soundUrgent": "Urgent",
   "user.settings.notifications.desktopNotificationSounds.title": "Desktop notification sounds",
+  "user.settings.notifications.email.asSoonAsYouAreAwayForFiveMinutes": "As soon as you’re away for 5 minutes",
   "user.settings.notifications.email.disabled": "Email notifications are not enabled",
   "user.settings.notifications.email.disabled_long": "Email notifications have not been enabled by your System Administrator.",
   "user.settings.notifications.email.everyHour": "Every hour",
   "user.settings.notifications.email.everyXMinutes": "Every {count, plural, one {minute} other {{count, number} minutes}}",
-  "user.settings.notifications.email.immediately": "Immediately",
   "user.settings.notifications.email.never": "Never",
   "user.settings.notifications.email.notifyForthreads": "Notify me about replies to threads I’m following",
+  "user.settings.notifications.email.off": "Off",
+  "user.settings.notifications.email.on": "On",
   "user.settings.notifications.email.send": "Send email notifications",
-  "user.settings.notifications.emailBatchingInfo": "Notifications received over the time period selected are combined and sent in a single email.",
+  "user.settings.notifications.emailBatchingInfo": "Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes. If you choose to receive notifications every 15 minutes or every hour, notifications during that period will be combined into a single email.",
-  "user.settings.notifications.emailInfo": "Email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.",
+  "user.settings.notifications.emailInfo": "When enabled, email notifications are sent for mentions and direct messages when you are offline or away for more than 5 minutes.",
   "user.settings.notifications.emailNotifications": "Email notifications",
   "user.settings.notifications.header": "Notifications",
   "user.settings.notifications.icon": "Notification Settings Icon",