Refactored out duplicates of shared components

frontend/src/metabase/components/EmptyState.jsx

@@ -18,7 +18,7 @@ const EmptyState = ({ title, message, icon, image, action, link }) =>
         }
         <h3 className={S.emptyStateMessage}>{message}</h3>
         { action &&
-            <Link className="Button Button--primary Button--large mt2" to={link}>{action}</Link>
+            <Link className="Button Button--primary mt3" to={link}>{action}</Link>
         }
     </div>
 

frontend/src/metabase/components/Item.jsx

@@ -9,7 +9,7 @@ import cx from "classnames";
 import pure from "recompose/pure";
 
 //TODO: extend this to support functionality required for questions
-const Item = ({ id, name, description, placeholder, url, icon, isEditing, field }) =>
+const Item = ({ name, description, placeholder, url, icon, isEditing, field }) =>
     <div className={cx(S.item)}>
         <div className={S.leftIcons}>
             { icon && <Icon className={S.chartIcon} name={icon} width={40} height={40} /> }
@@ -39,7 +39,6 @@ const Item = ({ id, name, description, placeholder, url, icon, isEditing, field
     </div>
 
 Item.propTypes = {
-    id:                 PropTypes.string.isRequired,
     name:               PropTypes.string.isRequired,
     url:                PropTypes.string,
     description:        PropTypes.string,

frontend/src/metabase/questions/components/EmptyState.jsx

-import React, { PropTypes } from "react";
-import Icon from "metabase/components/Icon.jsx";
-
-const EmptyState = ({ message, icon }) =>
-  <div className="text-centered mt4 text-brand-light">
-    <Icon name={icon} width={40} height={40} />
-    <h2 className="text-brand-light mt4">{message}</h2>
-  </div>
-
-EmptyState.propTypes = {
-    message:    PropTypes.string.isRequired,
-    icon:       PropTypes.string.isRequired,
-};
-
-export default EmptyState;

frontend/src/metabase/questions/components/LabelIcon.css

-
-:local(.colorIcon) {
-    composes: inline-block from "style";
-    width: 18px;
-    height: 18px;
-    border-radius: 3px;
-}
-
-:local(.emojiIcon) {
-    composes: text-centered from "style";
-    font-size: 20px;
-}
-
-:local(.icon) {
-    composes: transition-color from "style";
-    color: currentColor;
-}

frontend/src/metabase/questions/components/LabelIcon.jsx

-/* eslint "react/prop-types": "warn" */
-import React, { Component, PropTypes } from "react";
-
-import S from "./LabelIcon.css";
-
-import Icon from "metabase/components/Icon.jsx";
-import EmojiIcon from "./EmojiIcon.jsx";
-import cx from "classnames";
-
-const LabelIcon = ({ icon = "", size = 18, className, style }) =>
-    icon.charAt(0) === ":" ?
-        <EmojiIcon className={cx(S.icon, S.emojiIcon, className)} name={icon} size={size} style={style} />
-    : icon.charAt(0) === "#" ?
-        <span className={cx(S.icon, S.colorIcon, className)} style={{ backgroundColor: icon, width: size, height: size }}></span>
-    :
-        <Icon className={cx(S.icon, className)} name={icon} />
-
-LabelIcon.propTypes = {
-    className:  PropTypes.string,
-    style:      PropTypes.object,
-    icon:       PropTypes.string,
-    size:       PropTypes.number,
-};
-
-export default LabelIcon;

frontend/src/metabase/questions/components/LabelIconPicker.jsx

@@ -4,6 +4,7 @@ import React, { Component, PropTypes } from "react";
 import S from "./LabelIconPicker.css";
 
 import Icon from "metabase/components/Icon.jsx";
+import LabelIcon from "metabase/components/LabelIcon.jsx";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
 
 import { VirtualScroll } from "react-virtualized";
@@ -12,8 +13,6 @@ import "react-virtualized/styles.css";
 import * as colors from "metabase/lib/colors";
 import { categories } from "metabase/lib/emoji";
 
-import LabelIcon from "./LabelIcon.jsx";
-
 const ROW_HEIGHT = 45;
 const VISIBLE_ROWS = 6;
 const HEIGHT = VISIBLE_ROWS * ROW_HEIGHT;

frontend/src/metabase/questions/components/LabelPicker.jsx

@@ -2,7 +2,7 @@
 import React, { Component, PropTypes } from "react";
 import S from "./LabelPicker.css";
 
-import LabelIcon from "./LabelIcon.jsx";
+import LabelIcon from "metabase/components/LabelIcon.jsx";
 import Icon from "metabase/components/Icon.jsx";
 
 import cx from "classnames";

frontend/src/metabase/questions/components/Sidebar.jsx

@@ -4,10 +4,9 @@ import { Link } from "react-router";
 import S from "./Sidebar.css";
 
 import Icon from "metabase/components/Icon.jsx";
+import LabelIcon from "metabase/components/LabelIcon.jsx";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
 
-import LabelIcon from "./LabelIcon.jsx";
-
 import cx from 'classnames';
 import { pure } from "recompose";
 

frontend/src/metabase/questions/containers/EditLabels.jsx

@@ -29,8 +29,8 @@ import Icon from "metabase/components/Icon.jsx";
 
 // import LabelEditor from "../components/LabelEditor.jsx";
 import LabelEditorForm from "./LabelEditorForm.jsx";
-import LabelIcon from "../components/LabelIcon.jsx";
-import EmptyState from "../components/EmptyState.jsx";
+import LabelIcon from "metabase/components/LabelIcon.jsx";
+import EmptyState from "metabase/components/EmptyState.jsx";
 
 @connect(mapStateToProps, mapDispatchToProps)
 export default class EditLabels extends Component {

frontend/src/metabase/questions/containers/EntityList.jsx

@@ -8,7 +8,7 @@ import S from "../components/List.css";
 import List from "../components/List.jsx";
 import SearchHeader from "../components/SearchHeader.jsx";
 import ActionHeader from "../components/ActionHeader.jsx";
-import EmptyState from "../components/EmptyState.jsx";
+import EmptyState from "metabase/components/EmptyState.jsx";
 import UndoListing from "./UndoListing.jsx";
 
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";

frontend/src/metabase/reference/containers/ReferenceApp.jsx

@@ -98,7 +98,7 @@ export default class ReferenceApp extends Component {
         return (
             <div>
                 <SidebarLayout
-                    style={ isEditing && { paddingTop: '40px' }}
+                    style={ isEditing ? { paddingTop: '40px' } : {}}
                     sidebar={<Sidebar sections={sections} breadcrumbs={breadcrumbs} />}
                 >
                     {children}