fix: display "temporary dashboard" banner until dashboard is created (#1554)

This commit is contained in:
Karl Power 2026-01-05 18:31:12 +01:00 committed by GitHub
parent 6a6709bb3b
commit 3b71fecb79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 35 additions and 4 deletions

View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: display "temporary dashboard" banner until dashboard is created

View file

@ -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 && (
<Paper my="lg" p="md">
{IS_LOCAL_MODE === false && isLocalDashboard && (
<Paper my="lg" p="md" data-testid="temporary-dashboard-banner">
<Flex justify="space-between" align="center">
<Text size="sm">
This is a temporary dashboard and can not be saved.

View file

@ -166,7 +166,6 @@ export function useDashboard({
setDashboard,
dashboardHash,
isLocalDashboard,
isLocalDashboardEmpty: localDashboard == null,
isFetching: isFetchingRemoteDashboard,
isSetting,
};

View file

@ -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' },

View file

@ -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;
}
}