[FIX] knowledge: fix blank chatter when changing tracked fields

How to reproduce
  * Open an article and edit one of the tracked fields
    (title, root_article_id, parent_id).
  * Open another article
  * Re-open the first article
  * Open the chatter

Current behavior
  The chatter does not appear.

Expected behavior
  The chatter should appear.

Fix
  Instead of loading the chatter with the form view, load the chatter when the
  user clicks on the chatter button.
  Implements the use of the chatter component differently from the
  form_renderer in mail, to be able to update/render it independently from
  the rest of the view.
  Hide the chatter button if there is no article in the form view since there is
  no chatter to display in this case.

Task-2858428

X-original-commit: b705ccf952cd67dad4f1480928c94cd7215b601a
Part-of: odoo/odoo#93088

addons/knowledge/static/src/js/knowledge_renderers.js

@@ -6,11 +6,16 @@ import FormRenderer from 'web.FormRenderer';
 import KnowledgeTreePanelMixin from '@knowledge/js/tools/tree_panel_mixin';
 import { qweb as QWeb } from 'web.core';
 
+import { ChatterContainer } from '@mail/components/chatter_container/chatter_container';
+import { ComponentWrapper } from 'web.OwlCompatibility';
+
+class ChatterContainerWrapperComponent extends ComponentWrapper {}
 
 const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin, {
     className: 'o_knowledge_form_view',
     events: _.extend({}, FormRenderer.prototype.events, {
-        'click .btn-chatter': '_onBtnChatterClick',
+        'click .btn-chatter.active': '_onCloseChatter',
+        'click .btn-chatter:not(.active)': '_onOpenChatter',
         'click .btn-create': '_onBtnCreateClick',
         'click .btn-duplicate': '_onBtnDuplicateClick',
         'click .btn-move': '_onBtnMoveClick',
@@ -28,6 +33,30 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
     init: function (parent, state, params) {
         this._super(...arguments);
         this.breadcrumbs = params.breadcrumbs;
+        /**
+         * Manually set values for the chatter props as it is custom handled
+         * and not loaded with the view (oe_chatter is not used in Knowledge,
+         * the chatter is only rendered when the user clicks on the button).
+         */
+        this.chatterFields = {
+            // `knowledge.article` has `mail.activity.mixin`
+            hasActivities: true,
+            hasFollowers: true,
+            hasMessageIds: true,
+        };
+    },
+    /**
+     * @private
+     */
+    _closeChatter: function () {
+        const chatter = this.el.querySelector('.o_knowledge_chatter_container');
+        while (chatter.firstChild) {
+            chatter.removeChild(chatter.firstChild);
+        }
+        if (this._chatterContainerComponent) {
+            this._chatterContainerComponent.destroy();
+            this._chatterContainerComponent = undefined;
+        }
     },
     /**
      * @param {Event} event
@@ -93,6 +122,17 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
             category: $section.data('section')
         });
     },
+    /**
+     * Update the btn-chatter appearance and hide the chatter section in the
+     * view. Closes the chatter.
+     *
+     * @private
+     */
+    _onCloseChatter: function () {
+        this.el.querySelector('.o_knowledge_chatter').classList.add('d-none');
+        this.el.querySelector('.btn-chatter').classList.remove('active');
+        this._closeChatter();
+    },
     /**
      * Opens the selected record.
      * @param {Event} event
@@ -107,6 +147,21 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
             }
         });
     },
+    /**
+     * Update tbe btn-chatter appearance and show the chatter section in the
+     * view. Open the chatter.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onOpenChatter: async function (ev) {
+        ev.stopPropagation();
+        if (this.state.res_id) {
+            this.el.querySelector('.o_knowledge_chatter').classList.remove('d-none');
+            this.el.querySelector('.btn-chatter').classList.add('active');
+            await this._renderChatter();
+        }
+    },
     /**
      * By default, Bootstrap closes automatically the dropdown menu when the user
      * clicks inside it. To avoid that behavior, we will add a new event listener
@@ -132,6 +187,27 @@ const KnowledgeArticleFormRenderer = FormRenderer.extend(KnowledgeTreePanelMixin
         });
         this.$('.breadcrumb').prepend(items);
     },
+    /**
+     * Render and mount the chatter of the current record.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _renderChatter: async function () {
+        if (!this.state.res_id) {
+            return;
+        }
+        this._closeChatter();
+        const props = this._makeChatterContainerProps();
+        this._chatterContainerComponent = new ChatterContainerWrapperComponent(
+            this,
+            ChatterContainer,
+            props
+        );
+        const target = this.el.querySelector('.o_knowledge_chatter_container');
+        await this._chatterContainerComponent.mount(target);
+    },
+
     /**
      * Attaches an emoji picker widget to every emoji dropdown of the container.
      * Note: The widget will be attached to the view when the user clicks on

addons/knowledge/static/src/scss/knowledge_views.scss

@@ -129,14 +129,6 @@
         li.nav-item {
             display: none;
         }
-        .o_FormRenderer_chatterContainer {
-            max-width: unset;
-            &.o-aside {
-                width: auto;
-                padding: 1rem;
-                border: none;
-            }
-        }
     }
 
     .dropdown-menu.o_article_emoji_dropdown_panel {

addons/knowledge/views/knowledge_article_views.xml

@@ -79,7 +79,8 @@
                                                attrs="{'invisible': [('id', '=', False)]}">
                                                 <i class="fa fa-share-alt"/> Share
                                             </a>
-                                            <a type="button" role="button" class="btn btn-secondary btn-chatter mr-1" data-hotkey="d">
+                                            <a type="button" role="button" class="btn btn-secondary btn-chatter mr-1" data-hotkey="d"
+                                                attrs="{'invisible': [('id', '=', False)]}">
                                                 <i class="rounded-circle text-center fa fa-comments" title="Open chatter"/>
                                             </a>
                                             <div class="o_knowledge_share_panel dropdown-menu" role="menu">
@@ -203,13 +204,7 @@
                                         </div>
                                         <!-- Chatter -->
                                         <div class="o_knowledge_chatter col-12 col-lg-4 position-relative d-none d-print-none p-0">
-                                            <div class="o_scroll_view_lg">
-                                                <div class="oe_chatter">
-                                                    <field name="message_follower_ids" groups="base.group_user"/>
-                                                    <field name="activity_ids"/>
-                                                    <field name="message_ids"/>
-                                                </div>
-                                            </div>
+                                            <div class="o_scroll_view_lg o_knowledge_chatter_container"/>
                                         </div>
                                     </div>
                                 </div>