🤖 backported "Trim clipboard data in filter widgets" (#40720)

Co-authored-by: Alexander Polyankin <alexander.polyankin@metabase.com>

frontend/src/metabase/querying/components/FilterValuePicker/FilterValuePicker.unit.spec.tsx

@@ -6,6 +6,7 @@ import {
 } from "__support__/server-mocks";
 import {
   act,
+  createMockClipboardData,
   renderWithProviders,
   screen,
   waitForLoaderToBeRemoved,
@@ -539,6 +540,23 @@ describe("StringFilterValuePicker", () => {
       expect(screen.queryByText("a@b")).not.toBeInTheDocument();
       expect(onChange).toHaveBeenLastCalledWith(["a@b.com", "a@b"]);
     });
+
+    it("should trim clipboard data", async () => {
+      const { onChange } = await setupStringPicker({
+        query,
+        stageIndex,
+        column,
+        values: [],
+      });
+
+      const clipboardData = createMockClipboardData({
+        getData: () => " abc\r\ndef",
+      });
+      userEvent.paste(screen.getByLabelText("Filter value"), "", {
+        clipboardData,
+      });
+      expect(onChange).toHaveBeenLastCalledWith(["abc", "def"]);
+    });
   });
 
   describe("no values", () => {

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

@@ -71,10 +71,9 @@ export function MultiAutocomplete({
     const text = event.clipboardData.getData("Text");
     const values = text.split(/[\n,]/g);
     if (values.length > 1) {
-      const uniqueValues = [...new Set(values)];
-      const validValues = uniqueValues.filter(value =>
-        shouldCreate?.(value, []),
-      );
+      const validValues = [...new Set(values)]
+        .map(value => value.trim())
+        .filter(value => shouldCreate?.(value, []));
       if (validValues.length > 0) {
         event.preventDefault();
         const newSelectedValues = [...lastSelectedValues, ...validValues];

frontend/test/__support__/ui.tsx

@@ -209,4 +209,43 @@ export const waitForLoaderToBeRemoved = async () => {
   });
 };
 
+/**
+ * jsdom doesn't have getBoundingClientRect, so we need to mock it
+ */
+export const mockGetBoundingClientRect = (options: Partial<DOMRect> = {}) => {
+  jest
+    .spyOn(window.Element.prototype, "getBoundingClientRect")
+    .mockImplementation(() => {
+      return {
+        height: 200,
+        width: 200,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+        ...options,
+      };
+    });
+};
+
+/**
+ * jsdom doesn't have scrollBy, so we need to mock it
+ */
+export const mockScrollBy = () => {
+  window.Element.prototype.scrollBy = jest.fn();
+};
+
+/**
+ * jsdom doesn't have DataTransfer
+ */
+export function createMockClipboardData(
+  opts?: Partial<DataTransfer>,
+): DataTransfer {
+  const clipboardData = { ...opts };
+  return clipboardData as unknown as DataTransfer;
+}
+
 export * from "@testing-library/react";