fix(redis): config card changes for add-ons [khcp-19716] by aanchalm01 · Pull Request #3079 · Kong/public-ui-components

aanchalm01 · 2026-03-31T19:09:40Z

Summary

Addresses: https://konghq.atlassian.net/browse/KHCP-19716

Figma: https://www.figma.com/design/4aYQP8GdNbPAnrEq0TWxXQ/DCGW--Konnect-managed-cache?node-id=421-33880&t=t7njgqmnUSFmxUGc-0

FF: khcp-19709-konnect-managed-redis

This PR introduces changes to Redis Configuration UI. The Configuration tab for Konnect managed Redis shows the managed cache config info as well as partial config info now. No changes for legacy Konnect or Kong Manager code.

Demo:

Config-tab-content.mov

Copilot

Pull request overview

Updates the Redis Configuration detail UI to support Konnect Cloud Gateways “managed cache” add-ons by showing a managed cache configuration card and (when available) a collapsible nested partial configuration card, aligning with the new Konnect-managed Redis experience.

Changes:

Extend EntityBaseConfigCard to support an optional #after-fields slot area and a formatsToHide prop to prune format dropdown entries (while always keeping Structured).
Add Cloud Gateways add-on parsing/display/schema/API helpers to normalize add-on payloads and render a stable managed-cache config card.
Update RedisConfigurationConfigCard to resolve route IDs as add-on vs partial and render the managed layout with optional partial collapse; add sandbox + locale updates.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
packages/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue	Adds `formatsToHide` filtering and an `after-fields` block slot area under the grid; adjusts slot pass-through and styling.
packages/entities/entities-redis-configurations/src/types/redis-configuration-form.ts	Adds `isCloudGateway` flag to form config typing.
packages/entities/entities-redis-configurations/src/types/redis-configuration-config.ts	Extends Konnect entity config typing with managed-Redis + Cloud Gateway flags and add-on API base/geo fields.
packages/entities/entities-redis-configurations/src/types/cloud-gateways-add-on.ts	Introduces types for Cloud Gateways add-on API payloads (managed cache add-on).
packages/entities/entities-redis-configurations/src/locales/en.json	Adds i18n strings for managed cache/partial section labels and collapse UI.
packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on.ts	Barrel export for managed-cache add-on helper modules.
packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-parse.ts	Runtime-safe parsing/type-guard helpers for add-on payloads and cache_config_id extraction.
packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.ts	Flattens/normalizes add-on payloads into display-ready records (incl. cloud-auth stripping/grouping).
packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.spec.ts	Adds a unit test validating display shaping + allowlist picking for a managed add-on payload.
packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-api.ts	Adds API helpers to fetch add-ons and linked partials for list/detail flows.
packages/entities/entities-redis-configurations/src/helpers/managed-add-on-config-schema.ts	Builds an allowlisted, ordered config schema for the managed add-on card (incl. runtime Json vs JsonArray for DPG).
packages/entities/entities-redis-configurations/src/helpers.ts	Adds `isKonnectManagedRedisEnabled` helper gating managed Konnect behavior by FF + Cloud Gateway flag.
packages/entities/entities-redis-configurations/src/composables/useManagedCacheAddOnDisplaySchema.ts	Adds composable to rebuild managed add-on schema from fetched display records.
packages/entities/entities-redis-configurations/src/composables/index.ts	Exports the new composable for Cypress stubbing.
packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue	Implements managed Konnect detail resolver + managed add-on card rendering + nested partial collapse; hides YAML where needed.
packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue	Updates sandbox config to include the Cloud Gateway flag.
packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationDetail.vue	Updates sandbox config to demonstrate Cloud Gateways base URL + managed flags.
packages/entities/entities-redis-configurations/package.json	Raises dist size checker limit to accommodate added functionality.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

...ges/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue

packages/entities/entities-redis-configurations/src/helpers.ts

packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.ts

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

...ages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.spec.ts

packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

TT1228 · 2026-04-01T03:48:24Z

packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.ts

+  }
+  return null
+}
+


Non-blocking: could we use these util functions exported from lodash?

I tried, but I am running into an issue with lodash-es - 4.18.1( ERR_PNPM_NO_MATURE_MATCHING_VERSION Version 4.18.1 (released 44 hours ago) of lodash-es does not meet the minimumReleaseAge constraint)

@aanchalm01 can you try this again now that those restrictions have been removed from the repo?

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

TT1228 · 2026-04-01T09:58:53Z

By the way, do we have a Konnect preview PR on this change? Since we're introducing changes in EntityBaseConfigCard, a preview PR to run MFE tests on modified EntityBaseConfigCard and a place to see adoption of this PR might be helpful.

aanchalm01 · 2026-04-03T13:38:36Z

By the way, do we have a Konnect preview PR on this change? Since we're introducing changes in EntityBaseConfigCard, a preview PR to run MFE tests on modified EntityBaseConfigCard and a place to see adoption of this PR might be helpful.

Yes, here's the consuming app PR: https://github.com/kong-konnect/konnect-ui-apps/pull/10823

kaiarrowood

There are testable changes to existing components and many new util helpers. Please add test coverage.

packages/entities/entities-redis-configurations/sandbox/pages/RedisConfigurationFormPage.vue

packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-parse.ts

...ges/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

kaiarrowood · 2026-04-06T14:32:16Z

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

+  const payload = { ...entry }
+
+  delete payload.name


Suggested change

const payload = { ...entry }

delete payload.name

const { payload, _name } = entry

nit: alternative

payload is not a field on entry, so const { payload, _name } = entry is not valid

Sorry that was half-baked. I meant

const { name, ...payload } = entry; // put everything except for name in payload

kaiarrowood · 2026-04-06T14:33:01Z

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

+const emitFetchError = (error: AxiosError): void => emit('fetch:error', error)
+const emitLoading = (isLoading: boolean): void => emit('loading', isLoading)


q: what is the purpose of these wrappers? Why not just call emit directly?

They are used in three places, so wrappers are there to keep things DRY.

But there is no extra logic in the wrapper so you aren't saving on any repetition?

replaced with same inline emit at three places.

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue

kaiarrowood · 2026-04-07T18:39:02Z

packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-api.ts

+const isPlainObject = (value: unknown): value is AddOnRecord =>
+  value !== null && typeof value === 'object' && !Array.isArray(value)
+
+const extractListMeta = (payload: unknown): { items: unknown[], totalPages?: number } => {
+  if (!isPlainObject(payload)) return { items: [] }
+
+  const items = Array.isArray(payload.data) ? payload.data as unknown[] : []
+  if (!isPlainObject(payload.meta) || !isPlainObject(payload.meta.page)) return { items }


q: why do you need the checks for isPlainObject? Why would the type be unknown?

I used unknown/runtime narrowing because Axios doesn’t type data as the list shape, so we either had to guard before property access or assert.The guards avoided casts while still handling normal TS object edge cases. Updated the code.

kaiarrowood · 2026-04-07T18:41:42Z

packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.ts

+  isPlainObject(value) && Object.keys(value).length > 0
+
+// Coerce object/ JSON string to a plain record, otherwise null
+const toPlainObject = (value: AddOnValue | undefined): AddOnRecord | null => {


Help me understand why you need these type helpers? Why are we doing so much manipulation of the API response?

Most of that code is display normalization (shape/cloning for the card), not a second pass over the list/detail API validation. If the spread of helpers feels noisy, I can collapse it into one big build display model function so there’s a single place that owns that behavior.

kaiarrowood · 2026-04-07T18:45:16Z

...ges/entities/entities-shared/src/components/entity-base-config-card/EntityBaseConfigCard.vue

Please add test coverage around the changes to this file

kaiarrowood · 2026-04-07T18:52:09Z

packages/entities/entities-redis-configurations/src/helpers/managed-cache-add-on-display.ts

This file is super dense and hard to read, please try to use lodash helpers where possible and make sure you are adding comments throughout the functions.

kongponents-bot · 2026-04-08T03:15:43Z

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/monaco-editor@pr-3079
@kong-ui-public/entities-shared@pr-3079
@kong-ui-public/dashboard-renderer@pr-3079
@kong-ui-public/documentation@pr-3079
@kong-ui-public/forms@pr-3079
@kong-ui-public/entities-certificates@pr-3079
@kong-ui-public/entities-consumer-credentials@pr-3079
@kong-ui-public/entities-consumer-groups@pr-3079
@kong-ui-public/entities-consumers@pr-3079
@kong-ui-public/entities-data-plane-nodes@pr-3079
@kong-ui-public/entities-gateway-services@pr-3079
@kong-ui-public/entities-key-sets@pr-3079
@kong-ui-public/entities-keys@pr-3079
@kong-ui-public/entities-snis@pr-3079
@kong-ui-public/entities-upstreams-targets@pr-3079
@kong-ui-public/entities-vaults@pr-3079
@kong-ui-public/expressions@pr-3079
@kong-ui-public/entities-redis-configurations@pr-3079
@kong-ui-public/entities-routes@pr-3079
@kong-ui-public/entities-plugins@pr-3079

aanchalm01 self-assigned this Mar 31, 2026

aanchalm01 requested a review from Copilot April 1, 2026 00:07

aanchalm01 marked this pull request as ready for review April 1, 2026 00:07

aanchalm01 requested review from a team and kongponents-bot as code owners April 1, 2026 00:07

Copilot started reviewing on behalf of aanchalm01 April 1, 2026 00:07 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

aanchalm01 force-pushed the fix/khcp-19716-managed-redis-configuration-page-updates branch from 2180fc9 to f317fd9 Compare April 1, 2026 01:46

TT1228 reviewed Apr 1, 2026

View reviewed changes

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue Outdated Show resolved Hide resolved

TT1228 reviewed Apr 1, 2026

View reviewed changes

packages/entities/entities-redis-configurations/src/components/RedisConfigurationConfigCard.vue Outdated Show resolved Hide resolved

aanchalm01 force-pushed the fix/khcp-19716-managed-redis-configuration-page-updates branch 4 times, most recently from 6882db8 to a504c51 Compare April 3, 2026 17:43

kaiarrowood requested changes Apr 6, 2026

View reviewed changes

aanchalm01 added 7 commits April 6, 2026 15:29

fix(redis): config card changes for add-ons

de2f0f8

fix(*): stylelint

e7997d0

fix(*): increase errorLimit

d359344

fix(*): partial option

b42514e

fix(*): styling

448e6fe

fix(*): event payload change

ac25baa

fix(*): config card feedback

6e68b5d

aanchalm01 added 2 commits April 6, 2026 15:29

fix(*): feedback

5f192c3

fix(*): dpg style

b294954

aanchalm01 force-pushed the fix/khcp-19716-managed-redis-configuration-page-updates branch from 212ff4d to b294954 Compare April 6, 2026 19:29

aanchalm01 added 2 commits April 6, 2026 17:32

fix(*): feeedback

5019c90

fix(*): test coverage

0a1f28a

aanchalm01 force-pushed the fix/khcp-19716-managed-redis-configuration-page-updates branch from fa77d53 to 0a1f28a Compare April 7, 2026 15:58

kaiarrowood reviewed Apr 7, 2026

View reviewed changes

aanchalm01 added 4 commits April 7, 2026 21:37

fix(*): feedback

bd4c19c

fix(*): feedback

88c2f82

fix(*): lint in untouched file

ae0618d

fix(*): lint in untouched file

8319164

aanchalm01 force-pushed the fix/khcp-19716-managed-redis-configuration-page-updates branch from 89e3e5b to 8319164 Compare April 8, 2026 02:41

aanchalm01 requested review from ValeryG, adamdehaven and jillztom as code owners April 8, 2026 02:41

fix(*): package

6490252

		const emitFetchError = (error: AxiosError): void => emit('fetch:error', error)
		const emitLoading = (isLoading: boolean): void => emit('loading', isLoading)

Conversation

aanchalm01 commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

TT1228 commented Apr 1, 2026

Uh oh!

aanchalm01 commented Apr 3, 2026

Uh oh!

kaiarrowood left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kongponents-bot commented Apr 8, 2026

Preview components from this PR in consuming application

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

aanchalm01 commented Mar 31, 2026 •

edited

Loading