Skip to content

Commit

Permalink
refactor: move CTAS/CVAS field II (#13877)
Browse files Browse the repository at this point in the history 
Co-authored-by: lyndsiWilliams <kcatgirl@gmail.com>
  • Loading branch information
@hughhhh @lyndsiWilliams
hughhhh and lyndsiWilliams authored Apr 5, 2021
1 parent d489d00 commit d006178
Show file tree
Hide file tree
Showing 6 changed files with 409 additions and 163 deletions.
4 changes: 2 additions & 2 deletions superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ describe('chart list view', () => {
it('should bulk delete correctly', () => {
cy.get('[data-test="listview-table"]').should('be.visible');
cy.get('[data-test="bulk-select"]').eq(0).click();
cy.get('[data-test="checkbox-off"]').eq(1).click();
cy.get('[data-test="checkbox-off"]').eq(2).click();
cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click();
cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click();
cy.get('[data-test="bulk-select-action"]').eq(0).click();
cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
cy.get('[data-test="modal-confirm-button"]').eq(0).click();
Expand Down
4 changes: 2 additions & 2 deletions superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ describe('dashboard list view', () => {
it('should bulk delete correctly', () => {
cy.get('[data-test="listview-table"]').should('be.visible');
cy.get('[data-test="bulk-select"]').eq(0).click();
cy.get('[data-test="checkbox-off"]').eq(1).click();
cy.get('[data-test="checkbox-off"]').eq(2).click();
cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click();
cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click();
cy.get('[data-test="bulk-select-action"]').eq(0).click();
cy.get('[data-test="delete-modal-input"]').eq(0).type('DELETE');
cy.get('[data-test="modal-confirm-button"]').eq(0).click();
Expand Down
2 changes: 2 additions & 0 deletions superset-frontend/spec/javascripts/sqllab/fixtures.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,8 @@ export const initialState = {
DEFAULT_SQLLAB_LIMIT: 1000,
SQL_MAX_ROW: 100000,
DISPLAY_MAX_ROW: 100,
SQLALCHEMY_DOCS_URL: 'test_SQLALCHEMY_DOCS_URL',
SQLALCHEMY_DISPLAY_TEXT: 'test_SQLALCHEMY_DISPLAY_TEXT',
},
},
};
Expand Down
238 changes: 205 additions & 33 deletions superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,71 +19,243 @@
import React from 'react';
import thunk from 'redux-thunk';
import configureStore from 'redux-mock-store';
import * as redux from 'react-redux';
import { styledMount as mount } from 'spec/helpers/theming';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
import { Provider } from 'react-redux';
import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
import Modal from 'src/common/components/Modal';
import Tabs from 'src/common/components/Tabs';
import fetchMock from 'fetch-mock';
import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
import { initialState } from 'spec/javascripts/sqllab/fixtures';

// store needed for withToasts(DatabaseModal)
const mockStore = configureStore([thunk]);
const store = mockStore({});

const mockedProps = {
show: true,
};

const dbProps = {
show: true,
database: {
id: 10,
database_name: 'test',
sqlalchemy_uri: 'sqllite:///user:pw/test',
expose_in_sqllab: true,
},
};

jest.mock('react-redux', () => ({
...jest.requireActual('react-redux'),
useSelector: jest.fn(),
}));

const DATABASE_ENDPOINT = 'glob:*/api/v1/database/*';

fetchMock.get(DATABASE_ENDPOINT, {});

describe('DatabaseModal', () => {
const wrapper = mount(<DatabaseModal store={store} {...mockedProps} />);

it('renders', () => {
expect(wrapper.find(DatabaseModal)).toExist();
describe('enzyme', () => {
let wrapper;
let spyOnUseSelector;
beforeAll(() => {
spyOnUseSelector = jest.spyOn(redux, 'useSelector');
spyOnUseSelector.mockReturnValue(initialState.common.conf);
});
beforeEach(() => {
wrapper = mount(
<Provider store={store}>
<DatabaseModal store={store} {...mockedProps} />
</Provider>,
);
});
afterEach(() => {
wrapper.unmount();
});
it('renders', () => {
expect(wrapper.find(DatabaseModal)).toExist();
});
it('renders a Modal', () => {
expect(wrapper.find(Modal)).toExist();
});
it('renders "Add database" header when no database is included', () => {
expect(wrapper.find('h4').text()).toEqual('Add database');
});
it('renders "Edit database" header when database prop is included', () => {
const editWrapper = mount(<DatabaseModal store={store} {...dbProps} />);
waitForComponentToPaint(editWrapper);
expect(editWrapper.find('h4').text()).toEqual('Edit database');
editWrapper.unmount();
});
it('renders a Tabs menu', () => {
expect(wrapper.find(Tabs)).toExist();
});
it('renders five TabPanes', () => {
expect(wrapper.find(Tabs.TabPane)).toExist();
expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
});
it('renders input elements for Connection section', () => {
expect(wrapper.find('input[name="database_name"]')).toExist();
expect(wrapper.find('input[name="sqlalchemy_uri"]')).toExist();
});
});

it('renders a Modal', () => {
expect(wrapper.find(Modal)).toExist();
});
describe('RTL', () => {
describe('initial load', () => {
it('hides the forms from the db when not selected', () => {
render(
<ThemeProvider theme={supersetTheme}>
<Provider store={store}>
<DatabaseModal
show
database={{
expose_in_sqllab: false,
allow_ctas: false,
allow_cvas: false,
}}
/>
</Provider>
</ThemeProvider>,
);
// Select SQL Lab settings tab
const sqlLabSettingsTab = screen.getByRole('tab', {
name: /sql lab settings/i,
});
userEvent.click(sqlLabSettingsTab);

it('renders "Add database" header when no database is included', () => {
expect(wrapper.find('h4').text()).toEqual('Add database');
});
const exposeInSqlLab = screen.getByText('Expose in SQL Lab');
const exposeChoicesForm = exposeInSqlLab.parentElement.nextSibling;
const schemaField = screen.getByText('CTAS & CVAS SCHEMA')
.parentElement;
expect(exposeChoicesForm).not.toHaveClass('open');
expect(schemaField).not.toHaveClass('open');
});
});
it('renders all settings when "Expose in SQL Lab" is checked', () => {
render(
<ThemeProvider theme={supersetTheme}>
<Provider store={store}>
<DatabaseModal {...dbProps} />
</Provider>
</ThemeProvider>,
);

it('renders "Edit database" header when database prop is included', () => {
const editWrapper = mount(<DatabaseModal store={store} {...dbProps} />);
waitForComponentToPaint(editWrapper);
expect(editWrapper.find('h4').text()).toEqual('Edit database');
});
// Select SQL Lab settings tab
const sqlLabSettingsTab = screen.getByRole('tab', {
name: /sql lab settings/i,
});

it('renders a Tabs menu', () => {
expect(wrapper.find(Tabs)).toExist();
});
userEvent.click(sqlLabSettingsTab);
// Grab all SQL Lab Settings by their labels
// const exposeInSqlLab = screen.getByText('Expose in SQL Lab');
const exposeInSqlLab = screen.getByRole('checkbox', {
name: /expose in sql lab/i,
});

it('renders five TabPanes', () => {
expect(wrapper.find(Tabs.TabPane)).toExist();
expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
});
// While 'Expose in SQL Lab' is checked, all settings should display
expect(exposeInSqlLab).not.toBeChecked();

// When clicked, "Expose in SQL Lab" becomes unchecked
userEvent.click(exposeInSqlLab);

// While checked make sure all checkboxes are showing
expect(exposeInSqlLab).toBeChecked();
const checkboxes = screen
.getAllByRole('checkbox')
.filter(checkbox => !checkbox.checked);

expect(checkboxes.length).toEqual(4);
});

it('renders the schema field when allowCTAS is checked', () => {
render(
<ThemeProvider theme={supersetTheme}>
<Provider store={store}>
<DatabaseModal {...dbProps} />
</Provider>
</ThemeProvider>,
);

// Select SQL Lab settings tab
const sqlLabSettingsTab = screen.getByRole('tab', {
name: /sql lab settings/i,
});
userEvent.click(sqlLabSettingsTab);
// Grab CTAS & schema field by their labels
const allowCTAS = screen.getByLabelText('Allow CREATE TABLE AS');
const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;

// While CTAS & CVAS are unchecked, schema field is not visible
expect(schemaField).not.toHaveClass('open');

// Check "Allow CTAS" to reveal schema field
userEvent.click(allowCTAS);
expect(schemaField).toHaveClass('open');

// Uncheck "Allow CTAS" to hide schema field again
userEvent.click(allowCTAS);
expect(schemaField).not.toHaveClass('open');
});

it('renders the schema field when allowCVAS is checked', () => {
render(
<ThemeProvider theme={supersetTheme}>
<Provider store={store}>
<DatabaseModal {...dbProps} />
</Provider>
</ThemeProvider>,
);

// Select SQL Lab settings tab
const sqlLabSettingsTab = screen.getByRole('tab', {
name: /sql lab settings/i,
});
userEvent.click(sqlLabSettingsTab);
// Grab CVAS by it's label & schema field
const allowCVAS = screen.getByText('Allow CREATE VIEW AS');
const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;

// While CTAS & CVAS are unchecked, schema field is not visible
expect(schemaField).not.toHaveClass('open');

// Check "Allow CVAS" to reveal schema field
userEvent.click(allowCVAS);
expect(schemaField).toHaveClass('open');

// Uncheck "Allow CVAS" to hide schema field again
userEvent.click(allowCVAS);
expect(schemaField).not.toHaveClass('open');
});

it('renders the schema field when both allowCTAS and allowCVAS are checked', () => {
render(
<ThemeProvider theme={supersetTheme}>
<Provider store={store}>
<DatabaseModal {...dbProps} />
</Provider>
</ThemeProvider>,
);

// Select SQL Lab settings tab
const sqlLabSettingsTab = screen.getByRole('tab', {
name: /sql lab settings/i,
});
userEvent.click(sqlLabSettingsTab);
// Grab CTAS and CVAS by their labels, & schema field
const allowCTAS = screen.getByText('Allow CREATE TABLE AS');
const allowCVAS = screen.getByText('Allow CREATE VIEW AS');
const schemaField = screen.getByText('CTAS & CVAS SCHEMA').parentElement;

// While CTAS & CVAS are unchecked, schema field is not visible
expect(schemaField).not.toHaveClass('open');

// Check both "Allow CTAS" and "Allow CVAS" to reveal schema field
userEvent.click(allowCTAS);
userEvent.click(allowCVAS);
expect(schemaField).toHaveClass('open');
// Uncheck both "Allow CTAS" and "Allow CVAS" to hide schema field again
userEvent.click(allowCTAS);
userEvent.click(allowCVAS);

it('renders input elements for Connection section', () => {
expect(wrapper.find('input[name="database_name"]')).toExist();
expect(wrapper.find('input[name="sqlalchemy_uri"]')).toExist();
// Both checkboxes go unchecked, so the field should no longer render
expect(schemaField).not.toHaveClass('open');
});
});
});
51 changes: 36 additions & 15 deletions superset-frontend/src/components/IndeterminateCheckbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,35 @@ interface IndeterminateCheckboxProps {
checked: boolean;
onChange: React.EventHandler<React.SyntheticEvent<HTMLInputElement>>;
title?: string;
labelText?: string;
}

const CheckboxLabel = styled.label`
cursor: pointer;
display: inline-block;
margin-bottom: 0;
`;

const IconWithColor = styled(Icon)`
color: ${({ theme }) => theme.colors.primary.dark1};
cursor: pointer;
`;

const HiddenInput = styled.input`
visibility: none;
&[type='checkbox'] {
cursor: pointer;
opacity: 0;
position: absolute;
left: 3px;
margin: 0;
top: 4px;
}
`;

const InputContainer = styled.div`
cursor: pointer;
display: inline-block;
position: relative;
`;

const IndeterminateCheckbox = React.forwardRef(
Expand All @@ -49,6 +65,7 @@ const IndeterminateCheckbox = React.forwardRef(
checked,
onChange,
title = '',
labelText = '',
}: IndeterminateCheckboxProps,
ref: React.MutableRefObject<any>,
) => {
Expand All @@ -60,20 +77,24 @@ const IndeterminateCheckbox = React.forwardRef(
}, [resolvedRef, indeterminate]);

return (
<CheckboxLabel title={title}>
{indeterminate && <IconWithColor name="checkbox-half" />}
{!indeterminate && checked && <IconWithColor name="checkbox-on" />}
{!indeterminate && !checked && <Icon name="checkbox-off" />}
<HiddenInput
className="hidden"
name={id}
id={id}
type="checkbox"
ref={resolvedRef}
checked={checked}
onChange={onChange}
/>
</CheckboxLabel>
<>
<InputContainer>
{indeterminate && <IconWithColor name="checkbox-half" />}
{!indeterminate && checked && <IconWithColor name="checkbox-on" />}
{!indeterminate && !checked && <Icon name="checkbox-off" />}
<HiddenInput
name={id}
id={id}
type="checkbox"
ref={resolvedRef}
checked={checked}
onChange={onChange}
/>
</InputContainer>
<CheckboxLabel title={title} htmlFor={id}>
{labelText}
</CheckboxLabel>
</>
);
},
);
Expand Down
Loading

0 comments on commit d006178

Please sign in to comment.