225 lines
17 KiB
HTML
225 lines
17 KiB
HTML
<!-- ════════════ STEP 2: API host ════════════ -->
|
|
<div id="step-panel-2" class="step-pane">
|
|
<div class="step-panel-header">
|
|
<div class="step-panel-eyebrow">
|
|
<div class="step-panel-eyebrow-line"></div>
|
|
<span data-step-counter>Step 2 of 5</span>
|
|
</div>
|
|
<h1 class="step-panel-title" data-i18n="wizard.step2.title">Выберите API-хост и путь</h1>
|
|
<p class="step-panel-subtitle" data-i18n="wizard.step2.subtitle">Выберите существующий API-хост или добавьте новый. Затем задайте путь, который будет вызывать эта операция.</p>
|
|
</div>
|
|
|
|
<!-- ── Upstream selector ── -->
|
|
<div class="config-card" style="margin-bottom: 20px; overflow: visible; position: relative; z-index: 10;">
|
|
<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">
|
|
<rect x="1" y="3" width="14" height="4" rx="1"/>
|
|
<rect x="1" y="9" width="14" height="4" rx="1"/>
|
|
<circle cx="4" cy="5" r="0.8" fill="var(--text-secondary)" stroke="none"/>
|
|
<circle cx="4" cy="11" r="0.8" fill="var(--text-secondary)" stroke="none"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title" data-i18n="wizard.step2.upstream_title">API-хост</div>
|
|
<div class="config-card-subtitle" data-i18n="wizard.step2.upstream_subtitle">Базовый URL и способ авторизации</div>
|
|
</div>
|
|
<span class="config-card-optional" style="color: var(--error, #f87171);" data-i18n="wizard.required">Обязательно</span>
|
|
</div>
|
|
<div class="config-card-body" style="gap: 12px; padding: 16px;">
|
|
|
|
<!-- Searchable combobox -->
|
|
<div class="upstream-combobox" id="upstream-combobox">
|
|
<div class="upstream-combobox-trigger" id="upstream-combobox-trigger" data-wizard-action="toggle-upstream">
|
|
<div class="upstream-combobox-value" id="upstream-combobox-value">
|
|
<span class="upstream-combobox-placeholder" data-i18n="wizard.step2.upstream_placeholder">Выберите API-хост…</span>
|
|
</div>
|
|
<svg class="upstream-combobox-chevron" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 6l4 4 4-4"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Dropdown panel -->
|
|
<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"/>
|
|
</svg>
|
|
<input class="upstream-search-input" id="upstream-search" type="text" data-i18n-ph="wizard.step2.search_placeholder" placeholder="Поиск по имени или URL…" autocomplete="off" spellcheck="false">
|
|
</div>
|
|
<div class="upstream-dropdown-list" id="upstream-dropdown-list">
|
|
<!-- populated by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected upstream preview -->
|
|
<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>
|
|
<button class="upstream-preview-change" data-wizard-action="edit-upstream" data-i18n="wizard.step2.change">Изменить</button>
|
|
</div>
|
|
|
|
<!-- Register new upstream trigger row -->
|
|
<div class="upstream-new-trigger" id="upstream-new-trigger" data-wizard-action="new-upstream">
|
|
<div class="upstream-new-trigger-radio" id="upstream-new-trigger-radio">
|
|
<div class="upstream-new-trigger-dot"></div>
|
|
</div>
|
|
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round">
|
|
<path d="M8 3v10M3 8h10"/>
|
|
</svg>
|
|
<span data-i18n="wizard.step2.register_new">Добавить новый API-хост</span>
|
|
</div>
|
|
|
|
<!-- Register new upstream form (kept as-is per design) -->
|
|
<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">
|
|
<label class="form-label"><span data-i18n="wizard.step2.name">Имя</span> <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span></label>
|
|
<input class="form-input" id="new-upstream-name" type="text" placeholder="e.g. acme-api" autocomplete="off" spellcheck="false">
|
|
<div class="form-hint" data-i18n="wizard.step2.unique_hint">Уникальное имя этого API-хоста.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label"><span data-i18n="wizard.step2.base_url">Базовый URL</span> <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span></label>
|
|
<input class="form-input input-mono" id="new-upstream-url" type="text" placeholder="https://api.example.com" autocomplete="off" spellcheck="false">
|
|
<div class="form-hint" data-i18n="wizard.step2.base_url_hint">Корневой URL без завершающего слеша. Авторизация настраивается ниже.</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="wizard.step2.auth_selector">Авторизация API-хоста</label>
|
|
<select class="form-select" id="new-upstream-auth-mode" data-testid="wizard-auth-mode-select">
|
|
<option value="none" data-i18n="wizard.step2.auth_mode.none">Без авторизации</option>
|
|
<option value="existing" data-i18n="wizard.step2.auth_mode.existing">Использовать существующий профиль авторизации</option>
|
|
<option value="create" data-i18n="wizard.step2.auth_mode.create">Создать профиль авторизации сейчас</option>
|
|
</select>
|
|
<div class="form-hint" data-i18n="wizard.step2.auth_selector_hint">Используйте секреты, чтобы не хранить токены и пароли прямо в настройках API-хоста.</div>
|
|
</div>
|
|
|
|
<div class="form-group" id="upstream-auth-existing-group" hidden>
|
|
<label class="form-label" data-i18n="wizard.step2.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">Выбранный профиль применяется автоматически при каждом вызове инструмента.</div>
|
|
</div>
|
|
|
|
<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">Создать профиль авторизации</div>
|
|
<div class="config-card-subtitle" data-i18n="wizard.step2.create_profile_subtitle">Профиль можно переиспользовать в нескольких API-хостах. Значения берутся из зашифрованных секретов воркспейса.</div>
|
|
</div>
|
|
</div>
|
|
<div class="config-card-body" style="gap: 14px;">
|
|
<div class="form-group">
|
|
<label class="form-label"><span data-i18n="wizard.step2.profile_name">Имя профиля</span> <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span></label>
|
|
<input class="form-input" id="new-auth-profile-name" type="text" autocomplete="off" spellcheck="false">
|
|
</div>
|
|
<div class="form-row" style="grid-template-columns: 1fr 1fr;">
|
|
<div class="form-group">
|
|
<label class="form-label"><span data-i18n="wizard.step2.profile_kind">Тип авторизации</span> <span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span></label>
|
|
<select class="form-select" id="new-auth-profile-kind" data-testid="wizard-auth-profile-kind-select">
|
|
<option value="bearer" data-i18n="wizard.step2.auth_kind.bearer">Bearer-токен</option>
|
|
<option value="basic" data-i18n="wizard.step2.auth_kind.basic">Логин и пароль</option>
|
|
<option value="api_key_header" data-i18n="wizard.step2.auth_kind.api_key_header">API-ключ в заголовке</option>
|
|
<option value="api_key_query" data-i18n="wizard.step2.auth_kind.api_key_query">API-ключ в параметре запроса</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="auth-profile-header-name-group">
|
|
<label class="form-label" data-i18n="wizard.step2.header_name">Имя заголовка</label>
|
|
<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" hidden>
|
|
<label class="form-label" data-i18n="wizard.step2.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" hidden style="grid-template-columns: 1fr 1fr;">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="wizard.step2.username_secret">Секрет логина</label>
|
|
<select class="form-select" id="new-auth-profile-username-secret" data-testid="wizard-auth-username-secret-select"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="wizard.step2.password_secret">Секрет пароля</label>
|
|
<select class="form-select" id="new-auth-profile-password-secret" data-testid="wizard-auth-password-secret-select"></select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" id="auth-profile-single-secret-group">
|
|
<label class="form-label" data-i18n="wizard.step2.secret_value">Секрет</label>
|
|
<select class="form-select" id="new-auth-profile-secret-id" data-testid="wizard-auth-secret-select"></select>
|
|
</div>
|
|
<div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
|
|
<button class="btn-ghost-sm" data-testid="wizard-open-quick-secret" data-wizard-action="quick-secret" data-i18n="wizard.step2.quick_secret">Быстро создать секрет</button>
|
|
<a class="btn-ghost-sm" href="/secrets" target="_blank" rel="noopener" data-i18n="wizard.step2.manage_secrets">Открыть страницу секретов</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="wizard.step2.static_headers">Статические заголовки (опционально)</label>
|
|
<div class="code-block" style="border-radius: 6px;">
|
|
<div class="code-toolbar">
|
|
<div class="code-dots"><span></span><span></span><span></span></div>
|
|
<span class="code-toolbar-label">json / static-headers</span>
|
|
</div>
|
|
<textarea class="form-textarea code-textarea" id="new-upstream-static-headers" rows="5">{
|
|
}</textarea>
|
|
</div>
|
|
<div class="form-hint" data-i18n="wizard.step2.static_headers_hint">Необязательные заголовки без секретных значений. Токены, пароли и ключи храните через профиль авторизации.</div>
|
|
</div>
|
|
<div style="display:flex; gap:8px; margin-top:4px;">
|
|
<button class="btn-primary-sm" data-wizard-action="save-upstream" data-i18n="wizard.step2.save_upstream">Сохранить API-хост</button>
|
|
<button class="btn-ghost-sm" data-wizard-action="cancel-upstream" data-i18n="btn.cancel">Отмена</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Endpoint ── -->
|
|
<div class="config-card" 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>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title" data-i18n="wizard.step2.endpoint_title">Путь API</div>
|
|
<div class="config-card-subtitle" data-i18n="wizard.step2.endpoint_subtitle">Путь и HTTP-метод для конкретной операции</div>
|
|
</div>
|
|
<span class="config-card-optional" style="color: var(--error, #f87171);" data-i18n="wizard.required">Обязательно</span>
|
|
</div>
|
|
<div class="config-card-body" style="gap: 16px;">
|
|
<div class="form-group">
|
|
<label class="form-label">
|
|
<span data-i18n="wizard.step2.path_template">Шаблон пути</span>
|
|
<span class="form-label-required" data-i18n="workspace_setup.required">обязательно</span>
|
|
</label>
|
|
<input class="form-input input-mono" id="endpoint-path" type="text" value="/v1/leads" autocomplete="off" spellcheck="false">
|
|
<div class="form-hint" data-i18n="wizard.step2.path_hint">Добавляется к базовому URL API-хоста. Используйте {param} для параметров пути.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /step-pane-2 -->
|
|
|
|
<!-- Template: upstream dropdown item -->
|
|
<template id="tmpl-upstream-item">
|
|
<div class="upstream-dropdown-item">
|
|
<div class="upstream-dropdown-item-info">
|
|
<div class="upstream-dropdown-item-name"></div>
|
|
<div class="upstream-dropdown-item-url"></div>
|
|
</div>
|
|
<span class="upstream-auth-badge"></span>
|
|
<svg class="upstream-dropdown-item-check" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8l4 4 6-7"/></svg>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Template: upstream combobox trigger value -->
|
|
<template id="tmpl-upstream-trigger-value">
|
|
<div class="upstream-trigger-name"></div>
|
|
<div class="upstream-trigger-url"></div>
|
|
</template>
|