Fix flakiness in logs test

apps/studio/components/layouts/LogsLayout/LogsLayout.tsx

@@ -15,36 +15,35 @@ interface LogsLayoutProps {
 }
 
 const LogsLayout = ({ title, children }: PropsWithChildren<LogsLayoutProps>) => {
-  const { isLoading, can: canUseLogsExplorer } = useAsyncCheckProjectPermissions(
-    PermissionAction.ANALYTICS_READ,
-    'logflare'
-  )
+  const {
+    isLoading,
+    isSuccess,
+    can: canUseLogsExplorer,
+  } = useAsyncCheckProjectPermissions(PermissionAction.ANALYTICS_READ, 'logflare')
 
   const router = useRouter()
   const [_, setLastLogsPage] = useLocalStorageQuery(
     LOCAL_STORAGE_KEYS.LAST_VISITED_LOGS_PAGE,
-    router.pathname.split('/').pop()
+    'explorer'
   )
 
   useEffect(() => {
     if (router.pathname.includes('/logs/')) {
-      const path = router.pathname.split('/').pop()
-      setLastLogsPage(path)
+      const path = router.pathname.split('/logs/').pop()
+      if (path) setLastLogsPage(path)
     }
-  }, [router, setLastLogsPage])
+  }, [router.pathname])
 
-  if (!canUseLogsExplorer) {
-    if (isLoading) {
-      return <ProjectLayout isLoading></ProjectLayout>
-    }
+  if (isLoading) {
+    return <ProjectLayout isLoading />
+  }
 
-    if (!isLoading && !canUseLogsExplorer) {
-      return (
-        <ProjectLayout>
-          <NoPermission isFullPage resourceText="access your project's logs" />
-        </ProjectLayout>
-      )
-    }
+  if (isSuccess && !canUseLogsExplorer) {
+    return (
+      <ProjectLayout>
+        <NoPermission isFullPage resourceText="access your project's logs" />
+      </ProjectLayout>
+    )
   }
 
   return (

apps/studio/hooks/misc/useCheckPermissions.ts

@@ -3,11 +3,11 @@ import jsonLogic from 'json-logic-js'
 
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 import { IS_PLATFORM } from 'lib/constants'
 import type { Permission } from 'types'
 import { useSelectedOrganization } from './useSelectedOrganization'
 import { useSelectedProject } from './useSelectedProject'
-import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 
 const toRegexpString = (actionOrResource: string) =>
   `^${actionOrResource.replace('.', '\\.').replace('%', '.*')}$`
@@ -109,7 +109,10 @@ export function useGetProjectPermissions(
     permissions,
     organizationSlug,
     projectRef,
+    error: permissionsResult.error,
+    isError: permissionsResult.isError,
     isLoading: permissionsResult.isLoading,
+    isSuccess: permissionsResult.isSuccess,
   }
 }
 
@@ -192,7 +195,10 @@ export function useAsyncCheckProjectPermissions(
     permissions: allPermissions,
     organizationSlug: _organizationSlug,
     projectRef: _projectRef,
+    error: permissionsError,
+    isError: isPermissionsError,
     isLoading: isPermissionsLoading,
+    isSuccess: isPermissionsSuccess,
   } = useGetProjectPermissions(permissions, organizationSlug, projectRef, isLoggedIn)
 
   if (!isLoggedIn)
@@ -207,7 +213,10 @@ export function useAsyncCheckProjectPermissions(
     }
 
   return {
+    error: permissionsError,
+    isError: isPermissionsError,
     isLoading: isPermissionsLoading,
+    isSuccess: isPermissionsSuccess,
     can: doPermissionsCheck(allPermissions, action, resource, data, _organizationSlug, _projectRef),
   }
 }

apps/studio/pages/project/[ref]/logs/index.tsx

@@ -19,7 +19,7 @@ export const LogPage: NextPageWithLayout = () => {
 
   useEffect(() => {
     router.replace(`/project/${ref}/logs/${lastVisitedLogsPage}`)
-  }, [router, lastVisitedLogsPage, ref])
+  }, [])
 
   return null
 }

package.json

@@ -29,6 +29,7 @@
     "test:studio": "turbo run test --filter=studio",
     "test:studio:watch": "turbo run test --filter=studio -- watch",
     "test:e2e:studio-local": "pnpm --prefix tests/studio-tests run test:local",
+    "test:e2e:studio-staging": "pnpm --prefix tests/studio-tests run test:staging",
     "perf:kong": "ab -t 5 -c 20 -T application/json http://localhost:8000/",
     "perf:meta": "ab -t 5 -c 20 -T application/json http://localhost:5555/tables",
     "generate:types": "supabase gen types typescript --local > ./supabase/functions/common/database-types.ts",

tests/studio-tests/playwright.config.ts

@@ -31,7 +31,6 @@ export default defineConfig({
             name: 'Authentication setup',
             testDir: './tests',
             testMatch: /.*\.setup\.ts/,
-            use: { headless: false },
           },
         ]
       : []),

tests/studio-tests/tests/auth.setup.ts

@@ -13,9 +13,6 @@ setup('Authenticate', async ({ page }) => {
   await page.getByLabel('Email').fill(process.env.EMAIL ?? '')
   await page.getByLabel('Password').fill(process.env.PASSWORD ?? '')
   await page.getByRole('button', { name: 'Sign In' }).click()
-
-  await page.pause()
-
   await page.waitForURL('./projects')
   await page.context().storageState({ path: authFile })
 })

tests/studio-tests/tests/common-functionality/logs.spec.ts

@@ -10,13 +10,19 @@ const LOGS_PAGES = [
 test.describe('Logs', async () => {
   for (const logPage of LOGS_PAGES) {
     test.describe(`${logPage.label} logs page`, () => {
-      test('can navigate to logs page', async ({ page, ref }) => {
-        await page.goto(`./project/${ref}`)
-        await page.locator('a', { hasText: 'Logs' }).click({ timeout: 10000 })
-        await expect(page.getByRole('heading', { name: 'Logs & Analytics' })).toBeVisible()
+      test('can navigate to logs page', async ({ page, ref, apiUrl }) => {
+        await page.goto(`./project/${ref}`, { waitUntil: 'load' })
+
+        // [Joshen] To investigate - without waiting for permissions, the test seems to get redirected to /logs/logs
+        await page.waitForResponse((response) =>
+          response.url().includes(`${apiUrl}/platform/profile/permissions`)
+        )
+
+        await page.locator('a', { hasText: 'Logs' }).click({ timeout: 20000 })
 
         // Click anywhere on the screen to close the sidebar
         await page.click('body')
+        await expect(page.getByRole('heading', { name: 'Logs & Analytics' })).toBeVisible()
 
         await page
           .getByRole('link', { name: logPage.label, exact: true })