Replace Add New Tile button with unified Add dropdown

packages/app/src/DBDashboardPage.tsx

@@ -60,6 +60,7 @@ import { notifications } from '@mantine/notifications';
 import {
   IconArrowsMaximize,
   IconBell,
+  IconChartBar,
   IconCopy,
   IconDeviceFloppy,
   IconDotsVertical,
@@ -68,6 +69,7 @@ import {
   IconLayoutList,
   IconPencil,
   IconPlayerPlay,
+  IconPlus,
   IconRefresh,
   IconTags,
   IconTrash,
@@ -1589,13 +1591,6 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
                 >
                   {hasTiles ? 'Import New Dashboard' : 'Import Dashboard'}
                 </Menu.Item>
-                <Menu.Item
-                  data-testid="add-new-section-button"
-                  leftSection={<IconLayoutList size={16} />}
-                  onClick={handleAddSection}
-                >
-                  Add Section
-                </Menu.Item>
                 <Menu.Divider />
                 <Menu.Item
                   data-testid="save-default-query-filters-menu-item"
@@ -1795,16 +1790,36 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
           </ErrorBoundary>
         ) : null}
       </Box>
-      <Button
-        data-testid="add-new-tile-button"
-        variant={dashboard?.tiles.length === 0 ? 'primary' : 'secondary'}
-        mt="sm"
-        fw={400}
-        onClick={() => onAddTile()}
-        w="100%"
-      >
-        + Add New Tile
-      </Button>
+      <Menu position="top" width={200}>
+        <Menu.Target>
+          <Button
+            data-testid="add-dropdown-button"
+            variant={dashboard?.tiles.length === 0 ? 'primary' : 'secondary'}
+            mt="sm"
+            fw={400}
+            w="100%"
+            leftSection={<IconPlus size={16} />}
+          >
+            Add
+          </Button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            data-testid="add-new-tile-menu-item"
+            leftSection={<IconChartBar size={16} />}
+            onClick={() => onAddTile()}
+          >
+            New Tile
+          </Menu.Item>
+          <Menu.Item
+            data-testid="add-new-section-menu-item"
+            leftSection={<IconLayoutList size={16} />}
+            onClick={handleAddSection}
+          >
+            New Section
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
       <DashboardFiltersModal
         opened={showFiltersModal}
         onClose={() => setShowFiltersModal(false)}

packages/app/tests/e2e/features/dashboard.spec.ts

@@ -50,7 +50,7 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
 
     await test.step('Add a tile to the dashboard', async () => {
       // Open add tile modal
-      await expect(dashboardPage.addNewTileButton).toBeVisible();
+      await expect(dashboardPage.addButton).toBeVisible();
       await dashboardPage.addTile();
 
       // Create chart using chart editor component
@@ -124,7 +124,7 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     });
 
     await test.step('Add first tile to dashboard', async () => {
-      await expect(dashboardPage.addNewTileButton).toBeVisible();
+      await expect(dashboardPage.addButton).toBeVisible();
       await dashboardPage.addTile();
 
       // Create basic chart
@@ -137,7 +137,7 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     });
 
     await test.step('Add second tile with Demo Metrics', async () => {
-      await expect(dashboardPage.addNewTileButton).toBeVisible();
+      await expect(dashboardPage.addButton).toBeVisible();
       await dashboardPage.addTile();
 
       // Select source and create chart with specific metric
@@ -297,7 +297,7 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
     });
 
     await test.step('create a Number type chart with alert', async () => {
-      await expect(dashboardPage.addNewTileButton).toBeVisible();
+      await expect(dashboardPage.addButton).toBeVisible();
       await dashboardPage.addTile();
 
       await expect(dashboardPage.chartEditor.source).toBeVisible();

packages/app/tests/e2e/page-objects/DashboardPage.ts

@@ -62,7 +62,9 @@ export class DashboardPage {
   readonly searchInput: Locator;
 
   private readonly createDashboardButton: Locator;
-  private readonly addTileButton: Locator;
+  private readonly addDropdownButton: Locator;
+  private readonly addTileMenuItem: Locator;
+  private readonly addSectionMenuItem: Locator;
   private readonly dashboardNameHeading: Locator;
   private readonly searchSubmitButton: Locator;
   private readonly liveButton: Locator;
@@ -93,7 +95,15 @@ export class DashboardPage {
     this.createDashboardButton = page.locator(
       '[data-testid="create-dashboard-button"]',
     );
-    this.addTileButton = page.locator('[data-testid="add-new-tile-button"]');
+    this.addDropdownButton = page.locator(
+      '[data-testid="add-dropdown-button"]',
+    );
+    this.addTileMenuItem = page.locator(
+      '[data-testid="add-new-tile-menu-item"]',
+    );
+    this.addSectionMenuItem = page.locator(
+      '[data-testid="add-new-section-menu-item"]',
+    );
     this.searchInput = page.locator('[data-testid="search-input"]');
     this.searchSubmitButton = page.locator(
       '[data-testid="search-submit-button"]',
@@ -193,7 +203,16 @@ export class DashboardPage {
    * Add a new tile to the dashboard
    */
   async addTile() {
-    await this.addTileButton.click();
+    await this.addDropdownButton.click();
+    await this.addTileMenuItem.click();
+  }
+
+  /**
+   * Add a new section to the dashboard
+   */
+  async addSection() {
+    await this.addDropdownButton.click();
+    await this.addSectionMenuItem.click();
   }
 
   /**
@@ -210,7 +229,8 @@ export class DashboardPage {
   async openNewTileEditor() {
     await this.createDashboardButton.click();
     await this.page.waitForURL('**/dashboards**');
-    await this.addTileButton.click();
+    await this.addDropdownButton.click();
+    await this.addTileMenuItem.click();
     await expect(this.chartEditor.nameInput).toBeVisible();
     await this.chartEditor.waitForDataToLoad();
   }
@@ -577,8 +597,8 @@ export class DashboardPage {
     return this.createDashboardButton;
   }
 
-  get addNewTileButton() {
-    return this.addTileButton;
+  get addButton() {
+    return this.addDropdownButton;
   }
 
   get dashboardName() {