fix(entities-routes): invisible expressions editor sometimes (#1814)

* fix(entities-routes): invisible expressions editor sometimes * fix: use watch instead of the implicit reactivity
Kong · Nov 26, 2024 · 89e091a · 89e091a
1 parent 408f53c
commit 89e091a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/entities/entities-routes/src/components/RouteForm.vue b/packages/entities/entities-routes/src/components/RouteForm.vue
@@ -660,7 +660,7 @@ const state = reactive<RouteState<BaseRouteStateFields>>({
     tags: '',
     service_id: '',
     ...{
-      ...(!props.routeId && { paths: [''] }),
+      ...(!props.routeId && { paths: [''] }), // We don't expect this prop to be updated throughout the lifecycle of the component
       regex_priority: 0,
       path_handling: 'v0',
     } as TraditionalRouteStateFields,
@@ -673,6 +673,10 @@ const state = reactive<RouteState<BaseRouteStateFields>>({
   errorMessage: '',
 })
 
+watch(() => props.routeFlavors, (routeFlavors) => {
+  state.routeFlavors = routeFlavors
+})
+
 const exprEditorProtocol = computed(() => state.fields.protocols.split(',')[0])
 
 const customMethods = ref<string[]>([''])

diff --git a/packages/entities/entities-routes/src/types/route-form.ts b/packages/entities/entities-routes/src/types/route-form.ts
@@ -1,6 +1,6 @@
 import type { BaseFormConfig, KongManagerBaseFormConfig, KonnectBaseFormConfig } from '@kong-ui-public/entities-shared'
 import type { RouteLocationRaw } from 'vue-router'
-import type { Methods, Method } from './method-badge'
+import type { Method, Methods } from './method-badge'
 
 export enum RouteFlavor {
   TRADITIONAL = 'traditional', // includes traditional_compatible