Fix #4668 (#6191)

* only show collection options if there are collections

* clean up render method

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

@@ -10,13 +10,83 @@ import EntityList from "./EntityList";
 import ExpandingSearchField from "../components/ExpandingSearchField.jsx";
 
 export default class AddToDashboard extends Component {
-    constructor(props, context) {
-        super(props, context);
 
-        this.state = {
-            collection: null,
-            query: null
-        }
+    state = {
+        collection: null,
+        query: null
+    }
+
+    renderQuestionList = () => {
+        return (
+            <EntityList
+                entityType="cards"
+                entityQuery={this.state.query}
+                editable={false}
+                showSearchWidget={false}
+                onEntityClick={this.props.onAdd}
+            />
+        )
+    }
+
+    renderCollections = () => {
+        return (
+            <Collections>
+                { collections =>
+                    <div>
+                        {
+                        /*
+                            only show the collections list if there are actually collections
+                            fixes #4668
+                        */
+                        collections.length > 0
+                            ? (
+                                <ol>
+                                    { collections.map((collection, index) =>
+                                        <li
+                                            className="text-brand-hover flex align-center border-bottom cursor-pointer py1 md-py2"
+                                            key={index}
+                                            onClick={() => this.setState({
+                                                collection: collection,
+                                                query: { collection: collection.slug }
+                                            })}
+                                        >
+                                            <Icon
+                                                className="mr2"
+                                                name="all"
+                                                style={{ color: collection.color }}
+                                            />
+                                            <h3>{collection.name}</h3>
+                                            <Icon
+                                                className="ml-auto"
+                                                name="chevronright"
+                                            />
+                                        </li>
+                                    )}
+                                    <li
+                                        className="text-brand-hover flex align-center border-bottom cursor-pointer py1 md-py2"
+                                        onClick={() => this.setState({
+                                            collection: { name: "Everything else" },
+                                            query: { collection: "" }
+                                        })}
+                                    >
+                                        <Icon
+                                            className="mr2"
+                                            name="everything"
+                                        />
+                                        <h3>Everything else</h3>
+                                        <Icon
+                                            className="ml-auto"
+                                            name="chevronright"
+                                        />
+                                    </li>
+                                </ol>
+                            )
+                            : this.renderQuestionList()
+                        }
+                    </div>
+                }
+            </Collections>
+        )
     }
 
     render() {
@@ -56,59 +126,11 @@ export default class AddToDashboard extends Component {
                     }
                     </div>
                 </div>
-                { this.state.query ?
-                    <EntityList
-                        entityType="cards"
-                        entityQuery={this.state.query}
-                        editable={false}
-                        showSearchWidget={false}
-                        onEntityClick={this.props.onAdd}
-                    />
-                :
-                    <Collections>
-                        { collections =>
-                            <ol>
-                                { collections.map((collection, index) =>
-                                    <li
-                                        className="text-brand-hover flex align-center border-bottom cursor-pointer py1 md-py2"
-                                        key={index}
-                                        onClick={() => this.setState({
-                                            collection: collection,
-                                            query: { collection: collection.slug }
-                                        })}
-                                    >
-                                        <Icon
-                                            className="mr2"
-                                            name="all"
-                                            style={{ color: collection.color }}
-                                        />
-                                        <h3>{collection.name}</h3>
-                                        <Icon
-                                            className="ml-auto"
-                                            name="chevronright"
-                                        />
-                                    </li>
-                                )}
-                                <li
-                                    className="text-brand-hover flex align-center border-bottom cursor-pointer py1 md-py2"
-                                    onClick={() => this.setState({
-                                        collection: { name: "Everything else" },
-                                        query: { collection: "" }
-                                    })}
-                                >
-                                        <Icon
-                                            className="mr2"
-                                            name="everything"
-                                        />
-                                        <h3>Everything else</h3>
-                                        <Icon
-                                            className="ml-auto"
-                                            name="chevronright"
-                                        />
-                                </li>
-                            </ol>
-                        }
-                    </Collections>
+                { query
+                    // a search term has been entered so show the questions list
+                    ? this.renderQuestionList()
+                    // show the collections list
+                    : this.renderCollections()
                 }
             </ModalContent>
         );