refactor: Replace react-bootstrap tabs with Antd tabs (#11118)

* Replace tabs in BuilderComponentPane

* Replace tabs in ControlPanelsContainer

* Replace tabs in AdhocMetricEditPopover

* Replace Tabs in DatasourceEditor

* Replace tabs in AdhocFilterEditPopover

* Replace tabs in DateFilterControl

* Bug fix

* Change Tab styles

* Fix tests

* Fix cypress tests

* Lint fix

* Fix tests

* Change Tabs style in ControlPanelsContainer

* Change tabs content height

* Lint fix

* Add data test

* Fix e2e test

* Move Tabs file to separate dir

* Fix after rebase

* Fix e2e tests

* Fix after rebase
This commit is contained in:
Kamil Gabryjelski
2020-10-31 06:05:31 +01:00
committed by GitHub
parent 01ddbd0697
commit 55a3404b71
15 changed files with 188 additions and 140 deletions

View File

@@ -20,9 +20,9 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { Tab, Tabs } from 'react-bootstrap';
import Button from 'src/components/Button';
import Tabs from 'src/common/components/Tabs';
import AdhocFilter, {
EXPRESSION_TYPES,
CLAUSES,
@@ -82,7 +82,7 @@ describe('AdhocFilterEditPopover', () => {
it('renders simple tab content by default', () => {
const { wrapper } = setup();
expect(wrapper.find(Tabs)).toExist();
expect(wrapper.find(Tab)).toHaveLength(2);
expect(wrapper.find(Tabs.TabPane)).toHaveLength(2);
expect(wrapper.find(Button)).toHaveLength(2);
expect(wrapper.find(AdhocFilterEditPopoverSimpleTabContent)).toHaveLength(
1,
@@ -92,7 +92,7 @@ describe('AdhocFilterEditPopover', () => {
it('renders sql tab content when the adhoc filter expressionType is sql', () => {
const { wrapper } = setup({ adhocFilter: sqlAdhocFilter });
expect(wrapper.find(Tabs)).toExist();
expect(wrapper.find(Tab)).toHaveLength(2);
expect(wrapper.find(Tabs.TabPane)).toHaveLength(2);
expect(wrapper.find(Button)).toHaveLength(2);
expect(wrapper.find(AdhocFilterEditPopoverSqlTabContent)).toExist();
});

View File

@@ -18,11 +18,12 @@
*/
/* eslint-disable no-unused-expressions */
import React from 'react';
import { OverlayTrigger, Tab, Tabs, Radio } from 'react-bootstrap';
import { OverlayTrigger, Radio } from 'react-bootstrap';
import sinon from 'sinon';
import { styledMount as mount } from 'spec/helpers/theming';
import Popover from 'src/common/components/Popover';
import Tabs from 'src/common/components/Tabs';
import Label from 'src/components/Label';
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
import ControlHeader from 'src/explore/components/ControlHeader';
@@ -85,13 +86,13 @@ describe('DateFilterControl', () => {
const popoverContentWrapper = mount(popoverContent);
expect(popoverContentWrapper.find(Tabs)).toExist();
expect(popoverContentWrapper.find(Tab)).toHaveLength(2);
expect(popoverContentWrapper.find(Tabs.TabPane)).toHaveLength(2);
});
it('renders default time options', () => {
const popoverContent = wrapper.find(Popover).first().props().content;
const popoverContentWrapper = mount(popoverContent);
const defaultTab = popoverContentWrapper.find(Tab).first();
const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first();
expect(defaultTab.find(Radio)).toExist();
expect(defaultTab.find(Radio)).toHaveLength(6);
@@ -100,7 +101,7 @@ describe('DateFilterControl', () => {
it('renders tooltips over timeframe options', () => {
const popoverContent = wrapper.find(Popover).first().props().content;
const popoverContentWrapper = mount(popoverContent);
const defaultTab = popoverContentWrapper.find(Tab).first();
const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first();
const radioTrigger = defaultTab.find(OverlayTrigger);
expect(radioTrigger).toExist();
@@ -110,7 +111,7 @@ describe('DateFilterControl', () => {
it('renders the correct time range in tooltip', () => {
const popoverContent = wrapper.find(Popover).first().props().content;
const popoverContentWrapper = mount(popoverContent);
const defaultTab = popoverContentWrapper.find(Tab).first();
const defaultTab = popoverContentWrapper.find(Tabs.TabPane).first();
const triggers = defaultTab.find(OverlayTrigger);
const expectedLabels = {