[IMP] doc: Update Js control panel

Update information in JS doc for 13.0 (replace control panel mixin with the hasControlPanel attribute).

closes odoo/odoo#49291

X-original-commit: 0d46f49a00c6ecb62725ab97c1f337d1b0666852
Signed-off-by: Denis Ledoux (dle) <dle@odoo.com>

1 files changed, 34 insertions, 23 deletions

diff --git a/doc/reference/javascript_reference.rst b/doc/reference/javascript_reference.rst
index b5028149498..f2b9685006f 100644
--- a/doc/reference/javascript_reference.rst
+++ b/doc/reference/javascript_reference.rst
@@ -2250,17 +2250,13 @@ in the action registry.
 
     .. code-block:: javascript
 
-        var ControlPanelMixin = require('web.ControlPanelMixin');
         var AbstractAction = require('web.AbstractAction');
 
-        var ClientAction = AbstractAction.extend(ControlPanelMixin, {
+        var ClientAction = AbstractAction.extend({
+            hasControlPanel: true,
             ...
         });
 
-    Do not add the controlpanel mixin if you do not need it.  Note that some
-    code is needed to interact with the control panel (via the
-    ``update_control_panel`` method given by the mixin).
-
 - Registering the client action:
     As usual, we need to make the web client aware of the mapping between
     client actions and the actual class:
@@ -2284,51 +2280,66 @@ in the action registry.
         </record>
 
 
-Using the control panel mixin
------------------------------
+Using the control panel
+-----------------------
 
-By default, the AbstractAction class does not include the control panel mixin.
-This means that a client action does not display a control panel.  In order to
+By default, the client action does not display a control panel.  In order to
 do that, several steps should be done.
 
-- add ControlPanelMixin in the widget:
+- Set the *hasControlPanel* to *true*.
+    In the widget code:
 
     .. code-block:: javascript
 
-        var ControlPanelMixin = require('web.ControlPanelMixin');
-
-        var MyClientAction = AbstractAction.extend(ControlPanelMixin, {
+        var MyClientAction = AbstractAction.extend({
+            hasControlPanel: true,
+            loadControlPanel: true, // default: false
             ...
         });
 
-- call the method *update_control_panel* whenever we need to update the control
-  panel. For example:
+    .. warning:: 
+        when the ``loadControlPanel`` is set to true, the client action will automatically get the content of a search view or a control panel view. 
+        In this case, a model name should be specified like this:
+        
+        .. code-block:: javascript
+
+            init: function (parent, action, options) {
+                ...
+                this.controlPanelParams.modelName = 'model.name';
+                ...
+            }
+
+- Call the method *updateControlPanel* whenever we need to update the control panel.
+    For example:
 
     .. code-block:: javascript
 
-        var SomeClientAction = Widget.extend(ControlPanelMixin, {
+        var SomeClientAction = Widget.extend({
+            hasControlPanel: true,
             ...
             start: function () {
                 this._renderButtons();
-                this._updateControlPanel();
+                this._update_control_panel();
                 ...
             },
             do_show: function () {
                  ...
-                 this._updateControlPanel();
+                 this._update_control_panel();
             },
             _renderButtons: function () {
                 this.$buttons = $(QWeb.render('SomeTemplate.Buttons'));
                 this.$buttons.on('click', ...);
             },
-            _updateControlPanel: function () {
-                this.update_control_panel({
+            _update_control_panel: function () {
+                this.updateControlPanel({
                     cp_content: {
                        $buttons: this.$buttons,
                     },
-             });
+                });
+            }
 
-For more information, look into the *control_panel.js* file.
+The ``updateControlPanel`` is the main method to customize the content in controlpanel. 
+For more information, look into the `control_panel_renderer.js <https://github.com/odoo/odoo/blob/13.0/addons/web/static/src/js/views/control_panel/control_panel_renderer.js#L130>`_ file.
 
 .. _.appendTo():
     https://api.jquery.com/appendTo/