feat(settings): implement Environment tab with edit + drift detection

Add drift-badge, env-var-editor, env-var-row components and replace the environment-tab stub; install shadcn Switch which was missing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-04 06:47:40 +00:00
parent 8289b4d643
commit f418686724
5 changed files with 383 additions and 1 deletions
--- a/web-ui/src/app/settings/_components/environment-tab.tsx
+++ b/web-ui/src/app/settings/_components/environment-tab.tsx
@@ -1 +1,135 @@
-export function EnvironmentTab() { return <div>Environment tab — coming soon</div>; }
+"use client";
+
+import { useState, useMemo } from "react";
+import { RefreshCw, AlertCircle } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import {
+  useMcpEnv,
+  useMcpRedeploy,
+  type McpEnvVar,
+  type EnvCategory,
+} from "@/lib/api/settings";
+import { toast } from "sonner";
+import { EnvVarRow } from "./env-var-row";
+
+const CATEGORY_LABELS: Record<EnvCategory, string> = {
+  multimodal: "Multimodal",
+  rerank: "Rerank",
+  halacha: "Halacha",
+  general: "כללי",
+  credentials: "אישורים",
+  connection: "חיבורים",
+};
+
+const CATEGORY_ORDER: EnvCategory[] = [
+  "multimodal", "rerank", "halacha", "general", "credentials", "connection",
+];
+
+export function EnvironmentTab() {
+  const { data, isPending, error } = useMcpEnv();
+  const redeploy = useMcpRedeploy();
+  const [pendingRedeploy, setPendingRedeploy] = useState(false);
+
+  const grouped = useMemo(() => {
+    if (!data?.vars) return new Map<EnvCategory, McpEnvVar[]>();
+    const m = new Map<EnvCategory, McpEnvVar[]>();
+    for (const v of data.vars) {
+      const arr = m.get(v.category) ?? [];
+      arr.push(v);
+      m.set(v.category, arr);
+    }
+    return m;
+  }, [data]);
+
+  function handleRedeploy() {
+    redeploy.mutate(undefined, {
+      onSuccess: (res) => {
+        toast.success(res.message);
+        setPendingRedeploy(false);
+      },
+      onError: (err) => toast.error(`Redeploy נכשל: ${err.message}`),
+    });
+  }
+
+  if (isPending) return <Skeleton className="h-96 w-full" />;
+  if (error) {
+    return (
+      <Card className="bg-surface border-danger/40">
+        <CardContent className="p-6 flex items-center gap-3 text-danger">
+          <AlertCircle className="w-5 h-5" />
+          <span>שגיאה בטעינת env vars: {error.message}</span>
+        </CardContent>
+      </Card>
+    );
+  }
+  if (!data) return null;
+
+  const driftCount = data.vars.filter((v) => v.drift).length;
+
+  return (
+    <div className="space-y-4">
+      <Card className="bg-surface border-rule">
+        <CardContent className="px-6 py-4 flex items-center justify-between gap-4 flex-wrap">
+          <div className="flex items-center gap-3 flex-wrap text-sm">
+            <Badge variant="outline">
+              Infisical: <code dir="ltr" className="ms-1">{data.infisical_environment}</code>
+            </Badge>
+            <Badge variant="outline">
+              Path: <code dir="ltr" className="ms-1">{data.infisical_path}</code>
+            </Badge>
+            {driftCount > 0 && (
+              <Badge variant="outline" className="text-warn border-warn/40">
+                {driftCount} drift
+              </Badge>
+            )}
+            {data.errors.length > 0 && (
+              <Badge variant="outline" className="text-danger border-danger/40">
+                {data.errors.join(", ")}
+              </Badge>
+            )}
+          </div>
+          <Button
+            onClick={handleRedeploy}
+            disabled={redeploy.isPending}
+            variant={pendingRedeploy ? "default" : "outline"}
+            size="sm"
+          >
+            <RefreshCw className={redeploy.isPending ? "w-3.5 h-3.5 animate-spin" : "w-3.5 h-3.5"} data-icon="inline-start" />
+            {redeploy.isPending ? "Redeploying..." : "Redeploy now"}
+          </Button>
+        </CardContent>
+      </Card>
+
+      {CATEGORY_ORDER.map((cat) => {
+        const vars = grouped.get(cat);
+        if (!vars || vars.length === 0) return null;
+        return (
+          <Card key={cat} className="bg-surface border-rule">
+            <CardContent className="px-6 py-5">
+              <h2 className="text-navy text-lg mb-4 flex items-center gap-2">
+                {CATEGORY_LABELS[cat]}
+                <Badge variant="outline" className="text-[0.7rem] tabular-nums">
+                  {vars.length}
+                </Badge>
+              </h2>
+              <div className="space-y-3">
+                {vars.map((v) => (
+                  <EnvVarRow
+                    key={v.key}
+                    spec={v}
+                    infisicalProjectId={data.infisical_project_id}
+                    infisicalEnv={data.infisical_environment}
+                    onPendingRedeploy={() => setPendingRedeploy(true)}
+                  />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}