Feat: remember last visited route in logs FE-1418 (#33486)

* add logic to remember last route

* add default redirect

* move logic to index page

* Simplify logs page redirect logic

* missing }

* fix wrong }

* wait 2s for page to redirect

* use latest version in local studio cli test

* rm timeouts looks like it takes longer in ci

* Clean up

* Fix broken commands

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

.github/workflows/studio-e2e-tests.yml

@@ -35,6 +35,8 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
       - uses: supabase/setup-cli@v1
+        with:
+          version: latest
       - name: Install dependencies
         run: pnpm i
       - name: Install Playwright Browsers

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

@@ -1,9 +1,12 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { PropsWithChildren } from 'react'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect } from 'react'
 
 import NoPermission from 'components/ui/NoPermission'
 import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { withAuth } from 'hooks/misc/withAuth'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { LogsSidebarMenuV2 } from './LogsSidebarMenuV2'
 
@@ -17,16 +20,31 @@ const LogsLayout = ({ title, children }: PropsWithChildren<LogsLayoutProps>) =>
     'logflare'
   )
 
-  if (isLoading) {
-    return <ProjectLayout isLoading></ProjectLayout>
-  }
+  const router = useRouter()
+  const [_, setLastLogsPage] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.LAST_VISITED_LOGS_PAGE,
+    router.pathname.split('/').pop()
+  )
 
-  if (!isLoading && !canUseLogsExplorer) {
-    return (
-      <ProjectLayout>
-        <NoPermission isFullPage resourceText="access your project's logs" />
-      </ProjectLayout>
-    )
+  useEffect(() => {
+    if (router.pathname.includes('/logs/')) {
+      const path = router.pathname.split('/').pop()
+      setLastLogsPage(path)
+    }
+  }, [router, setLastLogsPage])
+
+  if (!canUseLogsExplorer) {
+    if (isLoading) {
+      return <ProjectLayout isLoading></ProjectLayout>
+    }
+
+    if (!isLoading && !canUseLogsExplorer) {
+      return (
+        <ProjectLayout>
+          <NoPermission isFullPage resourceText="access your project's logs" />
+        </ProjectLayout>
+      )
+    }
   }
 
   return (

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

@@ -1,4 +1,9 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { ChevronRight, FilePlus, Plus } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
 import { IS_PLATFORM, useParams } from 'common'
 import { CreateWarehouseCollectionModal } from 'components/interfaces/DataWarehouse/CreateWarehouseCollection'
 import { WarehouseMenuItem } from 'components/interfaces/DataWarehouse/WarehouseMenuItem'
@@ -10,10 +15,6 @@ import { useContentQuery } from 'data/content/content-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useFlag } from 'hooks/ui/useFlag'
-import { ChevronRight, FilePlus, Plus } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
 import {
   Button,
   Collapsible_Shadcn_,

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx

@@ -133,7 +133,7 @@ export const generateOtherRoutes = (ref?: string, project?: Project): Route[] =>
       key: 'logs',
       label: 'Logs',
       icon: <List size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
-      link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs/explorer`),
+      link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs`),
     },
     {
       key: 'api',

apps/studio/lib/constants/index.ts

@@ -93,6 +93,9 @@ export const LOCAL_STORAGE_KEYS = {
 
   // api keys view switcher for new and legacy api keys
   API_KEYS_VIEW: (ref: string) => `supabase-api-keys-view-${ref}`,
+
+  // last visited logs page
+  LAST_VISITED_LOGS_PAGE: 'supabase-last-visited-logs-page',
 }
 
 export const OPT_IN_TAGS = {

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

@@ -0,0 +1,33 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+import { useParams } from 'common'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import type { NextPageWithLayout } from 'types'
+
+export const LogPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ref } = useParams()
+
+  const [lastVisitedLogsPage] = useLocalStorageQuery(
+    LOCAL_STORAGE_KEYS.LAST_VISITED_LOGS_PAGE,
+    'explorer'
+  )
+
+  useEffect(() => {
+    router.replace(`/project/${ref}/logs/${lastVisitedLogsPage}`)
+  }, [router, lastVisitedLogsPage, ref])
+
+  return null
+}
+
+LogPage.getLayout = (page) => (
+  <DefaultLayout>
+    <LogsLayout>{page}</LogsLayout>
+  </DefaultLayout>
+)
+
+export default LogPage

package.json

@@ -15,7 +15,7 @@
     "dev": "turbo run dev --parallel",
     "dev:reference": "turbo run dev --filter=reference --parallel",
     "dev:studio": "turbo run dev --filter=studio --parallel",
-    "dev:studio-local": "pnpm run --dir tests/local-studio-tests codegen:setup",
+    "dev:studio-local": "pnpm run --dir tests/studio-tests codegen:setup",
     "dev:docs": "turbo run dev --filter=docs --parallel",
     "dev:www": "turbo run dev --filter=www --parallel",
     "dev:design-system": "turbo run dev --filter=design-system --parallel",

tests/studio-tests/package.json

@@ -10,6 +10,8 @@
     "test:local": "pnpm env:setup && export ENV=local && export PROJECT_REF=default && playwright test",
     "posttest:local": "supabase stop --no-backup",
     "test:staging": "export ENV=staging && playwright test",
+    "codegen:setup": "pnpm env:setup && NODE_ENV=test pnpm --prefix ../../apps/studio dev",
+    "codegen": "playwright codegen http://localhost:8082/project/default",
     "clean": "rimraf node_modules"
   },
   "keywords": [],