[FIX] data validation: unify checkbox style

Data validation check-boxes don't have the same style as any other
check-boxes in the UI.

I also added a missing test checking and unchecking the checkbox.

closes #5072

Task: 4235283
X-original-commit: 246d233
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>

src/components/data_validation_overlay/dv_checkbox/dv_checkbox.ts

@@ -2,15 +2,13 @@ import { Component } from "@odoo/owl";
 import { GRID_ICON_EDGE_LENGTH } from "../../../constants";
 import { CellPosition, SpreadsheetChildEnv } from "../../../types";
 import { css } from "../../helpers";
+import { CHECKBOX_WIDTH, Checkbox } from "../../side_panel/components/checkbox/checkbox";
 
-const CHECKBOX_WIDTH = 15;
 const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
 
 css/* scss */ `
   .o-dv-checkbox {
     box-sizing: border-box !important;
-    width: ${CHECKBOX_WIDTH}px;
-    height: ${CHECKBOX_WIDTH}px;
     accent-color: #808080;
     margin: ${MARGIN}px;
     /** required to prevent the checkbox position to be sensible to the font-size (affects Firefox) */
@@ -24,14 +22,16 @@ interface Props {
 
 export class DataValidationCheckbox extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-DataValidationCheckbox";
+  static components = {
+    Checkbox,
+  };
   static props = {
     cellPosition: Object,
   };
 
-  onCheckboxChange(ev: Event) {
-    const newValue = (ev.target as HTMLInputElement).checked;
+  onCheckboxChange(value: boolean) {
     const { sheetId, col, row } = this.props.cellPosition;
-    const cellContent = newValue ? "TRUE" : "FALSE";
+    const cellContent = value ? "TRUE" : "FALSE";
     this.env.model.dispatch("UPDATE_CELL", { sheetId, col, row, content: cellContent });
   }
 

src/components/data_validation_overlay/dv_checkbox/dv_checkbox.xml

@@ -1,11 +1,10 @@
 <templates>
   <t t-name="o-spreadsheet-DataValidationCheckbox">
-    <input
-      type="checkbox"
-      class="o-dv-checkbox"
-      t-att-class="{'pe-none': isDisabled}"
-      t-on-change="onCheckboxChange"
-      t-att-checked="checkBoxValue"
+    <Checkbox
+      name="'data-validation-checkbox'"
+      value="checkBoxValue"
+      onChange.bind="onCheckboxChange"
+      className="isDisabled ? 'pe-none o-dv-checkbox' : 'o-dv-checkbox'"
     />
   </t>
 </templates>

src/components/side_panel/components/checkbox/checkbox.ts

@@ -19,15 +19,17 @@ interface Props {
   onChange: (value: boolean) => void;
 }
 
+export const CHECKBOX_WIDTH = 14;
+
 css/* scss */ `
   label.o-checkbox {
     input {
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       border-radius: 0;
-      width: 14px;
-      height: 14px;
+      width: ${CHECKBOX_WIDTH}px;
+      height: ${CHECKBOX_WIDTH}px;
       vertical-align: top;
       box-sizing: border-box;
       outline: none;

tests/data_validation/data_validation_checkbox_component.test.ts

@@ -5,7 +5,8 @@ import {
   setCellContent,
   setStyle,
 } from "../test_helpers/commands_helpers";
-import { getStyle } from "../test_helpers/getters_helpers";
+import { click } from "../test_helpers/dom_helper";
+import { getCellContent, getStyle } from "../test_helpers/getters_helpers";
 import { mountSpreadsheet, nextTick } from "../test_helpers/helpers";
 
 describe("Checkbox in model", () => {
@@ -35,6 +36,21 @@ describe("Checkbox in model", () => {
 });
 
 describe("Checkbox component", () => {
+  test("can check and uncheck", async () => {
+    const model = new Model();
+    addDataValidation(model, "A1", "id", { type: "isBoolean", values: [] });
+    const { fixture } = await mountSpreadsheet({ model });
+    await nextTick();
+    const checkbox = fixture.querySelector(".o-dv-checkbox input") as HTMLInputElement;
+    expect(checkbox?.checked).toBe(false);
+    await click(checkbox);
+    expect(getCellContent(model, "A1")).toBe("TRUE");
+    expect(checkbox?.checked).toBe(true);
+    await click(checkbox);
+    expect(getCellContent(model, "A1")).toBe("FALSE");
+    expect(checkbox?.checked).toBe(false);
+  });
+
   test("Data validation checkbox on formula is disabled", async () => {
     const model = new Model();
     addDataValidation(model, "A1", "id", { type: "isBoolean", values: [] });