This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new d0165b617b chore(dashboard): update Edit Dashboard side panel tabs
(#20337)
d0165b617b is described below
commit d0165b617b36e5b4d67262f1396c974edba65760
Author: Cody Leff <[email protected]>
AuthorDate: Fri Jun 10 09:57:32 2022 -0600
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.
---
.../integration/dashboard/edit_mode.test.js | 5 ---
.../cypress/integration/dashboard/markdown.test.ts | 5 +++
.../BuilderComponentPane.test.tsx | 35 ++++++++++++++++++
.../index.tsx} | 42 +++++++++++-----------
4 files changed, 61 insertions(+), 26 deletions(-)
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 7a3b82705c..10b8a4a40d 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 2964241b18..a27382933b 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 0000000000..a5ff5b1314
--- /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(<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',
+ );
+});
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 9d2c2fba5a..4e47e161e4 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<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>
);
