[IMP] Table side panel : added highlights to the table range

When a table side panel is open, the table range is now highlighted.
This makes it easier for users to identify the table they are editing,
especially when there are multiple tables in the sheet.

Task: 6008091

Author: matho-odoo

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";
@@ -44,6 +46,9 @@ export class TablePanel extends Component<TablePanelProps, 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),

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";
@@ -170,6 +175,12 @@ describe("Table side panel", () => {
     expect(getTable(model, sheetId).range.zone).toEqual(toZone("A1"));
   });
 
+  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 });