IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 17:06:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

PanelEdit: Make sure side pane is displayed with tabs by default (#24636)

Browse Source 
* Make sure side pane is displayed with tabs by default

* Update e2e tests for
This commit is contained in:
Dominik Prokop 2020-05-14 09:55:40 +02:00 committed by GitHub
parent 083a2ce220
commit f769ed035d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
e2e/suite1/specs/panelEdit_base.spec.ts
View File

@ -112,30 +112,17 @@ e2e.scenario({
e2e.components.PanelEditor.DataPane.content().should('be.visible'); e2e.components.PanelEditor.DataPane.content().should('be.visible');
// Field & Overrides tabs (need to switch to React based vis, i.e. Table) // Field & Overrides tabs (need to switch to React based vis, i.e. Table)
e2e.components.PanelEditor.OptionsPane.select() e2e.components.PanelEditor.OptionsPane.tab('Field').should('be.visible');
.should('be.visible') e2e.components.PanelEditor.OptionsPane.tab('Overrides').should('be.visible');
.click() e2e.components.PanelEditor.OptionsPane.tab('Field').click();
.within(() => {
// Can change to Fields tab
e2e.components.Select.option()
.should('be.visible')
.eq(1)
.click();
});
e2e.components.FieldConfigEditor.content().should('be.visible'); e2e.components.FieldConfigEditor.content().should('be.visible');
e2e.components.OverridesConfigEditor.content().should('not.be.visible'); e2e.components.OverridesConfigEditor.content().should('not.be.visible');
e2e.components.PanelEditor.OptionsPane.select() e2e.components.PanelEditor.OptionsPane.tab('Field').should('be.visible');
e2e.components.PanelEditor.OptionsPane.tab('Overrides')
.should('be.visible') .should('be.visible')
.click() .click();
.within(() => {
// Can change to Overrides tab
e2e.components.Select.option()
.should('be.visible')
.eq(2)
.click();
});
e2e.components.OverridesConfigEditor.content().should('be.visible'); e2e.components.OverridesConfigEditor.content().should('be.visible');
e2e.components.FieldConfigEditor.content().should('not.be.visible'); e2e.components.FieldConfigEditor.content().should('not.be.visible');

1
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -53,6 +53,7 @@ export const Components = {
close: Pages.Dashboard.Toolbar.toolbarItems('Close options pane'), close: Pages.Dashboard.Toolbar.toolbarItems('Close options pane'),
open: Pages.Dashboard.Toolbar.toolbarItems('Open options pane'), open: Pages.Dashboard.Toolbar.toolbarItems('Open options pane'),
select: 'Panel editor option pane select', select: 'Panel editor option pane select',
tab: (title: string) => `Panel editor option pane tab ${title}`,
}, },
// not sure about the naming *DataPane* // not sure about the naming *DataPane*
DataPane: { DataPane: {

2
packages/grafana-ui/src/components/Tabs/Tab.tsx
View File

@ -30,7 +30,7 @@ export const Tab = React.forwardRef<HTMLLIElement, TabProps>(
onChangeTab(); onChangeTab();
} }
}} }}
aria-label={selectors.components.Tab.title(label)} aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
ref={ref} ref={ref}
> >
{icon && <Icon name={icon} />} {icon && <Icon name={icon} />}

1
public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
View File

@ -203,6 +203,7 @@ export const TabsBarContent: React.FC<{
active={active.value === item.value} active={active.value === item.value}
onChangeTab={() => setActiveTab(item.value)} onChangeTab={() => setActiveTab(item.value)}
title={item.tooltip} title={item.tooltip}
aria-label={selectors.components.PanelEditor.OptionsPane.tab(item.label)}
/> />
))} ))}
<div className="flex-grow-1" /> <div className="flex-grow-1" />

2
public/app/features/dashboard/components/PanelEditor/state/reducers.ts
View File

@ -9,7 +9,7 @@ export const PANEL_EDITOR_UI_STATE_STORAGE_KEY = 'grafana.dashboard.editor.ui';
export const DEFAULT_PANEL_EDITOR_UI_STATE: PanelEditorUIState = { export const DEFAULT_PANEL_EDITOR_UI_STATE: PanelEditorUIState = {
isPanelOptionsVisible: true, isPanelOptionsVisible: true,
rightPaneSize: 350, rightPaneSize: 400,
topPaneSize: '45%', topPaneSize: '45%',
mode: DisplayMode.Fill, mode: DisplayMode.Fill,
}; };