refactor(springboot-plugin): Change the styling to be consistent amon…

…g plugins
mmelko · Apr 24, 2024 · 6c26756 · 6c26756
1 parent 096c83f
commit 6c26756
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 24 deletions.
diff --git a/packages/hawtio/src/plugins/springboot/Health.tsx b/packages/hawtio/src/plugins/springboot/Health.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Card, CardBody, CardHeader, Flex, FlexItem, Grid, GridItem, PageSection, Title } from '@patternfly/react-core'
+import { Card, CardBody, CardHeader, Flex, FlexItem, Grid, GridItem, Title } from '@patternfly/react-core'
 import { springbootService } from './springboot-service'
 import { HealthComponentDetail, HealthData } from './types'
 import { TableComposable, Tbody, Td, Tr } from '@patternfly/react-table'
@@ -88,7 +88,7 @@ export const Health: React.FunctionComponent = () => {
   }, [])
 
   return (
-    <PageSection variant='default'>
+    <React.Fragment>
       {healthData && (
         <Grid hasGutter span={4}>
           <GridItem span={12}>
@@ -137,6 +137,6 @@ export const Health: React.FunctionComponent = () => {
             })}
         </Grid>
       )}
-    </PageSection>
+    </React.Fragment>
   )
 }
diff --git a/packages/hawtio/src/plugins/springboot/Info.tsx b/packages/hawtio/src/plugins/springboot/Info.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { FormGroup, PageSection } from '@patternfly/react-core'
+import { FormGroup } from '@patternfly/react-core'
 import { springbootService } from './springboot-service'
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 
@@ -13,7 +13,7 @@ export const Info: React.FunctionComponent = () => {
   }, [])
 
   return (
-    <PageSection variant='light'>
+    <React.Fragment>
       <FormGroup>
         <TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped isStickyHeader>
           <Thead>
@@ -34,6 +34,6 @@ export const Info: React.FunctionComponent = () => {
           </Tbody>
         </TableComposable>
       </FormGroup>
-    </PageSection>
+    </React.Fragment>
   )
 }
diff --git a/packages/hawtio/src/plugins/springboot/Loggers.tsx b/packages/hawtio/src/plugins/springboot/Loggers.tsx
@@ -10,7 +10,6 @@ import {
   EmptyStateIcon,
   FormGroup,
   Label,
-  PageSection,
   Pagination,
   SearchInput,
   Toolbar,
@@ -210,7 +209,7 @@ export const Loggers: React.FunctionComponent = () => {
   )
 
   return (
-    <PageSection variant='light'>
+    <React.Fragment>
       {tableToolbar}
       {getCurrentPage().length > 0 && (
         <FormGroup>
@@ -253,6 +252,6 @@ export const Loggers: React.FunctionComponent = () => {
           </EmptyState>
         </Bullseye>
       )}
-    </PageSection>
+    </React.Fragment>
   )
 }
diff --git a/packages/hawtio/src/plugins/springboot/SpringBoot.tsx b/packages/hawtio/src/plugins/springboot/SpringBoot.tsx
@@ -1,4 +1,4 @@
-import { Nav, NavItem, NavList, PageGroup, PageNavigation, PageSection, Title } from '@patternfly/react-core'
+import { Divider, Nav, NavItem, NavList, PageSection, PageSectionVariants, Title } from '@patternfly/react-core'
 import React, { useEffect, useState } from 'react'
 
 import { Navigate, NavLink, Route, Routes, useLocation } from 'react-router-dom'
@@ -52,20 +52,23 @@ export const SpringBoot: React.FunctionComponent = () => {
       <PageSection variant='light'>
         <Title headingLevel='h1'>Spring Boot</Title>
       </PageSection>
-      <PageGroup>
-        <PageNavigation>
-          <Nav aria-label='Spring-boot Nav' variant='tertiary'>
-            <NavList>
-              {navItems.map(navItem => (
-                <NavItem key={navItem.id} isActive={location.pathname === `/springboot/${navItem.id}`}>
-                  <NavLink to={navItem.id}>{navItem.title}</NavLink>
-                </NavItem>
-              ))}
-            </NavList>
-          </Nav>
-        </PageNavigation>
-      </PageGroup>
-      <PageSection>
+      <Divider />
+      <PageSection type='tabs' hasShadowBottom>
+        <Nav aria-label='Spring-boot Nav' variant='tertiary'>
+          <NavList>
+            {navItems.map(navItem => (
+              <NavItem key={navItem.id} isActive={location.pathname === `/springboot/${navItem.id}`}>
+                <NavLink to={navItem.id}>{navItem.title}</NavLink>
+              </NavItem>
+            ))}
+          </NavList>
+        </Nav>
+      </PageSection>
+      <Divider />
+      <PageSection
+        aria-label='Spring-boot Content'
+        variant={location.pathname === '/springboot/health' ? PageSectionVariants.default : PageSectionVariants.light}
+      >
         <Routes>
           {navItems.map(navItem => (
             <Route key={navItem.id} path={navItem.id} element={navItem.component} />