fix(app): prevent startup info modal from obscuring the set-new-password flow

app/src/ModalContent.tsx

@@ -4,8 +4,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 
-import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { TextView, useAuth } from 'utopia-ui'
 
 import { config } from './config'
@@ -15,6 +15,8 @@ interface ChapterProps {
   map?: any
 }
 
+const ROOT_PATH = '/'
+
 export function Welcome1({ clickAction1, map }: ChapterProps) {
   const { isAuthenticated } = useAuth()
   const navigate = useNavigate()
@@ -95,12 +97,26 @@ const close = () => {
 }
 
 export const ModalContent = ({ map }: { map: any }) => {
+  const { pathname } = useLocation()
+  const autoOpenedModal = useRef(false)
+
   useEffect(() => {
-    const myModal = document.getElementById('my_modal_3') as HTMLDialogElement
-    if (map.info_open) {
+    const myModal = document.getElementById('my_modal_3')
+    if (!(myModal instanceof HTMLDialogElement)) {
+      return
+    }
+
+    if (map.info_open && pathname === ROOT_PATH && !myModal.open) {
       myModal.showModal()
+      autoOpenedModal.current = true
+      return
+    }
+
+    if (pathname !== ROOT_PATH && autoOpenedModal.current && myModal.open) {
+      myModal.close()
+      autoOpenedModal.current = false
     }
-  }, [map.info_open])
+  }, [map.info_open, pathname])
 
   const [chapter, setChapter] = useState<number>(1)
   // const setQuestsOpen = useSetQuestOpen()

cypress/e2e/authentification/set-new-password.cy.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+describe('Utopia Map Authentication Set New Password', () => {
+  beforeEach(() => {
+    cy.clearCookies()
+    cy.clearLocalStorage()
+    cy.window().then((win) => {
+      win.sessionStorage.clear()
+    })
+
+    cy.intercept('GET', '**/items/maps*', (req) => {
+      req.continue((res) => {
+        if (Array.isArray(res.body?.data) && res.body.data[0]) {
+          res.body.data[0].info_open = true
+        }
+      })
+    }).as('getMap')
+  })
+
+  it('should keep the set new password dialog visible when startup info is enabled', () => {
+    cy.visit('/set-new-password?token=test-reset-token')
+    cy.wait('@getMap')
+
+    cy.get('h2').should('contain.text', 'Set new Password')
+    cy.get('input[type="password"]')
+      .should('be.visible')
+      .should('have.attr', 'placeholder', 'Password')
+    cy.get('button:contains("Set")').should('be.visible').and('not.be.disabled')
+
+    cy.get('dialog#my_modal_3').should('not.have.attr', 'open')
+  })
+
+  it('should still open the startup info modal on the root route', () => {
+    cy.visit('/')
+    cy.wait('@getMap')
+
+    cy.get('dialog#my_modal_3').should('have.attr', 'open')
+  })
+})