chore: add clipboard debug

cypress/main.ts

@@ -6,6 +6,7 @@ import { build, token } from '@/services/utils'
   const $ = {
     // cypress doesn't need i18n but this quietens TS temporarily
     i18n: token('i18n'),
+    components: token('components'),
     ...DEV_TOKENS,
     ...TOKENS,
   }

src/app/application/components/debug-k-clipboard-provider/DebugKClipboardProvider.vue

@@ -0,0 +1,28 @@
+<template>
+  <ClipboardProvider v-slot="{ copyToClipboard }">
+    <slot
+      name="default"
+      :copy-to-clipboard="async (text: string) => {
+        const res = await copyToClipboard(text)
+        if(res) {
+          console.info(
+            `%cdebug-k-clipboard-provider: The following was copied to the clipboard:`, 'color: blue',
+            `
+${text}`,
+          )
+        } else {
+          console.error(
+            `debug-k-clipboard-provider: The following wasn't copied to the clipboard:`,
+            `
+${text}`,
+          )
+
+        }
+        return res;
+      }"
+    />
+  </ClipboardProvider>
+</template>
+<script lang="ts" setup>
+import { KClipboardProvider as ClipboardProvider } from '@kong/kongponents'
+</script>

src/app/application/components/debug-k-clipboard-provider/README.md

@@ -0,0 +1,7 @@
+# DebugKClipboardProvider
+
+Wraps KClipboardProvider in a decorator to also `console.log` the text of any
+copy (and also `console.error` the text if the copy fails).
+
+The component should always be injected as a replacement for KClipboardProvider
+in debug/dev modes only and never used directly.

src/app/vue/index.ts

@@ -35,14 +35,14 @@ export const services = (app: Record<string, Token>): ServiceDefinition[] => {
         return async (App: Component) => {
           const app = createApp(App)
 
-          components.forEach(([name, component]: [string, Component]) => {
-            app.component(name, component)
-          })
-
           plugins.forEach(([...args]) => {
             app.use(...args)
           })
 
+          components.forEach(([name, component]: [string, Component]) => {
+            app.component(name, component)
+          })
+
           return app
         }
       },

src/services/development.ts

@@ -1,6 +1,7 @@
 import { setupWorker, MockedRequest } from 'msw'
 
 import Logger from './logger/Logger'
+import DebugKClipboardProvider from '@/app/application/components/debug-k-clipboard-provider/DebugKClipboardProvider.vue'
 import debugI18n from '@/app/application/services/i18n/DebugI18n'
 import { TOKENS as CONTROL_PLANES } from '@/app/control-planes'
 import cookied from '@/services/env/CookiedEnv'
@@ -31,6 +32,7 @@ const $ = {
 
 type SupportedTokens = typeof $ & {
   i18n: Token
+  components: Token
   logger: Token
   env: Token<AEnv>
 }
@@ -67,6 +69,17 @@ export const services: ServiceConfigurator<SupportedTokens> = (app) => [
     decorates: app.i18n,
   }],
 
+  [token('development.components'), {
+    service: () => {
+      return [
+        ['KClipboardProvider', DebugKClipboardProvider],
+      ]
+    },
+    labels: [
+      app.components,
+    ],
+  }],
+
   [token<AEnv>('env.debug'), {
     service: (env: () => AEnv) => {
       return cookied(env())

src/test-support/mocks/src/meshes/_.ts

@@ -8,6 +8,9 @@ export default ({ fake, env }: EndpointDependencies): MockResponder => (req) =>
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       name,
       type: 'Mesh',
       creationTime: '2020-06-19T12:18:02.097986-04:00',

src/test-support/mocks/src/meshes/_/circuit-breakers/_.ts

@@ -4,6 +4,9 @@ export default (_deps: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'CircuitBreaker',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/dataplanes/_.ts

@@ -16,6 +16,9 @@ export default ({ fake, env }: EndpointDependencies): MockResponder => (req) =>
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'Dataplane',
       mesh,
       name,

src/test-support/mocks/src/meshes/_/external-services/_.ts

@@ -6,6 +6,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'ExternalService',
       mesh,
       name,

src/test-support/mocks/src/meshes/_/fault-injections/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'FaultInjection',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/health-checks/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'HealthCheck',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/meshfaultinjections/_.ts

@@ -6,6 +6,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'MeshFaultInjection',
       mesh,
       name,

src/test-support/mocks/src/meshes/_/meshgatewayroutes/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'MeshGatewayRoute',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/meshgateways/_.ts

@@ -4,6 +4,9 @@ export default (_deps: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'MeshGateway',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/proxytemplates/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'ProxyTemplate',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/traffic-logs/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'TrafficLog',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/traffic-permissions/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'TrafficPermission',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/meshes/_/traffic-traces/_.ts

@@ -4,6 +4,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'TrafficTrace',
       mesh: params.mesh,
       name: params.name,

src/test-support/mocks/src/zone-ingresses/_.ts

@@ -7,6 +7,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'ZoneIngress',
       name,
       creationTime: '2021-07-13T08:40:59Z',

src/test-support/mocks/src/zoneegresses/_.ts

@@ -7,6 +7,9 @@ export default ({ fake }: EndpointDependencies): MockResponder => (req) => {
   return {
     headers: {},
     body: {
+      ...(req.url.searchParams.get('format') === 'kubernetes' && {
+        apiVersion: 'kuma.io/v1alpha1',
+      }),
       type: 'ZoneEgress',
       name,
       creationTime: '2021-07-13T08:40:59Z',

test-support/index.ts

@@ -26,14 +26,14 @@ export const services: ServiceConfigurator = (app) => [
       components: ComponentDefinition[],
       plugins: PluginDefinition[],
     ) => {
-      components.forEach(([name, component]: [string, Component]) => {
-        config.global.components[name] = component
-      })
-
       plugins.forEach(([...args]) => {
         config.global.plugins.push([...args])
       })
 
+      components.forEach(([name, component]: [string, Component]) => {
+        config.global.components[name] = component
+      })
+
       return async () => {
         throw new Error('You shouldn\'t be calling $.app during testing, just get(\'$.app\') is fine')
       }