mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Raminder SinghandJoshen Lim
ca7ba8f564
* Moved sync status admonition to the settings page. * The **Install integration** and **Uninstall integration** buttons now show loading states during installation/uninstallation. * Made the content of the `StripeSyncChangesCard` dynamic based on the installation status. * Fixed a bug in which the comment on the stripe schema was not parsed correctly. Screenshots for each state: **Not installed** <img width="897" height="884" alt="image" src="https://github.com/user-attachments/assets/be567059-1deb-47d1-86df-af9f1c3b4fde" /> **Installing** <img width="897" height="884" alt="image" src="https://github.com/user-attachments/assets/664af71e-9407-4236-b4e5-1e7170a2f31f" /> **Install Error** <img width="897" height="933" alt="image" src="https://github.com/user-attachments/assets/0d6e4fbd-107a-4f95-8a5e-6bd1a1d6a1be" /> **Installed** <img width="897" height="901" alt="image" src="https://github.com/user-attachments/assets/e686e050-b3d2-42d0-bd3c-11d81540433a" /> **Uninstalling** <img width="897" height="901" alt="image" src="https://github.com/user-attachments/assets/7cd90d1c-ff83-4e7d-884e-4e340a1dcc75" /> **Uninstall Error** <img width="897" height="938" alt="image" src="https://github.com/user-attachments/assets/de0c1bc8-11c5-4c3f-a0ca-00b1f9e32ed3" /> **Settings Page (Sync Done)** <img width="897" height="572" alt="image" src="https://github.com/user-attachments/assets/ec5dd2a3-d183-42e1-8953-13bcf70082f5" /> **Settings Page (Sync in Progress)** <img width="897" height="572" alt="image" src="https://github.com/user-attachments/assets/7400c479-3e4f-4490-8857-414a93ebdc51" /> The idea behind these changes is that in future: * We allow users to configure sync interval from the settings page. * The overview page is mainly for the install/uninstall behaviour only, rest everything goes to the settings page. * We can show more granular progress during install/uninstall by showing what is being installed/uninstalled: migrations are running, edge functions are being deployed and so on. * We can show more accurate error messages: migrations succeeded but edge functions could not be deployed. This helps users troubleshoot and in the worst case recover via manual actions. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { AlertCircle, Check, RefreshCwIcon } from 'lucide-react'
|
|
|
|
import {
|
|
hasInstallError,
|
|
hasUninstallError,
|
|
isInstalled,
|
|
isInstalling,
|
|
isUninstalling,
|
|
StripeInstallationStatus,
|
|
} from './stripe-sync-status'
|
|
|
|
export const StatusDisplay = ({
|
|
status,
|
|
isInstallRequested,
|
|
isUninstallRequested,
|
|
}: {
|
|
status: StripeInstallationStatus
|
|
isInstallRequested: boolean
|
|
isUninstallRequested: boolean
|
|
}) => {
|
|
const installed = isInstalled(status)
|
|
const installError = hasInstallError(status)
|
|
const uninstallError = hasUninstallError(status)
|
|
const installInProgress = isInstalling(status)
|
|
const uninstallInProgress = isUninstalling(status)
|
|
|
|
const installing = installInProgress || isInstallRequested
|
|
const uninstalling = uninstallInProgress || isUninstallRequested
|
|
|
|
if (uninstallError) {
|
|
return (
|
|
<span className="flex items-center gap-2 text-foreground-light text-sm">
|
|
<AlertCircle size={14} className="text-destructive" />
|
|
Uninstallation error
|
|
</span>
|
|
)
|
|
}
|
|
if (uninstalling) {
|
|
return (
|
|
<span className="flex items-center gap-2 text-foreground-light text-sm">
|
|
<RefreshCwIcon size={14} className="animate-spin text-foreground-lighter" />
|
|
Uninstalling...
|
|
</span>
|
|
)
|
|
}
|
|
if (installError) {
|
|
return (
|
|
<span className="flex items-center gap-2 text-foreground-light text-sm">
|
|
<AlertCircle size={14} className="text-destructive" />
|
|
Installation error
|
|
</span>
|
|
)
|
|
}
|
|
if (installing) {
|
|
return (
|
|
<span className="flex items-center gap-2 text-foreground-light text-sm">
|
|
<RefreshCwIcon size={14} className="animate-spin text-foreground-lighter" />
|
|
Installing...
|
|
</span>
|
|
)
|
|
}
|
|
if (installed) {
|
|
return (
|
|
<span className="flex items-center gap-2 text-foreground-light text-sm">
|
|
<Check size={14} strokeWidth={1.5} className="text-brand" /> Installed
|
|
</span>
|
|
)
|
|
}
|
|
return (
|
|
<span className="flex items-center gap-2 text-foreground-light text-sm">Not installed</span>
|
|
)
|
|
}
|