refactor(web/ui): Fix compatibility with new API

This change updates the web interface in React to be compatible with the
new API written in Kotlin. Several changes have been made in the new API
to ensure consistency.

5 files changed, 45 insertions, 41 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
index 3712cfa0..a99b60c0 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -22,13 +22,11 @@
 
 import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
-import { useMemo, useState, useReducer } from 'react'
+import { useMemo, useState } from 'react'
 import { contextSelector } from './ContextSelector.module.scss'
 
-function ContextSelector({ activeItem, items, onSelect, label }) {
-    const [isOpen, toggle] = useReducer((isOpen) => !isOpen, false)
+function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label }) {
     const [searchValue, setSearchValue] = useState('')
-
     const filteredItems = useMemo(
         () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items,
         [items, searchValue]
@@ -36,23 +34,22 @@ function ContextSelector({ activeItem, items, onSelect, label }) {
 
     return (
         <PFContextSelector
-            menuAppendTo={global.document?.body}
             className={contextSelector}
             toggleText={activeItem ? `${label}: ${activeItem.name}` : label}
             onSearchInputChange={(value) => setSearchValue(value)}
             searchInputValue={searchValue}
             isOpen={isOpen}
-            onToggle={toggle}
+            onToggle={(_, isOpen) => onToggle(isOpen)}
             onSelect={(event) => {
-                const targetId = event.target.value
-                const target = items.find((item) => item._id === targetId)
+                const targetId = +event.target.value
+                const target = items.find((item) => item.id === targetId)
 
-                toggle()
                 onSelect(target)
+                onToggle(!isOpen)
             }}
         >
             {filteredItems.map((item) => (
-                <ContextSelectorItem key={item._id} value={item._id}>
+                <ContextSelectorItem key={item.id} value={item.id}>
                     {item.name}
                 </ContextSelectorItem>
             ))}
@@ -61,7 +58,7 @@ function ContextSelector({ activeItem, items, onSelect, label }) {
 }
 
 const Item = PropTypes.shape({
-    _id: PropTypes.string.isRequired,
+    id: PropTypes.any.isRequired,
     name: PropTypes.string.isRequired,
 })
 
@@ -69,6 +66,8 @@ ContextSelector.propTypes = {
     activeItem: Item,
     items: PropTypes.arrayOf(Item).isRequired,
     onSelect: PropTypes.func.isRequired,
+    onToggle: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool,
     label: PropTypes.string,
 }
 
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
index fefba41f..0aa63ee6 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss
@@ -21,7 +21,6 @@
  */
 
 .contextSelector {
-    width: auto;
     margin-right: 20px;
 
     --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm);
diff --git a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
index 694681ac..c4f2d50e 100644
--- a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
@@ -21,27 +21,31 @@
  */
 
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
-import { useProjectPortfolios } from '../../data/project'
+import { useState } from 'react'
+import { usePortfolios } from '../../data/project'
+import { Portfolio } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function PortfolioSelector() {
+function PortfolioSelector({ activePortfolio }) {
     const router = useRouter()
-    const { project, portfolio: activePortfolioId } = router.query
-    const { data: portfolios = [] } = useProjectPortfolios(project)
-    const activePortfolio = useMemo(() => portfolios.find((portfolio) => portfolio._id === activePortfolioId), [
-        activePortfolioId,
-        portfolios,
-    ])
+
+    const [isOpen, setOpen] = useState(false)
+    const { data: portfolios = [] } = usePortfolios(activePortfolio?.project?.id, { enabled: isOpen })
 
     return (
         <ContextSelector
             label="Portfolio"
             activeItem={activePortfolio}
             items={portfolios}
-            onSelect={(portfolio) => router.push(`/projects/${portfolio.projectId}/portfolios/${portfolio._id}`)}
+            onSelect={(portfolio) => router.push(`/projects/${portfolio.project.id}/portfolios/${portfolio.number}`)}
+            onToggle={setOpen}
+            isOpen={isOpen}
         />
     )
 }
 
+PortfolioSelector.propTypes = {
+    activePortfolio: Portfolio,
+}
+
 export default PortfolioSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
index 753632ab..7721e04c 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
@@ -20,29 +20,32 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
+import { useState } from 'react'
 import { useProjects } from '../../data/project'
+import { Project } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function ProjectSelector({ projectId }) {
+function ProjectSelector({ activeProject }) {
     const router = useRouter()
-    const { data: projects = [] } = useProjects()
-    const activeProject = useMemo(() => projects.find((project) => project._id === projectId), [projectId, projects])
+
+    const [isOpen, setOpen] = useState(false)
+    const { data: projects = [] } = useProjects({ enabled: isOpen })
 
     return (
         <ContextSelector
             label="Project"
             activeItem={activeProject}
             items={projects}
-            onSelect={(project) => router.push(`/projects/${project._id}`)}
+            onSelect={(project) => router.push(`/projects/${project.id}`)}
+            onToggle={setOpen}
+            isOpen={isOpen}
         />
     )
 }
 
 ProjectSelector.propTypes = {
-    projectId: PropTypes.string,
+    activeProject: Project,
 }
 
 export default ProjectSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
index d5e51c6c..9cae4cbf 100644
--- a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
@@ -20,33 +20,32 @@
  * SOFTWARE.
  */
 
-import PropTypes from 'prop-types'
 import { useRouter } from 'next/router'
-import { useMemo } from 'react'
-import { useProjectTopologies } from '../../data/topology'
+import { useState } from 'react'
+import { useTopologies } from '../../data/topology'
+import { Topology } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function TopologySelector({ projectId, topologyId }) {
+function TopologySelector({ activeTopology }) {
     const router = useRouter()
-    const { data: topologies = [] } = useProjectTopologies(projectId)
-    const activeTopology = useMemo(() => topologies.find((topology) => topology._id === topologyId), [
-        topologyId,
-        topologies,
-    ])
+
+    const [isOpen, setOpen] = useState(false)
+    const { data: topologies = [] } = useTopologies(activeTopology?.project?.id, { enabled: isOpen })
 
     return (
         <ContextSelector
             label="Topology"
             activeItem={activeTopology}
             items={topologies}
-            onSelect={(topology) => router.push(`/projects/${topology.projectId}/topologies/${topology._id}`)}
+            onSelect={(topology) => router.push(`/projects/${topology.project.id}/topologies/${topology.number}`)}
+            onToggle={setOpen}
+            isOpen={isOpen}
         />
     )
 }
 
 TopologySelector.propTypes = {
-    projectId: PropTypes.string,
-    topologyId: PropTypes.string,
+    activeTopology: Topology,
 }
 
 export default TopologySelector