refactor(entities-plugins): rollout plugin UX improvements (#1424)

BREAKING CHANGE: `groupFields` has been removed from the config of PluginForm

packages/entities/entities-plugins/docs/plugin-form.md

@@ -91,12 +91,6 @@ A form component for Plugins.
     - default: `false`
     - *Specific to Kong Manager*. Whether or not to hide the consumer group scope field.
 
-  - `groupFields`:
-    - type: `boolean`
-    - required: `false`
-    - default: `false`
-    - Whether to enable grouping for required and advanced (optional) fields.
-
   - `useRLARedesignedForm`:
     - type: `boolean`
     - required: `false`

packages/entities/entities-plugins/package.json

@@ -78,7 +78,7 @@
     "@kong-ui-public/entities-gateway-services": "workspace:^",
     "@kong-ui-public/entities-routes": "workspace:^",
     "@kong-ui-public/entities-shared": "workspace:^",
-    "@kong-ui-public/forms": "^3.3.2",
+    "@kong-ui-public/forms": "workspace:^",
     "@kong/icons": "^1.9.1",
     "marked": "^12.0.2"
   }

packages/entities/entities-plugins/sandbox/pages/PluginFormPage.vue

@@ -50,7 +50,6 @@ const konnectConfig = ref<KonnectPluginFormConfig>({
   // entityId: '6f1ef200-d3d4-4979-9376-726f2216d90c',
   backRoute: { name: 'select-plugin' },
   cancelRoute: { name: 'home' },
-  groupFields: true,
   useRLARedesignedForm: true,
 })
 
@@ -63,7 +62,6 @@ const kongManagerConfig = ref<KongManagerPluginFormConfig>({
   // entityId: '123-abc-i-lover-cats',
   backRoute: { name: 'select-plugin' },
   cancelRoute: { name: 'home' },
-  groupFields: true,
   useRLARedesignedForm: true,
 })
 

packages/entities/entities-plugins/src/components/PluginEntityForm.vue

@@ -134,8 +134,9 @@ const props = defineProps({
 
 const { axiosInstance } = useAxios(props.config?.axiosRequestConfig)
 
-const { parseSchema } = composables.useSchemas(props.entityMap.focusedEntity?.id || undefined, {
-  groupFields: props.config.groupFields,
+const { parseSchema } = composables.useSchemas({
+  entityId: props.entityMap.focusedEntity?.id || undefined,
+  credential: props.credential,
   useRLARedesignedForm: props.config.useRLARedesignedForm,
 })
 const { convertToDotNotation, unFlattenObject, isObjectEmpty, unsetNullForeignKey } = composables.usePluginHelpers()

packages/entities/entities-plugins/src/components/PluginForm.vue

@@ -254,7 +254,7 @@ const props = defineProps({
 
 const router = useRouter()
 const { i18n: { t } } = composables.useI18n()
-const { customSchemas, typedefs } = composables.useSchemas(undefined, { app: props.config.app })
+const { customSchemas, typedefs } = composables.useSchemas({ app: props.config.app, credential: props.credential })
 const { formatPluginFieldLabel } = composables.usePluginHelpers()
 const { getMessageFromError } = useErrors()
 const { capitalize } = useStringHelpers()

packages/entities/entities-plugins/src/composables/useSchemas.ts

@@ -47,7 +47,23 @@ export interface Schema {
 
 export interface UseSchemasOptions {
   app?: 'konnect' | 'kongManager'
-  groupFields?: boolean
+
+  /**
+   * The id of the entity associated with the plugin.
+   * @defaultValue undefined
+   */
+  entityId?: string
+
+  /**
+   * If the schema is for a plugin credential.
+   * @defaultValue false
+   */
+  credential?: boolean
+
+  /**
+   * Whether to enable the redesigned form for the RLA plugin (KM-136).
+   * @defaultValue false
+   */
   useRLARedesignedForm?: boolean
 }
 
@@ -72,11 +88,7 @@ const sortFieldByOrder = (a: Field, b: Field) => (a.order ?? 0) - (b.order ?? 0)
 const sortNonPinnedFields = (a: Field, b: Field) =>
   sortFieldByNonConfigTakePrecedence(a, b) || sortFieldByOrder(a, b) || a.model.localeCompare(b.model)
 
-/**
- * @param entityId (optional) The id of the entity associated with the plugin
- * @returns
- */
-export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
+export const useSchemas = (options?: UseSchemasOptions) => {
   const { capitalize } = useStringHelpers()
   const { convertToDotNotation } = usePluginHelpers()
   const { i18n: { t } } = useI18n()
@@ -239,12 +251,24 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
     const pluginName = formModel.name
     const metadata = PLUGIN_METADATA[pluginName]
 
-    // KM-18 KM-21 guarded branch
-    // No field grouping for:
-    // - Plugins with custom layouts
-    // - Plugins explicitly marked to use legacy form
-    // - Redesigned RLA form
-    if (!getSharedFormName(pluginName, { useRLARedesignedForm: options?.useRLARedesignedForm }) && options?.groupFields && !metadata?.useLegacyForm) {
+    if (getSharedFormName(pluginName, { useRLARedesignedForm: options?.useRLARedesignedForm }) || metadata?.useLegacyForm || options?.credential) {
+      /**
+       * Do not generate grouped schema when:
+       * - The plugin has a custom layout
+       * - The plugin is explicitly marked to use legacy form
+       * - Rendering a form for a plugin credential
+       */
+
+      // Assume the fields are sorted, unless they have an `order` property
+      formSchema.fields!.sort((a: Record<string, any>, b: Record<string, any>) => {
+        a.order = a.order || 0
+        b.order = b.order || 0
+
+        return a.order - b.order
+      })
+    } else {
+      // Grouped schema generation
+
       const pinnedFields = []
       const defaultVisibleFields = []
       const advancedFields = []
@@ -336,14 +360,6 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
       formSchema = {
         groups: fieldGroups,
       }
-    } else {
-      // Assume the fields are sorted, unless they have an `order` property
-      formSchema.fields!.sort((a: Record<string, any>, b: Record<string, any>) => {
-        a.order = a.order || 0
-        b.order = b.order || 0
-
-        return a.order - b.order
-      })
     }
 
     return {
@@ -438,7 +454,7 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
     schema.type = 'input'
     schema.inputType = 'hidden'
     schema.styleClasses = 'kong-form-hidden-field-wrapper'
-    const foreignKeyId = entityId
+    const foreignKeyId = options?.entityId
 
     formModel[schema.model] = foreignKeyId ? { id: foreignKeyId } : null
   }

packages/entities/entities-plugins/src/types/plugin-form.ts

@@ -36,8 +36,6 @@ export interface BasePluginFormConfig {
   entityId?: string
   /** Whether to hide the consumer group scope field. For Kong Manager OSS, this is true */
   disableConsumerGroupScope?: boolean
-  /** Whether to enable grouping for required and advanced (optional) fields. Default: false */
-  groupFields?: boolean
   /** Whether to use the redesigned form for the RLA plugin. Default: false */
   useRLARedesignedForm?: boolean
   /** Whether to use the horizontal radios in the plugin scoping section. Default: false */