Refine routes definitions (#4579)

* Refine routes definitions

* Replace HoC wrappers with functions to create route definition

* Some updates for code consistency

* ItemsList component: remove currentRoute dependency

* Prepare route parametes in wrapper functions

Author: kravets-levko

client/app/components/ApplicationArea/AuthenticatedPageWrapper.jsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState, useContext } from "react";
+import PropTypes from "prop-types";
+import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import { Auth } from "@/services/auth";
+
+// This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
+// that contains:
+// - `currentRoute.routeParams`
+// - `pageTitle` field which is equal to `currentRoute.title`
+// - `onError` field which is a `handleError` method of nearest error boundary
+// - `apiKey` field
+
+function ApiKeySessionWrapper({ apiKey, currentRoute, renderChildren }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const { handleError } = useContext(ErrorBoundaryContext);
+
+  useEffect(() => {
+    let isCancelled = false;
+    Auth.setApiKey(apiKey);
+    Auth.loadConfig()
+      .then(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(true);
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(false);
+        }
+      });
+    return () => {
+      isCancelled = true;
+    };
+  }, [apiKey]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <React.Fragment key={currentRoute.key}>
+      {renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError, apiKey })}
+    </React.Fragment>
+  );
+}
+
+ApiKeySessionWrapper.propTypes = {
+  apiKey: PropTypes.string.isRequired,
+  renderChildren: PropTypes.func,
+};
+
+ApiKeySessionWrapper.defaultProps = {
+  renderChildren: () => null,
+};
+
+export default function routeWithApiKeySession({ render, getApiKey, ...rest }) {
+  return {
+    ...rest,
+    render: currentRoute => (
+      <ApiKeySessionWrapper apiKey={getApiKey(currentRoute)} currentRoute={currentRoute} renderChildren={render} />
+    ),
+  };
+}

client/app/components/ApplicationArea/SignedOutPageWrapper.jsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import ErrorBoundary, { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import { Auth } from "@/services/auth";
+import organizationStatus from "@/services/organizationStatus";
+import ApplicationHeader from "./ApplicationHeader";
+import ErrorMessage from "./ErrorMessage";
+
+// This wrapper modifies `route.render` function and instead of passing `currentRoute` passes an object
+// that contains:
+// - `currentRoute.routeParams`
+// - `pageTitle` field which is equal to `currentRoute.title`
+// - `onError` field which is a `handleError` method of nearest error boundary
+
+function UserSessionWrapper({ bodyClass, currentRoute, renderChildren }) {
+  const [isAuthenticated, setIsAuthenticated] = useState(!!Auth.isAuthenticated());
+
+  useEffect(() => {
+    let isCancelled = false;
+    Promise.all([Auth.requireSession(), organizationStatus.refresh()])
+      .then(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(!!Auth.isAuthenticated());
+        }
+      })
+      .catch(() => {
+        if (!isCancelled) {
+          setIsAuthenticated(false);
+        }
+      });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (bodyClass) {
+      document.body.classList.toggle(bodyClass, true);
+      return () => {
+        document.body.classList.toggle(bodyClass, false);
+      };
+    }
+  }, [bodyClass]);
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <ApplicationHeader />
+      <React.Fragment key={currentRoute.key}>
+        <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
+          <ErrorBoundaryContext.Consumer>
+            {({ handleError }) =>
+              renderChildren({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
+            }
+          </ErrorBoundaryContext.Consumer>
+        </ErrorBoundary>
+      </React.Fragment>
+    </React.Fragment>
+  );
+}
+
+UserSessionWrapper.propTypes = {
+  bodyClass: PropTypes.string,
+  renderChildren: PropTypes.func,
+};
+
+UserSessionWrapper.defaultProps = {
+  bodyClass: null,
+  renderChildren: () => null,
+};
+
+export default function routeWithUserSession({ render, bodyClass, ...rest }) {
+  return {
+    ...rest,
+    render: currentRoute => (
+      <UserSessionWrapper bodyClass={bodyClass} currentRoute={currentRoute} renderChildren={render} />
+    ),
+  };
+}

client/app/components/ApplicationArea/routeWithApiKeySession.jsx

@@ -8,7 +8,10 @@ const logger = debug("redash:errors");
 
 export const ErrorBoundaryContext = React.createContext({
   handleError: error => {
-    throw error;
+    // Allow calling chain to roll up, and then throw the error in global context
+    setTimeout(() => {
+      throw error;
+    });
   },
   reset: () => {},
 });

client/app/components/ApplicationArea/routeWithUserSession.jsx

@@ -5,7 +5,7 @@ import hoistNonReactStatics from "hoist-non-react-statics";
 import { clientConfig } from "@/services/auth";
 
 export const ControllerType = PropTypes.shape({
-  // values of props declared by wrapped component, current route's locals (`resolve: { ... }`) and title
+  // values of props declared by wrapped component and some additional props from items list
   params: PropTypes.object.isRequired,
 
   isLoaded: PropTypes.bool.isRequired,
@@ -38,13 +38,11 @@ export const ControllerType = PropTypes.shape({
 export function wrap(WrappedComponent, createItemsSource, createStateStorage) {
   class ItemsListWrapper extends React.Component {
     static propTypes = {
-      ...omit(WrappedComponent.propTypes, ["controller"]),
       onError: PropTypes.func,
       children: PropTypes.node,
     };
 
     static defaultProps = {
-      ...omit(WrappedComponent.defaultProps, ["controller"]),
       onError: error => {
         // Allow calling chain to roll up, and then throw the error in global context
         setTimeout(() => {
@@ -102,20 +100,13 @@ export function wrap(WrappedComponent, createItemsSource, createStateStorage) {
 
     // eslint-disable-next-line class-methods-use-this
     getState({ isLoaded, totalCount, pageItems, params, ...rest }) {
-      params = {
-        // Custom params from items source
-        ...params,
-
-        title: this.props.currentRoute.title,
-        ...this.props.routeParams,
-
-        // Add to params all props except of own ones
-        ...omit(this.props, ["onError", "children", "currentRoute", "routeParams"]),
-      };
       return {
         ...rest,
 
-        params,
+        params: {
+          ...params, // custom params from items source
+          ...omit(this.props, ["onError", "children"]), // add all props except of own ones
+        },
 
         isLoaded,
         isEmpty: !isLoaded || totalCount === 0,
@@ -128,8 +119,11 @@ export function wrap(WrappedComponent, createItemsSource, createStateStorage) {
     render() {
       // don't pass own props to wrapped component
       const { children, onError, ...props } = this.props;
-      props.controller = this.state;
-      return <WrappedComponent {...props}>{children}</WrappedComponent>;
+      return (
+        <WrappedComponent {...props} controller={this.state}>
+          {children}
+        </WrappedComponent>
+      );
     }
   }
 

client/app/components/ErrorBoundary.jsx

@@ -5,9 +5,8 @@ import { axios } from "@/services/axios";
 import Alert from "antd/lib/alert";
 import Tabs from "antd/lib/tabs";
 import * as Grid from "antd/lib/grid";
-import AuthenticatedPageWrapper from "@/components/ApplicationArea/AuthenticatedPageWrapper";
+import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import Layout from "@/components/admin/Layout";
-import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
 import { CounterCard, WorkersTable, QueuesTable, OtherJobsTable } from "@/components/admin/RQStatus";
 
 import location from "@/services/location";
@@ -121,14 +120,8 @@ class Jobs extends React.Component {
   }
 }
 
-export default {
+export default routeWithUserSession({
   path: "/admin/queries/jobs",
   title: "RQ Status",
-  render: currentRoute => (
-    <AuthenticatedPageWrapper key={currentRoute.key}>
-      <ErrorBoundaryContext.Consumer>
-        {({ handleError }) => <Jobs {...currentRoute.routeParams} onError={handleError} />}
-      </ErrorBoundaryContext.Consumer>
-    </AuthenticatedPageWrapper>
-  ),
-};
+  render: pageProps => <Jobs {...pageProps} />,
+});

client/app/components/items-list/ItemsList.jsx

@@ -4,13 +4,12 @@ import { axios } from "@/services/axios";
 
 import Switch from "antd/lib/switch";
 import * as Grid from "antd/lib/grid";
-import AuthenticatedPageWrapper from "@/components/ApplicationArea/AuthenticatedPageWrapper";
+import routeWithUserSession from "@/components/ApplicationArea/routeWithUserSession";
 import Paginator from "@/components/Paginator";
 import { QueryTagsControl } from "@/components/tags-control/TagsControl";
 import SchedulePhrase from "@/components/queries/SchedulePhrase";
 import TimeAgo from "@/components/TimeAgo";
 import Layout from "@/components/admin/Layout";
-import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
 
 import { wrap as itemsList, ControllerType } from "@/components/items-list/ItemsList";
 import { ItemsSource } from "@/components/items-list/classes/ItemsSource";
@@ -170,20 +169,8 @@ const OutdatedQueriesPage = itemsList(
   () => new StateStorage({ orderByField: "created_at", orderByReverse: true })
 );
 
-export default {
+export default routeWithUserSession({
   path: "/admin/queries/outdated",
   title: "Outdated Queries",
-  render: currentRoute => (
-    <AuthenticatedPageWrapper key={currentRoute.key}>
-      <ErrorBoundaryContext.Consumer>
-        {({ handleError }) => (
-          <OutdatedQueriesPage
-            routeParams={{ ...currentRoute.routeParams, currentPage: "outdated_queries" }}
-            currentRoute={currentRoute}
-            onError={handleError}
-          />
-        )}
-      </ErrorBoundaryContext.Consumer>
-    </AuthenticatedPageWrapper>
-  ),
-};
+  render: pageProps => <OutdatedQueriesPage {...pageProps} currentPage="outdated_queries" />,
+});