[FIX] Message view mode setting was missing at user's preferences

packages/rocketchat-api/server/v1/users.js

@@ -335,6 +335,7 @@ RocketChat.API.v1.addRoute('users.setPreferences', { authRequired: true }, {
 				enableAutoAway: Match.Maybe(Boolean),
 				highlights: Match.Maybe(Array),
 				desktopNotificationDuration: Match.Maybe(Number),
+				messageViewMode: Match.Maybe(Number),
 				hideUsernames: Match.Maybe(Boolean),
 				hideRoles: Match.Maybe(Boolean),
 				hideAvatars: Match.Maybe(Boolean),

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -1324,6 +1324,7 @@
   "Message_too_long": "Message too long",
   "Message_VideoRecorderEnabled": "Video Recorder Enabled",
   "Message_VideoRecorderEnabledDescription": "Requires 'video/webm' files to be an accepted media type within 'File Upload' settings.",
+  "Message_view_mode_info": "This changes the amount of space messages take up on screen.",
   "Messages": "Messages",
   "Messages_that_are_sent_to_the_Incoming_WebHook_will_be_posted_here": "Messages that are sent to the Incoming WebHook will be posted here.",
   "Meta": "Meta",
@@ -2170,7 +2171,6 @@
   "View_All": "View All Members",
   "View_Logs": "View Logs",
   "View_mode": "View Mode",
-  "View_mode_info": "This changes the amount of space messages take up on screen.",
   "Viewing_room_administration": "Viewing room administration",
   "Visibility": "Visibility",
   "Visible": "Visible",

packages/rocketchat-lib/server/startup/settings.js

@@ -371,6 +371,25 @@ RocketChat.settings.addGroup('Accounts', function() {
 			'public': true,
 			i18nLabel: 'Enter_Behaviour'
 		});
+		this.add('Accounts_Default_User_Preferences_messageViewMode', 0, {
+			type: 'select',
+			values: [
+				{
+					key: 0,
+					i18nLabel: 'Normal'
+				},
+				{
+					key: 1,
+					i18nLabel: 'Cozy'
+				},
+				{
+					key: 2,
+					i18nLabel: 'Compact'
+				}
+			],
+			'public': true,
+			i18nLabel: 'MessageBox_view_mode'
+		});
 		this.add('Accounts_Default_User_Preferences_emailNotificationMode', 'all', {
 			type: 'select',
 			values: [

packages/rocketchat-ui-account/client/accountPreferences.html

@@ -49,7 +49,7 @@ <h1>{{_ "User_Presence"}}</h1>
 
 					</div>
 					<div class="section">
-						<h1>{{_ "Messages"}}</h1>
+						<h1>{{_ "Notifications"}}</h1>
 						<div class="section-content border-component-color">
 							<div class="input-line double-col">
 								<label>{{_ "Desktop_Notifications"}}</label>
@@ -98,6 +98,21 @@ <h1>{{_ "Messages"}}</h1>
 									</select>
 								</div>
 							</div>
+							<div class="input-line double-col" id="emailNotificationMode">
+								<label>{{_ "Email_Notification_Mode"}}</label>
+								<div>
+									<select class="input-monitor rc-input__element" name="emailNotificationMode">
+										<option value="disabled" selected="{{selected 'emailNotificationMode' 'disabled'}}">{{_ "Email_Notification_Mode_Disabled"}}</option>
+										<option value="all" selected="{{selected 'emailNotificationMode' 'all'}}">{{_ "Email_Notification_Mode_All"}}</option>
+									</select>
+									<div class="info">{{_ "You_need_to_verifiy_your_email_address_to_get_notications"}}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="section">
+						<h1>{{_ "Messages"}}</h1>
+						<div class="section-content border-component-color">
 							<div class="input-line double-col" id="unreadAlert">
 								<label>{{_ "Unread_Tray_Icon_Alert"}}</label>
 								<div>
@@ -190,7 +205,17 @@ <h1>{{_ "Messages"}}</h1>
 								</div>
 							</div>
 							{{/with}} -->
-
+							<div class="input-line double-col" id="messageViewMode">
+								<label>{{_ "View_mode"}}</label>
+								<div>
+									<select class="input-monitor rc-input__element" name="messageViewMode">
+										<option value="0" selected="{{selected 'messageViewMode' 0}}">{{_ "Normal"}}</option>
+										<option value="1" selected="{{selected 'messageViewMode' 1}}">{{_ "Cozy"}}</option>
+										<option value="2" selected="{{selected 'messageViewMode' 2}}">{{_ "Compact"}}</option>
+									</select>
+									<div class="info">{{_ "Message_view_mode_info"}}</div>
+								</div>
+							</div>
 							<div class="input-line double-col" id="sendOnEnter">
 								<label>{{_ "Enter_Behaviour"}}</label>
 								<div>
@@ -202,16 +227,6 @@ <h1>{{_ "Messages"}}</h1>
 									<div class="info">{{_ "Enter_Behaviour_Description"}}</div>
 								</div>
 							</div>
-							<div class="input-line double-col" id="emailNotificationMode">
-								<label>{{_ "Email_Notification_Mode"}}</label>
-								<div>
-									<select class="input-monitor rc-input__element" name="emailNotificationMode">
-										<option value="disabled" selected="{{selected 'emailNotificationMode' 'disabled'}}">{{_ "Email_Notification_Mode_Disabled"}}</option>
-										<option value="all" selected="{{selected 'emailNotificationMode' 'all'}}">{{_ "Email_Notification_Mode_All"}}</option>
-									</select>
-									<div class="info">{{_ "You_need_to_verifiy_your_email_address_to_get_notications"}}</div>
-								</div>
-							</div>
 						</div>
 					</div>
 					<div class="section">

packages/rocketchat-ui-account/client/accountPreferences.js

@@ -134,6 +134,7 @@ Template.accountPreferences.onCreated(function() {
 		data.collapseMediaByDefault = JSON.parse($('input[name=collapseMediaByDefault]:checked').val());
 		data.muteFocusedConversations = JSON.parse($('#muteFocusedConversations').find('input:checked').val());
 		data.hideUsernames = JSON.parse($('#hideUsernames').find('input:checked').val());
+		data.messageViewMode = parseInt($('#messageViewMode').find('select').val());
 		data.hideFlexTab = JSON.parse($('#hideFlexTab').find('input:checked').val());
 		data.hideAvatars = JSON.parse($('#hideAvatars').find('input:checked').val());
 		data.sendOnEnter = $('#sendOnEnter').find('select').val();

packages/rocketchat-ui/client/views/app/room.html

@@ -68,7 +68,7 @@
 								</div>
 							{{/each}}
 						</div>
-						<div class="messages-box {{#if selectable}}selectable{{/if}} {{hasLeader}}">
+						<div class="messages-box {{#if selectable}}selectable{{/if}} {{messageViewMode}} {{hasLeader}}">
 							<div class="ticks-bar"></div>
 							<button class="new-message background-primary-action-color color-content-background-color not">
 								<i class="icon-down-big"></i>

packages/rocketchat-ui/client/views/app/room.js

@@ -308,6 +308,13 @@ Template.room.helpers({
 		if (isSubscribed(this._id) && favoritesEnabled()) { return true; }
 	},
 
+	messageViewMode() {
+		const user = Meteor.user();
+		const viewMode = RocketChat.getUserPreference(user, 'messageViewMode');
+		const modes = ['', 'cozy', 'compact'];
+		return modes[viewMode] || modes[0];
+	},
+
 	selectable() {
 		return Template.instance().selectable.get();
 	},

server/methods/saveUserPreferences.js

@@ -18,6 +18,7 @@ Meteor.methods({
 			enableAutoAway: Match.Optional(Boolean),
 			highlights: Match.Optional([String]),
 			desktopNotificationDuration: Match.Optional(Number),
+			messageViewMode: Match.Optional(Number),
 			hideUsernames: Match.Optional(Boolean),
 			hideRoles: Match.Optional(Boolean),
 			hideAvatars: Match.Optional(Boolean),

server/startup/migrations/v110.js

@@ -0,0 +1,57 @@
+RocketChat.Migrations.add({
+	version: 110,
+	up() {
+		if (RocketChat && RocketChat.models) {
+
+			if (RocketChat.models.Settings) {
+				const setting = RocketChat.models.Settings.findOne({ _id: 'Accounts_Default_User_Preferences_viewMode' });
+				if (setting && setting.value) {
+					RocketChat.models.Settings.update(
+						{ _id: 'Accounts_Default_User_Preferences_messageViewMode' },
+						{ $set: { value: setting.value } }
+					);
+
+					RocketChat.models.Settings.remove(
+						{ _id: 'Accounts_Default_User_Preferences_viewMode' }
+					);
+				}
+			}
+
+			if (RocketChat.models.Users) {
+				RocketChat.models.Users.find({ 'settings.preferences.viewMode': { $exists: 1 } }).forEach(function(user) {
+					RocketChat.models.Users.update(
+						{ _id: user._id },
+						{ $rename: { 'settings.preferences.viewMode': 'user.settings.preferences.messageViewMode' } },
+					);
+				});
+			}
+		}
+	},
+	down() {
+		if (RocketChat && RocketChat.models) {
+
+			if (RocketChat.models.Settings) {
+				const setting = RocketChat.models.Settings.findOne({ _id: 'Accounts_Default_User_Preferences_messageViewMode' });
+				if (setting && setting.value) {
+					RocketChat.models.Settings.update(
+						{ _id: 'Accounts_Default_User_Preferences_viewMode' },
+						{ $set: { value: setting.value } }
+					);
+
+					RocketChat.models.Settings.remove(
+						{ _id: 'Accounts_Default_User_Preferences_messageViewMode' }
+					);
+				}
+			}
+
+			if (RocketChat.models.Users) {
+				RocketChat.models.Users.find({ 'settings.preferences.messageViewMode': { $exists: 1 } }).forEach(function(user) {
+					RocketChat.models.Users.update(
+						{ _id: user._id },
+						{ $rename: { 'settings.preferences.messageViewMode': 'user.settings.preferences.viewMode' } },
+					);
+				});
+			}
+		}
+	}
+});

tests/data/user.js

@@ -24,6 +24,7 @@ export const preferences = {
 		enableAutoAway: true,
 		highlights: [],
 		desktopNotificationDuration: 0,
+		messageViewMode: 0,
 		hideUsernames: false,
 		hideRoles: false,
 		hideAvatars: false,

tests/end-to-end/ui/11-admin.js

@@ -891,6 +891,14 @@ describe('[Administration]', () => {
 					admin.accountsSendOnEnter.getValue().should.equal('normal');
 				});
 
+				it('it should show the messagebox view mode field', () => {
+					admin.accountsMessageViewMode.click();
+					admin.accountsMessageViewMode.isVisible().should.be.true;
+				});
+				it('the view mode field value should be 0', () => {
+					admin.accountsMessageViewMode.getValue().should.equal('0');
+				});
+
 				it('it should show the offline email notification field', () => {
 					admin.accountsEmailNotificationMode.click();
 					admin.accountsEmailNotificationMode.isVisible().should.be.true;

tests/pageobjects/administration.page.js

@@ -195,6 +195,9 @@ class Administration extends Page {
 	get accountsSendOnEnter() { return browser.element('[name="Accounts_Default_User_Preferences_sendOnEnter"]'); }
 	get accountsSendOnEnterReset() { return browser.element('.reset-setting[data-setting="Accounts_Default_User_Preferences_sendOnEnter"]'); }
 
+	get accountsMessageViewMode() { return browser.element('[name="Accounts_Default_User_Preferences_messageViewMode"]'); }
+	get accountsMessageViewModeReset() { return browser.element('.reset-setting[data-setting="Accounts_Default_User_Preferences_messageViewMode"]'); }
+
 	get accountsEmailNotificationMode() { return browser.element('[name="Accounts_Default_User_Preferences_emailNotificationMode"]'); }
 	get accountsEmailNotificationModeReset() { return browser.element('.reset-setting[data-setting="Accounts_Default_User_Preferences_emailNotificationMode"]'); }