Commit 40114e8c by Dominik Prokop Committed by GitHub

NewPanelEditor: UI update of add panel widget (#23715)

* Small update proposal to add panel widget

* Fix smoketest

* Minor tweaks

* update snaps god damn it
parent 7e429250
...@@ -13,7 +13,7 @@ e2e.scenario({ ...@@ -13,7 +13,7 @@ e2e.scenario({
e2e.flows.openDashboard(lastAddedDashboardUid); e2e.flows.openDashboard(lastAddedDashboardUid);
}); });
e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click(); e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
e2e.pages.AddDashboard.ctaButtons('Add Query').click(); e2e.pages.AddDashboard.addNewPanel().click();
e2e.components.DataSource.TestData.QueryTab.scenarioSelect().select('CSV Metric Values'); e2e.components.DataSource.TestData.QueryTab.scenarioSelect().select('CSV Metric Values');
......
...@@ -19,7 +19,7 @@ export const addPanel = (config?: Partial<AddPanelConfig>) => { ...@@ -19,7 +19,7 @@ export const addPanel = (config?: Partial<AddPanelConfig>) => {
getScenarioContext().then(({ lastAddedDashboardUid }) => { getScenarioContext().then(({ lastAddedDashboardUid }) => {
e2e.flows.openDashboard(lastAddedDashboardUid); e2e.flows.openDashboard(lastAddedDashboardUid);
e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click(); e2e.pages.Dashboard.Toolbar.toolbarItems('Add panel').click();
e2e.pages.AddDashboard.ctaButtons('Add Query').click(); e2e.pages.AddDashboard.addNewPanel().click();
e2e() e2e()
.get('.ds-picker') .get('.ds-picker')
.click() .click()
......
...@@ -3,6 +3,6 @@ import { pageFactory } from '../support'; ...@@ -3,6 +3,6 @@ import { pageFactory } from '../support';
export const AddDashboard = pageFactory({ export const AddDashboard = pageFactory({
url: '/dashboard/new', url: '/dashboard/new',
selectors: { selectors: {
ctaButtons: (text: string) => `Add Panel Widget CTA Button ${text}`, addNewPanel: 'Add new panel',
}, },
}); });
...@@ -8,6 +8,7 @@ const setup = (propOverrides?: object) => { ...@@ -8,6 +8,7 @@ const setup = (propOverrides?: object) => {
dashboard: {} as DashboardModel, dashboard: {} as DashboardModel,
panel: {} as PanelModel, panel: {} as PanelModel,
addPanel: jest.fn() as any, addPanel: jest.fn() as any,
updateLocation: jest.fn() as any,
}; };
Object.assign(props, propOverrides); Object.assign(props, propOverrides);
......
...@@ -2,97 +2,30 @@ ...@@ -2,97 +2,30 @@
exports[`Render should render component 1`] = ` exports[`Render should render component 1`] = `
<div <div
className="panel-container add-panel-widget-container" className="panel-container css-1sl7nld"
> >
<div <AddPanelWidgetHandle
className="add-panel-widget" onCancel={[Function]}
>
<div
className="add-panel-widget__header grid-drag-handle"
>
<Icon
name="panel-add"
size="xl"
style={
Object {
"margin": "4px",
"marginRight": "8px",
}
}
type="mono"
/> />
<span
className="add-panel-widget__title"
>
New Panel
</span>
<div <div
className="flex-grow-1" className="css-1wtsk46"
/>
<IconButton
className="add-panel-widget__close"
name="times"
onClick={[Function]}
surface="header"
/>
</div>
<div
className="add-panel-widget__btn-container"
>
<div
className="add-panel-widget__create"
>
<div>
<a
aria-label="Add Panel Widget CTA Button Add Query"
className="add-panel-widget__link btn btn-inverse"
href="#"
onClick={[Function]}
> >
<div <AddPanelWidgetCreate
className="add-panel-widget__icon" onCreate={[Function]}
> onPasteCopiedPanel={[Function]}
<Icon
name="database"
size="xl"
/> />
</div>
<span>
Add Query
</span>
</a>
</div>
<div> <div>
<a <Component
aria-label="Add Panel Widget CTA Button Choose Visualization" justify="center"
className="add-panel-widget__link btn btn-inverse"
href="#"
onClick={[Function]}
>
<div
className="add-panel-widget__icon"
> >
<Icon <Button
name="chart-line"
size="xl"
/>
</div>
<span>
Choose Visualization
</span>
</a>
</div>
</div>
<div
className="add-panel-widget__actions"
>
<button
className="btn btn-inverse add-panel-widget__action"
onClick={[Function]} onClick={[Function]}
size="sm"
variant="secondary"
> >
Convert to row Convert to row
</button> </Button>
</div> </Component>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment