chore(dashboard): update Edit Dashboard side panel tabs (#20337)

* Reorder Dashboard Edit tabs and rename 'Components' tab to 'Layout Elements'.

* Add tests for BuilderComponentPane.

* Fix Cypress tests, capitalization, test nesting.

superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js

@@ -45,11 +45,6 @@ describe('Dashboard edit mode', () => {
           .should('not.exist');
       });
 
-    cy.get('[data-test="dashboard-builder-component-pane-tabs-navigation"]')
-      .find('.ant-tabs-tab')
-      .last()
-      .click();
-
     // find box plot is available from list
     cy.get('[data-test="dashboard-charts-filter-search-input"]').type(
       'Box plot',

superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts

@@ -29,6 +29,11 @@ describe('Dashboard edit markdown', () => {
       .find('[aria-label="Edit dashboard"]')
       .click();
 
+    cy.get('[data-test="dashboard-builder-component-pane-tabs-navigation"]')
+      .find('.ant-tabs-tab')
+      .last()
+      .click();
+
     // lazy load - need to open dropdown for the scripts to load
     cy.get('.header-with-actions').find('[aria-label="more-horiz"]').click();
     cy.get('[data-test="grid-row-background--transparent"]')

superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx

@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import BuilderComponentPane from '.';
+
+jest.mock('src/dashboard/containers/SliceAdder');
+
+test('BuilderComponentPane has correct tabs in correct order', () => {
+  render(<BuilderComponentPane isStandalone={false} topOffset={115} />);
+  const tabs = screen.getAllByRole('tab');
+  expect(tabs).toHaveLength(2);
+  expect(tabs[0]).toHaveTextContent('Charts');
+  expect(tabs[1]).toHaveTextContent('Layout elements');
+  expect(screen.getByRole('tab', { selected: true })).toHaveTextContent(
+    'Charts',
+  );
+});

superset-frontend/src/dashboard/components/BuilderComponentPane.tsx → superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx

@@ -24,15 +24,15 @@ import { ParentSize } from '@vx/responsive';
 
 import { t, styled } from '@superset-ui/core';
 
-import NewColumn from './gridComponents/new/NewColumn';
-import NewDivider from './gridComponents/new/NewDivider';
-import NewHeader from './gridComponents/new/NewHeader';
-import NewRow from './gridComponents/new/NewRow';
-import NewTabs from './gridComponents/new/NewTabs';
-import NewMarkdown from './gridComponents/new/NewMarkdown';
-import SliceAdder from '../containers/SliceAdder';
-import dashboardComponents from '../../visualizations/presets/dashboardComponents';
-import NewDynamicComponent from './gridComponents/new/NewDynamicComponent';
+import SliceAdder from 'src/dashboard/containers/SliceAdder';
+import dashboardComponents from 'src/visualizations/presets/dashboardComponents';
+import NewColumn from '../gridComponents/new/NewColumn';
+import NewDivider from '../gridComponents/new/NewDivider';
+import NewHeader from '../gridComponents/new/NewHeader';
+import NewRow from '../gridComponents/new/NewRow';
+import NewTabs from '../gridComponents/new/NewTabs';
+import NewMarkdown from '../gridComponents/new/NewMarkdown';
+import NewDynamicComponent from '../gridComponents/new/NewDynamicComponent';
 
 export interface BCPProps {
   isStandalone: boolean;
@@ -101,7 +101,18 @@ const BuilderComponentPane: React.FC<BCPProps> = ({
                     className="tabs-components"
                     data-test="dashboard-builder-component-pane-tabs-navigation"
                   >
-                    <Tabs.TabPane key={1} tab={t('Components')}>
+                    <Tabs.TabPane
+                      key={1}
+                      tab={t('Charts')}
+                      className="tab-charts"
+                    >
+                      <SliceAdder
+                        height={
+                          height + (isSticky ? SUPERSET_HEADER_HEIGHT : 0)
+                        }
+                      />
+                    </Tabs.TabPane>
+                    <Tabs.TabPane key={2} tab={t('Layout elements')}>
                       <NewTabs />
                       <NewRow />
                       <NewColumn />
@@ -117,17 +128,6 @@ const BuilderComponentPane: React.FC<BCPProps> = ({
                           />
                         ))}
                     </Tabs.TabPane>
-                    <Tabs.TabPane
-                      key={2}
-                      tab={t('Charts')}
-                      className="tab-charts"
-                    >
-                      <SliceAdder
-                        height={
-                          height + (isSticky ? SUPERSET_HEADER_HEIGHT : 0)
-                        }
-                      />
-                    </Tabs.TabPane>
                   </BuilderComponentPaneTabs>
                 </div>
               );