[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

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 {

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>