Misc ItemSelect/ItemPicker fixes

frontend/src/metabase/containers/ItemPicker.jsx

@@ -6,6 +6,8 @@ import { Flex, Box } from "grid-styled";
 import Icon from "metabase/components/Icon";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 
+import colors from "metabase/lib/colors";
+
 import { connect } from "react-redux";
 import EntityListLoader, {
   entityListLoader,
@@ -13,7 +15,7 @@ import EntityListLoader, {
 
 import Collections from "metabase/entities/collections";
 
-const COLLECTION_ICON_COLOR = "#DCE1E4";
+const COLLECTION_ICON_COLOR = colors["text-light"];
 
 const isRoot = collection => collection.id === "root" || collection.id == null;
 

frontend/src/metabase/containers/ItemSelect.jsx

@@ -10,7 +10,7 @@ const MIN_POPOVER_WIDTH = 300;
 export default (PickerComponent, NameComponent, type) =>
   class ItemSelect extends React.Component {
     state = {
-      width: null,
+      width: MIN_POPOVER_WIDTH,
     };
 
     static propTypes = {
@@ -29,9 +29,13 @@ export default (PickerComponent, NameComponent, type) =>
       inheritWidth: true,
     };
 
+    componentDidMount() {
+      this.componentDidUpdate();
+    }
+
     componentDidUpdate() {
       // save the width so we can make the poopver content match
-      const width = ReactDOM.findDOMNode(this).clientWidth;
+      const { width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
       if (this.state.width !== width) {
         this.setState({ width });
       }
@@ -60,13 +64,14 @@ export default (PickerComponent, NameComponent, type) =>
             </SelectButton>
           }
           sizeToFit
+          autoWidth
         >
           {({ onClose }) => (
             <PickerComponent
               {...props}
               style={
                 inheritWidth
-                  ? { width: this.state.width }
+                  ? { width: Math.max(this.state.width, MIN_POPOVER_WIDTH) }
                   : { minWidth: MIN_POPOVER_WIDTH }
               }
               className="p2 overflow-auto"

frontend/src/metabase/containers/QuestionSelect.jsx

-import React from "react";
-
 import ItemSelect from "./ItemSelect";
 
 import QuestionPicker from "./QuestionPicker";

frontend/src/metabase/entities/collections.js

@@ -32,10 +32,14 @@ const Collections = createEntity({
 
   selectors: {
     getExpandedCollectionsById: createSelector(
-      [state => state.entities.collections, getUser],
-      (collections, user) =>
+      [
+        state => state.entities.collections,
+        state => state.entities.collections_list[null] || [],
+        getUser,
+      ],
+      (collections, collectionsIds, user) =>
         getExpandedCollectionsById(
-          Object.values(collections),
+          collectionsIds.map(id => collections[id]),
           user && user.personal_collection_id,
         ),
     ),

frontend/src/metabase/entities/questions.js

 /* @flow */
 
-import React from "react";
 import { assocIn } from "icepick";
 
 import { createEntity, undo } from "metabase/lib/entities";

frontend/src/metabase/pulse/components/PulseEditCards.jsx

@@ -37,7 +37,6 @@ export default class PulseEditCards extends Component {
     pulseId: PropTypes.number,
     cardPreviews: PropTypes.object.isRequired,
     cards: PropTypes.object.isRequired,
-    cardList: PropTypes.array.isRequired,
     fetchPulseCardPreview: PropTypes.func.isRequired,
     setPulse: PropTypes.func.isRequired,
     attachmentsEnabled: PropTypes.bool,
@@ -150,7 +149,7 @@ export default class PulseEditCards extends Component {
   }
 
   render() {
-    let { pulse, cards, cardList, cardPreviews } = this.props;
+    let { pulse, cards, cardPreviews } = this.props;
 
     let pulseCards = pulse ? pulse.cards.slice() : [];
     if (pulseCards.length < HARD_LIMIT) {