From f769ed035d2934897a7314b6219508d5e3055d75 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 14 May 2020 09:55:40 +0200
Subject: [PATCH] PanelEdit: Make sure side pane is displayed with tabs by
 default (#24636)

* Make sure side pane is displayed with tabs by default

* Update e2e tests for
---
 e2e/suite1/specs/panelEdit_base.spec.ts       | 25 +++++--------------
 .../src/selectors/components.ts               |  1 +
 .../grafana-ui/src/components/Tabs/Tab.tsx    |  2 +-
 .../PanelEditor/OptionsPaneContent.tsx        |  1 +
 .../components/PanelEditor/state/reducers.ts  |  2 +-
 5 files changed, 10 insertions(+), 21 deletions(-)

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<HTMLLIElement, TabProps>(
             onChangeTab();
           }
         }}
-        aria-label={selectors.components.Tab.title(label)}
+        aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
         ref={ref}
       >
         {icon && <Icon name={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)}
             />
           ))}
           <div className="flex-grow-1" />
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,
 };