-
Notifications
You must be signed in to change notification settings - Fork 12
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: KM-235 redis form plugin adapation #1873
Closed
Closed
Changes from all commits
Commits
Show all changes
49 commits
Select commit
Hold shift + click to select a range
f1dbedc
feat: entities redis configuration base
2eha0 094f424
feat(redis): redis configuration form [KM-235]
2eha0 af0a2b1
feat: form model
2eha0 4f8bb0e
wip
2eha0 88324c4
wip
2eha0 de69921
feat: redis type
2eha0 c87740d
wip
2eha0 c966ac2
wip
2eha0 97e7cca
wip
2eha0 f7cee50
fix: build
2eha0 a22fa84
fix: build
2eha0 b127b64
feat(redis): list and detail components
2eha0 df1e26c
fix: build
2eha0 448c077
fix: build
2eha0 0ba4179
fix: entity base form support
2eha0 8940b0e
fix: dist size limiting
2eha0 e5fc586
feat(redis): export helpers and constants
2eha0 36e62b2
chore: dist size limit
2eha0 c54a57e
fix: modal demo
2eha0 ebf4526
feat: config card support
2eha0 e408719
docs: add readme files
2eha0 778c340
test: redis configuration form
2eha0 a835f21
test: redis configuration form 2
2eha0 2ef9f24
feat: ee type can be changed to other ee types
2eha0 f8eafe1
feat: linked plugins
2eha0 7ce816f
feat: use swrv to reqeust links
2eha0 53c24ff
fix: compat wrong data structure of links response
2eha0 76947de
fix: view plugin emit params
2eha0 237ceec
test: fields reset logic
2eha0 911d8ad
fix: form submit validation
2eha0 0ff95da
feat: entities redis configuration base
2eha0 36b5bd3
chore(deps): bump @kong/kongponents (#1786)
portikM a3f1f69
feat: entities redis configuration base
2eha0 5f07f7e
feat(redis): list and detail components
2eha0 fd2f5e7
feat(plugin-form): adaption of redis config in all plugins
TT1228 7757971
feat(plugin-form): data cache during partial toggle
TT1228 cdf1f0a
chore: add redis link in plugin config card
TT1228 6ba455b
chore: adaption for gateway preview image
TT1228 512bcde
chore: emit showNewPartialModal event
TT1228 ed35303
feat: enable custom plugin redis config
TT1228 40e8144
chore: prepare FF prop
TT1228 7471e3b
chore: filter by redis type
TT1228 b27ef6f
chore: emit showNewPartialModel from select component
TT1228 d014748
feat: ff support for oidc and rla
TT1228 c1a1cc1
chore: add test for vfg, rla form and oidc form
TT1228 9269847
fix: fix unintentioned passing of _customPlugin
TT1228 9778ebb
chore: remove dependencies of entities-redis-configurations
TT1228 782e2b5
chore: fix plugin partial type filter when editing
TT1228 44b5e8a
chore: add note
TT1228 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,238 @@ | ||
<template> | ||
<div> | ||
<div v-if="isCustomPlugin"> | ||
<KAlert | ||
data-testid="custom-plugin-redis-config-note" | ||
:message="t('redis.custom_plugin.alert')" | ||
/> | ||
<RedisConfigSelect | ||
:default-redis-config-item="selectedRedisConfigItem" | ||
:plugin-redis-fields="field.fields" | ||
:update-redis-model="updateRedisModel" | ||
@show-new-partial-modal="$emit('showNewPartialModal')" | ||
/> | ||
</div> | ||
<KCard | ||
v-else | ||
class="redis-config-card" | ||
data-testid="redis-config-card" | ||
:title="t('redis.title')" | ||
> | ||
<div | ||
class="redis-config-radio-group" | ||
data-testid="redis-config-radio-group" | ||
> | ||
<KRadio | ||
v-model="usePartial" | ||
card | ||
card-orientation="horizontal" | ||
data-testid="shared-redis-config-radio" | ||
:description="t('redis.shared_configuration.description')" | ||
:label="t('redis.shared_configuration.label')" | ||
:selected-value="true" | ||
> | ||
<KBadge appearance="success"> | ||
{{ t('redis.shared_configuration.badge') }} | ||
</KBadge> | ||
</KRadio> | ||
<KRadio | ||
v-model="usePartial" | ||
card | ||
card-orientation="horizontal" | ||
data-testid="dedicated-redis-config-radio" | ||
:description="t('redis.dedicated_configuration.description')" | ||
:label="t('redis.dedicated_configuration.label')" | ||
:selected-value="false" | ||
/> | ||
</div> | ||
<div | ||
v-if="usePartial" | ||
class="shared-redis-config" | ||
> | ||
<RedisConfigSelect | ||
:default-redis-config-item="selectedRedisConfigItem" | ||
:plugin-redis-fields="field.fields" | ||
:redis-type="field.redisType" | ||
:update-redis-model="updateRedisModel" | ||
@show-new-partial-modal="$emit('showNewPartialModal')" | ||
/> | ||
</div> | ||
<div | ||
v-else | ||
class="dedicated-redis-config" | ||
> | ||
<div class="dedicated-redis-config-title"> | ||
{{ t('redis.dedicated_configuration.title') }} | ||
</div> | ||
<component | ||
:is="tag" | ||
> | ||
<template | ||
v-for="field in field.fields" | ||
:key="field.model" | ||
> | ||
<form-group | ||
v-if="fieldVisible(field)" | ||
ref="children" | ||
:errors="errors" | ||
:field="field" | ||
:model="model" | ||
:options="options" | ||
:vfg="vfg" | ||
@model-updated="onModelUpdated" | ||
@refresh-model="onRefreshModel" | ||
@validated="onFieldValidated" | ||
/> | ||
</template> | ||
</component> | ||
</div> | ||
</KCard> | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { computed, onBeforeMount, ref, watch } from 'vue' | ||
import formGroup from './FormGroup.vue' | ||
import RedisConfigSelect from './RedisConfigSelect.vue' | ||
|
||
import isFunction from 'lodash-es/isFunction' | ||
import isNil from 'lodash-es/isNil' | ||
import { createI18n } from '@kong-ui-public/i18n' | ||
import english from '../locales/en.json' | ||
|
||
const props = defineProps({ | ||
tag: { | ||
type: String, | ||
default: 'fieldset', | ||
validator: function(value: string): boolean { | ||
return value.length > 0 | ||
}, | ||
}, | ||
model: { | ||
type: Object, | ||
default: () => undefined, | ||
}, | ||
options: { | ||
type: Object, | ||
required: true, | ||
}, | ||
field: { | ||
type: Object, | ||
required: true, | ||
}, | ||
vfg: { | ||
type: Object, | ||
required: true, | ||
}, | ||
errors: { | ||
type: Array, | ||
default() { | ||
return [] | ||
}, | ||
}, | ||
redisPath: { | ||
type: String, | ||
default: undefined, | ||
required: false, | ||
}, | ||
}) | ||
|
||
const emits = defineEmits<{ | ||
(e: 'modelUpdated', payload: any, schema: any): void, | ||
(e: 'partialToggled', field: string, model: any): void, | ||
(e: 'showNewPartialModal'): void, | ||
(e: 'refreshModel'): void, | ||
(e: 'validated', res: boolean, errors: any[], field: any): void, | ||
}>() | ||
|
||
const { t } = createI18n<typeof english>('en-us', english) | ||
|
||
// if the plugin is custom, show redis configuration selector instead of the whole card | ||
const isCustomPlugin = computed(() => props.field.pluginType === 'custom') | ||
const usePartial = ref(false) | ||
const selectedRedisConfigItem = ref() | ||
|
||
const redisFieldsSaved = ref([] as { model: any; schema: any }[]) | ||
const partialsSaved = ref() | ||
|
||
const fieldVisible = (field: any) => { | ||
if (isFunction(field.visible)) return field.visible.call(this, props.model, field, this) | ||
|
||
if (isNil(field.visible)) return true | ||
|
||
return field.visible | ||
} | ||
|
||
const updateRedisModel = async (val: string | number | undefined) => { | ||
emits('modelUpdated', [{ id: val, path: props.redisPath }], 'partials') | ||
partialsSaved.value = [{ id: val, path: props.redisPath }] | ||
selectedRedisConfigItem.value = val | ||
} | ||
|
||
const onModelUpdated = (model: any, schema: any) => { | ||
redisFieldsSaved.value = { ...redisFieldsSaved.value, [schema]: model } | ||
emits('modelUpdated', model, schema) | ||
} | ||
|
||
const onRefreshModel = () => { | ||
// This is for updating a deeply nested array element | ||
// See `modelUpdated` in `FieldArray.vue` | ||
emits('refreshModel') | ||
} | ||
|
||
// Child field executed validation | ||
const onFieldValidated = (res: boolean, errors: any[], field: any) => { | ||
emits('validated', res, errors, field) | ||
} | ||
|
||
watch(() => usePartial.value, (usePartial) => { | ||
if (usePartial) { | ||
emits('partialToggled', 'redis', { 'partials': partialsSaved.value }) | ||
} else { | ||
emits('partialToggled', 'partials', redisFieldsSaved.value) | ||
} | ||
}) | ||
|
||
// fetch available redis configs under the control plane | ||
onBeforeMount(async () => { | ||
redisFieldsSaved.value = props.field.fields.reduce((acc: Record<string,any>, field: { model: string }) => { | ||
if (Object.keys(props.model!).includes(field.model)) { | ||
acc[field.model] = props.model![field.model] | ||
} | ||
return acc | ||
}, {}) | ||
if (props?.model?.partials?.[0]?.id) { | ||
const selectedPartialId = props.model.partials[0].id | ||
usePartial.value = true | ||
selectedRedisConfigItem.value = selectedPartialId | ||
} | ||
}) | ||
|
||
</script> | ||
|
||
<style lang="scss" scoped> | ||
.redis-config-card { | ||
margin-bottom: $kui-space-60; | ||
|
||
:deep(.form-group:last-child) { | ||
margin-bottom: 0; | ||
} | ||
} | ||
|
||
.dedicated-redis-config { | ||
margin-top: $kui-space-60; | ||
|
||
.dedicated-redis-config-title { | ||
font-size: $kui-font-size-40; | ||
font-weight: $kui-font-weight-bold; | ||
line-height: $kui-line-height-30; | ||
margin-bottom: $kui-space-60; | ||
} | ||
} | ||
|
||
.redis-config-radio-group { | ||
display: flex; | ||
gap: $kui-space-40; | ||
margin-bottom: $kui-space-40; | ||
} | ||
</style> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why
__redis_partial
? It looks very wired. Is there any particular consideration?