[FIX] SidePanel: reset initial props on model change

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, DEBOUNCE_TIME } from "../../../src/constants";
 import { toHex, toZone } from "../../../src/helpers";
@@ -1475,6 +1476,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", { figureId: 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, figureId: 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");