From 0d95202acd73f1c8ad8098dc09e0c31a4d512a4c Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 24 Jul 2024 18:50:12 -0700
Subject: [PATCH 1/2] feat: drag and drop

---
 .../analytics/dashboard-renderer/package.json |  3 ++-
 .../src/components/layout/GridLayout.vue      | 27 +++++++++++++++----
 pnpm-lock.yaml                                |  8 ++++++
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
index bb4dab1802..952a490fea 100644
--- a/packages/analytics/dashboard-renderer/package.json
+++ b/packages/analytics/dashboard-renderer/package.json
@@ -82,6 +82,7 @@
   "dependencies": {
     "@kong-ui-public/core": "workspace:^",
     "@kong-ui-public/entities-shared": "workspace:^",
-    "ajv": "^8.12.0"
+    "ajv": "^8.12.0",
+    "swapy": "^0.0.6"
   }
 }
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
index 3c0a22903a..71f41f6091 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
@@ -10,13 +10,16 @@
       :class="{
         'empty-cell': !cell.tile,
       }"
+      :data-swapy-slot="cell.key"
       :style="cell.style"
     >
-      <slot
-        name="tile"
-        :style="cell.style"
-        :tile="cell.tile"
-      />
+      <div :data-swapy-item="cell.key">
+        <slot
+          name="tile"
+          :style="cell.style"
+          :tile="cell.tile"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -26,6 +29,7 @@ import { computed, type PropType, ref, onMounted, onUnmounted } from 'vue'
 import type { GridSize, Cell, GridTile } from 'src/types'
 import { DEFAULT_TILE_HEIGHT } from '../../constants'
 import { calculateRowDefs } from './grid-utils'
+import { createSwapy } from 'swapy'
 
 const props = defineProps({
   gridSize: {
@@ -41,10 +45,16 @@ const props = defineProps({
     type: Array as PropType<GridTile<T>[]>,
     required: true,
   },
+  dragAndDrop: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 })
 
 const gridContainer = ref(null)
 
+
 const containerWidth = ref(0)
 
 const resizeObserver = new ResizeObserver(entries => {
@@ -63,6 +73,13 @@ onMounted(() => {
   if (gridContainer.value) {
     resizeObserver.observe(gridContainer.value)
   }
+
+  const swapy = createSwapy(gridContainer.value, {
+    animation: 'dynamic', // or spring or none
+  })
+  if (props.dragAndDrop) {
+    swapy.enable(true)
+  }
 })
 
 onUnmounted(() => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b75589f54..611db37b87 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -360,6 +360,9 @@ importers:
       ajv:
         specifier: ^8.12.0
         version: 8.12.0
+      swapy:
+        specifier: ^0.0.6
+        version: 0.0.6
     devDependencies:
       '@kong-ui-public/analytics-chart':
         specifier: workspace:^
@@ -8085,6 +8088,9 @@ packages:
   swagger2har@1.0.6:
     resolution: {integrity: sha512-Nqn0VCeYSrslBMM/WnG4OrPi0r+ri86/a2uK4rzLsXj9HWxOOGW+Rgh4D6jUIE8V+44jyL/IUR50gfBwdDFyuA==}
 
+  swapy@0.0.6:
+    resolution: {integrity: sha512-c53c1vza/FkB1Zk/nzoomiDs7zE4VHjPSlbSpUSeCgnqT5swgHl3t1cNJ+zxAwqa2z80FIQ3LftMNCNPsWZh3Q==}
+
   swrv@1.0.4:
     resolution: {integrity: sha512-zjEkcP8Ywmj+xOJW3lIT65ciY/4AL4e/Or7Gj0MzU3zBJNMdJiT8geVZhINavnlHRMMCcJLHhraLTAiDOTmQ9g==}
     peerDependencies:
@@ -17477,6 +17483,8 @@ snapshots:
       - '@babel/core'
       - rollup
 
+  swapy@0.0.6: {}
+
   swrv@1.0.4(vue@3.3.13(typescript@5.3.3)):
     dependencies:
       vue: 3.3.13(typescript@5.3.3)

From d324ff4be5f7666daf8b420a3091fd0aa8894760 Mon Sep 17 00:00:00 2001
From: Filip Gutica <filgut@protonmail.com>
Date: Wed, 24 Jul 2024 19:03:11 -0700
Subject: [PATCH 2/2] feat(dashboard-renderer): add drag and drop with swapy

BREAKING CHANGE: add drag and drop option to dashboard renderer and grid layout
---
 .../src/components/DashboardRenderer.vue                  | 8 ++++++--
 .../src/components/layout/GridLayout.vue                  | 4 +---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 0703b6b093..34954d08ea 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -8,6 +8,7 @@
     </KAlert>
     <GridLayout
       v-else
+      :drag-and-drop="dragAndDrop"
       :grid-size="config.gridSize"
       :tile-height="config.tileHeight"
       :tiles="gridTiles"
@@ -49,10 +50,13 @@ import {
 import { useAnalyticsConfigStore } from '@kong-ui-public/analytics-config-store'
 import { KUI_SPACE_70 } from '@kong/design-tokens'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   context: DashboardRendererContext,
   config: DashboardConfig,
-}>()
+  dragAndDrop: boolean,
+}>(), {
+  dragAndDrop: false,
+})
 
 const { i18n } = composables.useI18n()
 
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
index 71f41f6091..f933d538ca 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
@@ -77,9 +77,7 @@ onMounted(() => {
   const swapy = createSwapy(gridContainer.value, {
     animation: 'dynamic', // or spring or none
   })
-  if (props.dragAndDrop) {
-    swapy.enable(true)
-  }
+  swapy.enable(props.dragAndDrop)
 })
 
 onUnmounted(() => {