From 55d292956643ebc00145fe30e0d43b9a6d8bd09e Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Fri, 19 Apr 2024 11:57:51 +0800
Subject: [PATCH] feat(*): expressions routes support [KM-20] (#1329)

* feat(*): expressions routes support

* feat(entities-routes): i18n texts and tooltips

* feat(entities-routes): reduce dist size upper limit

* Revert "feat(entities-routes): reduce dist size upper limit"

This reverts commit 1dd5cd834b42b0d5ed3e1d1fed7457524ce75a06.

* feat(entities-routes): use design tokens in style

* feat(*): tab hash, expr column, tests, slots, and slide-outs

Squashed from:

fix(entities-routes): tabs hash

feat(*): add prop to control expression column

fix(entities-routes): fix i18n and tab hashes

fix(entities-routes): tests

feat(entities-routes): slots

feat(entities-routes): expose more to the slot

feat(entities-routes): add setter func to slot

feat(entities-routes): adjust shape

fix(entities-routes): fix config slide out

* fix(*): remove umd, add tooltips for expr, fix tooltip

* fix(entities-routes): types
---
 packages/core/expressions/package.json        |    6 +-
 .../src/components/ExpressionsEditor.vue      |   10 +-
 packages/core/expressions/src/index.ts        |    2 +-
 packages/core/expressions/src/monaco.ts       |    5 +-
 packages/core/expressions/src/schema.ts       |   27 +-
 packages/core/expressions/vite.config.ts      |    3 +-
 .../entities-routes/docs/route-form.md        |   56 +-
 .../entities-routes/docs/route-list.md        |   14 +-
 .../entities-routes/fixtures/mockData.ts      |   72 +-
 .../entities/entities-routes/package.json     |   11 +-
 .../sandbox/pages/RouteFormPage.vue           |   64 +-
 .../sandbox/pages/RouteListPage.vue           |   57 +-
 .../src/components/RouteForm.cy.ts            | 2157 +++++++++++------
 .../src/components/RouteForm.vue              | 1198 +++++----
 .../src/components/RouteFormConfigTabs.vue    |  122 +
 .../components/RouteFormExpressionsEditor.vue |   24 +
 .../RouteFormExpressionsEditorLoader.vue      |   71 +
 .../src/components/RouteList.cy.ts            |  108 +-
 .../src/components/RouteList.vue              |   49 +-
 .../entities-routes/src/locales/en.json       |   25 +-
 .../entities-routes/src/types/route-form.ts   |   96 +-
 .../entities-routes/src/types/route-list.ts   |    2 -
 .../entities/entities-routes/tsconfig.json    |    3 +-
 .../entities/entities-routes/vite.config.ts   |   12 +-
 .../entity-base-table/EntityBaseTable.vue     |    3 +-
 .../entity-base-table/EntityBaseTableCell.vue |   29 +-
 .../components/entity-filter/EntityFilter.vue |    2 +-
 .../entity-form-section/EntityFormSection.vue |    1 +
 .../entities-shared/src/types/base.ts         |    5 +
 pnpm-lock.yaml                                |   50 +-
 30 files changed, 2968 insertions(+), 1316 deletions(-)
 create mode 100644 packages/entities/entities-routes/src/components/RouteFormConfigTabs.vue
 create mode 100644 packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
 create mode 100644 packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue

diff --git a/packages/core/expressions/package.json b/packages/core/expressions/package.json
index 0fd0f53e97..2a07c8f5d9 100644
--- a/packages/core/expressions/package.json
+++ b/packages/core/expressions/package.json
@@ -2,7 +2,6 @@
   "name": "@kong-ui-public/expressions",
   "version": "0.1.7",
   "type": "module",
-  "main": "./dist/expressions.umd.js",
   "module": "./dist/expressions.es.js",
   "types": "dist/types/index.d.ts",
   "files": [
@@ -11,7 +10,6 @@
   "exports": {
     ".": {
       "import": "./dist/expressions.es.js",
-      "require": "./dist/expressions.umd.js",
       "types": "./dist/types/index.d.ts"
     },
     "./package.json": "./package.json",
@@ -42,7 +40,7 @@
     "@kong/atc-router": "1.6.0-rc.1",
     "@kong/design-tokens": "1.12.11",
     "@kong/kongponents": "9.0.0-alpha.146",
-    "monaco-editor": "0.47.0",
+    "monaco-editor": "0.21.3",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
@@ -68,7 +66,7 @@
   "peerDependencies": {
     "@kong/atc-router": "1.6.0-rc.1",
     "@kong/kongponents": "9.0.0-alpha.105",
-    "monaco-editor": "0.47.0",
+    "monaco-editor": "0.21.3",
     "vue": "^3.4.21"
   },
   "dependencies": {
diff --git a/packages/core/expressions/src/components/ExpressionsEditor.vue b/packages/core/expressions/src/components/ExpressionsEditor.vue
index e6f344a0c7..5ffb5d0dfd 100644
--- a/packages/core/expressions/src/components/ExpressionsEditor.vue
+++ b/packages/core/expressions/src/components/ExpressionsEditor.vue
@@ -7,23 +7,23 @@
 
 <script setup lang="ts">
 import { useDebounce } from '@kong-ui-public/core'
-import type { ParseResult, Schema } from '@kong/atc-router'
+import type { ParseResult, Schema as AtcSchema } from '@kong/atc-router'
 import { Parser } from '@kong/atc-router'
 import type * as Monaco from 'monaco-editor'
 import * as monaco from 'monaco-editor'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { createSchema, type NamedSchemaDefinition } from '../schema'
+import { createSchema, type Schema } from '../schema'
 import { registerLanguage, registerTheme, theme } from '../monaco'
 
 let editor: Monaco.editor.IStandaloneCodeEditor | undefined
 let editorModel: Monaco.editor.ITextModel
 
-const parse = (expression:string, schema: Schema) => Parser.parse(expression, schema)
+const parse = (expression:string, schema: AtcSchema) => Parser.parse(expression, schema)
 
 const { debounce } = useDebounce()
 
 const props = withDefaults(defineProps<{
-  schema: NamedSchemaDefinition,
+  schema: Schema,
   parseDebounce?: number,
   inactiveUntilFocused?: boolean,
 }>(), {
@@ -45,7 +45,7 @@ const editorClass = computed(() => [
   { invalid: isParsingActive.value && parseResult.value?.status !== 'ok' },
 ])
 
-const registerSchema = (schema: NamedSchemaDefinition) => {
+const registerSchema = (schema: Schema) => {
   const { languageId } = registerLanguage(schema)
   monaco.editor.setModelLanguage(editorModel, languageId)
 }
diff --git a/packages/core/expressions/src/index.ts b/packages/core/expressions/src/index.ts
index a8c28d5177..ec9ebd21b3 100644
--- a/packages/core/expressions/src/index.ts
+++ b/packages/core/expressions/src/index.ts
@@ -1,6 +1,6 @@
 import ExpressionsEditor from './components/ExpressionsEditor.vue'
 
-export * from '@kong/atc-router'
+export * as Atc from '@kong/atc-router'
 export * from './schema'
 export { ExpressionsEditor }
 
diff --git a/packages/core/expressions/src/monaco.ts b/packages/core/expressions/src/monaco.ts
index 3284784caf..c88a3107cd 100644
--- a/packages/core/expressions/src/monaco.ts
+++ b/packages/core/expressions/src/monaco.ts
@@ -1,5 +1,5 @@
 import * as monaco from 'monaco-editor'
-import { type NamedSchemaDefinition, type SchemaDefinition } from './schema'
+import { type Schema, type SchemaDefinition } from './schema'
 
 interface MonarchLanguage extends monaco.languages.IMonarchLanguage {
   keywords: string[];
@@ -54,11 +54,10 @@ export const registerTheme = () => {
   })
 }
 
-export const registerLanguage = (schema: NamedSchemaDefinition) => {
+export const registerLanguage = (schema: Schema) => {
   const languageId = getLanguageId(schema.name)
 
   if (monaco.languages.getEncodedLanguageId(languageId) !== 0) {
-    console.warn(`Language "${languageId}" has already been registered`)
     return { languageId }
   }
 
diff --git a/packages/core/expressions/src/schema.ts b/packages/core/expressions/src/schema.ts
index 5a319bc868..09bfc3c873 100644
--- a/packages/core/expressions/src/schema.ts
+++ b/packages/core/expressions/src/schema.ts
@@ -1,16 +1,16 @@
-import { Schema, type AstType } from '@kong/atc-router'
+import { Schema as AtcSchema, type AstType } from '@kong/atc-router'
 
 export type SchemaDefinition = {
   [K in AstType]?: string[];
 };
 
-export interface NamedSchemaDefinition {
+export interface Schema {
   name: string;
   definition: SchemaDefinition;
 }
 
 export const createSchema = (definition: SchemaDefinition) => {
-  const schema = new Schema()
+  const schema = new AtcSchema()
 
   for (const [type, fields] of Object.entries(definition)) {
     for (const field of fields) {
@@ -42,15 +42,16 @@ export const STREAM_SCHEMA_DEFINITION: SchemaDefinition = {
   IpAddr: ['net.src.ip', 'net.dst.ip'],
 }
 
-export const PROTOCOL_TO_SCHEMA_DEFINITION = {
-  http: HTTP_SCHEMA_DEFINITION,
-  https: HTTP_SCHEMA_DEFINITION,
-  grpc: HTTP_SCHEMA_DEFINITION,
-  grpcs: HTTP_SCHEMA_DEFINITION,
+export const PROTOCOL_TO_SCHEMA = (() => {
+  const s: Record<string, Schema> = {}
 
-  tcp: STREAM_SCHEMA_DEFINITION,
-  udp: STREAM_SCHEMA_DEFINITION,
-  tls: STREAM_SCHEMA_DEFINITION,
+  for (const protocol of ['http', 'https', 'grpc', 'grpcs', 'ws', 'wss']) {
+    s[protocol] = { name: protocol, definition: HTTP_SCHEMA_DEFINITION }
+  }
 
-  tls_passthrough: STREAM_SCHEMA_DEFINITION,
-}
+  for (const protocol of ['tcp', 'udp', 'tls', 'tls_passthrough']) {
+    s[protocol] = { name: protocol, definition: STREAM_SCHEMA_DEFINITION }
+  }
+
+  return s
+})()
diff --git a/packages/core/expressions/vite.config.ts b/packages/core/expressions/vite.config.ts
index 989c3cd7e8..ec1423e694 100644
--- a/packages/core/expressions/vite.config.ts
+++ b/packages/core/expressions/vite.config.ts
@@ -30,8 +30,9 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
       promiseExportName: 'asyncInit',
     }),
     // We don't need this plugin to bundle the library. Only for sandbox previews.
+    // See: https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
     ...process.env.USE_SANDBOX
-      ? [monacoEditorPlugin.default({})]
+      ? [((monacoEditorPlugin as any).default as typeof monacoEditorPlugin)({})]
       : [],
   ],
 }))
diff --git a/packages/entities/entities-routes/docs/route-form.md b/packages/entities/entities-routes/docs/route-form.md
index 150cc1cbb2..cec59ad911 100644
--- a/packages/entities/entities-routes/docs/route-form.md
+++ b/packages/entities/entities-routes/docs/route-form.md
@@ -118,6 +118,42 @@ Show/hide Service Select field. Should be used in case of manual adding `service
 
 Show tags field under _Advanced Fields_ collapse or in it's default place (before protocols field).
 
+#### `routeFlavors`
+
+- type: `RouteFlavors`
+- required: `false`
+- default: `{ traditional: true }`
+- properties:
+  - `traditional`:
+    - type: `boolean`
+    - required: `false`
+    - default: `true`
+    - Whether to show input components for the traditional route.
+  - `expressions`:
+    - type: `boolean`
+    - required: `false`
+    - default: `false`
+    - Whether to show input components for the Expressions route.
+
+#### `configTabTooltips`
+
+- type: `Object as PropType<{ traditional?: string; expressions?: string } | undefined>`
+- required: `false`
+- default: `undefined`
+- properties:
+  - `traditional`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Text to show in the tooltip of the traditional config tab.
+
+  - `expressions`:
+    - type: `string`
+    - required: `false`
+    - default: `undefined`
+    - Text to show in the tooltip of the Expressions config tab.
+
+
 ### Slots
 
 #### `form-actions`
@@ -135,6 +171,18 @@ Slot props:
   - type: `Function`
   - Cancel handler function.
 
+#### `after-expressions-editor`
+
+Content to be displayed after the Expressions editor.
+
+Slot props:
+- `expression`
+  - type: `[string, (value: string) => void]`
+  - The expression and a function to update the expression. This is useful when slot content is trying to update the expression (e.g., router playground).
+- `state`
+  - type: `ExpressionsEditorState`
+  - The state of the editor.
+
 ### Events
 
 #### error
@@ -174,10 +222,14 @@ import type {
   MethodsFields,
   Sources,
   Destinations,
-  RouteStateFields,
+  BaseRouteStateFields,
+  TraditionalRouteStateFields,
+  ExpressionsRouteStateFields,
   RouteState,
   Headers,
-  RoutePayload,
+  BaseRoutePayload,
+  TraditionalRoutePayload,
+  ExpressionsRoutePayload,
   SelectItem
 } from '@kong-ui-public/entities-routes'
 ```
diff --git a/packages/entities/entities-routes/docs/route-list.md b/packages/entities/entities-routes/docs/route-list.md
index 3b12ab272f..7f82ab999c 100644
--- a/packages/entities/entities-routes/docs/route-list.md
+++ b/packages/entities/entities-routes/docs/route-list.md
@@ -65,12 +65,6 @@ A table component for routes.
     - default: `undefined`
     - A function that returns the route for editing a route.
 
-  - `useExpression`:
-    - type: `boolean`
-    - required: `false`
-    - default: `undefined`
-    - Whether to use expression flavored routes.
-
   - `serviceId`:
     - type: `string`
     - required: `false`
@@ -164,6 +158,14 @@ The table is rendered inside a `KCard`. `title` text is displayed in the upper l
 
 HTML element you want title to be rendered as. Defaults to `h2`.
 
+#### `hasExpressionColumn`
+
+- type: `boolean`
+- required: `false`
+- default: `false`
+
+Whether to show the "Expression" column. Defaults to `false`.
+
 ### Events
 
 #### error
diff --git a/packages/entities/entities-routes/fixtures/mockData.ts b/packages/entities/entities-routes/fixtures/mockData.ts
index 1550e54e83..e01c181a54 100644
--- a/packages/entities/entities-routes/fixtures/mockData.ts
+++ b/packages/entities/entities-routes/fixtures/mockData.ts
@@ -23,31 +23,6 @@ export const routes: FetcherRawResponse = {
   total: 2,
 }
 
-export const routes100: any[] = Array(100)
-  .fill(null)
-  .map((_, i) => ({
-    id: `${i + 1}`,
-    name: `route-${i + 1}`,
-    methods: ['GET'],
-    hosts: [`${i + 1}.example.com`],
-  }))
-
-export const paginate = (
-  routes: any[],
-  size: number,
-  _offset: number,
-): FetcherRawResponse => {
-  const sliced = routes.slice(_offset, _offset + size)
-  const offset =
-    _offset + size < routes.length ? String(_offset + size) : undefined
-
-  return {
-    data: sliced,
-    total: sliced.length,
-    offset,
-  }
-}
-
 export const services = [
   {
     id: '1',
@@ -59,12 +34,13 @@ export const services = [
   },
 ]
 
+// traditional
 export const route = {
   service: {
     id: services[0].id,
   },
   id: '1',
-  name: 'route-1',
+  name: 'route-trad',
   methods: ['GET', 'CASTOM'],
   service_id: '',
   tags: ['dev', 'test'],
@@ -77,3 +53,47 @@ export const route = {
   paths: ['/foo', '/bar'],
   headers: { Header1: ['cropped-jeans', 'expensive-petroleum'] },
 }
+
+// expressions
+export const routeExpressions = {
+  service: {
+    id: services[0].id,
+  },
+  id: '1',
+  name: 'route-expr',
+  methods: ['GET', 'CASTOM'],
+  service_id: '',
+  tags: ['dev', 'test'],
+  preserve_host: true,
+  https_redirect_status_code: 426,
+  protocols: ['http', 'https'],
+  strip_path: false,
+  expression: 'http.path == "/kong"',
+}
+
+export const routesTraditional100: any[] = Array(100)
+  .fill(null)
+  .map((_, i) => ({
+    id: `${i + 1}`,
+    name: `route-${i + 1}`,
+    methods: ['GET'],
+    hosts: [`${i + 1}.example.com`],
+  }))
+
+export const routesTraditionalExpressionsMixed = [route, routeExpressions]
+
+export const paginate = (
+  routes: any[],
+  size: number,
+  _offset: number,
+): FetcherRawResponse => {
+  const sliced = routes.slice(_offset, _offset + size)
+  const offset =
+    _offset + size < routes.length ? String(_offset + size) : undefined
+
+  return {
+    data: sliced,
+    total: sliced.length,
+    offset,
+  }
+}
diff --git a/packages/entities/entities-routes/package.json b/packages/entities/entities-routes/package.json
index 9eeb1646f4..d6ebb6b641 100644
--- a/packages/entities/entities-routes/package.json
+++ b/packages/entities/entities-routes/package.json
@@ -24,6 +24,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/kongponents": "^9.0.0-alpha.146",
     "axios": "^1.6.8",
+    "monaco-editor": "0.21.3",
     "vue": ">= 3.3.13 < 4",
     "vue-router": "^4.3.0"
   },
@@ -31,7 +32,10 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.11",
     "@kong/kongponents": "9.0.0-alpha.146",
+    "@types/lodash.isequal": "^4.5.8",
     "axios": "^1.6.8",
+    "monaco-editor": "0.21.3",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
@@ -65,9 +69,12 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "700KB"
+    "errorLimit": "5000KB"
   },
   "dependencies": {
-    "@kong-ui-public/entities-shared": "workspace:^"
+    "@kong-ui-public/entities-shared": "workspace:^",
+    "@kong-ui-public/expressions": "workspace:^",
+    "@kong/icons": "^1.8.16",
+    "lodash.isequal": "^4.5.0"
   }
 }
diff --git a/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
index 7a72dc4c81..11766c81a3 100644
--- a/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
+++ b/packages/entities/entities-routes/sandbox/pages/RouteFormPage.vue
@@ -1,7 +1,30 @@
 <template>
+  <KCard class="sandbox-route-flavor-control">
+    <KCollapse
+      v-model="isRouteFlavorControlCollapsed"
+      :class="{ 'is-collapsed': isRouteFlavorControlCollapsed }"
+      title="Route flavors"
+    >
+      <div class="wrapper">
+        <KInputSwitch
+          v-model="routeFlavors.traditional"
+          class="route-flavor-toggle"
+          label="Traditional"
+        />
+        <KInputSwitch
+          v-model="routeFlavors.expressions"
+          class="route-flavor-toggle"
+          label="Expressions"
+        />
+      </div>
+      <p><b>Note:</b> Use controls above to enable/disable route flavors.</p>
+    </KCollapse>
+  </KCard>
+
   <h2>Konnect API</h2>
   <RouteForm
     :config="konnectConfig"
+    :route-flavors="routeFlavors"
     :route-id="routeId"
     @error="onError"
     @update="onUpdate"
@@ -21,11 +44,16 @@
         Next
       </KButton>
     </template>
+
+    <template #after-expressions-editor="editor">
+      This text will appear after the Expressions editor. Editor state: {{ editor.state }}.
+    </template>
   </RouteForm>
 
   <h2>Kong Manager API</h2>
   <RouteForm
     :config="kongManagerConfig"
+    :route-flavors="routeFlavors"
     :route-id="routeId"
     @error="onError"
     @update="onUpdate"
@@ -45,20 +73,26 @@
         Next
       </KButton>
     </template>
+
+    <template #after-expressions-editor="{ state }">
+      This text will appear after the Expressions editor. Editor state: {{ state }}.
+    </template>
   </RouteForm>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { AxiosError } from 'axios'
-import type { KonnectRouteFormConfig, KongManagerRouteFormConfig } from '../../src'
+import type { KonnectRouteFormConfig, KongManagerRouteFormConfig, RouteFlavors } from '../../src'
 import { RouteForm } from '../../src'
 
 const route = useRoute()
 const router = useRouter()
 const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
 
+const isRouteFlavorControlCollapsed = ref<boolean>(true)
+const routeFlavors = reactive<Required<RouteFlavors>>({ traditional: true, expressions: true })
 const routeId = computed((): string => route?.params?.id as string || '')
 
 const konnectConfig = ref<KonnectRouteFormConfig>({
@@ -91,3 +125,29 @@ const onUpdate = (payload: Record<string, any>) => {
   router.push({ name: 'route-list' })
 }
 </script>
+
+<style lang="scss" scoped>
+.sandbox-route-flavor-control {
+  :deep(.k-collapse) {
+    &.is-collapsed {
+      .k-collapse-heading {
+        margin-bottom: $kui-space-0 !important;
+        align-items: center;
+      }
+
+      .k-collapse-title {
+        margin-bottom: $kui-space-0 !important;
+      }
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+
+    .route-flavor-toggle {
+      margin-bottom: $kui-space-50;
+    }
+  }
+}
+</style>
diff --git a/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue b/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue
index f04ab1a847..007905b028 100644
--- a/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue
+++ b/packages/entities/entities-routes/sandbox/pages/RouteListPage.vue
@@ -2,6 +2,23 @@
   <SandboxPermissionsControl
     @update="handlePermissionsUpdate"
   />
+
+  <KCard class="sandbox-route-list-control">
+    <KCollapse
+      v-model="isRouteListControlCollapsed"
+      :class="{ 'is-collapsed': isRouteListControlCollapsed }"
+      title="Route list controls"
+    >
+      <div class="wrapper">
+        <KInputSwitch
+          v-model="routeListHasExpressionColumn"
+          class="route-list-expressions-column-toggle"
+          label="Has &quot;Expression&quot; column"
+        />
+      </div>
+    </KCollapse>
+  </KCard>
+
   <h2>Konnect API</h2>
   <RouteList
     v-if="permissions"
@@ -12,6 +29,7 @@
     :can-edit="permissions.canEdit"
     :can-retrieve="permissions.canRetrieve"
     :config="konnectConfig"
+    :has-expression-column="routeListHasExpressionColumn"
     title="Routes"
     @copy:error="onCopyIdError"
     @copy:success="onCopyIdSuccess"
@@ -29,6 +47,7 @@
     :can-edit="permissions.canEdit"
     :can-retrieve="permissions.canRetrieve"
     :config="kongManagerConfig"
+    :has-expression-column="routeListHasExpressionColumn"
     title="Routes"
     @copy:error="onCopyIdError"
     @copy:success="onCopyIdSuccess"
@@ -38,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { AxiosError } from 'axios'
 import { RouteList } from '../../src'
 import type { KonnectRouteListConfig, KongManagerRouteListConfig, EntityRow, CopyEventPayload } from '../../src'
@@ -87,6 +106,10 @@ const kongManagerConfig = ref<KongManagerRouteListConfig>({
 // Remount the tables in the sandbox when the permission props change; not needed outside of a sandbox
 const key = ref(1)
 const permissions = ref<PermissionsActions | null>(null)
+
+const isRouteListControlCollapsed = ref<boolean>(true)
+const routeListHasExpressionColumn = ref<boolean>(true)
+
 const handlePermissionsUpdate = (newPermissions: PermissionsActions) => {
   permissions.value = newPermissions
   key.value++
@@ -107,4 +130,36 @@ const onDeleteRouteSuccess = (row: EntityRow) => {
 const onError = (error: AxiosError) => {
   console.error(`Error: ${error}`)
 }
+
+watch(routeListHasExpressionColumn, () => {
+  key.value++
+})
 </script>
+
+<style lang="scss" scoped>
+.sandbox-route-list-control {
+  margin-top: $kui-space-80;
+
+  :deep(.k-collapse) {
+    &.is-collapsed {
+      .k-collapse-heading {
+        margin-bottom: $kui-space-0 !important;
+        align-items: center;
+      }
+
+      .k-collapse-title {
+        margin-bottom: $kui-space-0 !important;
+      }
+    }
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+
+    .route-list-expressions-column-toggle {
+      margin-bottom: $kui-space-50;
+    }
+  }
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteForm.cy.ts b/packages/entities/entities-routes/src/components/RouteForm.cy.ts
index 764365e0c0..b4756ca8b2 100644
--- a/packages/entities/entities-routes/src/components/RouteForm.cy.ts
+++ b/packages/entities/entities-routes/src/components/RouteForm.cy.ts
@@ -1,7 +1,8 @@
-import type { KonnectRouteFormConfig, KongManagerRouteFormConfig } from '../types'
+import type { KonnectRouteFormConfig, KongManagerRouteFormConfig, RouteFlavors } from '../types'
 import RouteForm from './RouteForm.vue'
-import { route, services } from '../../fixtures/mockData'
+import { route, routeExpressions, services } from '../../fixtures/mockData'
 import { EntityBaseForm } from '@kong-ui-public/entities-shared'
+import type { RouteHandler } from 'cypress/types/net-stubbing'
 
 const cancelRoute = { name: 'route-list' }
 
@@ -19,6 +20,14 @@ const baseConfigKM: KongManagerRouteFormConfig = {
   cancelRoute,
 }
 
+const TRADITIONAL_ONLY: RouteFlavors = { traditional: true, expressions: false }
+const EXPRESSIONS_ONLY: RouteFlavors = { traditional: false, expressions: true }
+const TRADITIONAL_EXPRESSIONS: RouteFlavors = { traditional: true, expressions: true }
+
+const formatRouteFlavors = (routeFlavors?: RouteFlavors): string => {
+  return routeFlavors ? [...routeFlavors.traditional ? ['trad'] : [], ...routeFlavors.expressions ? ['expr'] : []].join('+') || 'none' : 'default'
+}
+
 describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
   describe('Kong Manager', () => {
     const interceptKM = (params?: {
@@ -66,420 +75,738 @@ describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
       ).as('updateRoute')
     }
 
-    it('should show create form', () => {
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-        },
-      })
+    /**
+     * Stub the POST and PATCH requests with mocked responses where `kind` marks the type of route
+     * being created/edited. This uses the validation steps that are similar to the backend to simply
+     * verify that the mutually exclusive fields are not included.
+     */
+    const stubCreateEdit = () => {
+      const handler: RouteHandler = (req) => {
+        const { body } = req
+
+        // only verify mutually exclusive fields
+        const hasExpressionsFields = Object.hasOwnProperty.call(body, 'expression')
+        const hasTraditionalFields = ['hosts', 'paths', 'headers', 'methods', 'snis', 'sources', 'destinations']
+          .some((prop) => Object.hasOwnProperty.call(body, prop))
+
+        req.reply({
+          statusCode: 400,
+          body: {
+            kind: hasExpressionsFields ? 'expr' : hasTraditionalFields ? 'trad' : undefined,
+          },
+        })
+      }
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-      cy.get('.kong-ui-entities-route-form form').should('be.visible')
-
-      // button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // form fields - general
-      cy.getTestId('route-form-name').should('be.visible')
-      cy.getTestId('route-form-service-id').should('be.visible')
-      cy.getTestId('route-form-tags').should('be.visible')
-
-      // advanced fields
-      cy.getTestId('collapse-trigger-content').should('be.visible').click()
-      cy.getTestId('route-form-path-handling').should('be.visible')
-      cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
-      cy.getTestId('route-form-regex-priority').should('be.visible')
-      cy.getTestId('route-form-strip-path').should('be.visible')
-      cy.getTestId('route-form-preserve-host').should('be.visible')
-      cy.getTestId('route-form-request-buffering').should('be.visible')
-      cy.getTestId('route-form-response-buffering').should('be.visible')
-
-      // routing rules fields
-      cy.getTestId('route-form-protocols').should('be.visible')
-
-      // paths
-      cy.getTestId('route-form-paths-input-1').should('be.visible')
-      cy.getTestId('add-paths').should('be.visible').click()
-      cy.getTestId('route-form-paths-input-2').should('be.visible')
-      cy.getTestId('remove-paths').first().should('be.visible').click()
-      cy.getTestId('route-form-paths-input-2').should('not.exist')
-
-      cy.getTestId('route-form-paths-input-1').should('be.visible')
-      cy.getTestId('remove-paths').first().should('be.visible').click()
-      cy.get('.route-form-routing-rules-selector-options').should('be.visible')
-
-      // snis
-      cy.getTestId('routing-rule-snis').should('be.visible').click()
-      cy.getTestId('route-form-snis-input-1').should('be.visible')
-      cy.getTestId('add-snis').should('be.visible').click()
-      cy.getTestId('route-form-snis-input-2').should('be.visible')
-      cy.getTestId('remove-snis').first().should('be.visible').click()
-      cy.getTestId('route-form-snis-input-2').should('not.exist')
-
-      // hosts
-      cy.getTestId('routing-rule-hosts').should('be.visible').click()
-      cy.getTestId('route-form-hosts-input-1').should('be.visible')
-      cy.getTestId('add-hosts').should('be.visible').click()
-      cy.getTestId('route-form-hosts-input-2').should('be.visible')
-      cy.getTestId('remove-hosts').first().should('be.visible').click()
-      cy.getTestId('route-form-hosts-input-2').should('not.exist')
-
-      // methods and custom methods
-      cy.getTestId('routing-rule-methods').should('be.visible').click()
-      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'true')
-      cy.getTestId('get-method-toggle').should('exist')
-      cy.getTestId('post-method-toggle').should('exist')
-      cy.getTestId('put-method-toggle').should('exist')
-      cy.getTestId('custom-method-toggle').should('exist').check({ force: true })
-      cy.getTestId('route-form-custom-method-input-1').should('be.visible')
-      cy.getTestId('add-custom-method').should('be.visible').click()
-      cy.getTestId('route-form-custom-method-input-2').should('be.visible')
-      cy.getTestId('remove-custom-method').first().should('be.visible').click()
-      cy.getTestId('route-form-custom-method-input-2').should('not.exist')
-      cy.getTestId('remove-methods').should('be.visible').click()
-      cy.getTestId('get-method-toggle').should('not.exist')
-      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'false')
-
-      // headers
-      cy.getTestId('routing-rule-headers').should('be.visible').click()
-      cy.getTestId('route-form-headers-name-input-1').should('be.visible')
-      cy.getTestId('route-form-headers-values-input-1').should('be.visible')
-      cy.getTestId('add-headers').should('be.visible').click()
-      cy.getTestId('route-form-headers-name-input-2').should('be.visible')
-      cy.getTestId('route-form-headers-values-input-2').should('be.visible')
-      cy.getTestId('remove-headers').first().should('be.visible').click()
-      cy.getTestId('route-form-headers-name-input-2').should('not.exist')
-      cy.getTestId('route-form-headers-values-input-2').should('not.exist')
+      cy.intercept('POST', `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes`, handler).as('createRoute')
+      cy.intercept('PATCH', `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes/*`, handler).as('editRoute')
+    }
 
-      cy.getTestId('route-form-protocols').click({ force: true })
-      cy.get("[data-testid='select-item-tcp,tls,udp']").click()
-      cy.getTestId('routing-rule-paths').should('not.exist')
-      cy.getTestId('routing-rule-hosts').should('not.exist')
-      cy.getTestId('routing-rule-methods').should('not.exist')
-      cy.getTestId('routing-rule-headers').should('not.exist')
-
-      // sources
-      cy.getTestId('routing-rule-sources').should('be.visible').click()
-      cy.getTestId('route-form-sources-ip-input-1').should('be.visible')
-      cy.getTestId('route-form-sources-port-input-1').should('be.visible')
-      cy.getTestId('add-sources').should('be.visible').click()
-      cy.getTestId('route-form-sources-ip-input-2').should('be.visible')
-      cy.getTestId('route-form-sources-port-input-2').should('be.visible')
-      cy.getTestId('remove-sources').first().should('be.visible').click()
-      cy.getTestId('route-form-sources-ip-input-2').should('not.exist')
-      cy.getTestId('route-form-sources-port-input-2').should('not.exist')
-
-      // destinations
-      cy.getTestId('routing-rule-destinations').should('be.visible').click()
-      cy.getTestId('route-form-destinations-ip-input-1').should('be.visible')
-      cy.getTestId('route-form-destinations-port-input-1').should('be.visible')
-      cy.getTestId('add-destinations').should('be.visible').click()
-      cy.getTestId('route-form-destinations-ip-input-2').should('be.visible')
-      cy.getTestId('route-form-destinations-port-input-2').should('be.visible')
-      cy.getTestId('remove-destinations').first().should('be.visible').click()
-      cy.getTestId('route-form-destinations-ip-input-2').should('not.exist')
-      cy.getTestId('route-form-destinations-port-input-2').should('not.exist')
-    })
+    // Tests 4 possible RouteFlavors: <not-set>, <trad only>, <expr only>, <trad+expr>
+    for (const routeFlavors of [undefined, TRADITIONAL_ONLY, EXPRESSIONS_ONLY, TRADITIONAL_EXPRESSIONS]) {
+      const configTabs = `tabs=${formatRouteFlavors(routeFlavors)}`
 
-    it('should correctly handle button state - create', () => {
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-        },
+      it(`should show create form, ${configTabs}`, () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors,
+          },
+        })
+
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+        // button state
+        cy.getTestId('form-cancel').should('be.visible')
+        cy.getTestId('form-submit').should('be.visible')
+        cy.getTestId('form-cancel').should('be.enabled')
+        cy.getTestId('form-submit').should('be.disabled')
+
+        // config tabs is hidden when there is only one tab
+        cy.getTestId('route-form-config-tabs')
+          .should(routeFlavors?.traditional && routeFlavors?.expressions ? 'be.visible' : 'not.exist')
+
+        // base + base advanced fields
+        cy.getTestId('collapse-trigger-content').click()
+        cy.getTestId('route-form-name').should('be.visible')
+        cy.getTestId('route-form-service-id').should('be.visible')
+        cy.getTestId('route-form-tags').should('be.visible')
+        cy.getTestId('route-form-protocols').should('be.visible')
+
+        if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to trad tab
+          cy.get('#traditional-tab').click()
+        } // else: we will be on the trad tab by default
+
+        if (routeFlavors?.traditional) {
+          // base advanced fields
+          cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
+          cy.getTestId('route-form-preserve-host').should('be.visible')
+          cy.getTestId('route-form-strip-path').should('be.visible')
+          cy.getTestId('route-form-request-buffering').should('be.visible')
+          cy.getTestId('route-form-response-buffering').should('be.visible')
+
+          // other advanced fields
+          cy.getTestId('route-form-path-handling').should('be.visible')
+          cy.getTestId('route-form-regex-priority').should('be.visible')
+
+          // paths
+          cy.getTestId('route-form-paths-input-1').should('be.visible')
+          cy.getTestId('add-paths').should('be.visible').click()
+          cy.getTestId('route-form-paths-input-2').should('be.visible')
+          cy.getTestId('remove-paths').first().should('be.visible').click()
+          cy.getTestId('route-form-paths-input-2').should('not.exist')
+
+          cy.getTestId('route-form-paths-input-1').should('be.visible')
+          cy.getTestId('remove-paths').first().should('be.visible').click()
+          cy.get('.route-form-routing-rules-selector-options').should('be.visible')
+
+          // snis
+          cy.getTestId('routing-rule-snis').should('be.visible').click()
+          cy.getTestId('route-form-snis-input-1').should('be.visible')
+          cy.getTestId('add-snis').should('be.visible').click()
+          cy.getTestId('route-form-snis-input-2').should('be.visible')
+          cy.getTestId('remove-snis').first().should('be.visible').click()
+          cy.getTestId('route-form-snis-input-2').should('not.exist')
+
+          // hosts
+          cy.getTestId('routing-rule-hosts').should('be.visible').click()
+          cy.getTestId('route-form-hosts-input-1').should('be.visible')
+          cy.getTestId('add-hosts').should('be.visible').click()
+          cy.getTestId('route-form-hosts-input-2').should('be.visible')
+          cy.getTestId('remove-hosts').first().should('be.visible').click()
+          cy.getTestId('route-form-hosts-input-2').should('not.exist')
+
+          // methods and custom methods
+          cy.getTestId('routing-rule-methods').should('be.visible').click()
+          cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'true')
+          cy.getTestId('get-method-toggle').should('exist')
+          cy.getTestId('post-method-toggle').should('exist')
+          cy.getTestId('put-method-toggle').should('exist')
+          cy.getTestId('custom-method-toggle').should('exist').check({ force: true })
+          cy.getTestId('route-form-custom-method-input-1').should('be.visible')
+          cy.getTestId('add-custom-method').should('be.visible').click()
+          cy.getTestId('route-form-custom-method-input-2').should('be.visible')
+          cy.getTestId('remove-custom-method').first().should('be.visible').click()
+          cy.getTestId('route-form-custom-method-input-2').should('not.exist')
+          cy.getTestId('remove-methods').should('be.visible').click()
+          cy.getTestId('get-method-toggle').should('not.exist')
+          cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'false')
+
+          // headers
+          cy.getTestId('routing-rule-headers').should('be.visible').click()
+          cy.getTestId('route-form-headers-name-input-1').should('be.visible')
+          cy.getTestId('route-form-headers-values-input-1').should('be.visible')
+          cy.getTestId('add-headers').should('be.visible').click()
+          cy.getTestId('route-form-headers-name-input-2').should('be.visible')
+          cy.getTestId('route-form-headers-values-input-2').should('be.visible')
+          cy.getTestId('remove-headers').first().should('be.visible').click()
+          cy.getTestId('route-form-headers-name-input-2').should('not.exist')
+          cy.getTestId('route-form-headers-values-input-2').should('not.exist')
+
+          cy.getTestId('route-form-protocols').click({ force: true })
+          cy.get("[data-testid='select-item-tcp,tls,udp']").click()
+          cy.getTestId('routing-rule-paths').should('not.exist')
+          cy.getTestId('routing-rule-hosts').should('not.exist')
+          cy.getTestId('routing-rule-methods').should('not.exist')
+          cy.getTestId('routing-rule-headers').should('not.exist')
+
+          // sources
+          cy.getTestId('routing-rule-sources').should('be.visible').click()
+          cy.getTestId('route-form-sources-ip-input-1').should('be.visible')
+          cy.getTestId('route-form-sources-port-input-1').should('be.visible')
+          cy.getTestId('add-sources').should('be.visible').click()
+          cy.getTestId('route-form-sources-ip-input-2').should('be.visible')
+          cy.getTestId('route-form-sources-port-input-2').should('be.visible')
+          cy.getTestId('remove-sources').first().should('be.visible').click()
+          cy.getTestId('route-form-sources-ip-input-2').should('not.exist')
+          cy.getTestId('route-form-sources-port-input-2').should('not.exist')
+
+          // destinations
+          cy.getTestId('routing-rule-destinations').should('be.visible').click()
+          cy.getTestId('route-form-destinations-ip-input-1').should('be.visible')
+          cy.getTestId('route-form-destinations-port-input-1').should('be.visible')
+          cy.getTestId('add-destinations').should('be.visible').click()
+          cy.getTestId('route-form-destinations-ip-input-2').should('be.visible')
+          cy.getTestId('route-form-destinations-port-input-2').should('be.visible')
+          cy.getTestId('remove-destinations').first().should('be.visible').click()
+          cy.getTestId('route-form-destinations-ip-input-2').should('not.exist')
+          cy.getTestId('route-form-destinations-port-input-2').should('not.exist')
+        }
+
+        if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to expr tab
+          cy.get('#expressions-tab').click()
+        }
+
+        if (routeFlavors?.expressions) {
+          // negative: traditional fields should not exist
+          cy.getTestId('route-form-path-handling').should('not.exist')
+          cy.getTestId('route-form-regex-priority').should('not.exist')
+          cy.getTestId('route-form-paths-input-1').should('not.exist')
+          cy.get('.route-form-routing-rules-selector-options').should('not.exist')
+
+          // expressions editor
+          cy.get('.expression-editor .monaco-editor').should('be.visible')
+
+          // base advanced fields
+          cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
+          cy.getTestId('route-form-preserve-host').should('be.visible')
+          cy.getTestId('route-form-strip-path').should('be.visible')
+          cy.getTestId('route-form-request-buffering').should('be.visible')
+          cy.getTestId('route-form-response-buffering').should('be.visible')
+        }
       })
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // default button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // enables save when required fields have values
-      // form fields - general
-      cy.getTestId('route-form-name').should('be.visible')
-
-      // paths
-      cy.getTestId('route-form-paths-input-1').type(route.paths[0])
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-paths-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // snis
-      cy.getTestId('routing-rule-snis').click()
-      cy.getTestId('route-form-snis-input-1').type('sni')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-snis-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // hosts
-      cy.getTestId('routing-rule-hosts').click()
-      cy.getTestId('route-form-hosts-input-1').type('host')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-hosts-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // methods and custom methods
-      cy.getTestId('routing-rule-methods').click()
-      cy.getTestId('get-method-toggle').check({ force: true })
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('get-method-toggle').uncheck({ force: true })
-      cy.getTestId('form-submit').should('be.disabled')
-      cy.getTestId('custom-method-toggle').check({ force: true })
-      cy.getTestId('form-submit').should('be.disabled')
-      cy.getTestId('route-form-custom-method-input-1').type('castom')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-custom-method-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // headers
-      cy.getTestId('routing-rule-headers').click()
-      cy.getTestId('route-form-headers-name-input-1').type(Object.keys(route.headers)[0])
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-headers-name-input-1').clear()
-      cy.getTestId('route-form-headers-values-input-1').type(route.headers.Header1[0])
-      cy.getTestId('form-submit').should('be.disabled')
-
-      cy.getTestId('route-form-protocols').click({ force: true })
-      cy.get("[data-testid='select-item-tcp,tls,udp']").click()
-
-      // sources
-      cy.getTestId('routing-rule-sources').click()
-      cy.getTestId('route-form-sources-ip-input-1').type('127.0.0.1')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-sources-ip-input-1').clear()
-      cy.getTestId('route-form-sources-port-input-1').type('8080')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // destinations
-      cy.getTestId('routing-rule-destinations').click()
-      cy.getTestId('route-form-destinations-ip-input-1').type('127.0.0.2')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-destinations-ip-input-1').clear()
-      cy.getTestId('route-form-destinations-port-input-1').type('8000')
-      cy.getTestId('form-submit').should('be.disabled')
-    })
-
-    it('should show edit form', () => {
-      interceptKM()
-      interceptKMServices()
+      if (routeFlavors?.traditional && routeFlavors?.expressions) {
+        // only test when both trad & expr tabs present
+        it('should show tooltips', () => {
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeFlavors,
+              configTabTooltips: {
+                traditional: 'For traditional routes',
+                expressions: 'For expressions routes',
+              },
+            },
+          })
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+          cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+          cy.get('#traditional-tab .route-form-config-tabs-tooltip').should('contain.text', 'For traditional routes')
+          cy.get('#expressions-tab .route-form-config-tabs-tooltip').should('contain.text', 'For expressions routes')
+        })
+      }
+
+      if (!routeFlavors || routeFlavors?.traditional) {
+        // only test when there is trad tab
+        it(`should correctly handle button state - create traditional, ${configTabs}`, () => {
+          interceptKMServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeFlavors,
+            },
+          })
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to trad tab
+            cy.get('#traditional-tab').click()
+          } // else: we will be on the trad tab by default
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // config tabs is hidden when there is only one tab
+          cy.getTestId('route-form-config-tabs')
+            .should(routeFlavors?.traditional && routeFlavors?.expressions ? 'be.visible' : 'not.exist')
+
+          // enables save when required fields have values
+          // form fields - general
+          cy.getTestId('route-form-name').should('be.visible')
+
+          // paths
+          cy.getTestId('route-form-paths-input-1').type(route.paths[0])
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-paths-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // snis
+          cy.getTestId('routing-rule-snis').click()
+          cy.getTestId('route-form-snis-input-1').type('sni')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-snis-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // hosts
+          cy.getTestId('routing-rule-hosts').click()
+          cy.getTestId('route-form-hosts-input-1').type('host')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-hosts-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // methods and custom methods
+          cy.getTestId('routing-rule-methods').click()
+          cy.getTestId('get-method-toggle').check({ force: true })
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('get-method-toggle').uncheck({ force: true })
+          cy.getTestId('form-submit').should('be.disabled')
+          cy.getTestId('custom-method-toggle').check({ force: true })
+          cy.getTestId('form-submit').should('be.disabled')
+          cy.getTestId('route-form-custom-method-input-1').type('castom')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-custom-method-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // headers
+          cy.getTestId('routing-rule-headers').click()
+          cy.getTestId('route-form-headers-name-input-1').type(Object.keys(route.headers)[0])
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-headers-name-input-1').clear()
+          cy.getTestId('route-form-headers-values-input-1').type(route.headers.Header1[0])
+          cy.getTestId('form-submit').should('be.disabled')
+
+          cy.getTestId('route-form-protocols').click({ force: true })
+          cy.get("[data-testid='select-item-tcp,tls,udp']").click()
+
+          // sources
+          cy.getTestId('routing-rule-sources').click()
+          cy.getTestId('route-form-sources-ip-input-1').type('127.0.0.1')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-sources-ip-input-1').clear()
+          cy.getTestId('route-form-sources-port-input-1').type('8080')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // destinations
+          cy.getTestId('routing-rule-destinations').click()
+          cy.getTestId('route-form-destinations-ip-input-1').type('127.0.0.2')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-destinations-ip-input-1').clear()
+          cy.getTestId('route-form-destinations-port-input-1').type('8000')
+          cy.getTestId('form-submit').should('be.disabled')
+        })
+      } // if !routeFlavors || routeFlavors?.traditional
+
+      if (routeFlavors?.expressions) {
+        // only test when there is expr tab
+        it(`should correctly handle button state - create expressions, ${configTabs}`, () => {
+          interceptKMServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeFlavors,
+            },
+          })
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to expr tab
+            cy.get('#expressions-tab').click()
+          } // else: we will be on expr tab by default
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // enables save when required fields have values
+          // form fields - general
+          cy.getTestId('route-form-name').should('be.visible')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // the editor shows invalid because it is empty
+          cy.get('.expression-editor').should('have.class', 'invalid')
+
+          // type a valid expression
+          cy.get('.monaco-editor').first().as('monacoEditor').click()
+          cy.get('@monacoEditor').type('http.path == "/kong"')
+
+          // it should be no longer invalid
+          cy.get('.expression-editor').should('not.have.class', 'invalid')
+          // and the submit button is enabled
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+
+          // delete the last character
+          cy.get('@monacoEditor').type('{backspace}')
+
+          // invalid again
+          cy.get('.expression-editor').should('have.class', 'invalid')
+          // but the submit button is still enabled because we let the server handle uncaught errors
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+        })
+      } // if routeFlavors?.expressions
+
+      if (!routeFlavors || routeFlavors?.traditional) {
+        // only test when there is trad tab
+        it(`should show edit form, traditional ${configTabs}`, () => {
+          interceptKM()
+          interceptKMServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeId: route.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // trad tab should be active by default
+            cy.get('#traditional-tab').should('have.class', 'active')
+          }
+
+          // form fields
+          cy.getTestId('route-form-name').should('have.value', route.name)
+          cy.getTestId('route-form-service-id').should('have.value', route.service.id)
+          cy.getTestId('route-form-tags').should('have.value', route.tags.join(', '))
+
+          cy.getTestId('collapse-trigger-content').click()
+          cy.getTestId('route-form-path-handling').should('have.value', route.path_handling)
+          cy.getTestId('route-form-regex-priority').should('have.value', route.regex_priority)
+          cy.getTestId('route-form-strip-path').should(`${route.strip_path ? '' : 'not.'}be.checked`)
+          cy.getTestId('route-form-preserve-host').should(`${route.preserve_host ? '' : 'not.'}be.checked`)
+
+          cy.getTestId('route-form-paths-input-1').should('have.value', route.paths[0])
+          cy.getTestId('route-form-paths-input-2').should('have.value', route.paths[1])
+          cy.getTestId(`${route.methods[0].toLowerCase()}-method-toggle`).should('be.checked')
+          cy.getTestId(`${route.methods[1].toLowerCase()}-method-toggle`).should('be.checked')
+          cy.getTestId('route-form-headers-name-input-1').should('have.value', Object.keys(route.headers)[0])
+          cy.getTestId('route-form-headers-values-input-1').should('have.value', route.headers.Header1.join(','))
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // switch to expr tab
+            cy.get('#expressions-tab').click()
+            // should not see the expression editor
+            cy.get('.expression-editor').should('not.exist')
+            // should be reminded that the route type cannot be changed
+            cy.getTestId('route-config-type-immutable-alert').should('contain.text', 'cannot be changed after creation')
+          }
+        })
+
+        it(`should correctly handle button state - edit traditional, ${configTabs}`, () => {
+          interceptKM()
+          interceptKMServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeId: route.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // trad tab should be active by default
+            cy.get('#traditional-tab').should('have.class', 'active')
+          }
+
+          cy.getTestId('routing-rules-warning').should('not.exist')
+
+          // enables save when form has changes
+          cy.getTestId('route-form-service-id').click({ force: true })
+          cy.get("[data-testid='select-item-2']").click()
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@editRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('remove-methods').click()
+          cy.getTestId('remove-paths').first().click()
+          cy.getTestId('remove-paths').click()
+          cy.getTestId('remove-headers').click()
+          cy.getTestId('routing-rules-warning').should('be.visible')
+          cy.getTestId('form-submit').should('be.disabled')
+        })
+      } // if !routeFlavors || routeFlavors?.traditional
+
+      if (routeFlavors?.expressions) {
+        // only test when there is trad tab
+        it(`should show edit form, expressions ${configTabs}`, () => {
+          interceptKM({ mockData: routeExpressions })
+          interceptKMServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeId: routeExpressions.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // expr tab should be active by default
+            cy.get('#expressions-tab').should('have.class', 'active')
+          }
+
+          // form fields
+          cy.getTestId('route-form-name').should('have.value', routeExpressions.name)
+          cy.getTestId('route-form-service-id').should('have.value', routeExpressions.service.id)
+          cy.getTestId('route-form-tags').should('have.value', routeExpressions.tags.join(', '))
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            cy.getTestId('collapse-trigger-content').click()
+            // switch to trad tab
+            cy.get('#traditional-tab').click()
+            // should not see trad fields
+            cy.getTestId('route-form-path-handling').should('not.exist')
+            cy.getTestId('route-form-regex-priority').should('not.exist')
+            // should be reminded that the route type cannot be changed
+            cy.getTestId('route-config-type-immutable-alert').should('contain.text', 'cannot be changed after creation')
+          }
+        })
+
+        it(`should correctly handle button state - edit expressions, ${configTabs}`, () => {
+          interceptKM({ mockData: routeExpressions })
+          interceptKMServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKM,
+              routeId: routeExpressions.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // trad tab should be active by default
+            cy.get('#expressions-tab').should('have.class', 'active')
+            cy.getTestId('route-form-expressions-editor-loader-loading').should('not.exist')
+          }
+
+          // enables save when form has changes
+          cy.getTestId('route-form-service-id').click({ force: true })
+          cy.get("[data-testid='select-item-2']").click()
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@editRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+
+          // type a valid expression
+          cy.get('.monaco-editor').first().as('monacoEditor').click()
+          // delete the last character
+          cy.get('@monacoEditor').type('{backspace}')
+
+          // the editor should become invalid
+          cy.get('.expression-editor').should('have.class', 'invalid')
+          // but the submit button is still enabled because we let the server handle uncaught errors
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@editRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+        })
+      } // if routeFlavors?.expressions
+
+      it(`should handle error state - failed to load route, ${configTabs}`, () => {
+        interceptKMServices()
+
+        cy.intercept(
+          {
+            method: 'GET',
+            url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes/*`,
+          },
+          {
+            statusCode: 404,
+            body: {},
+          },
+        ).as('getRoute')
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-          routeId: route.id,
-        },
-      })
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeId: route.id,
+            routeFlavors,
+          },
+        })
 
-      cy.wait('@getRoute')
-      cy.wait('@getServices')
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.wait('@getRoute')
+        cy.wait('@getServices')
 
-      // button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // form fields
-      cy.getTestId('route-form-name').should('have.value', route.name)
-      cy.getTestId('route-form-service-id').should('have.value', route.service.id)
-      cy.getTestId('route-form-tags').should('have.value', route.tags.join(', '))
-      cy.getTestId('route-form-paths-input-1').should('have.value', route.paths[0])
-      cy.getTestId('route-form-paths-input-2').should('have.value', route.paths[1])
-      cy.getTestId(`${route.methods[0].toLowerCase()}-method-toggle`).should('be.checked')
-      cy.getTestId(`${route.methods[1].toLowerCase()}-method-toggle`).should('be.checked')
-      cy.getTestId('route-form-headers-name-input-1').should('have.value', Object.keys(route.headers)[0])
-      cy.getTestId('route-form-headers-values-input-1').should('have.value', route.headers.Header1.join(','))
-
-      cy.getTestId('collapse-trigger-content').click()
-      cy.getTestId('route-form-path-handling').should('have.value', route.path_handling)
-      cy.getTestId('route-form-regex-priority').should('have.value', route.regex_priority)
-      cy.getTestId('route-form-strip-path').should(`${route.strip_path ? '' : 'not.'}be.checked`)
-      cy.getTestId('route-form-preserve-host').should(`${route.preserve_host ? '' : 'not.'}be.checked`)
-    })
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
 
-    it('should correctly handle button state - edit', () => {
-      interceptKM()
-      interceptKMServices()
+        // error state is displayed
+        cy.getTestId('form-fetch-error').should('be.visible')
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-          routeId: route.id,
-        },
+        // buttons and form hidden
+        cy.getTestId('form-cancel').should('not.exist')
+        cy.getTestId('form-submit').should('not.exist')
+        cy.get('.kong-ui-entities-route-form form').should('not.exist')
       })
 
-      cy.wait('@getRoute')
-      cy.wait('@getServices')
-
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // default button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-      cy.getTestId('routing-rules-warning').should('not.exist')
-
-      // enables save when form has changes
-      cy.getTestId('route-form-service-id').click({ force: true })
-      cy.get("[data-testid='select-item-2']").click()
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('remove-methods').click()
-      cy.getTestId('remove-paths').first().click()
-      cy.getTestId('remove-paths').click()
-      cy.getTestId('remove-headers').click()
-      cy.getTestId('routing-rules-warning').should('be.visible')
-      cy.getTestId('form-submit').should('be.disabled')
-    })
-
-    it('should handle error state - failed to load route', () => {
-      interceptKMServices()
+      it(`should allow exact match filtering of services, ${configTabs}`, () => {
+        interceptKMServices()
 
-      cy.intercept(
-        {
-          method: 'GET',
-          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/routes/*`,
-        },
-        {
-          statusCode: 404,
-          body: {},
-        },
-      ).as('getRoute')
-
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-          routeId: route.id,
-        },
-      })
-
-      cy.wait('@getRoute')
-      cy.wait('@getServices')
-
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors,
+          },
+        })
 
-      // error state is displayed
-      cy.getTestId('form-fetch-error').should('be.visible')
+        cy.wait('@getServices')
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
 
-      // buttons and form hidden
-      cy.getTestId('form-cancel').should('not.exist')
-      cy.getTestId('form-submit').should('not.exist')
-      cy.get('.kong-ui-entities-route-form form').should('not.exist')
-    })
+        // config tabs is hidden when there is only one tab
+        cy.getTestId('route-form-config-tabs')
+          .should(routeFlavors?.traditional && routeFlavors?.expressions ? 'be.visible' : 'not.exist')
 
-    it('should allow exact match filtering of services', () => {
-      interceptKMServices()
+        // search
+        cy.getTestId('route-form-service-id').should('be.visible')
+        cy.getTestId('route-form-service-id').type(services[1].name)
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-        },
+        // click kselect item
+        cy.getTestId(`select-item-${services[1].id}`).should('be.visible')
+        cy.get(`[data-testid="select-item-${services[1].id}"] button`).click()
+        cy.getTestId('route-form-service-id').should('have.value', services[1].id)
       })
 
-      cy.wait('@getServices')
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // search
-      cy.getTestId('route-form-service-id').should('be.visible')
-      cy.getTestId('route-form-service-id').type(services[1].name)
-
-      // click kselect item
-      cy.getTestId(`select-item-${services[1].id}`).should('be.visible')
-      cy.get(`[data-testid="select-item-${services[1].id}"] button`).click()
-      cy.getTestId('route-form-service-id').should('have.value', services[1].id)
-    })
+      it(`should handle error state - failed to load services, ${configTabs}`, () => {
+        cy.intercept(
+          {
+            method: 'GET',
+            url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/services*`,
+          },
+          {
+            statusCode: 500,
+            body: {},
+          },
+        ).as('getServices')
 
-    it('should handle error state - failed to load services', () => {
-      cy.intercept(
-        {
-          method: 'GET',
-          url: `${baseConfigKM.apiBaseUrl}/${baseConfigKM.workspace}/services*`,
-        },
-        {
-          statusCode: 500,
-          body: {},
-        },
-      ).as('getServices')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeFlavors,
+          },
+        })
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-        },
+        cy.wait('@getServices')
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.getTestId('form-error').should('be.visible')
       })
 
-      cy.wait('@getServices')
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-      cy.getTestId('form-error').should('be.visible')
-    })
+      it(`should correctly render with all props and slot content, ${configTabs}`, () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            serviceId: services[0].id,
+            hideSectionsInfo: true,
+            hideNameField: true,
+            showTagsFiledUnderAdvanced: true,
+            routeFlavors,
+          },
+          slots: {
+            'form-actions': '<button data-testid="slotted-cancel-button">Cancel</button><button data-testid="slotted-submit-button">Submit</button>',
+          },
+        })
 
-    it('should correctly render with all props and slot content', () => {
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-          serviceId: services[0].id,
-          hideSectionsInfo: true,
-          hideNameField: true,
-          showTagsFiledUnderAdvanced: true,
-        },
-        slots: {
-          'form-actions': '<button data-testid="slotted-cancel-button">Cancel</button><button data-testid="slotted-submit-button">Submit</button>',
-        },
-      })
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.get('.kong-ui-entities-route-form form').should('be.visible')
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-      cy.get('.kong-ui-entities-route-form form').should('be.visible')
+        // config tabs is hidden when there is only one tab
+        cy.getTestId('route-form-config-tabs')
+          .should(routeFlavors?.traditional && routeFlavors?.expressions ? 'be.visible' : 'not.exist')
 
-      // name field should be hidden when hideNameField is true
-      cy.getTestId('route-form-name').should('not.exist')
+        // name field should be hidden when hideNameField is true
+        cy.getTestId('route-form-name').should('not.exist')
 
-      // tags field should render under advanced fields
-      cy.getTestId('route-form-tags').should('not.be.visible')
-      cy.getTestId('collapse-trigger-content').click()
-      cy.getTestId('route-form-tags').should('be.visible')
+        // tags field should render under advanced fields
+        cy.getTestId('route-form-tags').should('not.be.visible')
+        cy.getTestId('collapse-trigger-content').click()
+        cy.getTestId('route-form-tags').should('be.visible')
 
-      // service id field should be hidden when serviceId is provided
-      cy.getTestId('route-form-service-id').should('not.exist')
+        // service id field should be hidden when serviceId is provided
+        cy.getTestId('route-form-service-id').should('not.exist')
 
-      // sections info should be hidden when hideSectionsInfo is true
-      cy.get('.form-section-info sticky').should('not.exist')
+        // sections info should be hidden when hideSectionsInfo is true
+        cy.get('.form-section-info sticky').should('not.exist')
 
-      // default buttons should be replaced with slotted content
-      cy.getTestId('form-cancel').should('not.exist')
-      cy.getTestId('form-submit').should('not.exist')
-      cy.getTestId('slotted-cancel-button').should('be.visible')
-      cy.getTestId('slotted-submit-button').should('be.visible')
-    })
+        // default buttons should be replaced with slotted content
+        cy.getTestId('form-cancel').should('not.exist')
+        cy.getTestId('form-submit').should('not.exist')
+        cy.getTestId('slotted-cancel-button').should('be.visible')
+        cy.getTestId('slotted-submit-button').should('be.visible')
+      })
 
-    it('update event should be emitted when Route was edited', () => {
-      interceptKM()
-      interceptUpdate()
+      it(`update event should be emitted when Route was edited, ${configTabs}`, () => {
+        interceptKM()
+        interceptUpdate()
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKM,
-          routeId: route.id,
-          onUpdate: cy.spy().as('onUpdateSpy'),
-        },
-      }).then(({ wrapper }) => wrapper)
-        .as('vueWrapper')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKM,
+            routeId: route.id,
+            onUpdate: cy.spy().as('onUpdateSpy'),
+            routeFlavors,
+          },
+        }).then(({ wrapper }) => wrapper)
+          .as('vueWrapper')
 
-      cy.wait('@getRoute')
-      cy.getTestId('route-form-tags').clear()
-      cy.getTestId('route-form-tags').type('tag1,tag2')
+        cy.wait('@getRoute')
+        cy.getTestId('route-form-tags').clear()
+        cy.getTestId('route-form-tags').type('tag1,tag2')
 
-      cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(EntityBaseForm)
-        .vm.$emit('submit'))
+        cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(EntityBaseForm)
+          .vm.$emit('submit'))
 
-      cy.wait('@updateRoute')
+        cy.wait('@updateRoute')
 
-      cy.get('@onUpdateSpy').should('have.been.calledOnce')
-    })
+        cy.get('@onUpdateSpy').should('have.been.calledOnce')
+      })
+    } // for RouteFlavors[]
 
     it('should hide `ws` options when not supported', () => {
       cy.mount(RouteForm, {
@@ -496,6 +823,9 @@ describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
 
       cy.get('.kong-ui-entities-route-form').should('be.visible')
 
+      // config tabs is hidden when there is only one tab
+      cy.getTestId('route-form-config-tabs').should('not.exist')
+
       cy.getTestId('route-form-protocols').click({ force: true })
       cy.getTestId('select-item-http').should('exist')
       cy.getTestId('select-item-ws').should('not.exist')
@@ -549,417 +879,736 @@ describe('<RouteForm />', { viewportHeight: 700, viewportWidth: 700 }, () => {
       ).as('updateRoute')
     }
 
-    it('should show create form', () => {
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-        },
-      })
+    /**
+     * Stub the POST and PATCH requests with mocked responses where `kind` marks the type of route
+     * being created/edited. This uses the validation steps that are similar to the backend to simply
+     * verify that the mutually exclusive fields are not included.
+     */
+    const stubCreateEdit = () => {
+      const handler: RouteHandler = (req) => {
+        const { body } = req
+
+        // only verify mutually exclusive fields
+        const hasExpressionsFields = Object.hasOwnProperty.call(body, 'expression')
+        const hasTraditionalFields = ['hosts', 'paths', 'headers', 'methods', 'snis', 'sources', 'destinations']
+          .some((prop) => Object.hasOwnProperty.call(body, prop))
+
+        req.reply({
+          statusCode: 400,
+          body: {
+            kind: hasExpressionsFields ? 'expr' : hasTraditionalFields ? 'trad' : undefined,
+          },
+        })
+      }
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-      cy.get('.kong-ui-entities-route-form form').should('be.visible')
-
-      // button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // form fields - general
-      cy.getTestId('route-form-name').should('be.visible')
-      cy.getTestId('route-form-service-id').should('be.visible')
-      cy.getTestId('route-form-tags').should('be.visible')
-
-      // advanced fields
-      cy.getTestId('collapse-trigger-content').should('be.visible').click()
-      cy.getTestId('route-form-path-handling').should('be.visible')
-      cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
-      cy.getTestId('route-form-regex-priority').should('be.visible')
-      cy.getTestId('route-form-strip-path').should('be.visible')
-      cy.getTestId('route-form-preserve-host').should('be.visible')
-
-      // routing rules fields
-      cy.getTestId('route-form-protocols').should('be.visible')
-
-      // paths
-      cy.getTestId('route-form-paths-input-1').should('be.visible')
-      cy.getTestId('add-paths').should('be.visible').click()
-      cy.getTestId('route-form-paths-input-2').should('be.visible')
-      cy.getTestId('remove-paths').first().should('be.visible').click()
-      cy.getTestId('route-form-paths-input-2').should('not.exist')
-
-      cy.getTestId('route-form-paths-input-1').should('be.visible')
-      cy.getTestId('remove-paths').first().should('be.visible').click()
-      cy.get('.route-form-routing-rules-selector-options').should('be.visible')
-
-      // snis
-      cy.getTestId('routing-rule-snis').should('be.visible').click()
-      cy.getTestId('route-form-snis-input-1').should('be.visible')
-      cy.getTestId('add-snis').should('be.visible').click()
-      cy.getTestId('route-form-snis-input-2').should('be.visible')
-      cy.getTestId('remove-snis').first().should('be.visible').click()
-      cy.getTestId('route-form-snis-input-2').should('not.exist')
-
-      // hosts
-      cy.getTestId('routing-rule-hosts').should('be.visible').click()
-      cy.getTestId('route-form-hosts-input-1').should('be.visible')
-      cy.getTestId('add-hosts').should('be.visible').click()
-      cy.getTestId('route-form-hosts-input-2').should('be.visible')
-      cy.getTestId('remove-hosts').first().should('be.visible').click()
-      cy.getTestId('route-form-hosts-input-2').should('not.exist')
-
-      // methods and custom methods
-      cy.getTestId('routing-rule-methods').should('be.visible').click()
-      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'true')
-      cy.getTestId('get-method-toggle').should('exist')
-      cy.getTestId('post-method-toggle').should('exist')
-      cy.getTestId('put-method-toggle').should('exist')
-      cy.getTestId('custom-method-toggle').should('exist').check({ force: true })
-      cy.getTestId('route-form-custom-method-input-1').should('be.visible')
-      cy.getTestId('add-custom-method').should('be.visible').click()
-      cy.getTestId('route-form-custom-method-input-2').should('be.visible')
-      cy.getTestId('remove-custom-method').first().should('be.visible').click()
-      cy.getTestId('route-form-custom-method-input-2').should('not.exist')
-      cy.getTestId('remove-methods').should('be.visible').click()
-      cy.getTestId('get-method-toggle').should('not.exist')
-      cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'false')
-
-      // headers
-      cy.getTestId('routing-rule-headers').should('be.visible').click()
-      cy.getTestId('route-form-headers-name-input-1').should('be.visible')
-      cy.getTestId('route-form-headers-values-input-1').should('be.visible')
-      cy.getTestId('add-headers').should('be.visible').click()
-      cy.getTestId('route-form-headers-name-input-2').should('be.visible')
-      cy.getTestId('route-form-headers-values-input-2').should('be.visible')
-      cy.getTestId('remove-headers').first().should('be.visible').click()
-      cy.getTestId('route-form-headers-name-input-2').should('not.exist')
-      cy.getTestId('route-form-headers-values-input-2').should('not.exist')
+      cy.intercept('POST', `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/routes`, handler).as('createRoute')
+      cy.intercept('PUT', `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/routes/*`, handler).as('editRoute')
+    }
 
-      cy.getTestId('route-form-protocols').click({ force: true })
-      cy.get("[data-testid='select-item-tcp,tls,udp']").click()
-      cy.getTestId('routing-rule-paths').should('not.exist')
-      cy.getTestId('routing-rule-hosts').should('not.exist')
-      cy.getTestId('routing-rule-methods').should('not.exist')
-      cy.getTestId('routing-rule-headers').should('not.exist')
-
-      // sources
-      cy.getTestId('routing-rule-sources').should('be.visible').click()
-      cy.getTestId('route-form-sources-ip-input-1').should('be.visible')
-      cy.getTestId('route-form-sources-port-input-1').should('be.visible')
-      cy.getTestId('add-sources').should('be.visible').click()
-      cy.getTestId('route-form-sources-ip-input-2').should('be.visible')
-      cy.getTestId('route-form-sources-port-input-2').should('be.visible')
-      cy.getTestId('remove-sources').first().should('be.visible').click()
-      cy.getTestId('route-form-sources-ip-input-2').should('not.exist')
-      cy.getTestId('route-form-sources-port-input-2').should('not.exist')
-
-      // destinations
-      cy.getTestId('routing-rule-destinations').should('be.visible').click()
-      cy.getTestId('route-form-destinations-ip-input-1').should('be.visible')
-      cy.getTestId('route-form-destinations-port-input-1').should('be.visible')
-      cy.getTestId('add-destinations').should('be.visible').click()
-      cy.getTestId('route-form-destinations-ip-input-2').should('be.visible')
-      cy.getTestId('route-form-destinations-port-input-2').should('be.visible')
-      cy.getTestId('remove-destinations').first().should('be.visible').click()
-      cy.getTestId('route-form-destinations-ip-input-2').should('not.exist')
-      cy.getTestId('route-form-destinations-port-input-2').should('not.exist')
-    })
+    // Tests 2 possible RouteFlavors: <not-set>, <trad only>
+    for (const routeFlavors of [undefined, TRADITIONAL_ONLY]) {
+      const configTabs = `tabs=${formatRouteFlavors(routeFlavors)}`
 
-    it('should correctly handle button state - create', () => {
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-        },
+      it(`should show create form, ${configTabs}`, () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+            routeFlavors,
+          },
+        })
+
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.get('.kong-ui-entities-route-form form').should('be.visible')
+
+        // button state
+        cy.getTestId('form-cancel').should('be.visible')
+        cy.getTestId('form-submit').should('be.visible')
+        cy.getTestId('form-cancel').should('be.enabled')
+        cy.getTestId('form-submit').should('be.disabled')
+
+        // config tabs is hidden when there is only one tab
+        cy.getTestId('route-form-config-tabs')
+          .should(routeFlavors?.traditional && routeFlavors?.expressions ? 'be.visible' : 'not.exist')
+
+        // base + base advanced fields
+        cy.getTestId('collapse-trigger-content').click()
+        cy.getTestId('route-form-name').should('be.visible')
+        cy.getTestId('route-form-service-id').should('be.visible')
+        cy.getTestId('route-form-tags').should('be.visible')
+        cy.getTestId('route-form-protocols').should('be.visible')
+
+        if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to trad tab
+          cy.get('#traditional-tab').click()
+        } // else: we will be on the trad tab by default
+
+        if (routeFlavors?.traditional) {
+          // base advanced fields
+          cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
+          cy.getTestId('route-form-preserve-host').should('be.visible')
+          cy.getTestId('route-form-strip-path').should('be.visible')
+          cy.getTestId('route-form-request-buffering').should('be.visible')
+          cy.getTestId('route-form-response-buffering').should('be.visible')
+
+          // other advanced fields
+          cy.getTestId('route-form-path-handling').should('be.visible')
+          cy.getTestId('route-form-regex-priority').should('be.visible')
+
+          // paths
+          cy.getTestId('route-form-paths-input-1').should('be.visible')
+          cy.getTestId('add-paths').should('be.visible').click()
+          cy.getTestId('route-form-paths-input-2').should('be.visible')
+          cy.getTestId('remove-paths').first().should('be.visible').click()
+          cy.getTestId('route-form-paths-input-2').should('not.exist')
+
+          cy.getTestId('route-form-paths-input-1').should('be.visible')
+          cy.getTestId('remove-paths').first().should('be.visible').click()
+          cy.get('.route-form-routing-rules-selector-options').should('be.visible')
+
+          // snis
+          cy.getTestId('routing-rule-snis').should('be.visible').click()
+          cy.getTestId('route-form-snis-input-1').should('be.visible')
+          cy.getTestId('add-snis').should('be.visible').click()
+          cy.getTestId('route-form-snis-input-2').should('be.visible')
+          cy.getTestId('remove-snis').first().should('be.visible').click()
+          cy.getTestId('route-form-snis-input-2').should('not.exist')
+
+          // hosts
+          cy.getTestId('routing-rule-hosts').should('be.visible').click()
+          cy.getTestId('route-form-hosts-input-1').should('be.visible')
+          cy.getTestId('add-hosts').should('be.visible').click()
+          cy.getTestId('route-form-hosts-input-2').should('be.visible')
+          cy.getTestId('remove-hosts').first().should('be.visible').click()
+          cy.getTestId('route-form-hosts-input-2').should('not.exist')
+
+          // methods and custom methods
+          cy.getTestId('routing-rule-methods').should('be.visible').click()
+          cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'true')
+          cy.getTestId('get-method-toggle').should('exist')
+          cy.getTestId('post-method-toggle').should('exist')
+          cy.getTestId('put-method-toggle').should('exist')
+          cy.getTestId('custom-method-toggle').should('exist').check({ force: true })
+          cy.getTestId('route-form-custom-method-input-1').should('be.visible')
+          cy.getTestId('add-custom-method').should('be.visible').click()
+          cy.getTestId('route-form-custom-method-input-2').should('be.visible')
+          cy.getTestId('remove-custom-method').first().should('be.visible').click()
+          cy.getTestId('route-form-custom-method-input-2').should('not.exist')
+          cy.getTestId('remove-methods').should('be.visible').click()
+          cy.getTestId('get-method-toggle').should('not.exist')
+          cy.getTestId('routing-rule-methods').should('have.attr', 'aria-disabled').and('eq', 'false')
+
+          // headers
+          cy.getTestId('routing-rule-headers').should('be.visible').click()
+          cy.getTestId('route-form-headers-name-input-1').should('be.visible')
+          cy.getTestId('route-form-headers-values-input-1').should('be.visible')
+          cy.getTestId('add-headers').should('be.visible').click()
+          cy.getTestId('route-form-headers-name-input-2').should('be.visible')
+          cy.getTestId('route-form-headers-values-input-2').should('be.visible')
+          cy.getTestId('remove-headers').first().should('be.visible').click()
+          cy.getTestId('route-form-headers-name-input-2').should('not.exist')
+          cy.getTestId('route-form-headers-values-input-2').should('not.exist')
+
+          cy.getTestId('route-form-protocols').click({ force: true })
+          cy.get("[data-testid='select-item-tcp,tls,udp']").click()
+          cy.getTestId('routing-rule-paths').should('not.exist')
+          cy.getTestId('routing-rule-hosts').should('not.exist')
+          cy.getTestId('routing-rule-methods').should('not.exist')
+          cy.getTestId('routing-rule-headers').should('not.exist')
+
+          // sources
+          cy.getTestId('routing-rule-sources').should('be.visible').click()
+          cy.getTestId('route-form-sources-ip-input-1').should('be.visible')
+          cy.getTestId('route-form-sources-port-input-1').should('be.visible')
+          cy.getTestId('add-sources').should('be.visible').click()
+          cy.getTestId('route-form-sources-ip-input-2').should('be.visible')
+          cy.getTestId('route-form-sources-port-input-2').should('be.visible')
+          cy.getTestId('remove-sources').first().should('be.visible').click()
+          cy.getTestId('route-form-sources-ip-input-2').should('not.exist')
+          cy.getTestId('route-form-sources-port-input-2').should('not.exist')
+
+          // destinations
+          cy.getTestId('routing-rule-destinations').should('be.visible').click()
+          cy.getTestId('route-form-destinations-ip-input-1').should('be.visible')
+          cy.getTestId('route-form-destinations-port-input-1').should('be.visible')
+          cy.getTestId('add-destinations').should('be.visible').click()
+          cy.getTestId('route-form-destinations-ip-input-2').should('be.visible')
+          cy.getTestId('route-form-destinations-port-input-2').should('be.visible')
+          cy.getTestId('remove-destinations').first().should('be.visible').click()
+          cy.getTestId('route-form-destinations-ip-input-2').should('not.exist')
+          cy.getTestId('route-form-destinations-port-input-2').should('not.exist')
+        } // if routeFlavors?.traditional
+
+        if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to expr tab
+          cy.get('#expressions-tab').click()
+        }
+
+        if (routeFlavors?.expressions) {
+          // negative: traditional fields should not exist
+          cy.getTestId('route-form-path-handling').should('not.exist')
+          cy.getTestId('route-form-regex-priority').should('not.exist')
+          cy.getTestId('route-form-paths-input-1').should('not.exist')
+          cy.get('.route-form-routing-rules-selector-options').should('not.exist')
+
+          // expressions editor
+          cy.get('.expression-editor .monaco-editor').should('be.visible')
+
+          // base advanced fields
+          cy.getTestId('route-form-http-redirect-status-code').should('be.visible')
+          cy.getTestId('route-form-preserve-host').should('be.visible')
+          cy.getTestId('route-form-strip-path').should('be.visible')
+          cy.getTestId('route-form-request-buffering').should('be.visible')
+          cy.getTestId('route-form-response-buffering').should('be.visible')
+        } // if routeFlavors?.expressions
       })
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // default button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // enables save when required fields have values
-      // form fields - general
-      cy.getTestId('route-form-name').should('be.visible')
-
-      // paths
-      cy.getTestId('route-form-paths-input-1').type(route.paths[0])
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-paths-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // snis
-      cy.getTestId('routing-rule-snis').click()
-      cy.getTestId('route-form-snis-input-1').type('sni')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-snis-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // hosts
-      cy.getTestId('routing-rule-hosts').click()
-      cy.getTestId('route-form-hosts-input-1').type('host')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-hosts-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // methods and custom methods
-      cy.getTestId('routing-rule-methods').click()
-      cy.getTestId('get-method-toggle').check({ force: true })
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('get-method-toggle').uncheck({ force: true })
-      cy.getTestId('form-submit').should('be.disabled')
-      cy.getTestId('custom-method-toggle').check({ force: true })
-      cy.getTestId('form-submit').should('be.disabled')
-      cy.getTestId('route-form-custom-method-input-1').type('castom')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-custom-method-input-1').clear()
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // headers
-      cy.getTestId('routing-rule-headers').click()
-      cy.getTestId('route-form-headers-name-input-1').type(Object.keys(route.headers)[0])
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-headers-name-input-1').clear()
-      cy.getTestId('route-form-headers-values-input-1').type(route.headers.Header1[0])
-      cy.getTestId('form-submit').should('be.disabled')
-
-      cy.getTestId('route-form-protocols').click({ force: true })
-      cy.get("[data-testid='select-item-tcp,tls,udp']").click()
-
-      // sources
-      cy.getTestId('routing-rule-sources').click()
-      cy.getTestId('route-form-sources-ip-input-1').type('127.0.0.1')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-sources-ip-input-1').clear()
-      cy.getTestId('route-form-sources-port-input-1').type('8080')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // destinations
-      cy.getTestId('routing-rule-destinations').click()
-      cy.getTestId('route-form-destinations-ip-input-1').type('127.0.0.2')
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('route-form-destinations-ip-input-1').clear()
-      cy.getTestId('route-form-destinations-port-input-1').type('8000')
-      cy.getTestId('form-submit').should('be.disabled')
-    })
-
-    it('should show edit form', () => {
-      interceptKonnect()
-      interceptKonnectServices()
+      if (!routeFlavors || routeFlavors?.traditional) {
+        // only test when there is trad tab
+        it(`should correctly handle button state - create traditional, ${configTabs}`, () => {
+          interceptKonnectServices()
+          stubCreateEdit()
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-          routeId: route.id,
-        },
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeFlavors,
+            },
+          })
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to trad tab
+            cy.get('#traditional-tab').click()
+          } // else: we will be on the trad tab by default
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // config tabs is hidden when there is only one tab
+          cy.getTestId('route-form-config-tabs')
+            .should(routeFlavors?.traditional && routeFlavors?.expressions ? 'be.visible' : 'not.exist')
+
+          // enables save when required fields have values
+          // form fields - general
+          cy.getTestId('route-form-name').should('be.visible')
+
+          // paths
+          cy.getTestId('route-form-paths-input-1').type(route.paths[0])
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-paths-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // snis
+          cy.getTestId('routing-rule-snis').click()
+          cy.getTestId('route-form-snis-input-1').type('sni')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-snis-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // hosts
+          cy.getTestId('routing-rule-hosts').click()
+          cy.getTestId('route-form-hosts-input-1').type('host')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-hosts-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // methods and custom methods
+          cy.getTestId('routing-rule-methods').click()
+          cy.getTestId('get-method-toggle').check({ force: true })
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('get-method-toggle').uncheck({ force: true })
+          cy.getTestId('form-submit').should('be.disabled')
+          cy.getTestId('custom-method-toggle').check({ force: true })
+          cy.getTestId('form-submit').should('be.disabled')
+          cy.getTestId('route-form-custom-method-input-1').type('castom')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-custom-method-input-1').clear()
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // headers
+          cy.getTestId('routing-rule-headers').click()
+          cy.getTestId('route-form-headers-name-input-1').type(Object.keys(route.headers)[0])
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-headers-name-input-1').clear()
+          cy.getTestId('route-form-headers-values-input-1').type(route.headers.Header1[0])
+          cy.getTestId('form-submit').should('be.disabled')
+
+          cy.getTestId('route-form-protocols').click({ force: true })
+          cy.get("[data-testid='select-item-tcp,tls,udp']").click()
+
+          // sources
+          cy.getTestId('routing-rule-sources').click()
+          cy.getTestId('route-form-sources-ip-input-1').type('127.0.0.1')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-sources-ip-input-1').clear()
+          cy.getTestId('route-form-sources-port-input-1').type('8080')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // destinations
+          cy.getTestId('routing-rule-destinations').click()
+          cy.getTestId('route-form-destinations-ip-input-1').type('127.0.0.2')
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('route-form-destinations-ip-input-1').clear()
+          cy.getTestId('route-form-destinations-port-input-1').type('8000')
+          cy.getTestId('form-submit').should('be.disabled')
+        })
+      } // if !routeFlavors || routeFlavors?.traditional
+
+      if (routeFlavors?.expressions) {
+        // only test when there is expr tab
+        it(`should correctly handle button state - create expressions, ${configTabs}`, () => {
+          interceptKonnectServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeFlavors,
+            },
+          })
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+          // trad + expr 2 tabs
+          // switch to expr tab
+            cy.get('#expressions-tab').click()
+          } // else: we will be on expr tab by default
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // enables save when required fields have values
+          // form fields - general
+          cy.getTestId('route-form-name').should('be.visible')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          // the editor shows invalid because it is empty
+          cy.get('.expression-editor').should('have.class', 'invalid')
+
+          // type a valid expression
+          cy.get('.monaco-editor').first().as('monacoEditor').click()
+          cy.get('@monacoEditor').type('http.path == "/kong"')
+
+          // it should be no longer invalid
+          cy.get('.expression-editor').should('not.have.class', 'invalid')
+          // and the submit button is enabled
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+
+          // delete the last character
+          cy.get('@monacoEditor').type('{backspace}')
+
+          // invalid again
+          cy.get('.expression-editor').should('have.class', 'invalid')
+          // but the submit button is still enabled because we let the server handle uncaught errors
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@createRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+        })
+      } // if routeFlavors?.expressions
+
+      if (!routeFlavors || routeFlavors?.traditional) {
+        // only test when there is trad tab
+        it(`should show edit form, traditional ${configTabs}`, () => {
+          interceptKonnect()
+          interceptKonnectServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeId: route.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // trad tab should be active by default
+            cy.get('#traditional-tab').should('have.class', 'active')
+          }
+
+          // form fields
+          cy.getTestId('route-form-name').should('have.value', route.name)
+          cy.getTestId('route-form-service-id').should('have.value', route.service.id)
+          cy.getTestId('route-form-tags').should('have.value', route.tags.join(', '))
+
+          cy.getTestId('collapse-trigger-content').click()
+          cy.getTestId('route-form-path-handling').should('have.value', route.path_handling)
+          cy.getTestId('route-form-regex-priority').should('have.value', route.regex_priority)
+          cy.getTestId('route-form-strip-path').should(`${route.strip_path ? '' : 'not.'}be.checked`)
+          cy.getTestId('route-form-preserve-host').should(`${route.preserve_host ? '' : 'not.'}be.checked`)
+
+          cy.getTestId('route-form-paths-input-1').should('have.value', route.paths[0])
+          cy.getTestId('route-form-paths-input-2').should('have.value', route.paths[1])
+          cy.getTestId(`${route.methods[0].toLowerCase()}-method-toggle`).should('be.checked')
+          cy.getTestId(`${route.methods[1].toLowerCase()}-method-toggle`).should('be.checked')
+          cy.getTestId('route-form-headers-name-input-1').should('have.value', Object.keys(route.headers)[0])
+          cy.getTestId('route-form-headers-values-input-1').should('have.value', route.headers.Header1.join(','))
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // switch to expr tab
+            cy.get('#expressions-tab').click()
+            // should not see the expression editor
+            cy.get('.expression-editor').should('not.exist')
+            // should be reminded that the route type cannot be changed
+            cy.getTestId('route-config-type-immutable-alert').should('contain.text', 'cannot be changed after creation')
+          }
+        })
+
+        it(`should correctly handle button state - edit traditional, ${configTabs}`, () => {
+          interceptKonnect()
+          interceptKonnectServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeId: route.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // trad tab should be active by default
+            cy.get('#traditional-tab').should('have.class', 'active')
+          }
+
+          cy.getTestId('routing-rules-warning').should('not.exist')
+
+          // enables save when form has changes
+          cy.getTestId('route-form-service-id').click({ force: true })
+          cy.get("[data-testid='select-item-2']").click()
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@editRoute').then((res) => res.response?.body?.kind).should('eq', 'trad')
+
+          cy.getTestId('remove-methods').click()
+          cy.getTestId('remove-paths').first().click()
+          cy.getTestId('remove-paths').click()
+          cy.getTestId('remove-headers').click()
+          cy.getTestId('routing-rules-warning').should('be.visible')
+          cy.getTestId('form-submit').should('be.disabled')
+        })
+      } // if !routeFlavors || routeFlavors?.traditional
+
+      if (routeFlavors?.expressions) {
+        // only test when there is trad tab
+        it(`should show edit form, expressions ${configTabs}`, () => {
+          interceptKonnect({ mockData: routeExpressions })
+          interceptKonnectServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeId: routeExpressions.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // expr tab should be active by default
+            cy.get('#expressions-tab').should('have.class', 'active')
+          }
+
+          // form fields
+          cy.getTestId('route-form-name').should('have.value', routeExpressions.name)
+          cy.getTestId('route-form-service-id').should('have.value', routeExpressions.service.id)
+          cy.getTestId('route-form-tags').should('have.value', routeExpressions.tags.join(', '))
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            cy.getTestId('collapse-trigger-content').click()
+            // switch to trad tab
+            cy.get('#traditional-tab').click()
+            // should not see trad fields
+            cy.getTestId('route-form-path-handling').should('not.exist')
+            cy.getTestId('route-form-regex-priority').should('not.exist')
+            // should be reminded that the route type cannot be changed
+            cy.getTestId('route-config-type-immutable-alert').should('contain.text', 'cannot be changed after creation')
+          }
+        })
+
+        it(`should correctly handle button state - edit expressions, ${configTabs}`, () => {
+          interceptKonnect({ mockData: routeExpressions })
+          interceptKonnectServices()
+          stubCreateEdit()
+
+          cy.mount(RouteForm, {
+            props: {
+              config: baseConfigKonnect,
+              routeId: routeExpressions.id,
+              routeFlavors,
+            },
+          })
+
+          cy.wait('@getRoute')
+          cy.wait('@getServices')
+
+          cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+          // default button state
+          cy.getTestId('form-cancel').should('be.visible')
+          cy.getTestId('form-submit').should('be.visible')
+          cy.getTestId('form-cancel').should('be.enabled')
+          cy.getTestId('form-submit').should('be.disabled')
+
+          if (routeFlavors?.traditional && routeFlavors?.expressions) {
+            // trad tab should be active by default
+            cy.get('#expressions-tab').should('have.class', 'active')
+          }
+
+          // enables save when form has changes
+          cy.getTestId('route-form-service-id').click({ force: true })
+          cy.get("[data-testid='select-item-2']").click()
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@editRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+
+          // type a valid expression
+          cy.get('.monaco-editor').first().as('monacoEditor').click()
+          // delete the last character
+          cy.get('@monacoEditor').type('{backspace}')
+
+          // the editor should become invalid
+          cy.get('.expression-editor').should('have.class', 'invalid')
+          // but the submit button is still enabled because we let the server handle uncaught errors
+          cy.getTestId('form-submit').should('be.enabled').click()
+          cy.wait('@editRoute').then((res) => res.response?.body?.kind).should('eq', 'expr')
+        })
+      } // if routeFlavors?.expressions
+
+      it('should correctly handle button state - edit', () => {
+        interceptKonnect()
+        interceptKonnectServices()
+
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+            routeId: route.id,
+          },
+        })
+
+        cy.wait('@getRoute')
+        cy.wait('@getServices')
+
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+
+        // default button state
+        cy.getTestId('form-cancel').should('be.visible')
+        cy.getTestId('form-submit').should('be.visible')
+        cy.getTestId('form-cancel').should('be.enabled')
+        cy.getTestId('form-submit').should('be.disabled')
+        cy.getTestId('routing-rules-warning').should('not.exist')
+
+        // enables save when form has changes
+        cy.getTestId('route-form-service-id').click({ force: true })
+        cy.get("[data-testid='select-item-2']").click()
+        cy.getTestId('form-submit').should('be.enabled')
+        cy.getTestId('remove-methods').click()
+        cy.getTestId('remove-paths').first().click()
+        cy.getTestId('remove-paths').click()
+        cy.getTestId('remove-headers').click()
+        cy.getTestId('routing-rules-warning').should('be.visible')
+        cy.getTestId('form-submit').should('be.disabled')
       })
 
-      cy.wait('@getRoute')
-      cy.wait('@getServices')
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-
-      // form fields
-      cy.getTestId('route-form-name').should('have.value', route.name)
-      cy.getTestId('route-form-service-id').should('have.value', route.service.id)
-      cy.getTestId('route-form-tags').should('have.value', route.tags.join(', '))
-      cy.getTestId('route-form-paths-input-1').should('have.value', route.paths[0])
-      cy.getTestId('route-form-paths-input-2').should('have.value', route.paths[1])
-      cy.getTestId(`${route.methods[0].toLowerCase()}-method-toggle`).should('be.checked')
-      cy.getTestId(`${route.methods[0].toLowerCase()}-method-toggle`).should('be.checked')
-      cy.getTestId('route-form-headers-name-input-1').should('have.value', Object.keys(route.headers)[0])
-      cy.getTestId('route-form-headers-values-input-1').should('have.value', route.headers.Header1.join(','))
-
-      cy.getTestId('collapse-trigger-content').click()
-      cy.getTestId('route-form-path-handling').should('have.value', route.path_handling)
-      cy.getTestId('route-form-regex-priority').should('have.value', route.regex_priority)
-      cy.getTestId('route-form-strip-path').should(`${route.strip_path ? '' : 'not.'}be.checked`)
-      cy.getTestId('route-form-preserve-host').should(`${route.preserve_host ? '' : 'not.'}be.checked`)
-    })
+      it('should handle error state - failed to load route', () => {
+        interceptKonnectServices()
 
-    it('should correctly handle button state - edit', () => {
-      interceptKonnect()
-      interceptKonnectServices()
-
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-          routeId: route.id,
-        },
-      })
+        cy.intercept(
+          {
+            method: 'GET',
+            url: `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/routes/*`,
+          },
+          {
+            statusCode: 404,
+            body: {},
+          },
+        ).as('getRoute')
 
-      cy.wait('@getRoute')
-      cy.wait('@getServices')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+            routeId: route.id,
+          },
+        })
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.wait('@getRoute')
+        cy.wait('@getServices')
 
-      // default button state
-      cy.getTestId('form-cancel').should('be.visible')
-      cy.getTestId('form-submit').should('be.visible')
-      cy.getTestId('form-cancel').should('be.enabled')
-      cy.getTestId('form-submit').should('be.disabled')
-      cy.getTestId('routing-rules-warning').should('not.exist')
-
-      // enables save when form has changes
-      cy.getTestId('route-form-service-id').click({ force: true })
-      cy.get("[data-testid='select-item-2']").click()
-      cy.getTestId('form-submit').should('be.enabled')
-      cy.getTestId('remove-methods').click()
-      cy.getTestId('remove-paths').first().click()
-      cy.getTestId('remove-paths').click()
-      cy.getTestId('remove-headers').click()
-      cy.getTestId('routing-rules-warning').should('be.visible')
-      cy.getTestId('form-submit').should('be.disabled')
-    })
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
 
-    it('should handle error state - failed to load route', () => {
-      interceptKonnectServices()
+        // error state is displayed
+        cy.getTestId('form-fetch-error').should('be.visible')
 
-      cy.intercept(
-        {
-          method: 'GET',
-          url: `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/routes/*`,
-        },
-        {
-          statusCode: 404,
-          body: {},
-        },
-      ).as('getRoute')
-
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-          routeId: route.id,
-        },
+        // buttons and form hidden
+        cy.getTestId('form-cancel').should('not.exist')
+        cy.getTestId('form-submit').should('not.exist')
+        cy.get('.kong-ui-entities-route-form form').should('not.exist')
       })
 
-      cy.wait('@getRoute')
-      cy.wait('@getServices')
+      it('should allow exact match filtering of certs', () => {
+        interceptKonnectServices()
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // error state is displayed
-      cy.getTestId('form-fetch-error').should('be.visible')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+          },
+        })
 
-      // buttons and form hidden
-      cy.getTestId('form-cancel').should('not.exist')
-      cy.getTestId('form-submit').should('not.exist')
-      cy.get('.kong-ui-entities-route-form form').should('not.exist')
-    })
+        cy.wait('@getServices')
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
 
-    it('should allow exact match filtering of certs', () => {
-      interceptKonnectServices()
+        // search
+        cy.getTestId('route-form-service-id').should('be.visible')
+        cy.getTestId('route-form-service-id').type(services[1].name)
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-        },
+        // click kselect item
+        cy.getTestId(`select-item-${services[1].id}`).should('be.visible')
+        cy.get(`[data-testid="select-item-${services[1].id}"] button`).click()
+        cy.getTestId('route-form-service-id').should('have.value', services[1].id)
       })
 
-      cy.wait('@getServices')
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-
-      // search
-      cy.getTestId('route-form-service-id').should('be.visible')
-      cy.getTestId('route-form-service-id').type(services[1].name)
-
-      // click kselect item
-      cy.getTestId(`select-item-${services[1].id}`).should('be.visible')
-      cy.get(`[data-testid="select-item-${services[1].id}"] button`).click()
-      cy.getTestId('route-form-service-id').should('have.value', services[1].id)
-    })
+      it('should handle error state - failed to load services', () => {
+        cy.intercept(
+          {
+            method: 'GET',
+            url: `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/services*`,
+          },
+          {
+            statusCode: 500,
+            body: {},
+          },
+        ).as('getServices')
 
-    it('should handle error state - failed to load services', () => {
-      cy.intercept(
-        {
-          method: 'GET',
-          url: `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/services*`,
-        },
-        {
-          statusCode: 500,
-          body: {},
-        },
-      ).as('getServices')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+          },
+        })
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-        },
+        cy.wait('@getServices')
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.getTestId('form-error').should('be.visible')
       })
 
-      cy.wait('@getServices')
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-      cy.getTestId('form-error').should('be.visible')
-    })
-
-    it('should correctly render with all props and slot content', () => {
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-          serviceId: services[0].id,
-          hideSectionsInfo: true,
-          hideNameField: true,
-          showTagsFiledUnderAdvanced: true,
-        },
-        slots: {
-          'form-actions': '<button data-testid="slotted-cancel-button">Cancel</button><button data-testid="slotted-submit-button">Submit</button>',
-        },
-      })
+      it('should correctly render with all props and slot content', () => {
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+            serviceId: services[0].id,
+            hideSectionsInfo: true,
+            hideNameField: true,
+            showTagsFiledUnderAdvanced: true,
+          },
+          slots: {
+            'form-actions': '<button data-testid="slotted-cancel-button">Cancel</button><button data-testid="slotted-submit-button">Submit</button>',
+          },
+        })
 
-      cy.get('.kong-ui-entities-route-form').should('be.visible')
-      cy.get('.kong-ui-entities-route-form form').should('be.visible')
+        cy.get('.kong-ui-entities-route-form').should('be.visible')
+        cy.get('.kong-ui-entities-route-form form').should('be.visible')
 
-      // name field should be hidden when hideNameField is true
-      cy.getTestId('route-form-name').should('not.exist')
+        // name field should be hidden when hideNameField is true
+        cy.getTestId('route-form-name').should('not.exist')
 
-      // tags field should render under advanced fields
-      cy.getTestId('route-form-tags').should('not.be.visible')
-      cy.getTestId('collapse-trigger-content').click()
-      cy.getTestId('route-form-tags').should('be.visible')
+        // tags field should render under advanced fields
+        cy.getTestId('route-form-tags').should('not.be.visible')
+        cy.getTestId('collapse-trigger-content').click()
+        cy.getTestId('route-form-tags').should('be.visible')
 
-      // service id field should be hidden when serviceId is provided
-      cy.getTestId('route-form-service-id').should('not.exist')
+        // service id field should be hidden when serviceId is provided
+        cy.getTestId('route-form-service-id').should('not.exist')
 
-      // sections info should be hidden when hideSectionsInfo is true
-      cy.get('.form-section-info sticky').should('not.exist')
+        // sections info should be hidden when hideSectionsInfo is true
+        cy.get('.form-section-info sticky').should('not.exist')
 
-      // default buttons should be replaced with slotted content
-      cy.getTestId('form-cancel').should('not.exist')
-      cy.getTestId('form-submit').should('not.exist')
-      cy.getTestId('slotted-cancel-button').should('be.visible')
-      cy.getTestId('slotted-submit-button').should('be.visible')
-    })
+        // default buttons should be replaced with slotted content
+        cy.getTestId('form-cancel').should('not.exist')
+        cy.getTestId('form-submit').should('not.exist')
+        cy.getTestId('slotted-cancel-button').should('be.visible')
+        cy.getTestId('slotted-submit-button').should('be.visible')
+      })
 
-    it('update event should be emitted when Route was edited', () => {
-      interceptKonnect()
-      interceptUpdate()
+      it('update event should be emitted when Route was edited', () => {
+        interceptKonnect()
+        interceptUpdate()
 
-      cy.mount(RouteForm, {
-        props: {
-          config: baseConfigKonnect,
-          routeId: route.id,
-          onUpdate: cy.spy().as('onUpdateSpy'),
-        },
-      }).then(({ wrapper }) => wrapper)
-        .as('vueWrapper')
+        cy.mount(RouteForm, {
+          props: {
+            config: baseConfigKonnect,
+            routeId: route.id,
+            onUpdate: cy.spy().as('onUpdateSpy'),
+          },
+        }).then(({ wrapper }) => wrapper)
+          .as('vueWrapper')
 
-      cy.wait('@getRoute')
-      cy.getTestId('route-form-tags').clear()
-      cy.getTestId('route-form-tags').type('tag1,tag2')
+        cy.wait('@getRoute')
+        cy.getTestId('route-form-tags').clear()
+        cy.getTestId('route-form-tags').type('tag1,tag2')
 
-      cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(EntityBaseForm)
-        .vm.$emit('submit'))
+        cy.get('@vueWrapper').then((wrapper: any) => wrapper.findComponent(EntityBaseForm)
+          .vm.$emit('submit'))
 
-      cy.wait('@updateRoute')
+        cy.wait('@updateRoute')
 
-      cy.get('@onUpdateSpy').should('have.been.calledOnce')
-    })
+        cy.get('@onUpdateSpy').should('have.been.calledOnce')
+      })
+    } // for RouteFlavors[]
   })
 })
diff --git a/packages/entities/entities-routes/src/components/RouteForm.vue b/packages/entities/entities-routes/src/components/RouteForm.vue
index 51ab640136..ab9a09ca2d 100644
--- a/packages/entities/entities-routes/src/components/RouteForm.vue
+++ b/packages/entities/entities-routes/src/components/RouteForm.vue
@@ -4,10 +4,10 @@
       :can-submit="isFormValid && changesExist"
       :config="config"
       :edit-id="routeId"
-      :error-message="form.errorMessage || fetchServicesErrorMessage"
+      :error-message="state.errorMessage || fetchServicesErrorMessage"
       :fetch-url="fetchUrl"
       :form-fields="getPayload"
-      :is-readonly="form.isReadonly"
+      :is-readonly="state.isReadonly"
       @cancel="cancelHandler"
       @fetch:error="fetchErrorHandler"
       @fetch:success="updateFormValues"
@@ -22,17 +22,17 @@
       >
         <KInput
           v-if="!hideNameField"
-          v-model.trim="form.fields.name"
+          v-model.trim="state.fields.name"
           autocomplete="off"
           data-testid="route-form-name"
           :label="t('form.fields.name.label')"
           :placeholder="t('form.fields.name.placeholder')"
-          :readonly="form.isReadonly"
+          :readonly="state.isReadonly"
           type="text"
         />
         <div v-if="hideServiceField ? false : !serviceId">
           <KSelect
-            v-model="form.fields.service_id"
+            v-model="state.fields.service_id"
             clearable
             data-testid="route-form-service-id"
             enable-filtering
@@ -41,7 +41,7 @@
             :label="t('form.fields.service_id.label')"
             :loading="loadingServices"
             :placeholder="t('form.fields.service_id.placeholder')"
-            :readonly="form.isReadonly"
+            :readonly="state.isReadonly"
             reuse-item-template
             width="100%"
             @query-change="debouncedServicesQuery"
@@ -67,230 +67,371 @@
         </div>
         <KInput
           v-if="!showTagsFiledUnderAdvanced"
-          v-model.trim="form.fields.tags"
+          v-model.trim="state.fields.tags"
           autocomplete="off"
           data-testid="route-form-tags"
           :help="t('form.fields.tags.help')"
           :label="t('form.fields.tags.label')"
           :placeholder="t('form.fields.tags.placeholder')"
-          :readonly="form.isReadonly"
+          :readonly="state.isReadonly"
           type="text"
         />
       </EntityFormSection>
+
       <EntityFormSection
         :description="t('form.sections.config.description')"
         :hide-info-header="hideSectionsInfo"
         :title="t('form.sections.config.title')"
       >
         <KSelect
-          v-model="form.fields.protocols"
+          v-model="state.fields.protocols"
           data-testid="route-form-protocols"
           :items="protocols"
           :label="t('form.fields.protocols.label')"
           :label-attributes="{ info: t('form.fields.protocols.tooltip') }"
-          :readonly="form.isReadonly"
+          :readonly="state.isReadonly"
           required
           width="100%"
         />
-        <KCard v-if="form.fields.protocols">
-          <template #title>
-            <div class="route-form-routing-rules-title-container">
-              <span
-                v-for="protocol in protocolsArr"
-                :key="protocol"
-                class="protocol-title"
-              >
-                {{ protocol.toUpperCase() }}
-              </span>
-              <span class="routing-rules-title">{{ t('form.sections.routingRules.title') }}</span>
-            </div>
+
+        <RouteFormConfigTabs
+          v-model="currentConfigHash"
+          :route-flavors="routeFlavors"
+          :tooltips="configTabTooltips"
+        >
+          <template
+            v-if="routeFlavors.traditional && routeFlavors.expressions && (!recordFlavor || recordFlavor !== currentConfigTab)"
+            #before-content
+          >
+            <KAlert
+              :appearance="!recordFlavor ? 'info' : 'warning'"
+              class="route-form-config-type-immutable-alert"
+              data-testid="route-config-type-immutable-alert"
+            >
+              <template #default>
+                <template v-if="!recordFlavor">
+                  {{ t('form.warning.cannotChangeFlavor.create') }}
+                </template>
+                <template v-else-if="recordFlavor !== currentConfigTab">
+                  {{ t('form.warning.cannotChangeFlavor.edit', { format: t(`form.flavors.${recordFlavor}`) }) }}
+                </template>
+              </template>
+            </KAlert>
           </template>
 
-          <KAlert
-            v-if="showRoutingRulesWarning"
-            appearance="warning"
-            data-testid="routing-rules-warning"
+          <!-- Traditional Route -->
+          <template
+            v-if="stateHasTraditionalFlavor(state)"
+            #traditional
           >
-            <template #default>
-              <i18nT keypath="form.warning.rulesMessage">
-                <template #protocol>
-                  <b>{{ protocolsLabels[form.fields.protocols] }}</b>
+            <template v-if="!recordFlavor || recordFlavor === RouteFlavor.TRADITIONAL">
+              <KCard v-if="state.fields.protocols">
+                <template #title>
+                  <div class="route-form-routing-rules-title-container">
+                    <span
+                      v-for="protocol in protocolsArr"
+                      :key="protocol"
+                      class="protocol-title"
+                    >
+                      {{ protocol.toUpperCase() }}
+                    </span>
+                    <span class="routing-rules-title">
+                      {{ t('form.sections.routingRules.title') }}
+                    </span>
+                  </div>
                 </template>
-                <template #routingRules>
-                  <i18nT :keypath="warningMessageRoutingRules[1] ? 'form.warning.multipleRules' : 'form.warning.singleRule'">
-                    <template #routingRules>
-                      <b>{{ warningMessageRoutingRules[0] }}</b>
-                    </template>
-                    <template #lastRoutingRule>
-                      <b>{{ warningMessageRoutingRules[1] }}</b>
+
+                <template #default>
+                  <KAlert
+                    v-if="showRoutingRulesWarning"
+                    appearance="warning"
+                    data-testid="routing-rules-warning"
+                  >
+                    <template #default>
+                      <i18nT keypath="form.warning.rulesMessage">
+                        <template #protocol>
+                          <b>{{ protocolsLabels[state.fields.protocols] }}</b>
+                        </template>
+                        <template #routingRules>
+                          <i18nT
+                            :keypath="warningMessageRoutingRules[1] ? 'form.warning.multipleRules' : 'form.warning.singleRule'"
+                          >
+                            <template #routingRules>
+                              <b>{{ warningMessageRoutingRules[0] }}</b>
+                            </template>
+                            <template #lastRoutingRule>
+                              <b>{{ warningMessageRoutingRules[1] }}</b>
+                            </template>
+                          </i18nT>
+                        </template>
+                      </i18nT>
                     </template>
-                  </i18nT>
+                  </KAlert>
+
+                  <!-- Routing Rules Fields -->
+                  <TransitionGroup name="appear">
+                    <!-- paths -->
+                    <RouteFormPathsFields
+                      v-if="state.fields.paths"
+                      key="paths-container"
+                      v-model="state.fields.paths"
+                      @add="handleAddRoutingRuleEntity(RoutingRulesEntities.PATHS)"
+                      @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.PATHS, index)"
+                    />
+
+                    <!-- snis -->
+                    <RouteFormSnisFields
+                      v-if="state.fields.snis"
+                      key="snis-container"
+                      v-model="state.fields.snis"
+                      @add="handleAddRoutingRuleEntity(RoutingRulesEntities.SNIS)"
+                      @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.SNIS, index)"
+                    />
+
+                    <!-- hosts -->
+                    <RouteFormHostsFields
+                      v-if="state.fields.hosts"
+                      key="hosts-container"
+                      v-model="state.fields.hosts"
+                      @add="handleAddRoutingRuleEntity(RoutingRulesEntities.HOSTS)"
+                      @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.HOSTS, index)"
+                    />
+
+                    <!-- methods -->
+                    <RouteFormMethodsFields
+                      v-if="state.fields.methods"
+                      key="methods-container"
+                      v-model="state.fields.methods"
+                      :custom-methods="customMethods"
+                      @remove="handleRemoveRoutingRuleEntity(RoutingRulesEntities.METHODS)"
+                      @update-custom-methods="(methods: string[]) => customMethods = methods"
+                    />
+
+                    <!-- headers -->
+                    <RouteFormHeadersFields
+                      v-if="state.fields.headers"
+                      key="headers-container"
+                      v-model="state.fields.headers"
+                      @add="handleAddRoutingRuleEntity(RoutingRulesEntities.HEADERS)"
+                      @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.HEADERS, index)"
+                    />
+
+                    <!-- sources -->
+                    <RouteFormSourcesFields
+                      v-if="state.fields.sources"
+                      key="sources-container"
+                      v-model="state.fields.sources"
+                      @add="handleAddRoutingRuleEntity(RoutingRulesEntities.SOURCES)"
+                      @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.SOURCES, index)"
+                    />
+
+                    <!-- destinations -->
+                    <RouteFormDestinationsFields
+                      v-if="state.fields.destinations"
+                      key="destinations-container"
+                      v-model="state.fields.destinations"
+                      @add="handleAddRoutingRuleEntity(RoutingRulesEntities.DESTINATIONS)"
+                      @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.DESTINATIONS, index)"
+                    />
+                  </TransitionGroup>
+
+                  <!-- routing rules selector  -->
+                  <div
+                    v-if="displayRoutingRulesSelector"
+                    class="route-form-routing-rules-selector-container"
+                  >
+                    <hr>
+                    <div class="route-form-routing-rules-selector-options">
+                      <ul>
+                        <li
+                          v-for="entity in routingRulesPerProtocolMap[state.fields.protocols]"
+                          :key="entity"
+                        >
+                          <label
+                            :aria-disabled="!!state.fields[entity as RoutingRuleEntity]"
+                            class="option"
+                            :class="{ 'is-selected': state.fields[entity as RoutingRuleEntity] }"
+                            :data-testid="`routing-rule-${entity}`"
+                            role="button"
+                            @click="handleAddRoutingRuleEntity(entity)"
+                          >
+                            {{ getRoutingRuleLabel(entity) }}
+                          </label>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
                 </template>
-              </i18nT>
+              </KCard>
+
+              <!-- Traditional Route Advanced Fields -->
+              <KCollapse
+                v-model="isAdvancedFieldsCollapsed"
+                class="route-form-advanced-fields-collapse"
+                trigger-alignment="leading"
+                :trigger-label="t('form.viewAdvancedFields')"
+              >
+                <div class="route-form-fields-container route-form-advanced-fields-container">
+                  <KSelect
+                    v-if="state.fields.paths"
+                    v-model="state.fields.path_handling"
+                    data-testid="route-form-path-handling"
+                    :items="pathHandlingOptions"
+                    :label="t('form.fields.path_handling.label')"
+                    :label-attributes="{ info: t('form.fields.path_handling.tooltip') }"
+                    :readonly="state.isReadonly"
+                    width="100%"
+                  />
+                  <KSelect
+                    v-model="state.fields.https_redirect_status_code"
+                    data-testid="route-form-http-redirect-status-code"
+                    :items="httpsRedirectStatusCodes"
+                    :label="t('form.fields.https_redirect_status_code.label')"
+                    :readonly="state.isReadonly"
+                    width="100%"
+                  />
+                  <KInput
+                    v-model="state.fields.regex_priority"
+                    autocomplete="off"
+                    data-testid="route-form-regex-priority"
+                    :label="t('form.fields.regex_priority.label')"
+                    :readonly="state.isReadonly"
+                    type="number"
+                  />
+                  <KInput
+                    v-if="showTagsFiledUnderAdvanced"
+                    v-model.trim="state.fields.tags"
+                    autocomplete="off"
+                    data-testid="route-form-tags"
+                    :help="t('form.fields.tags.help')"
+                    :label="t('form.fields.tags.label')"
+                    :placeholder="t('form.fields.tags.placeholder')"
+                    :readonly="state.isReadonly"
+                    type="text"
+                  />
+                  <KCheckbox
+                    v-if="isProtocolSelected(['http', 'https', 'ws', 'wss', 'tls', 'tcp', 'udp', 'tls_passthrough'])"
+                    v-model="state.fields.strip_path"
+                    data-testid="route-form-strip-path"
+                    :label="t('form.fields.strip_path.label')"
+                  />
+                  <KCheckbox
+                    v-model="state.fields.preserve_host"
+                    data-testid="route-form-preserve-host"
+                    :label="t('form.fields.preserve_host.label')"
+                  />
+                  <KCheckbox
+                    v-model="state.fields.request_buffering"
+                    data-testid="route-form-request-buffering"
+                    :label="t('form.fields.request_buffering.label')"
+                  />
+                  <KCheckbox
+                    v-model="state.fields.response_buffering"
+                    data-testid="route-form-response-buffering"
+                    :label="t('form.fields.response_buffering.label')"
+                  />
+                </div>
+              </KCollapse>
             </template>
-          </KAlert>
-
-          <!-- Routing Rules Fields -->
-          <TransitionGroup name="appear">
-            <!-- paths -->
-            <RouteFormPathsFields
-              v-if="form.fields.paths"
-              key="paths-container"
-              v-model="form.fields.paths"
-              @add="handleAddRoutingRuleEntity(RoutingRulesEntities.PATHS)"
-              @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.PATHS, index)"
-            />
-
-            <!-- snis -->
-            <RouteFormSnisFields
-              v-if="form.fields.snis"
-              key="snis-container"
-              v-model="form.fields.snis"
-              @add="handleAddRoutingRuleEntity(RoutingRulesEntities.SNIS)"
-              @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.SNIS, index)"
-            />
-
-            <!-- hosts -->
-            <RouteFormHostsFields
-              v-if="form.fields.hosts"
-              key="hosts-container"
-              v-model="form.fields.hosts"
-              @add="handleAddRoutingRuleEntity(RoutingRulesEntities.HOSTS)"
-              @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.HOSTS, index)"
-            />
-
-            <!-- methods -->
-            <RouteFormMethodsFields
-              v-if="form.fields.methods"
-              key="methods-container"
-              v-model="form.fields.methods"
-              :custom-methods="customMethods"
-              @remove="handleRemoveRoutingRuleEntity(RoutingRulesEntities.METHODS)"
-              @update-custom-methods="(methods: string[]) => customMethods = methods"
-            />
-
-            <!-- headers -->
-            <RouteFormHeadersFields
-              v-if="form.fields.headers"
-              key="headers-container"
-              v-model="form.fields.headers"
-              @add="handleAddRoutingRuleEntity(RoutingRulesEntities.HEADERS)"
-              @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.HEADERS, index)"
-            />
-
-            <!-- sources -->
-            <RouteFormSourcesFields
-              v-if="form.fields.sources"
-              key="sources-container"
-              v-model="form.fields.sources"
-              @add="handleAddRoutingRuleEntity(RoutingRulesEntities.SOURCES)"
-              @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.SOURCES, index)"
-            />
-
-            <!-- destinations -->
-            <RouteFormDestinationsFields
-              v-if="form.fields.destinations"
-              key="destinations-container"
-              v-model="form.fields.destinations"
-              @add="handleAddRoutingRuleEntity(RoutingRulesEntities.DESTINATIONS)"
-              @remove="(index: number) => handleRemoveRoutingRuleEntity(RoutingRulesEntities.DESTINATIONS, index)"
-            />
-          </TransitionGroup>
-
-          <!-- routing rules selector  -->
-          <div
-            v-if="displayRoutingRulesSelector"
-            class="route-form-routing-rules-selector-container"
+          </template>
+
+          <template
+            v-if="stateHasExpressionsFlavor(state)"
+            #expressions
           >
-            <hr>
-            <div class="route-form-routing-rules-selector-options">
-              <ul>
-                <li
-                  v-for="entity in routingRulesPerProtocolMap[form.fields.protocols]"
-                  :key="entity"
+            <template v-if="!recordFlavor || recordFlavor === RouteFlavor.EXPRESSIONS">
+              <KCard v-if="state.fields.protocols">
+                <template #title>
+                  <div class="route-form-routing-rules-title-container">
+                    <span
+                      v-for="protocol in protocolsArr"
+                      :key="protocol"
+                      class="protocol-title"
+                    >
+                      {{ protocol.toUpperCase() }}
+                    </span>
+                    <span class="routing-rules-title">
+                      {{ t('form.sections.routingExpression.title') }}
+                    </span>
+                  </div>
+                </template>
+
+                <RouteFormExpressionsEditorLoader
+                  v-model="state.fields.expression"
+                  :protocol="exprEditorProtocol"
                 >
-                  <label
-                    :aria-disabled="!!form.fields[entity as RoutingRuleEntity]"
-                    class="option"
-                    :class="{ 'is-selected': form.fields[entity as RoutingRuleEntity] }"
-                    :data-testid="`routing-rule-${entity}`"
-                    role="button"
-                    @click="handleAddRoutingRuleEntity(entity)"
-                  >
-                    {{ getRoutingRuleLabel(entity) }}
-                  </label>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </KCard>
-
-        <!-- Advanced Fields -->
-        <KCollapse
-          trigger-alignment="leading"
-          :trigger-label="t('form.viewAdvancedFields')"
-        >
-          <div class="route-form-fields-container route-form-advanced-fields-container">
-            <KSelect
-              v-if="form.fields.paths"
-              v-model="form.fields.path_handling"
-              data-testid="route-form-path-handling"
-              :items="pathHandlingOptions"
-              :label="t('form.fields.path_handling.label')"
-              :label-attributes="{ info: t('form.fields.path_handling.tooltip') }"
-              :readonly="form.isReadonly"
-              width="100%"
-            />
-            <KSelect
-              v-model="form.fields.https_redirect_status_code"
-              data-testid="route-form-http-redirect-status-code"
-              :items="httpsRedirectStatusCodes"
-              :label="t('form.fields.https_redirect_status_code.label')"
-              :readonly="form.isReadonly"
-              width="100%"
-            />
-            <KInput
-              v-model="form.fields.regex_priority"
-              autocomplete="off"
-              data-testid="route-form-regex-priority"
-              :label="t('form.fields.regex_priority.label')"
-              :readonly="form.isReadonly"
-              type="number"
-            />
-            <KInput
-              v-if="showTagsFiledUnderAdvanced"
-              v-model.trim="form.fields.tags"
-              autocomplete="off"
-              data-testid="route-form-tags"
-              :help="t('form.fields.tags.help')"
-              :label="t('form.fields.tags.label')"
-              :placeholder="t('form.fields.tags.placeholder')"
-              :readonly="form.isReadonly"
-              type="text"
-            />
-            <KCheckbox
-              v-if="isProtocolSelected(['http', 'https', 'ws', 'wss', 'tls', 'tcp', 'udp', 'tls_passthrough'])"
-              v-model="form.fields.strip_path"
-              data-testid="route-form-strip-path"
-              :label="t('form.fields.strip_path.label')"
-            />
-            <KCheckbox
-              v-model="form.fields.preserve_host"
-              data-testid="route-form-preserve-host"
-              :label="t('form.fields.preserve_host.label')"
-            />
-            <KCheckbox
-              v-model="form.fields.request_buffering"
-              data-testid="route-form-request-buffering"
-              :label="t('form.fields.request_buffering.label')"
-            />
-            <KCheckbox
-              v-model="form.fields.response_buffering"
-              data-testid="route-form-response-buffering"
-              :label="t('form.fields.response_buffering.label')"
-            />
-          </div>
-        </KCollapse>
+                  <template #after-editor="editor">
+                    <slot
+                      :expression="editor.expression"
+                      name="after-expressions-editor"
+                      :state="editor.state"
+                    />
+                  </template>
+                </RouteFormExpressionsEditorLoader>
+              </KCard>
+
+              <!-- Expressions Route Advanced Fields -->
+              <KCollapse
+                v-model="isAdvancedFieldsCollapsed"
+                class="route-form-advanced-fields-collapse"
+                trigger-alignment="leading"
+                :trigger-label="t('form.viewAdvancedFields')"
+              >
+                <div class="route-form-fields-container route-form-advanced-fields-container">
+                  <KSelect
+                    v-model="state.fields.https_redirect_status_code"
+                    data-testid="route-form-http-redirect-status-code"
+                    :items="httpsRedirectStatusCodes"
+                    :label="t('form.fields.https_redirect_status_code.label')"
+                    :readonly="state.isReadonly"
+                    width="100%"
+                  />
+                  <KInput
+                    v-model="state.fields.priority"
+                    autocomplete="off"
+                    data-testid="route-form-priority"
+                    :label="t('form.fields.priority.label')"
+                    :label-attributes="{ info: t('form.fields.priority.tooltip') }"
+                    :readonly="state.isReadonly"
+                    type="number"
+                  />
+                  <KInput
+                    v-if="showTagsFiledUnderAdvanced"
+                    v-model.trim="state.fields.tags"
+                    autocomplete="off"
+                    data-testid="route-form-tags"
+                    :help="t('form.fields.tags.help')"
+                    :label="t('form.fields.tags.label')"
+                    :placeholder="t('form.fields.tags.placeholder')"
+                    :readonly="state.isReadonly"
+                    type="text"
+                  />
+                  <KCheckbox
+                    v-if="isProtocolSelected(['http', 'https', 'ws', 'wss', 'tls', 'tcp', 'udp', 'tls_passthrough'])"
+                    v-model="state.fields.strip_path"
+                    data-testid="route-form-strip-path"
+                    :label="t('form.fields.strip_path.label')"
+                  />
+                  <KCheckbox
+                    v-model="state.fields.preserve_host"
+                    data-testid="route-form-preserve-host"
+                    :label="t('form.fields.preserve_host.label')"
+                  />
+                  <KCheckbox
+                    v-model="state.fields.request_buffering"
+                    data-testid="route-form-request-buffering"
+                    :label="t('form.fields.request_buffering.label')"
+                  />
+                  <KCheckbox
+                    v-model="state.fields.response_buffering"
+                    data-testid="route-form-response-buffering"
+                    :label="t('form.fields.response_buffering.label')"
+                  />
+                </div>
+              </KCollapse>
+            </template>
+          </template>
+        </RouteFormConfigTabs>
       </EntityFormSection>
 
       <template #form-actions>
@@ -307,46 +448,59 @@
 
 <script lang="ts" setup>
 import {
+  EntityBaseForm,
+  EntityBaseFormType,
+  EntityFormSection,
   useAxios,
-  useErrors,
   useDebouncedFilter,
+  useErrors,
   useGatewayFeatureSupported,
-  EntityFormSection,
-  EntityBaseForm,
-  EntityBaseFormType,
 } from '@kong-ui-public/entities-shared'
-import composables from '../composables'
-import '@kong-ui-public/entities-shared/dist/style.css'
+import type { SelectItem } from '@kong/kongponents'
+import type { AxiosError, AxiosResponse } from 'axios'
+import isEqual from 'lodash.isequal'
 import type { PropType } from 'vue'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import composables from '../composables'
+import endpoints from '../routes-endpoints'
 import type {
-  KonnectRouteFormConfig,
+  BaseRoutePayload,
+  BaseRouteStateFields,
+  Destinations,
+  ExpressionsRoutePayload,
+  ExpressionsRouteStateFields,
+  HeaderFields,
+  Headers,
   KongManagerRouteFormConfig,
-  RouteStateFields,
-  RouteState,
-  RoutePayload,
-  RoutingRuleEntity,
+  KonnectRouteFormConfig,
   Method,
-  HeaderFields,
   MethodsFields,
-  Sources,
-  Destinations,
-  Headers,
   Protocol,
+  RouteFlavors,
+  RouteState,
+  RoutingRuleEntity,
+  Sources,
+  TraditionalRoutePayload,
+  TraditionalRouteStateFields,
 } from '../types'
-import { RoutingRulesEntities } from '../types'
-import { useRouter } from 'vue-router'
-import type { AxiosError, AxiosResponse } from 'axios'
-import endpoints from '../routes-endpoints'
-import RouteFormPathsFields from './RouteFormPathsFields.vue'
-import RouteFormSnisFields from './RouteFormSnisFields.vue'
+import {
+  RouteFlavor,
+  RoutingRulesEntities,
+  stateHasExpressionsFlavor,
+  stateHasTraditionalFlavor,
+} from '../types'
+import RouteFormDestinationsFields from './RouteFormDestinationsFields.vue'
+import RouteFormHeadersFields from './RouteFormHeadersFields.vue'
 import RouteFormHostsFields from './RouteFormHostsFields.vue'
 import RouteFormMethodsFields from './RouteFormMethodsFields.vue'
-import RouteFormHeadersFields from './RouteFormHeadersFields.vue'
+import RouteFormPathsFields from './RouteFormPathsFields.vue'
+import RouteFormSnisFields from './RouteFormSnisFields.vue'
 import RouteFormSourcesFields from './RouteFormSourcesFields.vue'
-import RouteFormDestinationsFields from './RouteFormDestinationsFields.vue'
-import { isRoutePayloadValid } from '../utilities'
-import type { SelectItem } from '@kong/kongponents'
+
+import '@kong-ui-public/entities-shared/dist/style.css'
+import RouteFormConfigTabs from './RouteFormConfigTabs.vue'
+import RouteFormExpressionsEditorLoader from './RouteFormExpressionsEditorLoader.vue'
 
 // Component props - This structure must exist in ALL entity components, with the exclusion of unneeded action props (e.g. if you don't need `canDelete`, just exclude it)
 const props = defineProps({
@@ -398,15 +552,68 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  /** Route flavors to be enabled for this form */
+  routeFlavors: {
+    type: Object as PropType<RouteFlavors>,
+    required: false,
+    default: () => ({
+      traditional: true,
+    }),
+  },
+  /** Tooltips to show on config tabs */
+  configTabTooltips: {
+    type: Object as PropType<{
+      [RouteFlavor.TRADITIONAL]?: string,
+      [RouteFlavor.EXPRESSIONS]?: string,
+    } | undefined>,
+    required: false,
+    default: () => undefined,
+  },
 })
 
 const emit = defineEmits<{
-  (e: 'update', data: RoutePayload): void,
+  (e: 'update', data: BaseRoutePayload): void,
   (e: 'error', error: AxiosError): void,
   (e: 'loading', isLoading: boolean): void,
-  (e: 'model-updated', val: RoutePayload): void,
+  (e: 'model-updated', val: BaseRoutePayload): void,
 }>()
 
+const currentConfigHash = ref<string>(
+  props.routeFlavors.traditional
+    ? `#${RouteFlavor.TRADITIONAL}`
+    : props.routeFlavors.expressions
+      ? `#${RouteFlavor.EXPRESSIONS}`
+      : '')
+
+const currentConfigTab = computed<RouteFlavor | undefined>(() => {
+  if (currentConfigHash.value) {
+    return currentConfigHash.value.substring(1) as RouteFlavor
+  }
+
+  return undefined
+})
+
+const recordFlavor = ref<RouteFlavor | undefined>(undefined)
+const isAdvancedFieldsCollapsed = ref<boolean>(true)
+
+const payloadFlavor = computed<RouteFlavor | undefined>(() => {
+  if (recordFlavor.value) {
+    return recordFlavor.value
+  }
+
+  if (currentConfigTab.value) {
+    return currentConfigTab.value as RouteFlavor
+  }
+
+  if (props.routeFlavors.traditional) {
+    return RouteFlavor.TRADITIONAL
+  } else if (props.routeFlavors.expressions) {
+    return RouteFlavor.EXPRESSIONS
+  }
+
+  return undefined
+})
+
 const { i18nT, i18n, i18n: { t } } = composables.useI18n()
 const protocolsLabels = i18n.source.form.protocols as Record<string, string>
 const router = useRouter()
@@ -419,38 +626,55 @@ const getSelectedService = (item: any) => {
   return item.name ? `${item.name} - ${item.value}` : item.value
 }
 
-const form = reactive<RouteState>({
+/** Declare as BaseRouteStateFields but use type narrowing helper functions to allow accessing more fields */
+const state = reactive<RouteState<BaseRouteStateFields>>({
+  routeFlavors: props.routeFlavors,
   fields: {
-    service_id: '',
     name: '',
-    tags: '',
-    regex_priority: 0,
-    path_handling: 'v0',
-    preserve_host: false,
-    https_redirect_status_code: 426,
     protocols: 'http,https',
+    https_redirect_status_code: 426,
+    strip_path: true,
+    preserve_host: false,
     request_buffering: true,
     response_buffering: true,
-    strip_path: true,
-    ...(!props.routeId && { paths: [''] }),
+    tags: '',
+    service_id: '',
+    ...{
+      ...(!props.routeId && { paths: [''] }),
+      regex_priority: 0,
+      path_handling: 'v0',
+    } as TraditionalRouteStateFields,
+    ...{
+      expression: '',
+      priority: 0,
+    } as ExpressionsRouteStateFields,
   },
   isReadonly: false,
   errorMessage: '',
 })
+
+const exprEditorProtocol = computed(() => state.fields.protocols.split(',')[0])
+
 const customMethods = ref<string[]>([''])
 
-const originalFields = reactive<RouteStateFields>({
-  service_id: '',
+const originalFields = reactive<BaseRouteStateFields>({
   name: '',
-  tags: '',
-  regex_priority: 0,
-  path_handling: 'v0',
-  preserve_host: false,
-  https_redirect_status_code: 426,
   protocols: 'http,https',
+  https_redirect_status_code: 426,
+  strip_path: true,
+  preserve_host: false,
   request_buffering: true,
   response_buffering: true,
-  strip_path: true,
+  tags: '',
+  service_id: '',
+  ...{
+    path_handling: 'v0',
+    regex_priority: 0,
+  } as TraditionalRouteStateFields,
+  ...{
+    expression: '',
+    priority: 0,
+  } as ExpressionsRouteStateFields,
 })
 
 const initialRoutingRulesValues = {
@@ -568,12 +792,16 @@ const fetchErrorHandler = (err: AxiosError): void => {
 }
 
 const setMethods = (methods: Method[]): void => {
-  form.fields.methods = initialRoutingRulesValues[RoutingRulesEntities.METHODS]
-  methods.forEach(method => {
-    if (form.fields.methods) {
-      form.fields.methods[method] = true
-    }
-  })
+  if (stateHasTraditionalFlavor(state)) {
+    // traditional
+
+    state.fields.methods = initialRoutingRulesValues[RoutingRulesEntities.METHODS]
+    methods.forEach(method => {
+      if (state.fields.methods) {
+        state.fields.methods[method] = true
+      }
+    })
+  }
 }
 
 const formatHeaders = (items: Headers): HeaderFields[] => {
@@ -583,7 +811,7 @@ const formatHeaders = (items: Headers): HeaderFields[] => {
 }
 
 const isProtocolSelected = (protocols: string[]): boolean => {
-  return protocols.some(protocol => form.fields.protocols.includes(protocol))
+  return protocols.some(protocol => state.fields.protocols.includes(protocol))
 }
 
 // removes any empty values left behind by empty fields on the form
@@ -603,106 +831,120 @@ const cleanDataArr = (entity: string, originalData: any) => {
 }
 
 const getHeaders = (): Headers | null => {
-  const headers: HeaderFields[] = cleanDataArr(RoutingRulesEntities.HEADERS, form.fields.headers || []) || initialRoutingRulesValues[RoutingRulesEntities.HEADERS]
-  if (headers.length === 0) {
-    return null
-  }
-  const headerObj = {} as Headers
+  if (stateHasTraditionalFlavor(state)) {
+    const headers: HeaderFields[] = cleanDataArr(RoutingRulesEntities.HEADERS, state.fields.headers || []) || initialRoutingRulesValues[RoutingRulesEntities.HEADERS]
+    if (headers.length === 0) {
+      return null
+    }
+    const headerObj = {} as Headers
 
-  headers.forEach(item => {
-    headerObj[item.header] = item.values.split(',')
-  })
+    headers.forEach(item => {
+      headerObj[item.header] = item.values.split(',')
+    })
+
+    return headerObj
+  }
 
-  return headerObj
+  return null
 }
 
 const handleAddRoutingRuleEntity = (entity: string): void => {
-  if (entity === RoutingRulesEntities.PATHS) {
-    if (!form.fields.paths) {
-      // spread objects and arrays to avoid mutating the original values
-      form.fields.paths = [...initialRoutingRulesValues[RoutingRulesEntities.PATHS]]
-    } else {
-      form.fields.paths.push([...initialRoutingRulesValues[RoutingRulesEntities.PATHS]][0])
+  if (stateHasTraditionalFlavor(state)) {
+    if (entity) {
+      if (entity === RoutingRulesEntities.PATHS) {
+        if (!state.fields.paths) {
+          // spread objects and arrays to avoid mutating the original values
+          state.fields.paths = [...initialRoutingRulesValues[RoutingRulesEntities.PATHS]]
+        } else {
+          state.fields.paths.push([...initialRoutingRulesValues[RoutingRulesEntities.PATHS]][0])
+        }
+      }
     }
-  }
 
-  if (entity === RoutingRulesEntities.SNIS) {
-    if (!form.fields.snis) {
-      form.fields.snis = [...initialRoutingRulesValues[RoutingRulesEntities.SNIS]]
-    } else {
-      form.fields.snis.push([...initialRoutingRulesValues[RoutingRulesEntities.SNIS]][0])
+    if (entity === RoutingRulesEntities.SNIS) {
+      if (!state.fields.snis) {
+        state.fields.snis = [...initialRoutingRulesValues[RoutingRulesEntities.SNIS]]
+      } else {
+        state.fields.snis.push([...initialRoutingRulesValues[RoutingRulesEntities.SNIS]][0])
+      }
     }
-  }
 
-  if (entity === RoutingRulesEntities.HOSTS) {
-    if (!form.fields.hosts) {
-      form.fields.hosts = [...initialRoutingRulesValues[RoutingRulesEntities.HOSTS]]
-    } else {
-      form.fields.hosts.push([...initialRoutingRulesValues[RoutingRulesEntities.HOSTS]][0])
+    if (entity === RoutingRulesEntities.HOSTS) {
+      if (!state.fields.hosts) {
+        state.fields.hosts = [...initialRoutingRulesValues[RoutingRulesEntities.HOSTS]]
+      } else {
+        state.fields.hosts.push([...initialRoutingRulesValues[RoutingRulesEntities.HOSTS]][0])
+      }
     }
-  }
 
-  if (entity === RoutingRulesEntities.METHODS) {
-    if (!form.fields.methods) {
-      form.fields.methods = { ...initialRoutingRulesValues[RoutingRulesEntities.METHODS] }
+    if (entity === RoutingRulesEntities.METHODS) {
+      if (!state.fields.methods) {
+        state.fields.methods = { ...initialRoutingRulesValues[RoutingRulesEntities.METHODS] }
+      }
     }
-  }
 
-  if (entity === RoutingRulesEntities.HEADERS) {
-    if (!form.fields.headers) {
-      form.fields.headers = [{ ...initialRoutingRulesValues[RoutingRulesEntities.HEADERS][0] }]
-    } else {
-      form.fields.headers.push({ ...initialRoutingRulesValues[RoutingRulesEntities.HEADERS][0] })
+    if (entity === RoutingRulesEntities.HEADERS) {
+      if (!state.fields.headers) {
+        state.fields.headers = [{ ...initialRoutingRulesValues[RoutingRulesEntities.HEADERS][0] }]
+      } else {
+        state.fields.headers.push({ ...initialRoutingRulesValues[RoutingRulesEntities.HEADERS][0] })
+      }
     }
-  }
 
-  if (entity === RoutingRulesEntities.SOURCES) {
-    if (!form.fields.sources) {
-      form.fields.sources = [{ ...initialRoutingRulesValues[RoutingRulesEntities.SOURCES][0] }]
-    } else {
-      form.fields.sources.push({ ...initialRoutingRulesValues[RoutingRulesEntities.SOURCES][0] })
+    if (entity === RoutingRulesEntities.SOURCES) {
+      if (!state.fields.sources) {
+        state.fields.sources = [{ ...initialRoutingRulesValues[RoutingRulesEntities.SOURCES][0] }]
+      } else {
+        state.fields.sources.push({ ...initialRoutingRulesValues[RoutingRulesEntities.SOURCES][0] })
+      }
     }
-  }
 
-  if (entity === RoutingRulesEntities.DESTINATIONS) {
-    if (!form.fields.destinations) {
-      form.fields.destinations = [{ ...initialRoutingRulesValues[RoutingRulesEntities.DESTINATIONS][0] }]
-    } else {
-      form.fields.destinations.push({ ...initialRoutingRulesValues[RoutingRulesEntities.DESTINATIONS][0] })
+    if (entity === RoutingRulesEntities.DESTINATIONS) {
+      if (!state.fields.destinations) {
+        state.fields.destinations = [{ ...initialRoutingRulesValues[RoutingRulesEntities.DESTINATIONS][0] }]
+      } else {
+        state.fields.destinations.push({ ...initialRoutingRulesValues[RoutingRulesEntities.DESTINATIONS][0] })
+      }
     }
   }
 }
 
 // display or hide routing rules selector
 const displayRoutingRulesSelector = computed(() => {
-  return routingRulesPerProtocolMap[form.fields.protocols]?.filter(protocol => !form.fields[protocol as RoutingRuleEntity])
+  if (stateHasTraditionalFlavor(state)) {
+    return routingRulesPerProtocolMap[state.fields.protocols]?.filter(protocol => !state.fields[protocol as RoutingRuleEntity])
+  }
+
+  return false
 })
 
 // removes rule entity from the form
 // or particular entry from particular rule entity if index is provided
 const handleRemoveRoutingRuleEntity = async (entity: string, index?: number): Promise<void> => {
-  if (typeof index !== 'undefined') {
-    let items: any = []
+  if (stateHasTraditionalFlavor(state)) {
+    if (typeof index !== 'undefined') {
+      let items: any = []
 
-    items = form.fields[entity as RoutingRuleEntity]
+      items = state.fields[entity as RoutingRuleEntity]
 
-    items.splice(index, 1)
+      items.splice(index, 1)
 
-    if (items.length) {
-      form.fields[entity as RoutingRuleEntity] = items
+      if (items.length) {
+        state.fields[entity as RoutingRuleEntity] = items
 
-      // skip removing rule entity if it's not empty
-      return
+        // skip removing rule entity if it's not empty
+        return
+      }
     }
-  }
 
-  await nextTick(() => {
-    delete form.fields[entity as RoutingRuleEntity]
+    await nextTick(() => {
+      delete state.fields[entity as RoutingRuleEntity]
 
-    if (entity === RoutingRulesEntities.METHODS) {
-      customMethods.value = ['']
-    }
-  })
+      if (entity === RoutingRulesEntities.METHODS) {
+        customMethods.value = ['']
+      }
+    })
+  }
 }
 
 const getRoutingRuleLabel = (entity: string): string => {
@@ -711,15 +953,15 @@ const getRoutingRuleLabel = (entity: string): string => {
   return formFields[entity]?.label || ''
 }
 
-watch(() => form.fields.protocols, () => {
+watch(() => state.fields.protocols, () => {
   sanitizeRoutingRulesEntities()
 })
 
 // removes objects for routing rules that are not configurable for the chosen protocols
 const sanitizeRoutingRulesEntities = () => {
   const allRoutingRulesEntities = Object.keys(initialRoutingRulesValues)
-  const protocolEntities = routingRulesPerProtocolMap[form.fields.protocols]
-  const routingRulesEntities = Object.keys(form.fields).filter(element => allRoutingRulesEntities.includes(element))
+  const protocolEntities = routingRulesPerProtocolMap[state.fields.protocols]
+  const routingRulesEntities = Object.keys(state.fields).filter(element => allRoutingRulesEntities.includes(element))
 
   routingRulesEntities.forEach(entity => {
     if (!protocolEntities?.includes(entity)) {
@@ -730,119 +972,158 @@ const sanitizeRoutingRulesEntities = () => {
 
 // returns methods formatted in the payload format, except for custom methods (those are handled separately)
 const selectedMethods = computed((): Method[] => {
-  const methods: Method[] = []
+  if (stateHasTraditionalFlavor(state)) {
+    const methods: Method[] = []
 
-  if (form.fields.methods) {
-    Object.entries(form.fields.methods).forEach(([key, value]) => {
-      if (value) {
-        methods.push(key as Method)
-      }
-    })
+    if (state.fields.methods) {
+      Object.entries(state.fields.methods).forEach(([key, value]) => {
+        if (value) {
+          methods.push(key as Method)
+        }
+      })
+    }
+
+    return methods
   }
 
-  return methods
+  return []
 })
 
-const protocolsArr = computed((): string[] => form.fields.protocols?.split(',') || [])
+const protocolsArr = computed((): string[] => state.fields.protocols?.split(',') || [])
 
 const showRoutingRulesWarning = computed((): boolean => {
   const allRoutingRulesEntities = Object.keys(initialRoutingRulesValues)
-  const routingRulesEntities = Object.keys(form.fields).filter(element => allRoutingRulesEntities.includes(element))
+  const routingRulesEntities = Object.keys(state.fields).filter(element => allRoutingRulesEntities.includes(element))
 
   return !routingRulesEntities.length
 })
+
 const warningMessageRoutingRules = computed((): string[] => {
   if (isProtocolSelected(['tls_passthrough'])) {
     return [getRoutingRuleLabel(RoutingRulesEntities.SNIS)]
   }
 
-  const protocolEntitiesLabels = routingRulesPerProtocolMap[form.fields.protocols].map(entity => getRoutingRuleLabel(entity))
+  const protocolEntitiesLabels = routingRulesPerProtocolMap[state.fields.protocols].map(entity => getRoutingRuleLabel(entity))
   return [[...protocolEntitiesLabels].splice(0, protocolEntitiesLabels.length - 1).join(', '), protocolEntitiesLabels[protocolEntitiesLabels.length - 1]]
 })
 
 const updateFormValues = (data: Record<string, any>): void => {
+  if (props.routeId) {
+    const flavor = typeof data.expression === 'string' && data.expression.length > 0 ? RouteFlavor.EXPRESSIONS : RouteFlavor.TRADITIONAL
+    recordFlavor.value = flavor
+    currentConfigHash.value = `#${flavor}`
+  }
+
   if (data?.service?.id) {
-    form.fields.service_id = data.service.id
+    state.fields.service_id = data.service.id
   }
 
-  form.fields.name = data?.name || ''
+  state.fields.name = data?.name || ''
 
   const tags = data?.tags || []
-  form.fields.tags = tags?.join(', ') || ''
+  state.fields.tags = tags?.join(', ') || ''
 
-  form.fields.regex_priority = data?.regex_priority || 0
-  form.fields.path_handling = data?.path_handling || 'v0'
-  form.fields.preserve_host = typeof data?.preserve_host === 'undefined' ? false : data?.preserve_host
-  form.fields.https_redirect_status_code = data?.https_redirect_status_code || 426
+  state.fields.preserve_host = typeof data?.preserve_host === 'undefined' ? false : data?.preserve_host
+  state.fields.https_redirect_status_code = data?.https_redirect_status_code || 426
 
   if (data?.protocols?.length) {
     if (data.protocols.length > 1) {
-      form.fields.protocols = data.protocols.join()
+      state.fields.protocols = data.protocols.join()
     } else {
-      form.fields.protocols = data.protocols[0]
+      state.fields.protocols = data.protocols[0]
     }
   }
 
-  form.fields.request_buffering = typeof data?.request_buffering === 'undefined' ? true : data?.request_buffering
-  form.fields.response_buffering = typeof data?.response_buffering === 'undefined' ? true : data?.response_buffering
+  state.fields.request_buffering = typeof data?.request_buffering === 'undefined' ? true : data?.request_buffering
+  state.fields.response_buffering = typeof data?.response_buffering === 'undefined' ? true : data?.response_buffering
 
-  form.fields.strip_path = typeof data?.strip_path === 'undefined' ? true : data?.strip_path
+  state.fields.strip_path = typeof data?.strip_path === 'undefined' ? true : data?.strip_path
 
-  if (data?.paths) {
-    form.fields.paths = data.paths
-  }
+  if (stateHasTraditionalFlavor(state)) {
+    state.fields.regex_priority = data?.regex_priority || 0
+    state.fields.path_handling = data?.path_handling || 'v0'
 
-  if (data?.snis) {
-    form.fields.snis = data.snis
-  }
+    if (data?.paths) {
+      state.fields.paths = data.paths
+    }
 
-  if (data?.hosts) {
-    form.fields.hosts = data.hosts
-  }
+    if (data?.snis) {
+      state.fields.snis = data.snis
+    }
 
-  if (data?.methods) {
-    setMethods(data.methods)
-  }
+    if (data?.hosts) {
+      state.fields.hosts = data.hosts
+    }
 
-  if (data?.headers) {
-    form.fields.headers = formatHeaders(data.headers)
-  }
+    if (data?.methods) {
+      setMethods(data.methods)
+    }
+
+    if (data?.headers) {
+      state.fields.headers = formatHeaders(data.headers)
+    }
+
+    if (data?.sources) {
+      state.fields.sources = data.sources
+    }
 
-  if (data?.sources) {
-    form.fields.sources = data.sources
+    if (data?.destinations) {
+      state.fields.destinations = data.destinations
+    }
   }
 
-  if (data?.destinations) {
-    form.fields.destinations = data.destinations
+  if (stateHasExpressionsFlavor(state)) {
+    state.fields.expression = data?.expression || ''
+    state.fields.priority = data?.priority || 0
   }
 
   // copy form.fields to avoid referencing the original object in originalFields
-  Object.assign(originalFields, JSON.parse(JSON.stringify(form.fields)))
+  Object.assign(originalFields, JSON.parse(JSON.stringify(state.fields)))
 }
 
 /**
  * Is the form submit button enabled?
  */
 const isFormValid = computed((): boolean => {
-  const hosts = form.fields.hosts ? !!form.fields.hosts.filter(Boolean).length : null
-  const paths = form.fields.paths ? !!form.fields.paths.filter(Boolean).length : null
-  const headers = form.fields.headers ? form.fields.headers.some(({ header }) => !!header) : null
-  const snis = form.fields.snis ? !!form.fields.snis.filter(Boolean).length : null
-  const destinations = form.fields.destinations ? form.fields.destinations.some(({ ip }) => !!ip) : null
-  const sources = form.fields.sources ? form.fields.sources.some(({ ip }) => !!ip) : null
-  const hasCustomMethod = form.fields.methods?.CUSTOM
-  const methods = hasCustomMethod ? customMethods.value.some(item => !!item) : Object.values(form.fields.methods || {}).includes(true)
-
-  return !!form.fields.protocols && ((isProtocolSelected(['http']) && !!(hosts || methods || paths || headers)) ||
-    (isProtocolSelected(['https']) && !!(hosts || methods || paths || headers || snis)) ||
-    (isProtocolSelected(['grpc']) && !!(hosts || paths || headers)) ||
-    (isProtocolSelected(['grpcs', 'wss']) && !!(hosts || paths || headers || snis)) ||
-    (isProtocolSelected(['udp', 'tls']) && !!(destinations || sources || snis)) ||
-    (isProtocolSelected(['tcp']) && !!(destinations || sources)) ||
-    (isProtocolSelected(['tls_passthrough']) && !!snis) ||
-    (isProtocolSelected(['ws']) && !!(hosts || paths || headers)))
+  switch (payloadFlavor.value) {
+    case RouteFlavor.TRADITIONAL: {
+      if (stateHasTraditionalFlavor(state)) {
+        const hosts = state.fields.hosts ? !!state.fields.hosts.filter(Boolean).length : null
+        const paths = state.fields.paths ? !!state.fields.paths.filter(Boolean).length : null
+        const headers = state.fields.headers ? state.fields.headers.some(({ header }) => !!header) : null
+        const snis = state.fields.snis ? !!state.fields.snis.filter(Boolean).length : null
+        const destinations = state.fields.destinations ? state.fields.destinations.some(({ ip }) => !!ip) : null
+        const sources = state.fields.sources ? state.fields.sources.some(({ ip }) => !!ip) : null
+        const hasCustomMethod = state.fields.methods?.CUSTOM
+        const methods = hasCustomMethod ? customMethods.value.some(item => !!item) : Object.values(state.fields.methods || {}).includes(true)
+
+        return !!state.fields.protocols && ((isProtocolSelected(['http']) && !!(hosts || methods || paths || headers)) ||
+          (isProtocolSelected(['https']) && !!(hosts || methods || paths || headers || snis)) ||
+          (isProtocolSelected(['grpc']) && !!(hosts || paths || headers)) ||
+          (isProtocolSelected(['grpcs', 'wss']) && !!(hosts || paths || headers || snis)) ||
+          (isProtocolSelected(['udp', 'tls']) && !!(destinations || sources || snis)) ||
+          (isProtocolSelected(['tcp']) && !!(destinations || sources)) ||
+          (isProtocolSelected(['tls_passthrough']) && !!snis) ||
+          (isProtocolSelected(['ws']) && !!(hosts || paths || headers)))
+      }
+
+      break
+    }
+    case RouteFlavor.EXPRESSIONS: {
+      if (stateHasExpressionsFlavor(state)) {
+        return state.fields.expression.length > 0
+      }
+
+      break
+    }
+  }
+
+  // We shouldn't reach here. Let the BE respond with an error if we did.
+  // Always returning "valid" here.
+  return true
 })
-const changesExist = computed((): boolean => JSON.stringify(form.fields) !== JSON.stringify(originalFields))
+
+const changesExist = computed((): boolean => !isEqual(state.fields, originalFields))
 
 /* ---------------
  * Saving
@@ -871,63 +1152,108 @@ const submitUrl = computed<string>(() => {
   return url
 })
 
-watch(() => form.fields, () => {
+watch(() => state.fields, () => {
   emit('model-updated', getPayload.value)
 }, { deep: true })
 
 const getArrPayload = (arr?: any[]) => arr?.length ? arr : null
 
-const getPayload = computed((): RoutePayload => {
-  const payload: RoutePayload = {
-    service: (form.fields.service_id) ? { id: form.fields.service_id } : null,
-    ...(!props.hideNameField && { name: form.fields.name || null }),
-    paths: getArrPayload(cleanDataArr(RoutingRulesEntities.PATHS, form.fields.paths || [])),
-    snis: getArrPayload(cleanDataArr(RoutingRulesEntities.SNIS, form.fields.snis || [])),
-    hosts: getArrPayload(cleanDataArr(RoutingRulesEntities.HOSTS, form.fields.hosts || [])),
-    methods: null,
-    headers: getHeaders(),
-    sources: getArrPayload(cleanDataArr(RoutingRulesEntities.SOURCES, form.fields.sources || [])),
-    destinations: getArrPayload(cleanDataArr(RoutingRulesEntities.DESTINATIONS, form.fields.destinations || [])),
-    tags: form.fields.tags.split(',')?.map((tag: string) => String(tag || '')
-      .trim())?.filter((tag: string) => tag !== ''),
-    regex_priority: Number(form.fields.regex_priority),
-    path_handling: form.fields.path_handling,
-    strip_path: isProtocolSelected(['grpc', 'gprcs']) ? false : form.fields.strip_path,
-    preserve_host: form.fields.preserve_host,
-    https_redirect_status_code: form.fields.https_redirect_status_code,
-    protocols: form.fields.protocols.split(',') as Protocol[],
-    request_buffering: form.fields.request_buffering,
-    response_buffering: form.fields.response_buffering,
-  }
-
-  if (selectedMethods.value?.length) {
-    payload.methods = [...selectedMethods.value]
+const getTraditionalPayload = () => {
+  if (stateHasTraditionalFlavor(state)) {
+    const payload: TraditionalRoutePayload = {
+      methods: null,
+      hosts: getArrPayload(cleanDataArr(RoutingRulesEntities.HOSTS, state.fields.hosts || [])),
+      paths: getArrPayload(cleanDataArr(RoutingRulesEntities.PATHS, state.fields.paths || [])),
+      headers: getHeaders(),
+      regex_priority: Number(state.fields.regex_priority),
+      path_handling: state.fields.path_handling,
+      sources: getArrPayload(cleanDataArr(RoutingRulesEntities.SOURCES, state.fields.sources || [])),
+      destinations: getArrPayload(cleanDataArr(RoutingRulesEntities.DESTINATIONS, state.fields.destinations || [])),
+      snis: getArrPayload(cleanDataArr(RoutingRulesEntities.SNIS, state.fields.snis || [])),
+    }
 
-    // handle custom method input
-    // add any custom methods from input field, avoid duplicate
+    if (selectedMethods.value?.length) {
+      payload.methods = [...selectedMethods.value]
 
-    if (selectedMethods.value?.includes('CUSTOM')) {
-      const customMethodIndex = payload.methods.indexOf('CUSTOM')
-      if (customMethodIndex !== -1) {
-        payload.methods.splice(customMethodIndex, 1)
-      }
+      // handle custom method input
+      // add any custom methods from input field, avoid duplicate
 
-      customMethods.value.forEach(method => {
-        if (method && payload.methods && !payload.methods?.includes(method)) {
-          payload.methods.push(method.toUpperCase())
+      if (selectedMethods.value?.includes('CUSTOM')) {
+        const customMethodIndex = payload.methods.indexOf('CUSTOM')
+        if (customMethodIndex !== -1) {
+          payload.methods.splice(customMethodIndex, 1)
         }
-      })
+
+        customMethods.value.forEach(method => {
+          if (method && payload.methods && !payload.methods?.includes(method)) {
+            payload.methods.push(method.toUpperCase())
+          }
+        })
+      }
     }
+
+    return payload
+  }
+}
+
+const getExpressionsPayload = () => {
+  if (stateHasExpressionsFlavor(state)) {
+    return {
+      expression: state.fields.expression,
+      priority: Number(state.fields.priority),
+    } as ExpressionsRoutePayload
   }
+}
 
-  return payload
+const getPayload = computed((): BaseRoutePayload => {
+  const base: BaseRoutePayload = {
+    ...(!props.hideNameField && { name: state.fields.name || null }),
+    protocols: state.fields.protocols.split(',') as Protocol[],
+    https_redirect_status_code: state.fields.https_redirect_status_code,
+    strip_path: isProtocolSelected(['grpc', 'gprcs']) ? false : state.fields.strip_path,
+    preserve_host: state.fields.preserve_host,
+    request_buffering: state.fields.request_buffering,
+    response_buffering: state.fields.response_buffering,
+    tags: state.fields.tags.split(',')?.map((tag: string) => String(tag || '')
+      .trim())?.filter((tag: string) => tag !== ''),
+    service: (state.fields.service_id) ? { id: state.fields.service_id } : null,
+  }
+
+  switch (payloadFlavor.value) {
+    case RouteFlavor.TRADITIONAL:
+      return { ...base, ...getTraditionalPayload() }
+    case RouteFlavor.EXPRESSIONS:
+      return { ...base, ...getExpressionsPayload() }
+    default:
+      // We shouldn't reach here. Let the BE respond with an error if we did.
+      return base
+  }
 })
 
-const saveFormData = async (payload?: RoutePayload): Promise<void> => {
-  const validPayload: RoutePayload = (payload && isRoutePayloadValid(payload)) ? payload : getPayload.value
+const isRoutePayloadValid = (val: any): boolean => {
+  switch (payloadFlavor.value) {
+    case RouteFlavor.TRADITIONAL: {
+      if (!('regex_priority' in val && 'path_handling' in val)) {
+        return false
+      }
+      break
+    }
+    case RouteFlavor.EXPRESSIONS: {
+      if (!('priority' in val)) {
+        return false
+      }
+      break
+    }
+  }
+
+  return 'service' in val && 'tags' in val && 'protocols' in val
+}
+
+const saveFormData = async (payload?: BaseRoutePayload): Promise<void> => {
+  const validPayload: BaseRoutePayload = (payload && isRoutePayloadValid(payload)) ? payload : getPayload.value
 
   try {
-    form.isReadonly = true
+    state.isReadonly = true
 
     let response: AxiosResponse | undefined
 
@@ -943,10 +1269,10 @@ const saveFormData = async (payload?: RoutePayload): Promise<void> => {
 
     emit('update', response?.data)
   } catch (error: any) {
-    form.errorMessage = getMessageFromError(error)
+    state.errorMessage = getMessageFromError(error)
     emit('error', error as AxiosError)
   } finally {
-    form.isReadonly = false
+    state.isReadonly = false
   }
 }
 
@@ -974,7 +1300,7 @@ onBeforeMount(async () => {
     // load services for filtering
     await loadServices()
   } else {
-    form.fields.service_id = props.serviceId
+    state.fields.service_id = props.serviceId
   }
 })
 
@@ -989,6 +1315,7 @@ defineExpose({ saveFormData, getPayload })
 .appear-enter-active {
   transition: all 0.5s ease;
 }
+
 .appear-enter-from,
 .appear-leave-to {
   opacity: 0;
@@ -1010,12 +1337,17 @@ defineExpose({ saveFormData, getPayload })
       .select-item-label {
         font-weight: $kui-font-weight-semibold;
       }
+
       .select-item-description {
         color: $kui-color-text-neutral;
         font-size: $kui-font-size-20;
       }
     }
 
+    &-config-type-immutable-alert {
+      margin-bottom: $kui_space_60;
+    }
+
     &-routing-rules-title-container {
       display: flex;
       justify-content: center;
@@ -1031,6 +1363,7 @@ defineExpose({ saveFormData, getPayload })
           }
         }
       }
+
       .routing-rules-title {
         font-size: $kui_font_size_40;
         margin-left: $kui_space_40;
@@ -1041,24 +1374,37 @@ defineExpose({ saveFormData, getPayload })
       @include routing-rules-selector;
     }
 
+    &-advanced-fields-collapse {
+      margin-top: $kui_space_80;
+    }
+
     &-advanced-fields-container {
       margin-top: $kui_space_80;
     }
 
     &-fields-container {
-      > * {
+      >* {
         &:not(:first-child) {
           margin-top: $kui_space_80;
         }
       }
     }
   }
+
   .k-select-selected-item-label {
-    margin-left: 30px;
+    margin-left: $kui-space-90;
   }
 
   .k-checkbox {
     display: flex;
   }
+
+  :deep(.form-section-content) {
+    min-width: 0;
+  }
+
+  .expression-editor {
+    min-height: 200px;
+  }
 }
 </style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormConfigTabs.vue b/packages/entities/entities-routes/src/components/RouteFormConfigTabs.vue
new file mode 100644
index 0000000000..98667b948a
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormConfigTabs.vue
@@ -0,0 +1,122 @@
+<template>
+  <KTabs
+    v-if="tabs.length > 1"
+    v-model="tab"
+    data-testid="route-form-config-tabs"
+    :tabs="tabs"
+  >
+    <template
+      v-if="routeFlavors.traditional"
+      #[`${RouteFlavor.TRADITIONAL}-anchor`]
+    >
+      {{ t('form.flavors.traditional') }}
+
+      <KTooltip
+        v-if="tooltips && tooltips[RouteFlavor.TRADITIONAL]"
+        class="route-form-config-tabs-tooltip"
+        :text="tooltips[RouteFlavor.TRADITIONAL]"
+        tooltip-id="route-form-config-tabs-tooltip-traditional"
+      >
+        <InfoIcon
+          :color="KUI_COLOR_TEXT_NEUTRAL"
+          :size="KUI_ICON_SIZE_30"
+          tabindex="0"
+        />
+      </KTooltip>
+    </template>
+    <template
+      v-if="routeFlavors.traditional"
+      #[RouteFlavor.TRADITIONAL]
+    >
+      <slot name="before-content" />
+
+      <slot :name="RouteFlavor.TRADITIONAL" />
+    </template>
+
+    <template
+      v-if="routeFlavors.expressions"
+      #[`${RouteFlavor.EXPRESSIONS}-anchor`]
+    >
+      {{ t('form.flavors.expressions') }}
+
+      <KTooltip
+        v-if="tooltips && tooltips[RouteFlavor.EXPRESSIONS]"
+        class="route-form-config-tabs-tooltip"
+        :text="tooltips[RouteFlavor.EXPRESSIONS]"
+        tooltip-id="route-form-config-tabs-tooltip-expressions"
+      >
+        <InfoIcon
+          :color="KUI_COLOR_TEXT_NEUTRAL"
+          :size="KUI_ICON_SIZE_30"
+          tabindex="0"
+        />
+      </KTooltip>
+    </template>
+    <template
+      v-if="routeFlavors.expressions"
+      #[RouteFlavor.EXPRESSIONS]
+    >
+      <slot name="before-content" />
+
+      <slot :name="RouteFlavor.EXPRESSIONS" />
+    </template>
+  </KTabs>
+
+  <template v-else>
+    <slot name="before-content" />
+
+    <slot
+      v-if="routeFlavors.traditional"
+      :name="RouteFlavor.TRADITIONAL"
+    />
+
+    <slot
+      v-else-if="routeFlavors.expressions"
+      :name="RouteFlavor.EXPRESSIONS"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { InfoIcon } from '@kong/icons'
+import { type Tab } from '@kong/kongponents'
+import { computed } from 'vue'
+import useI18n from '../composables/useI18n'
+import { RouteFlavor, type RouteFlavors } from '../types'
+
+const tab = defineModel<string>({ required: true })
+
+const props = defineProps<{
+  routeFlavors: RouteFlavors,
+  tooltips?: {
+    [RouteFlavor.TRADITIONAL]?: string,
+    [RouteFlavor.EXPRESSIONS]?: string,
+  }
+}>()
+
+const { i18n: { t } } = useI18n()
+
+const tabs = computed<Tab[]>(() => [
+  ...props.routeFlavors.traditional
+    ? [{
+      hash: `#${RouteFlavor.TRADITIONAL}`,
+      title: t('form.flavors.traditional'),
+    }]
+    : [],
+  ...props.routeFlavors.expressions
+    ? [{
+      hash: `#${RouteFlavor.EXPRESSIONS}`,
+      title: t('form.flavors.expressions'),
+    }]
+    : [],
+])
+</script>
+
+<style lang="scss" scoped>
+.route-form-config-tabs-tooltip {
+  display: inline-flex;
+  margin: $kui-space-auto $kui-space-0 $kui-space-auto $kui-space-20;
+  vertical-align: middle;
+}
+</style>
diff --git a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
new file mode 100644
index 0000000000..17568d6605
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
@@ -0,0 +1,24 @@
+<template>
+  <ExpressionsEditor
+    v-if="schema !== undefined"
+    v-model="expression"
+    :schema="schema"
+  />
+</template>
+
+<script setup lang="ts">
+/**
+ * This component assumes that @kong-ui-public/expressions has been initialized.
+ */
+import { ExpressionsEditor, PROTOCOL_TO_SCHEMA, type Schema } from '@kong-ui-public/expressions'
+import { computed } from 'vue'
+
+import '@kong-ui-public/expressions/dist/style.css'
+
+const props = defineProps<{ protocol?: string }>()
+const expression = defineModel<string>({ required: true })
+
+const schema = computed<Schema | undefined>(() => {
+  return PROTOCOL_TO_SCHEMA[props.protocol as keyof typeof PROTOCOL_TO_SCHEMA]
+})
+</script>
diff --git a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
new file mode 100644
index 0000000000..46128e64ec
--- /dev/null
+++ b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
@@ -0,0 +1,71 @@
+<template>
+  <component
+    :is="errorComponent"
+    v-if="state === ExpressionsEditorState.ERROR"
+    data-testid="route-form-expressions-editor-loader-error"
+  />
+  <component
+    :is="loadingComponent"
+    v-else-if="state === ExpressionsEditorState.LOADING"
+    data-testid="route-form-expressions-editor-loader-loading"
+  />
+  <RouteFormExpressionsEditor
+    v-else
+    v-model="expression"
+    :protocol="props.protocol"
+  />
+  <slot
+    :expression="{ value: expression, update: setExpression }"
+    name="after-editor"
+    :state="state"
+  />
+</template>
+
+<script setup lang="ts">
+/**
+ * This is a loader component to lazy-load the @kong-ui-public/expressions and RouteFormExpressionsEditor,
+ * which depends on @kong-ui-public/expressions, to avoid loading the Expressions language support and the
+ * editor until they are used.
+ */
+import { defineAsyncComponent, h, onMounted, ref, type Component } from 'vue'
+import useI18n from '../composables/useI18n'
+import { ExpressionsEditorState } from '../types'
+
+const { i18n: { t } } = useI18n()
+
+const loadingComponent: Component = {
+  render: () => h('div', t('form.expressions_editor.loading')),
+}
+
+const errorComponent: Component = {
+  render: () => h('div', t('form.expressions_editor.error')),
+}
+
+const RouteFormExpressionsEditor = defineAsyncComponent({
+  loader: async () => {
+    return import('./RouteFormExpressionsEditor.vue')
+  },
+  loadingComponent,
+  errorComponent,
+})
+
+const props = defineProps<{ protocol?: string }>()
+const state = ref<ExpressionsEditorState>(ExpressionsEditorState.LOADING)
+
+const expression = defineModel<string>({ required: true })
+
+// Useful when slot content is trying to update the expression (e.g., router playground)
+const setExpression = (value: string) => {
+  expression.value = value
+}
+
+onMounted(async () => {
+  try {
+    await (await import('@kong-ui-public/expressions')).asyncInit
+    state.value = ExpressionsEditorState.READY
+  } catch (e) {
+    state.value = ExpressionsEditorState.ERROR
+    console.error(e)
+  }
+})
+</script>
diff --git a/packages/entities/entities-routes/src/components/RouteList.cy.ts b/packages/entities/entities-routes/src/components/RouteList.cy.ts
index 0d99cf06df..4173132ba0 100644
--- a/packages/entities/entities-routes/src/components/RouteList.cy.ts
+++ b/packages/entities/entities-routes/src/components/RouteList.cy.ts
@@ -1,16 +1,18 @@
 // Cypress component test spec file
-import RouteList from './RouteList.vue'
 import type { FetcherResponse } from '@kong-ui-public/entities-shared'
+import { v4 as uuidv4 } from 'uuid'
+import type { Router } from 'vue-router'
+import { createMemoryHistory, createRouter } from 'vue-router'
 import type { FetcherRawResponse } from '../../fixtures/mockData'
 import {
   paginate,
+  route,
   routes,
-  routes100,
+  routesTraditional100,
+  routesTraditionalExpressionsMixed,
 } from '../../fixtures/mockData'
 import type { KongManagerRouteListConfig, KonnectRouteListConfig } from '../types'
-import type { Router } from 'vue-router'
-import { createMemoryHistory, createRouter } from 'vue-router'
-import { v4 as uuidv4 } from 'uuid'
+import RouteList from './RouteList.vue'
 
 const viewRoute = 'view-route'
 const editRoute = 'edit-route'
@@ -162,6 +164,94 @@ describe('<RouteList />', () => {
     }
   })
 
+  describe('the Expression column', () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: 'GET',
+          url: `${baseConfigKonnect.apiBaseUrl}/v2/control-planes/${baseConfigKonnect.controlPlaneId}/core-entities/routes*`,
+        },
+        {
+          statusCode: 200,
+          body: routesTraditionalExpressionsMixed,
+        },
+      )
+    })
+
+    it('should not show the expressions column if hasExpressionsColumn is unset', () => {
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+        },
+      })
+
+      cy.get('table thead th').contains('Expression').should('not.exist')
+
+      cy.get('tbody tr[data-testid="route-trad"]').should('exist').as('routeTrad')
+      for (const path of route.paths) {
+        cy.get('@routeTrad').findTestId('paths').should('contain.text', path)
+      }
+
+      cy.get('tbody tr[data-testid="route-expr"]').should('exist').as('routeExpr')
+      cy.get('@routeExpr').findTestId('paths').should('have.text', '-')
+    })
+
+    it('should not show the expressions column if hasExpressionsColumn is unset/false', () => {
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+          hasExpressionColumn: false,
+        },
+      })
+
+      cy.get('table thead th').contains('Expression').should('not.exist')
+
+      cy.get('tbody tr[data-testid="route-trad"]').should('exist').as('routeTrad')
+      for (const path of route.paths) {
+        cy.get('@routeTrad').findTestId('paths').should('contain.text', path)
+      }
+
+      cy.get('tbody tr[data-testid="route-expr"]').should('exist').as('routeExpr')
+      cy.get('@routeExpr').findTestId('paths').should('have.text', '-')
+    })
+
+    it('should show the expressions column if hasExpressionsColumn is true', () => {
+      cy.mount(RouteList, {
+        props: {
+          cacheIdentifier: `route-list-${uuidv4()}`,
+          config: baseConfigKonnect,
+          canCreate: () => {},
+          canEdit: () => {},
+          canDelete: () => {},
+          canRetrieve: () => {},
+          hasExpressionColumn: true,
+        },
+      })
+
+      cy.get('table thead th').contains('Expression').should('exist')
+
+      cy.get('tbody tr[data-testid="route-trad"]').should('exist').as('routeTrad')
+      for (const path of route.paths) {
+        cy.get('@routeTrad').findTestId('paths').should('contain.text', path)
+      }
+      cy.get('@routeTrad').findTestId('expression').should('have.text', '-')
+
+      cy.get('tbody tr[data-testid="route-expr"]').should('exist').as('routeExpr')
+      cy.get('@routeExpr').findTestId('paths').should('have.text', '-')
+      cy.get('@routeExpr').findTestId('expression').should('have.text', 'http.path == "/kong"')
+    })
+  })
+
   describe('Kong Manager', () => {
     const interceptKM = (params?: {
       mockData?: FetcherRawResponse;
@@ -306,7 +396,7 @@ describe('<RouteList />', () => {
 
     it('should allow switching between pages', () => {
       interceptKMMultiPage({
-        mockData: routes100,
+        mockData: routesTraditional100,
       })
 
       cy.mount(RouteList, {
@@ -380,7 +470,7 @@ describe('<RouteList />', () => {
 
     it('should allow picking different page sizes and persist the preference', () => {
       interceptKMMultiPage({
-        mockData: routes100,
+        mockData: routesTraditional100,
       })
 
       cy.mount(RouteList, {
@@ -604,7 +694,7 @@ describe('<RouteList />', () => {
 
     it('should allow switching between pages', () => {
       interceptKonnectMultiPage({
-        mockData: routes100,
+        mockData: routesTraditional100,
       })
 
       cy.mount(RouteList, {
@@ -678,7 +768,7 @@ describe('<RouteList />', () => {
 
     it('should allow picking different page sizes and persist the preference', () => {
       interceptKonnectMultiPage({
-        mockData: routes100,
+        mockData: routesTraditional100,
       })
 
       cy.mount(RouteList, {
diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
index 29bc46752e..a49b88d3a4 100644
--- a/packages/entities/entities-routes/src/components/RouteList.vue
+++ b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -2,6 +2,7 @@
   <div class="kong-ui-entities-routes-list">
     <EntityBaseTable
       :cache-identifier="cacheIdentifier"
+      :cell-attributes="getCellAttrs"
       disable-pagination-page-jump
       :disable-sorting="disableSorting"
       :empty-state-options="emptyStateOptions"
@@ -120,6 +121,11 @@
         </KTruncate>
         <span v-else>-</span>
       </template>
+      <template #expression="{ rowValue }">
+        <span class="route-list-cell-expression">
+          {{ rowValue || '-' }}
+        </span>
+      </template>
 
       <!-- Row actions -->
       <template #actions="{ row }">
@@ -279,6 +285,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hasExpressionColumn: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18n: { t } } = composables.useI18n()
@@ -294,15 +304,12 @@ const disableSorting = computed((): boolean => props.config.app !== 'kongManager
 const fields: BaseTableHeaders = {
   name: { label: t('routes.list.table_headers.name'), searchable: true, sortable: true },
   protocols: { label: t('routes.list.table_headers.protocols'), searchable: true },
-  ...props.config.useExpression
-    ? {
-      expression: { label: t('routes.list.table_headers.expression') },
-    }
-    : {
-      hosts: { label: t('routes.list.table_headers.hosts'), searchable: true },
-      methods: { label: t('routes.list.table_headers.methods'), searchable: true },
-      paths: { label: t('routes.list.table_headers.paths'), searchable: true },
-    },
+  hosts: { label: t('routes.list.table_headers.hosts'), searchable: true },
+  methods: { label: t('routes.list.table_headers.methods'), searchable: true },
+  paths: { label: t('routes.list.table_headers.paths'), searchable: true },
+  ...props.hasExpressionColumn && {
+    expression: { label: t('routes.list.table_headers.expression'), tooltip: true },
+  },
   tags: { label: t('routes.list.table_headers.tags'), sortable: false },
 }
 const tableHeaders: BaseTableHeaders = fields
@@ -338,9 +345,9 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
   }
 
   const { name, protocols, hosts, methods, paths, expression } = fields
-  const filterFields: FilterFields = props.config.useExpression
-    ? { name, protocols, expression }
-    : { name, protocols, hosts, methods, paths }
+  const filterFields: FilterFields = {
+    name, protocols, hosts, methods, paths, ...props.hasExpressionColumn && { expression },
+  }
 
   return {
     isExactMatch,
@@ -351,6 +358,20 @@ const filterConfig = computed<InstanceType<typeof EntityFilter>['$props']['confi
 
 const { fetcher, fetcherState } = useFetcher(props.config, fetcherBaseUrl.value)
 
+const getCellAttrs = (params: Record<string, any>): Object => {
+  if (params.headerKey === 'expression') {
+    return {
+      style: {
+        maxWidth: '250px',
+        overflowX: 'hidden',
+        textOverflow: 'ellipsis',
+      },
+    }
+  }
+
+  return {}
+}
+
 const clearFilter = (): void => {
   filterQuery.value = ''
 }
@@ -547,5 +568,9 @@ onBeforeMount(async () => {
   .kong-ui-entity-filter-input {
     margin-right: $kui-space-50;
   }
+
+  .route-list-cell-expression {
+    font-family: $kui-font-family-code;
+  }
 }
 </style>
diff --git a/packages/entities/entities-routes/src/locales/en.json b/packages/entities/entities-routes/src/locales/en.json
index 82a72e5fd8..60e73075ab 100644
--- a/packages/entities/entities-routes/src/locales/en.json
+++ b/packages/entities/entities-routes/src/locales/en.json
@@ -85,6 +85,9 @@
       },
       "routingRules": {
         "title": "Routing Rules"
+      },
+      "routingExpression": {
+        "title": "Routing Expression"
       }
     },
     "fields": {
@@ -217,14 +220,34 @@
       "request_buffering": {
         "label": "Request buffering",
         "tooltip": "Whether to enable request body buffering or not. With HTTP 1.1, it may make sense to turn this off on services that receive data with chunked transfer encoding."
+      },
+      "expression": {
+        "label": "Expression",
+        "tooltip": "The route expression."
+      },
+      "priority": {
+        "label": "Priority",
+        "tooltip": "A number used to choose which route resolves a given request when several routes match it using expression simultaneously."
       }
     },
+    "flavors": {
+      "traditional": "Traditional",
+      "expressions": "Expressions"
+    },
     "viewAdvancedFields": "View Advanced Fields",
     "addNewRule": "Add New Rule",
     "warning": {
       "rulesMessage": "For {protocol}, at least one of {routingRules} must be set.",
       "singleRule": "{routingRules}",
-      "multipleRules": "{routingRules} or {lastRoutingRule}"
+      "multipleRules": "{routingRules} or {lastRoutingRule}",
+      "cannotChangeFlavor": {
+        "create": "The format of the route cannot be changed once created.",
+        "edit": "This route was configured in the {format} format, and cannot be changed after creation. You can switch to the {format} tab to edit, or create a new route in a different format instead."
+      }
+    },
+    "expressions_editor": {
+      "loading": "Loading the Expressions editor…",
+      "error": "Error occurred while loading the Expressions editor. Please view the console for more details."
     }
   }
 }
diff --git a/packages/entities/entities-routes/src/types/route-form.ts b/packages/entities/entities-routes/src/types/route-form.ts
index 44bb41d8dc..8cb6c599e9 100644
--- a/packages/entities/entities-routes/src/types/route-form.ts
+++ b/packages/entities/entities-routes/src/types/route-form.ts
@@ -2,7 +2,18 @@ import type { BaseFormConfig, KongManagerBaseFormConfig, KonnectBaseFormConfig }
 import type { RouteLocationRaw } from 'vue-router'
 import type { Methods, Method } from './method-badge'
 
-export interface BaseRouteFormConfig extends Omit<BaseFormConfig, 'cancelRoute'>{
+export enum RouteFlavor {
+  TRADITIONAL = 'traditional', // includes traditional_compatible
+  EXPRESSIONS = 'expressions',
+}
+
+/** An object to mark route flavors supported */
+export interface RouteFlavors {
+  traditional?: boolean
+  expressions?: boolean
+}
+
+export interface BaseRouteFormConfig extends Omit<BaseFormConfig, 'cancelRoute'> {
   /** Route to return to if canceling create/edit a Route form */
   cancelRoute: RouteLocationRaw
 }
@@ -24,6 +35,12 @@ export enum RoutingRulesEntities {
   CUSTOM_METHOD = 'custom-method'
 }
 
+export enum ExpressionsEditorState {
+  LOADING = 'loading',
+  ERROR = 'error',
+  READY = 'ready'
+}
+
 export type RoutingRuleEntity = Exclude<`${RoutingRulesEntities}`, 'custom-method'>
 
 export type PathHandlingVersion = 'v0' | 'v1'
@@ -48,55 +65,84 @@ export interface Sources extends SourcesDestinationsFields { }
 
 export interface Destinations extends SourcesDestinationsFields { }
 
-export interface RouteStateFields {
-  service_id: string
+export interface BaseRouteStateFields {
   name: string
-  tags: string
-  regex_priority: number
-  path_handling: PathHandlingVersion
-  preserve_host: boolean
-  https_redirect_status_code: number
   protocols: string
+  https_redirect_status_code: number
+  strip_path: boolean
+  preserve_host: boolean
   request_buffering: boolean
   response_buffering: boolean
-  strip_path: boolean
-  paths?: string[]
-  snis?: string[]
-  hosts?: string[]
+  tags: string
+  service_id: string
+}
+
+/** These are traditional-only fields */
+export interface TraditionalRouteStateFields {
   methods?: MethodsFields
+  hosts?: string[]
+  paths?: string[]
   headers?: HeaderFields[]
+  regex_priority?: number
+  path_handling: PathHandlingVersion
   sources?: Sources[]
   destinations?: Destinations[]
+  snis?: string[]
 }
 
-export interface RouteState {
-  fields: RouteStateFields
+/** These are expression-only fields */
+export interface ExpressionsRouteStateFields {
+  expression: string; // Not required now, as described in Kong/kong#12667
+  priority: number
+}
+
+export interface RouteState<Fields extends BaseRouteStateFields> {
+  routeFlavors: RouteFlavors // For better type narrowing
+  fields: Fields
   isReadonly: boolean
   errorMessage: string
 }
 
+/** Type narrowing down helper function */
+export const stateHasTraditionalFlavor = (state: RouteState<BaseRouteStateFields>): state is RouteState<BaseRouteStateFields & TraditionalRouteStateFields> =>
+  state.routeFlavors.traditional === true
+
+/** Type narrowing down helper function */
+export const stateHasExpressionsFlavor = (state: RouteState<BaseRouteStateFields>): state is RouteState<BaseRouteStateFields & ExpressionsRouteStateFields> =>
+  state.routeFlavors.expressions === true
+
 export interface Headers {
   [key: string]: string[]
 }
 
-export interface RoutePayload {
+export interface BaseRoutePayload {
   id?: string
-  service: { id: string } | null
   name?: string | null
-  tags: string[]
-  regex_priority: number
-  path_handling: PathHandlingVersion
-  preserve_host: boolean
-  https_redirect_status_code: number
   protocols: Protocol[]
+  https_redirect_status_code: number
+  strip_path?: boolean | null
+  preserve_host: boolean
   request_buffering: boolean
   response_buffering: boolean
-  strip_path?: boolean | null
-  paths?: string[] | null
-  snis?: string[] | null
-  hosts?: string[] | null
+  tags: string[]
+  service: { id: string } | null
+}
+
+/** Extra payload for traditional-flavored routes */
+export interface TraditionalRoutePayload {
   methods?: Array<Method | string> | null
+  hosts?: string[] | null
+  paths?: string[] | null
   headers?: Headers | null
+  regex_priority: number
+  path_handling: PathHandlingVersion
   sources?: Sources[] | null
   destinations?: Destinations[] | null
+  snis?: string[] | null
+}
+
+/** Extra payload for expressions-flavored routes */
+export interface ExpressionsRoutePayload {
+  expression?: string; // Not required now, as described in Kong/kong#12667
+  priority: number
 }
diff --git a/packages/entities/entities-routes/src/types/route-list.ts b/packages/entities/entities-routes/src/types/route-list.ts
index d721134e51..a33563ddca 100644
--- a/packages/entities/entities-routes/src/types/route-list.ts
+++ b/packages/entities/entities-routes/src/types/route-list.ts
@@ -4,8 +4,6 @@ import type { FilterSchema, KongManagerBaseTableConfig, KonnectBaseTableConfig }
 export interface BaseRouteListConfig {
   /** Current service id if the RouteList in nested in the routes tab on a service detail page */
   serviceId?: string
-  /** Whether to use expression flavored routes */
-  useExpression?: boolean
   /** Route for creating a route */
   createRoute: RouteLocationRaw
   /** A function that returns the route for viewing a route */
diff --git a/packages/entities/entities-routes/tsconfig.json b/packages/entities/entities-routes/tsconfig.json
index e34e90e4e4..3de995ed52 100644
--- a/packages/entities/entities-routes/tsconfig.json
+++ b/packages/entities/entities-routes/tsconfig.json
@@ -10,7 +10,8 @@
       "cypress",
       "cypress/vue",
       "../../../cypress/support"
-    ]
+    ],
+    "esModuleInterop": true
   },
   "include": [
     "src/**/*",
diff --git a/packages/entities/entities-routes/vite.config.ts b/packages/entities/entities-routes/vite.config.ts
index 911bff2153..c438312bac 100644
--- a/packages/entities/entities-routes/vite.config.ts
+++ b/packages/entities/entities-routes/vite.config.ts
@@ -1,6 +1,7 @@
-import sharedViteConfig, { getApiProxies, sanitizePackageName } from '../../../vite.config.shared'
 import { resolve } from 'path'
 import { defineConfig, mergeConfig } from 'vite'
+import sharedViteConfig, { getApiProxies, sanitizePackageName } from '../../../vite.config.shared'
+import monacoEditorPlugin from 'vite-plugin-monaco-editor'
 
 // Package name MUST always match the kebab-case package name inside the component's package.json file and the name of your `/packages/{package-name}` directory
 const packageName = 'entities-routes'
@@ -16,6 +17,9 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
       entry: resolve(__dirname, './src/index.ts'),
       fileName: (format) => `${sanitizedPackageName}.${format}.js`,
     },
+    rollupOptions: {
+      external: ['monaco-editor'], // Do not bundle monaco-editor with this package. Provide as a peer dependency
+    },
   },
   server: {
     proxy: {
@@ -23,6 +27,12 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
       ...getApiProxies(),
     },
   },
+  ...process.env.USE_SANDBOX && {
+    plugins: [
+      // See: https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21
+      ((monacoEditorPlugin as any).default as typeof monacoEditorPlugin)({}),
+    ],
+  },
 }))
 
 // If we are trying to preview a build of the local `package/entities-routes/sandbox` directory,
diff --git a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
index dea10d6213..d67020c0ef 100644
--- a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
+++ b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTable.vue
@@ -48,13 +48,14 @@
         </div>
       </template>
       <template
-        v-for="(_, key) in tableHeaders"
+        v-for="(header, key) in tableHeaders"
         :key="key"
         #[key]="{ row, rowKey, rowValue }"
       >
         <EntityBaseTableCell
           :key-name="String(key)"
           :row-el="getRowEl(row)"
+          :tooltip="header.tooltip"
         >
           <slot
             :name="key"
diff --git a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTableCell.vue b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTableCell.vue
index 444d01b8b6..f21f00342c 100644
--- a/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTableCell.vue
+++ b/packages/entities/entities-shared/src/components/entity-base-table/EntityBaseTableCell.vue
@@ -4,8 +4,8 @@
     class="content-wrapper"
   >
     <span
-      v-if="isFirst"
-      data-testid="first-col"
+      v-if="wrapTooltip"
+      :data-truncate="wrapTooltip || undefined"
     >
       <KTooltip
         max-width="300"
@@ -33,10 +33,14 @@ const props = defineProps({
     type: [Object, null] as PropType<HTMLElement | null>,
     required: true,
   },
+  tooltip: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const element = computed((): HTMLElement | null => props.rowEl?.querySelector(`[data-testid="${props.keyName}"]`) || null)
-const content = computed((): Element | null => element.value?.querySelector('[data-testid="first-col"]') || null)
+const content = computed((): Element | null => element.value?.querySelector('[data-truncate="true"]') || null)
 
 const isFirst = computed((): boolean => {
   const cells = props.rowEl?.querySelectorAll('td')
@@ -48,6 +52,10 @@ const isFirst = computed((): boolean => {
   }
 })
 
+const wrapTooltip = computed((): boolean => {
+  return isFirst.value || props.tooltip
+})
+
 let observer: ResizeObserver | undefined
 
 const stopObserve = () => {
@@ -58,8 +66,17 @@ const stopObserve = () => {
 }
 
 const setWidths = (): void => {
+  let elWidth = element.value?.clientWidth || 0
+
+  // Subtract the horizontal paddings from the element's clientWidth
+  // This is not elegant enough though as of now
+  if (element.value && 'getComputedStyle' in window) {
+    const elStyle = window.getComputedStyle(element.value)
+    elWidth -= (parseFloat(elStyle.paddingLeft) || 0) + (parseFloat(elStyle.paddingRight) || 0)
+  }
+
   contentWidth.value = content.value?.getBoundingClientRect().width || 0
-  elementWidth.value = element.value?.clientWidth || 0
+  elementWidth.value = elWidth
   tooltipText.value = contentRef.value?.innerText || ''
 }
 
@@ -73,7 +90,7 @@ const targets = computed(() => [content.value, element.value])
 const stopWatch = watch(
   targets,
   (els) => {
-    if (isFirst.value) {
+    if (wrapTooltip.value) {
       stopObserve()
       if ('ResizeObserver' in window && window) {
         observer = new ResizeObserver(entries => {
@@ -96,7 +113,7 @@ const stopWatch = watch(
 )
 
 const hasTooltip = computed((): boolean => {
-  if (isFirst.value) {
+  if (wrapTooltip.value) {
     return contentWidth.value > elementWidth.value
   } else {
     return false
diff --git a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
index e38f069843..573a74828c 100644
--- a/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
+++ b/packages/entities/entities-shared/src/components/entity-filter/EntityFilter.vue
@@ -176,7 +176,7 @@ const searchableFields = computed<{ label: string, value: string, expanded: bool
   const fields = (props.config as FuzzyMatchFilterConfig).fields
   return Object
     .keys(fields)
-    .filter((key: string) => fields[key].searchable)
+    .filter((key: string) => fields?.[key]?.searchable)
     .map((key: string) => ({
       label: fields[key].label || key,
       value: key,
diff --git a/packages/entities/entities-shared/src/components/entity-form-section/EntityFormSection.vue b/packages/entities/entities-shared/src/components/entity-form-section/EntityFormSection.vue
index fb2622c7d4..967c21c1f3 100644
--- a/packages/entities/entities-shared/src/components/entity-form-section/EntityFormSection.vue
+++ b/packages/entities/entities-shared/src/components/entity-form-section/EntityFormSection.vue
@@ -85,6 +85,7 @@ const legendId = uuidv4()
 <style lang="scss" scoped>
 fieldset {
   margin: 0;
+  min-width: 0;
   padding: 0;
 }
 
diff --git a/packages/entities/entities-shared/src/types/base.ts b/packages/entities/entities-shared/src/types/base.ts
index 8ee2d7a4b7..383bd3aabb 100644
--- a/packages/entities/entities-shared/src/types/base.ts
+++ b/packages/entities/entities-shared/src/types/base.ts
@@ -6,4 +6,9 @@ export interface Field {
   searchable?: boolean
   /** Determines if the field is sortable */
   sortable?: boolean
+  /**
+   * Determines if cells of this field should be wrapped inside KTooltips.
+   * Need to use with max-width with EntityBaseTable's cellAttributes prop.
+   */
+  tooltip?: boolean
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32c9f8723d..9d72e7f77a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -528,11 +528,11 @@ importers:
         specifier: 9.0.0-alpha.146
         version: 9.0.0-alpha.146(axios@1.6.8)(vue-router@4.3.0)(vue@3.4.21)
       monaco-editor:
-        specifier: 0.47.0
-        version: 0.47.0
+        specifier: 0.21.3
+        version: 0.21.3
       vite-plugin-monaco-editor:
         specifier: ^1.1.0
-        version: 1.1.0(monaco-editor@0.47.0)
+        version: 1.1.0(monaco-editor@0.21.3)
       vite-plugin-top-level-await:
         specifier: ^1.4.1
         version: 1.4.1(vite@5.2.8)
@@ -840,6 +840,15 @@ importers:
       '@kong-ui-public/entities-shared':
         specifier: workspace:^
         version: link:../entities-shared
+      '@kong-ui-public/expressions':
+        specifier: workspace:^
+        version: link:../../core/expressions
+      '@kong/icons':
+        specifier: ^1.8.16
+        version: 1.9.0(vue@3.4.21)
+      lodash.isequal:
+        specifier: ^4.5.0
+        version: 4.5.0
     devDependencies:
       '@kong-ui-public/i18n':
         specifier: workspace:^
@@ -850,9 +859,18 @@ importers:
       '@kong/kongponents':
         specifier: 9.0.0-alpha.146
         version: 9.0.0-alpha.146(axios@1.6.8)(vue-router@4.3.0)(vue@3.4.21)
+      '@types/lodash.isequal':
+        specifier: ^4.5.8
+        version: 4.5.8
       axios:
         specifier: ^1.6.8
         version: 1.6.8
+      monaco-editor:
+        specifier: 0.21.3
+        version: 0.21.3
+      vite-plugin-monaco-editor:
+        specifier: ^1.1.0
+        version: 1.1.0(monaco-editor@0.21.3)
       vue:
         specifier: ^3.4.21
         version: 3.4.21(typescript@5.3.3)
@@ -1044,7 +1062,7 @@ importers:
         version: 17.0.2(react@17.0.2)
       swagger-client:
         specifier: ^3.26.6
-        version: 3.26.8
+        version: 3.26.6
       swagger-ui:
         specifier: ^5.1.3
         version: 5.1.3
@@ -4001,6 +4019,12 @@ packages:
       '@types/lodash': 4.14.202
     dev: true
 
+  /@types/lodash.isequal@4.5.8:
+    resolution: {integrity: sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==}
+    dependencies:
+      '@types/lodash': 4.17.0
+    dev: true
+
   /@types/lodash.mapkeys@4.6.9:
     resolution: {integrity: sha512-6/ERBCabeDI656LsV+oopLjdnJ/x1PCAE6kkkssH8e4i0K7Pw307noxHCbUc6cAVfTo9vx0Z+k3QZwy1IrUZcA==}
     dependencies:
@@ -10358,6 +10382,10 @@ packages:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: false
 
+  /lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    dev: false
+
   /lodash.isfunction@3.0.9:
     resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
     dev: true
@@ -11238,8 +11266,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /monaco-editor@0.47.0:
-    resolution: {integrity: sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==}
+  /monaco-editor@0.21.3:
+    resolution: {integrity: sha512-9N7wATLpi+googstvtm6IKg97vPQ77FDYEpkow5tLriM/VJ0DaTRyUP4UVzcoH7KlPDX+e/rE7/imcOUeGkT6g==}
     dev: true
 
   /mri@1.2.0:
@@ -14305,8 +14333,8 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
-  /swagger-client@3.26.8:
-    resolution: {integrity: sha512-NzvHWpWLeNVJAFrH+cRyzCzYrKNYG5AuaTDwaL/sqHRDMxjj8SN9Ua84EbfsUqrUnI50sW270dgQphp0TorAcg==}
+  /swagger-client@3.26.6:
+    resolution: {integrity: sha512-PYYca8BsamZaOjlKr5ombOTeDje1ddiYAKGstpmAU3iU+mBKgqHiw5G2J77SC9+chKU5y0aJzmQX4hNu3p2y5A==}
     dependencies:
       '@babel/runtime-corejs3': 7.22.15
       '@swagger-api/apidom-core': 0.99.1
@@ -14362,7 +14390,7 @@ packages:
       reselect: 4.1.8
       serialize-error: 8.1.0
       sha.js: 2.4.11
-      swagger-client: 3.26.8
+      swagger-client: 3.26.6
       url-parse: 1.5.10
       xml: 1.0.1
       xml-but-prettier: 1.0.1
@@ -15272,12 +15300,12 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-monaco-editor@1.1.0(monaco-editor@0.47.0):
+  /vite-plugin-monaco-editor@1.1.0(monaco-editor@0.21.3):
     resolution: {integrity: sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==}
     peerDependencies:
       monaco-editor: '>=0.33.0'
     dependencies:
-      monaco-editor: 0.47.0
+      monaco-editor: 0.21.3
     dev: true
 
   /vite-plugin-top-level-await@1.4.1(vite@5.2.8):