[FIX] Table side panel: fix closing

src/actions/edit_actions.ts

@@ -159,7 +159,12 @@ export const mergeCells: ActionSpec = {
 
 export const editTable: ActionSpec = {
   name: () => _t("Edit table"),
-  execute: (env) => env.openSidePanel("TableSidePanel", {}),
+  execute: (env) => {
+    const table = env.model.getters.getFirstTableInSelection();
+    if (table) {
+      env.openSidePanel("TableSidePanel", { table });
+    }
+  },
   icon: "o-spreadsheet-Icon.EDIT_TABLE",
 };
 

src/actions/menu_items_actions.ts

@@ -626,7 +626,10 @@ export const INSERT_TABLE = (env: SpreadsheetChildEnv) => {
 
   const result = interactiveCreateTable(env, sheetId);
   if (result.isSuccessful) {
-    env.openSidePanel("TableSidePanel", {});
+    const table = env.model.getters.getFirstTableInSelection();
+    if (table) {
+      env.openSidePanel("TableSidePanel", { table });
+    }
   }
 };
 

src/components/side_panel/table_panel/table_panel.ts

@@ -5,8 +5,10 @@ import { Zone } from "../../../types/misc";
 import { Range } from "../../../types/range";
 import { CoreTable, TableConfig } from "../../../types/table";
 
+import { HIGHLIGHT_COLOR } from "../../../constants";
 import { getTableTopLeft } from "../../../helpers/table_helpers";
 import { SpreadsheetChildEnv } from "../../../types/spreadsheet_env";
+import { useHighlights } from "../../helpers/highlight_hook";
 import { NumberInput } from "../../number_input/number_input";
 import { SelectionInput } from "../../selection_input/selection_input";
 import { TableStylePicker } from "../../tables/table_style_picker/table_style_picker";
@@ -15,7 +17,7 @@ import { ValidationMessages } from "../../validation_messages/validation_message
 import { Checkbox } from "../components/checkbox/checkbox";
 import { Section } from "../components/section/section";
 
-interface Props {
+export interface TablePanelProps {
   table: CoreTable;
   onCloseSidePanel: () => void;
 }
@@ -28,7 +30,7 @@ interface State {
   filtersEnabledIfPossible: boolean;
 }
 
-export class TablePanel extends Component<Props, SpreadsheetChildEnv> {
+export class TablePanel extends Component<TablePanelProps, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-TablePanel";
   static components = {
     TableStylePicker,
@@ -44,6 +46,9 @@ export class TablePanel extends Component<Props, SpreadsheetChildEnv> {
 
   setup() {
     const sheetId = this.env.model.getters.getActiveSheetId();
+    useHighlights({
+      highlights: [{ range: this.props.table.range, noFill: true, color: HIGHLIGHT_COLOR }],
+    });
     this.state = useState({
       tableZoneErrors: [],
       tableXc: this.env.model.getters.getRangeString(this.props.table.range, sheetId),

src/components/tables/table_dropdown_button/table_dropdown_button.ts

@@ -42,7 +42,10 @@ export class TableDropdownButton extends Component<Props, SpreadsheetChildEnv> {
     const tableConfig = { ...this.tableConfig, styleId };
     const result = interactiveCreateTable(this.env, sheetId, tableConfig);
     if (result.isSuccessful) {
-      this.env.openSidePanel("TableSidePanel", {});
+      const table = this.env.model.getters.getFirstTableInSelection();
+      if (table) {
+        this.env.openSidePanel("TableSidePanel", { table });
+      }
     }
     this.closePopover();
   }
@@ -57,9 +60,10 @@ export class TableDropdownButton extends Component<Props, SpreadsheetChildEnv> {
       this.env.openSidePanel("PivotSidePanel", { pivotId, openTab: "design" });
       return;
     }
-    if (this.env.model.getters.getFirstTableInSelection()) {
+    const table = this.env.model.getters.getFirstTableInSelection();
+    if (table) {
       this.topBarToolStore.closeDropdowns();
-      this.env.toggleSidePanel("TableSidePanel", {});
+      this.env.toggleSidePanel("TableSidePanel", { table });
       return;
     }
 

src/plugins/core/tables.ts

@@ -47,8 +47,12 @@ interface TableState {
 }
 
 export class TablePlugin extends CorePlugin<TableState> implements TableState {
-  static getters = ["getCoreTable", "getCoreTables", "getCoreTableMatchingTopLeft"] as const;
-
+  static getters = [
+    "getCoreTable",
+    "getCoreTables",
+    "getCoreTableMatchingTopLeft",
+    "getCoreTableById",
+  ] as const;
   readonly tables: Record<UID, Record<TableId, CoreTable | undefined>> = {};
   readonly nextTableId: number = 1;
 
@@ -196,6 +200,10 @@ export class TablePlugin extends CorePlugin<TableState> implements TableState {
     return this.getCoreTables(sheetId).find((table) => isInside(col, row, table.range.zone));
   }
 
+  getCoreTableById(sheetId: UID, tableId: UID): CoreTable | undefined {
+    return this.tables[sheetId]?.[tableId];
+  }
+
   private getTablesOverlappingZones(sheetId: UID, zones: Zone[]): CoreTable[] {
     return this.getCoreTables(sheetId).filter((table) =>
       zones.some((zone) => overlap(table.range.zone, zone))

src/registries/side_panel_registry.ts

@@ -15,12 +15,11 @@ import { RemoveDuplicatesPanel } from "../components/side_panel/remove_duplicate
 import { SettingsPanel } from "../components/side_panel/settings/settings_panel";
 import { SidePanelState } from "../components/side_panel/side_panel/side_panel_store";
 import { SplitIntoColumnsPanel } from "../components/side_panel/split_to_columns_panel/split_to_columns_panel";
-import { TablePanel } from "../components/side_panel/table_panel/table_panel";
+import { TablePanel, TablePanelProps } from "../components/side_panel/table_panel/table_panel";
 import {
   TableStyleEditorPanel,
   TableStyleEditorPanelProps,
 } from "../components/side_panel/table_style_editor_panel/table_style_editor_panel";
-import { getTableTopLeft } from "../helpers/table_helpers";
 import { _t } from "../translation";
 import { ConditionalFormat } from "../types/conditional_formatting";
 import { Getters } from "../types/getters";
@@ -131,14 +130,13 @@ sidePanelRegistry.add("ColumnStats", {
 sidePanelRegistry.add("TableSidePanel", {
   title: _t("Edit table"),
   Body: TablePanel,
-  computeState: (getters: Getters) => {
-    const table = getters.getFirstTableInSelection();
-    if (!table || table.isPivotTable) {
+  computeState: (getters: Getters, props: TablePanelProps) => {
+    const sheetId = props.table.range.sheetId;
+    const table = getters.getCoreTableById(sheetId, props.table.id);
+    if (sheetId !== getters.getActiveSheetId() || !table) {
       return { isOpen: false };
     }
-
-    const coreTable = getters.getCoreTable(getTableTopLeft(table));
-    return { isOpen: true, props: { table: coreTable }, key: table.id };
+    return { isOpen: true, props: { ...props, table }, key: props.table.id };
   },
 });
 

tests/menus/menu_items_registry.test.ts

@@ -1747,9 +1747,10 @@ describe("Menu Item actions", () => {
       test("Edit -> Table (topbar)", async () => {
         const spyOpenSidePanel = jest.spyOn(env, "openSidePanel");
         createTable(model, "A1:A5");
+        const table = model.getters.getFirstTableInSelection();
         expect(getName(editTablePath, env)).toBe("Edit table");
         await doAction(editTablePath, env);
-        expect(spyOpenSidePanel).toHaveBeenCalledWith("TableSidePanel", {});
+        expect(spyOpenSidePanel).toHaveBeenCalledWith("TableSidePanel", { table });
       });
 
       test("Edit -> Table (topbar) is not visible if there is no table in the selection", () => {
@@ -1761,9 +1762,10 @@ describe("Menu Item actions", () => {
       test("Edit table (cellRegistry)", async () => {
         const spyOpenSidePanel = jest.spyOn(env, "openSidePanel");
         createTable(model, "A1:A5");
+        const table = model.getters.getFirstTableInSelection();
         expect(getName(["edit_table"], env, cellMenuRegistry)).toBe("Edit table");
         await doAction(["edit_table"], env, cellMenuRegistry);
-        expect(spyOpenSidePanel).toHaveBeenCalledWith("TableSidePanel", {});
+        expect(spyOpenSidePanel).toHaveBeenCalledWith("TableSidePanel", { table });
       });
 
       test("Delete table (cellRegistry)", async () => {

tests/table/table_panel_component.test.ts

@@ -10,7 +10,12 @@ import {
 } from "../test_helpers/commands_helpers";
 import { click, setInputValueAndTrigger, simulateClick } from "../test_helpers/dom_helper";
 import { getCellRawContent } from "../test_helpers/getters_helpers";
-import { mountComponentWithPortalTarget, nextTick, setGrid } from "../test_helpers/helpers";
+import {
+  getHighlightsFromStore,
+  mountComponentWithPortalTarget,
+  nextTick,
+  setGrid,
+} from "../test_helpers/helpers";
 
 import { Model } from "../../src";
 import { SidePanels } from "../../src/components/side_panel/side_panels/side_panels";
@@ -37,8 +42,9 @@ describe("Table side panel", () => {
     model = new Model();
     sheetId = model.getters.getActiveSheetId();
     createTable(model, "A1:C3");
+    const table = model.getters.getFirstTableInSelection();
     ({ fixture, env } = await mountComponentWithPortalTarget(SidePanels, { model }));
-    env.openSidePanel("TableSidePanel", {});
+    env.openSidePanel("TableSidePanel", { table });
     await nextTick();
   });
 
@@ -169,7 +175,13 @@ describe("Table side panel", () => {
     expect(getTable(model, sheetId).range.zone).toEqual(toZone("A1"));
   });
 
-  test("Changing the selection changes the edited table", async () => {
+  test("the table range is highlighted when the side panel is open", async () => {
+    expect(getHighlightsFromStore(env).map((h) => zoneToXc(h.range.zone))).toEqual(["A1:C3"]);
+    await simulateClick(".o-sidePanelClose");
+    expect(getHighlightsFromStore(env).map((h) => zoneToXc(h.range.zone))).toEqual([]);
+  });
+
+  test("Changing the selection does not change the edited table", async () => {
     createTable(model, "D1:D2");
     updateTableConfig(model, "D1:D2", { numberOfHeaders: 0 });
 
@@ -178,22 +190,22 @@ describe("Table side panel", () => {
 
     setSelection(model, ["D1"]);
     await nextTick();
-    expect(fixture.querySelector<HTMLInputElement>("input[name='headerRow']")!.checked).toBe(false);
-    expect(fixture.querySelector<HTMLInputElement>(".o-selection input")!.value).toBe("D1:D2");
+    expect(fixture.querySelector<HTMLInputElement>("input[name='headerRow']")!.checked).toBe(true);
+    expect(fixture.querySelector<HTMLInputElement>(".o-selection input")!.value).toBe("A1:C3");
   });
 
-  test("Selecting a cell without a table closes the side panel", async () => {
+  test("Selecting a cell without a table does not close the side panel", async () => {
     setSelection(model, ["D1"]);
     await nextTick();
-    expect(fixture.querySelector(".o-table-panel")).toBeNull();
+    expect(fixture.querySelector(".o-table-panel")).not.toBeNull();
   });
 
-  test("Selecting a cell with a pivot table closes the table panel", async () => {
+  test("Selecting a cell with a pivot table does not close the table panel", async () => {
     setGrid(model, { A1: "Header1", B1: "Header2", A2: "Data1", B2: "Data2", F1: "=PIVOT(1)" });
     addPivot(model, "A1:B2", { style: { tableStyleId: "PivotTableStyleMedium9" } });
     setSelection(model, ["F1"]);
     await nextTick();
-    expect(fixture.querySelector(".o-table-panel")).toBeNull();
+    expect(fixture.querySelector(".o-table-panel")).not.toBeNull();
   });
 
   test("Can edit the table style", async () => {