merge: Address technical debt in topology view v2 (#163)

This pull request aims to address some of the technical debt in the topology 
view of the OpenDC frontend (v2).

* Perform Saga mutations through React Query
* Add table view for topology view
* Extract topology construction out of Sagas
* Toggle to Floor Plan on room select

2 files changed, 25 insertions, 35 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index d5f3b329..900ff405 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -23,15 +23,12 @@
 import PropTypes from 'prop-types'
 import Head from 'next/head'
 import { Provider } from 'react-redux'
+import { useNewQueryClient } from '../data/query'
 import { useStore } from '../redux'
-import { AuthProvider, useAuth, useRequireAuth } from '../auth'
+import { AuthProvider, useRequireAuth } from '../auth'
 import * as Sentry from '@sentry/react'
 import { Integrations } from '@sentry/tracing'
-import { QueryClient, QueryClientProvider } from 'react-query'
-import { useMemo } from 'react'
-import { configureProjectClient } from '../data/project'
-import { configureExperimentClient } from '../data/experiments'
-import { configureTopologyClient } from '../data/topology'
+import { QueryClientProvider } from 'react-query'
 
 import '@patternfly/react-core/dist/styles/base.css'
 import '@patternfly/react-styles/css/utilities/Alignment/alignment.css'
@@ -47,18 +44,12 @@ import '@patternfly/react-styles/css/components/InlineEdit/inline-edit.css'
 import '../style/index.scss'
 
 // This setup is necessary to forward the Auth0 context to the Redux context
-const Inner = ({ Component, pageProps }) => {
+function Inner({ Component, pageProps }) {
+    // Force user to be authorized
     useRequireAuth()
-    const auth = useAuth()
 
-    const queryClient = useMemo(() => {
-        const client = new QueryClient()
-        configureProjectClient(client, auth)
-        configureExperimentClient(client, auth)
-        configureTopologyClient(client, auth)
-        return client
-    }, []) // eslint-disable-line react-hooks/exhaustive-deps
-    const store = useStore(pageProps.initialReduxState, { auth, queryClient })
+    const queryClient = useNewQueryClient()
+    const store = useStore(pageProps.initialReduxState, { queryClient })
     return (
         <QueryClientProvider client={queryClient}>
             <Provider store={store}>
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index f95b18ed..ae26ae83 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,9 +24,8 @@ import { useRouter } from 'next/router'
 import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
-import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
     Breadcrumb,
@@ -43,6 +42,8 @@ import {
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import TopologyMap from '../../../../components/topologies/TopologyMap'
+import { goToRoom } from '../../../../redux/actions/interaction-level'
+import { openTopology } from '../../../../redux/actions/topologies'
 
 /**
  * Page that displays a datacenter topology.
@@ -55,14 +56,12 @@ function Topology() {
 
     const dispatch = useDispatch()
     useEffect(() => {
-        if (projectId) {
-            dispatch(openProjectSucceeded(projectId))
+        if (topologyId) {
+            dispatch(openTopology(topologyId))
         }
-    }, [projectId, topologyId, dispatch])
+    }, [topologyId, dispatch])
 
     const [activeTab, setActiveTab] = useState('overview')
-    const overviewRef = useRef(null)
-    const floorPlanRef = useRef(null)
 
     const breadcrumb = (
         <Breadcrumb>
@@ -95,31 +94,31 @@ function Topology() {
                     onSelect={(_, tabIndex) => setActiveTab(tabIndex)}
                     className="pf-m-page-insets"
                 >
-                    <Tab
-                        eventKey="overview"
-                        title={<TabTitleText>Overview</TabTitleText>}
-                        tabContentId="overview"
-                        tabContentRef={overviewRef}
-                    />
+                    <Tab eventKey="overview" title={<TabTitleText>Overview</TabTitleText>} tabContentId="overview" />
                     <Tab
                         eventKey="floor-plan"
                         title={<TabTitleText>Floor Plan</TabTitleText>}
                         tabContentId="floor-plan"
-                        tabContentRef={floorPlanRef}
                     />
                 </Tabs>
             </PageSection>
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
-                <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <TopologyOverview topologyId={topologyId} />
+                <TabContent id="overview" aria-label="Overview tab" hidden={activeTab !== 'overview'}>
+                    <TopologyOverview
+                        topologyId={topologyId}
+                        onSelect={(type, obj) => {
+                            if (type === 'room') {
+                                dispatch(goToRoom(obj._id))
+                                setActiveTab('floor-plan')
+                            }
+                        }}
+                    />
                 </TabContent>
                 <TabContent
-                    eventKey="floor-plan"
                     id="floor-plan"
-                    ref={floorPlanRef}
                     aria-label="Floor Plan tab"
                     className="pf-u-h-100"
-                    hidden
+                    hidden={activeTab !== 'floor-plan'}
                 >
                     <TopologyMap />
                 </TabContent>