[IMP] base: Hide Save/Discard on Settings until there are modifications

Purpose
=======

It only makes sense to display 'Save' and 'Discard' if the user actually
changed something in the settings.

So after this commit, the 'Save' and 'Discard' buttons of statusbar in
general settings will only appear when you make any changes.

Also when there are changes, there will be a message shown that will tell
the user that he/she has unsaved changes.

The commit is related to Task ID: 1917637

Co-authored-by: Mohammed Shekha <msh@openerp.com>

closes odoo/odoo#29726

odoo/addons/base/static/src/js/res_config_settings.js

@@ -10,6 +10,7 @@ var FormRenderer = require('web.FormRenderer');
 var view_registry = require('web.view_registry');
 
 var QWeb = core.qweb;
+var _t = core._t;
 
 var BaseSettingRenderer = FormRenderer.extend({
     events: _.extend({}, FormRenderer.prototype.events, {
@@ -32,6 +33,20 @@ var BaseSettingRenderer = FormRenderer.extend({
         }
     },
 
+    /**
+     * @override
+     * overridden to show statusbar buttons and a message if there are changes
+     */
+    confirmChange: function () {
+        var self = this;
+        return this._super.apply(this, arguments).then(function () {
+            if (self.$('.o_statusbar_buttons').hasClass('d-none')) {
+                self.$('.o_statusbar_buttons')
+                    .append($('<span/>', {text: _t("There are unsaved changes"), class: 'text-muted ml-2'}))
+                    .removeClass('d-none');
+            }
+        });
+    },
     /**
      * @override
      */
@@ -270,6 +285,7 @@ var BaseSettingRenderer = FormRenderer.extend({
         this._initModules();
         this._renderLeftPanel();
         this._initSearch();
+        this.$('.o_statusbar_buttons').addClass('d-none');
         if (config.device.isMobile) {
             this._enableSwipe();
         }

odoo/addons/base/static/tests/base_settings_tests.js

@@ -178,5 +178,41 @@ QUnit.module('base_settings_tests', {
         form.destroy();
     });
 
+    QUnit.test('settings view shows statusbar buttons only if there are changes to save', function (assert) {
+        assert.expect(5);
+
+        var form = createView({
+            View: BaseSettingsView,
+            model: 'project',
+            data: this.data,
+            arch: '<form string="Settings" class="oe_form_configuration o_base_settings">' +
+                    '<header>' +
+                        '<button string="Save" type="object" name="execute" class="oe_highlight" />' +
+                        '<button string="Discard" type="object" name="cancel" special="cancel" />'+
+                    '</header>' +
+                    '<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="Base Setting" data-key="base-setting">' +
+                                '<field name="bar"/>Make Changes' +
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +
+                '</form>',
+        });
+
+        testUtils.mock.intercept(form, "field_changed", function (event) {
+            assert.ok("field changed");
+        }, true);
+
+        assert.containsNone(form, '.o_field_boolean input:checked', "checkbox should not be checked");
+        assert.hasClass(form.$('.o_statusbar_buttons'), 'd-none', "statusbar buttons should not be shown");
+        testUtils.dom.click(form.$("input[type='checkbox']"));
+        assert.strictEqual(form.$('.o_field_boolean input:checked').length, 1,"checkbox should be checked");
+        assert.isVisible(form.$('.o_statusbar_buttons'), "statusbar buttons should be shown");
+        form.destroy();
+    });
+
 });
 });