Delete Resource

import { createSignal } from "solid-js";
import { Button } from "@photon-ai/kumo-solid";
import { DeleteResource } from "~/components/kumo/delete-resource";

export function DeleteResourceBasicDemo() {
  const [open, setOpen] = createSignal(false);
  const [isDeleting, setIsDeleting] = createSignal(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setOpen(false);
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open()}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting()}
      />
    </>
  );
}

Installation

DeleteResource is a block: a source-distributed Solid component that you own and customize.

The published Kumo CLI currently emits React source. Until a Solid-aware installer is available, copy this block from the repository.

1. Copy the Solid block directory

packages/kumo-docs-astro/src/components/kumo/delete-resource/

2. Import from your local path

import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";

Why blocks? Blocks give you full ownership of the code, allowing you to customize deletion flows to fit your specific needs. They’re ideal for critical actions that often need project-specific modifications.

Usage

import { createSignal } from "solid-js";
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";
import { Button } from "@photon-ai/kumo-solid";

export default function Example() {
  const [open, setOpen] = createSignal(false);
  const [isDeleting, setIsDeleting] = createSignal(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteZone("example.com");
      setOpen(false);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open()}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting()}
      />
    </>
  );
}

Examples

Worker Deletion

Works with any resource type - just change the resourceType and resourceName props.

import { createSignal } from "solid-js";
import { Button } from "@photon-ai/kumo-solid";
import { DeleteResource } from "~/components/kumo/delete-resource";

export function DeleteResourceWorkerDemo() {
  const [open, setOpen] = createSignal(false);
  const [isDeleting, setIsDeleting] = createSignal(false);

  const handleDelete = async () => {
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setOpen(false);
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Worker
      </Button>
      <DeleteResource
        open={open()}
        onOpenChange={setOpen}
        resourceType="Worker"
        resourceName="api-gateway-worker"
        onDelete={handleDelete}
        isDeleting={isDeleting()}
      />
    </>
  );
}

Error State

Use the errorMessage prop to show an error message.

import { createSignal } from "solid-js";
import { Button } from "@photon-ai/kumo-solid";
import { DeleteResource } from "~/components/kumo/delete-resource";

export function DeleteResourceErrorDemo() {
  const [open, setOpen] = createSignal(false);
  const [isDeleting, setIsDeleting] = createSignal(false);
  const [errorMsg, setErrorMsg] = createSignal<string>("");

  const handleDelete = async () => {
    setErrorMsg("");
    setIsDeleting(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsDeleting(false);
    setErrorMsg("Something went wrong");
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open()}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting()}
        errorMessage={errorMsg()}
      />
    </>
  );
}

API Reference

Prop	Type	Default	Description
size	`"sm" \| "base"`	`"base"`	-
open*	`boolean`	-	Whether the dialog is open
resourceType*	`string`	-	The type of resource being deleted (e.g., "Zone", "Worker", "KV Namespace")
resourceName*	`string`	-	The name of the specific resource being deleted
isDeleting	`boolean`	-	Whether the delete action is in progress
caseSensitive	`boolean`	-	Whether the confirmation input should be case-sensitive (default: true)
deleteButtonText	`string`	-	Custom delete button text (defaults to "Delete {resourceType}")
className	`string`	-	Additional className for the dialog
errorMessage	`string`	-	Error message to display if the delete action fails