[FIX] base: hide technical tips in settings view

In the settings view, we need to display the technical tip below the
setting header (h2 tag). For example, we display such tip under the
'Developer Accounts' header in social media settings.

However, when we search something in the settings, this tip is not
hidden. It happens because the hiding and showing parts of the settings
page are managed with js using some special classes or tags (like h2
tag, `.o_setting_box` class etc).

This commit fixes the issue by introducing a new class `.o_setting_tip`
specific for such technical tips, and with help of that we now hide or
show the tips based on the user search.

Note: We could have used .o_setting_box without any side-effect, but
rules linked to this class can be changed in the future and can mess
with layout of the technical tips. As those are usually small blocks of text
that give a hint to the user and not directly associated with setting box
styling, making the overall code more robust / flexible.

enterprise PR - https://github.com/odoo/enterprise/pull/25907

task-2810617

closes odoo/odoo#88117

Related: odoo/enterprise#25907
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
This commit is contained in:
Dharmraj Jhala
2022-05-19 10:09:46 +02:00
committed by dht-odoo
parent 8e2625c8ee
commit 23eac53911
2 changed files with 40 additions and 4 deletions
@@ -187,8 +187,7 @@ var BaseSettingRenderer = FormRenderer.extend({
this.searchInput.val("");
_.each(this.modules, function (module) {
module.settingView.addClass('o_hidden');
module.settingView.find('.o_setting_box').removeClass('o_hidden');
module.settingView.find('h2').removeClass('o_hidden');
module.settingView.find('h2, .o_setting_box, .o_setting_tip').removeClass('o_hidden');
module.settingView.find('.settingSearchHeader').addClass('o_hidden');
module.settingView.find('.o_settings_container').addClass('mt16').removeClass('mb-0');
});
@@ -230,8 +229,7 @@ var BaseSettingRenderer = FormRenderer.extend({
this.count = 0;
_.each(this.modules, function (module) {
self.inVisibleCount = 0;
module.settingView.find('.o_setting_box').addClass('o_hidden');
module.settingView.find('h2').addClass('o_hidden');
module.settingView.find('h2, .o_setting_box, .o_setting_tip').addClass('o_hidden');
module.settingView.find('.settingSearchHeader').addClass('o_hidden');
module.settingView.find('.o_settings_container').removeClass('mt16').addClass('mb-0');
@@ -157,6 +157,44 @@ QUnit.module('base_settings_tests', {
form.destroy();
});
QUnit.test('hide / show setting tips properly', async function (assert) {
assert.expect(3);
const form = await createView({
View: BaseSettingsView,
model: 'res.config.settings',
data: this.data,
arch: `
<form string="Settings" class="oe_form_configuration o_base_settings">
<div class="o_panel">
<div class="setting_search">
<input type="text" class="searchInput" placeholder="Search..." />
</div>
</div>
<div class="o_setting_container">
<div class="settings_tab" />
<div class="settings">
<div class="notFound o_hidden">No Record Found</div>
<div class="app_settings_block" string="Settings" data-key="settings">
<h2>Setting Header</h2>
<h3 class="o_setting_tip">Settings will appear below</h3>
</div>
</div>
</div>
</form>`
});
assert.containsOnce(form, '.o_setting_tip:not(.o_hidden)', 'Tip should not be hidden initially');
await testUtils.fields.editAndTrigger(form.$('.searchInput'), 'Setting', 'keyup');
assert.containsOnce(form, '.o_setting_tip.o_hidden', 'Tip should be hidden when user searches in settings');
await testUtils.fields.editAndTrigger(form.$('.searchInput'), '', 'keyup');
assert.containsOnce(form, '.o_setting_tip:not(.o_hidden)', 'Tip should be displayed again');
form.destroy();
});
QUnit.test(
"settings views does not read existing id when coming back in breadcrumbs",
async function (assert) {