chore: uniform icons across list views (#10363)

* chore: uniform icons across list views * smaller modals * integrating comments
2020-07-20 19:56:51 -07:00 · 2020-07-20 19:56:51 -07:00 · 61544de6c3
parent 5fa4680447
commit 61544de6c3
11 changed files with 100 additions and 16 deletions
--- a/superset-frontend/images/icons/check.svg
+++ b/superset-frontend/images/icons/check.svg
@ -6,9 +6,9 @@
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
- 
+
    http://www.apache.org/licenses/LICENSE-2.0
- 
+
  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
@ -16,7 +16,6 @@
  specific language governing permissions and limitations
  under the License.
 -->
-<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2Z" fill="currentColor"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7191 8.79L10.4291 13.09L8.77911 11.44C8.53472 11.1546 8.15099 11.0303 7.78569 11.1182C7.42039 11.2061 7.13517 11.4913 7.0473 11.8566C6.95942 12.2219 7.08373 12.6056 7.36911 12.85L9.71911 15.21C9.90783 15.3972 10.1633 15.5015 10.4291 15.5C10.6914 15.4989 10.9428 15.3947 11.1291 15.21L16.1291 10.21C16.3184 10.0222 16.4249 9.76664 16.4249 9.5C16.4249 9.23336 16.3184 8.97777 16.1291 8.79C15.7391 8.40228 15.1091 8.40228 14.7191 8.79Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7191 8.79L10.4291 13.09L8.77911 11.44C8.53472 11.1546 8.15099 11.0303 7.78569 11.1182C7.42039 11.2061 7.13517 11.4913 7.0473 11.8566C6.95942 12.2219 7.08373 12.6056 7.36911 12.85L9.71911 15.21C9.90783 15.3972 10.1633 15.5015 10.4291 15.5C10.6914 15.4989 10.9428 15.3947 11.1291 15.21L16.1291 10.21C16.3184 10.0222 16.4249 9.76664 16.4249 9.5C16.4249 9.23336 16.3184 8.97777 16.1291 8.79C15.7391 8.40228 15.1091 8.40228 14.7191 8.79Z" fill="currentColor"/>
 </svg>
--- a/superset-frontend/images/icons/circle-check-solid.svg
+++ b/superset-frontend/images/icons/circle-check-solid.svg
@ -0,0 +1,22 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7191 8.79L10.4291 13.09L8.77911 11.44C8.53472 11.1546 8.15099 11.0303 7.78569 11.1182C7.42039 11.2061 7.13517 11.4913 7.0473 11.8566C6.95942 12.2219 7.08373 12.6056 7.36911 12.85L9.71911 15.21C9.90783 15.3972 10.1633 15.5015 10.4291 15.5C10.6914 15.4989 10.9428 15.3947 11.1291 15.21L16.1291 10.21C16.3184 10.0222 16.4249 9.76664 16.4249 9.5C16.4249 9.23336 16.3184 8.97777 16.1291 8.79C15.7391 8.40228 15.1091 8.40228 14.7191 8.79Z" fill="white"/>
+</svg>
--- a/superset-frontend/images/icons/circle-check.svg
+++ b/superset-frontend/images/icons/circle-check.svg
@ -0,0 +1,22 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7191 8.79L10.4291 13.09L8.77911 11.44C8.53472 11.1546 8.15099 11.0303 7.78569 11.1182C7.42039 11.2061 7.13517 11.4913 7.0473 11.8566C6.95942 12.2219 7.08373 12.6056 7.36911 12.85L9.71911 15.21C9.90783 15.3972 10.1633 15.5015 10.4291 15.5C10.6914 15.4989 10.9428 15.3947 11.1291 15.21L16.1291 10.21C16.3184 10.0222 16.4249 9.76664 16.4249 9.5C16.4249 9.23336 16.3184 8.97777 16.1291 8.79C15.7391 8.40228 15.1091 8.40228 14.7191 8.79Z" fill="white"/>
+</svg>
--- a/superset-frontend/images/icons/share.svg
+++ b/superset-frontend/images/icons/share.svg
@ -0,0 +1,25 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied.  See the License for the
+  specific language governing permissions and limitations
+  under the License.
+-->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon / Share">
+<g id="upload">
+<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M8.71 7.71002L11 5.41002V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V5.41002L15.29 7.71002C15.4778 7.89933 15.7334 8.00582 16 8.00582C16.2666 8.00582 16.5222 7.89933 16.71 7.71002C16.8993 7.52225 17.0058 7.26666 17.0058 7.00002C17.0058 6.73338 16.8993 6.47779 16.71 6.29002L12.71 2.29002C12.6149 2.19898 12.5028 2.12761 12.38 2.08002C12.1365 1.98 11.8635 1.98 11.62 2.08002C11.4972 2.12761 11.3851 2.19898 11.29 2.29002L7.29 6.29002C7.03634 6.54368 6.93728 6.91339 7.03012 7.2599C7.12297 7.6064 7.39362 7.87705 7.74012 7.9699C8.08663 8.06274 8.45634 7.96368 8.71 7.71002ZM21 12C20.4477 12 20 12.4477 20 13V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V13C4 12.4477 3.55228 12 3 12C2.44772 12 2 12.4477 2 13V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V13C22 12.4477 21.5523 12 21 12Z" fill="currentColor"/>
+</g>
+</g>
+</svg>
--- a/superset-frontend/spec/javascripts/views/dashboardList/DashboardList_spec.jsx
+++ b/superset-frontend/spec/javascripts/views/dashboardList/DashboardList_spec.jsx
@ -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);
  });
 });
--- a/superset-frontend/src/components/DeleteModal.tsx
+++ b/superset-frontend/src/components/DeleteModal.tsx
@ -62,6 +62,7 @@ export default function DeleteModal({
      primaryButtonType="danger"
      show={open}
      title={title}
+      bsSize="medium"
    >
      <DescriptionContainer>{description}</DescriptionContainer>
      <StyleFormGroup>
@ -69,6 +70,7 @@ export default function DeleteModal({
        <FormControl
          id="delete"
          type="text"
+          bsSize="sm"
          // @ts-ignore
          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
            setDisableChange(event.target.value !== 'DELETE')
--- a/superset-frontend/src/components/Icon.tsx
+++ b/superset-frontend/src/components/Icon.tsx
@ -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';
@ -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'
@ -42,6 +45,8 @@ type IconName =
  | 'checkbox-off'
  | 'checkbox-on'
  | 'close'
+  | 'circle-check'
+  | 'circle-check-solid'
  | 'compass'
  | 'dataset-physical'
  | 'dataset-virtual'
@ -52,6 +57,7 @@ type IconName =
  | 'sort-asc'
  | 'sort-desc'
  | 'trash'
+  | 'share'
  | 'warning';

 const iconsRegistry: Record<
@ -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,
@ -75,6 +83,7 @@ const iconsRegistry: Record<
  sort: SortIcon,
  trash: TrashIcon,
  warning: WarningIcon,
+  share: ShareIcon,
 };
 interface IconProps extends SVGProps<SVGSVGElement> {
  name: IconName;
@ -82,7 +91,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {

 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;
--- a/superset-frontend/src/components/Modal.tsx
+++ b/superset-frontend/src/components/Modal.tsx
@ -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)`
@ -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>
--- a/superset-frontend/src/messageToasts/components/Toast.tsx
+++ b/superset-frontend/src/messageToasts/components/Toast.tsx
@ -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} />
--- a/superset-frontend/src/views/chartList/ChartList.tsx
+++ b/superset-frontend/src/views/chartList/ChartList.tsx
@ -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,
@ -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>
@ -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>
--- a/superset-frontend/src/views/dashboardList/DashboardList.tsx
+++ b/superset-frontend/src/views/dashboardList/DashboardList.tsx
@ -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';

@ -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'),
@ -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>
@ -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 && (
@ -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>