refactor(app): polish Example 3 plugin

app/src/examples/example3/Example3.tsx

@@ -1,23 +1,26 @@
-import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core'
+import { CodeBlock, CodeBlockCode, PageSection, Text, TextContent } from '@patternfly/react-core'
 import React from 'react'
 
 export const Example3: React.FunctionComponent = () => (
-  <PageSection variant={PageSectionVariants.light}>
+  <PageSection variant='light'>
     <TextContent>
       <Text component='h1'>Example 3</Text>
       <Text component='p'>
         This is another example plugin that also demonstrates the addition of custom components to the main header
         toolbar.
       </Text>
       <Text component='p'>
-        Components should be added in to the Plugin structure using the `headerItems` array. Toolbar components should
-        be created as single FunctionComponents and added to the array.
+        Components should be added in to the Plugin structure using the <code>headerItems</code> array. Toolbar
+        components should be created as single <code>FunctionComponent</code>s and added to the array.
       </Text>
       <Text component='p'>
         Header components will remain in the toolbar until the focus is changed to an alternative plugin. However,
-        should you wish to persist the components despite the UI focus then an alternative structure can be added to the
-        `headerItems` array in the form <code>&#123;component: &apos;MyComponent&apos;, universal: true&#125;</code>.
+        should you wish to persist the components despite the UI focus then an alternative structure can be added to the{' '}
+        <code>headerItems</code> array in the form:
       </Text>
+      <CodeBlock>
+        <CodeBlockCode>&#123;component: MyComponent, universal: true&#125;</CodeBlockCode>
+      </CodeBlock>
     </TextContent>
   </PageSection>
 )

app/src/examples/example3/ToolbarItemComp.tsx → app/src/examples/example3/Example3HeaderItems.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Dropdown, DropdownItem, DropdownSeparator, DropdownToggle, Modal } from '@patternfly/react-core'
 
-export const ToolbarItemComp1: React.FunctionComponent = () => {
+export const Example3HeaderItem1: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false)
 
   const handleModalToggle = () => {
@@ -10,11 +10,12 @@ export const ToolbarItemComp1: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <Button variant='primary' onClick={handleModalToggle}>
+      <Button id='example3-header-item1-button' variant='primary' isSmall onClick={handleModalToggle}>
         Click Me!
       </Button>
 
       <Modal
+        id='example3-header-item1-modal'
         title='Basic modal'
         isOpen={isModalOpen}
         onClose={handleModalToggle}
@@ -33,7 +34,7 @@ export const ToolbarItemComp1: React.FunctionComponent = () => {
   )
 }
 
-export const ToolbarItemComp2: React.FunctionComponent = () => {
+export const Example3HeaderItem2: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false)
 
   const onToggle = (isOpen: boolean) => {
@@ -78,14 +79,16 @@ export const ToolbarItemComp2: React.FunctionComponent = () => {
 
   return (
     <Dropdown
+      id='example3-header-item2-dropdown'
       onSelect={onSelect}
       toggle={
-        <DropdownToggle id='toggle-basic' onToggle={onToggle}>
-          Plugin Example 3 Dropdown
+        <DropdownToggle id='example3-header-item2-dropdown-toggle' onToggle={onToggle}>
+          Example 3 Dropdown
         </DropdownToggle>
       }
       isOpen={isOpen}
       dropdownItems={dropdownItems}
+      isPlain
     />
   )
 }

app/src/examples/example3/index.ts

@@ -1,14 +1,20 @@
 import { hawtio, HawtioPlugin } from '@hawtio/react'
 import { Example3 } from './Example3'
-import { ToolbarItemComp1, ToolbarItemComp2 } from './ToolbarItemComp'
+import { Example3HeaderItem1, Example3HeaderItem2 } from './Example3HeaderItems'
 
 export const registerExample3: HawtioPlugin = () => {
   hawtio.addPlugin({
     id: 'example3',
     title: 'Example 3',
     path: '/example3',
     component: Example3,
-    headerItems: [ToolbarItemComp1, { component: ToolbarItemComp2, universal: true }],
+    headerItems: [
+      // Header item local to the plugin
+      Example3HeaderItem1,
+      // Header item universal to the console
+      // You can also make it local by setting universal=false
+      { component: Example3HeaderItem2, universal: true },
+    ],
     isActive: async () => true,
   })
 }