github-ops
70 lines
4.0 KiB
HTML
70 lines
4.0 KiB
HTML
<!-- ════════════ STEP 1: Protocol ════════════ -->
|
|
<div id="step-panel-1" 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 1 of 5</span>
|
|
</div>
|
|
<h1 class="step-panel-title" data-i18n="wizard.step1.title">Choose a protocol</h1>
|
|
<p class="step-panel-subtitle" data-i18n="wizard.step1.subtitle">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.</p>
|
|
</div>
|
|
|
|
<!-- Protocol selection cards -->
|
|
<div class="protocol-grid" data-testid="wizard-protocol-grid">
|
|
|
|
<div class="protocol-card rest selected" data-protocol="rest" data-testid="wizard-protocol-rest" role="radio" aria-checked="true" tabindex="0">
|
|
<div class="protocol-card-check">
|
|
<svg viewBox="0 0 12 12"><polyline points="1.5,6 4.5,9 10.5,3"/></svg>
|
|
</div>
|
|
<div class="protocol-icon-wrap">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#58a6ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
<path d="M3.6 9h16.8M3.6 15h16.8"/>
|
|
<path d="M12 3a15.3 15.3 0 010 18M12 3a15.3 15.3 0 000 18"/>
|
|
</svg>
|
|
</div>
|
|
<div class="protocol-card-name" data-i18n="wizard.step1.rest_name">REST / HTTP</div>
|
|
<div class="protocol-card-tagline" data-i18n="wizard.step1.rest_tagline">Standard HTTP verbs over a RESTful endpoint. The most broadly supported option.</div>
|
|
<div class="protocol-card-tags">
|
|
<span class="protocol-tag">GET</span>
|
|
<span class="protocol-tag">POST</span>
|
|
<span class="protocol-tag">PUT</span>
|
|
<span class="protocol-tag">PATCH</span>
|
|
<span class="protocol-tag">DELETE</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-slot="wizard.protocol_cards.graphql"></div>
|
|
<div data-slot="wizard.protocol_cards.grpc"></div>
|
|
<div data-slot="wizard.protocol_cards.soap"></div>
|
|
<div data-slot="wizard.protocol_cards.websocket"></div>
|
|
|
|
</div><!-- /protocol-grid -->
|
|
|
|
|
|
<div class="info-callout" style="margin-bottom: 24px;">
|
|
<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.step1.tip_title">You can change this later</div>
|
|
<div class="info-callout-text">
|
|
<span data-i18n="wizard.step1.tip_body">Switching protocol after configuring subsequent steps will clear schema and mapping data. Save your operation as a draft before experimenting. See protocol migration guide for details.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-callout" id="wizard-edition-protocol-note" hidden>
|
|
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="8" cy="8" r="7"/>
|
|
<path d="M8 11V8M8 5v-.5"/>
|
|
</svg>
|
|
<div class="info-callout-body">
|
|
<div class="info-callout-title" data-i18n="wizard.step1.community_protocol_title">Community protocol scope</div>
|
|
<div class="info-callout-text" id="wizard-edition-protocol-note-text"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /step-pane-1 -->
|