diff --git a/.changeset/real-drinks-tap.md b/.changeset/real-drinks-tap.md new file mode 100644 index 00000000..0f22d2ae --- /dev/null +++ b/.changeset/real-drinks-tap.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +fix: display "temporary dashboard" banner until dashboard is created diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx index b68a9e07..98891ab8 100644 --- a/packages/app/src/DBDashboardPage.tsx +++ b/packages/app/src/DBDashboardPage.tsx @@ -563,7 +563,6 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) { setDashboard, dashboardHash, isLocalDashboard, - isLocalDashboardEmpty, isFetching: isFetchingDashboard, isSetting: isSavingDashboard, } = useDashboard({ @@ -917,8 +916,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) { ); }} /> - {IS_LOCAL_MODE === false && isLocalDashboard && isLocalDashboardEmpty && ( - + {IS_LOCAL_MODE === false && isLocalDashboard && ( + This is a temporary dashboard and can not be saved. diff --git a/packages/app/src/dashboard.ts b/packages/app/src/dashboard.ts index 70c943e2..33070157 100644 --- a/packages/app/src/dashboard.ts +++ b/packages/app/src/dashboard.ts @@ -166,7 +166,6 @@ export function useDashboard({ setDashboard, dashboardHash, isLocalDashboard, - isLocalDashboardEmpty: localDashboard == null, isFetching: isFetchingRemoteDashboard, isSetting, }; diff --git a/packages/app/tests/e2e/features/dashboard.spec.ts b/packages/app/tests/e2e/features/dashboard.spec.ts index bf17720c..020d2958 100644 --- a/packages/app/tests/e2e/features/dashboard.spec.ts +++ b/packages/app/tests/e2e/features/dashboard.spec.ts @@ -9,6 +9,26 @@ test.describe('Dashboard', { tag: ['@dashboard'] }, () => { await dashboardPage.goto(); }); + test( + 'should display the "temporary dashboard" banner until the dashboard is created', + { tag: '@full-stack' }, + async () => { + await test.step('Verify that banner is initially displayed', async () => { + await expect(dashboardPage.temporaryDashboardBanner).toBeVisible(); + }); + + await test.step('Add a tile, verify that banner is still displayed', async () => { + await dashboardPage.addTileWithConfig('Test tile'); + await expect(dashboardPage.temporaryDashboardBanner).toBeVisible(); + }); + + await test.step('Create the dashboard, verify the banner is no longer displayed', async () => { + await dashboardPage.createNewDashboard(); + await expect(dashboardPage.temporaryDashboardBanner).toBeHidden(); + }); + }, + ); + test( 'should persist dashboard across page reloads', { tag: '@full-stack' }, diff --git a/packages/app/tests/e2e/page-objects/DashboardPage.ts b/packages/app/tests/e2e/page-objects/DashboardPage.ts index 202b93d5..8fb8c485 100644 --- a/packages/app/tests/e2e/page-objects/DashboardPage.ts +++ b/packages/app/tests/e2e/page-objects/DashboardPage.ts @@ -19,6 +19,7 @@ export class DashboardPage { private readonly searchInput: Locator; private readonly searchSubmitButton: Locator; private readonly liveButton: Locator; + private readonly tempDashboardBanner: Locator; constructor(page: Page) { this.page = page; @@ -36,6 +37,9 @@ export class DashboardPage { this.liveButton = page.locator('button:has-text("Live")'); this.dashboardNameHeading = page.getByRole('heading', { level: 3 }); this.granularityPicker = page.getByTestId('granularity-picker'); + this.tempDashboardBanner = page.locator( + '[data-testid="temporary-dashboard-banner"]', + ); } /** @@ -243,4 +247,8 @@ export class DashboardPage { get filterSubmitButton() { return this.searchSubmitButton; } + + get temporaryDashboardBanner() { + return this.tempDashboardBanner; + } }