Plan action

A React button that approves a DNS plan's digest and applies it in one press, naming how many records it will add and reporting what landed.

plan-action is the single control the flow offers once a plan exists. It approves the plan’s digest and applies it in one press, because the records table above it already shows every record the press will write.

import { Domain } from "@domainkit/react";

import { PlanAction } from "@/components/domainkit/plan-action";
import { ProviderRow } from "@/components/domainkit/provider-row";

import {
  PreviewRoot,
  previewConflictSeed,
  previewDomain,
  previewMarks,
  previewRequirements,
} from "../../lib/preview-flow.tsx";

// Hydrate on load: the preview renders nothing until its grant lands, so the island has no
// server-rendered element for the default visible trigger to observe.
export const client = "load";

function Action() {
  const flow = Domain.useFlow({ domain: previewDomain, requirements: previewRequirements });
  return <PlanAction flow={flow} />;
}

/** Every requirement is the tracking CNAME, and an A record on that host blocks it. */
const blockedRequirements = previewRequirements.filter((record) =>
  record.name.startsWith("track."),
);

function BlockedRow() {
  const flow = Domain.useFlow({ domain: previewDomain, requirements: blockedRequirements });
  return (
    <div className="overflow-hidden rounded-xl border border-border bg-card">
      <ProviderRow flow={flow} marks={previewMarks} />
    </div>
  );
}

export default function PlanActionExample() {
  return (
    <div className="w-full space-y-3">
      <PreviewRoot connected>
        <Action />
      </PreviewRoot>
      <PreviewRoot connected seed={previewConflictSeed}>
        <BlockedRow />
      </PreviewRoot>
    </div>
  );
}

Installation

npx shadcn@latest add https://domain-kit.dev/r/plan-action.json

pnpm dlx shadcn@latest add https://domain-kit.dev/r/plan-action.json

yarn dlx shadcn@latest add https://domain-kit.dev/r/plan-action.json

bunx shadcn@latest add https://domain-kit.dev/r/plan-action.json

nubx shadcn@latest add https://domain-kit.dev/r/plan-action.json

aube dlx shadcn@latest add https://domain-kit.dev/r/plan-action.json

What it does

Only a Create or a Delete is approvable: a Conflict blocks, and a Noop is a record already in place, so there is nothing to write. Where a conflict blocks part of a plan the action names the remaining ids, so the rest still goes in; where every operation is blocked it says what to fix instead. Once an apply has landed it reports how many records the receipt proves it added.

API

Prop	Type	Required	Description
`flow`	`Domain.Flow`	yes	The flow whose plan the press applies.

Boundary

Approval is digest-bound: the plan the customer saw is the plan that applies. Nothing here retries a write on its own, and a read-only surface renders no action at all.