From c54d234daa615a20bb7cffb86bb4532b24f1b883 Mon Sep 17 00:00:00 2001 From: "a.tolmachev" Date: Sat, 2 May 2026 13:33:24 +0000 Subject: [PATCH] ui: remove html step counter translations --- apps/ui/html/wizard/step1.html | 2 +- apps/ui/html/wizard/step2.html | 2 +- apps/ui/html/wizard/step3-graphql.html | 2 +- apps/ui/html/wizard/step3-grpc.html | 2 +- apps/ui/html/wizard/step3-rest.html | 2 +- apps/ui/html/wizard/step3-soap.html | 2 +- apps/ui/html/wizard/step3-websocket.html | 2 +- apps/ui/html/wizard/step4.html | 2 +- apps/ui/html/wizard/step5.html | 2 +- apps/ui/js/i18n.js | 3 --- apps/ui/js/wizard-shell.js | 23 +++++++++++++++++++++-- 11 files changed, 30 insertions(+), 14 deletions(-) diff --git a/apps/ui/html/wizard/step1.html b/apps/ui/html/wizard/step1.html index c333d84..34b30d0 100644 --- a/apps/ui/html/wizard/step1.html +++ b/apps/ui/html/wizard/step1.html @@ -3,7 +3,7 @@
- Step 1 of 5 + Step 1 of 5

Choose a protocol

Select the transport protocol your upstream service uses. This determines how Crank will communicate with your API and which configuration options are available in subsequent steps.

diff --git a/apps/ui/html/wizard/step2.html b/apps/ui/html/wizard/step2.html index 488baf3..50a8460 100644 --- a/apps/ui/html/wizard/step2.html +++ b/apps/ui/html/wizard/step2.html @@ -3,7 +3,7 @@
- Step 2 of 5 + Step 2 of 5

Select upstream & endpoint

Choose an existing upstream — a shared host with its auth config — or register a new one. Then define the specific endpoint path this operation will call.

diff --git a/apps/ui/html/wizard/step3-graphql.html b/apps/ui/html/wizard/step3-graphql.html index 125210d..1fd61dc 100644 --- a/apps/ui/html/wizard/step3-graphql.html +++ b/apps/ui/html/wizard/step3-graphql.html @@ -2,7 +2,7 @@
- Step 3 of 5 + Step 3 of 5

GraphQL operation

Define the GraphQL operation this tool will execute. All requests are sent as HTTP POST to the endpoint configured in the previous step. Variables are populated from MCP tool arguments at runtime.

diff --git a/apps/ui/html/wizard/step3-grpc.html b/apps/ui/html/wizard/step3-grpc.html index c1b7762..86416dc 100644 --- a/apps/ui/html/wizard/step3-grpc.html +++ b/apps/ui/html/wizard/step3-grpc.html @@ -2,7 +2,7 @@
- Step 3 of 5 + Step 3 of 5

RPC method

Choose how to describe the gRPC service contract. Upload a .proto file, discover methods from a live server via reflection, or enter the route manually. Only unary RPCs are supported.

diff --git a/apps/ui/html/wizard/step3-rest.html b/apps/ui/html/wizard/step3-rest.html index f5d7082..8e12b34 100644 --- a/apps/ui/html/wizard/step3-rest.html +++ b/apps/ui/html/wizard/step3-rest.html @@ -3,7 +3,7 @@
- Step 3 of 5 + Step 3 of 5

HTTP method & format

Choose the HTTP verb this operation sends and configure content negotiation headers. Crank will serialize MCP tool arguments into the appropriate request body format.

diff --git a/apps/ui/html/wizard/step3-soap.html b/apps/ui/html/wizard/step3-soap.html index f6d4c04..09a5366 100644 --- a/apps/ui/html/wizard/step3-soap.html +++ b/apps/ui/html/wizard/step3-soap.html @@ -2,7 +2,7 @@
- Step 3 of 5 + Step 3 of 5

WSDL and SOAP binding

Upload the WSDL/XSD bundle, inspect services and choose the exact service, port and operation that Crank should expose as an MCP tool.

diff --git a/apps/ui/html/wizard/step3-websocket.html b/apps/ui/html/wizard/step3-websocket.html index f2dd30c..57b06ca 100644 --- a/apps/ui/html/wizard/step3-websocket.html +++ b/apps/ui/html/wizard/step3-websocket.html @@ -2,7 +2,7 @@
- Step 3 of 5 + Step 3 of 5

WebSocket subscription

Define the subscription handshake, the message templates and the connection tuning that Crank should use before collecting bounded WebSocket events.

diff --git a/apps/ui/html/wizard/step4.html b/apps/ui/html/wizard/step4.html index 8469977..2fb425c 100644 --- a/apps/ui/html/wizard/step4.html +++ b/apps/ui/html/wizard/step4.html @@ -2,7 +2,7 @@
- Step 4 of 5 + Step 4 of 5

Tool config

Name your tool, write the LLM-facing description, and define the input/output schemas. The description is the primary signal the model uses when deciding whether to call this tool.

diff --git a/apps/ui/html/wizard/step5.html b/apps/ui/html/wizard/step5.html index c7fba9e..6bc647e 100644 --- a/apps/ui/html/wizard/step5.html +++ b/apps/ui/html/wizard/step5.html @@ -2,7 +2,7 @@
- Step 5 of 5 + Step 5 of 5

Mapping and execution

Define how MCP tool arguments map to upstream request fields, and how the upstream response maps back to MCP output. Then set execution parameters — auth is configured per-upstream in step 2.

diff --git a/apps/ui/js/i18n.js b/apps/ui/js/i18n.js index 99f6973..9ed6df6 100644 --- a/apps/ui/js/i18n.js +++ b/apps/ui/js/i18n.js @@ -2362,9 +2362,6 @@ function applyLang() { document.querySelectorAll('[data-i18n]').forEach(function(el) { el.textContent = t(el.getAttribute('data-i18n')); }); - document.querySelectorAll('[data-i18n-html]').forEach(function(el) { - el.innerHTML = t(el.getAttribute('data-i18n-html')); - }); // placeholder document.querySelectorAll('[data-i18n-ph]').forEach(function(el) { el.placeholder = t(el.getAttribute('data-i18n-ph')); diff --git a/apps/ui/js/wizard-shell.js b/apps/ui/js/wizard-shell.js index cc835da..dcf4246 100644 --- a/apps/ui/js/wizard-shell.js +++ b/apps/ui/js/wizard-shell.js @@ -50,6 +50,19 @@ ); } + function renderStepCounter(counter, step, total) { + if (!counter) return; + var language = localStorage.getItem('crank_lang') || 'en'; + var parts = language === 'ru' + ? { prefix: 'Шаг ', suffix: ' из ' + total } + : { prefix: 'Step ', suffix: ' of ' + total }; + var strong = document.createElement('strong'); + counter.textContent = parts.prefix; + strong.textContent = String(step); + counter.appendChild(strong); + counter.appendChild(document.createTextNode(parts.suffix)); + } + function loadStep(step, callback) { var panelId = step === 3 ? step3PanelId() : 'step-panel-' + step; if (document.getElementById(panelId)) { @@ -114,8 +127,8 @@ var percentNode = document.querySelector('.progress-pct'); if (percentNode) percentNode.textContent = percent + '%'; - var counter = document.querySelector('[data-step-counter]'); - if (counter) counter.innerHTML = tfKey('wizard.step_of', { step: step, total: TOTAL_STEPS }); + var counter = pane ? pane.querySelector('[data-step-counter]') : null; + renderStepCounter(counter, step, TOTAL_STEPS); var backButton = document.querySelector('.btn-back'); if (backButton) { @@ -153,6 +166,12 @@ }, Promise.resolve()); } + window.addEventListener('crank:langchange', function() { + if (window.currentStep) { + doGoToStep(window.currentStep); + } + }); + function bindProtocolCards() { document.querySelectorAll('.protocol-card').forEach(function(card) { card.addEventListener('click', function() {