[IMP] add_dimension_button: add computeFuzzySearchKey props

This commit adds a way to give a custom function to compute fuzzy search
keys. It will be used in Odoo to provide better fuzzy search results by
taking into account the technical names of the fields.

Task: 5226786

Author: pro-odoo

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

@@ -17,6 +17,7 @@ import { Popover } from "../../../../popover";
 interface Props {
   onFieldPicked: (field: string) => void;
   fields: PivotField[];
+  computeFuzzySearchKey: (field: PivotField) => string;
 }
 
 export class AddDimensionButton extends Component<Props, SpreadsheetChildEnv> {
@@ -25,8 +26,12 @@ export class AddDimensionButton extends Component<Props, SpreadsheetChildEnv> {
   static props = {
     onFieldPicked: Function,
     fields: Array,
+    computeFuzzySearchKey: { type: Function, optional: true },
     slots: { type: Object, optional: true },
   };
+  static defaultProps = {
+    computeFuzzySearchKey: (field: PivotField) => field.string,
+  };
 
   private buttonRef = useRef("button");
   private popover = useState({ isOpen: false });
@@ -61,15 +66,17 @@ export class AddDimensionButton extends Component<Props, SpreadsheetChildEnv> {
   get proposals(): AutoCompleteProposal[] {
     let fields: PivotField[];
     if (this.search.input) {
-      fields = fuzzyLookup(this.search.input, this.props.fields, (field) => field.string);
+      fields = fuzzyLookup(this.search.input, this.props.fields, (field) =>
+        this.props.computeFuzzySearchKey(field)
+      );
     } else {
       fields = this.props.fields;
     }
     return fields.map((field) => {
       const text = field.string;
       return {
         text,
-        fuzzySearchKey: text,
+        fuzzySearchKey: this.props.computeFuzzySearchKey(field),
         htmlContent: getHtmlContentFromPattern(
           this.search.input,
           text,

tests/pivots/add_dimension_button.test.ts

@@ -48,4 +48,26 @@ describe("Add dimension button", () => {
     await keyDown({ key: "Enter" });
     expect(onFieldPicked).toHaveBeenCalledWith("Amount");
   });
+
+  test("Can give a custom fuzzy search key compute", async () => {
+    const computeFuzzySearchKey = jest.fn();
+    const { fixture } = await mountAddDimensionButton({
+      fields: [
+        { name: "Amount", type: "integer", string: "Amount" },
+        { name: "Product", type: "char", string: "Product" },
+      ],
+      computeFuzzySearchKey,
+    });
+    await click(fixture.querySelector(".add-dimension")!);
+    expect(computeFuzzySearchKey).toHaveBeenNthCalledWith(1, {
+      name: "Amount",
+      type: "integer",
+      string: "Amount",
+    });
+    expect(computeFuzzySearchKey).toHaveBeenNthCalledWith(2, {
+      name: "Product",
+      type: "char",
+      string: "Product",
+    });
+  });
 });