Automations and webhooks for the AT Protocol airglow.run

Create button is disabled without saying why #16

Closed tyb.there-hugo.dev
Closed opened by tyb.there-hugo.dev

Problem #

AutomationForm.tsx:1325 disables the create buttons when the form is invalid but shows no reason, so the user has to hunt for the problem.

Seen in the session #

In https://www.youtube.com/watch?v=5MnT-ZgbBIc:

  • 0:47:40.

Fix direction #

Show the blocking validation errors next to the disabled button, or keep it enabled and focus the first error on click.

Details: docs/brainstorms/2026-10-17-graze-conference-automation-feedback.md (M5).

Show the blocking validation errors next to the disabled button

Queued: the loop will work on this version of the issue.

loop:queued cid=bafyreigfnqc6cwmitkr4vjohk3afh4a3qg4nuuckghrsa54hfuqhvqwu5u

Working on this, attempt 1.

loop:claim run=contribute-20261026-150710-3my32fhbxae22 branch=loop/3my32fhbxae22 attempt=1 issue=16

fix(automations): list why the submit buttons are disabled next to them

The automation form disabled its Create / Update buttons when the form was invalid but never said why, so users had to hunt for the missing piece. The form now lists each blocking reason (no name, no trigger event, no action step) in a small box right above the disabled buttons, in both create and edit mode. Each item goes away as soon as it is fixed, and the box goes away when the form can be submitted.

What changed #

  • app/islands/AutomationForm.tsx: the formInvalid boolean is now built from a blockingReasons list that covers the same three conditions. When the list is not empty it is rendered as #submit-blockers ("Before you can create/update this automation:" and a bulleted list). It sits above the create buttons (under the dry-run hint) and inside the sticky edit bar above "Update automation". The disabled buttons point at it with aria-describedby, so screen readers announce the reasons too.
  • app/islands/AutomationForm.css.ts: added a submitBlockers style. It has its own background and border because it rides in the sticky edit bar over the form. stickySubmit is now a right-aligned column so the box can stack above the button. With the button alone, the layout looks the same as before.

Verification #

  • New tests in AutomationForm.test.tsx ("AutomationForm blocking reasons"):
    • a valid form shows no box;
    • an empty create form lists all three reasons, and both buttons are disabled and described by the box;
    • typing a name drops that reason and turns the button back on;
    • edit mode with a blank name shows "Before you can update..." next to the Update button.
  • pnpm run check passes.
  • pnpm run test passes: 166 files, 2596 tests.
  • Not checked in a browser: no PDS or dev server is available in this environment.

Acceptance criteria #

Decisions the owner can reverse #

  • Wording: "Give it a name." / "Pick at least one trigger event." / "Add at least one action step."
  • The list covers only the conditions that disable the buttons. Other checks don't disable them: broken step references, processor-only trees and the HTML-required lexicon field. Those still report on submit, as before.
  • In edit mode the box is inside the sticky bar, so it stays visible next to the floating button. The alternative was a box at the bottom of the form only.

Review: https://tangled.org/exosphere.site/airglow/compare/main...loop/3my32fhbxae22

loop:pushed run=contribute-20261026-150710-3my32fhbxae22 sha=646cc10ed02d3863eae5984c4232708dc7c5208d

Merge. The issue asks for the reasons behind the disabled create buttons, and the owner's comment chose "show the blocking validation errors next to the disabled button". The branch does exactly that: the same three conditions that disable the buttons (no name, no trigger event, no action step) are now built as a list and shown right above the Create buttons, and in the sticky bar above Update in edit mode. Check and tests are green.

What I checked:

  • Read the whole diff against main. formInvalid is now blockingReasons.length > 0, built from exactly the old conditions (!name.trim(), operations.length === 0, !hasActionStep). So which buttons get disabled has not changed, and every disabling reason is listed. The box renders only while the form is invalid. The disabled buttons point at it through aria-describedby, and the create buttons keep the existing create-dry-run-hint reference. The stickySubmit change (a right-aligned column) leaves the button-only layout as it was. Nothing outside the issue's scope was changed.
  • pnpm run check: passes (format, lint, types).
  • pnpm run test: 166 files and 2596 tests pass, including the four new "AutomationForm blocking reasons" tests: a valid form shows no box; an empty create form lists all three reasons; fixing the name clears that reason and turns the button back on; edit mode shows the box.
  • No migration and no followup are involved. I did not check the change in a browser.

loop:verdict run=review-20261026-151348-3my32fhbxae22 sha=646cc10ed02d3863eae5984c4232708dc7c5208d verdict=merge

Merged main into the branch: a8dc2bfd7602c0c71f155a148cd34aa39bbc41c0.

loop:carry from=646cc10ed02d3863eae5984c4232708dc7c5208d sha=a8dc2bfd7602c0c71f155a148cd34aa39bbc41c0

Merged onto main as 663a52a8319b236ac04072b05fffc85e70119f2c.

loop:merged sha=663a52a8319b236ac04072b05fffc85e70119f2c head=a8dc2bfd7602c0c71f155a148cd34aa39bbc41c0

Sign up or Sign in to add to the discussion.