From bbbda6ea9fe80dbf5b2b97e896f466b12548eb2b Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 9 Oct 2025 15:22:05 +0800
Subject: [PATCH 1/8] feat(entities-*): datakit - vault resources [KM-1666]

---
 .../components/free-form/Datakit/constants.ts |   1 +
 .../Datakit/flow-editor/FlowEditor.vue        |   4 +-
 .../Datakit/flow-editor/VaultSecretPicker.vue | 103 +++++++++
 .../flow-editor/composables/useVaultForm.ts   |  69 ++++++
 .../flow-editor/modal/EditorContent.vue       |  69 +-----
 .../flow-editor/node-forms/NodeFormVault.vue  |  61 +++++
 .../flow-editor/node-forms/VaultField.vue     | 208 ++++++++++++++++++
 .../flow-editor/node/NodePropertiesPanel.vue  |   3 +-
 .../Datakit/flow-editor/node/vault.ts         |  29 +++
 .../{node => side-panel}/NodePanel.vue        |  16 +-
 .../flow-editor/side-panel/ResourcesPanel.vue |  25 +++
 .../flow-editor/side-panel/SidePanel.vue      | 120 ++++++++++
 .../Datakit/flow-editor/side-panel/index.ts   |   3 +
 .../Datakit/flow-editor/store/init.ts         |  81 +++++--
 .../Datakit/flow-editor/store/store.ts        |  17 +-
 .../free-form/Datakit/schema/strict.ts        |   2 +
 .../entities-plugins/src/locales/en.json      |  21 ++
 .../src/components/VaultSecretPicker.vue      |  23 +-
 18 files changed, 755 insertions(+), 100 deletions(-)
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
 rename packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/{node => side-panel}/NodePanel.vue (94%)
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/SidePanel.vue
 create mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/index.ts

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/constants.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/constants.ts
index 8464797fb4..502aa7f97d 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/constants.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/constants.ts
@@ -5,6 +5,7 @@ import { KUI_SPACE_40 } from '@kong/design-tokens'
 export const DK_HEADER_HEIGHT = 44
 export const DK_SIDE_PANEL_WIDTH = 220
 export const DK_NODE_PROPERTIES_PANEL_WIDTH = 366
+export const DK_NODE_PROPERTIES_PANEL_Z_INDEX = 1000 // ensure the panel is under the vault resource modal
 export const DK_NODE_PROPERTIES_PANEL_OFFSET_TOP =
   DK_HEADER_HEIGHT + parseFloat(KUI_SPACE_40)
 
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue
index f0bf901a63..04529074bf 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/FlowEditor.vue
@@ -49,8 +49,8 @@ const emit = defineEmits<{
   error: [msg: string]
 }>()
 
-function onChange(configNodes: ConfigNode[], uiNodes: UINode[]) {
-  const nextConfig = { ...formData.config, nodes: configNodes }
+function onChange(configNodes: ConfigNode[], uiNodes: UINode[], resources: DatakitConfig['resources']) {
+  const nextConfig = { ...formData.config, nodes: configNodes, resources }
   const nextUIData = { ...formData.__ui_data, nodes: uiNodes }
   formData.config = nextConfig
   formData.__ui_data = nextUIData
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue
new file mode 100644
index 0000000000..0612d44c1a
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue
@@ -0,0 +1,103 @@
+<template>
+  <VaultSecretPickerComponent
+    v-if="formConfig"
+    :additional-disabled="isProceedDisabled"
+    :config="formConfig"
+    :proceed-button-text="t('plugins.free-form.datakit.flow_editor.vault_secret_picker.proceed_button_text')"
+    :setup="secretRef"
+    :title="t('plugins.free-form.datakit.flow_editor.vault_secret_picker.title')"
+    @cancel="handleCancel"
+    @proceed="handleProceed"
+  >
+    <template #form-prefix>
+      <KInput
+        v-model:model-value="secretName"
+        data-testid="vault-secret-picker-secret-name-input"
+        :error="!!validationError"
+        :error-message="validationError"
+        :label="t('plugins.free-form.datakit.flow_editor.vault_secret_picker.secret_name.label')"
+        :label-attributes="{
+          info: t('plugins.free-form.datakit.flow_editor.vault_secret_picker.secret_name.help'),
+        }"
+        :placeholder="t('plugins.free-form.datakit.flow_editor.vault_secret_picker.secret_name.placeholder')"
+        required
+        @update:model-value="handleUpdate"
+      />
+    </template>
+  </VaultSecretPickerComponent>
+  <KEmptyState
+    v-else
+    icon-variant="error"
+    :message="t('plugins.free-form.vault_picker.component_error')"
+  />
+</template>
+
+<script setup lang="ts">
+import { inject, ref, computed } from 'vue'
+import { VaultSecretPicker as VaultSecretPickerComponent } from '@kong-ui-public/entities-vaults'
+import { FORMS_CONFIG } from '@kong-ui-public/forms'
+import type { KonnectBaseFormConfig, KongManagerBaseFormConfig } from '@kong-ui-public/entities-shared'
+import composables from '../../../../composables'
+
+const {
+  secretRef,
+  secretName: propSecretName,
+  validateName = () => undefined,
+  isEditing = false,
+} = defineProps<{
+  secretRef?: string | false
+  secretName?: string
+  validateName?: (secretName: string, isEditing: boolean) => string | undefined
+  isEditing?: boolean
+}>()
+
+const emit = defineEmits<{
+  proceed: [data: { secretRef: string, secretName: string }]
+  cancel: []
+}>()
+
+const { i18n: { t } } = composables.useI18n()
+
+const formConfig = inject<KonnectBaseFormConfig | KongManagerBaseFormConfig | undefined>(FORMS_CONFIG)
+
+const secretName = ref(propSecretName || '')
+const validationError = ref('')
+
+const isSecretNameValid = computed(() => {
+  if (!secretName.value.trim()) return false
+  return validateName(secretName.value.trim(), isEditing) === undefined
+})
+
+const isProceedDisabled = computed(() => {
+  return !isSecretNameValid.value
+})
+
+const validateSecretName = (): boolean => {
+  const trimmedName = secretName.value.trim()
+
+  const error = validateName(trimmedName, isEditing)
+  validationError.value = error || ''
+
+  return error === undefined
+}
+
+const handleUpdate = () => {
+  validationError.value = ''
+  validateSecretName()
+}
+
+const handleProceed = (vaultSecretRef: string) => {
+  if (validateSecretName()) {
+    emit('proceed', {
+      secretRef: vaultSecretRef,
+      secretName: secretName.value.trim(),
+    })
+  }
+}
+
+const handleCancel = () => {
+  secretName.value = ''
+  validationError.value = ''
+  emit('cancel')
+}
+</script>
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts
new file mode 100644
index 0000000000..744b5a2508
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts
@@ -0,0 +1,69 @@
+import { omit } from 'lodash-es'
+import type { FieldName } from '../../types'
+import { findFieldByName } from '../store/helpers'
+import { useEditorStore } from '../store/store'
+
+export function useVaultForm() {
+  const {
+    addField,
+    getNodeByName,
+    removeField,
+    replaceConfig,
+    renameField,
+    disconnectOutEdges,
+  } = useEditorStore()
+
+  const vaultNode = getNodeByName('vault')
+
+  if (!vaultNode) throw new Error('no vault node')
+
+  const addVault = (name: FieldName, value: string) => {
+    addField(vaultNode.id, 'output', name, false)
+    const nextConfig = {
+      ...vaultNode.config,
+      [name]: value,
+    }
+    replaceConfig(vaultNode.id, nextConfig)
+  }
+
+  const removeVault = (name: FieldName) => {
+    const field = findFieldByName(vaultNode, 'output', name)
+    if (!field) return
+    const isLastVault = vaultNode.fields.output.length === 1
+    removeField(vaultNode.id, field.id, true, false)
+    const nextConfig = omit(vaultNode.config, name)
+    replaceConfig(vaultNode.id, nextConfig, !isLastVault)
+
+    // Remove all the connections of vault node if it's the last vault
+    if (isLastVault) {
+      disconnectOutEdges(vaultNode.id)
+    }
+  }
+
+  const updateVault = (name: FieldName, value: string, commit = true) => {
+    const nextConfig = {
+      ...vaultNode.config,
+      [name]: value,
+    }
+    replaceConfig(vaultNode.id, nextConfig, commit)
+  }
+
+  const renameVault = (oldName: FieldName, newName: FieldName, commit = true) => {
+    const field = findFieldByName(vaultNode, 'output', oldName)
+    if (!field) return
+    renameField(vaultNode.id, field.id, newName, false)
+    const oldValue = vaultNode.config?.[oldName] ?? ''
+    const nextConfig = {
+      ...omit(vaultNode.config, oldName),
+      [newName]: oldValue,
+    }
+    replaceConfig(vaultNode.id, nextConfig, commit)
+  }
+
+  return {
+    addVault,
+    removeVault,
+    updateVault,
+    renameVault,
+  }
+}
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/modal/EditorContent.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/modal/EditorContent.vue
index 87278b3837..726742ac43 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/modal/EditorContent.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/modal/EditorContent.vue
@@ -1,20 +1,7 @@
 <template>
   <div class="dk-editor-content">
-    <aside
-      class="side-panel"
-      :class="{ expanded: sidePanelExpanded, inited }"
-    >
-      <header class="header">
-        <h2 class="title">
-          {{ t('plugins.free-form.datakit.flow_editor.name') }}
-        </h2>
-      </header>
-      <div class="body">
-        <div class="node-selection-panel">
-          <NodePanel />
-        </div>
-      </div>
-    </aside>
+    <SidePanel />
+
     <div class="main">
       <EditorMain />
     </div>
@@ -29,16 +16,11 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
-import { createI18n } from '@kong-ui-public/i18n'
-import english from '../../../../../locales/en.json'
-import { usePreferences, useEditorStore } from '../../composables'
+import { useEditorStore } from '../../composables'
 import EditorMain from './EditorMain.vue'
-import NodePanel from '../node/NodePanel.vue'
+import SidePanel from '../side-panel'
 import NodePropertiesPanel from '../node/NodePropertiesPanel.vue'
 
-const { t } = createI18n<typeof english>('en-us', english)
-
-const { sidePanelExpanded } = usePreferences()
 const { propertiesPanelOpen, selectedNode } = useEditorStore()
 
 function handleClose() {
@@ -67,49 +49,6 @@ onMounted(() => {
   overflow: hidden;
   position: relative;
 
-  .side-panel {
-    border-right: 1px solid $kui-color-border;
-    display: flex;
-    flex-direction: column;
-    /* stylelint-disable-next-line custom-property-pattern */
-    margin-left: calc(var(--dk-side-panel-width) * -1);
-    /* stylelint-disable-next-line custom-property-pattern */
-    width: var(--dk-side-panel-width);
-
-    &.inited {
-      transition: margin-left $kui-animation-duration-20 ease-in-out;
-    }
-
-    &.expanded {
-      margin-left: 0;
-    }
-
-    .header {
-      align-items: center;
-      border-bottom: 1px solid $kui-color-border;
-      display: flex;
-      flex: 0 0 auto;
-      /* stylelint-disable-next-line custom-property-pattern */
-      height: var(--dk-header-height);
-      padding: 0 $kui-space-40;
-    }
-
-    .title {
-      color: $kui-color-text;
-      font-size: $kui-font-size-40;
-      font-weight: $kui-font-weight-bold;
-      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-      left: $kui-space-40;
-      margin: 0;
-      position: absolute;
-    }
-
-    .body {
-      overflow: auto;
-      padding-bottom: 36px + $kui-space-40 * 2; // Leave space for the toggle button in case it covers the content
-    }
-  }
-
   .main {
     flex: 1 1 auto;
   }
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue
new file mode 100644
index 0000000000..ada6e18f42
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue
@@ -0,0 +1,61 @@
+<template>
+  <Form
+    :data="formData"
+    :schema="vaultSchema"
+  >
+    <VaultField
+      name="vault"
+      @add="addVault"
+      @remove="removeVault"
+      @update="handleUpdateVault"
+    />
+  </Form>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useEditorStore } from '../store/store'
+import { useVaultForm } from '../composables/useVaultForm'
+import Form from '../../../shared/Form.vue'
+import VaultField from './VaultField.vue'
+
+import type { FieldName } from '../../types'
+import type { RecordFieldSchema } from '../../../../../types/plugins/form-schema'
+
+const { nodeMapByName } = useEditorStore()
+
+const vaultConfig = computed(() => nodeMapByName.value.get('vault')?.config || {})
+const formData = computed(() => {
+  return {
+    vault: { ...vaultConfig.value },
+  }
+})
+
+const vaultSchema: RecordFieldSchema = {
+  type: 'record',
+  fields: [
+    {
+      vault: {
+        type: 'map',
+        keys: { type: 'string' },
+        values: { type: 'string' },
+      },
+    },
+  ],
+}
+
+const {
+  addVault,
+  removeVault,
+  updateVault,
+  renameVault,
+} = useVaultForm()
+
+function handleUpdateVault(name: FieldName, value: string, oldName?: FieldName) {
+  if (oldName && oldName !== name) {
+    renameVault(oldName, name, false)
+  }
+  updateVault(name, value)
+}
+</script>
+
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
new file mode 100644
index 0000000000..cedb5c7792
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="dk-vault-panel">
+    <h3 class="title">
+      {{ t('plugins.free-form.datakit.flow_editor.panel_segments.resources.vault.title') }}
+    </h3>
+
+    <KButton
+      appearance="tertiary"
+      class="add-button"
+      size="small"
+      @click="handleAdd"
+    >
+      <AddIcon />
+      {{ t('plugins.free-form.datakit.flow_editor.panel_segments.resources.vault.add_button') }}
+    </KButton>
+
+    <div class="vault-list">
+      <template
+        v-for="entry in entries"
+        :key="entry.id"
+      >
+        <div
+          v-if="entry.key"
+          class="vault-list-item"
+        >
+          <div class="vault-list-item-key">
+            <KeyIcon
+              :color="KUI_COLOR_TEXT_NEUTRAL"
+              :size="16"
+            />
+            <div class="vault-list-item-key-text">
+              {{ entry.key }}
+            </div>
+          </div>
+          <KDropdown>
+            <KButton
+              appearance="tertiary"
+              icon
+            >
+              <MoreIcon :color="KUI_COLOR_TEXT" />
+            </KButton>
+
+            <template #items>
+              <KDropdownItem
+                @click="handleEdit(entry)"
+              >
+                Edit
+              </KDropdownItem>
+              <KDropdownItem
+                danger
+                @click="handleRemove(entry)"
+              >
+                Remove
+              </KDropdownItem>
+            </template>
+          </KDropdown>
+        </div>
+      </template>
+    </div>
+
+    <VaultSecretPicker
+      :key="`dk-vsp-${selectedEntry?.id}`"
+      :is-editing="!!selectedEntry && !creatingEntry"
+      :secret-name="selectedEntry?.key"
+      :secret-ref="selectedEntry?.value"
+      :validate-name="validateName"
+      @cancel="closeVaultSecretPicker"
+      @proceed="handleVaultSecretSelected"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import composables from '../../../../../composables'
+import { AddIcon, MoreIcon, KeyIcon } from '@kong/icons'
+import VaultSecretPicker from '../VaultSecretPicker.vue'
+import type {
+  KeyValueFieldProps,
+  KeyValueFieldEmits,
+  KVEntry,
+} from '../../../shared/headless/useKeyValueField'
+import { useKeyValueField } from '../../../shared/headless/useKeyValueField'
+import {
+  KUI_COLOR_TEXT_NEUTRAL,
+  KUI_COLOR_TEXT,
+} from '@kong/design-tokens'
+import type { FieldName } from '../../types'
+
+interface Emits extends KeyValueFieldEmits {
+  'update': [name: FieldName, value: string, oldName?: FieldName]
+  'add': [name: FieldName, value: string]
+  'remove': [name: FieldName]
+}
+
+type VaultKVEntry = KVEntry<FieldName, string>
+
+const props = defineProps<KeyValueFieldProps<FieldName>>()
+const emit = defineEmits<Emits>()
+
+const {
+  entries,
+  addEntry,
+  removeEntry,
+} = useKeyValueField<FieldName, string>(props, emit)
+const selectedEntry = ref<VaultKVEntry | null>(null)
+const creatingEntry = ref<VaultKVEntry | null>(null)
+
+const { i18n: { t } } = composables.useI18n()
+
+const vaultNames = computed(() => {
+  return new Set(entries.value.map((e) => e.key))
+})
+
+const handleAdd = () => {
+  const newEntry = addEntry()
+  creatingEntry.value = newEntry
+  selectedEntry.value = newEntry
+}
+
+const closeVaultSecretPicker = () => {
+  selectedEntry.value = null
+  if (creatingEntry.value) {
+    removeEntry(creatingEntry.value.id)
+    creatingEntry.value = null
+  }
+}
+
+const handleVaultSecretSelected = (data: { secretRef: string, secretName: string }) => {
+  if (!selectedEntry.value) throw new Error('no selected entry')
+  const oldName = selectedEntry.value.key
+  const hasNameChanged = oldName !== data.secretName
+  const hasValueChanged = selectedEntry.value.value !== data.secretRef
+  const hasChanged = hasNameChanged || hasValueChanged
+
+  selectedEntry.value!.value = data.secretRef
+  selectedEntry.value!.key = data.secretName as FieldName
+
+  if (creatingEntry.value) {
+    emit('add', data.secretName as FieldName, data.secretRef)
+  } else if (hasChanged) {
+    emit(
+      'update',
+      data.secretName as FieldName,
+      data.secretRef,
+      hasNameChanged ? oldName : undefined,
+    )
+  }
+
+  creatingEntry.value = null
+  closeVaultSecretPicker()
+}
+
+const handleEdit = (entry: VaultKVEntry) => {
+  selectedEntry.value = entry
+}
+
+const handleRemove = (entry: VaultKVEntry) => {
+  removeEntry(entry.id)
+  emit('remove', entry.key)
+}
+
+const validateName = (name: string, isEditing: boolean): string | undefined => {
+  if (!name) {
+    return t('plugins.free-form.datakit.flow_editor.panel_segments.resources.vault.name_required_error')
+  }
+
+  if (vaultNames.value.has(name as FieldName) && !(isEditing && name === selectedEntry.value?.key)) {
+    return t('plugins.free-form.datakit.flow_editor.panel_segments.resources.vault.name_exists_error')
+  }
+  return undefined
+}
+</script>
+
+<style lang="scss" scoped>
+.dk-vault-panel {
+  .add-button {
+    margin: $kui-space-40 0;
+  }
+
+  .vault-list {
+    display: flex;
+    flex-direction: column;
+    gap: $kui-space-20;
+    overflow: hidden;
+
+    &-item {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 $kui-space-20;
+
+      &-key {
+        align-items: center;
+        display: flex;
+        gap: $kui-space-20;
+        overflow: hidden;
+
+        &-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePropertiesPanel.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePropertiesPanel.vue
index f5fb8f1e55..97c27ab672 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePropertiesPanel.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePropertiesPanel.vue
@@ -6,6 +6,7 @@
     :max-width="maxWidth"
     :offset-top="offsetTop"
     :visible="visible"
+    :z-index="DK_NODE_PROPERTIES_PANEL_Z_INDEX"
     @close="$emit('close')"
   >
     <template
@@ -33,7 +34,7 @@
 <script setup lang="ts">
 import NodeBadge from './NodeBadge.vue'
 
-import { DK_NODE_PROPERTIES_PANEL_OFFSET_TOP, DK_NODE_PROPERTIES_PANEL_WIDTH } from '../../constants'
+import { DK_NODE_PROPERTIES_PANEL_OFFSET_TOP, DK_NODE_PROPERTIES_PANEL_WIDTH, DK_NODE_PROPERTIES_PANEL_Z_INDEX } from '../../constants'
 import NodeFormCall from '../node-forms/NodeFormCall.vue'
 import NodeFormServiceRequest from '../node-forms/NodeFormServiceRequest.vue'
 import NodeFormResponse from '../node-forms/NodeFormResponse.vue'
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
new file mode 100644
index 0000000000..508b0f6c7a
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
@@ -0,0 +1,29 @@
+import type { DatakitConfig, Resources } from '../../schema/strict'
+import type { DatakitPluginData, FieldName } from '../../types'
+
+export type VaultConfig = Record<FieldName, string>
+
+export function pluginDataToVaultConfig(pluginData: DatakitPluginData): VaultConfig {
+  return pluginData.config?.resources?.vault || {}
+}
+
+export function pluginDataToVaultOutputFields(pluginData: DatakitPluginData): FieldName[] {
+  const { resources } = pluginData.config || {}
+  if (resources?.vault) {
+    return Object.keys(resources.vault) as FieldName[]
+  }
+  return []
+}
+
+export function vaultConfigToResources(config: VaultConfig): DatakitConfig['resources'] {
+  const entries = Object.entries(config)
+  if (entries.length === 0) return null
+
+  const resources: Resources = { vault: {} }
+
+  for (const [name, secretRef] of entries) {
+    resources.vault![name] = secretRef
+  }
+
+  return resources
+}
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePanel.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/NodePanel.vue
similarity index 94%
rename from packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePanel.vue
rename to packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/NodePanel.vue
index 580e0c8e0c..d4e65301e4 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePanel.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/NodePanel.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="dk-node-panel">
-    <h3 class="title">
+    <h3
+      v-if="!hideTitle"
+      class="title"
+    >
       <KLabel
         class="label"
         :info="
@@ -42,12 +45,16 @@ import { createI18n } from '@kong-ui-public/i18n'
 import english from '../../../../../locales/en.json'
 import { DK_DATA_TRANSFER_MIME_TYPE } from '../../constants'
 import { useEditorStore } from '../store/store'
-import { CONFIG_NODE_META_MAP } from './node'
-import NodePanelItem from './NodePanelItem.vue'
-import FlowNode from './FlowNode.vue'
+import { CONFIG_NODE_META_MAP } from '../node/node'
+import NodePanelItem from '../node/NodePanelItem.vue'
+import FlowNode from '../node/FlowNode.vue'
 
 import type { ConfigNodeType, NodeInstance, DragPayload } from '../../types'
 
+defineProps<{
+  hideTitle?: boolean
+}>()
+
 const { t } = createI18n<typeof english>('en-us', english)
 
 const { createNode } = useEditorStore()
@@ -129,7 +136,6 @@ const handleDragStart = async (e: DragEvent, type: ConfigNodeType) => {
 
 <style lang="scss" scoped>
 .dk-node-panel {
-  padding: $kui-space-60 $kui-space-30;
 
   .title {
     color: $kui-color-text;
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue
new file mode 100644
index 0000000000..2ec175e1f7
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="dk-resources-panel">
+    <NodeFormVault />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeFormVault from '../node-forms/NodeFormVault.vue'
+</script>
+
+<style lang="scss" scoped>
+.dk-resources-panel {
+  padding: $kui-space-60 0;
+
+  :deep(.title) {
+    color: $kui-color-text;
+    display: flex;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-bold;
+    gap: $kui-space-40;
+    line-height: $kui-line-height-30;
+    margin: 0;
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/SidePanel.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/SidePanel.vue
new file mode 100644
index 0000000000..6681e34803
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/SidePanel.vue
@@ -0,0 +1,120 @@
+<template>
+  <aside
+    class="side-panel"
+    :class="{ expanded: sidePanelExpanded, inited }"
+  >
+    <header class="header">
+      <h2 class="title">
+        {{ t('plugins.free-form.datakit.flow_editor.name') }}
+      </h2>
+    </header>
+    <div class="body">
+      <div class="panel">
+        <template v-if="enableDatakitM2">
+          <KSegmentedControl
+            v-model="selectedOption"
+            :options="[{
+              label: t('plugins.free-form.datakit.flow_editor.panel_segments.nodes'),
+              value: 'nodes',
+            }, {
+              label: t('plugins.free-form.datakit.flow_editor.panel_segments.resources.title'),
+              value: 'resources',
+            }]"
+          />
+
+          <NodePanel
+            v-if="selectedOption === 'nodes'"
+            hide-title
+          />
+
+          <ResourcesPanel v-if="selectedOption === 'resources'" />
+        </template>
+        <NodePanel v-else />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch, inject } from 'vue'
+import { createI18n } from '@kong-ui-public/i18n'
+import english from '../../../../../locales/en.json'
+import { usePreferences, useEditorStore } from '../../composables'
+import NodePanel from './NodePanel.vue'
+import ResourcesPanel from './ResourcesPanel.vue'
+import { FEATURE_FLAGS } from '../../../../../constants'
+
+const { t } = createI18n<typeof english>('en-us', english)
+
+const { sidePanelExpanded } = usePreferences()
+const { propertiesPanelOpen, selectedNode } = useEditorStore()
+const enableDatakitM2 = inject<boolean>(FEATURE_FLAGS.DATAKIT_M2, false)
+
+const selectedOption = ref<'nodes' | 'resources'>('nodes')
+
+function handleClose() {
+  propertiesPanelOpen.value = false
+}
+
+watch(selectedNode, (node) => {
+  if (!node) {
+    handleClose()
+  }
+})
+
+// A workaround to prevent startup transition when the side panel
+// is collapsed per user preference.
+const inited = ref(false)
+onMounted(() => {
+  inited.value = true
+})
+</script>
+
+<style lang="scss" scoped>
+.side-panel {
+  border-right: 1px solid $kui-color-border;
+  display: flex;
+  flex-direction: column;
+  /* stylelint-disable-next-line custom-property-pattern */
+  margin-left: calc(var(--dk-side-panel-width) * -1);
+  /* stylelint-disable-next-line custom-property-pattern */
+  width: var(--dk-side-panel-width);
+
+  &.inited {
+    transition: margin-left $kui-animation-duration-20 ease-in-out;
+  }
+
+  &.expanded {
+    margin-left: 0;
+  }
+
+  .header {
+    align-items: center;
+    border-bottom: 1px solid $kui-color-border;
+    display: flex;
+    flex: 0 0 auto;
+    /* stylelint-disable-next-line custom-property-pattern */
+    height: var(--dk-header-height);
+    padding: 0 $kui-space-40;
+  }
+
+  .title {
+    color: $kui-color-text;
+    font-size: $kui-font-size-40;
+    font-weight: $kui-font-weight-bold;
+    /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+    left: $kui-space-40;
+    margin: 0;
+    position: absolute;
+  }
+
+  .body {
+    overflow: auto;
+    padding-bottom: 36px + $kui-space-40 * 2; // Leave space for the toggle button in case it covers the content
+  }
+
+  .panel {
+    padding: $kui-space-60 $kui-space-40;
+  }
+}
+</style>
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/index.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/index.ts
new file mode 100644
index 0000000000..5db9b37729
--- /dev/null
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/index.ts
@@ -0,0 +1,3 @@
+import { default as SidePanel } from './SidePanel.vue'
+
+export default SidePanel
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts
index 717167219d..ee29412abf 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts
@@ -16,6 +16,7 @@ import type {
   UINode,
 } from '../../types'
 import { isImplicitName, isImplicitType } from '../node/node'
+import { pluginDataToVaultConfig, pluginDataToVaultOutputFields } from '../node/vault'
 import {
   clone,
   createId,
@@ -42,7 +43,6 @@ export function initEditorState(
 ): EditorState {
   const configNodes = pluginData.config?.nodes ?? []
   const uiNodes = pluginData.__ui_data?.nodes ?? []
-  const resources = pluginData.config?.resources ?? {}
 
   const uiNodesMap = new Map<NodeName, UINode>(
     uiNodes.map((uiNode) => [uiNode.name, uiNode]),
@@ -92,7 +92,12 @@ export function initEditorState(
     if (!uiNode && !isUIDataStale) {
       isUIDataStale = true
     }
-    const node = buildNodeInstance(configNode.type, configNode, uiNode, resources)
+    const node = buildNodeInstance({
+      type: configNode.type,
+      configNode,
+      uiNode,
+      pluginData,
+    })
     nodes.push(node)
     nodesMap.set(node.name, node)
   }
@@ -108,7 +113,11 @@ export function initEditorState(
         uiNode = makeDefaultImplicitUINode(implicitName)
       }
 
-      const node = buildNodeInstance(implicitName, undefined, uiNode, resources)
+      const node = buildNodeInstance({
+        type: implicitName,
+        uiNode,
+        pluginData,
+      })
       nodes.push(node)
       nodesMap.set(node.name, node)
     }
@@ -195,20 +204,34 @@ function getDefaultPhase(type: NodeType): NodePhase {
   return 'request'
 }
 
-export function buildNodeInstance(
-  type: NodeType,
-  configNode?: ConfigNode,
-  uiNode?: UINode,
-  resources?: DatakitConfig['resources'],
-): NodeInstance {
+export function buildNodeInstance({
+  type,
+  configNode,
+  uiNode,
+  pluginData,
+}: {
+  type: NodeType
+  configNode?: ConfigNode
+  uiNode?: UINode
+  pluginData: DatakitPluginData
+}): NodeInstance {
   return makeNodeInstance({
     type,
     name: configNode?.name,
     phase: uiNode?.phase ?? getDefaultPhase(type),
     position: uiNode?.position,
-    fields: resolveFields(type, uiNode, configNode, resources),
+    fields: resolveFields({
+      type,
+      uiNode,
+      configNode,
+      pluginData,
+    }),
     hidden: uiNode?.hidden,
-    config: configNode ? extractConfig(configNode) : undefined,
+    config: resolveConfig({
+      type,
+      configNode,
+      pluginData,
+    }),
   })
 }
 
@@ -281,12 +304,17 @@ export function collectConnectionsFromConfigNode(
  *   from an existing config), fall back to the config node’s inputs/outputs.
  * - If the config node is of type `static`, also expose its values as output fields.
  */
-function resolveFields(
-  type: NodeType,
-  uiNode?: UINode,
-  configNode?: ConfigNode,
-  resources?: DatakitConfig['resources'],
-): MakeNodeInstancePayload['fields'] | undefined {
+function resolveFields({
+  type,
+  uiNode,
+  configNode,
+  pluginData,
+}: {
+  type: NodeType
+  uiNode?: UINode
+  configNode?: ConfigNode
+  pluginData: DatakitPluginData
+}): MakeNodeInstancePayload['fields'] | undefined {
   const meta = getNodeMeta(type)
   const io = meta?.io
   if (!io) return undefined
@@ -318,15 +346,24 @@ function resolveFields(
       if (out.size) fields.output = Array.from(out)
     }
 
-    if (type === 'vault') fields.output = genVaultOutputFields(resources)
+    if (type === 'vault') fields.output = pluginDataToVaultOutputFields(pluginData)
   }
 
   return Object.keys(fields).length ? fields : undefined
 }
 
-function genVaultOutputFields(resources: DatakitConfig['resources']): FieldName[] {
-  if (resources?.vault) {
-    return Object.keys(resources.vault) as FieldName[]
+function resolveConfig({
+  type,
+  configNode,
+  pluginData,
+}: {
+  type: NodeType
+  configNode?: ConfigNode
+  pluginData: DatakitPluginData
+}): Record<string, unknown> | undefined {
+  if (type === 'vault') {
+    return pluginDataToVaultConfig(pluginData)
   }
-  return []
+
+  return configNode ? extractConfig(configNode) : undefined
 }
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
index b49a7112fe..bbddb77c06 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
@@ -2,6 +2,7 @@ import type { XYPosition } from '@vue-flow/core'
 import type {
   ConfigNode,
   CreateNodePayload,
+  DatakitConfig,
   DatakitPluginData,
   EdgeData,
   EdgeId,
@@ -28,13 +29,18 @@ import {
 import { useTaggedHistory } from './history'
 import { initEditorState, makeNodeInstance } from './init'
 import { useValidators } from './validation'
+import { vaultConfigToResources, type VaultConfig } from '../node/vault'
 
 type CreateEditorStoreOptions = {
   /**
    * Whether the editor is in editing mode (versus the creation mode)
    */
   isEditing?: boolean
-  onChange?: (configNodes: ConfigNode[], uiNodes: UINode[]) => void
+  onChange?: (
+    configNodes: ConfigNode[],
+    uiNodes: UINode[],
+    resources: DatakitConfig['resources']
+  ) => void
 }
 
 const [provideEditorStore, useOptionalEditorStore] = createInjectionState(
@@ -53,7 +59,7 @@ const [provideEditorStore, useOptionalEditorStore] = createInjectionState(
           return
         }
 
-        options.onChange?.(toConfigNodes(), toUINodes())
+        options.onChange?.(toConfigNodes(), toUINodes(), toResources())
       },
     })
     const skipValidation = ref(false)
@@ -549,6 +555,13 @@ const [provideEditorStore, useOptionalEditorStore] = createInjectionState(
       )
     }
 
+    function toResources(): DatakitConfig['resources'] {
+      const vaultNode = getNodeByName('vault')
+      if (!vaultNode) return null
+      if (!vaultNode.config) return null
+      return vaultConfigToResources(vaultNode.config as VaultConfig)
+    }
+
     /**
      * Load the given configuration and UI state into the editor.
      *
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/schema/strict.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/schema/strict.ts
index 80f889045f..d2015b152e 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/schema/strict.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/schema/strict.ts
@@ -225,6 +225,8 @@ export const VaultSchema = z
     z.string().min(1).max(4095),
   )
 
+export type Vault = z.infer<typeof VaultSchema>
+
 /** cache.memory */
 const CacheMemorySchema = z.object({
   dictionary_name: z.string().default('kong_db_cache'),
diff --git a/packages/entities/entities-plugins/src/locales/en.json b/packages/entities/entities-plugins/src/locales/en.json
index a2c155ec7a..e61c60ceae 100644
--- a/packages/entities/entities-plugins/src/locales/en.json
+++ b/packages/entities/entities-plugins/src/locales/en.json
@@ -722,6 +722,27 @@
           "expand_panel": "Expand panel",
           "collapse_panel": "Collapse panel",
           "return_to_config": "Return to plugin configuration",
+          "panel_segments": {
+            "nodes": "Nodes",
+            "resources": {
+              "title": "Resources",
+              "vault": {
+                "title": "Vault secrets",
+                "add_button": "Add Vault resource",
+                "name_exists_error": "Vault name already exists",
+                "name_required_error": "Vault name is required"
+              }
+            }
+          },
+          "vault_secret_picker": {
+            "title": "Add secret to Datakit",
+            "proceed_button_text": "Add secret",
+            "secret_name": {
+              "label": "Secret name",
+              "placeholder": "Enter a name",
+              "help": "A unique identifier for this secret in your Datakit configuration"
+            }
+          },
           "node_panel": {
             "title": "Node types",
             "description": "Drag a node onto the canvas to add it to your data flow."
diff --git a/packages/entities/entities-vaults/src/components/VaultSecretPicker.vue b/packages/entities/entities-vaults/src/components/VaultSecretPicker.vue
index 2aa31e6ed3..3369d2379f 100644
--- a/packages/entities/entities-vaults/src/components/VaultSecretPicker.vue
+++ b/packages/entities/entities-vaults/src/components/VaultSecretPicker.vue
@@ -1,10 +1,10 @@
 <template>
   <KModal
     :action-button-disabled="!canProceed"
-    :action-button-text="t('vault_secret_picker.actions.use_key')"
+    :action-button-text="proceedButtonText || t('vault_secret_picker.actions.use_key')"
     class="vault-secret-picker"
     data-testid="vault-secret-picker-modal"
-    :title="t('vault_secret_picker.title')"
+    :title="title || t('vault_secret_picker.title')"
     :visible="props.setup !== false"
     @cancel="() => emit('cancel')"
     @proceed="handleProceed"
@@ -20,6 +20,8 @@
       v-else
       class="inputs-wrapper"
     >
+      <slot name="form-prefix" />
+
       <KSelect
         v-model="selectedVaultPrefix"
         clearable
@@ -147,6 +149,21 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  title: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  proceedButtonText: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  additionalDisabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -262,7 +279,7 @@ const availableSecrets = computed<SelectItem[]>(() => {
 
 const isKonnectVaultSelected = computed(() => selectedVault?.value?.name === 'konnect')
 
-const canProceed = computed(() => Boolean(selectedVault.value) && Boolean(secretId.value))
+const canProceed = computed(() => Boolean(selectedVault.value) && Boolean(secretId.value) && !props.additionalDisabled)
 
 const formatSelectedVault = (item: SelectVaultItem) => {
   return item.label ? `${item.label} - (${item.vault.name} - ${item.vault.id})` : item.value

From 480f74c86d97dc411a3127aae7f9260ad8a0ce34 Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 9 Oct 2025 15:27:29 +0800
Subject: [PATCH 2/8] feat: i18n

---
 .../free-form/Datakit/flow-editor/node-forms/VaultField.vue   | 4 ++--
 packages/entities/entities-plugins/src/locales/en.json        | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
index cedb5c7792..e7324796c6 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
@@ -44,13 +44,13 @@
               <KDropdownItem
                 @click="handleEdit(entry)"
               >
-                Edit
+                {{ t('plugins.free-form.datakit.flow_editor.panel_segments.resources.vault.edit') }}
               </KDropdownItem>
               <KDropdownItem
                 danger
                 @click="handleRemove(entry)"
               >
-                Remove
+                {{ t('plugins.free-form.datakit.flow_editor.panel_segments.resources.vault.delete') }}
               </KDropdownItem>
             </template>
           </KDropdown>
diff --git a/packages/entities/entities-plugins/src/locales/en.json b/packages/entities/entities-plugins/src/locales/en.json
index e61c60ceae..ff45b5a9d0 100644
--- a/packages/entities/entities-plugins/src/locales/en.json
+++ b/packages/entities/entities-plugins/src/locales/en.json
@@ -730,7 +730,9 @@
                 "title": "Vault secrets",
                 "add_button": "Add Vault resource",
                 "name_exists_error": "Vault name already exists",
-                "name_required_error": "Vault name is required"
+                "name_required_error": "Vault name is required",
+                "edit": "Edit",
+                "delete": "Delete"
               }
             }
           },

From 466da4a481cfa6b41b0371ebd9e02b4922cfeb0f Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 9 Oct 2025 15:28:21 +0800
Subject: [PATCH 3/8] fix: type error

---
 .../src/components/free-form/Datakit/flow-editor/store/init.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts
index ee29412abf..a69e35e08f 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/init.ts
@@ -2,7 +2,6 @@ import { IMPLICIT_NODE_NAMES } from '../../constants'
 import type {
   ConfigEdge,
   ConfigNode,
-  DatakitConfig,
   DatakitPluginData,
   EdgeInstance,
   EditorState,

From e542fc6bceb8109bb71356421661e5b590f6e328 Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 9 Oct 2025 15:35:56 +0800
Subject: [PATCH 4/8] fix: feedback

---
 .../free-form/Datakit/flow-editor/node/vault.ts        | 10 +++++-----
 .../free-form/Datakit/flow-editor/store/store.ts       |  6 +++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
index 508b0f6c7a..03c2faa065 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
@@ -1,4 +1,4 @@
-import type { DatakitConfig, Resources } from '../../schema/strict'
+import type { Resources } from '../../schema/strict'
 import type { DatakitPluginData, FieldName } from '../../types'
 
 export type VaultConfig = Record<FieldName, string>
@@ -15,15 +15,15 @@ export function pluginDataToVaultOutputFields(pluginData: DatakitPluginData): Fi
   return []
 }
 
-export function vaultConfigToResources(config: VaultConfig): DatakitConfig['resources'] {
+export function vaultConfigToResources(config: VaultConfig): Resources['vault'] {
   const entries = Object.entries(config)
   if (entries.length === 0) return null
 
-  const resources: Resources = { vault: {} }
+  const vault: Resources['vault'] = {}
 
   for (const [name, secretRef] of entries) {
-    resources.vault![name] = secretRef
+    vault[name] = secretRef
   }
 
-  return resources
+  return vault
 }
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
index bbddb77c06..6b3d08bcf5 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
@@ -557,9 +557,13 @@ const [provideEditorStore, useOptionalEditorStore] = createInjectionState(
 
     function toResources(): DatakitConfig['resources'] {
       const vaultNode = getNodeByName('vault')
+      // todo(zehao): support `resources.cache`
+      // should only return `null` when both of `vault` and `cache` are not present
       if (!vaultNode) return null
       if (!vaultNode.config) return null
-      return vaultConfigToResources(vaultNode.config as VaultConfig)
+      return {
+        vault: vaultConfigToResources(vaultNode.config as VaultConfig),
+      }
     }
 
     /**

From a5e5e4f2825fe2a715f6bededa2f41d3025c7349 Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 9 Oct 2025 15:46:07 +0800
Subject: [PATCH 5/8] fix: skip empty vault node

---
 .../free-form/Datakit/flow-editor/composables/useNodeForm.ts   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useNodeForm.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useNodeForm.ts
index e06656b8a8..867a8532c5 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useNodeForm.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useNodeForm.ts
@@ -345,6 +345,9 @@ export function useNodeForm<T extends BaseFormData = BaseFormData>(
       // the nodes in request phase can not connect to response phase
       if (currentNode.value.phase === 'request' && node.phase === 'response') continue
 
+      // skip empty vault node
+      if (node.type === 'vault' && node.fields.output.length === 0) continue
+
       options.push({ value: node.id, label: node.name })
 
       for (const field of node.fields.output) {

From f299529b84ec224843f5dae51ceac26387e372ec Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Thu, 9 Oct 2025 15:56:07 +0800
Subject: [PATCH 6/8] feat: clear resources when it is empty

---
 .../free-form/Datakit/flow-editor/node/vault.ts          | 2 +-
 .../free-form/Datakit/flow-editor/store/store.ts         | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
index 03c2faa065..d32da1fbd4 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/vault.ts
@@ -17,7 +17,7 @@ export function pluginDataToVaultOutputFields(pluginData: DatakitPluginData): Fi
 
 export function vaultConfigToResources(config: VaultConfig): Resources['vault'] {
   const entries = Object.entries(config)
-  if (entries.length === 0) return null
+  if (entries.length === 0) return
 
   const vault: Resources['vault'] = {}
 
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
index 6b3d08bcf5..18e17297a8 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/store/store.ts
@@ -558,11 +558,12 @@ const [provideEditorStore, useOptionalEditorStore] = createInjectionState(
     function toResources(): DatakitConfig['resources'] {
       const vaultNode = getNodeByName('vault')
       // todo(zehao): support `resources.cache`
-      // should only return `null` when both of `vault` and `cache` are not present
-      if (!vaultNode) return null
-      if (!vaultNode.config) return null
+      // Konnect use `PUT` to update the plugin, so we can return undefined to clear the resources
+      if (!vaultNode) return
+      const vault = vaultConfigToResources(vaultNode.config as VaultConfig)
+      if (!vault || Object.keys(vault).length === 0) return
       return {
-        vault: vaultConfigToResources(vaultNode.config as VaultConfig),
+        vault,
       }
     }
 

From 0ea773644020678a1639e7efc003f479da05653d Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Mon, 13 Oct 2025 17:03:06 +0800
Subject: [PATCH 7/8] refactor: reorganize vault form

---
 .../flow-editor/composables/useVaultForm.ts   | 10 +++
 .../flow-editor/node-forms/NodeFormVault.vue  | 61 -------------------
 .../flow-editor/side-panel/ResourcesPanel.vue | 47 +++++++++++++-
 .../{node-forms => side-panel}/VaultField.vue |  0
 4 files changed, 55 insertions(+), 63 deletions(-)
 delete mode 100644 packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue
 rename packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/{node-forms => side-panel}/VaultField.vue (100%)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts
index 744b5a2508..d747f9922e 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/composables/useVaultForm.ts
@@ -2,6 +2,7 @@ import { omit } from 'lodash-es'
 import type { FieldName } from '../../types'
 import { findFieldByName } from '../store/helpers'
 import { useEditorStore } from '../store/store'
+import { computed } from 'vue'
 
 export function useVaultForm() {
   const {
@@ -11,12 +12,20 @@ export function useVaultForm() {
     replaceConfig,
     renameField,
     disconnectOutEdges,
+    nodeMapByName,
   } = useEditorStore()
 
   const vaultNode = getNodeByName('vault')
 
   if (!vaultNode) throw new Error('no vault node')
 
+  const vaultConfig = computed(() => nodeMapByName.value.get('vault')?.config || {})
+  const formData = computed(() => {
+    return {
+      vault: { ...vaultConfig.value },
+    }
+  })
+
   const addVault = (name: FieldName, value: string) => {
     addField(vaultNode.id, 'output', name, false)
     const nextConfig = {
@@ -61,6 +70,7 @@ export function useVaultForm() {
   }
 
   return {
+    formData,
     addVault,
     removeVault,
     updateVault,
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue
deleted file mode 100644
index ada6e18f42..0000000000
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/NodeFormVault.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <Form
-    :data="formData"
-    :schema="vaultSchema"
-  >
-    <VaultField
-      name="vault"
-      @add="addVault"
-      @remove="removeVault"
-      @update="handleUpdateVault"
-    />
-  </Form>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useEditorStore } from '../store/store'
-import { useVaultForm } from '../composables/useVaultForm'
-import Form from '../../../shared/Form.vue'
-import VaultField from './VaultField.vue'
-
-import type { FieldName } from '../../types'
-import type { RecordFieldSchema } from '../../../../../types/plugins/form-schema'
-
-const { nodeMapByName } = useEditorStore()
-
-const vaultConfig = computed(() => nodeMapByName.value.get('vault')?.config || {})
-const formData = computed(() => {
-  return {
-    vault: { ...vaultConfig.value },
-  }
-})
-
-const vaultSchema: RecordFieldSchema = {
-  type: 'record',
-  fields: [
-    {
-      vault: {
-        type: 'map',
-        keys: { type: 'string' },
-        values: { type: 'string' },
-      },
-    },
-  ],
-}
-
-const {
-  addVault,
-  removeVault,
-  updateVault,
-  renameVault,
-} = useVaultForm()
-
-function handleUpdateVault(name: FieldName, value: string, oldName?: FieldName) {
-  if (oldName && oldName !== name) {
-    renameVault(oldName, name, false)
-  }
-  updateVault(name, value)
-}
-</script>
-
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue
index 2ec175e1f7..6e4c9b5ad0 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/ResourcesPanel.vue
@@ -1,11 +1,54 @@
 <template>
   <div class="dk-resources-panel">
-    <NodeFormVault />
+    <Form
+      :data="formData"
+      :schema="vaultSchema"
+    >
+      <VaultField
+        name="vault"
+        @add="addVault"
+        @remove="removeVault"
+        @update="handleUpdateVault"
+      />
+    </Form>
   </div>
 </template>
 
 <script setup lang="ts">
-import NodeFormVault from '../node-forms/NodeFormVault.vue'
+import { useVaultForm } from '../composables/useVaultForm'
+import Form from '../../../shared/Form.vue'
+import VaultField from './VaultField.vue'
+
+import type { FieldName } from '../../types'
+import type { RecordFieldSchema } from '../../../../../types/plugins/form-schema'
+
+const vaultSchema: RecordFieldSchema = {
+  type: 'record',
+  fields: [
+    {
+      vault: {
+        type: 'map',
+        keys: { type: 'string' },
+        values: { type: 'string' },
+      },
+    },
+  ],
+}
+
+const {
+  addVault,
+  removeVault,
+  updateVault,
+  renameVault,
+  formData,
+} = useVaultForm()
+
+function handleUpdateVault(name: FieldName, value: string, oldName?: FieldName) {
+  if (oldName && oldName !== name) {
+    renameVault(oldName, name, false)
+  }
+  updateVault(name, value)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/VaultField.vue
similarity index 100%
rename from packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/VaultField.vue
rename to packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/VaultField.vue

From cbfbe68dcfffd9262b75f0a41bc060ed909b32cf Mon Sep 17 00:00:00 2001
From: Zehao Zhang <zehao93@outlook.com>
Date: Mon, 13 Oct 2025 17:16:01 +0800
Subject: [PATCH 8/8] feat: add watch for propSecretName and update validation
 error

---
 .../free-form/Datakit/flow-editor/VaultSecretPicker.vue    | 7 ++++++-
 .../Datakit/flow-editor/side-panel/VaultField.vue          | 1 -
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue
index 0612d44c1a..7d3369c4a2 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/VaultSecretPicker.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, watch } from 'vue'
 import { VaultSecretPicker as VaultSecretPickerComponent } from '@kong-ui-public/entities-vaults'
 import { FORMS_CONFIG } from '@kong-ui-public/forms'
 import type { KonnectBaseFormConfig, KongManagerBaseFormConfig } from '@kong-ui-public/entities-shared'
@@ -100,4 +100,9 @@ const handleCancel = () => {
   validationError.value = ''
   emit('cancel')
 }
+
+watch(() => propSecretName, (newVal) => {
+  secretName.value = newVal || ''
+  validationError.value = ''
+})
 </script>
diff --git a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/VaultField.vue b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/VaultField.vue
index e7324796c6..12a285edd1 100644
--- a/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/VaultField.vue
+++ b/packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/side-panel/VaultField.vue
@@ -59,7 +59,6 @@
     </div>
 
     <VaultSecretPicker
-      :key="`dk-vsp-${selectedEntry?.id}`"
       :is-editing="!!selectedEntry && !creatingEntry"
       :secret-name="selectedEntry?.key"
       :secret-ref="selectedEntry?.value"