diff --git a/e2e/suite1/specs/panelEdit_base.spec.ts b/e2e/suite1/specs/panelEdit_base.spec.ts index 5685258a427..0da6f4c4dac 100644 --- a/e2e/suite1/specs/panelEdit_base.spec.ts +++ b/e2e/suite1/specs/panelEdit_base.spec.ts @@ -112,30 +112,17 @@ e2e.scenario({ e2e.components.PanelEditor.DataPane.content().should('be.visible'); // Field & Overrides tabs (need to switch to React based vis, i.e. Table) - e2e.components.PanelEditor.OptionsPane.select() - .should('be.visible') - .click() - .within(() => { - // Can change to Fields tab - e2e.components.Select.option() - .should('be.visible') - .eq(1) - .click(); - }); + e2e.components.PanelEditor.OptionsPane.tab('Field').should('be.visible'); + e2e.components.PanelEditor.OptionsPane.tab('Overrides').should('be.visible'); + e2e.components.PanelEditor.OptionsPane.tab('Field').click(); e2e.components.FieldConfigEditor.content().should('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') - .click() - .within(() => { - // Can change to Overrides tab - e2e.components.Select.option() - .should('be.visible') - .eq(2) - .click(); - }); + .click(); e2e.components.OverridesConfigEditor.content().should('be.visible'); e2e.components.FieldConfigEditor.content().should('not.be.visible'); diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index e53bae2880f..1cfcdf4b6e2 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -53,6 +53,7 @@ export const Components = { close: Pages.Dashboard.Toolbar.toolbarItems('Close options pane'), open: Pages.Dashboard.Toolbar.toolbarItems('Open options pane'), select: 'Panel editor option pane select', + tab: (title: string) => `Panel editor option pane tab ${title}`, }, // not sure about the naming *DataPane* DataPane: { diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index 1cac4dc4c14..db912795a56 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -30,7 +30,7 @@ export const Tab = React.forwardRef( onChangeTab(); } }} - aria-label={selectors.components.Tab.title(label)} + aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)} ref={ref} > {icon && } diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx index a797123d05c..25ebbcc7e5a 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx @@ -203,6 +203,7 @@ export const TabsBarContent: React.FC<{ active={active.value === item.value} onChangeTab={() => setActiveTab(item.value)} title={item.tooltip} + aria-label={selectors.components.PanelEditor.OptionsPane.tab(item.label)} /> ))}
diff --git a/public/app/features/dashboard/components/PanelEditor/state/reducers.ts b/public/app/features/dashboard/components/PanelEditor/state/reducers.ts index 89b989da4db..482ef0a9d29 100644 --- a/public/app/features/dashboard/components/PanelEditor/state/reducers.ts +++ b/public/app/features/dashboard/components/PanelEditor/state/reducers.ts @@ -9,7 +9,7 @@ export const PANEL_EDITOR_UI_STATE_STORAGE_KEY = 'grafana.dashboard.editor.ui'; export const DEFAULT_PANEL_EDITOR_UI_STATE: PanelEditorUIState = { isPanelOptionsVisible: true, - rightPaneSize: 350, + rightPaneSize: 400, topPaneSize: '45%', mode: DisplayMode.Fill, };