Fix loading of questions which user has collection but not data permissions. Resolves #4200

frontend/src/metabase/app.js

@@ -53,7 +53,10 @@ function init() {
     // we shouldn't redirect these URLs because we want to handle them differently
     let WHITELIST_FORBIDDEN_URLS = [
         /api\/card\/\d+\/query$/,
-        /api\/database\/\d+\/metadata$/
+        /api\/database\/\d+\/metadata$/,
+        /api\/database\/\d+\/fields/,
+        /api\/table\/\d+\/query_metadata$/,
+        /api\/table\/\d+\/fks$/
     ];
     // received a 403 response
     api.on("403", (url) => {

frontend/src/metabase/query_builder/components/DataSelector.jsx

@@ -358,7 +358,7 @@ export default class DataSelector extends Component {
         let dbId = this.getDatabaseId();
         let tableId = this.getTableId();
         var database = _.find(databases, (db) => db.id === dbId);
-        var table = _.find(database.tables, (table) => table.id === tableId);
+        var table = _.find(database && database.tables, (table) => table.id === tableId);
 
         var content;
         if (this.props.includeTables && this.props.segments) {

frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx

@@ -373,12 +373,17 @@ export default class GuiQueryEditor extends Component {
     }
 
     componentDidUpdate() {
+        const guiBuilder = ReactDOM.findDOMNode(this.refs.guiBuilder);
+        if (!guiBuilder) {
+            return;
+        }
+
         // HACK: magic number "5" accounts for the borders between the sections?
         let contentWidth = ["data", "filter", "view", "groupedBy","sortLimit"].reduce((acc, ref) => {
             let node = ReactDOM.findDOMNode(this.refs[`${ref}Section`]);
             return acc + (node ? node.offsetWidth : 0);
         }, 0) + 5;
-        let guiBuilderWidth = ReactDOM.findDOMNode(this.refs.guiBuilder).offsetWidth;
+        let guiBuilderWidth = guiBuilder.offsetWidth;
 
         let expanded = (contentWidth < guiBuilderWidth);
         if (this.state.expanded !== expanded) {
@@ -387,8 +392,14 @@ export default class GuiQueryEditor extends Component {
     }
 
     render() {
+        const { query, databases } = this.props;
+        const readOnly = query.database != null && !_.findWhere(databases, { id: query.database });
+        if (readOnly) {
+            return <div className="border-bottom border-med" />
+        }
+
         return (
-            <div className={cx("GuiBuilder rounded shadowed", { "GuiBuilder--expand": this.state.expanded })} ref="guiBuilder">
+            <div className={cx("GuiBuilder rounded shadowed", { "GuiBuilder--expand": this.state.expanded, disabled: readOnly })} ref="guiBuilder">
                 <div className="GuiBuilder-row flex">
                     {this.renderDataSection()}
                     {this.renderFilterSection()}

frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx

@@ -100,7 +100,7 @@ export default class NativeQueryEditor extends Component {
         }
 
         if (modeInfo) {
-            if (modeInfo.database.native_permissions !== "write") {
+            if (!modeInfo.database || modeInfo.database.native_permissions !== "write") {
                 editor.setReadOnly(true);
                 editorElement.classList.add("read-only");
             } else {

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -210,7 +210,9 @@ export default class QueryBuilder extends Component {
                         { card && card.dataset_query && card.dataset_query.type === "native" ?
                             <NativeQueryEditor {...this.props} isOpen={!card.dataset_query.native.query || isDirty} />
                         :
-                            <div className="wrapper"><GuiQueryEditor {...this.props}/></div>
+                            <div className="wrapper">
+                                <GuiQueryEditor {...this.props}/>
+                            </div>
                         }
                     </div>