[IMP] side_panel: keep tabs visible and preserve scroll/section state

Before this commit:
- Tabs scrolled with content and were not always visible.
- Switching tabs reset scroll position and section open/close state.

After this commit:
- Tabs remain visible while scrolling.
- Scroll and section states are preserved per tab.

closes #6643

Task: 4752564
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

Author: rmbh-odoo

src/components/side_panel/chart/main_chart_panel/main_chart_panel.ts

@@ -1,8 +1,15 @@
-import { Component } from "@odoo/owl";
+import { Component, useEffect, useRef } from "@odoo/owl";
 import { ChartSidePanel, chartSidePanelComponentRegistry } from "..";
 import { GRAY_100, GRAY_300, TEXT_BODY, TEXT_HEADING } from "../../../../constants";
 import { Store, useLocalStore } from "../../../../store_engine";
-import { ChartDefinition, ChartType, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import {
+  ChartDefinition,
+  ChartType,
+  Pixel,
+  Ref,
+  SpreadsheetChildEnv,
+  UID,
+} from "../../../../types/index";
 import { css } from "../../../helpers/css";
 import { Section } from "../../components/section/section";
 import { ChartTypePicker } from "../chart_type_picker/chart_type_picker";
@@ -50,6 +57,11 @@ export class ChartPanel extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartPanel";
   static components = { Section, ChartTypePicker };
   static props = { onCloseSidePanel: Function, figureId: String };
+  private panelContentRef!: Ref<HTMLElement>;
+  private scrollPositions: Record<"configuration" | "design", Pixel> = {
+    configuration: 0,
+    design: 0,
+  };
 
   store!: Store<MainChartPanelStore>;
 
@@ -59,6 +71,26 @@ export class ChartPanel extends Component<Props, SpreadsheetChildEnv> {
 
   setup(): void {
     this.store = useLocalStore(MainChartPanelStore);
+    this.panelContentRef = useRef("panelContent");
+
+    useEffect(
+      () => {
+        const el = this.panelContentRef.el as HTMLElement;
+        const activePanel = this.store.panel;
+        if (el) {
+          el.scrollTop = this.scrollPositions[activePanel];
+        }
+      },
+      () => [this.store.panel]
+    );
+  }
+
+  switchPanel(panel: "configuration" | "design") {
+    const el = this.panelContentRef.el as HTMLElement;
+    if (el) {
+      this.scrollPositions[this.store.panel] = el.scrollTop;
+    }
+    this.store.activatePanel(panel);
   }
 
   updateChart<T extends ChartDefinition>(figureId: UID, updateDefinition: Partial<T>) {

src/components/side_panel/chart/main_chart_panel/main_chart_panel.xml

@@ -1,45 +1,47 @@
 <templates>
   <t t-name="o-spreadsheet-ChartPanel">
-    <div class="o-chart" t-if="figureId">
+    <div class="o-chart d-flex flex-column h-100" t-if="figureId">
       <div class="o-panel">
         <div
           class="o-panel-element o-panel-configuration"
           t-att-class="store.panel !== 'configuration' ? 'inactive' : ''"
-          t-on-click="() => this.store.activatePanel('configuration')">
+          t-on-click="switchPanel.bind(this, 'configuration')">
           <i class="fa fa-sliders"/>
           Configuration
         </div>
         <div
           class="o-panel-element o-panel-design"
           t-att-class="store.panel !== 'design' ? 'inactive' : ''"
-          t-on-click="() => this.store.activatePanel('design')">
+          t-on-click="switchPanel.bind(this, 'design')">
           <i class="fa fa-paint-brush"/>
           Design
         </div>
       </div>
 
       <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
-      <t t-if="store.panel === 'configuration'">
-        <ChartTypePicker figureId="props.figureId" chartPanelStore="store"/>
-        <t
-          t-component="chartPanel.configuration"
-          definition="definition"
-          figureId="figureId"
-          updateChart.bind="updateChart"
-          canUpdateChart.bind="canUpdateChart"
-          t-key="figureId + definition.type"
-        />
-      </t>
-      <t t-else="">
-        <t
-          t-component="chartPanel.design"
-          definition="definition"
-          figureId="figureId"
-          updateChart.bind="updateChart"
-          canUpdateChart.bind="canUpdateChart"
-          t-key="figureId + definition.type"
-        />
-      </t>
+      <div class="o-panel-content overflow-y-auto" t-ref="panelContent">
+        <div t-att-class="store.panel !== 'configuration' ? 'd-none' : ''">
+          <ChartTypePicker figureId="props.figureId" chartPanelStore="store"/>
+          <t
+            t-component="chartPanel.configuration"
+            definition="definition"
+            figureId="figureId"
+            updateChart.bind="updateChart"
+            canUpdateChart.bind="canUpdateChart"
+            t-key="figureId + definition.type"
+          />
+        </div>
+        <div t-att-class="store.panel !== 'design' ? 'd-none' : ''">
+          <t
+            t-component="chartPanel.design"
+            definition="definition"
+            figureId="figureId"
+            updateChart.bind="updateChart"
+            canUpdateChart.bind="canUpdateChart"
+            t-key="figureId + definition.type"
+          />
+        </div>
+      </div>
     </div>
   </t>
 </templates>

tests/figures/chart/charts_component.test.ts

@@ -1100,6 +1100,23 @@ describe("charts", () => {
     expect(fixture.querySelector(".o-chart")).toBeFalsy();
   });
 
+  test("restores scroll position when switching tabs in side panel", async () => {
+    createTestChart("basicChart");
+    await mountSpreadsheet();
+    await openChartDesignSidePanel(model, env, fixture, chartId);
+
+    const chartPanel = fixture.querySelector(".o-panel-content")!;
+    chartPanel.scrollTop = 100;
+
+    const configTab = fixture.querySelector(".o-panel-element.inactive")!;
+    await click(configTab);
+    expect(chartPanel.scrollTop).toBe(0);
+
+    const designTab = fixture.querySelector(".o-panel-element.inactive")!;
+    await click(designTab);
+    expect(chartPanel.scrollTop).toBe(100);
+  });
+
   describe.each(TEST_CHART_TYPES)("selecting other chart will adapt sidepanel", (chartType) => {
     test.each(["click", "SELECT_FIGURE command"])("when using %s", async (selectMethod: string) => {
       createTestChart(chartType);