Loading/error states for questions listing

frontend/src/questions/components/ActionHeader.jsx

@@ -9,9 +9,9 @@ import LabelPopover from "../containers/LabelPopover.jsx";
 
 import cx from "classnames";
 
-const ActionHeader = ({ selectedCount, allAreSelected, sectionIsArchive, setAllSelected, setArchived, labels }) =>
+const ActionHeader = ({ visibleCount, selectedCount, allAreSelected, sectionIsArchive, setAllSelected, setArchived, labels }) =>
     <div className={S.actionHeader}>
-        <Tooltip tooltip="Select all" isEnabled={!allAreSelected}>
+        <Tooltip tooltip={"Select all " + visibleCount} isEnabled={!allAreSelected}>
             <StackedCheckBox
                 checked={allAreSelected}
                 onChange={(e) => setAllSelected(e.target.checked)}

frontend/src/questions/containers/EntityList.jsx

@@ -8,13 +8,23 @@ import SearchHeader from "../components/SearchHeader.jsx";
 import ActionHeader from "../components/ActionHeader.jsx";
 import UndoListing from "./UndoListing.jsx";
 
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.jsx";
+
 import { setSearchText, setItemSelected, setAllSelected, setArchived } from "../questions";
-import { getSearchText, getEntityType, getEntityIds, getSectionName, getVisibleCount, getSelectedCount, getAllAreSelected, getSectionIsArchive, getLabelsWithSelectedState } from "../selectors";
+import {
+    getEntityType, getEntityIds,
+    getSectionName, getSectionLoading, getSectionError,
+    getSearchText,
+    getVisibleCount, getSelectedCount, getAllAreSelected, getSectionIsArchive,
+    getLabelsWithSelectedState
+} from "../selectors";
 
 const mapStateToProps = (state, props) => {
   return {
       entityType:       getEntityType(state),
       entityIds:        getEntityIds(state),
+      loading:          getSectionLoading(state),
+      error:            getSectionError(state),
 
       searchText:       getSearchText(state),
 
@@ -22,7 +32,7 @@ const mapStateToProps = (state, props) => {
       visibleCount:     getVisibleCount(state),
       selectedCount:    getSelectedCount(state),
       allAreSelected:   getAllAreSelected(state),
-      sectionIsArchive:        getSectionIsArchive(state),
+      sectionIsArchive: getSectionIsArchive(state),
 
       labels:           getLabelsWithSelectedState(state)
   }
@@ -38,7 +48,14 @@ const mapDispatchToProps = {
 @connect(mapStateToProps, mapDispatchToProps)
 export default class EntityList extends Component {
     render() {
-        const { style, name, visibleCount, selectedCount, allAreSelected, sectionIsArchive, labels, searchText, setSearchText, entityType, entityIds, setItemSelected, setAllSelected, setArchived } = this.props;
+        const {
+            style,
+            name, loading, error,
+            entityType, entityIds,
+            searchText, setSearchText,
+            visibleCount, selectedCount, allAreSelected, sectionIsArchive, labels,
+            setItemSelected, setAllSelected, setArchived
+        } = this.props;
         return (
             <div style={style} className={S.list}>
                 <div className={S.header}>
@@ -57,7 +74,11 @@ export default class EntityList extends Component {
                 :
                     <SearchHeader searchText={searchText} setSearchText={setSearchText} />
                 }
-                <List entityType={entityType} entityIds={entityIds} setItemSelected={setItemSelected} />
+                <LoadingAndErrorWrapper loading={!error && loading} error={error}>
+                { () =>
+                    <List entityType={entityType} entityIds={entityIds} setItemSelected={setItemSelected} />
+                }
+                </LoadingAndErrorWrapper>
                 <UndoListing />
             </div>
         );

frontend/src/questions/questions.js

@@ -155,7 +155,6 @@ const initialState = {
 
 export default function(state = initialState, { type, payload, error }) {
     if (payload && payload.entities) {
-        // FIXME: deep merge
         state = i.assoc(state, "entities", i.merge(state.entities, payload.entities));
     }
 
@@ -167,12 +166,16 @@ export default function(state = initialState, { type, payload, error }) {
         case SET_ALL_SELECTED:
             return { ...state, selectedIds: {}, allSelected: payload };
         case SELECT_SECTION:
-            return {
-                ...state,
-                type: payload.type,
-                section: payload.section,
-                itemsBySection: i.assocIn(state.itemsBySection, [payload.type, payload.section], payload.result)
-            };
+            if (error) {
+                return i.assoc(state, "sectionError", payload);
+            } else {
+                return (i.chain(state)
+                    .assoc("type", payload.type)
+                    .assoc("section", payload.section)
+                    .assoc("sectionError", null)
+                    .assocIn(["itemsBySection", payload.type, payload.section, "items"], payload.result)
+                    .value());
+            }
         case SET_FAVORITED:
             if (error) {
                 return state;
@@ -229,17 +232,17 @@ export default function(state = initialState, { type, payload, error }) {
 }
 
 function addToSection(state, type, section, id) {
-    let items = i.getIn(state, ["itemsBySection", type, section]);
+    let items = i.getIn(state, ["itemsBySection", type, section, "items"]);
     if (items && !_.contains(items, id)) {
-        return i.setIn(state, ["itemsBySection", type, section], items.concat(id));
+        return i.setIn(state, ["itemsBySection", type, section, "items"], items.concat(id));
     }
     return state;
 }
 
 function removeFromSection(state, type, section, id) {
-    let items = i.getIn(state, ["itemsBySection", type, section]);
+    let items = i.getIn(state, ["itemsBySection", type, section, "items"]);
     if (items && _.contains(items, id)) {
-        return i.setIn(state, ["itemsBySection", type, section], items.filter(i => i !== id));
+        return i.setIn(state, ["itemsBySection", type, section, "items"], items.filter(i => i !== id));
     }
     return state;
 }

frontend/src/questions/selectors.js

@@ -19,10 +19,25 @@ export const getSearchText          = (state) => state.questions.searchText;
 export const getSelectedIds         = (state) => state.questions.selectedIds;
 export const getAllSelected         = (state) => state.questions.allSelected
 
-export const getEntityIds = createSelector(
+const getSectionData = createSelector(
     [getItemsBySection, getEntityType, getSection],
     (itemsBySection, type, section) =>
-        i.getIn(itemsBySection, [type, section]) || []
+        i.getIn(itemsBySection, [type, section])
+);
+
+export const getSectionLoading = createSelector(
+    [getSectionData],
+    (sectionData) =>
+        !(sectionData && sectionData.items)
+);
+
+export const getSectionError = (state) =>
+    !!state.questions.sectionError;
+
+export const getEntityIds = createSelector(
+    [getSectionData],
+    (sectionData) =>
+        sectionData && sectionData.items || []
 );
 
 const getEntity = (state, props) =>