Introduce generic credential input fields

[grolu]

How to categorize this PR?

/area usability
/area quality
/kind cleanup

What this PR does / why we need it:

This is the fourth preparatory refactoring extracted from #2824. It follows #3075, #3082, and #3085.

• Introduces generic input-field components with configurable field types, validators, defaults, structured YAML/JSON parsing, Secret visibility, and file drop support.
• Uses a yaml-secret generic input field only in the already existing generic Secret dialog.
• Explicitly declares and forwards the generic dialog's credential prop.
• Generalizes the text-field drop helper with file-extension fallback, rejection feedback, and listener cleanup.

This gives the generic field abstraction a real, reviewable consumer without migrating provider-specific dialogs at the same time. Provider-specific dialogs, routing, vendor field configuration, and useSecretContext serialization remain unchanged.

Which issue(s) this PR fixes:

Part of #2824.

Special notes for your reviewer:

For valid YAML mappings, Secret handling is unchanged: the parsed mapping is assigned through the existing secretStringData encoder and produces the same top-level, base64-encoded Secret .data. Integration tests cover both create and edit flows, including dotted keys such as serviceaccount.json, and verify that existing values are populated when editing.

Empty, malformed, scalar, and array-root YAML is rejected before submission. Array-root YAML was accidentally accepted by the previous implementation and converted into numeric Secret keys.

The generic input fields component already contains logic for the follow-up PRs that will remove the provider specific dialogs. Eventually all / most providers will be handled by the GenericSecretDialog. Please review the logic even if not all of it is currently being used.

Validation: make verify (including 76 frontend test files and 735 frontend tests).

Release note:

NONE

Summary by CodeRabbit

• New Features

  • Added reusable input fields supporting text, passwords, selections, and structured JSON/YAML data.
  • Added secret visibility toggling and validation for common formats, patterns, lengths, and object properties.
  • Added file drop support for importing JSON and YAML content, with clear rejection messages.
  • Updated generic secret dialogs to edit structured secret data while preserving existing metadata.

• Bug Fixes

  • Improved handling of defaults, existing values, empty inputs, invalid structured data, and secret updates.

• Tests

  • Added comprehensive coverage for generic inputs, secret dialogs, structured text handling, file drops, and input type classification.

[gardener-prow]

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

[gardener-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign petersutter for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds reusable generic input components for standard, secret, JSON, and YAML values; introduces structured text and file-drop utilities; integrates them into the secret dialog; and adds tests for rendering, synchronization, validation, parsing, and manifest updates.

Changes

Generic input and secret handling

Layer / File(s)	Summary
Structured formats and file-drop foundations frontend/src/utils/inputFieldTypes.js, frontend/src/composables/useStructuredTextField.js, frontend/src/utils/index.js, frontend/__tests__/utils/*	Adds field-type classification, JSON/YAML serialization and parsing, extension-aware file drops, structured rejection errors, and cleanup behavior.
Generic field rendering and validation frontend/src/components/GGenericInputField.vue, frontend/__tests__/components/GGenericInputFields.spec.js	Adds text, password, select, and structured inputs with secret masking, Vuelidate rules, object-property checks, drag-and-drop loading, and validation tests.
Field aggregation and secret-dialog integration frontend/src/components/GGenericInputFields.vue, frontend/src/components/Credentials/GSecretDialogGeneric.vue, frontend/__tests__/components/*	Adds deep-cloned defaults and synchronized multi-field models, then binds the generic field to secret context data and tests creation and editing of encoded secret manifests.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant GSecretDialogGeneric
  participant GGenericInputField
  participant SecretContext
  User->>GSecretDialogGeneric: enter or edit secret text
  GSecretDialogGeneric->>GGenericInputField: bind secretStringData
  GGenericInputField-->>GSecretDialogGeneric: emit update:modelValue
  GSecretDialogGeneric->>SecretContext: update secret manifest data
  SecretContext-->>User: expose updated validation state

Loading

Suggested labels: needs/review, needs/ok-to-test, lifecycle/active

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: introducing generic credential input fields.
Description check	✅ Passed	The description follows the template and covers categorization, purpose, issue, reviewer notes, and release note.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch enh/generic-input-fields

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/GGenericInputField.vue`:
- Around line 398-402: Update the secret-field implementation associated with
the hide-secret styling in GGenericInputField.vue to use a supported
input/control masking mechanism rather than relying solely on
-webkit-text-security. Ensure structured secret values remain masked across
older Firefox and Edge clients while preserving the existing hidden-toggle
behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b4ef7d01-4ed1-48e0-8b18-29a5f7e377aa

📥 Commits

Reviewing files that changed from the base of the PR and between 18f6ed1 and f113ea6.

📒 Files selected for processing (11)

• frontend/__tests__/components/GGenericInputFields.spec.js
• frontend/__tests__/components/GSecretDialogGeneric.spec.js
• frontend/__tests__/composables/useStructuredTextField.spec.js
• frontend/__tests__/utils/index.spec.js
• frontend/__tests__/utils/inputFieldTypes.spec.js
• frontend/src/components/Credentials/GSecretDialogGeneric.vue
• frontend/src/components/GGenericInputField.vue
• frontend/src/components/GGenericInputFields.vue
• frontend/src/composables/useStructuredTextField.js
• frontend/src/utils/index.js
• frontend/src/utils/inputFieldTypes.js

[petersutter]

do we need both? (same applies for yaml)