Refine routes definitions

client/app/components/ApplicationArea/withApiKeySession.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState, useContext } from "react";
+import PropTypes from "prop-types";
+import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
+import { Auth } from "@/services/auth";
+
+export default function withApiKeySession(WrappedComponent) {
+  function ApiKeySessionWrapper({ apiKey, ...props }) {
+    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 <WrappedComponent onError={handleError} apiKey={apiKey} {...props} />;
+  }
+
+  ApiKeySessionWrapper.propTypes = {
+    apiKey: PropTypes.string.isRequired,
+  };
+
+  return ApiKeySessionWrapper;
+}

client/app/components/ApplicationArea/withUserSession.jsx

@@ -0,0 +1,67 @@
+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";
+
+export default function withUserSession(WrappedComponent) {
+  function UserSessionWrapper({ bodyClass, ...props }) {
+    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 (
+      <>
+        <ApplicationHeader />
+        <ErrorBoundary renderError={error => <ErrorMessage error={error} />}>
+          <ErrorBoundaryContext.Consumer>
+            {({ handleError }) => <WrappedComponent onError={handleError} {...props} />}
+          </ErrorBoundaryContext.Consumer>
+        </ErrorBoundary>
+      </>
+    );
+  }
+
+  UserSessionWrapper.propTypes = {
+    bodyClass: PropTypes.string,
+    children: PropTypes.node,
+  };
+
+  UserSessionWrapper.defaultProps = {
+    bodyClass: null,
+    children: null,
+  };
+
+  return UserSessionWrapper;
+}

client/app/pages/admin/Jobs.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 withUserSession from "@/components/ApplicationArea/withUserSession";
 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,10 @@ class Jobs extends React.Component {
   }
 }
 
+const JobsPage = withUserSession(Jobs);
+
 export default {
   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: currentRoute => <JobsPage key={currentRoute.key} {...currentRoute.routeParams} />,
 };

client/app/pages/admin/OutdatedQueries.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 withUserSession from "@/components/ApplicationArea/withUserSession";
 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";
@@ -147,43 +146,39 @@ class OutdatedQueries extends React.Component {
   }
 }
 
-const OutdatedQueriesPage = itemsList(
-  OutdatedQueries,
-  () =>
-    new ItemsSource({
-      doRequest(request, context) {
-        return (
-          axios
-            .get("/api/admin/queries/outdated")
-            // eslint-disable-next-line camelcase
-            .then(({ queries, updated_at }) => {
-              context.setCustomParams({ lastUpdatedAt: parseFloat(updated_at) });
-              return queries;
-            })
-        );
-      },
-      processResults(items) {
-        return map(items, item => new Query(item));
-      },
-      isPlainList: true,
-    }),
-  () => new StateStorage({ orderByField: "created_at", orderByReverse: true })
+const OutdatedQueriesPage = withUserSession(
+  itemsList(
+    OutdatedQueries,
+    () =>
+      new ItemsSource({
+        doRequest(request, context) {
+          return (
+            axios
+              .get("/api/admin/queries/outdated")
+              // eslint-disable-next-line camelcase
+              .then(({ queries, updated_at }) => {
+                context.setCustomParams({ lastUpdatedAt: parseFloat(updated_at) });
+                return queries;
+              })
+          );
+        },
+        processResults(items) {
+          return map(items, item => new Query(item));
+        },
+        isPlainList: true,
+      }),
+    () => new StateStorage({ orderByField: "created_at", orderByReverse: true })
+  )
 );
 
 export default {
   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>
+    <OutdatedQueriesPage
+      key={currentRoute.key}
+      routeParams={{ ...currentRoute.routeParams, currentPage: "outdated_queries" }}
+      currentRoute={currentRoute}
+    />
   ),
 };

client/app/pages/admin/SystemStatus.jsx

@@ -3,9 +3,8 @@ import React from "react";
 import { axios } from "@/services/axios";
 import PropTypes from "prop-types";
 
-import AuthenticatedPageWrapper from "@/components/ApplicationArea/AuthenticatedPageWrapper";
+import withUserSession from "@/components/ApplicationArea/withUserSession";
 import Layout from "@/components/admin/Layout";
-import { ErrorBoundaryContext } from "@/components/ErrorBoundary";
 import * as StatusBlock from "@/components/admin/StatusBlock";
 import recordEvent from "@/services/recordEvent";
 
@@ -81,14 +80,10 @@ class SystemStatus extends React.Component {
   }
 }
 
+const SystemStatusPage = withUserSession(SystemStatus);
+
 export default {
   path: "/admin/status",
   title: "System Status",
-  render: currentRoute => (
-    <AuthenticatedPageWrapper key={currentRoute.key}>
-      <ErrorBoundaryContext.Consumer>
-        {({ handleError }) => <SystemStatus {...currentRoute.routeParams} onError={handleError} />}
-      </ErrorBoundaryContext.Consumer>
-    </AuthenticatedPageWrapper>
-  ),
+  render: currentRoute => <SystemStatusPage key={currentRoute.key} {...currentRoute.routeParams} />,
 };