fix(entities-plugins): address feedback

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

@@ -644,9 +644,17 @@ onBeforeMount(() => {
   }
 
   :deep(.vue-form-generator) {
-    .k-collapse:not(:last-child) {
-      border-bottom: $kui-border-width-10 solid $kui-color-border;
-      margin-bottom: $kui-space-80;
+    > fieldset {
+      margin-top: $kui-space-40;
+
+      .form-group:last-child {
+        margin-bottom: $kui-space-60;
+      }
+    }
+
+    .k-collapse.root-level-collapse {
+      border-top: $kui-border-width-10 solid $kui-color-border;
+      padding-top: $kui-space-80;
     }
 
     fieldset {

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

@@ -380,47 +380,38 @@ const entityMap = computed((): Record<string, PluginEntityInfo> => {
 
 // Configuration for globally shared fields
 const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({
-  enabled: {
-    type: 'switch',
-    model: 'enabled',
-    label: t('plugins.form.fields.enabled.label'),
-    textOn: t('plugins.form.fields.enabled.on_text'),
-    textOff: t('plugins.form.fields.enabled.off_text'),
-    styleClasses: 'field-switch bottom-border hide-label',
-    default: true,
-  },
   // this is a required field that the user cannot set, it's always the name of the plugin
   // ex. 'acl'
   name: {
     default: props.pluginType,
     type: 'input',
     inputType: 'hidden',
     styleClasses: 'd-none hidden-field',
+    pinned: true, // does not matter because it's hidden
+  },
+  enabled: {
+    type: 'switch',
+    model: 'enabled',
+    label: t('plugins.form.fields.enabled.label'),
+    textOn: t('plugins.form.fields.enabled.on_text'),
+    textOff: t('plugins.form.fields.enabled.off_text'),
+    styleClasses: 'field-switch hide-label',
+    default: true,
+    pinned: true,
   },
   // plugin scoping
   selectionGroup: {
     type: !props.hideScopeSelection ? 'selectionGroup' : props.hideScopeSelection || (formType.value === EntityBaseFormType.Create && props.config.entityId) ? 'foreign' : 'selectionGroup',
     inputType: 'hidden',
-    styleClasses: 'bottom-border hide-label',
+    styleClasses: 'hide-label',
     fields: [
       {
         label: t('plugins.form.scoping.global.label'),
         description: t('plugins.form.scoping.global.help'),
       },
     ],
+    pinned: true,
   },
-  // Support is feature flagged in Konnect
-  ...((props.config.app === 'kongManager' || props.useCustomNamesForPlugin) && {
-    instance_name: {
-      default: '',
-      type: 'input',
-      label: t('plugins.form.fields.instance_name.label'),
-      inputType: 'text',
-      help: t('plugins.form.fields.instance_name.help'),
-    },
-  }),
-
-  tags: typedefs.tags as DefaultPluginsFormSchema,
   protocols: {
     id: 'protocols',
     default: [],
@@ -443,6 +434,17 @@ const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({
       { label: 'wss', value: 'wss' },
     ],
   },
+  // Support is feature flagged in Konnect
+  ...((props.config.app === 'kongManager' || props.useCustomNamesForPlugin) && {
+    instance_name: {
+      default: '',
+      type: 'input',
+      label: t('plugins.form.fields.instance_name.label'),
+      inputType: 'text',
+      help: t('plugins.form.fields.instance_name.help'),
+    },
+  }),
+  tags: typedefs.tags as DefaultPluginsFormSchema,
 })
 
 // This is specifically used for credential plugins and portal developer plugins

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

@@ -49,9 +49,26 @@ export interface UseSchemasOptions {
   groupFields?: boolean
 }
 
+/** Sorts non-config fields and place them at the top */
+const sortFieldByNonConfigTakePrecedence = (a: Field, b: Field) => {
+  const aIsConfig = a.model.startsWith('config-')
+  const bIsConfig = b.model.startsWith('config-')
+
+  if (aIsConfig && !bIsConfig) {
+    return 1
+  }
+
+  if (!aIsConfig && bIsConfig) {
+    return -1
+  }
+
+  return 0
+}
+
 const sortFieldByOrder = (a: Field, b: Field) => (a.order ?? 0) - (b.order ?? 0)
 
-const sortFieldByOrderAndModel = (a: Field, b: Field) => sortFieldByOrder(a, b) || a.model.localeCompare(b.model)
+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
@@ -220,8 +237,8 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
     if (!getSharedFormName(pluginName) && options?.groupFields) {
       const metadata = PLUGIN_METADATA[pluginName]
 
-      const generalFields = []
-      const hoistedFields = []
+      const pinnedFields = []
+      const defaultVisibleFields = []
       const advancedFields = []
 
       // Transform the any of field sets into a flatten set for fast lookup
@@ -251,8 +268,8 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
 
       for (const field of formSchema.fields!) {
         // Fields that don't start with 'config-' are considered common fields
-        if (!field.model.startsWith('config-')) {
-          generalFields.push(field)
+        if (field.pinned) {
+          pinnedFields.push(field)
           continue
         }
 
@@ -263,7 +280,7 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
           if (ruledFields[field.model] === false) {
             ruledFields[field.model] = true // Mark this as visited
           }
-          hoistedFields.push(field)
+          defaultVisibleFields.push(field)
           continue
         }
 
@@ -281,24 +298,20 @@ export const useSchemas = (entityId?: string, options?: UseSchemasOptions) => {
 
       const fieldGroups: Group[] = []
 
-      if (generalFields.length > 0) {
+      if (pinnedFields.length > 0) {
         fieldGroups.push({
-          fields: generalFields.sort(sortFieldByOrder),
-          collapsible: {
-            title: t('plugins.form.grouping.general_information.title'),
-            description: t('plugins.form.grouping.general_information.description'),
-          },
+          fields: pinnedFields.sort(sortFieldByOrder),
         })
       }
 
-      if (hoistedFields.length > 0 || advancedFields.length > 0) {
+      if (defaultVisibleFields.length > 0 || advancedFields.length > 0) {
         fieldGroups.push({
-          fields: hoistedFields.sort(sortFieldByOrderAndModel),
+          fields: defaultVisibleFields.sort(sortNonPinnedFields),
           collapsible: {
             title: t('plugins.form.grouping.plugin_configuration.title'),
             description: t('plugins.form.grouping.plugin_configuration.description'),
             nestedCollapsible: {
-              fields: advancedFields.sort(sortFieldByOrderAndModel),
+              fields: advancedFields.sort(sortNonPinnedFields),
               triggerLabel: {
                 expand: t('plugins.form.grouping.advanced_parameters.view'),
                 collapse: t('plugins.form.grouping.advanced_parameters.hide'),

packages/entities/entities-plugins/src/locales/en.json

@@ -531,13 +531,9 @@
         }
       },
       "grouping": {
-        "general_information": {
-          "title": "General Configuration",
-          "description": "Name, scope, tags, and essential parameters for this plugin."
-        },
         "plugin_configuration": {
           "title": "Plugin Configuration",
-          "description": "Plugin-specific parameters for this plugin. View advanced parameters for extended configuration.",
+          "description": "Configuration parameters for this plugin. View advanced parameters for extended configuration.",
           "empty": "This plugin does not have required parameters."
         },
         "advanced_parameters": {

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

@@ -101,7 +101,9 @@ export interface DefaultPluginsFormSchema {
   tags?: PluginTags
   values?: Array<Record<string, string | number | boolean>>
   placeholder?: string
-  required?: boolean,
+  required?: boolean
+  /** Whether the field is pinned before the Plugin Configuration. FE only */
+  pinned?: boolean
   // Will be fixed in KHCP-6469
   getColumnFields?: (schema: unknown) => object
 }