feat(entities-plugins): datakit load data, simplify node select (#2332)

Author: Justineo

packages/entities/entities-plugins/src/components/free-form/Datakit/CodeEditor.vue

@@ -1,27 +1,56 @@
 <template>
-  <div
-    ref="editor-root"
-    class="dk-editor"
-  />
+  <div class="dk-code-editor">
+    <KAlert class="examples">
+      <div class="examples-content">
+        {{ t('plugins.free-form.datakit.description_example') }}
+
+        <KButton
+          v-for="(_, key) in examples"
+          :key="key"
+          appearance="secondary"
+          size="small"
+          @click="setExampleCode(key)"
+        >
+          {{ t(`plugins.free-form.datakit.examples.${key}`) }}
+        </KButton>
+      </div>
+
+      <template #icon>
+        <SparklesIcon />
+      </template>
+    </KAlert>
+    <div
+      ref="editor-root"
+      class="editor"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useTemplateRef, onMounted, onBeforeUnmount, shallowRef, toRaw } from 'vue'
 import * as monaco from 'monaco-editor'
-import type { YAMLException } from 'js-yaml'
+import { createI18n } from '@kong-ui-public/i18n'
+import { KAlert, KButton } from '@kong/kongponents'
+import { SparklesIcon } from '@kong/icons'
+import english from '../../../locales/en.json'
 import yaml, { JSON_SCHEMA } from 'js-yaml'
 import * as examples from './examples'
 
+import type { YAMLException } from 'js-yaml'
+import type { DatakitConfig } from './types'
+
+const { t } = createI18n<typeof english>('en-us', english)
+
 const {
   editing,
   config,
 } = defineProps<{
   editing: boolean
-  config: any
+  config?: DatakitConfig
 }>()
 
 const emit = defineEmits<{
-  change: [config: any]
+  change: [config: unknown]
   error: [msg: string]
 }>()
 
@@ -127,8 +156,19 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.dk-editor {
-  height: 320px;
-  width: 100%;
+.dk-code-editor {
+  .examples {
+    margin-bottom: $kui-space-70;
+  }
+
+  .examples-content {
+    display: flex;
+    gap: $kui-space-40;
+  }
+
+  .editor {
+    height: 684px;
+    width: 100%;
+  }
 }
 </style>

packages/entities/entities-plugins/src/components/free-form/Datakit/DatakitForm.vue

@@ -21,42 +21,24 @@
     <template #default="formProps">
       <Form
         v-bind="formProps"
+        :data="{ config }"
         tag="div"
+        @change="handleFormChange"
       >
         <div v-if="finalEditorMode === 'flow'">
           <FlowEditor
-            :config="props.model.config"
+            :config="config"
             :editing="props.isEditing"
+            @change="handleConfigChange"
           />
         </div>
 
         <div v-else-if="finalEditorMode === 'code'">
-          <KAlert class="examples">
-            <div class="examples-content">
-              {{ t('plugins.free-form.datakit.description_example') }}
-
-              <KButton
-                v-for="(_, key) in examples"
-                :key="key"
-                appearance="secondary"
-                size="small"
-                @click="handleExampleClick(key)"
-              >
-                {{ t(`plugins.free-form.datakit.examples.${key}`) }}
-              </KButton>
-            </div>
-
-            <template #icon>
-              <SparklesIcon />
-            </template>
-          </KAlert>
-
           <CodeEditor
-            ref="code-editor"
             class="code-editor"
-            :config="props.model.config"
+            :config="config"
             :editing="props.isEditing"
-            @change="handleCodeChange"
+            @change="handleConfigChange"
             @error="handleCodeError"
           />
         </div>
@@ -71,17 +53,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef, inject } from 'vue'
-import { KAlert, KSegmentedControl } from '@kong/kongponents'
-import { SparklesIcon, DesignIcon, CodeblockIcon } from '@kong/icons'
+import { computed, inject, ref } from 'vue'
+import { KSegmentedControl } from '@kong/kongponents'
+import { DesignIcon, CodeblockIcon } from '@kong/icons'
 import { createI18n } from '@kong-ui-public/i18n'
 import english from '../../../locales/en.json'
 import StandardLayout from '../shared/layout/StandardLayout.vue'
 import Form from '../shared/Form.vue'
 import FlowEditor from './flow-editor/FlowEditor.vue'
 import CodeEditor from './CodeEditor.vue'
 import { usePreferences } from './composables'
-import * as examples from './examples'
 import { FEATURE_FLAGS } from '../../../constants'
 
 import type { Component } from 'vue'
@@ -94,8 +75,6 @@ const { t } = createI18n<typeof english>('en-us', english)
 const props = defineProps<Props<any>>()
 
 // provided by consumer apps
-// TODO: make the default value to `false` to make it opt-in
-// It's currently set to `true` for testing purposes
 const enableFlowEditor = inject<boolean>(FEATURE_FLAGS.DATAKIT_ENABLE_FLOW_EDITOR, false)
 
 // Editor mode selection
@@ -132,24 +111,37 @@ const description = computed(() => {
   }
 })
 
-// Code editor
+// Shared
 
-const codeEditor = useTemplateRef('code-editor')
+const config = ref({ ...props.model.config })
 
-function handleExampleClick(example: keyof typeof examples) {
-  codeEditor.value?.setExampleCode(example)
+// This change comes from freeform fields
+function handleFormChange(data: any) {
+  for (const key in data.config) {
+    // updating nodes can lead to re`load`ing the flow editor state
+    if (key !== 'nodes') {
+      config.value[key] = data.config[key]
+    }
+  }
 }
 
-function handleCodeChange(config: any) {
+function handleConfigChange(newConfig: unknown) {
+  // update the external form state
   props.onFormChange({
-    config,
+    config: newConfig,
   })
   props.onValidityChange?.({
     model: 'config',
     valid: true,
   })
+
+  // update the local config as the external form state isn't
+  // flowing back down to the component
+  config.value = newConfig
 }
 
+// Code editor
+
 function handleCodeError(msg: string) {
   props.onValidityChange?.({
     model: 'config',
@@ -158,20 +150,3 @@ function handleCodeError(msg: string) {
   })
 }
 </script>
-
-<style lang="scss" scoped>
-.dk-form {
-  .code-editor {
-    height: 684px;
-  }
-
-  .examples {
-    margin-bottom: $kui-space-70;
-  }
-
-  .examples-content {
-    display: flex;
-    gap: $kui-space-40;
-  }
-}
-</style>

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue

@@ -1,105 +1,64 @@
 <template>
   <div class="dk-flow-editor">
-    <div>Nothing here yet.</div>
     <KButton
       appearance="secondary"
       @click="modalOpen = true"
     >
       {{ t('plugins.free-form.datakit.flow_editor.cta') }}
     </KButton>
     <EditorModal v-model:open="modalOpen" />
+    <div class="field">
+      <BooleanField
+        name="config.debug"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import { createI18n } from '@kong-ui-public/i18n'
 import english from '../../../../locales/en.json'
 import { provideEditorStore } from '../composables'
-import type { ConfigNodeName, FieldName, NameConnection, NodeName } from '../types'
+import BooleanField from '../../shared/BooleanField.vue'
 import EditorModal from './modal/EditorModal.vue'
 
+import type { DatakitConfig } from '../types'
+
 const { t } = createI18n<typeof english>('en-us', english)
 
-defineProps<{
+const { config } = defineProps<{
   editing: boolean
-  config: any
+  config?: DatakitConfig
+}>()
+
+const emit = defineEmits<{
+  change: [config: DatakitConfig]
+  error: [msg: string]
 }>()
 
-// todo(zehao): mock data, remove later
-// provideEditorStore(MockData.configNodes, MockData.uiNodes)
+function onChange(newConfig: DatakitConfig) {
+  emit('change', {
+    ...config,
+    ...newConfig,
+  })
+}
 
-const { modalOpen } = provideEditorStore([
-  {
-    name: 'CAT_FACT' as ConfigNodeName,
-    type: 'call',
-    url: 'https://catfact.ninja/fact',
-    input: 'request.body' as NameConnection,
-  },
-  {
-    name: 'DOG_FACT' as ConfigNodeName,
-    type: 'call',
-    url: 'https://dogapi.dog/api/v1/facts',
-  },
-  {
-    name: 'JOIN' as ConfigNodeName,
-    type: 'jq',
-    inputs: {
-      cat: 'CAT_FACT.body',
-      dog: 'DOG_FACT.body',
-    } as Record<FieldName, NameConnection>,
-    jq: '{\n  cat_fact: .cat.fact,\n  dog_fact: .dog.facts[0],\n}\n',
-  },
-  {
-    name: 'EXIT' as ConfigNodeName,
-    type: 'exit',
-    inputs: {
-      body: 'JOIN',
-    } as Record<FieldName, NameConnection>,
-    status: 200,
-  },
-  {
-    name: 'DANGLING_CALL' as ConfigNodeName,
-    type: 'call',
-    url: 'https://dogapi.dog/api/v1/facts',
-  },
-  {
-    name: 'READ_UPSTREAM' as ConfigNodeName,
-    type: 'jq',
-    input: 'service_response',
-    jq: '.',
-  },
-  {
-    name: 'VALUE' as ConfigNodeName,
-    type: 'static',
-    values: {
-      foo: 'bar',
-      baz: null,
-      nested: {
-        key: 'value',
-        array: [1, 2, 3],
-      },
-    },
-    outputs: {
-      foo: 'MY_CALL.body',
-      baz: 'MY_CALL.headers',
-    } as Record<FieldName, NameConnection>,
-  },
-  {
-    name: 'MY_CALL' as ConfigNodeName,
-    type: 'call',
-    url: 'https://example.com/api',
-  },
-], [
-  {
-    name: 'VALUE' as NodeName,
-    phase: 'response',
-    position: { x: 0, y: 0 },
-    fields: {
-      output: ['foo', 'baz', 'nested', 'unknown'] as FieldName[],
-    },
-    expanded: {
-      output: true,
-    },
-  },
-])
+const { modalOpen, load } = provideEditorStore(config?.nodes ?? [], [], { onChange })
+
+watch(() => config?.nodes, (newNodes) => {
+  // Only load if the modal is not open
+  if (modalOpen.value) {
+    return
+  }
+  load(newNodes ?? [], [])
+})
 </script>
+
+<style lang="scss" scoped>
+.dk-flow-editor {
+  .field {
+    margin-top: $kui-space-80;
+  }
+}
+</style>