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

@@ -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()
-      .should('be.visible')
-      .click()
-      .within(() => {
-        // Can change to Overrides tab
-        e2e.components.Select.option()
+    e2e.components.PanelEditor.OptionsPane.tab('Field').should('be.visible');
+    e2e.components.PanelEditor.OptionsPane.tab('Overrides')
       .should('be.visible')
-          .eq(2)
       .click();
-      });
 
     e2e.components.OverridesConfigEditor.content().should('be.visible');
     e2e.components.FieldConfigEditor.content().should('not.be.visible');

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: {

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} />}

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" />

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,
 };