Kong · 2eha0 · Sep 28, 2025
@@ -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;
   }

@@ -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;

@@ -0,0 +1,27 @@
+<template>
+  <div class="dk-resources-panel">
+    <VaultPanel
+      name="config.resources.vault"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import VaultPanel from './VaultPanel.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>
@@ -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>