From 558bce385dd2a400ef9d25a4f1938581fc4ee38c Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Sat, 2 May 2026 13:52:43 +0000
Subject: [PATCH] ui: use hidden state for wizard upstream panels

---
 apps/ui/html/wizard/step2.html      | 14 +++++-----
 apps/ui/html/wizard/step3-rest.html |  2 +-
 apps/ui/js/wizard.js                | 42 ++++++++++++++---------------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/ui/html/wizard/step2.html b/apps/ui/html/wizard/step2.html
index 50a8460..cb7c1c5 100644
--- a/apps/ui/html/wizard/step2.html
+++ b/apps/ui/html/wizard/step2.html
@@ -40,7 +40,7 @@
                 </div>
 
                 <!-- Dropdown panel -->
-                <div class="upstream-dropdown" id="upstream-dropdown" style="display:none;">
+                <div class="upstream-dropdown" id="upstream-dropdown" hidden>
                   <div class="upstream-search-wrap">
                     <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="1.8" stroke-linecap="round">
                       <circle cx="7" cy="7" r="5"/><path d="M12 12l2.5 2.5"/>
@@ -54,7 +54,7 @@
               </div>
 
               <!-- Selected upstream preview -->
-              <div class="upstream-preview" id="upstream-preview" style="display:none;">
+              <div class="upstream-preview" id="upstream-preview" hidden>
                 <div class="upstream-preview-name" id="upstream-preview-name"></div>
                 <div class="upstream-preview-url" id="upstream-preview-url"></div>
                 <span class="upstream-auth-badge" id="upstream-preview-badge"></span>
@@ -73,7 +73,7 @@
               </div>
 
               <!-- Register new upstream form (kept as-is per design) -->
-              <div class="upstream-new-form" id="upstream-new-form" style="display:none;">
+              <div class="upstream-new-form" id="upstream-new-form" hidden>
                 <div class="upstream-new-form-inner">
                   <div class="form-row" style="grid-template-columns: 1fr 2fr;">
                     <div class="form-group">
@@ -97,13 +97,13 @@
                     <div class="form-hint" data-i18n="wizard.step2.auth_selector_hint">Use secrets-backed auth profiles instead of embedding credential headers in the upstream definition.</div>
                   </div>
 
-                  <div class="form-group" id="upstream-auth-existing-group" style="display:none;">
+                  <div class="form-group" id="upstream-auth-existing-group" hidden>
                     <label class="form-label" data-i18n="wizard.step2.auth_profile">Auth profile</label>
                     <select class="form-select" id="new-upstream-auth-profile" data-testid="wizard-auth-profile-select"></select>
                     <div class="form-hint" id="new-upstream-auth-profile-hint" data-i18n="wizard.step2.auth_profile_hint">Selected profile will be resolved at runtime and attached through `execution_config.auth_profile_ref`.</div>
                   </div>
 
-                  <div class="config-card" id="upstream-auth-create-group" style="display:none; margin-top: 6px;">
+                  <div class="config-card" id="upstream-auth-create-group" hidden style="margin-top: 6px;">
                     <div class="config-card-header">
                       <div>
                         <div class="config-card-title" data-i18n="wizard.step2.create_profile_title">Create auth profile</div>
@@ -130,11 +130,11 @@
                           <input class="form-input input-mono" id="new-auth-profile-header-name" type="text" value="Authorization" autocomplete="off" spellcheck="false">
                         </div>
                       </div>
-                      <div class="form-group" id="auth-profile-query-param-group" style="display:none;">
+                      <div class="form-group" id="auth-profile-query-param-group" hidden>
                         <label class="form-label" data-i18n="wizard.step2.query_param">Query param</label>
                         <input class="form-input input-mono" id="new-auth-profile-query-param" type="text" value="api_key" autocomplete="off" spellcheck="false">
                       </div>
-                      <div class="form-row" id="auth-profile-basic-secret-row" style="display:none; grid-template-columns: 1fr 1fr;">
+                      <div class="form-row" id="auth-profile-basic-secret-row" hidden style="grid-template-columns: 1fr 1fr;">
                         <div class="form-group">
                           <label class="form-label" data-i18n="wizard.step2.username_secret">Username secret</label>
                           <select class="form-select" id="new-auth-profile-username-secret" data-testid="wizard-auth-username-secret-select"></select>
diff --git a/apps/ui/html/wizard/step3-rest.html b/apps/ui/html/wizard/step3-rest.html
index 8e12b34..0273706 100644
--- a/apps/ui/html/wizard/step3-rest.html
+++ b/apps/ui/html/wizard/step3-rest.html
@@ -46,7 +46,7 @@
                   <span class="method-desc" data-i18n="wizard.step3.rest.remove">Remove</span>
                 </button>
               </div>
-              <div class="method-callout" id="method-callout-rest" style="display:none;"></div>
+              <div class="method-callout" id="method-callout-rest" hidden></div>
             </div>
           </div>
 
diff --git a/apps/ui/js/wizard.js b/apps/ui/js/wizard.js
index 99a5622..fd871d7 100644
--- a/apps/ui/js/wizard.js
+++ b/apps/ui/js/wizard.js
@@ -201,9 +201,9 @@ function selectMethod(btn) {
     content.appendChild(title);
     content.appendChild(document.createTextNode(' ' + text.body));
     callout.appendChild(content);
-    callout.style.display = 'flex';
+    callout.hidden = false;
   } else {
-    callout.style.display = 'none';
+    callout.hidden = true;
   }
 }
 
@@ -361,16 +361,16 @@ function updateAuthProfileCreateUi() {
   var singleSecretGroup = document.getElementById('auth-profile-single-secret-group');
 
   if (headerGroup) {
-    headerGroup.style.display = (kind === 'bearer' || kind === 'api_key_header') ? '' : 'none';
+    headerGroup.hidden = !(kind === 'bearer' || kind === 'api_key_header');
   }
   if (queryGroup) {
-    queryGroup.style.display = kind === 'api_key_query' ? '' : 'none';
+    queryGroup.hidden = kind !== 'api_key_query';
   }
   if (basicRow) {
-    basicRow.style.display = kind === 'basic' ? '' : 'none';
+    basicRow.hidden = kind !== 'basic';
   }
   if (singleSecretGroup) {
-    singleSecretGroup.style.display = kind === 'basic' ? 'none' : '';
+    singleSecretGroup.hidden = kind === 'basic';
   }
 }
 
@@ -378,8 +378,8 @@ function updateUpstreamAuthUi() {
   var mode = textValue('new-upstream-auth-mode') || 'none';
   var existingGroup = document.getElementById('upstream-auth-existing-group');
   var createGroup = document.getElementById('upstream-auth-create-group');
-  if (existingGroup) existingGroup.style.display = mode === 'existing' ? '' : 'none';
-  if (createGroup) createGroup.style.display = mode === 'create' ? '' : 'none';
+  if (existingGroup) existingGroup.hidden = mode !== 'existing';
+  if (createGroup) createGroup.hidden = mode !== 'create';
   updateAuthProfileCreateUi();
 }
 
@@ -440,14 +440,14 @@ function openUpstreamDropdown() {
   var search = document.getElementById('upstream-search');
   if (!combobox || !dropdown) return;
   combobox.classList.add('open');
-  dropdown.style.display = '';
+  dropdown.hidden = false;
   dropdownOpen = true;
   renderDropdownList('');
   if (search) { search.value = ''; search.focus(); }
 
   // Close new-upstream form if open
   var form = document.getElementById('upstream-new-form');
-  if (form) form.style.display = 'none';
+  if (form) form.hidden = true;
 }
 
 function closeUpstreamDropdown() {
@@ -455,7 +455,7 @@ function closeUpstreamDropdown() {
   var dropdown = document.getElementById('upstream-dropdown');
   if (!combobox || !dropdown) return;
   combobox.classList.remove('open');
-  dropdown.style.display = 'none';
+  dropdown.hidden = true;
   dropdownOpen = false;
 }
 
@@ -503,12 +503,12 @@ function pickUpstream(id) {
     pUrl.textContent = u.url;
     pBadge.textContent = meta.label;
     pBadge.className = 'upstream-auth-badge auth-' + meta.kind;
-    preview.style.display = 'flex';
+    preview.hidden = false;
   }
 
   // Hide new-upstream form and reset trigger
   var form = document.getElementById('upstream-new-form');
-  if (form) form.style.display = 'none';
+  if (form) form.hidden = true;
   var trigger = document.getElementById('upstream-new-trigger');
   if (trigger) trigger.classList.remove('active');
 
@@ -524,11 +524,11 @@ function startNewUpstream() {
   editingUpstreamId = null;
   var trigger = document.getElementById('upstream-new-trigger');
   var form = document.getElementById('upstream-new-form');
-  var isOpen = form && form.style.display !== 'none';
+  var isOpen = form && !form.hidden;
 
   if (isOpen) {
     // toggle off — restore previous state
-    if (form) form.style.display = 'none';
+    if (form) form.hidden = true;
     if (trigger) trigger.classList.remove('active');
     return;
   }
@@ -537,13 +537,13 @@ function startNewUpstream() {
   var val = document.getElementById('upstream-combobox-value');
   if (val) setUpstreamComboboxPlaceholder(val);
   var preview = document.getElementById('upstream-preview');
-  if (preview) preview.style.display = 'none';
+  if (preview) preview.hidden = true;
   selectedUpstreamId = null;
 
   // Mark trigger active and show form
   if (trigger) trigger.classList.add('active');
   if (form) {
-    form.style.display = '';
+    form.hidden = false;
     setValue('new-upstream-name', '');
     setValue('new-upstream-url', '');
     setValue('new-upstream-static-headers', '{\n}');
@@ -574,9 +574,9 @@ function beginEditSelectedUpstream(e) {
   var form = document.getElementById('upstream-new-form');
   var preview = document.getElementById('upstream-preview');
   if (trigger) trigger.classList.add('active');
-  if (preview) preview.style.display = 'none';
+  if (preview) preview.hidden = true;
   if (form) {
-    form.style.display = '';
+    form.hidden = false;
     setValue('new-upstream-name', upstream.name);
     setValue('new-upstream-url', upstream.url);
     setValue('new-upstream-static-headers', upstream.staticHeaders || '{\n}');
@@ -713,7 +713,7 @@ async function saveNewUpstream(e) {
     if (urlEl) urlEl.value = '';
     if (staticHeadersEl) staticHeadersEl.value = '{\n}';
     var form = document.getElementById('upstream-new-form');
-    if (form) form.style.display = 'none';
+    if (form) form.hidden = true;
     editingUpstreamId = null;
     pickUpstream(nextRecord.id);
   } catch (error) {
@@ -729,7 +729,7 @@ async function saveNewUpstream(e) {
 function cancelNewUpstream(e) {
   e.stopPropagation();
   var form = document.getElementById('upstream-new-form');
-  if (form) form.style.display = 'none';
+  if (form) form.hidden = true;
   var trigger = document.getElementById('upstream-new-trigger');
   if (trigger) trigger.classList.remove('active');
   editingUpstreamId = null;