Merge branch 'main' into tests-for-setting-balance-and-exporting-gift…

…-cards

.changeset/big-pets-bathe.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix "TypeError: Cannot read properties of undefined (reading '0')" error thrown by datagrid by stop propagating events from RadioGroup component in ChannelsAvailability. RadioGroup fires couple events at onec and datagrid listing to global onClick event, that cause error in datagrid.

.changeset/funny-rabbits-walk.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Add "ResizeObserver loop limit exceeded" to ignored in Sentry. Error is thrown only during Cypress tests that will be soon migrated and we could remove error from ignored.

.changeset/wicked-scissors-fold.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Add "ResizeObserver loop completed with undelivered notifications" to ignored in Sentry.

src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx

@@ -1,16 +1,11 @@
 // @ts-strict-ignore
 import { ChannelData } from "@dashboard/channels/utils";
+import { RadioGroup } from "@dashboard/components/RadioGroup";
 import useCurrentDate from "@dashboard/hooks/useCurrentDate";
 import useDateLocalize from "@dashboard/hooks/useDateLocalize";
 import { getFormErrors, getProductErrorMessage } from "@dashboard/utils/errors";
 import { TextField } from "@material-ui/core";
-import {
-  Box,
-  Checkbox,
-  Divider,
-  RadioGroup,
-  Text,
-} from "@saleor/macaw-ui-next";
+import { Box, Checkbox, Divider, Text } from "@saleor/macaw-ui-next";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
 

src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,22 @@
+import {
+  RadioGroup as RadioGroupBase,
+  RadioGroupRootProps,
+} from "@saleor/macaw-ui-next";
+import React from "react";
+
+import { StopPropagation } from "../StopPropagation";
+
+const RadioGroupRoot = (props: RadioGroupRootProps) => {
+  // StopProgation is used here to block onClick events from RadioGroup that cause throw error in datagrid
+  // Datagrid listing for all on click event but RadioGroup emitated couple events at onced
+  // Radix issue: https://github.com/radix-ui/primitives/issues/1982
+  return (
+    <StopPropagation>
+      <RadioGroupBase {...props} />
+    </StopPropagation>
+  );
+};
+
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+  Item: RadioGroupBase.Item,
+});

src/components/RadioGroup/index.ts

@@ -0,0 +1 @@
+export * from "./RadioGroup";

src/components/StopPropagation/StopPropagation.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+
+interface StopPropagationProps {
+  children: ReactNode;
+}
+
+// If you don't want to click events bubble in the DOM tree, you can use this component.
+export const StopPropagation = ({ children }: StopPropagationProps) => {
+  const stopPropagation = (e: React.MouseEvent) => e.stopPropagation();
+
+  return <div onClick={stopPropagation}>{children}</div>;
+};

src/components/StopPropagation/index.ts

@@ -0,0 +1 @@
+export * from "./StopPropagation";

src/services/errorTracking/adapters/Sentry.ts

@@ -13,7 +13,12 @@ export const SentryAdapter = (config: Config): TrackerMethods => {
       Sentry.init({
         dsn: config.dsn,
         environment: config.environment,
-        ignoreErrors: ["Editor's content can not be saved in read-only mode"],
+        ignoreErrors: [
+          "Editor's content can not be saved in read-only mode",
+          "ResizeObserver loop completed with undelivered notifications",
+          // TODO: rmoeve after Cypress migation
+          "ResizeObserver loop limit exceeded",
+        ],
       });
       return true;
     }