ARTEMIS-6000 - move additional options in the same row

Author: GChuf

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

@@ -278,61 +278,85 @@ export const SendMessage: React.FunctionComponent<SendMessageProps> = (props: Se
   return (
     <PageSection variant='light'>
       <Title headingLevel='h2'>Send Message to {props.isAddress ? 'Address' : 'Queue'} {props.address}{' '}
-        <Popover bodyContent={Hint}><OutlinedQuestionCircleIcon /></Popover></Title>
-      <Text component='p'>  <br /></Text>
+        <Popover bodyContent={Hint}>
+          <OutlinedQuestionCircleIcon />
+        </Popover>
+      </Title>
+
+      <Text component='p'><br /></Text>
+
       <Form onSubmit={handleSubmit}>
-        <FormGroup
-          label="Durable"
-          labelIcon={<Tooltip content='Mark the message as persistent and write it to the broker journal if the destination queue is durable.'><InfoCircleIcon /></Tooltip>}
-        >
-          <Checkbox
-            isChecked={isDurableChecked}
-            onChange={() => setIsDurableChecked(!isDurableChecked)}
-            id="durable" />
 
-        </FormGroup>
-        <FormGroup label="Create Message ID"
-          labelIcon={
-            <Tooltip content='Select to request that the broker generates a universally unique identifier (UUID) on the message before it is routed. For a JMS client, the UUID is the JMS Message ID of the message. Normally, not required if you are using a non-JMS client.'><InfoCircleIcon />
-            </Tooltip>}>
-          <Checkbox
-            isChecked={isCreateIDChecked}
-            onChange={() => setIsCreateIDChecked(!isCreateIDChecked)}
-            id="createid" />
-        </FormGroup>
-        <FormGroup label="Use Current Logged in User"
-          labelIcon={<Tooltip content='Use the credentials of the user that is currently logged in to the console to send a message. If you want to use a different user, clear the checkbox and specify a username and password.'><InfoCircleIcon /></Tooltip>}
+        <Flex
+          direction={{ default: 'column', md: 'row' }}
+          gap={{ default: 'gapMd' }}
+          alignItems={{ default: 'alignItemsFlexEnd' }}
         >
-          <Checkbox
-            isChecked={isUseLogonChecked}
-            onChange={() => setIsUselogonChecked(!isUseLogonChecked)}
-            id="uselogon" />
-        </FormGroup>
-        {!isUseLogonChecked &&
-          <><FormGroup label="Username">
-            <TextInput
-              value={username}
-              type='text'
-              onChange={handleUsernameChange}
-              id="username"
-              name="username" />
-          </FormGroup><FormGroup label="Password">
+          <FlexItem>
+            <FormGroup
+              label="Durable"
+              labelIcon={<Tooltip content='Mark the message as persistent and write it to the broker journal if the destination queue is durable.'><InfoCircleIcon /></Tooltip>}>
+              <Checkbox
+                isChecked={isDurableChecked}
+                onChange={() => setIsDurableChecked(!isDurableChecked)}
+                id="durable"/>
+            </FormGroup>
+          </FlexItem>
+
+          <FlexItem>
+            <FormGroup
+              label="Create Message ID"
+              labelIcon={<Tooltip content='Select to request that the broker generates a universally unique identifier (UUID) on the message before it is routed.'><InfoCircleIcon /></Tooltip>}>
+              <Checkbox
+                isChecked={isCreateIDChecked}
+                onChange={() => setIsCreateIDChecked(!isCreateIDChecked)}
+                id="createid"/>
+            </FormGroup>
+          </FlexItem>
+
+          <FlexItem>
+            <FormGroup
+              label="Use Current Logged in User"
+              labelIcon={<Tooltip content='Use the credentials of the user that is currently logged in to the console.'><InfoCircleIcon /></Tooltip>}>
+              <Checkbox
+                isChecked={isUseLogonChecked}
+                onChange={() => setIsUselogonChecked(!isUseLogonChecked)}
+                id="uselogon"/>
+            </FormGroup>
+          </FlexItem>
+        </Flex>
+
+        {!isUseLogonChecked && (
+          <>
+            <FormGroup label="Username">
+              <TextInput
+                value={username}
+                type='text'
+                onChange={handleUsernameChange}
+                id="username"
+                name="username"/>
+            </FormGroup>
+
+            <FormGroup label="Password">
               <TextInput
                 value={password}
                 type='password'
                 onChange={handlePasswordChange}
                 id="password"
-                name="password" />
-            </FormGroup></>
-        }
+                name="password"/>
+            </FormGroup>
+          </>
+        )}
+
         <MessageHeaders onHeadersChange={updateHeaders} headers={props.message?.StringProperties}/>
-        <MessageBody onBodyChange={updateTheMessageBody} body={props.message?.text} />
-        <FormGroup>
+        <MessageBody onBodyChange={updateTheMessageBody} body={props.message?.text}/>
 
+        <FormGroup>
           <Button type='submit' className='pf-m-1-col'>
             Send
           </Button>
         </FormGroup>
+
       </Form>
     </PageSection>
   )