feat(entities-plugins): add metering-and-plugin form#3058
feat(entities-plugins): add metering-and-plugin form#3058
Conversation
🔴 PR audit failed. 🔴🔥 No test coverage detected.This PR does not include any test coverage changes, but it modifies source code. Please add appropriate tests to cover the changes made in this PR. If you believe this is a false positive or if there are valid reasons for not including test coverage changes, please request an exemption by adding the |
Preview components from this PR in consuming applicationIn consuming application project install preview versions of shared packages generated by this PR: |
There was a problem hiding this comment.
Pull request overview
Adds a custom free-form UI for the metering-and-billing plugin in entities-plugins, including new shared collapsible UI behavior and i18n strings to support the new form.
Changes:
- Register
metering-and-billingas an experimental free-form and exposeMeteringAndBillingFormfrom the free-form component barrel. - Add
MeteringAndBillingForm.vueimplementing a tailored layout with sectioned/collapsible configuration and field renderer overrides. - Enhance shared free-form components (new
CollapsibleSection,ArrayFieldcollapsible support,BooleanFieldattribute forwarding) and add English locale strings.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/entities/entities-plugins/src/utils/free-form.ts | Adds experimental mapping for metering-and-billing to use the new form component. |
| packages/entities/entities-plugins/src/locales/en.json | Adds i18n strings for metering-and-billing form sections/fields. |
| packages/entities/entities-plugins/src/components/free-form/shared/CollapsibleSection.vue | New shared collapsible section wrapper used by the metering/billing form. |
| packages/entities/entities-plugins/src/components/free-form/shared/BooleanField.vue | Forwards non-prop attributes to KCheckbox (enables label/description overrides). |
| packages/entities/entities-plugins/src/components/free-form/shared/ArrayField.vue | Adds optional collapsible behavior and related UI/structure changes. |
| packages/entities/entities-plugins/src/components/free-form/MeteringAndBilling/MeteringAndBillingForm.vue | New custom form implementation for metering-and-billing plugin. |
| packages/entities/entities-plugins/src/components/free-form/MeteringAndBilling/index.ts | Barrel export for the new form. |
| packages/entities/entities-plugins/src/components/free-form/index.ts | Exposes MeteringAndBillingForm for dynamic free-form resolution. |
| packages/entities/entities-plugins/sandbox/pages/PluginFormPage.vue | Enables the experimental free-form for metering-and-billing in the sandbox. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...ties/entities-plugins/src/components/free-form/MeteringAndBilling/MeteringAndBillingForm.vue
Show resolved
Hide resolved
packages/entities/entities-plugins/src/components/free-form/shared/CollapsibleSection.vue
Show resolved
Hide resolved
| <div class="ff-array-field-header-toggle"> | ||
| <button | ||
| v-if="collapsible" | ||
| class="ff-array-field-toggle-btn" | ||
| type="button" | ||
| @click.prevent.stop="expanded = !expanded" | ||
| > | ||
| <ChevronRightIcon | ||
| class="ff-array-field-toggle-btn-trigger-icon" | ||
| :class="{ 'collapse-expanded': expanded }" | ||
| decorative | ||
| :size="KUI_ICON_SIZE_30" | ||
| /> | ||
| </button> |
There was a problem hiding this comment.
The optional ArrayField collapse toggle is icon-only and currently has no accessible name/state. Please add aria-expanded bound to expanded, and either an aria-label or aria-labelledby pointing at the field label; aria-controls for the content region would also improve screen reader behavior.
Summary
Add custom metering-and-plugin form