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

ui: use hidden state for grpc wizard panels

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 14:02:26 +00:00
parent 558bce385d
commit 4203c34dcf
2 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/wizard/step3-grpc.html
+11 -11
View File
@@ -51,7 +51,7 @@
<div class="proto-dropzone-sub" data-i18n="wizard.step3.grpc.drop_subtitle">or click to browse</div>
<input type="file" id="proto-file-input" accept=".proto" style="display:none" onchange="handleProtoFile(event)">
</div>
<div class="proto-file-info" id="proto-file-info" style="display:none">
<div class="proto-file-info" id="proto-file-info" hidden>
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6z"/><path d="M9 2v4h4"/></svg>
<span class="proto-file-name" id="proto-file-name"></span>
<span class="proto-file-size" id="proto-file-size"></span>
@@ -62,7 +62,7 @@
<button class="btn-ghost-sm" onclick="toggleProtoPaste()" id="proto-paste-btn" data-i18n="wizard.step3.grpc.paste_content">Paste content</button>
<div style="flex:1; height:1px; background:var(--border-subtle);"></div>
</div>
<div id="proto-paste-area" style="display:none">
<div id="proto-paste-area" hidden>
<div class="code-block" style="border-radius: 6px;">
<div class="code-toolbar">
<div class="code-dots"><span></span><span></span><span></span></div>
@@ -78,8 +78,8 @@
</div>
</div>
</div>
<div id="proto-parsed-view" style="display:none">
<div class="info-callout" id="proto-streaming-notice" style="margin-bottom:20px;display:none">
<div id="proto-parsed-view" hidden>
<div class="info-callout" id="proto-streaming-notice" hidden style="margin-bottom:20px">
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
<div class="info-callout-body">
<div class="info-callout-title" data-i18n="wizard.step3.grpc.streaming_excluded">Streaming methods excluded</div>
@@ -99,7 +99,7 @@
</div><!-- /grpc-src-proto -->
<!-- ══ Reflection source ══ -->
<div id="grpc-src-reflection" style="display:none">
<div id="grpc-src-reflection" hidden>
<div class="config-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div class="config-card-header-icon">
@@ -127,14 +127,14 @@
</button>
</div>
<!-- Loading -->
<div id="grpc-reflect-loading" style="display:none">
<div id="grpc-reflect-loading" hidden>
<div class="grpc-reflect-status">
<div class="grpc-reflect-spinner"></div>
<span id="grpc-reflect-status-text" data-i18n="wizard.step3.grpc.connecting">Connecting…</span>
</div>
</div>
<!-- Error -->
<div id="grpc-reflect-error" style="display:none">
<div id="grpc-reflect-error" hidden>
<div class="grpc-reflect-error-row">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="var(--error,#f87171)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="7"/><path d="M8 5v3M8 10.5v.5"/></svg>
<span id="grpc-reflect-error-text" data-i18n="wizard.step3.grpc.live_step5">Live descriptor discovery is handled in step 5.</span>
@@ -143,8 +143,8 @@
</div>
</div>
</div>
<div id="reflect-parsed-view" style="display:none">
<div class="info-callout" id="reflect-streaming-notice" style="margin-bottom:20px;display:none">
<div id="reflect-parsed-view" hidden>
<div class="info-callout" id="reflect-streaming-notice" hidden style="margin-bottom:20px">
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
<div class="info-callout-body">
<div class="info-callout-title" data-i18n="wizard.step3.grpc.streaming_excluded">Streaming methods excluded</div>
@@ -164,7 +164,7 @@
</div><!-- /grpc-src-reflection -->
<!-- ══ Manual source ══ -->
<div id="grpc-src-manual" style="display:none">
<div id="grpc-src-manual" hidden>
<div class="config-card" style="margin-bottom: 20px;">
<div class="config-card-header">
<div class="config-card-header-icon">
@@ -206,7 +206,7 @@
</div><!-- /grpc-src-manual -->
<!-- ══ Shared method detail (proto + reflection) ══ -->
<div id="grpc-method-detail" class="config-card" style="margin-bottom: 20px; display:none">
<div id="grpc-method-detail" class="config-card" hidden style="margin-bottom: 20px">
<div class="config-card-header">
<div class="config-card-header-icon">
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8h12M10 4l4 4-4 4"/></svg>
apps/ui/js/wizard.js
+24 -24
View File
@@ -808,12 +808,12 @@ function selectGrpcSource(source) {
document.querySelectorAll('.grpc-source-btn').forEach(function(btn) {
btn.classList.toggle('active', btn.dataset.source === source);
});
document.getElementById('grpc-src-proto').style.display = source === 'proto' ? '' : 'none';
document.getElementById('grpc-src-reflection').style.display = source === 'reflection' ? '' : 'none';
document.getElementById('grpc-src-manual').style.display = source === 'manual' ? '' : 'none';
document.getElementById('grpc-src-proto').hidden = source !== 'proto';
document.getElementById('grpc-src-reflection').hidden = source !== 'reflection';
document.getElementById('grpc-src-manual').hidden = source !== 'manual';
// hide shared detail when switching sources
var detail = document.getElementById('grpc-method-detail');
if (detail) detail.style.display = 'none';
if (detail) detail.hidden = true;
selectedRpcMethod = null;
}
@@ -908,7 +908,7 @@ function renderServiceResults(parsed, ids) {
var notice = document.getElementById(ids.notice);
var countEl = document.getElementById(ids.count);
if (notice) {
notice.style.display = parsed.streamingCount > 0 ? '' : 'none';
notice.hidden = parsed.streamingCount <= 0;
if (countEl && parsed.streamingCount > 0) countEl.textContent = parsed.streamingCount;
}
@@ -959,8 +959,8 @@ function renderServiceResults(parsed, ids) {
});
}
document.getElementById(ids.view).style.display = '';
document.getElementById('grpc-method-detail').style.display = 'none';
document.getElementById(ids.view).hidden = false;
document.getElementById('grpc-method-detail').hidden = true;
}
function renderParsedProto(parsed) {
@@ -1016,12 +1016,12 @@ function selectRpcMethod(btn) {
if (resTypeEl) resTypeEl.textContent = resType;
var sigGrid = document.getElementById('grpc-detail-sig');
if (sigGrid) sigGrid.style.display = '';
if (sigGrid) sigGrid.hidden = false;
renderFieldList('grpc-req-fields', reqType);
renderFieldList('grpc-res-fields', resType);
document.getElementById('grpc-method-detail').style.display = '';
document.getElementById('grpc-method-detail').hidden = false;
}
function renderFieldList(elId, typeName) {
@@ -1086,12 +1086,12 @@ function showProtoFileInfo(name, size) {
var info = document.getElementById('proto-file-info');
var nameEl = document.getElementById('proto-file-name');
var sizeEl = document.getElementById('proto-file-size');
if (dropzone) dropzone.style.display = 'none';
if (info) info.style.display = '';
if (dropzone) dropzone.hidden = true;
if (info) info.hidden = false;
if (nameEl) nameEl.textContent = name;
if (sizeEl) sizeEl.textContent = (size / 1024).toFixed(1) + ' KB';
// hide paste area
document.getElementById('proto-paste-area').style.display = 'none';
document.getElementById('proto-paste-area').hidden = true;
document.getElementById('proto-paste-btn').textContent = 'Paste content';
}
@@ -1099,9 +1099,9 @@ function resetProto() {
var dropzone = document.getElementById('proto-dropzone');
var info = document.getElementById('proto-file-info');
var parsedView = document.getElementById('proto-parsed-view');
if (dropzone) dropzone.style.display = '';
if (info) info.style.display = 'none';
if (parsedView) parsedView.style.display = 'none';
if (dropzone) dropzone.hidden = false;
if (info) info.hidden = true;
if (parsedView) parsedView.hidden = true;
var fileInput = document.getElementById('proto-file-input');
if (fileInput) fileInput.value = '';
protoParsed = null;
@@ -1113,8 +1113,8 @@ function toggleProtoPaste() {
var area = document.getElementById('proto-paste-area');
var btn = document.getElementById('proto-paste-btn');
if (!area) return;
var open = area.style.display !== 'none';
area.style.display = open ? 'none' : '';
var open = !area.hidden;
area.hidden = open;
if (btn) btn.textContent = open ? 'Paste content' : 'Cancel paste';
if (!open) {
var ta = document.getElementById('proto-paste-input');
@@ -1125,7 +1125,7 @@ function toggleProtoPaste() {
function cancelProtoPaste() {
var area = document.getElementById('proto-paste-area');
var btn = document.getElementById('proto-paste-btn');
if (area) area.style.display = 'none';
if (area) area.hidden = true;
if (btn) btn.textContent = 'Paste content';
}
@@ -1134,13 +1134,13 @@ function parseProtoPasted() {
if (!ta || !ta.value.trim()) return;
var parsed = parseProto(ta.value);
wizardProtoUpload = { fileName: 'pasted.proto', content: ta.value };
document.getElementById('proto-paste-area').style.display = 'none';
document.getElementById('proto-paste-area').hidden = true;
var dropzone = document.getElementById('proto-dropzone');
if (dropzone) dropzone.style.display = 'none';
if (dropzone) dropzone.hidden = true;
var info = document.getElementById('proto-file-info');
var nameEl = document.getElementById('proto-file-name');
var sizeEl = document.getElementById('proto-file-size');
if (info) info.style.display = '';
if (info) info.hidden = false;
if (nameEl) nameEl.textContent = 'pasted.proto';
if (sizeEl) sizeEl.textContent = (ta.value.length / 1024).toFixed(1) + ' KB';
renderParsedProto(parsed);
@@ -1197,7 +1197,7 @@ function grpcManualRouteInput(val) {
var detail = document.getElementById('grpc-method-detail');
var sigGrid = document.getElementById('grpc-detail-sig');
if (!val || !val.startsWith('/') || val.indexOf('/', 1) === -1) {
if (detail) detail.style.display = 'none';
if (detail) detail.hidden = true;
return;
}
// Parse service + method from route: /[pkg.]Service/Method
@@ -1213,10 +1213,10 @@ function grpcManualRouteInput(val) {
if (sub) sub.textContent = serviceName + '/' + methodName;
// hide sig grid in manual mode (no field data)
if (sigGrid) sigGrid.style.display = 'none';
if (sigGrid) sigGrid.hidden = true;
grpcManualTypeInput();
if (detail) detail.style.display = '';
if (detail) detail.hidden = false;
}
function grpcManualTypeInput() {