fix: add missing form. Cover all connection types #2807

adityathebe · 2025-12-30T17:21:34Z

resolves: #2678

Summary by CodeRabbit

New Features
- Permission-based controls added for Save/Update and Delete actions in the connection editor.
- Read-only display and warning for connections sourced from Kubernetes CRDs.
- New connection types introduced (Gemini, Loki, OpenSearch, AWS/Azure/GCP KMS and related vaults) with corresponding form support.
Chores
- Updated a UI icon dependency to a newer patch version.
API/Schema
- Connection form now accepts additional optional fields (e.g., URLs, key ID, index, NTLM/Digest/TLS flags).

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2025-12-30T17:21:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
aws-preview	Ready	Preview	Jan 2, 2026 0:53am
flanksource-ui	Ready	Preview	Jan 2, 2026 0:53am

netlify · 2025-12-30T17:21:42Z

❌ Deploy Preview for flanksource-demo-stable failed. Why did it fail? →

Name	Link
🔨 Latest commit	`587bce9`
🔍 Latest deploy log	https://app.netlify.com/projects/flanksource-demo-stable/deploys/69540a2156047c0008de17f4

coderabbitai · 2025-12-30T17:21:46Z

Walkthrough

The PR adds permission-based gating for save/delete actions and a Kubernetes-CRD read-only mode in the ConnectionSpecEditor, shows a read-only banner, disables the YAML editor when read-only, and fixes editor layout (adds min-h-0) so the editor can take full height.

Changes

Cohort / File(s)	Summary
Connection Spec Editor (permissions & read-only) `src/components/Connections/ConnectionSpecEditor.tsx`	Added `CanEditResource` wrappers (authorization checks) around Delete and Submit actions; introduced `isReadOnly` derived from `formValue?.source === "KubernetesCRD"` to show a warning banner and disable `FormikCodeEditor`; layout adjustments (`min-h-0`, container className tweaks) to fix editor height and action area.
Connection form type additions `src/components/Connections/ConnectionFormModal.tsx`	Extended exported `Connection` type with optional fields: `keyID?`, `urls?`, `index?`, `ntlm?`, `ntlmv2?`, `digest?`, `insecureSkipVerify?`.
New/expanded connection types `src/components/Connections/connectionTypes.tsx`	Added new enum members (`gemini`, `aws_kms`, `azure_key_vault`, `gcp_kms`) and new connection type entries (Gemini, Loki, Opensearch, GCP KMS, AWS KMS, Azure Key Vault) including form fields, `convertToFormSpecificValue`, and `preSubmitConverter` implementations. Review converters and field mappings for correctness.
Dependency update `package.json`	Bumped `@flanksource/icons` from `^1.0.40` to `^1.0.46`.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes an unrelated dependency update (icons package upgrade) and adds multiple new connection type definitions that go beyond fixing the broken spec editor rendering mentioned in issue #2678.	Separate the dependency update to its own PR and clarify whether adding new connection types is in scope for this fix or should be a separate feature request.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Title check	❓ Inconclusive	The PR title 'fix: add missing form. Cover all connection types' is partially related to the changeset. It mentions adding forms and covering connection types, which aligns with adding new connection type definitions (Gemini, Loki, Opensearch, KMS variants), but doesn't capture the main objective of fixing the generic YAML/spec editor's rendering issues.	Clarify the title to highlight the primary change: either focus on fixing the spec editor layout for generic forms, or add connection type definitions, whichever is the main objective.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR addresses issue #2678's requirements: it fixes the generic YAML editor rendering by expanding the editor container with min-h-0 styling and implements read-only mode for Kubernetes CRD sources; it also adds missing connection type definitions for Gemini, Loki, Opensearch, and KMS variants mentioned in the issue.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/connection-form

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 587bce9 and 483ad6d.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (4)

package.json
src/components/Connections/ConnectionFormModal.tsx
src/components/Connections/ConnectionSpecEditor.tsx
src/components/Connections/connectionTypes.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

src/components/Connections/connectionTypes.tsx (1)

src/components/Connections/ConnectionFormModal.tsx (1)

Connection (15-68)

src/components/Connections/ConnectionSpecEditor.tsx (4)

src/components/Forms/Formik/FormikCodeEditor.tsx (1)

FormikCodeEditor (44-150)

src/components/Permissions/AuthorizationAccessCheck.tsx (1)

AuthorizationAccessCheck (14-56)

src/context/UserAccessContext/permissions.ts (1)

tables (1-27)

src/components/Settings/CanEditResource.tsx (1)

CanEditResource (88-102)

🔇 Additional comments (8)

src/components/Connections/ConnectionFormModal.tsx (1)

36-36: LGTM!

The new optional fields properly extend the Connection type to support the new connection types (Opensearch, AWS KMS, GCP KMS, Azure Key Vault). All fields are correctly typed.

Also applies to: 54-54, 61-65

src/components/Connections/connectionTypes.tsx (4)

221-255: LGTM!

The Gemini connection type follows the established pattern for AI service connections (similar to Anthropic and OpenAI), with proper convertToFormSpecificValue and preSubmitConverter implementations.

438-463: LGTM!

The Loki connection type is straightforward with URL, username, and password fields. No converters are needed since fields map directly to the Connection type.

557-643: LGTM!

The Opensearch connection type correctly handles:

Comma-separated URLs with proper parsing in preSubmitConverter

Array to string conversion in convertToFormSpecificValue

NTLM, Digest, and TLS configuration options

763-805: LGTM!

The KMS connection types (Google Cloud KMS, AWS KMS, Azure Key Vault) follow consistent patterns with proper handling of keyID in the converters.

Also applies to: 935-999, 1142-1191

src/components/Connections/ConnectionSpecEditor.tsx (2)

53-53: The min-h-0 fix correctly addresses the editor layout issue.

Adding min-h-0 to both the container (line 68) and the FormikCodeEditor (line 83) is the correct solution. In flexbox, children don't shrink below their minimum content size by default; min-h-0 allows the editor to properly fill the available space, fixing the single-line rendering issue reported in #2678.

Also applies to: 68-68, 81-86

73-80: LGTM!

The read-only banner provides clear user feedback when editing is disabled for Kubernetes CRD-managed resources.

package.json (1)

18-18: Verify the new icons are available in @flanksource/icons@^1.0.46.

The code uses aliases to map connection type icons (gemini, aws-kms, gcp-kms, azure-key-vault, opensearch). Most icons have defined aliases in src/ui/Icons/Icon.tsx, but confirm that all referenced icon names exist in the icons package version.

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

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

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5c56690 and 587bce9.

📒 Files selected for processing (1)

src/components/Connections/ConnectionSpecEditor.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/Connections/ConnectionSpecEditor.tsx (4)

src/components/Forms/Formik/FormikCodeEditor.tsx (1)

FormikCodeEditor (44-150)

src/components/Permissions/AuthorizationAccessCheck.tsx (1)

AuthorizationAccessCheck (14-56)

src/context/UserAccessContext/permissions.ts (1)

tables (1-27)

src/components/Settings/CanEditResource.tsx (1)

CanEditResource (88-102)

🔇 Additional comments (3)

src/components/Connections/ConnectionSpecEditor.tsx (3)

53-80: LGTM! Clean read-only mode implementation for CRD-managed resources.

The read-only logic correctly identifies Kubernetes CRD sources and provides clear user feedback through the warning banner while disabling the editor. This prevents accidental modifications to resources that should only be managed through Kubernetes.

Also applies to: 85-85

68-68: LGTM! The min-h-0 additions fix the reported height issue.

Adding min-h-0 to both the container (line 68) and the FormikCodeEditor (line 83) resolves the flexbox height problem where the editor was displaying as a single line. This is the correct fix: flex items default to min-height: auto, which prevents them from shrinking below their content size. Setting min-height: 0 allows the editor to properly participate in flex layout and take full available height.

Also applies to: 83-83

127-145: Same permission wrapping pattern applied to Submit button.

This follows the same double permission wrapping as the Delete button. The same verification questions from the previous comment apply here. Additionally, note that hideSourceLink is not set here (unlike the Delete button wrapper at line 100), which creates an inconsistency that should be verified as intentional or corrected.

src/components/Connections/ConnectionSpecEditor.tsx

moshloop · 2025-12-31T07:37:11Z

@adityathebe When looking at the gemini connection it shows created_at, id, metadata fields shouldn't it only be spec ?
We also need a gemini connection

- opensearch - gemini - loki (with icons) - azure kms - gcp kms

adityathebe · 2026-01-02T12:48:09Z

@moshloop covered missing forms for all other connection types

vercel bot deployed to Preview – aws-preview December 30, 2025 17:23 View deployment

vercel bot deployed to Preview – flanksource-ui December 30, 2025 17:24 View deployment

coderabbitai bot reviewed Dec 30, 2025

View reviewed changes

src/components/Connections/ConnectionSpecEditor.tsx Show resolved Hide resolved

adityathebe added 2 commits January 2, 2026 18:12

fix: connection spec editor read only

f848d47

feat: update connection form

483ad6d

- opensearch - gemini - loki (with icons) - azure kms - gcp kms

adityathebe force-pushed the fix/connection-form branch from 587bce9 to 483ad6d Compare January 2, 2026 12:47

vercel bot deployed to Preview – aws-preview January 2, 2026 12:52 View deployment

vercel bot deployed to Preview – flanksource-ui January 2, 2026 12:53 View deployment

adityathebe changed the title ~~fix: connection form for spec editor~~ fix: add missing form. Cover all connection types Jan 2, 2026

adityathebe requested a review from moshloop January 2, 2026 12:57

moshloop merged commit 8096864 into main Jan 2, 2026
13 of 16 checks passed

moshloop deleted the fix/connection-form branch January 2, 2026 13:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: add missing form. Cover all connection types #2807

fix: add missing form. Cover all connection types #2807

Uh oh!

adityathebe commented Dec 30, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Dec 30, 2025 •

edited

Loading

Uh oh!

netlify bot commented Dec 30, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Dec 30, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

moshloop commented Dec 31, 2025

Uh oh!

adityathebe commented Jan 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: add missing form. Cover all connection types #2807

fix: add missing form. Cover all connection types #2807

Uh oh!

Conversation

adityathebe commented Dec 30, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for flanksource-demo-stable failed. Why did it fail? →

Uh oh!

coderabbitai bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

moshloop commented Dec 31, 2025

Uh oh!

adityathebe commented Jan 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

adityathebe commented Dec 30, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Dec 30, 2025 •

edited

Loading

netlify bot commented Dec 30, 2025 •

edited

Loading

coderabbitai bot commented Dec 30, 2025 •

edited

Loading