From fff1fa0392eb129dc0f3cef71269ef11f6369702 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Fri, 20 Oct 2023 09:27:19 +0200
Subject: [PATCH] [IMP] web: add `initialWidth` props to ResizablePanel

This props allows to specify the initial width of the panel, whereas
before the initial width was the minimal width, i.e. the user could
only expand the panel, not shrink it.

Part-of: odoo/odoo#139154
---
 .../static/src/core/resizable_panel/resizable_panel.js |  6 +++++-
 addons/web/static/tests/core/resizable_panel_tests.js  | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/core/resizable_panel/resizable_panel.js b/addons/web/static/src/core/resizable_panel/resizable_panel.js
index 1d249d3c4da..cb2d6a789f3 100644
--- a/addons/web/static/src/core/resizable_panel/resizable_panel.js
+++ b/addons/web/static/src/core/resizable_panel/resizable_panel.js
@@ -14,6 +14,7 @@ import {
 function useResizable({
     containerRef,
     handleRef,
+    initialWidth = 400,
     getMinWidth = () => 400,
     onResize = () => {},
     getResizeSide = () => "end",
@@ -48,7 +49,7 @@ function useResizable({
 
     onMounted(() => {
         if (handleRef.el) {
-            resize(computeFinalWidth(minWidth));
+            resize(initialWidth);
             handleRef.el.addEventListener("mousedown", onMouseDown);
         }
     });
@@ -127,6 +128,7 @@ export class ResizablePanel extends Component {
     static components = {};
     static props = {
         onResize: { type: Function, optional: true },
+        initialWidth: { type: Number, optional: true },
         minWidth: { type: Number, optional: true },
         class: { type: String, optional: true },
         slots: { type: Object },
@@ -137,6 +139,7 @@ export class ResizablePanel extends Component {
     };
     static defaultProps = {
         onResize: () => {},
+        width: 400,
         minWidth: 400,
         class: "",
         handleSide: "end",
@@ -147,6 +150,7 @@ export class ResizablePanel extends Component {
             containerRef: "containerRef",
             handleRef: "handleRef",
             onResize: this.props.onResize,
+            initialWidth: this.props.initialWidth,
             getMinWidth: (props) => props.minWidth,
             getResizeSide: (props) => props.handleSide,
         });
diff --git a/addons/web/static/tests/core/resizable_panel_tests.js b/addons/web/static/tests/core/resizable_panel_tests.js
index cc3c7318a39..82c49016a00 100644
--- a/addons/web/static/tests/core/resizable_panel_tests.js
+++ b/addons/web/static/tests/core/resizable_panel_tests.js
@@ -1,8 +1,8 @@
 /** @odoo-module **/
 
-import { ResizablePanel } from "@web_studio/client_action/xml_resource_editor/resizable_panel/resizable_panel";
 import { Component, reactive, xml } from "@odoo/owl";
 import { browser } from "@web/core/browser/browser";
+import { ResizablePanel } from "@web/core/resizable_panel/resizable_panel";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import {
     getFixture,
@@ -57,7 +57,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
             static template = xml`
                 <div class="d-flex parent-el" style="direction: rtl;">
                     <div style="width: 50px;" />
-                    <ResizablePanel minWidth="20" >
+                    <ResizablePanel minWidth="20" initialWidth="30">
                         <div style="width: 10px;" class="text-break">
                             A cool paragraph
                         </div>
@@ -69,7 +69,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
         const parentEl = target.querySelector(".parent-el");
         const resizablePanelEl = target.querySelector(".o_resizable_panel");
         let resizablePabelRect = resizablePanelEl.getBoundingClientRect();
-        assert.strictEqual(resizablePabelRect.width, 22.5);
+        assert.strictEqual(resizablePabelRect.width, 30);
 
         const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
         await triggerEvents(handle, null, ["mousedown", ["mousemove", { clientX: 10 }], "mouseup"]);
@@ -82,7 +82,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
             static components = { ResizablePanel };
             static template = xml`
                 <div class="d-flex parent-el">
-                    <ResizablePanel minWidth="20" handleSide="'start'" class="'position-fixed'">
+                    <ResizablePanel minWidth="20" initialWidth="30" handleSide="'start'" class="'position-fixed'">
                         <div style="width: 10px;" class="text-break">
                             A cool paragraph
                         </div>
@@ -94,7 +94,7 @@ QUnit.module("Resizable Panel", ({ beforeEach }) => {
         const resizablePanelEl = target.querySelector(".o_resizable_panel");
         resizablePanelEl.style.setProperty("right", "100px");
         let resizablePabelRect = resizablePanelEl.getBoundingClientRect();
-        assert.strictEqual(resizablePabelRect.width, 22.5);
+        assert.strictEqual(resizablePabelRect.width, 30);
 
         const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
         await triggerEvents(handle, null, [