feat(@kong-ui-public/entities-routes): integrate router-playground-mo…

…dal [KM-299]

packages/core/expressions/src/components/RouterPlayground.vue

@@ -45,7 +45,7 @@
         data-testid="expressions-inspirations"
       >
         <div class="title">
-          <RocketIcon />
+          <RocketIcon size="16px" />
           <span>{{ i18n.t('routerPlayground.inspiration') }}</span>
         </div>
         <div class="buttons">

packages/entities/entities-routes/package.json

@@ -67,7 +67,7 @@
     "extends": "../../../package.json"
   },
   "distSizeChecker": {
-    "errorLimit": "700KB"
+    "errorLimit": "800KB"
   },
   "dependencies": {
     "@kong-ui-public/entities-shared": "workspace:^",

packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue

@@ -4,21 +4,71 @@
     v-model="expression"
     :schema="schema"
   />
+
+  <div
+    class="route-form-open-in-playground"
+    data-testid="open-router-playground"
+    @click="isPlaygroundVisible = true"
+  >
+    <RocketIcon size="16px" />
+    <span>{{ playgroundTriggerText }}</span>
+  </div>
+
+  <RouterPlaygroundModal
+    v-if="isPlaygroundVisible"
+    :initial-expression="expression"
+    :is-visible="isPlaygroundVisible"
+    @cancel="isPlaygroundVisible = false"
+    @commit="handleCommit"
+    @notify="handleNotify"
+  />
 </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 { ExpressionsEditor, PROTOCOL_TO_SCHEMA, type Schema, RouterPlaygroundModal } from '@kong-ui-public/expressions'
+import { computed, ref } from 'vue'
+import { RocketIcon } from '@kong/icons'
 
 import '@kong-ui-public/expressions/dist/style.css'
 
-const props = defineProps<{ protocol?: string }>()
+const props = defineProps<{ protocol?: string, playgroundTriggerText: string }>()
 const expression = defineModel<string>({ required: true })
+const emit = defineEmits<{
+  (e: 'notify', options: { message: string, type: string }): void
+}>()
+const isPlaygroundVisible = ref(false)
 
 const schema = computed<Schema | undefined>(() => {
   return PROTOCOL_TO_SCHEMA[props.protocol as keyof typeof PROTOCOL_TO_SCHEMA]
 })
+
+const handleCommit = (expr: string) => {
+  expression.value = expr
+  isPlaygroundVisible.value = false
+}
+
+const handleNotify = (options: {
+  message: string;
+  type: string;
+}) => {
+  emit('notify', options)
+}
 </script>
+
+<style scoped lang="scss">
+.route-form-open-in-playground {
+  align-items: center;
+  color: $kui-color-text-primary-strong;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: $kui-font-size-30;
+  font-weight: bold;
+  gap: $kui-space-40;
+  justify-content: flex-start;
+  margin-top: $kui-space-50;
+}
+</style>

packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue

@@ -12,7 +12,9 @@
   <RouteFormExpressionsEditor
     v-else
     v-model="expression"
+    :playground-trigger-text="t('form.expressionPlayground.testLink')"
     :protocol="props.protocol"
+    @notify="handleNotify"
   />
   <slot
     :expression="{ value: expression, update: setExpression }"
@@ -28,10 +30,11 @@
  * editor until they are used.
  */
 import { defineAsyncComponent, h, onMounted, ref, type Component } from 'vue'
-import useI18n from '../composables/useI18n'
+import composables from '../composables'
 import { ExpressionsEditorState } from '../types'
 
-const { i18n: { t } } = useI18n()
+const { i18n: { t } } = composables.useI18n()
+const { toaster } = composables.useToaster()
 
 const loadingComponent: Component = {
   render: () => h('div', t('form.expressions_editor.loading')),
@@ -59,6 +62,16 @@ const setExpression = (value: string) => {
   expression.value = value
 }
 
+const handleNotify = ({ message, type }: {
+  message: string;
+  type: string;
+}) => {
+  toaster.open({
+    appearance: type,
+    message,
+  })
+}
+
 onMounted(async () => {
   try {
     await (await import('@kong-ui-public/expressions')).asyncInit

packages/entities/entities-routes/src/composables/index.ts

@@ -1,6 +1,8 @@
 import useI18n from './useI18n'
+import useToaster from './useToaster'
 
 // All composables must be exported as part of the default object for Cypress test stubs
 export default {
   useI18n,
+  useToaster,
 }

packages/entities/entities-routes/src/composables/useToaster.ts

@@ -0,0 +1,12 @@
+import { onBeforeUnmount } from 'vue'
+import { ToastManager } from '@kong/kongponents'
+
+export default function useToaster() {
+  const toaster = new ToastManager()
+
+  onBeforeUnmount(() => {
+    toaster.destroy()
+  })
+
+  return { toaster }
+}

packages/entities/entities-routes/src/locales/en.json

@@ -248,6 +248,9 @@
     "expressions_editor": {
       "loading": "Loading the Expressions editor…",
       "error": "Error occurred while loading the Expressions editor. Please view the console for more details."
+    },
+    "expressionPlayground": {
+      "testLink": "Test with Router Playground"
     }
   }
 }

packages/entities/entities-routes/vite.config.ts

@@ -20,6 +20,7 @@ const config = mergeConfig(sharedViteConfig, defineConfig({
     rollupOptions: {
       external: [
         '@kong-ui-public/expressions', // This is optional if we do not use Expressions features
+        '@kong-ui-public/expressions/dist/style.css', // This is optional if we do not use Expressions features
         'monaco-editor', // This is optional if we do not use Expressions features
       ],
     },