Standardize titles and subtitles in the register agent wizard

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Added
 
+- Added contextual information in the register agent commands [#6208](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6208)
 - Support for Wazuh 4.7.2
 - Added host name and board serial information to Agents > Inventory data [#6191](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6191)
 

plugins/main/public/controllers/agent/components/agents-preview.scss

@@ -57,7 +57,7 @@
     position: absolute;
     top: 0;
     width: 100%;
-    height: 90%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;

plugins/main/public/controllers/register-agent/components/command-output/command-output.tsx

@@ -55,7 +55,6 @@ export default function CommandOutput(props: ICommandSectionProps) {
   const onChangeShowPassword = (event: EuiSwitchEvent) => {
     setShowPassword(event.target.checked);
   };
-
   return (
     <Fragment>
       <EuiSpacer />
@@ -64,6 +63,7 @@ export default function CommandOutput(props: ICommandSectionProps) {
           <EuiCodeBlock
             style={{
               zIndex: '100',
+              wordWrap: 'break-word',
             }}
             language='tsx'
           >

plugins/main/public/controllers/register-agent/components/command-output/os-warning.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { EuiCallOut } from '@elastic/eui';
+import { tOperatingSystem } from '../../core/config/os-commands-definitions';
+
+interface OsWarningProps {
+  os?: tOperatingSystem['name'];
+}
+
+export default function OsCommandWarning(props: OsWarningProps) {
+  const osSelector = {
+    WINDOWS: (
+      <EuiCallOut title='Requirements' iconType='iInCircle'>
+        <ul className='wz-callout-list'>
+          <li>
+            <span>
+              You will need administrator privileges to perform this
+              installation.
+            </span>
+          </li>
+          <li>
+            <span>PowerShell 3.0 or greater is required.</span>
+          </li>
+        </ul>
+        <p>
+          Keep in mind you need to run this command in a Windows PowerShell
+          terminal.
+        </p>
+      </EuiCallOut>
+    ),
+    LINUX: (
+      <EuiCallOut title='Requirements' iconType='iInCircle'>
+        <ul className='wz-callout-list'>
+          <li>
+            <span>
+              You will need administrator privileges to perform this
+              installation.
+            </span>
+          </li>
+          <li>
+            <span>Shell Bash is required.</span>
+          </li>
+        </ul>
+        <p>
+          Keep in mind you need to run this command in a Shell Bash terminal.
+        </p>
+      </EuiCallOut>
+    ),
+    macOS: (
+      <EuiCallOut title='Requirements' iconType='iInCircle'>
+        <ul className='wz-callout-list'>
+          <li>
+            <span>
+              You will need administrator privileges to perform this
+              installation.
+            </span>
+          </li>
+          <li>
+            <span>Shell Bash is required.</span>
+          </li>
+        </ul>
+        <p>
+          Keep in mind you need to run this command in a Shell Bash terminal.
+        </p>
+      </EuiCallOut>
+    ),
+  };
+
+  return osSelector[props?.os] || null;
+}

plugins/main/public/controllers/register-agent/components/group-input/group-input.tsx

@@ -45,7 +45,7 @@ const GroupInput = ({ value, options, onChange }) => {
       >
         <EuiFlexItem grow={false}>
           <p className='registerAgentLabels'>
-            Select one or more existing groups
+            Select one or more existing groups:
           </p>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

plugins/main/public/controllers/register-agent/components/optionals-inputs/optionals-inputs.tsx

@@ -27,7 +27,7 @@ const OptionalsInputs = (props: OptionalsInputsProps) => {
   const agentNameDocLink = webDocumentationLink(
     'user-manual/reference/ossec-conf/client.html#enrollment-agent-name',
     PLUGIN_VERSION_SHORT,
-  )
+  );
   const popoverAgentName = (
     <span>
       Learn about{' '}
@@ -64,7 +64,7 @@ const OptionalsInputs = (props: OptionalsInputsProps) => {
               gutterSize='s'
             >
               <EuiFlexItem grow={false}>
-                <p className='registerAgentLabels'>Assign an agent name</p>
+                <p className='registerAgentLabels'>Assign an agent name:</p>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiPopover
@@ -94,11 +94,16 @@ const OptionalsInputs = (props: OptionalsInputsProps) => {
       />
       <EuiCallOut
         color='warning'
-        title={<span>{warningForAgentName}<EuiLink
-          target='_blank'
-          href={agentNameDocLink}
-          rel='noopener noreferrer'
-        /></span>}
+        title={
+          <span>
+            {warningForAgentName}
+            <EuiLink
+              target='_blank'
+              href={agentNameDocLink}
+              rel='noopener noreferrer'
+            />
+          </span>
+        }
         iconType='iInCircle'
         className='warningForAgentName'
       />

plugins/main/public/controllers/register-agent/components/server-address/server-address.tsx

@@ -66,7 +66,7 @@ const ServerAddressInput = (props: ServerAddressInputProps) => {
             >
               <EuiFlexItem grow={false}>
                 <span className='registerAgentLabels'>
-                  Assign a server address
+                  Assign a server address:
                 </span>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>

plugins/main/public/controllers/register-agent/containers/steps/steps.scss

@@ -32,10 +32,6 @@
     margin-top: 10px;
   }
 
-  .euiToolTipAnchor {
-    margin-left: 7px;
-  }
-
   .subtitleAgentName {
     flex-direction: 'row';
     font-style: 'normal';

plugins/main/public/controllers/register-agent/containers/steps/steps.tsx

@@ -33,6 +33,7 @@ import {
   tFormStepsLabel,
 } from '../../services/register-agent-steps-status-services';
 import { webDocumentationLink } from '../../../../../common/services/web_documentation';
+import OsCommandWarning from '../../components/command-output/os-warning';
 
 interface IStepsProps {
   needsPassword: boolean;
@@ -141,14 +142,14 @@ export const Steps = ({
       status: getOSSelectorStepStatus(form.fields),
     },
     {
-      title: 'Server address',
+      title: 'Server address:',
       children: <ServerAddress formField={form.fields.serverAddress} />,
       status: getServerAddressStepStatus(form.fields),
     },
     ...(needsPassword && !wazuhPassword
       ? [
           {
-            title: 'Wazuh password',
+            title: 'Wazuh password:',
             children: (
               <EuiCallOut
                 color='warning'
@@ -176,16 +177,15 @@ export const Steps = ({
         ]
       : []),
     {
-      title: 'Optional settings',
+      title: 'Optional settings:',
       children: <OptionalsInputs formFields={form.fields} />,
       status: getOptionalParameterStepStatus(
         form.fields,
         installCommandWasCopied,
       ),
     },
     {
-      title:
-        'Run the following commands to download and install the Wazuh agent:',
+      title: 'Run the following commands to download and install the agent:',
       children: (
         <>
           {missingStepsName?.length ? (
@@ -208,20 +208,25 @@ export const Steps = ({
             />
           ) : null}
           {!missingStepsName?.length && !invalidFieldsName?.length ? (
-            <CommandOutput
-              commandText={installCommand}
-              showCommand={showCommandsSections(form.fields)}
-              os={registerAgentFormValues.operatingSystem.name}
-              onCopy={() => setInstallCommandWasCopied(true)}
-              password={registerAgentFormValues.optionalParams.wazuhPassword}
-            />
+            <>
+              <CommandOutput
+                commandText={installCommand}
+                showCommand={showCommandsSections(form.fields)}
+                os={registerAgentFormValues.operatingSystem.name}
+                onCopy={() => setInstallCommandWasCopied(true)}
+                password={registerAgentFormValues.optionalParams.wazuhPassword}
+              />
+              <OsCommandWarning
+                os={registerAgentFormValues.operatingSystem.name}
+              />
+            </>
           ) : null}
         </>
       ),
       status: installCommandStepStatus,
     },
     {
-      title: 'Start the Wazuh agent:',
+      title: 'Start the agent:',
       children: (
         <>
           {missingStepsName?.length ? (

plugins/main/public/controllers/register-agent/utils/register-agent-data.tsx

@@ -34,14 +34,14 @@ export const SERVER_ADDRESS_TEXTS = [
   {
     title: 'Server address',
     subtitle:
-      'This is the address the agent uses to communicate with the Wazuh server. Enter an IP address or a fully qualified domain name (FDQN).',
+      'This is the address the agent uses to communicate with the server. Enter an IP address or a fully qualified domain name (FDQN).',
   },
 ];
 
 export const OPTIONAL_PARAMETERS_TEXT = [
   {
     title: 'Optional settings',
     subtitle:
-      'The deployment sets the endpoint hostname as the agent name by default. Optionally, you can set your own name in the field below.',
+      'By default, the deployment uses the hostname as the agent name. Optionally, you can use a different agent name in the field below.',
   },
 ];