fix: use custom attribute as selector fix component test

Kong · Feb 13, 2025 · 869eaba · 869eaba
1 parent d7b1984
commit 869eaba
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.cy.ts
@@ -603,6 +603,7 @@ describe('<DashboardRenderer />', () => {
         tileHeight: 167,
         tiles: [
           {
+            id: 0,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -639,6 +640,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 1,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -672,6 +674,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 2,
             definition: {
               chart: {
                 type: 'timeseries_line',
@@ -699,6 +702,7 @@ describe('<DashboardRenderer />', () => {
             },
           } as unknown as TileConfig, // TODO: MA-2987: Remove default datasource concept and associated tests.
           {
+            id: 3,
             definition: {
               chart: {
                 type: 'top_n',

diff --git a/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/DraggableGridLayout.vue
@@ -5,9 +5,9 @@
   >
     <div
       v-for="tile in tilesRef.values()"
-      :id="`${tile.id}`"
       :key="tile.id"
       class="grid-stack-item"
+      :data-id="`${tile.id}`"
       :gs-h="tile.layout.size.rows"
       :gs-lazy-load="true"
       :gs-w="tile.layout.size.cols"
@@ -48,16 +48,19 @@ const emit = defineEmits<{
 }>()
 
 const gridContainer = ref<HTMLDivElement | null>(null)
-//const tilesRef = ref<GridTile<any>[]>(props.tiles)
 
 const tilesRef = ref<Map<string, GridTile<any>>>(new Map(props.tiles.map(t => [`${t.id}`, t])))
 
 let grid: GridStack | null = null
 
+const makeSelector = (id: number | string) => {
+  return `[data-id="${id}"]`
+}
+
 const makeTilesFromGridItemHtmlElements = (items: GridItemHTMLElement[]) => {
   return Array.from(tilesRef.value.values()).map((tile: GridTile<any>) => {
     const item = items.find(item => {
-      return item.id === `${tile.id}`
+      return item.getAttribute('data-id') === `${tile.id}`
     })
     if (item) {
       return {
@@ -76,7 +79,7 @@ const updateTiles = () => {
   if (grid) {
     const items = grid.getGridItems()
     const updates = makeTilesFromGridItemHtmlElements(items)
-    updates.forEach((tile, i) => {
+    updates.forEach((tile) => {
       tilesRef.value.set(`${tile.id}`, tile)
     })
     emit('update-tiles', Array.from(tilesRef.value.values()))
@@ -85,7 +88,7 @@ const updateTiles = () => {
 
 const removeHandler = (_: Event, items: GridStackNode[]) => {
   items.forEach(item => {
-    tilesRef.value.delete(`${item.el?.id}`)
+    tilesRef.value.delete(`${item.el?.getAttribute('data-id')}`)
   })
   emit('update-tiles', Array.from(tilesRef.value.values()))
 }
@@ -114,7 +117,7 @@ onUnmounted(() => {
 
 const removeWidget = async (id: number | string) => {
   if (grid && gridContainer.value) {
-    const el = gridContainer.value.querySelector(`#${id}`) as HTMLElement
+    const el = gridContainer.value.querySelector(makeSelector(id)) as HTMLElement
     if (el) {
       grid.removeWidget(el)
     }
@@ -127,7 +130,7 @@ watch(() => props.tiles.length, async (newLen, oldLen) => {
     for (const tile of tileToAdd) {
       tilesRef.value.set(`${tile.id}`, tile)
       await nextTick()
-      grid.makeWidget(`#${tile.id}`, {
+      grid.makeWidget(makeSelector(tile.id), {
         autoPosition: true,
         w: tile.layout.size.cols,
         h: tile.layout.size.rows,
@@ -150,7 +153,7 @@ watch(() => props.tiles, (newTiles, oldTiles) => {
       }
     })
   }
-})
+}, { deep: true })
 
 defineExpose({ removeWidget })