bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: use hidden state for wizard upstream panels

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 13:52:43 +00:00
parent cd0a445614
commit 558bce385d
3 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/wizard/step2.html
+7 -7
View File
@@ -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>
apps/ui/html/wizard/step3-rest.html
+1 -1
View File
@@ -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>
apps/ui/js/wizard.js
+21 -21
View File
@@ -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;