dashboard drag and drop

web/playwright-tests/dashboard-updates.test.ts

@@ -0,0 +1,158 @@
+import { test, expect } from '@playwright/test';
+
+test('Go to dashboard', async ({ page }) => {
+  await page.goto('http://localhost:3000/app/dashboards');
+  await expect(page.getByText('Dashboards').nth(1)).toBeVisible();
+  await expect(page.getByRole('button', { name: 'New dashboard' })).toBeVisible();
+  await expect(page.getByRole('button', { name: '12px star' })).toBeVisible();
+  await page.getByRole('link', { name: 'Important Metrics 12px star' }).click();
+  await expect(page.getByRole('textbox', { name: 'New dashboard' })).toHaveValue(
+    'Important Metrics'
+  );
+});
+
+test('Can remove a metric from a dashboard', async ({ page }) => {
+  await page.goto('http://localhost:3000/app/dashboards/c0855f0f-f50a-424e-9e72-9e53711a7f6a');
+  await expect(page.getByRole('button', { name: 'Quarterly Gross Profit Margin' })).toBeVisible();
+  // Hover over the metric to reveal the three-dot menu
+  await page
+    .locator(`[data-testid="metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72"]`)
+    .hover({ timeout: 500 });
+  await expect(
+    page.locator(`[data-testid="metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72"]`)
+  ).toBeVisible();
+
+  await page
+    .getByTestId('metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72')
+    .locator('button')
+    .click();
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+  await page.getByRole('button', { name: 'Submit' }).click();
+  await expect(
+    page.getByRole('button', { name: 'Quarterly Gross Profit Margin' })
+  ).not.toBeVisible();
+  await page
+    .locator('div')
+    .filter({ hasText: /^DashboardFileStart chat$/ })
+    .getByRole('button')
+    .nth(2)
+    .click();
+  await page.getByRole('textbox', { name: 'Search...' }).click();
+  await page
+    .getByRole('textbox', { name: 'Search...' })
+    .fill('Quarterly Gross Profit Margin Trend (Q2 2023 - Q1 2024)');
+  await page.waitForTimeout(450);
+  await page.waitForLoadState('networkidle');
+  await page
+    .locator('div:nth-child(2) > div > div > div > .border-border > div > .peer')
+    .first()
+    .click();
+  await expect(page.getByRole('button', { name: 'Add metrics' })).toBeVisible();
+  await page.getByRole('button', { name: 'Add metrics' }).click();
+  await expect(page.getByTestId('metric-item-72e445a5-fb08-5b76-8c77-1642adf0cb72')).toBeVisible();
+
+  //drag back into place
+  // Use a more specific selector if the element is a link
+  const sourceElement = page.getByText('Quarterly Gross Profit Margin');
+  const targetElement = page.getByRole('button', { name: 'Revenue by Product Category (' });
+
+  expect(sourceElement).toBeVisible();
+  expect(targetElement).toBeVisible();
+
+  try {
+    // Skip the initial click since it's a link and would navigate away
+    // Go straight to hover and mouse operations
+    await sourceElement.hover({ force: true });
+    await page.waitForTimeout(200);
+    await page.mouse.down();
+    await page.waitForTimeout(200);
+
+    // Move to target element
+    await targetElement.hover({ force: true, position: { x: 5, y: 5 } });
+    await page.waitForTimeout(400);
+
+    await page.mouse.up();
+    await page.waitForTimeout(1000);
+  } catch (e) {
+    console.log('Drag and drop failed with first approach, trying backup method');
+
+    const sourceBoundingBox = await sourceElement.boundingBox();
+    const targetBoundingBox = await targetElement.boundingBox();
+
+    if (sourceBoundingBox && targetBoundingBox) {
+      const startX = sourceBoundingBox.x + sourceBoundingBox.width / 2;
+      const startY = sourceBoundingBox.y + sourceBoundingBox.height / 2;
+      const endX = targetBoundingBox.x + 10;
+      const endY = targetBoundingBox.y + targetBoundingBox.height / 2;
+
+      // Skip the initial click
+      await page.mouse.move(startX, startY);
+      await page.waitForTimeout(300);
+      await page.mouse.down();
+      await page.waitForTimeout(300);
+
+      // Move to destination with a slower motion
+      const steps = 20;
+      for (let i = 0; i <= steps; i++) {
+        const stepX = startX + (endX - startX) * (i / steps);
+        const stepY = startY + (endY - startY) * (i / steps);
+        await page.mouse.move(stepX, stepY);
+        await page.waitForTimeout(3);
+      }
+
+      await page.waitForTimeout(100);
+      await page.mouse.up();
+      await page.waitForTimeout(100);
+    }
+  }
+
+  // Verify the element was moved successfully
+  await expect(sourceElement).toBeVisible();
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+    - button /Quarterly Gross Profit Margin Trend \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • What is the trend of average gross profit margin from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Quarterly Gross Profit Margin Trend \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Revenue by Product Category \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • How does revenue break down by product category from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Revenue by Product Category \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Revenue by Sales Territory \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • How does revenue break down by sales territory from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Revenue by Sales Territory \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Quarterly Revenue Growth Rate \\(QoQ\\) \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • What is the quarter-over-quarter sales revenue growth rate from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Quarterly Revenue Growth Rate \\(QoQ\\) \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Quarterly Revenue Trend \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • What is the trend of total sales revenue from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Quarterly Revenue Trend \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button "Total Unique Products Sold All Time • What is the total number of distinct products ever sold?":
+      - heading "Total Unique Products Sold" [level=4]
+    - heading /\\d+/ [level=1]
+    - text: Drag here to create a new row
+    `);
+  await expect(page.getByRole('button', { name: 'Save' })).toBeVisible();
+  await page.getByRole('button', { name: 'Save' }).click();
+  await page.waitForTimeout(55);
+  await page.waitForLoadState('networkidle');
+  await expect(page.locator('body')).toMatchAriaSnapshot(`
+    - button /Quarterly Gross Profit Margin Trend \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • What is the trend of average gross profit margin from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Quarterly Gross Profit Margin Trend \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Revenue by Product Category \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • How does revenue break down by product category from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Revenue by Product Category \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Revenue by Sales Territory \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • How does revenue break down by sales territory from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Revenue by Sales Territory \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Quarterly Revenue Growth Rate \\(QoQ\\) \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • What is the quarter-over-quarter sales revenue growth rate from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Quarterly Revenue Growth Rate \\(QoQ\\) \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button /Quarterly Revenue Trend \\(Q2 \\d+ - Q1 \\d+\\) Q2 \\d+ - Q1 \\d+ • What is the trend of total sales revenue from Q2 \\d+ to Q1 \\d+\\?/:
+      - heading /Quarterly Revenue Trend \\(Q2 \\d+ - Q1 \\d+\\)/ [level=4]
+    - img
+    - button "Total Unique Products Sold All Time • What is the total number of distinct products ever sold?":
+      - heading "Total Unique Products Sold" [level=4]
+    - heading /\\d+/ [level=1]
+    - text: Drag here to create a new row
+    `);
+});

web/src/components/ui/grid/BusterResizeColumns.tsx

@@ -137,7 +137,10 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
 
   return (
     <SortableContext id={rowId} items={items} disabled={false}>
-      <div ref={setNodeRef} className="buster-resize-columns relative h-full w-full">
+      <div
+        ref={setNodeRef}
+        className="buster-resize-columns relative h-full w-full"
+        data-testid={`buster-resize-columns-${rowIndex}`}>
         <BusterDragColumnMarkers
           isDraggingIndex={columnMarkerColumnIndex}
           itemsLength={items.length}
@@ -163,7 +166,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
               )}
               key={item.id}
               minSize={'25%'}>
-              <div className="relative h-full w-full">
+              <div className="relative h-full w-full" data-testid={`pane-${index}`}>
                 <DropzonePlaceholder
                   right={false}
                   isDropzoneActives={isDropzoneActives}
@@ -216,6 +219,7 @@ const DropzonePlaceholder: React.FC<{
         active && 'bg-primary! z-10 opacity-100'
       )}
       style={memoizedStyle}
+      data-testid={`dropzone-placeholder-${right ? 'right' : 'left'}`}
     />
   );
 });

web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx

@@ -76,6 +76,7 @@ const DashboardMetricItemBase: React.FC<{
       className={`metric-item flex h-full w-full flex-col overflow-auto ${className}`}>
       <CardHeader
         size="small"
+        data-testid={`metric-item-${metricId}`}
         className="hover:bg-item-hover group min-h-13! justify-center overflow-hidden border-b px-4 py-2">
         <MetricTitle
           name={metric?.name || ''}