diff --git a/studio/pages/project/[ref]/logs-explorer/index.tsx b/studio/pages/project/[ref]/logs-explorer/index.tsx
index 64521c6c9c1..b0433ba8c95 100644
--- a/studio/pages/project/[ref]/logs-explorer/index.tsx
+++ b/studio/pages/project/[ref]/logs-explorer/index.tsx
@@ -26,6 +26,7 @@ import {
} from 'components/interfaces/Settings/Logs'
import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
import { StripeProduct } from 'components/interfaces/Billing'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
export const LogsExplorerPage: NextPageWithLayout = () => {
const router = useRouter()
@@ -44,7 +45,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
iso_timestamp_end: ite ? (ite as string) : undefined,
})
- const { UpgradePrompt, showUpgradePrompt, setShowUpgradePrompt } = useUpgradePrompt(
+ const { showUpgradePrompt, setShowUpgradePrompt } = useUpgradePrompt(
params.iso_timestamp_start as string
)
@@ -73,6 +74,16 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
setWarnings(newWarnings)
}, [editorValue, params.iso_timestamp_start, params.iso_timestamp_end])
+ // Show the prompt on page load based on query params
+ useEffect(() => {
+ if (its) {
+ const shouldShowUpgradePrompt = maybeShowUpgradePrompt(its as string, tier as StripeProduct)
+ if (shouldShowUpgradePrompt) {
+ setShowUpgradePrompt(!showUpgradePrompt)
+ }
+ }
+ }, [its, tier])
+
const onSelectTemplate = (template: LogTemplate) => {
setEditorValue(template.searchString)
changeQuery(template.searchString)
@@ -170,7 +181,9 @@ export const LogsExplorerPage: NextPageWithLayout = () => {