From c5a972cda4f2ef52954af140acef9773a1c66a3d Mon Sep 17 00:00:00 2001 From: Makito Date: Tue, 2 Apr 2024 21:45:34 +0800 Subject: [PATCH] fix(entities-plugins): address feedback --- .../src/components/PluginEntityForm.vue | 14 ++++-- .../src/components/PluginForm.vue | 46 ++++++++++--------- .../src/composables/useSchemas.ts | 43 +++++++++++------ .../entities-plugins/src/locales/en.json | 6 +-- .../entities-plugins/src/types/plugin-form.ts | 4 +- 5 files changed, 67 insertions(+), 46 deletions(-) diff --git a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue b/packages/entities/entities-plugins/src/components/PluginEntityForm.vue index 88ee2dc71e..3bec98702e 100644 --- a/packages/entities/entities-plugins/src/components/PluginEntityForm.vue +++ b/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 { diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue index 298dc9656b..fb608be649 100644 --- a/packages/entities/entities-plugins/src/components/PluginForm.vue +++ b/packages/entities/entities-plugins/src/components/PluginForm.vue @@ -380,15 +380,6 @@ const entityMap = computed((): Record => { // 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: { @@ -396,31 +387,31 @@ const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({ 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 diff --git a/packages/entities/entities-plugins/src/composables/useSchemas.ts b/packages/entities/entities-plugins/src/composables/useSchemas.ts index bcb7efbec7..4c3b7d04bb 100644 --- a/packages/entities/entities-plugins/src/composables/useSchemas.ts +++ b/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'), diff --git a/packages/entities/entities-plugins/src/locales/en.json b/packages/entities/entities-plugins/src/locales/en.json index a18b988f27..0e157ee11d 100644 --- a/packages/entities/entities-plugins/src/locales/en.json +++ b/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": { diff --git a/packages/entities/entities-plugins/src/types/plugin-form.ts b/packages/entities/entities-plugins/src/types/plugin-form.ts index 48c6197d28..7f53cc69a8 100644 --- a/packages/entities/entities-plugins/src/types/plugin-form.ts +++ b/packages/entities/entities-plugins/src/types/plugin-form.ts @@ -101,7 +101,9 @@ export interface DefaultPluginsFormSchema { tags?: PluginTags values?: Array> 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 }