fix: gridstack should drive removing widgets/tiles

packages/analytics/dashboard-renderer/sandbox/pages/RendererDemo.vue

@@ -30,7 +30,6 @@
         :config="dashboardConfig"
         :context="context"
         @edit-tile="onEditTile"
-        @remove-tile="onRemoveTile"
         @update-tiles="onUpdateTiles"
       >
         <template #slot-1>
@@ -409,11 +408,6 @@ const addTile = () => {
   })
 }
 
-const onRemoveTile = (tile: GridTile<TileDefinition>) => {
-  console.log('@remove-tile', tile)
-  dashboardConfig.value.tiles = dashboardConfig.value.tiles.filter((_, i) => i !== tile.id)
-}
-
 const onUpdateTiles = (tiles: TileConfig[]) => {
   console.log('@update-tiles', tiles)
   dashboardConfig.value.tiles = tiles

packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue

@@ -9,6 +9,7 @@
     <component
       :is="canEdit ? DraggableGridLayout : GridLayout"
       v-else
+      ref="gridLayoutRef"
       :grid-size="config.gridSize"
       :tile-height="config.tileHeight"
       :tiles="gridTiles"
@@ -44,9 +45,11 @@ import type { DashboardRendererContext, DashboardRendererContextInternal, GridTi
 import type { DashboardConfig, TileConfig, TileDefinition } from '@kong-ui-public/analytics-utilities'
 import DashboardTile from './DashboardTile.vue'
 import { computed, inject, ref } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import composables from '../composables'
 import GridLayout from './layout/GridLayout.vue'
 import DraggableGridLayout from './layout/DraggableGridLayout.vue'
+import type { DraggableGridLayoutExpose } from './layout/DraggableGridLayout.vue'
 import type { AnalyticsBridge, TimeRangeV4 } from '@kong-ui-public/analytics-utilities'
 import {
   DEFAULT_TILE_HEIGHT,
@@ -67,12 +70,12 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (e: 'edit-tile', tile: GridTile<TileDefinition>): void
-  (e: 'remove-tile', tile: GridTile<TileDefinition>): void
   (e: 'update-tiles', tiles: TileConfig[]): void
 }>()
 
 const { i18n } = composables.useI18n()
 const refreshCounter = ref(0)
+const gridLayoutRef = ref<ComponentPublicInstance<DraggableGridLayoutExpose> | null>(null)
 
 // Note: queryBridge is not directly used by the DashboardRenderer component.  It is required by many of the
 // subcomponents that get rendered in the dashboard, however.  Check for its existence here in order to catch
@@ -180,7 +183,9 @@ const onEditTile = (tile: GridTile<TileDefinition>) => {
 }
 
 const onRemoveTile = (tile: GridTile<TileDefinition>) => {
-  emit('remove-tile', tile)
+  if (gridLayoutRef.value) {
+    gridLayoutRef.value.removeWidget(tile.id)
+  }
 }
 
 const refreshTiles = () => {

packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue

@@ -32,6 +32,10 @@ import type { GridSize, GridTile } from 'src/types'
 import 'gridstack/dist/gridstack.min.css'
 import 'gridstack/dist/gridstack-extra.min.css'
 
+export type DraggableGridLayoutExpose = {
+  removeWidget: (id: number | string) => void
+}
+
 const props = withDefaults(defineProps<{
   tiles: GridTile<T>[],
   gridSize: GridSize,
@@ -122,6 +126,18 @@ watch(() => props.tiles, async (tiles) => {
   }
 }, { deep: true })
 
+const removeWidget = (id: number | string) => {
+  if (grid && gridContainer.value) {
+    const el = gridContainer.value.querySelector(`#tile-${id}`) as HTMLElement
+    if (el) {
+      grid.removeWidget(el)
+      grid.compact('compact', false)
+    }
+  }
+}
+
+defineExpose({ removeWidget })
+
 </script>
 
 <style lang="scss" scoped>