feat(ui): Add context selectors

This change adds context selectors for the OpenDC frontend where the
user can select different projects, portfolios or topologies from the
context selection bar.

1 files changed, 8 insertions, 4 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/AppPage.js b/opendc-web/opendc-web-ui/src/components/AppPage.js
index 2e0ea4cc..25afaf9a 100644
--- a/opendc-web/opendc-web-ui/src/components/AppPage.js
+++ b/opendc-web/opendc-web-ui/src/components/AppPage.js
@@ -23,11 +23,15 @@
 import PropTypes from 'prop-types'
 import { AppHeader } from './AppHeader'
 import React from 'react'
-import { Page } from '@patternfly/react-core'
+import { Page, PageGroup, PageBreadcrumb } from '@patternfly/react-core'
 
-export function AppPage({ children, breadcrumb, tertiaryNav }) {
+export function AppPage({ children, breadcrumb, contextSelectors }) {
     return (
-        <Page breadcrumb={breadcrumb} tertiaryNav={tertiaryNav} header={<AppHeader />}>
+        <Page header={<AppHeader />}>
+            <PageGroup>
+                {contextSelectors}
+                {breadcrumb && <PageBreadcrumb>{breadcrumb}</PageBreadcrumb>}
+            </PageGroup>
             {children}
         </Page>
     )
@@ -35,6 +39,6 @@ export function AppPage({ children, breadcrumb, tertiaryNav }) {
 
 AppPage.propTypes = {
     breadcrumb: PropTypes.node,
-    tertiaryNav: PropTypes.node,
+    contextSelectors: PropTypes.node,
     children: PropTypes.node,
 }