iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: icon to icons for inderteminatecheckbox icon (#15397) 

* initial commit

* fix cypress tests

* Update superset-frontend/src/components/IndeterminateCheckbox/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
Phillip Kelley-Dotson 2021-06-29 00:32:17 -07:00 committed by GitHub
parent ed6d10e283
commit a0179ac513
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset-frontend/cypress-base/cypress/integration/chart_list/list_view.test.ts
View File

@ -51,11 +51,11 @@ describe('chart list view', () => {
it('should bulk delete correctly', () => { it('should bulk delete correctly', () => {
cy.get('[data-test="listview-table"]').should('be.visible'); cy.get('[data-test="listview-table"]').should('be.visible');
cy.get('[data-test="bulk-select"]').eq(0).click(); cy.get('[data-test="bulk-select"]').eq(0).click();
cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click(); cy.get('[aria-label="checkbox-off"]').eq(1).siblings('input').click();
cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click(); cy.get('[aria-label="checkbox-off"]').eq(2).siblings('input').click();
cy.get('[data-test="bulk-select-action"]').eq(0).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="delete-modal-input"]').eq(0).type('DELETE');
cy.get('[data-test="modal-confirm-button"]').eq(0).click(); cy.get('[data-test="modal-confirm-button"]').eq(0).click();
cy.get('[data-test="checkbox-on"]').should('not.exist'); cy.get('[aria-label="checkbox-on"]').should('not.exist');
}); });
}); });

6
superset-frontend/cypress-base/cypress/integration/dashboard_list/list_view.test.ts
View File

@ -51,11 +51,11 @@ describe('dashboard list view', () => {
it('should bulk delete correctly', () => { it('should bulk delete correctly', () => {
cy.get('[data-test="listview-table"]').should('be.visible'); cy.get('[data-test="listview-table"]').should('be.visible');
cy.get('[data-test="bulk-select"]').eq(0).click(); cy.get('[data-test="bulk-select"]').eq(0).click();
cy.get('[data-test="checkbox-off"]').eq(1).siblings('input').click(); cy.get('[aria-label="checkbox-off"]').eq(1).siblings('input').click();
cy.get('[data-test="checkbox-off"]').eq(2).siblings('input').click(); cy.get('[aria-label="checkbox-off"]').eq(2).siblings('input').click();
cy.get('[data-test="bulk-select-action"]').eq(0).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="delete-modal-input"]').eq(0).type('DELETE');
cy.get('[data-test="modal-confirm-button"]').eq(0).click(); cy.get('[data-test="modal-confirm-button"]').eq(0).click();
cy.get('[data-test="checkbox-on"]').should('not.exist'); cy.get('[aria-label="checkbox-on"]').should('not.exist');
}); });
}); });

22
superset-frontend/src/components/IndeterminateCheckbox/index.tsx
View File

@ -18,7 +18,7 @@
*/ */
import React from 'react'; import React from 'react';
import { styled } from '@superset-ui/core'; import { styled } from '@superset-ui/core';
import Icon from 'src/components/Icon'; import Icons from 'src/components/Icons';
export interface IndeterminateCheckboxProps { export interface IndeterminateCheckboxProps {
indeterminate: boolean; indeterminate: boolean;
@ -35,8 +35,18 @@ const CheckboxLabel = styled.label`
margin-bottom: 0; margin-bottom: 0;
`; `;
const IconWithColor = styled(Icon)` const CheckboxHalf = styled(Icons.CheckboxHalf)`
color: ${({ theme }) => theme.colors.primary.dark1}; color: ${({ theme }) => theme.colors.primary.base};
cursor: pointer;
`;
const CheckboxOff = styled(Icons.CheckboxOff)`
color: ${({ theme }) => theme.colors.grayscale.base};
cursor: pointer;
`;
const CheckboxOn = styled(Icons.CheckboxOn)`
color: ${({ theme }) => theme.colors.primary.base};
cursor: pointer; cursor: pointer;
`; `;
@ -79,9 +89,9 @@ const IndeterminateCheckbox = React.forwardRef(
return ( return (
<> <>
<InputContainer> <InputContainer>
{indeterminate && <IconWithColor name="checkbox-half" />} {indeterminate && <CheckboxHalf />}
{!indeterminate && checked && <IconWithColor name="checkbox-on" />} {!indeterminate && checked && <CheckboxOn />}
{!indeterminate && !checked && <Icon name="checkbox-off" />} {!indeterminate && !checked && <CheckboxOff />}
<HiddenInput <HiddenInput
name={id} name={id}
id={id} id={id}