* add extension for drilldown to add to dashboard * reuse configure add to dashboard function callback * structure for drilldown add to dashboard * fix imports * fix tests * expose as a component * remove extension link * get component ready to extend * lazy load component * add component to exposed component registry * update folder structure to not work in explore folder * keep dependencies clean * nice structure to let folks know this is a drilldown integration * update code owners for new file * make exposed component more generic, step one, update component id * step 2, expose add to dashboard form component * add more explicit useAbsolutePath option to form * remove old implementation code for drilldown specific component * commit translation * add comments to avoid breaking changes * add e2e test for add to dashboard form component * fix flaky test * add exposed component id to e2e test app * remove gridPos in buildPanel fallback fn * add code comment for useAbsolutePath's purpose * remove gridPos from e2e test
47 lines
2.0 KiB
TypeScript
47 lines
2.0 KiB
TypeScript
import { test, expect } from '@grafana/plugin-e2e';
|
|
import { testIds } from '../testIds';
|
|
import pluginJson from '../plugin.json';
|
|
import { ensureExtensionRegistryIsPopulated } from './utils';
|
|
|
|
test.describe(
|
|
'grafana-extensionstest-app',
|
|
{
|
|
tag: ['@plugins'],
|
|
},
|
|
() => {
|
|
test('should display component exposed by another app', async ({ page }) => {
|
|
await page.goto(`/a/${pluginJson.id}/exposed-components`);
|
|
await expect(page.getByTestId(testIds.appB.exposedComponent)).toHaveText('Hello World!');
|
|
});
|
|
|
|
test('exposed add-to-dashboard form saves to a new dashboard', async ({ page }) => {
|
|
await page.goto(`/a/${pluginJson.id}/exposed-components`);
|
|
await ensureExtensionRegistryIsPopulated(page);
|
|
|
|
// Wait for the exposed form section to be ready
|
|
await expect(page.getByRole('heading', { name: 'Save to dashboard (exposed form)' })).toBeVisible();
|
|
|
|
// Wait for any of the form buttons to render (lazy load) before clicking
|
|
const openInNewTab = page.getByRole('button', { name: 'Open in new tab' });
|
|
const cancelBtn = page.getByRole('button', { name: 'Cancel' });
|
|
await Promise.race([expect(openInNewTab).toBeVisible(), expect(cancelBtn).toBeVisible()]);
|
|
|
|
// Now wait for the submit button to be visible, then click (role or text)
|
|
const openDashboardByRole = page.getByRole('button', { name: 'Open dashboard' });
|
|
const openDashboardByText = page.getByText('Open dashboard');
|
|
if (await openDashboardByRole.isVisible().catch(() => false)) {
|
|
await openDashboardByRole.click();
|
|
} else {
|
|
await expect(openDashboardByText.first()).toBeVisible();
|
|
await openDashboardByText.first().click();
|
|
}
|
|
|
|
// Navigates to /dashboard/new and prepopulates a panel from local storage
|
|
await expect(page).toHaveURL(/\/dashboard\/new/);
|
|
|
|
// Panel should be created with our custom title
|
|
await expect(page.getByText('E2E Add to Dashboard Panel').first()).toBeVisible();
|
|
});
|
|
}
|
|
);
|