[luanlorenzo]

📝 Description

/resources/new creates SSH (proxy and local), TCP, Linux VM and HTTP proxy (httpproxy, grafana, kibana) resources in React.

📣 User-facing impact

None: the same setup wizard, now in React.

🔗 Related Issue

ENG-914

🚀 Type of Change

• ✨ New feature (non-breaking change which adds functionality)

📋 Changes Made

• The wizard renders the Configure Role SSH, HTTP proxy and free-form forms for a new role. TCP uses the metadata form.
• Fixes Q17 (Linux VM with no arguments sends ["bash"], not []) and Q18 (the SSH password is required).
• New behavior: switching the SSH auth method drops the hidden credential. CLJS still sent a password typed before a switch to key.
• Shared UI, so these change outside the wizard too:
  • SelectionCard icons are rounded squares on every page (Settings › Infrastructure, AI Session Analyzer, Sidecar setup). This reverts the pill from DES-245.
  • Env var, header and config file rows: a gray Remove button beside Add drops the last row. The per-row trash is gone, Configure Role included.
  • PasswordInput gets the app's 40px input height (it was 36px).
  • Command arguments keep repeated values and commas, Configure Role included.
• Wizard only: labels sit 12px from their field.
• Env var, header and file rows commit their key on Enter too: the wizard submits on Enter before the field blurs, which dropped the row.

🧪 Testing

Independent QA: every Definition of done item passes. 14 flows send the same POST /resources body as CLJS; 3 differ on purpose (Q17, the SSH auth switch, an argument typed without Enter).

• ssh (proxy and local, sent as ssh-local), tcp, linux-vm, httpproxy, grafana and kibana open the React wizard.
• Each form matches inventory §4; header names keep their case.
• POST /resources matches CLJS: webapp_v2/test/resourceSetup.test.js, fixtures recorded from the CLJS UI on main.
• Q17: in the web terminal, main fails with "connection must be at least one argument"; the branch runs.
• Q18: the branch blocks an SSH role with no password.
• Matrix rows RF03–RF06 pass side by side.

Re-run: cd webapp_v2 && npm test -- resourceSetup

📸 Screenshots

[sandromello]

✅ Build Completed with Success, Version=2101.0.0-g62886ba

[qodo-code-review]

PR Summary by Qodo

Create SSH, TCP, Linux VM and HTTP proxy resources in React

✨ Enhancement 🐞 Bug fix 🧪 Tests 🕐 40+ Minutes

AI Description

• Route SSH, TCP, Linux VM and HTTP proxy resources through the React setup wizard.
• Reuse role forms while preserving creation payloads and correcting Linux VM defaults and SSH
 authentication.
• Align shared form controls and verify resource payloads against CLJS fixtures.

Diagram

graph TD
  C["Resource catalog"] --> R{"Form route"} --> F["Role renderers"] --> S["Credential drafts"] --> P["Payload builder"] --> A["Resources API"]
  R --> M["Metadata fields"] --> S
  T["Parity tests"] -.-> P

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Drive every form from catalog metadata

• ➕ Could centralize form definitions and reduce subtype-specific UI routing.
• ➖ Current metadata cannot express SSH authentication choices, HTTP headers or Linux VM free-form fields; it would require a broader schema change.

Recommendation: Keep the split between metadata-driven TCP fields and reused dedicated renderers for the other subtypes. It extends the wizard without duplicating credential forms or requiring a catalog-schema redesign.

Files changed (30) +663 / -189

Enhancement (13) +218 / -174

theme.jsApply the standard size to PasswordInput +4/-2

Apply the standard size to PasswordInput

• Adds a PasswordInput theme default so password fields receive the same input size as other themed controls.

webapp_v2/src/components/Input/theme.js

index.jsxRender selection icons as rounded squares +1/-2

Render selection icons as rounded squares

• Changes the shared icon radius from a pill to a rounded square across pages using SelectionCard.

webapp_v2/src/components/SelectionCard/index.jsx

NameStep.jsxMatch wizard resource-card names and icon sizing +6/-2

Match wizard resource-card names and icon sizing

• Supplies display names for the new subtypes and contains their catalog icons within the selection card.

webapp_v2/src/pages/Resources/Setup/NameStep.jsx

Setup.module.cssIncrease wizard field-label spacing +1/-1

Increase wizard field-label spacing

• Uses the standard spacing token for labels in the setup wizard.

webapp_v2/src/pages/Resources/Setup/Setup.module.css

catalog.jsEnable new subtypes and route their role forms +21/-1

Enable new subtypes and route their role forms

• Adds TCP to metadata-driven setup and enables SSH, Linux VM, HTTP proxy, Grafana and Kibana with dedicated role-form selection.

webapp_v2/src/pages/Resources/Setup/catalog.js

payload.jsBuild role payloads from subtype and command drafts +16/-11

Build role payloads from subtype and command drafts

• Uses each role's drafted subtype and arguments, falling back to the catalog command when no arguments were entered. This preserves the Linux VM default command.

webapp_v2/src/pages/Resources/Setup/payload.js

roleCredentials.jsSupport dedicated-form drafts and secret serialization +35/-11

Support dedicated-form drafts and secret serialization

• Initializes role subtype and command drafts, seeds HTTP proxy's INSECURE value, and removes inactive SSH credentials on authentication changes. Serialization applies renamed keys, excludes blank or unnamed entries, and appends the expected private-key newline.

webapp_v2/src/pages/Resources/Setup/roleCredentials.js

RoleForm.jsxRender shared credential forms in the setup wizard +43/-38

Render shared credential forms in the setup wizard

• Selects SSH, HTTP proxy, Linux VM or metadata-driven credential forms for new roles. Hides connection-method controls for local SSH and uses a shared documentation hint.

webapp_v2/src/pages/Resources/Setup/sections/RoleForm.jsx

ConnectionMethod.jsxShare setup documentation hints +19/-15

Share setup documentation hints

• Adds a reusable docs hint and uses it beneath the secrets-manager provider picker, with provider-specific wording.

webapp_v2/src/pages/Roles/Configure/components/ConnectionMethod.jsx

AgentSelector.jsxOmit duplicate agent selection in wizard forms +6/-0

Omit duplicate agent selection in wizard forms

• Skips the shared renderer's agent picker for newly created wizard roles because the wizard already selects an agent.

webapp_v2/src/pages/Roles/Configure/sections/credentials/shared/AgentSelector.jsx

ConfigurationFiles.jsxReplace per-file deletion with a last-row Remove button +28/-37

Replace per-file deletion with a last-row Remove button

• Moves removal beside Add, removes the final file row, and gives the content textarea a standard field label. The shared change also affects Configure Role.

webapp_v2/src/pages/Roles/Configure/sections/credentials/shared/ConfigurationFiles.jsx

EnvironmentVariables.jsxReplace per-variable deletion with a last-row Remove button +19/-27

Replace per-variable deletion with a last-row Remove button

• Removes row-level trash controls and places a gray Remove button beside Add key/value to drop the final row.

webapp_v2/src/pages/Roles/Configure/sections/credentials/shared/EnvironmentVariables.jsx

HttpHeaders.jsxReplace per-header deletion with a last-row Remove button +19/-27

Replace per-header deletion with a last-row Remove button

• Removes row-level trash controls and adds a gray button that removes the final header row.

webapp_v2/src/pages/Roles/Configure/sections/credentials/shared/HttpHeaders.jsx

Bug fix (4) +18 / -7

HttpProxyRenderer.jsxKeep HTTP proxy URL visible in the wizard +1/-0

Keep HTTP proxy URL visible in the wizard

• Marks the remote URL as text rather than allowing the new-role default to mask it.

webapp_v2/src/pages/Roles/Configure/sections/credentials/HttpProxyRenderer.jsx

SshRenderer.jsxHandle SSH authentication switches during creation +12/-3

Handle SSH authentication switches during creation

• Uses the create-mode credential store to discard the now-hidden password or key when the authentication method changes, without changing the existing-role path.

webapp_v2/src/pages/Roles/Configure/sections/credentials/SshRenderer.jsx

CommandArgs.jsxPreserve repeated and comma-containing arguments +2/-1

Preserve repeated and comma-containing arguments

• Disables comma splitting and permits duplicate command-argument tags in the shared editor.

webapp_v2/src/pages/Roles/Configure/sections/credentials/shared/CommandArgs.jsx

PredefinedFields.jsxMask untyped new-role credentials by default +3/-3

Mask untyped new-role credentials by default

• Defaults fields without an explicit type to password inputs in create mode, while allowing explicitly typed fields such as the HTTP proxy URL to remain visible.

webapp_v2/src/pages/Roles/Configure/sections/credentials/shared/PredefinedFields.jsx

Tests (10) +419 / -4

grafana-vault.jsonRecord Grafana Vault creation payload +29/-0

Record Grafana Vault creation payload

• Adds a reference payload covering Vault KV v2 credentials, a header and an unprefixed INSECURE value.

webapp_v2/test/fixtures/resourceSetup/grafana-vault.json

httpproxy.jsonRecord HTTP proxy creation payload +29/-0

Record HTTP proxy creation payload

• Adds a reference payload covering the remote URL, case-preserved header and enabled insecure SSL.

webapp_v2/test/fixtures/resourceSetup/httpproxy.json

linux-vm-default.jsonRecord the CLJS Linux VM default payload +25/-0

Record the CLJS Linux VM default payload

• Captures the CLJS empty-command behavior as a reference for the intentional React default-command correction.

webapp_v2/test/fixtures/resourceSetup/linux-vm-default.json

linux-vm.jsonRecord Linux VM creation payload +32/-0

Record Linux VM creation payload

• Adds a reference payload with typed command arguments, an environment variable and a configuration file.

webapp_v2/test/fixtures/resourceSetup/linux-vm.json

metadata.jsonAdd Grafana to test catalog metadata +69/-0

Add Grafana to test catalog metadata

• Provides a Grafana catalog entry so setup routing and payload tests can resolve its HTTP proxy subtype.

webapp_v2/test/fixtures/resourceSetup/metadata.json

ssh-key-vault.jsonRecord Vault-backed SSH key payload +29/-0

Record Vault-backed SSH key payload

• Adds a reference payload for SSH key authentication using Vault KV v1 credential references.

webapp_v2/test/fixtures/resourceSetup/ssh-key-vault.json

ssh-local.jsonRecord local SSH payload +25/-0

Record local SSH payload

• Adds a reference payload showing an ssh-local role with no secrets beneath an SSH resource.

webapp_v2/test/fixtures/resourceSetup/ssh-local.json

ssh-password.jsonRecord SSH password payload +30/-0

Record SSH password payload

• Adds a reference payload for SSH proxy creation with host, port, user and password.

webapp_v2/test/fixtures/resourceSetup/ssh-password.json

tcp.jsonRecord TCP creation payload +28/-0

Record TCP creation payload

• Adds a reference payload for metadata-driven TCP host and port credentials.

webapp_v2/test/fixtures/resourceSetup/tcp.json

resourceSetup.test.jsTest new wizard routing and creation payloads +123/-4

Test new wizard routing and creation payloads

• Extends subtype routing coverage and compares SSH, TCP, Linux VM and HTTP proxy payloads with fixtures. Also checks SSH authentication switching, unnamed rows, private-key formatting and the corrected Linux VM command.

webapp_v2/test/resourceSetup.test.js

Documentation (2) +6 / -4

COMPONENTS.mdDocument selection icons and command-argument tags +4/-3

Document selection icons and command-argument tags

• Notes that SelectionCard icons use rounded squares and that command arguments preserve commas and duplicates.

webapp_v2/COMPONENTS.md

index.jsxUpdate command-argument input example +2/-1

Update command-argument input example

• Documents configuration that permits repeated tags and retains commas within an argument.

webapp_v2/src/components/TagsInput/index.jsx

Other (1) +2 / -0

theme.jsRegister the PasswordInput size theme +2/-0

Register the PasswordInput size theme

• Registers the new PasswordInput default with the application theme.

webapp_v2/src/theme.js

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Admins cannot delete the last saved row ✓ Resolved

Resolving commit: 3df72f9

Resolution reason

Added a canRemove flag in all three editors (ConfigurationFiles, EnvironmentVariables, HttpHeaders)
that is true when there is more than one row or when the last row is already saved (present in
currentSecrets), and gates the Remove button on it. A saved sole row can now be removed, and a blank
row takes its place. This matches the finding's remediation across all three editors, though it does
not add a separate placeholder-insertion effect.

Description

EnvironmentVariables, HttpHeaders, and ConfigurationFiles show their only Remove button only
when allKeys.length > 1, even if the sole row contains a saved value. When a role has one
environment variable, header, or configuration file—or an admin removes other rows until one
remains—the former per-row delete control is gone and that final item cannot be deleted.

---

2. Shared setup-docs hint lives in a page folder, undocumented ✓ Resolved

Resolving commit: 3df72f9

Resolution reason

The commit moves SetupDocsHint out of pages/Roles/Configure/components/ConnectionMethod.jsx into a
new shared file webapp_v2/src/components/SetupDocsHint/index.jsx, removes the old export, updates
RoleForm.jsx and ConnectionMethod.jsx to import it from '@/components/SetupDocsHint', and adds a
COMPONENTS.md entry with its import path. This matches the suggested fix.

Description

SetupDocsHint is a new export in pages/Roles/Configure/components/ConnectionMethod.jsx, but it
is imported and rendered by pages/Resources/Setup/sections/RoleForm.jsx, a different page. The
component is therefore shared across pages yet stays under a page-specific components/ folder
instead of graduating to src/components/. A grep of webapp_v2 finds no SetupDocsHint entry in
COMPONENTS.md, which this PR also edits, so the shared component is undiscoverable from the
component index. Pre-existing exports in the same file (ConnectionMethodSection,
SecretsManagerProviderSection) already have this cross-page shape, so this PR adds to a pattern
rather than creating it alone.

---

Context sources

✅ Tickets: 🎫 Resource setup in React: SSH, TCP, Linux VM and HTTP proxy

✅ Compliance rules (platform): 127 rules

✅ Skills: build-ticket

✅ Cross-repo context — repo relationships

Review mode: Auto: 🚀 Fast: Localized UI button swaps and a docs hint; no security or schema logic.

✅ Fix-loop round: fix loop

Tip of the day

💡 Did you know, you can commit Qodo's fix in one click with committable suggestions (GitHub & GitLab)

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Previous reviews

Review updated until commit 3df72f9 🚀 Fast

Results up to commit 57bda24 ⚖️ Balanced

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Admins cannot delete the last saved row ✓ Resolved

Resolving commit: 3df72f9

Resolution reason

Added a canRemove flag in all three editors (ConfigurationFiles, EnvironmentVariables, HttpHeaders)
that is true when there is more than one row or when the last row is already saved (present in
currentSecrets), and gates the Remove button on it. A saved sole row can now be removed, and a blank
row takes its place. This matches the finding's remediation across all three editors, though it does
not add a separate placeholder-insertion effect.

Description

EnvironmentVariables, HttpHeaders, and ConfigurationFiles show their only Remove button only
when allKeys.length > 1, even if the sole row contains a saved value. When a role has one
environment variable, header, or configuration file—or an admin removes other rows until one
remains—the former per-row delete control is gone and that final item cannot be deleted.

---

2. Shared setup-docs hint lives in a page folder, undocumented ✓ Resolved

Resolving commit: 3df72f9

Resolution reason

The commit moves SetupDocsHint out of pages/Roles/Configure/components/ConnectionMethod.jsx into a
new shared file webapp_v2/src/components/SetupDocsHint/index.jsx, removes the old export, updates
RoleForm.jsx and ConnectionMethod.jsx to import it from '@/components/SetupDocsHint', and adds a
COMPONENTS.md entry with its import path. This matches the suggested fix.

Description

SetupDocsHint is a new export in pages/Roles/Configure/components/ConnectionMethod.jsx, but it
is imported and rendered by pages/Resources/Setup/sections/RoleForm.jsx, a different page. The
component is therefore shared across pages yet stays under a page-specific components/ folder
instead of graduating to src/components/. A grep of webapp_v2 finds no SetupDocsHint entry in
COMPONENTS.md, which this PR also edits, so the shared component is undiscoverable from the
component index. Pre-existing exports in the same file (ConnectionMethodSection,
SecretsManagerProviderSection) already have this cross-page shape, so this PR adds to a pattern
rather than creating it alone.

---

[luanlorenzo]

Qodo finding 2 (SetupDocsHint shared across pages): moved to src/components/SetupDocsHint with a COMPONENTS.md entry in 3df72f9.

[qodo-code-review]

Code review by qodo was updated up to the latest commit 3df72f9

[sandromello]

✅ Build Completed with Success, Version=2101.0.0-g3df72f9