Remove route.resolve feature (#4607)

* Stop using route.resolve feature (pages should load all the data themselves)

* Remove route.resolve feature

Co-authored-by: Arik Fraimovich <[email protected]>

client/app/components/ApplicationArea/Router.jsx

@@ -1,4 +1,4 @@
-import { isFunction, map, fromPairs, extend, startsWith, trimStart, trimEnd } from "lodash";
+import { isFunction, startsWith, trimStart, trimEnd } from "lodash";
 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import UniversalRouter from "universal-router";
@@ -30,18 +30,6 @@ export function stripBase(href) {
   return false;
 }
 
-function resolveRouteDependencies(route) {
-  return Promise.all(
-    map(route.resolve, (value, key) => {
-      value = isFunction(value) ? value(route.routeParams, route, location) : value;
-      return Promise.resolve(value).then(result => [key, result]);
-    })
-  ).then(results => {
-    route.routeParams = extend(route.routeParams, fromPairs(results));
-    return route;
-  });
-}
-
 export default function Router({ routes, onRouteChange }) {
   const [currentRoute, setCurrentRoute] = useState(null);
 
@@ -86,10 +74,7 @@ export default function Router({ routes, onRouteChange }) {
         router
           .resolve({ pathname })
           .then(route => {
-            return isAbandoned || currentPathRef.current !== pathname ? null : resolveRouteDependencies(route);
-          })
-          .then(route => {
-            if (route) {
+            if (!isAbandoned && currentPathRef.current === pathname) {
               setCurrentRoute({ ...route, key: generateRouteKey() });
             }
           })

client/app/pages/queries/QuerySource.jsx

@@ -21,6 +21,7 @@ import QueryVisualizationTabs from "./components/QueryVisualizationTabs";
 import QueryExecutionStatus from "./components/QueryExecutionStatus";
 import SchemaBrowser from "./components/SchemaBrowser";
 import QuerySourceAlerts from "./components/QuerySourceAlerts";
+import wrapQueryPage from "./components/wrapQueryPage";
 import QueryExecutionMetadata from "./components/QueryExecutionMetadata";
 
 import useQuery from "./hooks/useQuery";
@@ -412,21 +413,17 @@ QuerySource.propTypes = {
   query: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
 };
 
+const QuerySourcePage = wrapQueryPage(QuerySource);
+
 export default [
   routeWithUserSession({
     path: "/queries/new",
-    render: pageProps => <QuerySource {...pageProps} />,
-    resolve: {
-      query: () => Query.newQuery(),
-    },
+    render: pageProps => <QuerySourcePage {...pageProps} />,
     bodyClass: "fixed-layout",
   }),
   routeWithUserSession({
     path: "/queries/:queryId([0-9]+)/source",
-    render: pageProps => <QuerySource {...pageProps} />,
-    resolve: {
-      query: ({ queryId }) => Query.get({ id: queryId }),
-    },
+    render: pageProps => <QuerySourcePage {...pageProps} />,
     bodyClass: "fixed-layout",
   }),
 ];

client/app/pages/queries/QueryView.jsx

@@ -9,7 +9,6 @@ import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSess
 import EditInPlace from "@/components/EditInPlace";
 import Parameters from "@/components/Parameters";
 
-import { Query } from "@/services/query";
 import DataSource from "@/services/data-source";
 import { ExecutionStatus } from "@/services/query-result";
 import getQueryResultData from "@/lib/getQueryResultData";
@@ -18,6 +17,7 @@ import QueryPageHeader from "./components/QueryPageHeader";
 import QueryVisualizationTabs from "./components/QueryVisualizationTabs";
 import QueryExecutionStatus from "./components/QueryExecutionStatus";
 import QueryMetadata from "./components/QueryMetadata";
+import wrapQueryPage from "./components/wrapQueryPage";
 import QueryViewButton from "./components/QueryViewButton";
 import QueryExecutionMetadata from "./components/QueryExecutionMetadata";
 
@@ -211,10 +211,9 @@ function QueryView(props) {
 
 QueryView.propTypes = { query: PropTypes.object.isRequired }; // eslint-disable-line react/forbid-prop-types
 
+const QueryViewPage = wrapQueryPage(QueryView);
+
 export default routeWithUserSession({
   path: "/queries/:queryId([0-9]+)",
-  render: pageProps => <QueryView {...pageProps} />,
-  resolve: {
-    query: ({ queryId }) => Query.get({ id: queryId }),
-  },
+  render: pageProps => <QueryViewPage {...pageProps} />,
 });

client/app/pages/queries/components/wrapQueryPage.jsx

@@ -0,0 +1,44 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import LoadingState from "@/components/items-list/components/LoadingState";
+import { Query } from "@/services/query";
+
+export default function wrapQueryPage(WrappedComponent) {
+  function QueryPageWrapper({ queryId, onError, ...props }) {
+    const [query, setQuery] = useState(null);
+    const onErrorRef = useRef();
+    onErrorRef.current = onError;
+
+    useEffect(() => {
+      let isCancelled = false;
+      const promise = queryId ? Query.get({ id: queryId }) : Promise.resolve(Query.newQuery());
+      promise
+        .then(result => {
+          if (!isCancelled) {
+            setQuery(result);
+          }
+        })
+        .catch(error => onErrorRef.current(error));
+
+      return () => {
+        isCancelled = true;
+      };
+    }, [queryId]);
+
+    if (!query) {
+      return <LoadingState className="flex-fill" />;
+    }
+
+    return <WrappedComponent query={query} onError={onError} {...props} />;
+  }
+
+  QueryPageWrapper.propTypes = {
+    queryId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  };
+
+  QueryPageWrapper.defaultProps = {
+    queryId: null,
+  };
+
+  return QueryPageWrapper;
+}