From a9bd8c46e0700b7633e8f07e52f00ff50deb0ece Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Wed, 17 Jul 2024 15:03:48 +0800
Subject: [PATCH] feat(@kong-ui-public/entities-routes): integrate
 router-playground-modal [KM-299]

---
 .../src/components/RouterPlayground.vue       |  2 +-
 .../entities/entities-routes/package.json     |  2 +-
 .../components/RouteFormExpressionsEditor.vue | 56 ++++++++++++++++++-
 .../RouteFormExpressionsEditorLoader.vue      | 17 +++++-
 .../entities-routes/src/composables/index.ts  |  2 +
 .../src/composables/useToaster.ts             | 12 ++++
 .../entities-routes/src/locales/en.json       |  3 +
 .../entities/entities-routes/vite.config.ts   |  1 +
 8 files changed, 88 insertions(+), 7 deletions(-)
 create mode 100644 packages/entities/entities-routes/src/composables/useToaster.ts

diff --git a/packages/core/expressions/src/components/RouterPlayground.vue b/packages/core/expressions/src/components/RouterPlayground.vue
index ef04abb0d6..f6c471ecd0 100644
--- a/packages/core/expressions/src/components/RouterPlayground.vue
+++ b/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">
diff --git a/packages/entities/entities-routes/package.json b/packages/entities/entities-routes/package.json
index 284226e3ab..79e5cd8129 100644
--- a/packages/entities/entities-routes/package.json
+++ b/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:^",
diff --git a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
index 17568d6605..307e8a0c76 100644
--- a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditor.vue
+++ b/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>
diff --git a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue b/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
index 46128e64ec..4c4dd1f45b 100644
--- a/packages/entities/entities-routes/src/components/RouteFormExpressionsEditorLoader.vue
+++ b/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
diff --git a/packages/entities/entities-routes/src/composables/index.ts b/packages/entities/entities-routes/src/composables/index.ts
index 3893dfc828..22d5b203e0 100644
--- a/packages/entities/entities-routes/src/composables/index.ts
+++ b/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,
 }
diff --git a/packages/entities/entities-routes/src/composables/useToaster.ts b/packages/entities/entities-routes/src/composables/useToaster.ts
new file mode 100644
index 0000000000..362b084fec
--- /dev/null
+++ b/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 }
+}
diff --git a/packages/entities/entities-routes/src/locales/en.json b/packages/entities/entities-routes/src/locales/en.json
index 60e73075ab..a45215a540 100644
--- a/packages/entities/entities-routes/src/locales/en.json
+++ b/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"
     }
   }
 }
diff --git a/packages/entities/entities-routes/vite.config.ts b/packages/entities/entities-routes/vite.config.ts
index 9219a541fe..d00f548e61 100644
--- a/packages/entities/entities-routes/vite.config.ts
+++ b/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
       ],
     },