From 9dd75a9a40f7f2aebbc617980c99085f9dc688f8 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Sep 2022 23:02:46 +0200
Subject: refactor(web/ui): Move project selector into masthead

This change moves the project selector into the masthead since it
affects the whole application. This follows the PatternFly guidelines.
---
 .../opendc-web-ui/src/components/context/ContextSelector.js      | 9 ++++++---
 .../src/components/context/ContextSelector.module.scss           | 2 +-
 .../opendc-web-ui/src/components/context/ProjectSelector.js      | 8 ++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/context')

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 a99b60c0..436c179b 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -23,9 +23,9 @@
 import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
 import { useMemo, useState } from 'react'
-import { contextSelector } from './ContextSelector.module.scss'
+import styles from './ContextSelector.module.scss'
 
-function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label }) {
+function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label, isFullHeight, type = 'page' }) {
     const [searchValue, setSearchValue] = useState('')
     const filteredItems = useMemo(
         () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items,
@@ -34,7 +34,7 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label
 
     return (
         <PFContextSelector
-            className={contextSelector}
+            className={type === 'page' && styles.pageSelector}
             toggleText={activeItem ? `${label}: ${activeItem.name}` : label}
             onSearchInputChange={(value) => setSearchValue(value)}
             searchInputValue={searchValue}
@@ -47,6 +47,7 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label
                 onSelect(target)
                 onToggle(!isOpen)
             }}
+            isFullHeight={isFullHeight}
         >
             {filteredItems.map((item) => (
                 <ContextSelectorItem key={item.id} value={item.id}>
@@ -69,6 +70,8 @@ ContextSelector.propTypes = {
     onToggle: PropTypes.func.isRequired,
     isOpen: PropTypes.bool,
     label: PropTypes.string,
+    isFullHeight: PropTypes.bool,
+    type: PropTypes.oneOf(['app', 'page']),
 }
 
 export default ContextSelector
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 c4b89503..4f86ac64 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
@@ -20,7 +20,7 @@
  * SOFTWARE.
  */
 
-.contextSelector.contextSelector {
+.pageSelector.pageSelector {
     // Ensure this selector has precedence over the default one
     margin-right: 20px;
 
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 7721e04c..5f47c798 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
@@ -22,14 +22,16 @@
 
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { useProjects } from '../../data/project'
+import { useProjects, useProject } from '../../data/project'
 import { Project } from '../../shapes'
 import ContextSelector from './ContextSelector'
 
-function ProjectSelector({ activeProject }) {
+function ProjectSelector() {
     const router = useRouter()
+    const projectId = +router.query['project']
 
     const [isOpen, setOpen] = useState(false)
+    const { data: activeProject } = useProject(+projectId)
     const { data: projects = [] } = useProjects({ enabled: isOpen })
 
     return (
@@ -40,6 +42,8 @@ function ProjectSelector({ activeProject }) {
             onSelect={(project) => router.push(`/projects/${project.id}`)}
             onToggle={setOpen}
             isOpen={isOpen}
+            isFullHeight
+            type="app"
         />
     )
 }
-- 
cgit v1.2.3