diff --git a/package.json b/package.json
index 77b84ce6c..46aea9537 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "harperdb-studio",
- "version": "4.4.2",
+ "version": "4.5.0",
"description": "A UI for HarperDB",
"deploymentUrl": "studio.harperdb.io",
"private": true,
diff --git a/src/components/App.js b/src/components/App.js
index 4742e1eda..a59ca03a9 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,178 +1,23 @@
-import React, { useEffect, useState, lazy, Suspense } from 'react';
+import React from 'react';
-import { Route, Routes, Navigate, useNavigate, useLocation, Outlet, useParams } from 'react-router-dom';
-import ReactGA from 'react-ga4';
+import { BrowserRouter } from 'react-router-dom';
+import { Elements } from '@stripe/react-stripe-js';
+import { positions, Provider } from 'react-alert';
-import { useStoreState } from 'pullstate';
-import useInterval from 'use-interval';
-import { positions, useAlert } from 'react-alert';
-import { ErrorBoundary } from 'react-error-boundary';
-import queryString from 'query-string';
-
-import appState from '../functions/state/appState';
-import usePersistedUser from '../functions/state/persistedUser';
-import config from '../config';
-
-import Loader from './shared/Loader';
-import Maintenance from './shared/Maintenance';
-import ErrorFallback from './shared/ErrorFallback';
-import ErrorFallbackAuth from './shared/ErrorFallbackAuth';
-
-import getProducts from '../functions/api/lms/getProducts';
-import getRegions from '../functions/api/lms/getRegions';
-import getWavelengthRegions from '../functions/api/lms/getWavelengthRegions';
-import getCurrentVersion from '../functions/api/lms/getCurrentVersion';
-import checkVersion from '../functions/app/checkVersion';
-import init from '../functions/app/init';
-import refreshUser from '../functions/app/refreshUser';
-import changeFavIcon from '../functions/app/changeFavIcon';
-import getAkamaiRegions from '../functions/api/lms/getAkamaiRegions';
-
-const TopNav = lazy(() => import(/* webpackChunkName: "topnav" */ './TopNav'));
-const SignUp = lazy(() => import(/* webpackChunkName: "signUp" */ './auth/SignUp'));
-const SignIn = lazy(() => import(/* webpackChunkName: "signIn" */ './auth/SignIn'));
-const ResetPassword = lazy(() => import(/* webpackChunkName: "resetPassword" */ './auth/ResetPassword'));
-const UpdatePassword = lazy(() => import(/* webpackChunkName: "updatePassword" */ './auth/UpdatePassword'));
-const Organization = lazy(() => import(/* webpackChunkName: "organization" */ './organization'));
-const Organizations = lazy(() => import(/* webpackChunkName: "organizations" */ './organizations'));
-const Instances = lazy(() => import(/* webpackChunkName: "instances" */ './instances'));
-const Instance = lazy(() => import(/* webpackChunkName: "instance" */ './instance'));
-const Profile = lazy(() => import(/* webpackChunkName: "profile" */ './profile'));
-
-const versionAlertOptions = { timeout: 0, position: positions.BOTTOM_CENTER };
-let controller;
-
-function ValidatedRoute(auth) {
- // ensure org id is valid for user. if not, redirect to organizations
- const { customer_id } = useParams();
-
- if (auth.auth.orgs.some((o) => o.customer_id === customer_id)) {
- return ;
- }
- return ;
-}
-
-function App() {
- const canonicalUrl = document.querySelector('link[rel="canonical"]');
- const navigate = useNavigate();
- const alert = useAlert();
- const location = useLocation();
- const { search, pathname } = location;
- const { redirect } = queryString.parse(search);
- const auth = useStoreState(appState, (s) => s.auth);
- const theme = useStoreState(appState, (s) => s.theme);
- const products = useStoreState(appState, (s) => s.products);
- const regions = useStoreState(appState, (s) => s.regions);
- const wavelengthRegions = useStoreState(appState, (s) => s.wavelengthRegions);
- const akamaiRegions = useStoreState(appState, (s) => s.akamaiRegions);
- const version = useStoreState(appState, (s) => s.version);
- const [fetchingUser, setFetchingUser] = useState(true);
- const [showVersionAlert, setShowVersionAlert] = useState(false);
- const [persistedUser, setPersistedUser] = usePersistedUser({});
- const loggedIn = auth?.user_id;
- const isNotEmployee = loggedIn && auth?.email.indexOf('harperdb.io') === -1 && auth?.email.indexOf('deliciousmonster.com') === -1;
- const isMaintenance = version?.maintenance && isNotEmployee;
-
- ReactGA.initialize(config.google_analytics_code);
-
- useEffect(() => {
- ReactGA.send({ hitType: 'pageview', page: window.location.pathname + window.location.search });
- }, [location.pathname]);
-
- useEffect(() => {
- changeFavIcon(persistedUser?.theme);
- }, [persistedUser?.theme]);
-
- useEffect(() => {
- setShowVersionAlert(checkVersion({ apiVersion: version.studio }));
- }, [version.studio]);
-
- useEffect(() => {
- if (auth?.email) {
- if (window._kmq) {
- window._kmq.push(['identify', auth.email]);
- }
- if (auth?.update_password) {
- navigate('/update-password');
- }
- if (redirect) {
- navigate(redirect);
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [auth?.email]);
-
- useEffect(() => {
- if (showVersionAlert) alert.info(`HarperDB Studio v${showVersionAlert} is now available. Refresh to update.`, versionAlertOptions);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [showVersionAlert]);
-
- useEffect(() => {
- canonicalUrl.href = window.location.href;
- }, [location, canonicalUrl]);
-
- useEffect(() => {
- init({ currentPath: location.pathname, navigate, persistedUser, setPersistedUser, setFetchingUser, controller });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- useInterval(() => {
- if (!products) getProducts();
- if (!regions) getRegions();
- if (!wavelengthRegions) getWavelengthRegions();
- if (!akamaiRegions) getAkamaiRegions();
- }, config.refresh_content_interval);
-
- useInterval(() => {
- getCurrentVersion();
- refreshUser({ auth, controller });
- }, config.check_version_interval);
+import stripePromise from '../functions/stripe/stripePromise';
+import AlertTemplate from './shared/Alert';
+import App from './layouts/App';
+function Template() {
return (
-
-
-
}>
-
-
- {fetchingUser ? (
-
- ) : loggedIn ? (
-
- }>
- {/* can we put instance routes in here, each in a suspense tag (since they're lazily loaded) */}
-
- : } path="/update-password" />
- : } path="/profile/*" />
- : }>
- } path="/o/:customer_id/i/:compute_stack_id/*" />
- } path="/o/:customer_id/instances/:action?/:purchaseStep?" />
- } path="/o/:customer_id/*" />
-
- : } path="/:list?/:action?" />
- } />
-
-
-
- ) : (
-
- }>
-
- } path="/" />
- : } path="/sign-up" />
- : } path="/reset-password" />
- } />
-
-
-
- )}
-
-
-
- HarperDB Studio v{config.studio_version}
- {version.maintenance && ' - MAINTENANCE MODE'}
-
-
-
- }>
-
-
- {fetchingUser ? (
-
- ) : instanceAuths?.local?.valid ? (
-
- }>
- {/* can we put instance routes in here, each in a suspense tag (since they're lazily loaded) */}
-
- } path="/o/:customer_id/i/:compute_stack_id/*" />
- } />
-
-
-
- ) : (
-
- }>
-
- } path="/" />
-
-
-
- )}
-
-
-
HarperDB Local Studio v{config.studio_version}
-
+
+
}>
+
+
+ {fetchingUser ? (
+
+ ) : loggedIn ? (
+
+ }>
+ {/* can we put instance routes in here, each in a suspense tag (since they're lazily loaded) */}
+
+ : } path="/update-password" />
+ : } path="/profile/*" />
+ : }>
+ } path="/o/:customer_id/i/:compute_stack_id/*" />
+ } path="/o/:customer_id/instances/:action?/:purchaseStep?" />
+ } path="/o/:customer_id/*" />
+
+ : } path="/:list?/:action?" />
+ } />
+
+
+
+ ) : (
+
+ }>
+
+ } path="/" />
+ : } path="/sign-up" />
+ : } path="/reset-password" />
+ } />
+
+
+
+ )}
+
+
+
+ HarperDB Studio v{config.studio_version}
+ {version.maintenance && ' - MAINTENANCE MODE'}
+
+
+
+ }>
+
+
+ {fetchingUser ? (
+
+ ) : instanceAuths?.local?.valid ? (
+
+ }>
+ {/* can we put instance routes in here, each in a suspense tag (since they're lazily loaded) */}
+
+ } path="/o/:customer_id/i/:compute_stack_id/*" />
+ } />
+
+
+
+ ) : (
+
+ }>
+
+ } path="/" />
+
+
+
+ )}
+
+
+
HarperDB Local Studio v{config.studio_version}
+