Regression: Expand Administration sections by toggling section title (#12736)

* Expand Administration sections by toggling section title

* Update E2E tests

* Update E2E tests

packages/rocketchat-ui-admin/client/admin.html

@@ -29,12 +29,12 @@
 						{{#each sections}}
 							<div class="section {{#if section}}section-collapsed{{/if}}">
 								{{#if section}}
-									<div class="section-title">
+									<div class="section-title expand">
 										<div class="section-title-text">
 											{{translateSection section}}
 										</div>
 										<div class="section-title-right">
-											<button class="rc-button rc-button--nude expand"><i class="icon-angle-down"></i></button>
+											<button class="rc-button rc-button--nude"><i class="icon-angle-down"></i></button>
 										</div>
 									</div>
 								{{/if}}

packages/rocketchat-ui-admin/client/admin.js

@@ -527,15 +527,32 @@ Template.admin.events({
 		});
 	},
 	'click .expand'(e) {
-		$(e.currentTarget).closest('.section').removeClass('section-collapsed');
-		$(e.currentTarget).closest('button').attr('title', TAPi18n.__('Collapse')).removeClass('expand').addClass('collapse').find('i').attr('class', 'icon-angle-up');
+		const sectionTitle = e.currentTarget;
+		const section = sectionTitle.closest('.section');
+		const button = sectionTitle.querySelector('button');
+		const i = button.querySelector('i');
+
+		sectionTitle.classList.remove('expand');
+		sectionTitle.classList.add('collapse');
+		section.classList.remove('section-collapsed');
+		button.setAttribute('title', TAPi18n.__('Collapse'));
+		i.className = 'icon-angle-up';
+
 		$('.CodeMirror').each(function(index, codeMirror) {
 			codeMirror.CodeMirror.refresh();
 		});
 	},
 	'click .collapse'(e) {
-		$(e.currentTarget).closest('.section').addClass('section-collapsed');
-		$(e.currentTarget).closest('button').attr('title', TAPi18n.__('Expand')).addClass('expand').removeClass('collapse').find('i').attr('class', 'icon-angle-down');
+		const sectionTitle = e.currentTarget;
+		const section = sectionTitle.closest('.section');
+		const button = sectionTitle.querySelector('button');
+		const i = button.querySelector('i');
+
+		sectionTitle.classList.remove('collapse');
+		sectionTitle.classList.add('expand');
+		section.classList.add('section-collapsed');
+		button.setAttribute('title', TAPi18n.__('Expand'));
+		i.className = 'icon-angle-down';
 	},
 	'click button.action'() {
 		if (this.type !== 'action') {

packages/rocketchat_theme/client/imports/general/base_old.css

@@ -1798,7 +1798,11 @@ rc-old select,
 	& .section-title {
 		display: flex;
 
+		cursor: pointer;
+
 		& .section-title-text {
+			user-select: none;
+
 			font-size: 1rem;
 			font-weight: 500;
 

tests/pageobjects/administration.page.js

@@ -65,13 +65,13 @@ class Administration extends Page {
 	// settings
 	get buttonSave() { return browser.element('button.save'); }
 
-	get generalButtonExpandIframe() { return browser.element('.section:nth-of-type(4) button.expand'); }
-	get generalButtonExpandNotifications() { return browser.element('.section:nth-of-type(5) button.expand'); }
-	get generalButtonExpandRest() { return browser.element('.section:nth-of-type(6) button.expand'); }
-	get generalButtonExpandReporting() { return browser.element('.section:nth-of-type(7) button.expand'); }
-	get generalButtonExpandStreamCast() { return browser.element('.section:nth-of-type(8) button.expand'); }
-	get generalButtonExpandTranslations() { return browser.element('.section:nth-of-type(9) button.expand'); }
-	get generalButtonExpandUTF8() { return browser.element('.section:nth-of-type(10) button.expand'); }
+	get generalButtonExpandIframe() { return browser.element('.section:nth-of-type(4) .expand'); }
+	get generalButtonExpandNotifications() { return browser.element('.section:nth-of-type(5) .expand'); }
+	get generalButtonExpandRest() { return browser.element('.section:nth-of-type(6) .expand'); }
+	get generalButtonExpandReporting() { return browser.element('.section:nth-of-type(7) .expand'); }
+	get generalButtonExpandStreamCast() { return browser.element('.section:nth-of-type(8) .expand'); }
+	get generalButtonExpandTranslations() { return browser.element('.section:nth-of-type(9) .expand'); }
+	get generalButtonExpandUTF8() { return browser.element('.section:nth-of-type(10) .expand'); }
 
 	get generalSiteUrl() { return browser.element('[name="Site_Url"]'); }
 	get generalSiteUrlReset() { return browser.element('.reset-setting[data-setting="Site_Url"]'); }
@@ -123,8 +123,8 @@ class Administration extends Page {
 	get generalUTF8NamesSlugReset() { return browser.element('.reset-setting[data-setting="UTF8_Names_Slugify"]'); }
 
 	// accounts
-	get accountsButtonExpandDefaultUserPreferences() { return browser.element('.section:nth-of-type(2) button.expand'); }
-	get accountsButtonCollapseDefaultUserPreferences() { return browser.element('.section:nth-of-type(2) button.collapse'); }
+	get accountsButtonExpandDefaultUserPreferences() { return browser.element('.section:nth-of-type(2) .expand'); }
+	get accountsButtonCollapseDefaultUserPreferences() { return browser.element('.section:nth-of-type(2) .collapse'); }
 
 	get accountsEnableAutoAwayTrue() { return browser.element('label:nth-of-type(1) [name="Accounts_Default_User_Preferences_enableAutoAway"]'); }
 	get accountsEnableAutoAwayFalse() { return browser.element('label:nth-of-type(2) [name="Accounts_Default_User_Preferences_enableAutoAway"]'); }