diff --git a/web-ui/src/app/settings/_components/drift-badge.tsx b/web-ui/src/app/settings/_components/drift-badge.tsx
index 90af4bc..34eaf91 100644
--- a/web-ui/src/app/settings/_components/drift-badge.tsx
+++ b/web-ui/src/app/settings/_components/drift-badge.tsx
@@ -1,9 +1,27 @@
"use client";
-import { AlertTriangle, CheckCircle2 } from "lucide-react";
+import { AlertTriangle, CheckCircle2, HelpCircle } from "lucide-react";
import { Badge } from "@/components/ui/badge";
-export function DriftBadge({ drift }: { drift: boolean }) {
+type Props = {
+ drift: boolean;
+ // When false, Infisical was unreachable: drift state is unknown, not "synced".
+ infisicalAvailable?: boolean;
+};
+
+export function DriftBadge({ drift, infisicalAvailable = true }: Props) {
+ if (!infisicalAvailable) {
+ return (
+
{spec.description}
diff --git a/web-ui/src/app/settings/_components/environment-tab.tsx b/web-ui/src/app/settings/_components/environment-tab.tsx index 3a1c758..303540c 100644 --- a/web-ui/src/app/settings/_components/environment-tab.tsx +++ b/web-ui/src/app/settings/_components/environment-tab.tsx @@ -67,6 +67,7 @@ export function EnvironmentTab() { } if (!data) return null; + const infisicalAvailable = data.errors.length === 0; const driftCount = data.vars.filter((v) => v.drift).length; return ( @@ -122,6 +123,7 @@ export function EnvironmentTab() { spec={v} infisicalProjectId={data.infisical_project_id} infisicalEnv={data.infisical_environment} + infisicalAvailable={infisicalAvailable} onPendingRedeploy={() => setPendingRedeploy(true)} /> ))} diff --git a/web-ui/src/app/settings/_components/tool-detail-drawer.tsx b/web-ui/src/app/settings/_components/tool-detail-drawer.tsx index 7f74e14..66cf23a 100644 --- a/web-ui/src/app/settings/_components/tool-detail-drawer.tsx +++ b/web-ui/src/app/settings/_components/tool-detail-drawer.tsx @@ -19,7 +19,7 @@ type Props = { export function ToolDetailDrawer({ tool, open, onOpenChange }: Props) { return (