diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js b/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js
index 7a3b82705cebd..10b8a4a40de1f 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/edit_mode.test.js
+++ b/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',
diff --git a/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts b/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts
index 2964241b184a2..a27382933b532 100644
--- a/superset-frontend/cypress-base/cypress/integration/dashboard/markdown.test.ts
+++ b/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"]')
diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/BuilderComponentPane.test.tsx
new file mode 100644
index 0000000000000..a5ff5b1314f3d
--- /dev/null
+++ b/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();
+ 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',
+ );
+});
diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx
similarity index 86%
rename from superset-frontend/src/dashboard/components/BuilderComponentPane.tsx
rename to superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx
index 9d2c2fba5ad11..4e47e161e4c19 100644
--- a/superset-frontend/src/dashboard/components/BuilderComponentPane.tsx
+++ b/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 = ({
className="tabs-components"
data-test="dashboard-builder-component-pane-tabs-navigation"
>
-
+
+
+
+
@@ -117,17 +128,6 @@ const BuilderComponentPane: React.FC = ({
/>
))}
-
-
-
);