refactor(shared): Replace Card component with the Panel in Attributes…

… and Operations components
mmelko · Apr 23, 2024 · 0ffa0cb · 0ffa0cb
1 parent 70e090e
commit 0ffa0cb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/packages/hawtio/src/plugins/shared/attributes/AttributeTable.css b/packages/hawtio/src/plugins/shared/attributes/AttributeTable.css
@@ -1,3 +1,6 @@
 .attribute-table > tr > th {
   max-width: none;
 }
+#attribute-table-with-panel {
+  height: 75vh;
+}
diff --git a/packages/hawtio/src/plugins/shared/attributes/AttributeTable.tsx b/packages/hawtio/src/plugins/shared/attributes/AttributeTable.tsx
@@ -2,7 +2,7 @@ import { PluginNodeSelectionContext } from '@hawtiosrc/plugins/context'
 import { JmxContentMBeans } from '@hawtiosrc/plugins/shared/JmxContentMBeans'
 import { AttributeValues } from '@hawtiosrc/plugins/shared/jolokia-service'
 import { humanizeLabels } from '@hawtiosrc/util/strings'
-import { Card } from '@patternfly/react-core'
+import { Panel } from '@patternfly/react-core'
 import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'
 import { Response } from 'jolokia.js'
 import React, { useContext, useEffect, useState } from 'react'
@@ -106,7 +106,7 @@ export const AttributeTable: React.FunctionComponent = () => {
   const labels = Object.keys(attributesEntries[0] ?? {})
 
   return (
-    <Card isFullHeight>
+    <Panel>
       <TableComposable aria-label='MBeans' variant='compact'>
         <Thead>
           <Tr>
@@ -125,6 +125,6 @@ export const AttributeTable: React.FunctionComponent = () => {
           ))}
         </Tbody>
       </TableComposable>
-    </Card>
+    </Panel>
   )
 }
diff --git a/packages/hawtio/src/plugins/shared/attributes/Attributes.tsx b/packages/hawtio/src/plugins/shared/attributes/Attributes.tsx
@@ -1,14 +1,15 @@
 import { PluginNodeSelectionContext } from '@hawtiosrc/plugins/context'
 import { AttributeValues } from '@hawtiosrc/plugins/shared/jolokia-service'
 import { isObject, objectSorter } from '@hawtiosrc/util/objects'
-import { Card, Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core'
+import { Drawer, DrawerContent, DrawerContentBody, Panel } from '@patternfly/react-core'
 import { TableComposable, Tbody, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table'
 import React, { useContext, useEffect, useState } from 'react'
 import { HawtioEmptyCard } from '../HawtioEmptyCard'
 import { HawtioLoadingCard } from '../HawtioLoadingCard'
 import { log } from '../globals'
 import { AttributeModal } from './AttributeModal'
 import { attributeService } from './attribute-service'
+import './AttributeTable.css'
 
 export const Attributes: React.FunctionComponent = () => {
   const { selectedNode } = useContext(PluginNodeSelectionContext)
@@ -100,7 +101,7 @@ export const Attributes: React.FunctionComponent = () => {
   )
 
   const attributesTable = (
-    <div style={{ height: '75vh' }}>
+    <div id='attribute-table-with-panel'>
       <TableComposable aria-label='Attributes' variant='compact'>
         <Thead>
           <Tr>
@@ -128,13 +129,13 @@ export const Attributes: React.FunctionComponent = () => {
   )
   return (
     <React.Fragment>
-      <Card isFullHeight>
+      <Panel>
         <Drawer isExpanded={isModalOpen} className={'pf-m-inline-on-2xl'}>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody hasPadding> {attributesTable}</DrawerContentBody>
           </DrawerContent>
         </Drawer>
-      </Card>
+      </Panel>
     </React.Fragment>
   )
 }
diff --git a/packages/hawtio/src/plugins/shared/operations/Operations.tsx b/packages/hawtio/src/plugins/shared/operations/Operations.tsx
@@ -1,6 +1,6 @@
 import { PluginNodeSelectionContext } from '@hawtiosrc/plugins/context'
 import { isEmpty } from '@hawtiosrc/util/objects'
-import { Card, CardBody, DataList, Text } from '@patternfly/react-core'
+import { DataList, Panel, PanelHeader, PanelMain, PanelMainBody, Text } from '@patternfly/react-core'
 import React, { useContext } from 'react'
 import { HawtioEmptyCard } from '../HawtioEmptyCard'
 import { OperationForm } from './OperationForm'
@@ -31,15 +31,17 @@ export const Operations: React.FunctionComponent = () => {
   )
 
   return (
-    <Card isFullHeight>
-      <CardBody>
+    <Panel>
+      <PanelHeader>
         <Text component='p'>
           This MBean supports the following JMX operations. Expand an item in the list to invoke that operation.
         </Text>
-      </CardBody>
-      <CardBody>
-        <OperationList />
-      </CardBody>
-    </Card>
+      </PanelHeader>
+      <PanelMain>
+        <PanelMainBody>
+          <OperationList />
+        </PanelMainBody>
+      </PanelMain>
+    </Panel>
   )
 }