Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: uniform icons across list views #10363

Merged
merged 3 commits into from
Jul 21, 2020
Merged

chore: uniform icons across list views #10363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7d46c34
chore: uniform icons across list views
mistercrunch Jul 19, 2020
79d33f5
smaller modals
mistercrunch Jul 19, 2020
bb6e2d9
integrating comments
mistercrunch Jul 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions superset-frontend/images/icons/check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions superset-frontend/images/icons/circle-check-solid.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions superset-frontend/images/icons/circle-check.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions superset-frontend/images/icons/share.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions superset-frontend/spec/javascripts/views/dashboardList/DashboardList_spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,7 @@ describe('DashboardList', () => {
});
it('edits', () => {
expect(wrapper.find(PropertiesModal)).toHaveLength(0);

wrapper.find('.fa-pencil').first().simulate('click');
wrapper.find('[data-test="pencil"]').first().simulate('click');
expect(wrapper.find(PropertiesModal)).toHaveLength(1);
});
});
2 changes: 2 additions & 0 deletions superset-frontend/src/components/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,15 @@ export default function DeleteModal({
primaryButtonType="danger"
show={open}
title={title}
bsSize="medium"
Copy link
Member Author

@mistercrunch mistercrunch Jul 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bycatch

after

Screen Shot 2020-07-20 at 5 14 43 PM

before

Screen Shot 2020-07-20 at 5 14 11 PM

>
<DescriptionContainer>{description}</DescriptionContainer>
<StyleFormGroup>
<label htmlFor="delete">{t('type delete to confirm')}</label>
<FormControl
id="delete"
type="text"
bsSize="sm"
// @ts-ignore
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setDisableChange(event.target.value !== 'DELETE')
Expand Down
11 changes: 10 additions & 1 deletion superset-frontend/src/components/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
import React, { SVGProps } from 'react';
import { ReactComponent as CancelXIcon } from 'images/icons/cancel-x.svg';
import { ReactComponent as CheckIcon } from 'images/icons/check.svg';
import { ReactComponent as CircleCheckIcon } from 'images/icons/circle-check.svg';
import { ReactComponent as CircleCheckSolidIcon } from 'images/icons/circle-check-solid.svg';
import { ReactComponent as CheckboxHalfIcon } from 'images/icons/checkbox-half.svg';
import { ReactComponent as CheckboxOffIcon } from 'images/icons/checkbox-off.svg';
import { ReactComponent as CheckboxOnIcon } from 'images/icons/checkbox-on.svg';
Expand All @@ -34,6 +36,7 @@ import { ReactComponent as SortDescIcon } from 'images/icons/sort-desc.svg';
import { ReactComponent as SortIcon } from 'images/icons/sort.svg';
import { ReactComponent as TrashIcon } from 'images/icons/trash.svg';
import { ReactComponent as WarningIcon } from 'images/icons/warning.svg';
import { ReactComponent as ShareIcon } from 'images/icons/share.svg';

type IconName =
| 'cancel-x'
Expand All @@ -42,6 +45,8 @@ type IconName =
| 'checkbox-off'
| 'checkbox-on'
| 'close'
| 'circle-check'
| 'circle-check-solid'
| 'compass'
| 'dataset-physical'
| 'dataset-virtual'
Expand All @@ -52,6 +57,7 @@ type IconName =
| 'sort-asc'
| 'sort-desc'
| 'trash'
| 'share'
| 'warning';

const iconsRegistry: Record<
Expand All @@ -62,6 +68,8 @@ const iconsRegistry: Record<
'checkbox-half': CheckboxHalfIcon,
'checkbox-off': CheckboxOffIcon,
'checkbox-on': CheckboxOnIcon,
'circle-check': CircleCheckIcon,
'circle-check-solid': CircleCheckSolidIcon,
'dataset-physical': DatasetPhysicalIcon,
'dataset-virtual': DatasetVirtualIcon,
'sort-asc': SortAscIcon,
Expand All @@ -75,14 +83,15 @@ const iconsRegistry: Record<
sort: SortIcon,
trash: TrashIcon,
warning: WarningIcon,
share: ShareIcon,
};
interface IconProps extends SVGProps<SVGSVGElement> {
name: IconName;
}

const Icon = ({ name, color = '#666666', ...rest }: IconProps) => {
const Component = iconsRegistry[name];
return <Component color={color} {...rest} />;
return <Component color={color} data-test={name} {...rest} />;
};

export default Icon;
4 changes: 3 additions & 1 deletion superset-frontend/src/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ interface ModalProps {
primaryButtonType?: 'primary' | 'danger';
show: boolean;
title: React.ReactNode;
bsSize?: 'xs' | 'xsmall' | 'sm' | 'small' | 'medium' | 'lg' | 'large';
}

const StyledModal = styled(BaseModal)`
Expand Down Expand Up @@ -74,9 +75,10 @@ export default function Modal({
primaryButtonType = 'primary',
show,
title,
bsSize = 'lg',
}: ModalProps) {
return (
<StyledModal show={show} onHide={onHide} bsSize="lg">
<StyledModal show={show} onHide={onHide} bsSize={bsSize}>
<BaseModal.Header closeButton>
<BaseModal.Title>
<Title>{title}</Title>
Expand Down
4 changes: 3 additions & 1 deletion superset-frontend/src/messageToasts/components/Toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
)}
>
<ToastContianer>
{toast.toastType === SUCCESS_TOAST && <Icon name="check" />}
{toast.toastType === SUCCESS_TOAST && (
<Icon name="circle-check-solid" />
)}
{toast.toastType === WARNING_TOAST ||
(toast.toastType === DANGER_TOAST && <Icon name="error" />)}
<Interweave content={toast.text} />
Expand Down
5 changes: 3 additions & 2 deletions superset-frontend/src/views/chartList/ChartList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import rison from 'rison';
import { Panel } from 'react-bootstrap';
import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
import SubMenu from 'src/components/Menu/SubMenu';
import Icon from 'src/components/Icon';
import ListView, { ListViewProps } from 'src/components/ListView/ListView';
import {
FetchDataConfig,
Expand Down Expand Up @@ -203,7 +204,7 @@ class ChartList extends React.PureComponent<Props, State> {
className="action-button"
onClick={confirmDelete}
>
<i className="fa fa-trash" />
<Icon name="trash" />
</span>
)}
</ConfirmStatusChange>
Expand All @@ -215,7 +216,7 @@ class ChartList extends React.PureComponent<Props, State> {
className="action-button"
onClick={openEditModal}
>
<i className="fa fa-pencil" />
<Icon name="pencil" />
</span>
)}
</span>
Expand Down
9 changes: 5 additions & 4 deletions superset-frontend/src/views/dashboardList/DashboardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
Filters,
} from 'src/components/ListView/types';
import withToasts from 'src/messageToasts/enhancers/withToasts';
import Icon from 'src/components/Icon';
import PropertiesModal from 'src/dashboard/components/PropertiesModal';
import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';

Expand Down Expand Up @@ -173,7 +174,7 @@ class DashboardList extends React.PureComponent<Props, State> {
},
}: any) => (
<span className="no-wrap">
{published ? <i className="fa fa-check" /> : ''}
{published ? <Icon name="check" /> : ''}
</span>
),
Header: t('Published'),
Expand Down Expand Up @@ -221,7 +222,7 @@ class DashboardList extends React.PureComponent<Props, State> {
className="action-button"
onClick={confirmDelete}
>
<i className="fa fa-trash" />
<Icon name="trash" />
</span>
)}
</ConfirmStatusChange>
Expand All @@ -233,7 +234,7 @@ class DashboardList extends React.PureComponent<Props, State> {
className="action-button"
onClick={handleExport}
>
<i className="fa fa-database" />
<Icon name="share" />
</span>
)}
{this.canEdit && (
Expand All @@ -243,7 +244,7 @@ class DashboardList extends React.PureComponent<Props, State> {
className="action-button"
onClick={handleEdit}
>
<i className="fa fa-pencil" />
<Icon name="pencil" />
</span>
)}
</span>
Expand Down