From 0bb57973778ba6a16df1de05f937b7e7ac21d2a8 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@zoo.dev>
Date: Tue, 8 Apr 2025 13:10:49 -0400
Subject: [PATCH] Fix unclickable state while opening share link in browser
 (#6201)

* Fix unclickable state, don't show warning if query present

* Leave a note about need for a web test

* Fix browser share links by waiting for network connection

* Don't worry about engineConnection on home route
---
 e2e/playwright/various.spec.ts             |  9 +++++++++
 src/components/DownloadAppBanner.tsx       |  8 ++++++--
 src/hooks/useCreateFileLinkQueryWatcher.ts | 17 ++++++++++++++---
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/e2e/playwright/various.spec.ts b/e2e/playwright/various.spec.ts
index 2488404b4..9cdc9a43b 100644
--- a/e2e/playwright/various.spec.ts
+++ b/e2e/playwright/various.spec.ts
@@ -612,3 +612,12 @@ profile001 = startProfileAt([-12.34, 12.34], sketch002)
 const sketch002 = extrude(sketch002, length = ${[5, 5]} + 7)`
   await expect(page.locator('.cm-content')).toHaveText(result2.regExp)
 })
+
+test.fixme(
+  `Opening a share link in the web isn't blocked by the web warning banner`,
+  async () => {
+    // This test is not able to be run right now since we don't have a web-only setup for Playwright.
+    // @franknoirot can implement it when that testing infra is set up. It should be a test to cover the fix from
+    // modeling-app issue #6172.
+  }
+)
diff --git a/src/components/DownloadAppBanner.tsx b/src/components/DownloadAppBanner.tsx
index 18fc203dc..ee955a4fa 100644
--- a/src/components/DownloadAppBanner.tsx
+++ b/src/components/DownloadAppBanner.tsx
@@ -2,12 +2,16 @@ import { Dialog } from '@headlessui/react'
 import { useState } from 'react'
 
 import { ActionButton } from '@src/components/ActionButton'
+import { CREATE_FILE_URL_PARAM } from '@src/lib/constants'
 import { useSettings } from '@src/machines/appMachine'
+import { useSearchParams } from 'react-router-dom'
 
 const DownloadAppBanner = () => {
+  const [searchParams] = useSearchParams()
   const settings = useSettings()
   const [isBannerDismissed, setIsBannerDismissed] = useState(
-    settings.app.dismissWebBanner.current
+    searchParams.has(CREATE_FILE_URL_PARAM) ||
+      settings.app.dismissWebBanner.current
   )
 
   return (
@@ -43,7 +47,7 @@ const DownloadAppBanner = () => {
             <ActionButton
               Element="externalLink"
               to="https://zoo.dev/modeling-app/download"
-              className="group text-warn-10 dark:!text-warn-10 pr-1 border-warn-70 hover:border-warn-80 dark:!border-warn-70 dark:hover:!border-warn-80 bg-warn-70 group-hover:bg-warn-80 dark:bg-warn-70 dark:group-hover:bg-warn-80"
+              className="group !text-warn-10 pr-1 border-warn-70 hover:border-warn-80 dark:!border-warn-70 dark:hover:!border-warn-80 bg-warn-70 group-hover:bg-warn-80 dark:bg-warn-70 dark:group-hover:bg-warn-80"
               iconEnd={{
                 icon: 'arrowRight',
                 iconClassName: 'text-warn-10 dark:text-warn-10',
diff --git a/src/hooks/useCreateFileLinkQueryWatcher.ts b/src/hooks/useCreateFileLinkQueryWatcher.ts
index d02594a6f..1a0f8cdb0 100644
--- a/src/hooks/useCreateFileLinkQueryWatcher.ts
+++ b/src/hooks/useCreateFileLinkQueryWatcher.ts
@@ -1,11 +1,14 @@
 import { useEffect } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'react-router-dom'
 
+import { useNetworkContext } from '@src/hooks/useNetworkContext'
+import { EngineConnectionStateType } from '@src/lang/std/engineConnection'
 import { base64ToString } from '@src/lib/base64'
 import type { ProjectsCommandSchema } from '@src/lib/commandBarConfigs/projectsCommandConfig'
 import { CREATE_FILE_URL_PARAM, DEFAULT_FILE_NAME } from '@src/lib/constants'
 import { isDesktop } from '@src/lib/isDesktop'
 import type { FileLinkParams } from '@src/lib/links'
+import { PATHS } from '@src/lib/paths'
 import { useSettings } from '@src/machines/appMachine'
 
 // For initializing the command arguments, we actually want `method` to be undefined
@@ -26,13 +29,21 @@ export type CreateFileSchemaMethodOptional = Omit<
 export function useCreateFileLinkQuery(
   callback: (args: CreateFileSchemaMethodOptional) => void
 ) {
+  const { immediateState } = useNetworkContext()
+  const { pathname } = useLocation()
   const [searchParams] = useSearchParams()
   const settings = useSettings()
 
   useEffect(() => {
+    const isHome = pathname === PATHS.HOME
     const createFileParam = searchParams.has(CREATE_FILE_URL_PARAM)
 
-    if (createFileParam) {
+    if (
+      createFileParam &&
+      (immediateState.type ===
+        EngineConnectionStateType.ConnectionEstablished ||
+        isHome)
+    ) {
       const params: FileLinkParams = {
         code: base64ToString(
           decodeURIComponent(searchParams.get('code') ?? '')
@@ -54,5 +65,5 @@ export function useCreateFileLinkQuery(
 
       callback(argDefaultValues)
     }
-  }, [searchParams])
+  }, [searchParams, immediateState])
 }