From 3f208b575265bb7bf8106b1c01ee2ee9492cb34f Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Wed, 23 Apr 2025 17:03:02 +0700
Subject: [PATCH] feat: let users dismiss blocking error in unsupported
 browsers (#5158)

Ref https://github.com/webstudio-is/webstudio/issues/1818

Users want to use builder in safari and firefox even though we don't
officially support them. So we will let users dismiss blocking error.

<img width="522" alt="image"
src="https://github.com/user-attachments/assets/4871fb06-38c9-41b9-8595-0d01a62b9f20"
/>
---
 .../features/blocking-alerts/alert.tsx        | 25 ++++++++++++++++++-
 .../blocking-alerts/blocking-alerts.tsx       | 10 ++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/apps/builder/app/builder/features/blocking-alerts/alert.tsx b/apps/builder/app/builder/features/blocking-alerts/alert.tsx
index c8a16f5d28..ce7068fef6 100644
--- a/apps/builder/app/builder/features/blocking-alerts/alert.tsx
+++ b/apps/builder/app/builder/features/blocking-alerts/alert.tsx
@@ -1,5 +1,8 @@
+import { atom } from "nanostores";
+import { useStore } from "@nanostores/react";
 import type { ReactNode } from "react";
 import {
+  Button,
   css,
   Flex,
   Popover,
@@ -23,7 +26,19 @@ const contentStyle = css({
   color: theme.colors.foregroundDestructive,
 });
 
-export const Alert = ({ message }: { message: string | ReactNode }) => {
+const $isAlertDismissed = atom(false);
+
+export const Alert = ({
+  message,
+  isDismissable,
+}: {
+  message: string | ReactNode;
+  isDismissable?: boolean;
+}) => {
+  const isAlertDismissed = useStore($isAlertDismissed);
+  if (isAlertDismissed) {
+    return;
+  }
   return (
     <Popover open>
       <PopoverContent css={{ zIndex: theme.zIndices.max }}>
@@ -38,6 +53,14 @@ export const Alert = ({ message }: { message: string | ReactNode }) => {
             <Text color="contrast" align="center">
               {message}
             </Text>
+            {isDismissable && (
+              <Button
+                color="destructive"
+                onClick={() => $isAlertDismissed.set(true)}
+              >
+                Dismiss
+              </Button>
+            )}
           </Flex>
         </Flex>
       </PopoverContent>
diff --git a/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx b/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
index df12c3f764..93f2177e0d 100644
--- a/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
+++ b/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
@@ -93,8 +93,9 @@ export const BlockingAlerts = () => {
   const isPreviewMode = useStore($isPreviewMode);
   const loadingState = useStore($loadingState);
 
+  const unsupportedBrowsersMessage = useUnsupportedBrowser();
   // Takes the latest message, order matters
-  const message = [useTooSmallMessage(), useUnsupportedBrowser()]
+  const message = [useTooSmallMessage(), unsupportedBrowsersMessage]
     .filter(Boolean)
     .pop();
 
@@ -107,5 +108,10 @@ export const BlockingAlerts = () => {
     return;
   }
 
-  return <Alert message={message} />;
+  return (
+    <Alert
+      message={message}
+      isDismissable={unsupportedBrowsersMessage !== undefined}
+    />
+  );
 };