diff --git a/packages/core/forms/src/generator/FormGenerator.vue b/packages/core/forms/src/generator/FormGenerator.vue index 8a1347b2b7..14f7e969db 100644 --- a/packages/core/forms/src/generator/FormGenerator.vue +++ b/packages/core/forms/src/generator/FormGenerator.vue @@ -401,6 +401,11 @@ export default { } } } + + .kong-form-new-element-button-label { + margin-bottom: $kui-space-80!important; + margin-top: $kui-space-80!important; + } } // fieldset // stylelint-disable no-duplicate-selectors diff --git a/packages/core/forms/src/generator/FormGroup.vue b/packages/core/forms/src/generator/FormGroup.vue index 2b28cfe03c..139320316e 100644 --- a/packages/core/forms/src/generator/FormGroup.vue +++ b/packages/core/forms/src/generator/FormGroup.vue @@ -284,6 +284,10 @@ $errorColor: #f00; .form-group-label { display: flex; justify-content: space-between; + + :deep(.k-tooltip p) { + margin: 0; + } } .icon-wrapper { diff --git a/packages/core/forms/src/generator/fields/advanced/FieldKeyValuePairs.vue b/packages/core/forms/src/generator/fields/advanced/FieldKeyValuePairs.vue new file mode 100644 index 0000000000..ea34d92737 --- /dev/null +++ b/packages/core/forms/src/generator/fields/advanced/FieldKeyValuePairs.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/packages/core/forms/src/generator/utils/fieldsLoader.ts b/packages/core/forms/src/generator/utils/fieldsLoader.ts index 64606cd2dd..dd4322077f 100644 --- a/packages/core/forms/src/generator/utils/fieldsLoader.ts +++ b/packages/core/forms/src/generator/utils/fieldsLoader.ts @@ -32,3 +32,4 @@ export { default as FieldSelectionGroup } from '../fields/advanced/FieldSelectio export { default as FieldRadio } from '../fields/advanced/FieldRadio.vue' export { default as FieldArrayCardContainer } from '../fields/advanced/FieldArrayCardContainer.vue' export { default as FieldMultiselect } from '../fields/advanced/FieldMultiselect.vue' +export { default as FieldKeyValuePairs } from '../fields/advanced/FieldKeyValuePairs.vue' diff --git a/packages/entities/entities-plugins/src/components/PluginForm.vue b/packages/entities/entities-plugins/src/components/PluginForm.vue index 44d815ded1..edd5684f22 100644 --- a/packages/entities/entities-plugins/src/components/PluginForm.vue +++ b/packages/entities/entities-plugins/src/components/PluginForm.vue @@ -17,16 +17,6 @@ - - - - { return endpoints.form[props.config.app].edit }) -// non-editable plugin type. They shouldn't be able to get to this unless they manually -// type in the URL -const isDisabled = computed((): boolean => { - const currentPlugin = Object.keys(customSchemas).find((key: string) => key === props.pluginType) - - return currentPlugin ? (customSchemas[currentPlugin as keyof typeof customSchemas] as Record)?.configurationDisabled : false -}) - const entityMap = computed((): Record => { const consumerId = (props.config.entityType === 'consumers' && props.config.entityId) || record.value?.consumer?.id const consumerGroupId = (props.config.entityType === 'consumer_groups' && props.config.entityId) || record.value?.consumer_group?.id diff --git a/packages/entities/entities-plugins/src/composables/plugin-schemas/RouteByHeader.ts b/packages/entities/entities-plugins/src/composables/plugin-schemas/RouteByHeader.ts new file mode 100644 index 0000000000..b0985c00c5 --- /dev/null +++ b/packages/entities/entities-plugins/src/composables/plugin-schemas/RouteByHeader.ts @@ -0,0 +1,31 @@ +import type { RouteByHeaderSchema } from '../../types/plugins/route-by-header' +import { arrayCardContainerFieldSchema } from './ArrayCardContainerFields' + +export const routeByHeaderSchema: RouteByHeaderSchema = { + 'config-rules': { + ...arrayCardContainerFieldSchema, + newElementButtonLabel: '+ Add Rule', + items: { + type: 'object', + schema: { + fields: [{ + label: 'Upstream Name', + model: 'upstream_name', + type: 'input', + help: 'Target hostname where traffic will be routed in case of condition match', + placeholder: 'Hostname', + inputType: 'text', + }, { + label: 'Condition', + model: 'condition', + type: 'keyValuePairs', + help: 'List of headers name and value pairs', + newElementButtonLabelClasses: 'kong-form-new-element-button-label', + newElementButtonLabel: '+ Add Condition', + keyInputPlaceholder: 'Header name', + valueInputPlaceholder: 'Header value', + }], + }, + }, + }, +} diff --git a/packages/entities/entities-plugins/src/composables/useSchemas.ts b/packages/entities/entities-plugins/src/composables/useSchemas.ts index 2383e2ab3c..2b4430de3c 100644 --- a/packages/entities/entities-plugins/src/composables/useSchemas.ts +++ b/packages/entities/entities-plugins/src/composables/useSchemas.ts @@ -10,6 +10,7 @@ import { mockingSchema } from './plugin-schemas/Mocking' import { preFunctionSchema } from './plugin-schemas/PreFunction' import { rateLimitingSchema } from './plugin-schemas/RateLimiting' import { requestTransformerAdvancedSchema } from './plugin-schemas/RequestTransformerAdvanced' +import { routeByHeaderSchema } from './plugin-schemas/RouteByHeader' import { graphqlRateLimitingAdvancedSchema } from './plugin-schemas/GraphQLRateLimitingAdvanced' import { statsDSchema } from './plugin-schemas/StatsD' import { ArrayStringFieldSchema } from './plugin-schemas/ArrayStringFieldSchema' @@ -63,7 +64,7 @@ export const useSchemas = (entityId?: string) => { }, 'route-by-header': { - configurationDisabled: true, + ...routeByHeaderSchema, }, mocking: { diff --git a/packages/entities/entities-plugins/src/locales/en.json b/packages/entities/entities-plugins/src/locales/en.json index d064621ba6..7f31127f8f 100644 --- a/packages/entities/entities-plugins/src/locales/en.json +++ b/packages/entities/entities-plugins/src/locales/en.json @@ -447,7 +447,6 @@ } }, "form": { - "disabled_warning": "This plugin must be configured using the Kong Admin API. Please see the documentation.", "no_selection": "No selection...", "fields": { "enabled": { diff --git a/packages/entities/entities-plugins/src/types/plugin-form.ts b/packages/entities/entities-plugins/src/types/plugin-form.ts index b08642854a..82dad865dc 100644 --- a/packages/entities/entities-plugins/src/types/plugin-form.ts +++ b/packages/entities/entities-plugins/src/types/plugin-form.ts @@ -10,6 +10,7 @@ import type { StatsDAdvancedSchema } from './plugins/stats-d-advanced' import type { KafkaSchema } from './plugins/kafka-schema' import type { UpstreamTlsSchema } from './plugins/upstream-tls' import type { RateLimitingSchema } from './plugins/rate-limiting' +import type { RouteByHeaderSchema } from './plugins/route-by-header' import type { GraphQLRateLimitingAdvancedSchema } from './plugins/graphql-rate-limiting-advanced' export interface BasePluginSelectConfig { @@ -188,7 +189,7 @@ export interface CustomSchemas { mocking: MockingSchema 'rate-limiting': RateLimitingSchema 'rate-limiting-advanced': RateLimitingSchema - 'route-by-header': { configurationDisabled: boolean } & CommonSchemaFields + 'route-by-header': RouteByHeaderSchema 'graphql-rate-limiting-advanced': GraphQLRateLimitingAdvancedSchema 'response-ratelimiting': RateLimitingSchema 'pre-function': CommonSchemaFields & Record diff --git a/packages/entities/entities-plugins/src/types/plugins/route-by-header.d.ts b/packages/entities/entities-plugins/src/types/plugins/route-by-header.d.ts new file mode 100644 index 0000000000..51e123b0a8 --- /dev/null +++ b/packages/entities/entities-plugins/src/types/plugins/route-by-header.d.ts @@ -0,0 +1,27 @@ +import type { Field, ItemsSchema, CommonSchemaFields } from '../../types/plugins/shared' + +type FieldForKeyValuePairs = Field & { + newElementButtonLabelClasses?: string + newElementButtonLabel?: string + keyInputPlaceholder?: string + valueInputPlaceholder?: string +} + +type ItemsSchemaForKeyValuePairs = Omit & { + schema: { + fields: FieldForKeyValuePairs[] + } +} + +export interface RouteByHeaderSchema extends CommonSchemaFields { + 'config-rules': { + type: string + showRemoveButton: boolean + newElementButtonLabelClasses: string + itemContainerComponent: string + fieldClasses: string + + newElementButtonLabel: string + items: ItemsSchemaForKeyValuePairs + } +} diff --git a/packages/entities/entities-plugins/src/types/plugins/shared.d.ts b/packages/entities/entities-plugins/src/types/plugins/shared.d.ts index 79dff2ea8a..2466f03ff8 100644 --- a/packages/entities/entities-plugins/src/types/plugins/shared.d.ts +++ b/packages/entities/entities-plugins/src/types/plugins/shared.d.ts @@ -7,6 +7,7 @@ interface Field { default?: string, placeholder?: string, hint?: string, + help?: string, inputType?: 'text' | 'number' }