fix: e2e

images/playwright/package.json

@@ -17,7 +17,7 @@
     },
     "homepage": "https://github.com/dyrector-io/playwright#readme",
     "dependencies": {
-        "@playwright/test": "^1.38.0",
-        "playwright": "^1.38.0"
+        "@playwright/test": "^1.42.0",
+        "playwright": "^1.42.0"
     }
 }

web/crux-ui/e2e/utils/node-helper.ts

@@ -8,8 +8,8 @@ export const installDagent = async (page: Page) => {
   await page.goto(TEAM_ROUTES.node.list())
   await page.waitForSelector('h2:text-is("Nodes")')
 
-  await page.locator('button:has-text("Add")').click()
-
+  page.addListener('framenavigated', frame => console.info('PW navigated', frame.url()))
+  await page.locator('button:text-is("Add")').click()
   await page.waitForSelector('h4:text-is("New node")')
 
   await page.locator('input[name=name] >> visible=true').fill(DAGENT_NODE)

web/crux-ui/package.json

@@ -50,7 +50,7 @@
     "yup": "^1.2.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.0",
+    "@playwright/test": "^1.42.0",
     "@types/google-protobuf": "^3.15.6",
     "@types/jest": "^29.5.3",
     "@types/jsoneditor": "^9.9.0",
@@ -77,7 +77,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.6.2",
     "next-translate-plugin": "^2.5.2",
-    "playwright": "^1.38.0",
+    "playwright": "^1.42.0",
     "postcss": "^8.4.27",
     "prettier": "^3.0.1",
     "prettier-plugin-organize-imports": "^3.2.3",

web/crux-ui/src/components/layout.tsx

@@ -78,7 +78,9 @@ export const Layout = (props: LayoutProps) => {
             {topBarContent}
           </Topbar>
 
-          <div className="flex flex-col h-full">{children}</div>
+          <div key={router.asPath} className="flex flex-col h-full">
+            {children}
+          </div>
 
           <Footer className="mt-auto" />
         </div>

web/crux-ui/src/hooks/use-anchor.ts

@@ -1,5 +1,4 @@
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
 
 const anchorOfPath = (path: string): string | null => {
   const parts = path.split('#')
@@ -14,15 +13,7 @@ const useAnchor = (): string | null => {
   const router = useRouter()
   const path = router.asPath
 
-  const [anchor, setAnchor] = useState(null)
-
-  useEffect(() => {
-    const newAnchor = anchorOfPath(path)
-
-    setAnchor(newAnchor)
-  }, [path])
-
-  return anchor
+  return anchorOfPath(path)
 }
 
 export default useAnchor

web/crux-ui/src/pages/[teamSlug]/nodes.tsx

@@ -17,7 +17,7 @@ import useTeamRoutes from '@app/hooks/use-team-routes'
 import useWebSocket from '@app/hooks/use-websocket'
 import { DyoNode, NODE_STATUS_VALUES, NodeEventMessage, NodeStatus, WS_TYPE_NODE_EVENT } from '@app/models'
 import { ANCHOR_NEW, ListRouteOptions, ROUTE_DOCS, TeamRoutes } from '@app/routes'
-import { withContextAuthorization } from '@app/utils'
+import { isServerSide, withContextAuthorization } from '@app/utils'
 import { getCruxFromContext } from '@server/crux-api'
 import clsx from 'clsx'
 import { GetServerSidePropsContext } from 'next'
@@ -51,7 +51,16 @@ const NodesPage = (props: NodesPageProps) => {
   })
 
   const creating = anchor === ANCHOR_NEW
+  console.info(
+    new Date().toISOString(),
+    'creating',
+    creating,
+    anchor,
+    router.asPath,
+    !isServerSide() ? document.location.href : 'ssr',
+  )
   const submit = useSubmit()
+  console.info('creating', creating, anchor, router.asPath)
 
   const socket = useWebSocket(routes.node.socket(), {
     onError: _ => {
@@ -84,7 +93,17 @@ const NodesPage = (props: NodesPageProps) => {
   }
 
   const onRouteOptionsChange = async (routeOptions: ListRouteOptions) => {
-    await router.replace(routes.node.list(routeOptions))
+    console.info(new Date().toISOString(), 'navigation', routes.node.list(routeOptions), routeOptions)
+
+    console.info(
+      new Date().toISOString(),
+      'nav-creating',
+      creating,
+      anchor,
+      router.asPath,
+      !isServerSide() ? document.location.href : 'ssr',
+    )
+    await router.replace(`${routes.node.list(routeOptions)}`)
   }
 
   const pageLink: BreadcrumbLink = {