feat: add approval step

Signed-off-by: kjuulh <contact@kjuulh.io>
2026-03-15 19:46:33 +01:00
parent 533b738692
commit 7eb6ae7cbb
41 changed files with 7886 additions and 1724 deletions
--- a/frontend/src/ReleaseTimeline.svelte
+++ b/frontend/src/ReleaseTimeline.svelte
@@ -9,6 +9,9 @@
  // Props from attributes
  export let org = "";
  export let project = "";
+  export let csrf = "";
+  export let username = "";
+  export let role = "";

  // Reactive state
  let timeline = [];
@@ -29,6 +32,70 @@
  const IN_FLIGHT = new Set(["QUEUED", "RUNNING", "ASSIGNED"]);
  const DEPLOYED = new Set(["SUCCEEDED"]);

+  // ── Approval action ──────────────────────────────────────────────
+
+  let approving = new Set();
+  let approvalError = null;
+
+  function isAdmin() {
+    return role === "owner" || role === "admin";
+  }
+
+  function isAuthor(release) {
+    return username && release.source_user === username;
+  }
+
+  async function approveRelease(release, stage, bypass = false) {
+    const key = `${release.release_intent_id}:${stage.environment}`;
+    if (approving.has(key)) return;
+    approving.add(key);
+    approving = approving; // trigger reactivity
+    approvalError = null;
+
+    try {
+      const formData = new URLSearchParams();
+      formData.set("csrf_token", csrf);
+      formData.set("release_intent_id", release.release_intent_id);
+      formData.set("target_environment", stage.environment);
+      if (bypass) formData.set("force_bypass", "true");
+
+      const res = await fetch(
+        `/orgs/${org}/projects/${release.project_name}/releases/${release.slug}/approve`,
+        {
+          method: "POST",
+          body: formData,
+          credentials: "same-origin",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            "Accept": "application/json",
+          },
+          redirect: "manual",
+        }
+      );
+      // 303/302 redirect = success (form handler redirects after approval)
+      if (res.ok || res.status === 303 || res.status === 302 || res.status === 0) {
+        await refreshData();
+      } else {
+        // Try JSON error first, then extract from HTML
+        const text = await res.text().catch(() => "");
+        let msg;
+        try { msg = JSON.parse(text).error; } catch {}
+        if (!msg) {
+          const match = text.match(/<p[^>]*>\s*(.*?)\s*<\/p>/);
+          msg = match?.[1];
+        }
+        approvalError = msg || `Approval failed (${res.status})`;
+        setTimeout(() => { approvalError = null; }, 8000);
+      }
+    } catch (err) {
+      approvalError = err.message || "Approval request failed";
+      setTimeout(() => { approvalError = null; }, 8000);
+    } finally {
+      approving.delete(key);
+      approving = approving;
+    }
+  }
+
  // ── Data fetching ────────────────────────────────────────────────

  // Debounce re-fetches: multiple SSE events within 300ms only trigger one fetch
@@ -367,6 +434,16 @@

 <svelte:window on:resize={handleResize} />

+{#if approvalError}
+  <div class="max-w-5xl mx-auto mb-4 px-4 py-3 border border-red-200 bg-red-50 rounded-lg flex items-center gap-2 text-sm text-red-700">
+    <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    {approvalError}
+    <button class="ml-auto text-red-400 hover:text-red-600" on:click={() => approvalError = null}>
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+    </button>
+  </div>
+{/if}
+
 {#if initialLoading}
  <div class="max-w-5xl mx-auto p-12 text-center text-gray-400">
    <span class="w-5 h-5 inline-block border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin"></span>
@@ -466,6 +543,8 @@
                    <svg class="w-4 h-4 {summary.iconColor} shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                  {:else if summary.icon === "clock"}
                    <svg class="w-4 h-4 {summary.iconColor} shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                  {:else if summary.icon === "shield"}
+                    <svg class="w-4 h-4 {summary.iconColor} shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                  {:else}
                    <svg class="w-4 h-4 text-gray-300 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2"/></svg>
                  {/if}
@@ -480,6 +559,21 @@
                        <span class="w-1.5 h-1.5 rounded-full {dot}"></span>
                      </span>
                    {/if}
+                    {#if stage.blocked_by && release.release_intent_id && csrf}
+                      {#if isAuthor(release) && isAdmin()}
+                        <button
+                          class="text-xs px-2 py-0.5 rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors disabled:opacity-50"
+                          disabled={approving.has(`${release.release_intent_id}:${stage.environment}`)}
+                          on:click|stopPropagation={() => { if (confirm('You are the release author. Bypass approval?')) approveRelease(release, stage, true); }}
+                        >Bypass</button>
+                      {:else if !isAuthor(release)}
+                        <button
+                          class="text-xs px-2 py-0.5 rounded-md bg-green-600 text-white hover:bg-green-700 transition-colors disabled:opacity-50"
+                          disabled={approving.has(`${release.release_intent_id}:${stage.environment}`)}
+                          on:click|stopPropagation={() => approveRelease(release, stage)}
+                        >Approve</button>
+                      {/if}
+                    {/if}
                  {/each}

                  <span class="text-xs text-gray-400">{summary.done}/{summary.total}</span>
--- a/frontend/src/lib/status.js
+++ b/frontend/src/lib/status.js
@@ -24,8 +24,11 @@ export function pipelineSummary(stages) {
    if (s.stage_type === "wait" && s.status === "RUNNING") anyWaiting = true;
  }

+  let anyApprovalBlocked = stages.some(s => s.blocked_by);
+
  if (allDone) return { label: "Pipeline complete", color: "text-gray-600", icon: "check-circle", iconColor: "text-green-500", done, total };
  if (anyFailed) return { label: "Pipeline failed", color: "text-red-600", icon: "x-circle", iconColor: "text-red-500", done, total };
+  if (anyApprovalBlocked) return { label: "Awaiting approval", color: "text-emerald-700", icon: "shield", iconColor: "text-emerald-500", done, total };
  if (anyWaiting) return { label: "Waiting for time window", color: "text-yellow-700", icon: "clock", iconColor: "text-yellow-500", done, total };
  if (anyRunning) return { label: "Deploying to", color: "text-yellow-700", icon: "pulse", iconColor: "text-yellow-500", done, total };
  if (anyQueued) return { label: "Queued", color: "text-blue-600", icon: "clock", iconColor: "text-blue-400", done, total };