feat: add resizable table columns

.eslintrc.cjs

@@ -133,6 +133,7 @@ const INLINE_NON_VOID_ELEMENTS = [
             'AppView',
             'DataLoader',
             'DataSource',
+            'DataSink',
             'DataCollection',
             'RouteView',
             'RouteTitle',

src/app/application/components/app-collection/AppCollection.vue

@@ -30,7 +30,17 @@
     disable-sorting
     :disable-pagination="props.pageNumber === 0"
     hide-pagination-when-optional
+    resize-columns
+    :table-preferences="{
+      columnWidths: props.headers.reduce<Record<string, number>>((prev, value) => {
+        if(typeof value.width !== 'undefined') {
+          prev[value.key] = value.width
+        }
+        return prev
+      }, {}),
+    }"
     @row:click="click"
+    @update:table-preferences="resize"
   >
     <template
       v-if="props.items?.length === 0"
@@ -97,12 +107,13 @@
 
 <script lang="ts" setup generic="Row extends {}">
 import { AddIcon } from '@kong/icons'
-import { KButton, KTable, TableHeader } from '@kong/kongponents'
+import { KButton, KTable } from '@kong/kongponents'
 import { useSlots, ref, watch, Ref } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 
 import EmptyBlock from '@/app/common/EmptyBlock.vue'
 import { useI18n } from '@/utilities'
+import type { TableHeader as KTableHeader, TablePreferences } from '@kong/kongponents'
 
 type CellAttrParams = {
   headerKey: string
@@ -119,9 +130,15 @@ type ChangeValue = {
   page?: number
   size?: number
 }
+type ResizeValue = {
+  headers: Record<string, { width: number }>
+}
 
 const { t } = useI18n()
 
+type TableHeader = KTableHeader & {
+  width?: number
+}
 const props = withDefaults(defineProps<{
   isSelectedRow?: ((row: Row) => boolean) | null
   total?: number
@@ -148,6 +165,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'change', value: ChangeValue): void
+  (e: 'resize', value: ResizeValue): void
 }>()
 
 const slots = useSlots()
@@ -172,6 +190,19 @@ const kTableMountKey = ref(0)
 const lastPageNumber = ref(props.pageNumber)
 const lastPageSize = ref(props.pageSize)
 
+const resize = (args: TablePreferences) => {
+  const headers = Object.entries(args.columnWidths ?? {}).reduce<Record<string, { width: number }>>((prev, [key, value]) => {
+    prev[key] = {
+      width: value,
+    }
+    return prev
+  }, {})
+
+  emit('resize', {
+    headers,
+  })
+}
+
 watch(() => props.items, (newItems, oldItems) => {
   if (newItems !== oldItems) {
     cacheKey.value++

src/app/application/components/data-source/DataSink.vue

@@ -0,0 +1,34 @@
+<template>
+  <XDisclosure
+    v-slot="{ toggle, expanded }"
+  >
+    <DataSource
+      v-if="expanded"
+      :src="`${props.src}/${JSON.stringify(data)}`"
+      @change="toggle"
+    />
+    <!-- eslint-disable vue/no-lone-template -->
+    <template
+      :ref="() => write = toggle"
+    />
+    <!-- eslint-enable -->
+  </XDisclosure>
+  <slot
+    :submit="(args: any) => { data = args;write()}"
+  />
+</template>
+
+<script lang="ts" generic="T extends string | {
+  toString(): string
+  typeOf(): any
+}" setup
+>
+import { ref } from 'vue'
+
+const props = defineProps<{
+  src: T
+}>()
+
+const data = ref({})
+const write = ref(() => {})
+</script>

src/app/application/components/route-view/RouteView.vue

@@ -1,37 +1,50 @@
 <template>
-  <div
-    class="route-view"
-    :data-testid="name"
+  <DataSource
+    v-slot="{ data: me }: MeSource"
+    :src="`/me/${props.name}`"
   >
     <div
-      v-if="!hasParent"
-      id="application-route-announcer"
-      ref="title"
-      class="route-view-title visually-hidden"
-      aria-live="assertive"
-      aria-atomic="true"
-    />
-    <slot
-      :id="UniqueId"
-      name="default"
-      :t="t"
-      :env="env"
-      :can="can"
-      :uri="uri"
-      :route="{
-        name: props.name,
-        update: routeUpdate,
-        replace: routeReplace,
-        params: routeParams,
-        back: routerBack,
-        children,
-        child,
-      }"
-    />
-  </div>
+      class="route-view"
+      v-bind="htmlAttrs"
+      :data-testid="name"
+    >
+      <div
+        v-if="!hasParent"
+        id="application-route-announcer"
+        ref="title"
+        class="route-view-title visually-hidden"
+        aria-live="assertive"
+        aria-atomic="true"
+      />
+      <DataSink
+        v-if="me"
+        v-slot="{ submit }"
+        :src="`/me/mesh-list-view`"
+      >
+        <slot
+          :id="UniqueId"
+          name="default"
+          :t="t"
+          :env="env"
+          :me="{ data: me, set: submit, get: (uri: string, d: unknown = {}) => get(me, uri, d) }"
+          :can="can"
+          :uri="uri"
+          :route="{
+            name: props.name,
+            update: routeUpdate,
+            replace: routeReplace,
+            params: routeParams,
+            back: routerBack,
+            children,
+            child,
+          }"
+        />
+      </DataSink>
+    </div>
+  </DataSource>
 </template>
 <script lang="ts" setup generic="T extends Record<string, string | number | boolean> = {}">
-import { computed, provide, inject, ref, watch, onBeforeUnmount, reactive } from 'vue'
+import { computed, provide, inject, ref, watch, onBeforeUnmount, reactive, useAttrs } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { ROUTE_VIEW_PARENT, ROUTE_VIEW_ROOT } from '.'
@@ -45,8 +58,11 @@ import {
   beforePaint,
 } from '../../utilities'
 import { useUri } from '@/app/application/services/data-source'
+import type { MeSource } from '@/app/me/sources'
 import { useEnv } from '@/utilities'
+import { get } from '@/utilities/get'
 import type { RouteRecordRaw } from 'vue-router'
+
 export type RouteView = {
   name: string
   addTitle: (item: string, sym: Symbol) => void
@@ -63,6 +79,7 @@ const win = window
 const env = useEnv()
 const can = useCan()
 const uri = useUri()
+const htmlAttrs = useAttrs()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()

src/app/application/index.ts

@@ -5,6 +5,7 @@ import groupBy from 'object.groupby'
 import AppView from './components/app-view/AppView.vue'
 import DataCollection from './components/data-collection/DataCollection.vue'
 import DataLoader from './components/data-source/DataLoader.vue'
+import DataSink from './components/data-source/DataSink.vue'
 import DataSource from './components/data-source/DataSource.vue'
 import RouteTitle from './components/route-view/RouteTitle.vue'
 import RouteView from './components/route-view/RouteView.vue'
@@ -45,6 +46,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppView: typeof AppView
     DataSource: typeof DataSource
+    DataSink: typeof DataSink
     DataLoader: typeof DataLoader
     DataCollection: typeof DataCollection
     RouteView: typeof RouteView
@@ -85,6 +87,7 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
           ['AppView', AppView],
           ['DataLoader', DataLoader],
           ['DataSource', DataSource],
+          ['DataSink', DataSink],
           ['DataCollection', DataCollection],
           ['RouteView', RouteView],
           ['RouteTitle', RouteTitle],

src/app/me/sources.ts

@@ -1,14 +1,50 @@
+import merge from 'deepmerge'
+
 import { defineSources } from '../application/services/data-source'
 import type { DataSourceResponse } from '@/app/application'
 
 export type MeSource = DataSourceResponse<{
   pageSize: number
+  headers: Record<string, { width: number }>
 }>
 
-export const sources = () => {
+export const sources = (_api: unknown, storage: Storage = window.localStorage) => {
+  const prefix = 'kumahq.kuma-gui'
+  const get = async (key: string): Promise<Object> => {
+    try {
+      return JSON.parse(storage.getItem(`${prefix}:${key}`) ?? '{}')
+    } catch (e) {
+      console.error(e)
+    }
+    return {}
+  }
+  const set = async (key: string, value: Object): Promise<Object> => {
+    try {
+      storage.setItem(`${prefix}:${key}`, JSON.stringify(value))
+      return value
+    } catch (e) {
+      console.error(e)
+    }
+    return {}
+  }
   return defineSources({
     '/me': async () => {
       return Promise.resolve({ pageSize: 50 })
     },
+    '/me/:route': async (params) => {
+      const json = await get(params.route)
+      const res = merge({
+        params: {
+          size: 50,
+        },
+      }, json)
+      return res
+    },
+    '/me/:route/:data': async (params) => {
+      const json = JSON.parse(params.data)
+      const res = merge(await get(params.route), json)
+
+      set(params.route, res)
+    },
   })
 }