Custom table toggle

[PVinaches]

Added a custom table toggle component that will show two modes for endpoint properties table inside the form modal: the standard mode as it is right now and the table mode, to add custom properties with a key-value table.

Once merged these two PRs from camel-catalog repository (one and two), it will also show the custom properties table for components and EIPs such as from, to, toD, poll, that don't have properties configured.

fix: #2968

Summary by CodeRabbit

• New Features

  • Added a toggle control to switch between Standard and Custom display modes when configuring endpoint properties.

• Style

  • Added styling to improve layout and alignment of the new toggle control.

• Tests

  • Added unit tests covering toggle rendering and view-switching scenarios.

• Chores

  • Bumped @kaoto/camel-catalog version constraints.

• Bug Fixes

  • Improved handling of component parameter schemas to preserve existing parameter structure.

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a new CustomTableToggle component and tests; wires it into the custom fields factory for "Endpoint Properties"; tweaks camel-catalog dependency versions; and updates the camel component schema merge to set parameters.properties and parameters.required rather than replacing the parameters container.

Changes

Cohort / File(s)	Summary
Dependency packages/ui/package.json	Bumped @kaoto/camel-catalog peer/dev dependency constraints to include ^0.3.13.
CustomTableToggle component & styles packages/ui/src/components/Visualization/Canvas/Form/fields/CustomTableToggle/CustomTableToggle.tsx, .../CustomTableToggle.scss	Adds CustomTableToggle React component rendering Standard vs Custom views and corresponding SCSS for layout and svg alignment.
Tests packages/ui/src/components/Visualization/Canvas/Form/fields/CustomTableToggle/CustomTableToggle.test.tsx	Adds unit tests covering rendering and toggle behavior (with mocked Kaoto form pieces) including cases with/without schema properties.
Factory integration packages/ui/src/components/Visualization/Canvas/Form/fields/custom-fields-factory.ts	Imports and uses CustomTableToggle for object schemas titled Endpoint Properties.
Schema merge change packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts	When merging catalog component schema, now assigns schema.properties!.parameters.properties and schema.properties!.parameters.required instead of replacing the entire parameters object.

Sequence Diagram

sequenceDiagram
    participant User
    participant CustomTableToggle
    participant SchemaContext
    participant ToggleGroup
    participant ObjectField
    participant ArrayFieldWrapper
    participant PropertiesField

    User->>CustomTableToggle: render form field
    CustomTableToggle->>SchemaContext: read schema (parameters / properties)
    SchemaContext-->>CustomTableToggle: schema (with/without properties)
    CustomTableToggle->>ToggleGroup: init activeView ("standard" if properties exist)
    CustomTableToggle->>ObjectField: render Standard view (if selected)
    ObjectField-->>User: show object inputs

    User->>ToggleGroup: click "Custom"
    ToggleGroup->>CustomTableToggle: notify switch
    CustomTableToggle->>ArrayFieldWrapper: render Custom view
    ArrayFieldWrapper->>PropertiesField: provide properties table
    PropertiesField-->>User: show properties table

    User->>ToggleGroup: click "Standard"
    ToggleGroup->>CustomTableToggle: notify switch
    CustomTableToggle->>ObjectField: re-render Standard view
    ObjectField-->>User: show object inputs

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I toggled between Standard and Custom with glee,
A table for properties now sits next to me,
Schemas merged neatly, no container replaced,
Dependencies updated, the UI's embraced,
Hoppity hops for a cleaner form spree!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Custom table toggle' accurately describes the main change: a new toggle component for switching between Standard and Custom property table views.
Linked Issues check	✅ Passed	The PR successfully implements issue #2968 requirements: adds CustomTableToggle component, updates camel-catalog dependencies, and modifies the schema service to preserve parameters structure while handling component properties.
Out of Scope Changes check	✅ Passed	All changes are within scope: CustomTableToggle component implementation, dependency updates for camel-catalog alignment, schema service adjustments for parameters preservation, and comprehensive test coverage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[PVinaches]

Quality Gate passed

Issues 1 New issue 0 Accepted issues

See analysis details on SonarQube Cloud

The refactor for the issue is in the PR for the editable uri that will be merged before this one.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.41%. Comparing base (379acff) to head (eab15b0).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2972      +/-   ##
==========================================
+ Coverage   89.40%   89.41%   +0.01%     
==========================================
  Files         558      559       +1     
  Lines       20559    20595      +36     
  Branches     4761     4616     -145     
==========================================
+ Hits        18380    18416      +36     
- Misses       2051     2177     +126     
+ Partials      128        2     -126     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts`:
- Around line 389-392: The code assumes schema.properties!.parameters exists and
directly assigns to its fields; guard this by checking for schema.properties and
schema.properties.parameters at runtime (e.g., if (!schema.properties)
schema.properties = {} and if (!schema.properties.parameters) initialize
schema.properties.parameters to a proper object shape) before assigning
actualComponentProperties and componentSchema.required; update the block around
the catalogLookup.definition / componentSchema check that sets
schema.properties!.parameters.properties = actualComponentProperties to perform
these null/undefined checks and create a parameters container when missing to
avoid runtime errors.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In
`@packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts`:
- Around line 389-392: The code uses a non-null assertion
schema.properties!.parameters which can still throw if schema.properties is
undefined; change the defensive check and assignments to use optional chaining
and guarded assignment: verify catalogLookup.definition and componentSchema then
access schema.properties?.parameters (or retrieve const params =
schema.properties?.parameters) and only set params.properties and
params.required when params is truthy, replacing schema.properties!.parameters
with the optional-chained reference to avoid unsafe `!` assertions.