From d1bee154322053e6a79a89f49e3b593686197df7 Mon Sep 17 00:00:00 2001 From: Austin Akers Date: Tue, 3 Dec 2024 13:43:40 -0800 Subject: [PATCH] fixed loader position on refresh --- package.json | 2 +- src/components/layouts/App.js | 334 +++++++++++++++++----------------- 2 files changed, 169 insertions(+), 167 deletions(-) diff --git a/package.json b/package.json index 01fc91399..a576ad4bb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "harperdb-studio", - "version": "4.8.9", + "version": "4.8.10", "description": "A UI for HarperDB", "deploymentUrl": "studio.harperdb.io", "private": true, diff --git a/src/components/layouts/App.js b/src/components/layouts/App.js index 4f0c9779f..ccecf8e3e 100644 --- a/src/components/layouts/App.js +++ b/src/components/layouts/App.js @@ -45,176 +45,178 @@ 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(); + // 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 ; + 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 - }, [auth?.email]); - - useEffect(() => { - if (showVersionAlert) alert.info(`HarperDB Studio v${showVersionAlert} is now available. Refresh to update.`, versionAlertOptions); - // eslint-disable-next-line - }, [showVersionAlert]); - - useEffect(() => { - canonicalUrl.href = window.location.href; - }, [location, canonicalUrl]); - - useEffect(() => { - init({ currentPath: location.pathname, navigate, persistedUser, setPersistedUser, setFetchingUser, controller }); - // eslint-disable-next-line - }, []); - - 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); - - 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?" /> - } /> - - - - - ) : ( -
- - }> - - - -
-

HarperDB Studio

- Manage all your HarperDB instances. -
    -
  • -

    Manage All Instances

    - Set access, cluster, monitor, and more. -
    • -
  • -

    Embedded API Server

    - HarperDB components give you unlimited application flexibility. -
    • -
  • -

    Fully Managed Cloud & 5G Instances

    - Go from zero to code in minutes. -
    • -
  • -

    Deploy Anywhere

    - -
    • -
-
- - - - } path="/" /> - : } path="/sign-up" /> - : } path="/reset-password" /> - } /> - - - - - - -
- )} -
-
- HarperDB Studio v{config.studio_version} - {version.maintenance && ' - MAINTENANCE MODE'} -
-
- ); + 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 + }, [auth?.email]); + + useEffect(() => { + if (showVersionAlert) alert.info(`HarperDB Studio v${showVersionAlert} is now available. Refresh to update.`, versionAlertOptions); + // eslint-disable-next-line + }, [showVersionAlert]); + + useEffect(() => { + canonicalUrl.href = window.location.href; + }, [location, canonicalUrl]); + + useEffect(() => { + init({ currentPath: location.pathname, navigate, persistedUser, setPersistedUser, setFetchingUser, controller }); + // eslint-disable-next-line + }, []); + + 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); + + 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?" /> + } /> + + + + + ) : ( +
+ + }> + + + +
+

HarperDB Studio

+ Manage all your HarperDB instances. +
    +
  • +

    Manage All Instances

    + Set access, cluster, monitor, and more. +
    • +
  • +

    Embedded API Server

    + HarperDB components give you unlimited application flexibility. +
    • +
  • +

    Fully Managed Cloud & 5G Instances

    + Go from zero to code in minutes. +
    • +
  • +

    Deploy Anywhere

    + +
    • +
+
+ + + + } path="/" /> + : } path="/sign-up" /> + : } path="/reset-password" /> + } /> + + + + + + +
+ )} +
+
+ HarperDB Studio v{config.studio_version} + {version.maintenance && ' - MAINTENANCE MODE'} +
+
+ ); } export default App;