ARTEMIS-5186 - UI Consistency Improvements

artemis-console-extension/artemis-extension/public/css/activemq.css

@@ -47,6 +47,10 @@ svg text {
   font-family: PatternFlyIcons-webfont;
 }
 
+svg.pf-v5-svg {
+  fill: #c12766;
+}
+
 
 .pf-topology__node.artemisBroker.pf-m-info .pf-topology__node__background {
   stroke: #801944;

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/AddressesTable.tsx

@@ -215,6 +215,7 @@ export const AddressesTable: React.FunctionComponent<Navigate> = (navigate) => {
         aria-label='attributes-modal'
         variant={ModalVariant.medium}
         isOpen={showAttributesDialog}
+        onClose={() => setShowAttributesDialog(false)}
         actions={[
           <Button key="close" variant="primary" onClick={() => setShowAttributesDialog(false)}>
             Close
@@ -226,6 +227,7 @@ export const AddressesTable: React.FunctionComponent<Navigate> = (navigate) => {
         aria-label='operations-modal'
         variant={ModalVariant.medium}
         isOpen={showOperationsDialog}
+        onClose={() => setShowOperationsDialog(false)}
         actions={[
           <Button key="close" variant="primary" onClick={() => setShowOperationsDialog(false)}>
             Close

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/CreateAddress.tsx

@@ -14,11 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ActionGroup, Button, Form, FormGroup, Radio, TextInput, Title } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, FormGroup, Text, Popover, Radio, TextContent, TextInput, Title } from '@patternfly/react-core';
 import React, { useState } from 'react'
 import { artemisService } from '../artemis-service';
 import { eventService } from '@hawtio/react';
-import { ConnectHint } from '../util/ConnectHint';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 export const CreateAddress: React.FunctionComponent = () => {
   const [addressName, setAddressName] = useState('');
@@ -48,10 +48,17 @@ export const CreateAddress: React.FunctionComponent = () => {
       })
   };
 
+  const Hint = () => (
+    <TextContent>
+        <Text component='p'>
+        Use this page to create a new address on the broker. If you want the address to support JMS-like queues, that is point-to-point messaging, choose Anycast. If you want the  address to support JMS-like topic subscriptions, that is publish-subscribe messaging, choose Multicast.
+        </Text>
+    </TextContent>
+)
+
   return (
     <>
-    <Title headingLevel="h2">Create Address</Title>
-      <ConnectHint text={['Use this page to create a new address on the broker. If you want the address to support JMS-like queues, that is point-to-point messaging, choose Anycast. If you want the  address to support JMS-like topic subscriptions, that is publish-subscribe messaging, choose Multicast.']}/>
+    <Title headingLevel="h2">Create Address{' '}<Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover></Title>
       <br/>
       <Form>
         <FormGroup label="Address Name">

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/addresses/DeleteAddress.tsx

@@ -14,12 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ActionGroup, Text, Button, Form, Icon, Modal, ModalVariant, TextContent, Title } from '@patternfly/react-core';
+import { ActionGroup, Text, Button, Form, Icon, Modal, ModalVariant, TextContent, Title, Popover } from '@patternfly/react-core';
 import React, { useState } from 'react'
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import { ConnectHint } from '../util/ConnectHint';
 import { eventService, workspace } from '@hawtio/react';
 import { artemisService } from '../artemis-service';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 type DeleteAddressProps = {
   address: string
@@ -47,10 +47,19 @@ export const DeleteAddress: React.FunctionComponent<DeleteAddressProps> = (props
       })
   };
 
+  const Hint = () => (
+    <TextContent>
+        <Text component='p'>
+          Use this page to delete the selected address on the broker. The address is deleted only if it has no queues bound to it.
+        </Text>
+    </TextContent>
+)
+
   return (
     <>
-      <Title headingLevel="h2">Delete Address {props.address}</Title>
-      <ConnectHint text={["Use this page to delete the selected address on the broker. The address is deleted only if it has no queues bound to it."]}/>
+      <Title headingLevel="h2">Delete Address {props.address}{' '}
+          <Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover>
+      </Title>
       <Form>
         <ActionGroup>
           <Button variant="primary" onClick={() => setShowDeleteModal(true)} >Delete</Button>

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/brokers/BrokerDiagram.tsx

@@ -450,32 +450,32 @@ export const BrokerDiagram: React.FunctionComponent = () => {
           isOpen={viewOptionsOpen}>
         <SelectList>
           <SelectOption
-              value="show Labels"
+              value="Labels"
               hasCheckbox
               isSelected={viewOptions.showLabels}
               onClick={() => setViewOptions(prev => ({ ...prev, showLabels: !prev.showLabels }))}>show Labels</SelectOption>
           <SelectOption
-              value="show Addresses"
+              value="Addresses"
               hasCheckbox
               isSelected={viewOptions.showAddresses}
               onClick={() => setViewOptions(prev => ({ ...prev, showAddresses: !prev.showAddresses }))}>show Addresses</SelectOption>
           <SelectOption
-              value="show Queues"
+              value="Queues"
               hasCheckbox
               isSelected={viewOptions.showQueues}
               onClick={() => setViewOptions(prev => ({ ...prev, showQueues: !prev.showQueues }))}>show Queues</SelectOption>
           <SelectOption
-              value="show Internal Addresses"
+              value="Internal Addresses"
               hasCheckbox
               isSelected={viewOptions.showInternalAddresses}
               onClick={() => setViewOptions(prev => ({ ...prev, showInternalAddresses: !prev.showInternalAddresses }))}>show Internal Addresses</SelectOption>
           <SelectOption
-              value="show Internal Queues"
+              value="Internal Queues"
               hasCheckbox
               isSelected={viewOptions.showInternalQueues}
               onClick={() => setViewOptions(prev => ({ ...prev, showInternalQueues: !prev.showInternalQueues }))}>show Internal Queues</SelectOption>
           <SelectOption
-              value="show Connectors"
+              value="Connectors"
               hasCheckbox
               isSelected={viewOptions.showConnectors}
               onClick={() => setViewOptions(prev => ({ ...prev, showConnectors: !prev.showConnectors }))}>show Connectors</SelectOption>

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/connections/ConnectionsTable.tsx

@@ -38,7 +38,7 @@ export const ConnectionsTable: React.FunctionComponent<Navigate> = (navigate) =>
     { id: 'protocol', name: 'Protocol', visible: true, sortable: true, filterable: true },
     { id: 'sessionCount', name: 'Session Count', visible: true, sortable: true, filterable: true, filter: getSessionFilter, filterTab: 2 },
     { id: 'remoteAddress', name: 'Remote Address', visible: true, sortable: true, filterable: true },
-    { id: 'localAddress', name: 'Local Address"', visible: true, sortable: true, filterable: true },
+    { id: 'localAddress', name: 'Local Address', visible: true, sortable: true, filterable: true },
     { id: 'session', name: 'Session ID', visible: true, sortable: true, filterable: false },
     { id: 'creationTime', name: 'Creation Time', visible: true, sortable: true, filterable: false }
   ];

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/messages/SendMessage.tsx

@@ -292,7 +292,7 @@ export const SendMessage: React.FunctionComponent<SendMessageProps> = (props: Se
 
   return (
     <PageSection variant='light'>
-      <Title headingLevel='h1'>Send Message to {props.isAddress ? 'Address' : 'Queue'} {props.address}
+      <Title headingLevel='h2'>Send Message to {props.isAddress ? 'Address' : 'Queue'} {props.address}{' '}
         <Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover></Title>
       <Text component='p'>  <br /></Text>
       <Form onSubmit={handleSubmit}>

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/CreateQueue.tsx

@@ -127,7 +127,7 @@ export const CreateQueue: React.FunctionComponent<CreateQueueProps> = (props: Cr
     )
     return (
         <>
-            <Title headingLevel="h2">Create Queue on Address {props.address}
+            <Title headingLevel="h2">Create Queue on Address {props.address}{' '}
                 <Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover>
             </Title>
             <Text component='p'>  <br /></Text>
@@ -193,7 +193,7 @@ export const CreateQueue: React.FunctionComponent<CreateQueueProps> = (props: Cr
                         onChange={() => handlePurgeChange(!isPurgeChecked)}
                         id="purge" />
                 </FormGroup>
-                <FormGroup label="extra configuration" labelIcon={
+                <FormGroup label="Extra configuration" labelIcon={
                     <Tooltip content={<Text>Specify additional configuration items, that are not exposed, as a set of key-value pairs in JSON format. For example, <code>delay-before-dispatch</code> or <code>auto-delete</code>.</Text>}><InfoCircleIcon /></Tooltip>}
                 >
                     {/* eslint-disable-next-line react/jsx-no-undef */}

artemis-console-extension/artemis-extension/src/artemis-extension/artemis/queues/DeleteQueue.tsx

@@ -14,11 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ActionGroup, Button, Form, Modal, ModalVariant, Title } from '@patternfly/react-core';
+import { ActionGroup, Button, Form, Modal, ModalVariant, Popover, TextContent, Title, Text } from '@patternfly/react-core';
 import React, { useState } from 'react'
-import { ConnectHint } from '../util/ConnectHint';
 import { eventService, workspace } from '@hawtio/react';
 import { artemisService } from '../artemis-service';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 type DeleteQueueProps = {
   queue: string
@@ -70,19 +70,35 @@ export const DeleteQueue: React.FunctionComponent<DeleteQueueProps> = (props: De
       });
   };
 
+  const HintDelete = () => (
+    <TextContent>
+      <Text component='p'>
+      Delete the selected broker queue. The queue is deleted only if it has no consumers bound to it.
+      </Text>
+    </TextContent>
+  )
+  const HintPurge = () => (
+    <TextContent>
+      <Text component='p'>
+      Delete all the messages in the selected broker queue.
+      </Text>
+    </TextContent>
+  )
+
   return (
     <>
-      <Title headingLevel="h2">Delete/Purge Queue {props.queue}</Title>
-      <ConnectHint text={["Delete the selected broker queue. The queue is deleted only if it has no consumers bound to it."]}/>
+      <Title headingLevel="h2">Delete/Purge Queue {props.queue}{' '}
+      </Title>
       <Form>
         <ActionGroup>
           <Button variant="primary" onClick={() => setShowDeleteModal(true)} >Delete</Button>
+          <Text>{' '}<Popover bodyContent={HintDelete}><OutlinedQuestionCircleIcon /></Popover></Text>
         </ActionGroup>
       </Form>
-      <ConnectHint text={["Delete all the messages in the selected broker queue."]}/>
       <Form>
         <ActionGroup>
           <Button variant="primary" onClick={() => setShowPurgeModal(true)} >Purge</Button>
+          <Text>{' '}<Popover bodyContent={HintPurge}><OutlinedQuestionCircleIcon /></Popover></Text>
         </ActionGroup>
       </Form>
       <Modal