Merge pull request #16 from woocommerce/feat/simplify-api-key-flow

Simplify API key flow: always read-only + redesigned post-connect card

Author: garysmurray

includes/setup/assets/setup.css

@@ -183,14 +183,6 @@ select.hey-woo-setup__input {
 	line-height: 1.5;
 }
 
-.hey-woo-setup__field-help--write-warn {
-	background: #fff8e5;
-	border-left: 3px solid #f0c33c;
-	color: #5a4200;
-	padding: 8px 10px;
-	border-radius: 0 3px 3px 0;
-}
-
 /* ---- Action row (right-aligned button zone) ---- */
 
 .hey-woo-setup__actions {
@@ -208,35 +200,102 @@ select.hey-woo-setup__input {
 	justify-content: space-between;
 	gap: 16px;
 	flex-wrap: wrap;
-	padding-bottom: 18px;
-	margin-bottom: 18px;
-	border-bottom: 1px solid #f0f0f1;
 }
 
 .hey-woo-setup__keyrow-meta {
 	min-width: 0;
 	flex: 1 1 auto;
 }
 
-.hey-woo-setup__keyrow-meta p {
+.hey-woo-setup__keyrow-label {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: 6px;
+}
+
+/*
+ * The label is already styled via .hey-woo-setup__field-label, but it
+ * carries a default margin-bottom that adds an extra gap below the
+ * row when it lives inside the flex container above. Reset to 0 so
+ * the keyrow-label gap is the only spacing between the label and the
+ * pill.
+ */
+.hey-woo-setup__keyrow-label .hey-woo-setup__field-label {
+	margin-bottom: 0;
+}
+
+/*
+ * Connection status pill. Borrows the colour palette from WooCommerce
+ * core's order-status pills (status-processing for LIVE, status-cancelled
+ * for OFF) so the indicator reads visually consistent with the rest of
+ * WC admin without coupling to WC's actual `.order-status` selectors —
+ * those are scoped to the order list and could shift in a future WC
+ * release.
+ */
+.hey-woo-setup__pill {
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 10px;
+	background: #e5e5e5;
+	color: #777;
+	font-size: 10px;
+	font-weight: 600;
+	letter-spacing: .05em;
+	text-transform: uppercase;
+	border-radius: 12px;
+	line-height: 1.6;
+}
+
+.hey-woo-setup__pill--live {
+	background: #c6e1c6;
+	color: #5b841b;
+}
+
+.hey-woo-setup__pill--off {
+	background: #e5e5e5;
+	color: #777;
+}
+
+.hey-woo-setup__keyrow-name {
 	margin: 0;
-	font-size: 14px;
+	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+	font-size: 13px;
 	color: #1d2327;
 }
 
 .hey-woo-setup__keyrow-actions {
 	display: flex;
-	gap: 8px;
+	align-items: center;
+	gap: 18px;
 	flex-wrap: wrap;
 }
 
+.hey-woo-setup__textlink {
+	color: #2271b1;
+	text-decoration: underline;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+.hey-woo-setup__textlink:hover,
+.hey-woo-setup__textlink:focus {
+	color: #135e96;
+}
+
 /*
- * Permissions toggle below the keyrow. The keyrow's bottom border
- * already provides the separator; drop the field's bottom margin so
- * the card padding handles spacing to Step 2.
+ * Help text below the keyrow. Same colour/size as field-help, with
+ * extra top margin to separate from the keyrow's flex row instead of
+ * a stacked field above. Surfaces the rotation-on-escalation guidance
+ * (regenerate before broadening if the bundle has been shared) and
+ * the Read/Write vs. Write distinction without putting the controls
+ * back in this card.
  */
-.hey-woo-setup__field--keyperms {
-	margin-bottom: 0;
+.hey-woo-setup__keyrow-help {
+	margin: 14px 0 0;
+	color: #6b7280;
+	font-size: 12px;
+	line-height: 1.5;
 }
 
 /* ---- Tabs (Step 2) ---- */

includes/setup/assets/setup.js

@@ -2,10 +2,6 @@
  * Hey Woo setup page client-side wiring.
  *
  *  - Tab switcher for the Step 2 "Easy install" / "Manual setup" panels.
- *  - Generate button that reads the description + permissions form
- *    fields and navigates to the nonce-protected admin-post URL with
- *    those values appended as query args.
- *  - Inline "Read + Write" warning toggle on the permissions dropdown.
  *  - Copy-to-clipboard for the manual snippets.
  */
 (function () {
@@ -58,69 +54,6 @@
 		});
 	}
 
-	function initGenerate() {
-		var button = document.querySelector('[data-hey-woo-generate]');
-		if (!button) {
-			return;
-		}
-
-		button.addEventListener('click', function () {
-			if (button.disabled) {
-				return;
-			}
-			var base = button.getAttribute('data-hey-woo-action-base') || '';
-			if (!base) {
-				return;
-			}
-
-			var permissionsInput = document.getElementById('hey-woo-permissions');
-			var permissions = permissionsInput ? permissionsInput.value : 'read';
-
-			var separator = base.indexOf('?') >= 0 ? '&' : '?';
-			var url = base + separator + 'permissions=' + encodeURIComponent(permissions);
-
-			button.disabled = true;
-			button.textContent = button.dataset.busyLabel || 'Generating…';
-			window.location.href = url;
-		});
-	}
-
-	function initWriteWarning() {
-		var permissionsInput = document.getElementById('hey-woo-permissions');
-		var warning = document.querySelector('[data-hey-woo-write-warning]');
-		if (!permissionsInput || !warning) {
-			return;
-		}
-
-		function update() {
-			warning.hidden = permissionsInput.value !== 'read_write';
-		}
-
-		permissionsInput.addEventListener('change', update);
-		update();
-	}
-
-	function initPermsToggle() {
-		var select = document.querySelector('[data-hey-woo-perm-toggle]');
-		if (!select) {
-			return;
-		}
-		// Snapshot the on-load value so a no-op change doesn't trigger
-		// navigation, and so we can restore the visible value if the
-		// admin uses the back button without the page reloading.
-		select.dataset.previousValue = select.value;
-
-		select.addEventListener('change', function () {
-			var option = select.options[select.selectedIndex];
-			var url = option ? option.getAttribute('data-url') : '';
-			if (!url || select.value === select.dataset.previousValue) {
-				return;
-			}
-			select.disabled = true;
-			window.location.href = url;
-		});
-	}
-
 	function copyText(text, button) {
 		if (!text) {
 			return;
@@ -184,9 +117,6 @@
 
 	function init() {
 		initTabs();
-		initGenerate();
-		initWriteWarning();
-		initPermsToggle();
 		initCopy();
 	}