Skip to content

Commit

Permalink
refactor: Changes the list views to use the new Select component (#16393
Browse files Browse the repository at this point in the history 
)

* chore: Change the list views to use the new Select component

* Fix Cypress tests

* Enables search for all controls

* Adjusts controls width

* Removes 'Me' and keeps the logged user on top

* Fixes tests

* Uses the borderless version for the filters

* Fixes the tests

* Reverts the Select theme to the default

* Rebases and fixes js error

* Fixes failing test

* Removes unused withTheme
  • Loading branch information
@michael-s-molina
michael-s-molina authored Sep 22, 2021
1 parent 596e1cd commit b6d78bf
Show file tree
Hide file tree
Showing 28 changed files with 505 additions and 830 deletions.
88 changes: 36 additions & 52 deletions superset-frontend/cypress-base/cypress/integration/chart_list/filter.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,44 +27,34 @@ describe('chart card view filters', () => {

it('should filter by owners correctly', () => {
// filter by owners
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('[data-test="styled-card"]').should('not.exist');
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="styled-card"]').should('not.exist');
});

it('should filter by me correctly', () => {
// filter by me
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
});

it('should filter by created by correctly', () => {
// filter by created by
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('.ant-card').should('not.exist');
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="styled-card"]').should('not.exist');
});

xit('should filter by viz type correctly', () => {
// filter by viz type
cy.get('.Select__control').eq(2).click();
cy.get('.Select__menu').contains('area').click({ timeout: 5000 });
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('.rc-virtual-list').contains('area').click({ timeout: 5000 });
cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
cy.get('[data-test="styled-card"]')
.contains("World's Pop Growth")
.should('be.visible');
cy.get('.Select__control').eq(2).click();
cy.get('.Select__control').eq(2).type('world_map{enter}');
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('[data-test="filters-select"]').eq(2).type('world_map{enter}');
cy.get('[data-test="styled-card"]').should('have.length', 1);
cy.get('[data-test="styled-card"]')
.contains('% Rural')
Expand All @@ -73,14 +63,16 @@ describe('chart card view filters', () => {

it('should filter by datasource correctly', () => {
// filter by datasource
cy.get('.Select__control').eq(3).click();
cy.get('.Select__menu').contains('unicode_test').click();
cy.get('[data-test="filters-select"]').eq(3).click();
cy.get('.rc-virtual-list').contains('unicode_test').click();
cy.get('[data-test="styled-card"]').should('have.length', 1);
cy.get('[data-test="styled-card"]')
.contains('Unicode Cloud')
.should('be.visible');
cy.get('.Select__control').eq(2).click();
cy.get('.Select__control').eq(2).type('energy_usage{enter}{enter}');
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('[data-test="filters-select"]')
.eq(2)
.type('energy_usage{enter}{enter}');
cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
});
});
Expand All @@ -94,57 +86,49 @@ describe('chart list view filters', () => {

it('should filter by owners correctly', () => {
// filter by owners
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('[data-test="table-row"]').should('not.exist');
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="table-row"]').should('not.exist');
});

it('should filter by me correctly', () => {
// filter by me
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
});

it('should filter by created by correctly', () => {
// filter by created by
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('[data-test="table-row"]').should('not.exist');
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="table-row"]').should('not.exist');
});

// this is flaky, but seems to fail along with the card view test of the same name
xit('should filter by viz type correctly', () => {
// filter by viz type
cy.get('.Select__control').eq(2).click();
cy.get('.Select__menu').contains('area').click({ timeout: 5000 });
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('.rc-virtual-list').contains('area').click({ timeout: 5000 });
cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
cy.get('[data-test="table-row"]')
.contains("World's Pop Growth")
.should('exist');
cy.get('.Select__control').eq(2).click();
cy.get('.Select__control').eq(2).type('world_map{enter}');
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('[data-test="filters-select"]').eq(2).type('world_map{enter}');
cy.get('[data-test="table-row"]').should('have.length', 1);
cy.get('[data-test="table-row"]').contains('% Rural').should('exist');
});

it('should filter by datasource correctly', () => {
// filter by datasource
cy.get('.Select__control').eq(3).click();
cy.get('.Select__menu').contains('unicode_test').click();
cy.get('[data-test="filters-select"]').eq(3).click();
cy.get('.rc-virtual-list').contains('unicode_test').click();
cy.get('[data-test="table-row"]').should('have.length', 1);
cy.get('[data-test="table-row"]').contains('Unicode Cloud').should('exist');
cy.get('.Select__control').eq(3).click();
cy.get('.Select__control').eq(3).type('energy_usage{enter}{enter}');
cy.get('[data-test="filters-select"]').eq(3).click();
cy.get('[data-test="filters-select"]')
.eq(3)
.type('energy_usage{enter}{enter}');
cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
});
});
68 changes: 24 additions & 44 deletions superset-frontend/cypress-base/cypress/integration/dashboard_list/filter.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,44 +27,34 @@ describe('dashboard filters card view', () => {

it('should filter by owners correctly', () => {
// filter by owners
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('[data-test="styled-card"]').should('not.exist');
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="styled-card"]').should('not.exist');
});

it('should filter by me correctly', () => {
// filter by me
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="styled-card"]').its('length').should('be.gt', 0);
});

it('should filter by created by correctly', () => {
// filter by created by
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('.ant-card').should('not.exist');
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('.ant-card').should('not.exist');
});

it('should filter by published correctly', () => {
// filter by published
cy.get('.Select__control').eq(2).click();
cy.get('.Select__menu').contains('Published').click({ timeout: 5000 });
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('.rc-virtual-list').contains('Published').click({ timeout: 5000 });
cy.get('[data-test="styled-card"]').should('have.length', 3);
cy.get('[data-test="styled-card"]')
.contains('USA Births Names')
.should('be.visible');
cy.get('.Select__control').eq(1).click();
cy.get('.Select__control').eq(1).type('unpub{enter}');
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('[data-test="filters-select"]').eq(1).type('unpub{enter}');
cy.get('[data-test="styled-card"]').should('have.length', 3);
});
});
Expand All @@ -78,44 +68,34 @@ describe('dashboard filters list view', () => {

it('should filter by owners correctly', () => {
// filter by owners
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('[data-test="table-row"]').should('not.exist');
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').first().click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="table-row"]').should('not.exist');
});

it('should filter by me correctly', () => {
// filter by me
cy.get('.Select__control').first().click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('me').click();
cy.get('[data-test="table-row"]').its('length').should('be.gt', 0);
});

it('should filter by created by correctly', () => {
// filter by created by
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('alpha user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('alpha user').click();
cy.get('[data-test="table-row"]').should('not.exist');
cy.get('.Select__control').eq(1).click();
cy.get('.Select__menu').contains('gamma user').click();
cy.get('[data-test="filters-select"]').eq(1).click();
cy.get('.rc-virtual-list').contains('gamma user').click();
cy.get('[data-test="table-row"]').should('not.exist');
});

it('should filter by published correctly', () => {
// filter by published
cy.get('.Select__control').eq(2).click();
cy.get('.Select__menu').contains('Published').click();
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('.rc-virtual-list').contains('Published').click();
cy.get('[data-test="table-row"]').should('have.length', 3);
cy.get('[data-test="table-row"]')
.contains('USA Births Names')
.should('be.visible');
cy.get('.Select__control').eq(2).click();
cy.get('.Select__control').eq(2).type('unpub{enter}');
cy.get('[data-test="filters-select"]').eq(2).click();
cy.get('[data-test="filters-select"]').eq(2).type('unpub{enter}');
cy.get('[data-test="table-row"]').should('have.length', 3);
});
});
8 changes: 7 additions & 1 deletion superset-frontend/src/components/DatePicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@
* under the License.
*/
import { DatePicker as AntdDatePicker } from 'antd';
import { styled } from '@superset-ui/core';

const AntdRangePicker = AntdDatePicker.RangePicker;

export const RangePicker = styled(AntdRangePicker)`
border-radius: ${({ theme }) => theme.gridUnit}px;
`;

export const { RangePicker } = AntdDatePicker;
export const DatePicker = AntdDatePicker;
Loading

0 comments on commit b6d78bf

Please sign in to comment.