[FIX] SidePanel: reset initial props on Model change

Currently, we store the initial props which the sidepanel was open with.
This specifically occurs for charts sidepanel where we want the state to
update when we select another chart BUT we also want it to stay open
when clicking the grid (hence - no active chart left).

However the moment we click on another chart than the first one, then it
is supposed to become the new "default" chart.

How to reproduce:
- open the sidepanel of the first chart
- select the second chart
- delete the second chart

=> the sidepanel is still open and falls back on the first chart instead
of closing.

closes #7476

Task: 5059484
X-original-commit: f76210a
Signed-off-by: Vincent Schippefilt (vsc) <[email protected]>
Signed-off-by: Rémi Rahir (rar) <[email protected]>

Author: rrahir

src/components/side_panel/side_panel/side_panel_store.ts

@@ -23,27 +23,27 @@ export const MIN_SHEET_VIEW_WIDTH = 150;
 
 export class SidePanelStore extends SpreadsheetStore {
   mutators = ["open", "toggle", "close", "changePanelSize", "resetPanelSize"] as const;
-  initialPanelProps: SidePanelProps = {};
+  currentPanelProps: SidePanelProps = {};
   componentTag: string = "";
   panelSize = DEFAULT_SIDE_PANEL_SIZE;
 
   get isOpen() {
     if (!this.componentTag) {
       return false;
     }
-    return this.computeState(this.componentTag, this.initialPanelProps).isOpen;
+    return this.computeState(this.componentTag, this.currentPanelProps).isOpen;
   }
 
   get panelProps(): SidePanelProps {
-    const state = this.computeState(this.componentTag, this.initialPanelProps);
+    const state = this.computeState(this.componentTag, this.currentPanelProps);
     if (state.isOpen) {
       return state.props ?? {};
     }
     return {};
   }
 
   get panelKey(): string | undefined {
-    const state = this.computeState(this.componentTag, this.initialPanelProps);
+    const state = this.computeState(this.componentTag, this.currentPanelProps);
     if (state.isOpen) {
       return state.key;
     }
@@ -56,10 +56,10 @@ export class SidePanelStore extends SpreadsheetStore {
       return;
     }
     if (this.isOpen && componentTag !== this.componentTag) {
-      this.initialPanelProps?.onCloseSidePanel?.();
+      this.currentPanelProps?.onCloseSidePanel?.();
     }
     this.componentTag = componentTag;
-    this.initialPanelProps = state.props ?? {};
+    this.currentPanelProps = state.props ?? {};
   }
 
   toggle(componentTag: string, panelProps: SidePanelProps) {
@@ -71,8 +71,8 @@ export class SidePanelStore extends SpreadsheetStore {
   }
 
   close() {
-    this.initialPanelProps.onCloseSidePanel?.();
-    this.initialPanelProps = {};
+    this.currentPanelProps.onCloseSidePanel?.();
+    this.currentPanelProps = {};
     this.componentTag = "";
   }
 
@@ -98,7 +98,11 @@ export class SidePanelStore extends SpreadsheetStore {
         props: panelProps,
       };
     } else {
-      return customComputeState(this.getters, panelProps);
+      const state = customComputeState(this.getters, panelProps);
+      if (state.isOpen) {
+        this.currentPanelProps = state.props ?? this.currentPanelProps;
+      }
+      return state;
     }
   }
 }

tests/figures/chart/charts_component.test.ts

@@ -1,6 +1,7 @@
 import { App } from "@odoo/owl";
 import { CommandResult, Model, Spreadsheet } from "../../../src";
 import { ChartPanel } from "../../../src/components/side_panel/chart/main_chart_panel/main_chart_panel";
+import { SidePanelStore } from "../../../src/components/side_panel/side_panel/side_panel_store";
 import { ChartTerms } from "../../../src/components/translations_terms";
 import { BACKGROUND_CHART_COLOR } from "../../../src/constants";
 import { toHex, toZone } from "../../../src/helpers";
@@ -1412,6 +1413,29 @@ describe("charts", () => {
     ]);
   });
 
+  test("Deleting the second chart after selecting it closes the side panel", async () => {
+    createTestChart("basicChart", chartId);
+    createTestChart("basicChart", "secondChartId");
+    await mountSpreadsheet();
+    await openChartConfigSidePanel(model, env, chartId);
+    const store = env.getStore(SidePanelStore);
+    const sheetId = model.getters.getActiveSheetId();
+
+    const figures = model.getters.getFigures(sheetId);
+    expect(store.panelProps.figureId).toBe(figures[0].id);
+    expect(fixture.querySelector(".o-sidePanel")).not.toBeNull();
+
+    model.dispatch("SELECT_FIGURE", { id: figures[1].id });
+    await nextTick();
+    expect(store.panelProps.figureId).toBe(figures[1].id);
+    expect(fixture.querySelector(".o-sidePanel")).not.toBeNull();
+
+    model.dispatch("DELETE_FIGURE", { sheetId, id: figures[1].id });
+    await nextTick();
+    expect(store.isOpen).toBeFalsy();
+    expect(fixture.querySelector(".o-sidePanel")).toBeNull();
+  });
+
   describe("Scorecard specific tests", () => {
     test("can edit chart baseline colors", async () => {
       createTestChart("scorecard");