mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
## What kind of change does this PR introduce? Bug fix / UX improvement for long-running project transitions. Resolves DEPR-362. ## What is the current behaviour? - `PausingState` does not preserve elapsed time across refreshes, so the stuck escalation can disappear for the same user. - `RestoringState` relies on weaker frontend heuristics and always showed a support CTA in the footer even before the restore was clearly long-running. ## What is the new behaviour? - `PausingState` - Persists a per-project pause start time in local storage so the stuck CTA survives refreshes in the same browser. - Escalates after 10 minutes. - Clears the stored timer when pausing succeeds or fails. - `RestoringState` - Persists a per-project restore start time in local storage so the stuck CTA survives refreshes in the same browser. - Removes the always-visible footer CTA and only escalates once restoration is genuinely long-running. - Computes the long-running threshold from volume size using a shared restore estimate: `max(10, ceil(estimateRestoreTime(sizeGb) * 1.5))`. - Clears the stored timer when restoration succeeds or fails. - Shared changes - Extracts reusable transition timing helpers and restore estimate helpers with unit tests. - Reuses the same restore estimate formula for branch restore timing and restore escalation, so the two do not drift. | `PausingState` | `RestoringState` | | --- | --- | | <img width="1570" height="906" alt="Krosno Toolshed Supabase-C6D7E29F-C38D-43E1-8AF9-C612B6A2FD8D" src="https://github.com/user-attachments/assets/e0bd9434-09b6-4cf6-bffa-07a0ddcdf5db" /> | <img width="1570" height="906" alt="Krosno Toolshed Supabase-51F4763D-B798-4B41-A92D-43B3CF8ECDAF" src="https://github.com/user-attachments/assets/d0e47356-dcc3-42aa-b602-802a35249a16" /> | ## Additional context - This PR intentionally stays frontend-only. - We are not exposing backend lifecycle timestamps here; local storage is the stopgap to improve the same-browser experience now. - If you need to test the frontend blocker states locally, use [`dnywh/chore/depr-362-blocker-preview-mocks`](https://github.com/supabase/supabase/tree/dnywh/chore/depr-362-blocker-preview-mocks) and append one of the following query params to a project URL: - `?mockProjectBlockingState=pausing` - `?mockProjectBlockingState=pausing-long-running` - `?mockProjectBlockingState=restoring` - `?mockProjectBlockingState=restoring-long-running` - I know these two views are quite differently stylistically, and will consolidate later - References DEPR-434
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
export const FALLBACK_LONG_RUNNING_STATE_THRESHOLD_MINUTES = 10
|
|
// Persist long enough for same-browser reloads, but not so long that a later transition reuses stale state.
|
|
export const MAX_PERSISTED_TRANSITION_AGE_HOURS = 24
|
|
|
|
const MS_PER_MINUTE = 60 * 1000
|
|
const MS_PER_HOUR = 60 * MS_PER_MINUTE
|
|
|
|
export const minutesToMilliseconds = (minutes: number) => minutes * MS_PER_MINUTE
|
|
export const hoursToMilliseconds = (hours: number) => hours * MS_PER_HOUR
|
|
|
|
export const getPersistedTransitionStartTime = (
|
|
storageKey: string,
|
|
now = Date.now(),
|
|
maxAgeMs = Number.POSITIVE_INFINITY
|
|
) => {
|
|
if (typeof window === 'undefined') return now
|
|
|
|
const existingValue = window.localStorage.getItem(storageKey)
|
|
|
|
if (existingValue !== null) {
|
|
const parsedStartTime = Number(existingValue)
|
|
const elapsedMs = now - parsedStartTime
|
|
|
|
if (
|
|
Number.isFinite(parsedStartTime) &&
|
|
parsedStartTime > 0 &&
|
|
elapsedMs >= 0 &&
|
|
elapsedMs <= maxAgeMs
|
|
) {
|
|
return parsedStartTime
|
|
}
|
|
}
|
|
|
|
window.localStorage.setItem(storageKey, String(now))
|
|
return now
|
|
}
|
|
|
|
export const clearPersistedTransitionStartTime = (storageKey: string) => {
|
|
if (typeof window === 'undefined') return
|
|
|
|
window.localStorage.removeItem(storageKey)
|
|
}
|
|
|
|
export const getRemainingTransitionTimeMs = ({
|
|
startTimeMs,
|
|
thresholdMs,
|
|
now = Date.now(),
|
|
}: {
|
|
startTimeMs: number
|
|
thresholdMs: number
|
|
now?: number
|
|
}) => {
|
|
const elapsedMs = now - startTimeMs
|
|
return Math.max(thresholdMs - elapsedMs, 0)
|
|
}
|