Fix Datagrid's number cell paste issue for certain values (#4811)

* fix datagrid paste issue

* use regex and add tests

* changeset

* ignore strict

* remove comment

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/sharp-planets-jam.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fixes an issue that prevented users from pasting values smaller than 10 into datagrid cells

src/components/Datagrid/customCells/NumberCell.test.ts

@@ -0,0 +1,77 @@
+// @ts-strict-ignore
+import { Locale } from "@dashboard/components/Locale";
+
+import {
+  numberCellEmptyValue,
+  NumberCellProps,
+  numberCellRenderer,
+} from "./NumberCell";
+
+const locale = Locale.EN;
+
+describe("NumberCell renderer", () => {
+  it("should paste integer value", () => {
+    // Arrange
+    const { onPaste } = numberCellRenderer(locale);
+    const value = "10";
+    const data = { value: 0 } as NumberCellProps;
+
+    // Act
+    const result = onPaste(value, data);
+
+    // Assert
+    expect(result.value).toBe(10);
+  });
+
+  it("should paste float value", () => {
+    // Arrange
+    const { onPaste } = numberCellRenderer(locale);
+    const value = "10.5";
+    const data = { value: 0 } as NumberCellProps;
+
+    // Act
+    const result = onPaste(value, data);
+
+    // Assert
+    expect(result.value).toBe(10.5);
+  });
+
+  it("should return empty cell if value is negative", () => {
+    // Arrange
+    const { onPaste } = numberCellRenderer(locale);
+    const value = "-10";
+    const data = { value: 0 } as NumberCellProps;
+
+    // Act
+    const result = onPaste(value, data);
+
+    // Assert
+    expect(result.value).toBe(numberCellEmptyValue);
+  });
+
+  it("should return empty cell if value is not a number", () => {
+    // Arrange
+    const { onPaste } = numberCellRenderer(locale);
+    const value = "UwU";
+    const data = { value: 0 } as NumberCellProps;
+
+    // Act
+    const result = onPaste(value, data);
+
+    // Assert
+    expect(result.value).toBe(numberCellEmptyValue);
+  });
+
+  it("should paste integer value under 10", () => {
+    // Arrange
+    const { onPaste } = numberCellRenderer(locale);
+    const value = "5";
+    const data = { value: 0 } as NumberCellProps;
+
+    // Act
+    const result = onPaste(value, data);
+
+    // Assert
+    expect(result.value).toBe(5);
+  });
+});

src/components/Datagrid/customCells/NumberCell.tsx

@@ -21,8 +21,7 @@ export interface NumberCellProps {
 
 export type NumberCell = CustomCell<NumberCellProps>;
 
-const onlyDigitsRegExp = /^\d+$/;
-const flaotingPointDigits = /^[0-9]+[.,]?[0-9]+$/;
+const floatOrDigits = /^\d+$|^[0-9]+[.,]?[0-9]+$/;
 
 const NumberCellEdit: ReturnType<ProvideEditorCallback<NumberCell>> = ({
   value: cell,
@@ -82,16 +81,11 @@ export const numberCellRenderer = (
     }),
   }),
   onPaste: (value, data) => {
-    const testRegExp = data.options?.hasFloatingPoint
-      ? flaotingPointDigits
-      : onlyDigitsRegExp;
-    if (!testRegExp.test(value)) {
-      return undefined;
-    }
+    const isValueValid = floatOrDigits.test(value);
 
     return {
       ...data,
-      value: value ? parseFloat(value) : numberCellEmptyValue,
+      value: isValueValid ? parseFloat(value) : numberCellEmptyValue,
     };
   },
 });