Git Connection Settings Block for React

Edit PROVIDERS (each has an id, a two-letter mark and its name), REPOS (the repository names under ORG), ENVS and SAVED, which holds the connection and the rules when the page opens. The lead sentence, the table's counts, the tester and the unsaved count all read from the rules, so a new environment or rule appears everywhere at once.

A star stands for any characters, so feature/* takes feature/login-copy and * takes everything; the rules are read from the top and the first match decides. A row says Never reached when an earlier pattern catches everything it would, which the block tests by trying two names the stars could stand for. Moving a rule up or down updates the notes at once. A new pattern may use letters, digits and / . _ - * only, and an identical pattern is refused with the rule that already has it.

Disconnect opens an alert dialog that can't be dismissed by clicking outside it and starts on Keep connected. Confirming marks the connection as not connected, keeps the rules as they are, dims the rule table and the tester (they stop taking focus) and replaces the button with Connect, which takes focus. Connect brings it back in this demo; nothing is contacted either way. Removing a rule has its own Undo, which restores the last removed rule at its old place.

Everything. Nothing contacts GitHub, GitLab or Bitbucket: the repositories, the webhook host and the deploy key are fictional sample values, and Save keeps the choices in this page's state. To make it real, connect through the provider's OAuth or app installation, list the account's repositories into the select, register a webhook and a read-only key, store the rules on your server and match each push against them in the same order. Never put a real token in the page.

The provider chips stack on the narrowest screens, and each rule becomes a card with its pattern and three buttons on the first line, the environment under them and the switch with a line that says what it does. Every control names its rule ("Rule 2: deploys to"), the move buttons stay focusable at the ends and answer in words, and focus follows a rule that moved or was removed. The status line says what changed, and says which rule a branch would take once typing rests.