[FIX] side_panel: fix open/close logic for nested navigation

Steps to reproduce:
- Open the global filter side panel that lists all existing filters
- Pin the panel
- Click on a specific filter to view/edit

Before this commit:
- A second side panel was opened instead of drilling down in the current one
(unlike CF/DV)
- Clicking 'Cancel' on the new panel did nothing
- Clicking 'Remove' caused a traceback

After this commit:
- New side panel opens in the same source panel (main or secondary),
Preserving navigation flow
- Clicking 'Cancel' or 'Remove' correctly restores the previous side panel in
It's a panel slot

Task: 4911603

Author: rmbh-odoo

src/actions/insert_actions.ts

@@ -319,7 +319,7 @@ export const insertDropdown: ActionSpec = {
     env.openSidePanel("DataValidationEditor", {
       rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
       onExit: () => {
-        env.openSidePanel("DataValidation");
+        env.openSidePanel("DataValidation", {}, "DataValidationEditor");
       },
     });
   },

src/components/side_panel/pivot/pivot_layout_configurator/pivot_measure/pivot_measure.ts

@@ -79,10 +79,14 @@ export class PivotMeasureEditor extends Component<Props> {
   }
 
   openShowValuesAs() {
-    this.env.openSidePanel("PivotMeasureDisplayPanel", {
-      pivotId: this.props.pivotId,
-      measure: this.props.measure,
-    });
+    this.env.openSidePanel(
+      "PivotMeasureDisplayPanel",
+      {
+        pivotId: this.props.pivotId,
+        measure: this.props.measure,
+      },
+      `pivot_key_${this.props.pivotId}`
+    );
   }
 
   getColoredSymbolToken(token: Token): Color | undefined {

src/components/side_panel/pivot/pivot_measure_display_panel/pivot_measure_display_panel.ts

@@ -54,12 +54,20 @@ export class PivotMeasureDisplayPanel extends Component<Props, SpreadsheetChildE
   }
 
   onSave() {
-    this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+    this.env.openSidePanel(
+      "PivotSidePanel",
+      { pivotId: this.props.pivotId },
+      `pivot_measure_display_${this.props.pivotId}`
+    );
   }
 
   onCancel() {
     this.store.cancelMeasureDisplayEdition();
-    this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+    this.env.openSidePanel(
+      "PivotSidePanel",
+      { pivotId: this.props.pivotId },
+      `pivot_measure_display_${this.props.pivotId}`
+    );
   }
 
   get fieldChoices() {

src/components/side_panel/side_panel/side_panel_store.ts

@@ -99,7 +99,11 @@ export class SidePanelStore extends SpreadsheetStore {
     return undefined;
   }
 
-  open(componentTag: string, initialPanelProps: SidePanelComponentProps = {}) {
+  open(
+    componentTag: string,
+    initialPanelProps: SidePanelComponentProps = {},
+    sourcePanelKey?: string
+  ) {
     if (this.screenWidthStore.isSmall) {
       return;
     }
@@ -110,8 +114,12 @@ export class SidePanelStore extends SpreadsheetStore {
       return;
     }
 
-    const mainPanelKey = this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
-    if (!this.mainPanel || !this.mainPanel.isPinned || mainPanelKey === state.key) {
+    if (sourcePanelKey) {
+      this._handleSourcePanel(sourcePanelKey, newPanelInfo, state);
+      return;
+    }
+
+    if (!this.mainPanel || !this.mainPanel.isPinned || this.mainPanelKey === state.key) {
       this._openPanel("mainPanel", newPanelInfo, state);
       return;
     }
@@ -135,6 +143,26 @@ export class SidePanelStore extends SpreadsheetStore {
     this._openPanel("secondaryPanel", newPanelInfo, state);
   }
 
+  private _handleSourcePanel(
+    sourcePanelKey: string,
+    newPanelInfo: PanelInfo,
+    state: OpenSidePanel
+  ) {
+    const isMainPanel = this.mainPanelKey === state.key;
+    const isSecondaryPanel = this.secondaryPanelKey === state.key;
+    if (isMainPanel && this.secondaryPanel) {
+      this.close();
+      return;
+    }
+    if (isSecondaryPanel && this.secondaryPanel) {
+      this.closeMainPanel();
+      this.togglePinPanel();
+      return;
+    }
+    const targetPanel = this.mainPanelKey === sourcePanelKey ? "mainPanel" : "secondaryPanel";
+    this._openPanel(targetPanel, newPanelInfo, state);
+  }
+
   private _openPanel(
     panel: "mainPanel" | "secondaryPanel",
     newPanel: PanelInfo,

src/registries/side_panel_registry.ts

@@ -145,7 +145,7 @@ sidePanelRegistry.add("PivotMeasureDisplayPanel", {
     try {
       // This will throw if the pivot or measure does not exist
       getters.getPivot(props.pivotId).getMeasure(props.measure.id);
-      return { isOpen: true, props, key: "pivot_measure_display" };
+      return { isOpen: true, props, key: `pivot_measure_display_${props.pivotId}` };
     } catch (e) {
       return { isOpen: false };
     }

src/types/env.ts

@@ -23,7 +23,7 @@ export interface SpreadsheetChildEnv extends NotificationStoreMethods {
   model: Model;
   imageProvider?: ImageProviderInterface;
   isDashboard: () => boolean;
-  openSidePanel: (panel: string, panelProps?: any) => void;
+  openSidePanel: (panel: string, panelProps?: any, sourcePanelKey?: string) => void;
   toggleSidePanel: (panel: string, panelProps?: any) => void;
   clipboard: ClipboardInterface;
   startCellEdition: (content?: string) => void;

tests/pivots/pivot_measure/pivot_measure_display_panel.test.ts

@@ -223,7 +223,11 @@ describe("Standalone side panel tests", () => {
     await mountPanel();
     await click(fixture, ".o-pivot-measure-save");
 
-    expect(openSidePanelSpy).toHaveBeenCalledWith("PivotSidePanel", { pivotId });
+    expect(openSidePanelSpy).toHaveBeenCalledWith(
+      "PivotSidePanel",
+      { pivotId },
+      `pivot_measure_display_${pivotId}`
+    );
   });
 
   test("Can cancel the edition of the measure display", async () => {
@@ -234,7 +238,11 @@ describe("Standalone side panel tests", () => {
     expect(getPivotMeasures()[0].display).toEqual({ type: "%_of_grand_total" });
 
     await click(fixture, ".o-pivot-measure-cancel");
-    expect(openSidePanelSpy).toHaveBeenCalledWith("PivotSidePanel", { pivotId });
+    expect(openSidePanelSpy).toHaveBeenCalledWith(
+      "PivotSidePanel",
+      { pivotId },
+      `pivot_measure_display_${pivotId}`
+    );
     expect(getPivotMeasures()[0].display).toEqual(undefined);
   });
 });

tests/spreadsheet/side_panel_component.test.ts

@@ -459,6 +459,31 @@ describe("Side Panel", () => {
       expect(".o-sidePanelTitle").toHaveText("Custom Panel");
     });
 
+    test("Reopening pinned main panel from secondary panel closes secondary panel", async () => {
+      await click(fixture, ".o-pin-panel");
+
+      parent.env.openSidePanel("CUSTOM_PANEL_2");
+      await nextTick();
+      expect(".o-sidePanel").toHaveCount(2);
+
+      parent.env.openSidePanel("CUSTOM_PANEL", {}, "CUSTOM_PANEL_2");
+      await nextTick();
+      expect(".o-sidePanel").toHaveCount(1);
+      expect(".o-sidePanelTitle").toHaveText("Custom Panel");
+    });
+
+    test("Reopening pinned main panel directly does not close secondary panel", async () => {
+      await click(fixture, ".o-pin-panel");
+
+      parent.env.openSidePanel("CUSTOM_PANEL_2");
+      await nextTick();
+      expect(".o-sidePanel").toHaveCount(2);
+
+      parent.env.openSidePanel("CUSTOM_PANEL", {});
+      await nextTick();
+      expect(".o-sidePanel").toHaveCount(2);
+    });
+
     test("Re-opening the same panel un-collapses it", async () => {
       await click(fixture, ".o-pin-panel");
       await click(fixture, ".o-collapse-panel");