refactor(quartz,springboot): remove unnecessary React.Fragments

hawtio · Apr 24, 2024 · 9e25ff4 · 9e25ff4
1 parent 6604955
commit 9e25ff4
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 76 deletions.
diff --git a/packages/hawtio/src/plugins/quartz/triggers/Triggers.tsx b/packages/hawtio/src/plugins/quartz/triggers/Triggers.tsx
@@ -175,7 +175,6 @@ export const Triggers: React.FunctionComponent = () => {
 
   return (
     <Panel>
-      {' '}
       <PanelMain>
         <PanelMainBody>
           {tableToolbar}

diff --git a/packages/hawtio/src/plugins/shared/JmxContentMBeans.tsx b/packages/hawtio/src/plugins/shared/JmxContentMBeans.tsx
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { Card, CardBody, Text } from '@patternfly/react-core'
+import { Card, CardBody, Panel, Text } from '@patternfly/react-core'
 import { InfoCircleIcon } from '@patternfly/react-icons'
 import { OnRowClick, Table, TableBody, TableHeader, TableProps } from '@patternfly/react-table'
 import { PluginNodeSelectionContext } from '@hawtiosrc/plugins/context'
@@ -36,11 +36,11 @@ export const JmxContentMBeans: React.FunctionComponent = () => {
   }
 
   return (
-    <Card isFullHeight>
+    <Panel>
       <Table aria-label='MBeans' variant='compact' cells={columns} rows={rows}>
         <TableHeader />
         <TableBody onRowClick={selectChild} className={'jmx-table-body'} />
       </Table>
-    </Card>
+    </Panel>
   )
 }
diff --git a/packages/hawtio/src/plugins/springboot/Health.tsx b/packages/hawtio/src/plugins/springboot/Health.tsx
@@ -87,56 +87,56 @@ export const Health: React.FunctionComponent = () => {
     })
   }, [])
 
+  if (!healthData) {
+    return null
+  }
+
   return (
-    <React.Fragment>
-      {healthData && (
-        <Grid hasGutter span={4}>
-          <GridItem span={12}>
-            <Card>
-              <CardHeader>
-                <Flex>
-                  <HealthStatusIcon status={healthData?.status} />
-                  <Title headingLevel='h3'>
-                    <span>Overall status: {healthData?.status}</span>
-                  </Title>
-                </Flex>
-              </CardHeader>
-            </Card>
-          </GridItem>
-          {healthData?.components
-            .sort((a, b) => {
-              if (SPAN_6_COMPONENTS.includes(a.name)) return -1
-              else if (SPAN_6_COMPONENTS.includes(b.name)) return 1
-              else return a.name.localeCompare(b.name)
-            })
-            .map(component => {
-              const span = SPAN_6_COMPONENTS.includes(component.name) ? 6 : 4
-              return (
-                <GridItem span={span} key={component.name}>
-                  <Card isFullHeight>
-                    <CardHeader>
-                      <Title headingLevel='h3'>{humanizeLabels(component.name!)}</Title>
-                    </CardHeader>
-                    <CardBody style={{ overflow: 'auto' }}>
-                      <Flex>
-                        <FlexItem>
-                          <HealthStatusIcon status={component.status} />
-                        </FlexItem>
-                        <FlexItem>Status: {component.status}</FlexItem>
-                        {component.details &&
-                          (component.name === 'diskSpace' ? (
-                            <DiskComponentDetails componentDetails={component.details} />
-                          ) : (
-                            <ComponentDetails componentDetails={component.details} />
-                          ))}
-                      </Flex>
-                    </CardBody>
-                  </Card>
-                </GridItem>
-              )
-            })}
-        </Grid>
-      )}
-    </React.Fragment>
+    <Grid hasGutter span={4}>
+      <GridItem span={12}>
+        <Card>
+          <CardHeader>
+            <Flex>
+              <HealthStatusIcon status={healthData?.status} />
+              <Title headingLevel='h3'>
+                <span>Overall status: {healthData?.status}</span>
+              </Title>
+            </Flex>
+          </CardHeader>
+        </Card>
+      </GridItem>
+      {healthData?.components
+        .sort((a, b) => {
+          if (SPAN_6_COMPONENTS.includes(a.name)) return -1
+          else if (SPAN_6_COMPONENTS.includes(b.name)) return 1
+          else return a.name.localeCompare(b.name)
+        })
+        .map(component => {
+          const span = SPAN_6_COMPONENTS.includes(component.name) ? 6 : 4
+          return (
+            <GridItem span={span} key={component.name}>
+              <Card isFullHeight>
+                <CardHeader>
+                  <Title headingLevel='h3'>{humanizeLabels(component.name!)}</Title>
+                </CardHeader>
+                <CardBody style={{ overflow: 'auto' }}>
+                  <Flex>
+                    <FlexItem>
+                      <HealthStatusIcon status={component.status} />
+                    </FlexItem>
+                    <FlexItem>Status: {component.status}</FlexItem>
+                    {component.details &&
+                      (component.name === 'diskSpace' ? (
+                        <DiskComponentDetails componentDetails={component.details} />
+                      ) : (
+                        <ComponentDetails componentDetails={component.details} />
+                      ))}
+                  </Flex>
+                </CardBody>
+              </Card>
+            </GridItem>
+          )
+        })}
+    </Grid>
   )
 }
diff --git a/packages/hawtio/src/plugins/springboot/Info.tsx b/packages/hawtio/src/plugins/springboot/Info.tsx
@@ -13,27 +13,25 @@ export const Info: React.FunctionComponent = () => {
   }, [])
 
   return (
-    <React.Fragment>
-      <FormGroup>
-        <TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped isStickyHeader>
-          <Thead>
-            <Tr>
-              <Th data-testid={'name-header'}>Property Name</Th>
-              <Th data-testid={'value-header'}>Property Value</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {systemProperties.map((prop, index) => {
-              return (
-                <Tr key={'row' + index} data-testid={'row' + index}>
-                  <Td style={{ width: '20%' }}>{prop.key}</Td>
-                  <Td style={{ flex: 3 }}>{prop.value}</Td>
-                </Tr>
-              )
-            })}
-          </Tbody>
-        </TableComposable>
-      </FormGroup>
-    </React.Fragment>
+    <FormGroup>
+      <TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped isStickyHeader>
+        <Thead>
+          <Tr>
+            <Th data-testid={'name-header'}>Property Name</Th>
+            <Th data-testid={'value-header'}>Property Value</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {systemProperties.map((prop, index) => {
+            return (
+              <Tr key={'row' + index} data-testid={'row' + index}>
+                <Td style={{ width: '20%' }}>{prop.key}</Td>
+                <Td style={{ flex: 3 }}>{prop.value}</Td>
+              </Tr>
+            )
+          })}
+        </Tbody>
+      </TableComposable>
+    </FormGroup>
   )
 }