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

@@ -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.
+  }
+)

src/components/DownloadAppBanner.tsx

@@ -2,11 +2,15 @@ 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(
+    searchParams.has(CREATE_FILE_URL_PARAM) ||
       settings.app.dismissWebBanner.current
   )
 
@@ -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',

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])
 }