[Redesign add agent] Integration commands generator with UI

public/components/common/form/types.ts

@@ -70,8 +70,9 @@ interface EnhancedCustomField extends EnhancedField {
   component: (props: any) => JSX.Element;
 }
 
+export type EnhancedFieldConfiguration = EnhancedDefaultField | EnhancedCustomField;
 export interface EnhancedFields {
-  [key: string]: EnhancedDefaultField | EnhancedCustomField;
+  [key: string]: EnhancedFieldConfiguration;
 }
 
 export interface UseFormReturn {

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

@@ -0,0 +1,18 @@
+import { EuiCodeBlock } from '@elastic/eui';
+import React, { Fragment } from 'react';
+
+interface ICommandSectionProps {
+  commandText: string;
+  showCommand: boolean;
+}
+
+export default function CommandOutput(props: ICommandSectionProps) {
+  const { commandText, showCommand } = props;
+  return (
+    <Fragment>
+      <EuiCodeBlock language='shell' isCopyable>
+        {showCommand ? commandText : ''}
+      </EuiCodeBlock>
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,102 @@
+import React, { Fragment, useState } from 'react';
+import { UseFormReturn } from '../../../../components/common/form/types';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiPopover,
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiLink,
+} from '@elastic/eui';
+import { InputForm } from '../../../../components/common/form';
+import { OPTIONAL_PARAMETERS_TEXT } from '../../utils/register-agent-data';
+import { webDocumentationLink } from '../../../../../common/services/web_documentation';
+import { PLUGIN_VERSION_SHORT } from '../../../../../common/constants';
+interface OptionalsInputsProps {
+  formFields: UseFormReturn['fields'];
+}
+
+const OptionalsInputs = (props: OptionalsInputsProps) => {
+  const { formFields } = props;
+  const [isPopoverAgentName, setIsPopoverAgentName] = useState(false);
+  const onButtonAgentName = () =>
+    setIsPopoverAgentName(isPopoverAgentName => !isPopoverAgentName);
+  const closeAgentName = () => setIsPopoverAgentName(false);
+
+  const popoverAgentName = (
+    <span>
+      Learn about{' '}
+      <EuiLink
+        href={webDocumentationLink(
+          'user-manual/reference/ossec-conf/client.html#enrollment-agent-name',
+          PLUGIN_VERSION_SHORT,
+        )}
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        Assigning an agent name.
+      </EuiLink>
+    </span>
+  );
+
+  const warningForAgentName =
+    'The agent name must be unique. It can’t be changed once the agent has been enrolled.';
+  return (
+    <Fragment>
+      <EuiFlexGroup gutterSize='s' wrap>
+        {OPTIONAL_PARAMETERS_TEXT.map((data, index) => (
+          <EuiFlexItem key={index}>
+            <EuiText className='stepSubtitle'>{data.subtitle}</EuiText>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <InputForm
+        {...formFields.agentName}
+        fullWidth={false}
+        label={
+          <>
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  button={
+                    <EuiButtonEmpty
+                      iconType='questionInCircle'
+                      iconSide='right'
+                      onClick={onButtonAgentName}
+                      style={{
+                        flexDirection: 'row',
+                        fontStyle: 'normal',
+                        fontWeight: 700,
+                        fontSize: '12px',
+                        lineHeight: '20px',
+                        color: '#343741',
+                      }}
+                    >
+                      Assign an agent name
+                    </EuiButtonEmpty>
+                  }
+                  isOpen={isPopoverAgentName}
+                  closePopover={closeAgentName}
+                  anchorPosition='rightCenter'
+                >
+                  {popoverAgentName}
+                </EuiPopover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </>
+        }
+        placeholder='Agent name'
+      />
+      <EuiCallOut
+        color='warning'
+        title={warningForAgentName}
+        iconType='iInCircle'
+        className='warningForAgentName'
+      />
+      <InputForm {...formFields.agentGroups}></InputForm>
+    </Fragment>
+  );
+};
+
+export default OptionalsInputs;

public/controllers/register-agent/components/step-one/os-card/os-card.tsx → public/controllers/register-agent/components/os-selector/os-card/os-card.tsx

@@ -7,21 +7,22 @@ import {
   EuiLink,
   EuiCheckbox,
 } from '@elastic/eui';
-import { REGISTER_AGENT_DATA_STEP_ONE } from '../../../utils/register-agent-data';
-import { CheckboxGroupComponent } from '../../step-one/checkbox-group/checkbox-group';
+import { OPERATING_SYSTEMS_OPTIONS } from '../../../utils/register-agent-data';
+import { CheckboxGroupComponent } from '../checkbox-group/checkbox-group';
 import './os-card.scss';
 import { webDocumentationLink } from '../../../../../../common/services/web_documentation';
 
 interface Props {
   setStatusCheck: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
+  value: any;
 }
 
 export const OsCard = ({ onChange, value }: Props) => {
   return (
     <div data-testid='os-card'>
       <EuiFlexGroup gutterSize='l' wrap>
-        {REGISTER_AGENT_DATA_STEP_ONE.map((data, index) => (
+        {OPERATING_SYSTEMS_OPTIONS.map((data, index) => (
           <EuiFlexItem key={index}>
             <EuiCard
               title={

public/controllers/register-agent/components/server-address/server-address-input.tsx

@@ -0,0 +1,35 @@
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import React, { Fragment } from 'react';
+import { SERVER_ADDRESS_TEXTS } from '../../utils/register-agent-data';
+import { EnhancedFieldConfiguration } from '../../../../components/common/form/types';
+import { InputForm } from '../../../../components/common/form';
+
+interface ServerAddressInputProps {
+  formField: EnhancedFieldConfiguration;
+}
+
+const ServerAddressInput = (props: ServerAddressInputProps) => {
+  const { formField } = props;
+
+  return (
+    <Fragment>
+      <EuiFlexGroup gutterSize='s' wrap>
+        {SERVER_ADDRESS_TEXTS.map((data, index) => (
+          <EuiFlexItem key={index}>
+            <EuiText className='stepSubtitleServerAddress'>
+              {data.subtitle}
+            </EuiText>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+      <InputForm
+        {...formField}
+        label={<></>}
+        fullWidth={false}
+        placeholder='Server address'
+      />
+    </Fragment>
+  );
+};
+
+export default ServerAddressInput;

public/controllers/register-agent/components/server-address/server-address-title.tsx

@@ -0,0 +1,53 @@
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiLink, EuiPopover } from "@elastic/eui"
+import React, { useState } from "react";
+import { webDocumentationLink } from "../../../../../common/services/web_documentation";
+import { PLUGIN_VERSION_SHORT } from "../../../../../common/constants";
+
+const ServerAddressTitle = () => {
+    const [isPopoverServerAddress, setIsPopoverServerAddress] = useState(false);
+    const closeServerAddress = () => setIsPopoverServerAddress(false);
+    const onButtonServerAddress = () =>
+    setIsPopoverServerAddress(
+      isPopoverServerAddress => !isPopoverServerAddress,
+    );
+
+    const popoverServerAddress = (
+      <span>
+        Learn about{' '}
+        <EuiLink
+          href={webDocumentationLink(
+            'user-manual/reference/ossec-conf/client.html#groups',
+            PLUGIN_VERSION_SHORT,
+          )}
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Server address.
+        </EuiLink>
+      </span>
+    );
+
+    return (<EuiFlexGroup>
+    <EuiFlexItem grow={false}>
+      <EuiPopover
+        button={
+          <EuiButtonEmpty
+            iconType='questionInCircle'
+            iconSide='right'
+            onClick={onButtonServerAddress}
+            className='stepTitle'
+          >
+            Server address
+          </EuiButtonEmpty>
+        }
+        isOpen={isPopoverServerAddress}
+        closePopover={closeServerAddress}
+        anchorPosition='rightCenter'
+      >
+        {popoverServerAddress}
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>)
+}
+
+export default ServerAddressTitle;