From 18270691d4cd8391656e73e043f42c720bfd5e9b Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 15 Sep 2022 12:19:49 +0000
Subject: [PATCH] [FIX] web_editor: fix autosizing images from the media dialog

Before this commit, following this flow:
- Drop a text_image snippet,
- Upload images from the media dialog,
- Change the image to an icon,
- Double click on the icon to open the media dialog again,
- Click on the 'image' tab
- The previously uploaded images are not correctly sized

To fix that, the media dialog component template is changed: instead of
rendering all the tabs and hiding the inactive ones, it only renders
the active one. This way, the images are correctly sized at all time.

Since commits [1] and [2], the design used by tabs and the Notebook
component is more consistent, which allow us to replace that part of the
template by the component.

The Notebook component  receives the list of pages to render, and will
generate the right subcomponents in the content part of its template.

[1]: https://github.com/odoo/odoo/commit/68f1c90a031a7c2f751d9c8eca7ff525e9f7e206
[2]: https://github.com/odoo/odoo/commit/ff0b2d441252560a076a3609d81c369f0ce42d19

Part-of: odoo/odoo#100253
---
 .../src/components/media_dialog/media_dialog.js  |  6 ++++++
 .../src/components/media_dialog/media_dialog.xml | 16 +---------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.js b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
index bc76bfe82ad..cb47d0edead 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.js
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.js
@@ -3,6 +3,7 @@
 import { useService } from '@web/core/utils/hooks';
 import { useWowlService } from '@web/legacy/utils';
 import { Dialog } from '@web/core/dialog/dialog';
+import { Notebook } from '@web/core/notebook/notebook';
 import { ImageSelector } from './image_selector';
 import { DocumentSelector } from './document_selector';
 import { IconSelector } from './icon_selector';
@@ -206,6 +207,10 @@ export class MediaDialog extends Component {
         }
         this.props.close();
     }
+
+    onTabChange(tab) {
+        this.state.activeTab = tab;
+    }
 }
 MediaDialog.template = 'web_editor.MediaDialog';
 MediaDialog.defaultProps = {
@@ -214,6 +219,7 @@ MediaDialog.defaultProps = {
 MediaDialog.components = {
     ...Object.keys(TABS).map(key => TABS[key].Component),
     Dialog,
+    Notebook,
 };
 
 export class MediaDialogWrapper extends Component {
diff --git a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
index 703e4ef256e..6d58a44e030 100644
--- a/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
+++ b/addons/web_editor/static/src/components/media_dialog/media_dialog.xml
@@ -4,21 +4,7 @@
     <Dialog contentClass="contentClass"
         size="size"
         title="title">
-        <div class="o_notebook">
-            <div class="o_notebook_headers">
-                <ul class="nav nav-tabs" role="tablist">
-                    <li t-foreach="tabs" t-as="tab" t-key="tab.id" class="nav-item cursor-pointer">
-                        <a class="nav-link" t-att-class="{ active:  tab.id === state.activeTab }" t-on-click="() => state.activeTab = tab.id"><t t-esc="tab.title"/></a>
-                    </li>
-                </ul>
-            </div>
-            <!-- Tab panes -->
-            <div class="o_notebook_content tab-content">
-                <t t-foreach="tabs" t-as="tab" t-key="tab.id">
-                    <div class="tab-pane fade" t-att-class="tab.id === state.activeTab ? 'active show' : ''"><t t-component="tab.Component" t-props="tab.props"/></div>
-                </t>
-            </div>
-        </div>
+        <Notebook pages="tabs" onPageUpdate.bind="onTabChange" defaultPage="state.activeTab"/>
         <t t-set-slot="footer">
             <button class="btn btn-primary" t-on-click="() => this.save()">Add</button>
             <button class="btn btn-secondary" t-on-click="() => this.props.close()">Discard</button>