diff --git a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx index f5163048873..1a9a0a19745 100644 --- a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx +++ b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx @@ -23,6 +23,7 @@ import LoadingOpacity from 'components/ui/LoadingOpacity' import { useProjectSubscription } from 'hooks' import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt' import { StripeProduct } from 'components/interfaces/Billing' +import UpgradePrompt from './UpgradePrompt' /** * Acts as a container component for the entire log display @@ -61,7 +62,7 @@ export const LogsPreviewer: React.FC = ({ { loadOlder, setFilters, refresh, setParams }, ] = useLogsPreview(projectRef as string, table, filterOverride) - const { UpgradePrompt, showUpgradePrompt, setShowUpgradePrompt } = useUpgradePrompt( + const { showUpgradePrompt, setShowUpgradePrompt } = useUpgradePrompt( params.iso_timestamp_start as string ) @@ -76,6 +77,16 @@ export const LogsPreviewer: React.FC = ({ } }, [s, ite, its]) + // 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) => { setFilters((prev: any) => ({ ...prev, search_query: template.searchString })) } @@ -122,9 +133,7 @@ export const LogsPreviewer: React.FC = ({ if (shouldShowUpgradePrompt) { setShowUpgradePrompt(!showUpgradePrompt) - } - - if (!shouldShowUpgradePrompt) { + } else { setParams((prev) => ({ ...prev, iso_timestamp_start: from || '', @@ -215,7 +224,9 @@ export const LogsPreviewer: React.FC = ({ - {UpgradePrompt} +
+ +
)}