refactor: for route state prefer events over v-model

packages/kuma-gui/src/app/application/components/route-view/README.md

@@ -93,12 +93,10 @@ Defining these "dependencies" here has several advantages:
 4. Boolean route params are transformed correctly for the URL. In the above
    example the resulting query parameter will be the existence of `?checked`
    not `?checked=true` and `?checked=false`
-5. Route params can be used as `v-model` values. Ideally we usually use events
-   to change route properties, but for components that only support `v-model`
-   you can use the route.param as the v-model. For example `<KCheckBox
-   v-model="route.params.checked" />` will automatically sync the checkbox state
-   to the `?checked` query parameter. This aims to make it easier to maintain
-   state in the browser URL and harder not to
+5. Route params can be used as a state for input elements. In order to retrieve and update the route properties
+   we can use events. For example `<KCheckBox :model-value="route.params.checked" @change="(value) => route.update({ checked: value })" />`
+   will automatically sync the checkbox state to the `?checked` query parameter. This aims to make it easier to maintain
+   state in the browser URL and harder not to. Note that this does not work when using the two-way binding attribute `v-model`.
 
 ## Setting the `<title>` of the page
 

packages/kuma-gui/src/app/application/components/route-view/RouteView.vue

@@ -174,18 +174,6 @@ const routeView = {
 }
 const routeParams = reactive<Params>(structuredClone(props.params) as Params)
 
-// Updates the URL for route params if used as a modelValue (for boolean props only)
-watch(routeParams, (val) => {
-  if (route.name === props.name) {
-    const booleans = Object.fromEntries(Object.entries(val).filter(([key, _value]) => {
-      return typeof props.params[key] === 'boolean'
-    }))
-    if (Object.keys(booleans).length > 0) {
-      routeUpdate(booleans)
-    }
-  }
-})
-
 // when any URL params change, normalize/validate/default and reset our actual application params
 const redirected = ref<boolean>(false)
 watch(() => {

packages/kuma-gui/src/app/connections/views/ConnectionOutboundSummaryXdsConfigView.vue

@@ -39,8 +39,9 @@
         >
           <template #primary-actions>
             <XCheckbox
-              v-model="route.params.includeEds"
+              :checked="route.params.includeEds"
               :label="t('connections.include_endpoints')"
+              @change="(value) => route.update({ includeEds: value})"
             />
             <XAction
               action="refresh"

packages/kuma-gui/src/app/connections/views/ConnectionsXdsConfigView.vue

@@ -38,8 +38,9 @@
           >
             <template #primary-actions>
               <XCheckbox
-                v-model="route.params.includeEds"
+                :checked="route.params.includeEds"
                 label="Include Endpoints"
+                @change="(value) => route.update({ includeEds: value})"
               />
               <XAction
                 action="refresh"

packages/kuma-gui/src/app/data-planes/views/DataPlaneDetailView.vue

@@ -288,8 +288,9 @@
                   #actions
                 >
                   <XInputSwitch
-                    v-model="route.params.inactive"
+                    :checked="route.params.inactive"
                     data-testid="dataplane-outbounds-inactive-toggle"
+                    @change="(value) => route.update({ inactive: value})"
                   >
                     <template #label>
                       Show inactive

packages/kuma-gui/src/app/x/components/x-checkbox/README.md

@@ -0,0 +1 @@
+# x-checkbox

packages/kuma-gui/src/app/x/components/x-checkbox/XCheckbox.vue

@@ -0,0 +1,23 @@
+<template>
+  <KCheckbox
+    :model-value="props.checked"
+  >
+    <template
+      v-for="(_, slotName) in slots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="(slotProps)"
+      />
+    </template>
+  </KCheckbox>
+</template>
+
+<script setup lang="ts">
+import { KCheckbox } from '@kong/kongponents'
+
+const props = defineProps<{ checked?: boolean }>()
+const slots = defineSlots()
+</script>

packages/kuma-gui/src/app/x/components/x-input-switch/README.md

@@ -0,0 +1 @@
+# x-input-switch

packages/kuma-gui/src/app/x/components/x-input-switch/XInputSwitch.vue

@@ -0,0 +1,23 @@
+<template>
+  <KInputSwitch
+    :model-value="props.checked"
+  >
+    <template
+      v-for="(_, slotName) in slots"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="(slotProps)"
+      />
+    </template>
+  </KInputSwitch>
+</template>
+
+<script setup lang="ts">
+import { KInputSwitch } from '@kong/kongponents'
+
+const props = defineProps<{ checked?: boolean }>()
+const slots = defineSlots()
+</script>

packages/kuma-gui/src/app/x/index.ts

@@ -1,18 +1,20 @@
-import Kongponents, { KTooltip, KCard, KPop, KInputSwitch, KCheckbox, KRadio } from '@kong/kongponents'
+import Kongponents, { KTooltip, KCard, KPop, KRadio } from '@kong/kongponents'
 
 import XAboutCard from './components/x-about-card/XAboutCard.vue'
 import XAction from './components/x-action/XAction.vue'
 import XActionGroup from './components/x-action-group/XActionGroup.vue'
 import XAlert from './components/x-alert/XAlert.vue'
 import XBadge from './components/x-badge/XBadge.vue'
 import XBreadcrumbs from './components/x-breadcrumbs/XBreadcrumbs.vue'
+import XCheckBox from './components/x-checkbox/XCheckbox.vue'
 import XCodeBlock from './components/x-code-block/XCodeBlock.vue'
 import XCopyButton from './components/x-copy-button/XCopyButton.vue'
 import XDisclosure from './components/x-disclosure/XDisclosure.vue'
 import XEmptyState from './components/x-empty-state/XEmptyState.vue'
 import XI18n from './components/x-i18n/XI18n.vue'
 import XIcon from './components/x-icon/XIcon.vue'
 import XInput from './components/x-input/XInput.vue'
+import XInputSwitch from './components/x-input-switch/XInputSwitch.vue'
 import XLayout from './components/x-layout/XLayout.vue'
 import XModal from './components/x-modal/XModal.vue'
 import XProgress from './components/x-progress/XProgress.vue'
@@ -32,8 +34,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     XCard: typeof KCard
     XPop: typeof KPop
-    XInputSwitch: typeof KInputSwitch
-    XCheckbox: typeof KCheckbox
     XRadio: typeof KRadio
     XTooltip: typeof KTooltip
     //
@@ -59,6 +59,8 @@ declare module 'vue' {
     XTeleportSlot: typeof XTeleportSlot
     XDisclosure: typeof XDisclosure
     XAboutCard: typeof XAboutCard
+    XInputSwitch: typeof XInputSwitch
+    XCheckbox: typeof XCheckBox
   }
 }
 
@@ -84,8 +86,6 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['XAlert', XAlert],
           ['XCard', KCard],
           ['XPop', KPop],
-          ['XInputSwitch', KInputSwitch],
-          ['XCheckbox', KCheckbox],
           ['XRadio', KRadio],
           ['XTooltip', KTooltip],
           //
@@ -110,6 +110,8 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['XTeleportSlot', XTeleportSlot],
           ['XDisclosure', XDisclosure],
           ['XAboutCard', XAboutCard],
+          ['XInputSwitch', XInputSwitch],
+          ['XCheckbox', XCheckBox],
         ]
       },
       labels: [

packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressDetailView.vue

@@ -100,8 +100,9 @@
                   #actions
                 >
                   <XInputSwitch
-                    v-model="route.params.inactive"
+                    :checked="route.params.inactive"
                     data-testid="dataplane-outbounds-inactive-toggle"
+                    @change="(value) => route.update({ inactive: value})"
                   >
                     <template #label>
                       Show inactive

packages/kuma-gui/src/app/zone-egresses/views/ZoneEgressXdsConfigView.vue

@@ -36,8 +36,9 @@
           >
             <template #primary-actions>
               <XCheckbox
-                v-model="route.params.includeEds"
+                :checked="route.params.includeEds"
                 label="Include Endpoints"
+                @change="(value) => route.update({ includeEds: value})"
               />
               <XAction
                 action="refresh"

packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressDetailView.vue

@@ -125,8 +125,9 @@
                 #actions
               >
                 <XInputSwitch
-                  v-model="route.params.inactive"
+                  :checked="route.params.inactive"
                   data-testid="dataplane-outbounds-inactive-toggle"
+                  @change="(value) => route.update({ inactive: value})"
                 >
                   <template #label>
                     Show inactive

packages/kuma-gui/src/app/zone-ingresses/views/ZoneIngressXdsConfigView.vue

@@ -36,8 +36,9 @@
           >
             <template #primary-actions>
               <XCheckbox
-                v-model="route.params.includeEds"
+                :checked="route.params.includeEds"
                 label="Include Endpoints"
+                @change="(value) => route.update({ includeEds: value})"
               />
               <XAction
                 action="refresh"