From e71b344b598c77a0af6ea414abb721666118353c Mon Sep 17 00:00:00 2001
From: Maximiliano Ibarra <6089438+Machi3mfl@users.noreply.github.com>
Date: Wed, 4 Jan 2023 10:59:41 -0300
Subject: [PATCH] Added default selected options in Deploy Agent page (#5063)

* Added default selected options

* Updated CHANGELOG

* Removed unused code

* Added unit tests

* Cleaned imports
---
 CHANGELOG.md                                  |   1 +
 .../agent/components/register-agent.js        | 315 ++++++++----------
 .../register-agent-button-group.test.tsx.snap | 144 ++++++++
 .../register-agent-button-group.test.tsx      | 103 ++++++
 .../register-agent-button-group.tsx           |  54 +++
 .../controllers/agent/wazuh-config/index.ts   |  20 +-
 6 files changed, 451 insertions(+), 186 deletions(-)
 create mode 100644 public/controllers/agent/register-agent/__snapshots__/register-agent-button-group.test.tsx.snap
 create mode 100644 public/controllers/agent/register-agent/register-agent-button-group.test.tsx
 create mode 100644 public/controllers/agent/register-agent/register-agent-button-group.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c01822315..ecc1a14bd1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Deploy new agent section: Added link for additional steps to alpine os. [#4933](https://github.com/wazuh/wazuh-kibana-app/pull/4933)
 - Added file saving conditions in File Editor [#4970](https://github.com/wazuh/wazuh-kibana-app/pull/4970)
 - Added character validation to avoid invalid agent names in the section 'Deploy new agent'. [#5021](https://github.com/wazuh/wazuh-kibana-app/pull/5021) [#5028](https://github.com/wazuh/wazuh-kibana-app/pull/5028)
+- Added default selected options in Deploy Agent page [#5063](https://github.com/wazuh/wazuh-kibana-app/pull/5063)
 
 ### Changed
 
diff --git a/public/controllers/agent/components/register-agent.js b/public/controllers/agent/components/register-agent.js
index 874f0b367d..1c572951df 100644
--- a/public/controllers/agent/components/register-agent.js
+++ b/public/controllers/agent/components/register-agent.js
@@ -77,6 +77,8 @@ import {
   fetchClusterNodesOptions,
 } from './register-agent-service';
 import { PrincipalButtonGroup } from './wz-accordion';
+import RegisterAgentButtonGroup from '../register-agent/register-agent-button-group';
+import '../../../styles/common.scss';
 
 export const RegisterAgent = withErrorBoundary(
   class RegisterAgent extends Component {
@@ -1632,32 +1634,6 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
         },
       ];
 
-      const buttonGroup = (legend, options, idSelected, onChange) => {
-        return (
-          <EuiButtonGroup
-            color='primary'
-            legend={legend}
-            options={options}
-            idSelected={idSelected}
-            onChange={onChange}
-            className={'osButtonsStyle'}
-          />
-        );
-      };
-
-      const selectedVersionMac = (legend, options, idSelected, onChange) => {
-        return (
-          <EuiButtonGroup
-            color='primary'
-            legend={legend}
-            options={options}
-            idSelected={idSelected}
-            onChange={onChange}
-            className={'osButtonsStyleMac'}
-          />
-        );
-      };
-
       const onChangeServerAddress = async selectedNodes => {
         if (selectedNodes.length === 0) {
           this.setState({
@@ -1713,12 +1689,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsRedHat,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsRedHat}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1726,12 +1701,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsOracleLinux,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsOracleLinux}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1739,12 +1713,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsRaspbian,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsRaspbian}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1752,12 +1725,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonAmazonLinux,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonAmazonLinux}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1765,12 +1737,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsCentos,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsCentos}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1778,12 +1749,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonFedora,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonFedora}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1791,12 +1761,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsDebian,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsDebian}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1804,12 +1773,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsUbuntu,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsUbuntu}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1817,12 +1785,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsWindows,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsWindows}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1830,12 +1797,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: selectedVersionMac(
-                  'Choose the version',
-                  versionButtonsMacOS,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsMacOS}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1843,12 +1809,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: selectedVersionMac(
-                  'Choose the version',
-                  versionButtonsSuse,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsSuse}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1856,12 +1821,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsOpenSuse,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsOpenSuse}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1869,12 +1833,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsSolaris,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsSolaris}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1882,12 +1845,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsAix,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsAix}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1895,12 +1857,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonsHPUX,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonsHPUX}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1908,12 +1869,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the version',
-                children: buttonGroup(
-                  'Choose the version',
-                  versionButtonAlpine,
-                  this.state.selectedVersion,
-                  version => this.setVersion(version),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the version'
+                  options={versionButtonAlpine}
+                  idSelected={this.state.selectedVersion}
+                  onChange={version => this.setVersion(version)} />,
               },
             ]
           : []),
@@ -1924,12 +1884,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architecturei386Andx86_64,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup 
+                  legend='Choose the architecture'
+                  options={architecturei386Andx86_64}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -1937,12 +1896,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsWithPPC64LE,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup 
+                  legend='Choose the architecture'
+                  options={architectureButtonsWithPPC64LE}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -1950,12 +1908,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsWithPPC64LEAlpine,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsWithPPC64LEAlpine}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -1972,12 +1929,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtons,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtons}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -1990,12 +1946,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsWithPPC64LE,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsWithPPC64LE}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -2005,12 +1960,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsi386,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsi386}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -2018,12 +1972,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsMacos,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsMacos}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -2032,12 +1985,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsSolaris,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsSolaris}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -2045,12 +1997,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsAix,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsAix}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -2058,12 +2009,11 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
           ? [
               {
                 title: 'Choose the architecture',
-                children: buttonGroup(
-                  'Choose the architecture',
-                  architectureButtonsHpUx,
-                  this.state.selectedArchitecture,
-                  architecture => this.setArchitecture(architecture),
-                ),
+                children: <RegisterAgentButtonGroup
+                  legend='Choose the architecture'
+                  options={architectureButtonsHpUx}
+                  idSelected={this.state.selectedArchitecture}
+                  onChange={architecture => this.setArchitecture(architecture)} />
               },
             ]
           : []),
@@ -2179,7 +2129,6 @@ apk add wazuh-agent=${this.state.wazuhVersion}-r1`,
                       this.state.selectedVersion == 'centos7' ||
                       this.state.selectedVersion == 'suse11' ||
                       this.state.selectedVersion == 'suse12' ||
-                      this.state.selectedVersion == 'oraclelinux5' ||
                       this.state.selectedVersion == 'amazonlinux2' ||
                       this.state.selectedVersion == '22' ||
                       this.state.selectedVersion == 'debian8' ||
diff --git a/public/controllers/agent/register-agent/__snapshots__/register-agent-button-group.test.tsx.snap b/public/controllers/agent/register-agent/__snapshots__/register-agent-button-group.test.tsx.snap
new file mode 100644
index 0000000000..6c8f5a2361
--- /dev/null
+++ b/public/controllers/agent/register-agent/__snapshots__/register-agent-button-group.test.tsx.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegisterAgentButtonGroup should render correctly 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <fieldset
+        class="euiButtonGroup__fieldset"
+      >
+        <legend
+          class="euiScreenReaderOnly"
+        >
+          Test legend
+        </legend>
+        <div
+          class="euiButtonGroup euiButtonGroup--s wz-flex"
+        >
+          <div
+            class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+          >
+            <input
+              aria-label="test"
+              class="euiToggle__input euiButtonToggle__input"
+              title="test"
+              type="radio"
+              value=""
+            />
+            <button
+              class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonGroup__button"
+              id="test"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  test
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  </body>,
+  "container": <div>
+    <fieldset
+      class="euiButtonGroup__fieldset"
+    >
+      <legend
+        class="euiScreenReaderOnly"
+      >
+        Test legend
+      </legend>
+      <div
+        class="euiButtonGroup euiButtonGroup--s wz-flex"
+      >
+        <div
+          class="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
+        >
+          <input
+            aria-label="test"
+            class="euiToggle__input euiButtonToggle__input"
+            title="test"
+            type="radio"
+            value=""
+          />
+          <button
+            class="euiButton euiButton--primary euiButton--small euiButtonToggle euiButtonGroup__button"
+            id="test"
+            tabindex="-1"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButton__content"
+            >
+              <span
+                class="euiButton__text"
+              >
+                test
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </fieldset>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/public/controllers/agent/register-agent/register-agent-button-group.test.tsx b/public/controllers/agent/register-agent/register-agent-button-group.test.tsx
new file mode 100644
index 0000000000..22a0799e18
--- /dev/null
+++ b/public/controllers/agent/register-agent/register-agent-button-group.test.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import RegisterAgentButtonGroup from './register-agent-button-group';
+
+describe('RegisterAgentButtonGroup', () => {
+  it('should render correctly', () => {
+    const buttonsOpts = [{ id: 'test', label: 'test' }];
+    const wrapper = render(
+      <RegisterAgentButtonGroup
+        legend='Test legend'
+        idSelected=''
+        options={buttonsOpts}
+        onChange={() => {}}
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render the label text', () => {
+    const buttonsOpts = [{ id: 'test', label: 'test' }];
+    const { getByText } = render(
+      <RegisterAgentButtonGroup
+        legend='Test legend'
+        idSelected=''
+        options={buttonsOpts}
+        onChange={() => {}}
+      />,
+    );
+    expect(getByText('Test legend')).toBeInTheDocument();
+  });
+
+  it('should auto select button when the group have only one button in options list', () => {
+    const mockedOnChange = jest.fn();
+    const buttonsOpts = [{ id: 'test', label: 'test' }];
+    render(
+      <RegisterAgentButtonGroup
+        legend='Test legend'
+        idSelected=''
+        options={buttonsOpts}
+        onChange={mockedOnChange}
+      />,
+    );
+    expect(mockedOnChange).toBeCalledWith(buttonsOpts[0].id);
+  });
+
+  it('should auto select button when the group have an option with the default property in true', () => {
+    const mockedOnChange = jest.fn();
+    const buttonsOpts = [
+      { id: 'test', label: 'test' },
+      { id: 'auto-selected', label: 'test2', default: true },
+    ];
+    render(
+      <RegisterAgentButtonGroup
+        legend='Test legend'
+        idSelected=''
+        options={buttonsOpts}
+        onChange={mockedOnChange}
+      />,
+    );
+    expect(mockedOnChange).toBeCalledWith(buttonsOpts[1].id);
+  });
+
+  it('should auto select the first button when the group have more than one option with the default property in true', () => {
+    const mockedOnChange = jest.fn();
+    const buttonsOpts = [
+      { id: 'test', label: 'test' },
+      { id: 'auto-selected', label: 'test2', default: true },
+      { id: 'auto-selected2', label: 'test3', default: true },
+    ];
+    render(
+      <RegisterAgentButtonGroup
+        legend='Test legend'
+        idSelected=''
+        options={buttonsOpts}
+        onChange={mockedOnChange}
+      />,
+    );
+    expect(mockedOnChange).toBeCalledWith(buttonsOpts[1].id);
+  });
+
+  it('should render the correct number of buttons defined in the options received', () => {
+    const mockedOnChange = jest.fn();
+    const buttonsOpts = [
+      { id: 'test', label: 'test' },
+      { id: 'test2', label: 'test2' },
+      { id: 'test3', label: 'test3' },
+    ];
+    const { getByText, getByRole } = render(
+      <RegisterAgentButtonGroup
+        legend='Test legend'
+        idSelected=''
+        options={buttonsOpts}
+        onChange={mockedOnChange}
+      />,
+    );
+
+    buttonsOpts.forEach((button) => {
+      expect(getByText(button.label)).toBeInTheDocument();
+    })
+  });
+
+});
diff --git a/public/controllers/agent/register-agent/register-agent-button-group.tsx b/public/controllers/agent/register-agent/register-agent-button-group.tsx
new file mode 100644
index 0000000000..bf7b40546e
--- /dev/null
+++ b/public/controllers/agent/register-agent/register-agent-button-group.tsx
@@ -0,0 +1,54 @@
+import { EuiButtonGroup } from '@elastic/eui';
+import React, { useEffect } from 'react';
+
+interface RegisterAgentButtonGroupProps {
+  legend: string;
+  options: Array<{id: string, label: string, default?: boolean}>;
+  idSelected: string;
+  onChange: (value: string) => void;
+}
+
+export default function RegisterAgentButtonGroup({
+  legend,
+  options,
+  idSelected,
+  onChange,
+}: RegisterAgentButtonGroupProps) {
+
+  useEffect(() => {
+    setDefaultOptions();
+  }, []);
+
+  useEffect(() => {
+    setDefaultOptions();
+  }, [options, idSelected])
+
+  /**
+   * Set default option
+   * Autoselect option when there is only one option
+   * Autoselect option when an option have default property in true
+   */
+  const setDefaultOptions = () => {
+    if(!idSelected){ // prevent autoselect every time the options change
+      if (options.length === 1) {
+        idSelected = options[0].id;
+        onChange(options[0].id);
+      }else if(options.filter(item => item.default).length > 0){
+        const defaultOption = options.filter(item => item.default)[0].id
+        idSelected = defaultOption;
+        onChange(defaultOption);
+      }
+    }
+  };
+
+  return (
+    <EuiButtonGroup
+      color='primary'
+      legend={legend}
+      options={options}
+      idSelected={idSelected}
+      onChange={onChange}
+      className={'wz-flex'}
+    />
+  );
+}
diff --git a/public/controllers/agent/wazuh-config/index.ts b/public/controllers/agent/wazuh-config/index.ts
index cf53fdcd44..e555fb5517 100644
--- a/public/controllers/agent/wazuh-config/index.ts
+++ b/public/controllers/agent/wazuh-config/index.ts
@@ -6,6 +6,7 @@ const architectureButtons = [
   {
     id: 'x86_64',
     label: 'x86_64',
+    default: true
   },
   {
     id: 'armhf',
@@ -25,6 +26,7 @@ const architectureButtonsWithPPC64LE = [
   {
     id: 'x86_64',
     label: 'x86_64',
+    default: true
   },
   {
     id: 'armhf',
@@ -52,6 +54,7 @@ const architectureButtonsWithPPC64LEAlpine = [
   {
     id: 'x86_64',
     label: 'x86_64',
+    default: true
   },
   {
     id: 'armhf',
@@ -82,6 +85,7 @@ const architecturei386Andx86_64 = [
   {
     id: 'x86_64',
     label: 'x86_64',
+    default: true
   },
 ];
 
@@ -89,6 +93,7 @@ const architectureButtonsSolaris = [
   {
     id: 'i386',
     label: 'i386',
+    default: true
   },
   {
     id: 'sparc',
@@ -129,6 +134,7 @@ const versionButtonAmazonLinux = [
   {
     id: 'amazonlinux2022',
     label: 'Amazon Linux 2022',
+    default: true
   },
 ];
 
@@ -144,21 +150,23 @@ const versionButtonsRedHat = [
   {
     id: 'redhat7',
     label: 'Red Hat 7 +',
+    default: true
   },
 ];
 
 const versionButtonsCentos = [
   {
     id: 'centos5',
-    label: 'Centos 5',
+    label: 'CentOS 5',
   },
   {
     id: 'centos6',
-    label: 'Centos 6',
+    label: 'CentOS 6',
   },
   {
     id: 'centos7',
-    label: 'Centos 7 +',
+    label: 'CentOS 7 +',
+    default: true
   },
 ];
 
@@ -174,6 +182,7 @@ const versionButtonsDebian = [
   {
     id: 'debian9',
     label: 'Debian 9 +',
+    default: true
   },
 ];
 
@@ -192,6 +201,7 @@ const versionButtonsUbuntu = [
   {
     id: 'ubuntu15',
     label: 'Ubuntu 15 +',
+    default: true
   },
 ];
 
@@ -207,6 +217,7 @@ const versionButtonsWindows = [
   {
     id: 'windows7',
     label: 'Windows 7 +',
+    default: true
   },
 ];
 
@@ -218,6 +229,7 @@ const versionButtonsSuse = [
   {
     id: 'suse12',
     label: 'SUSE 12',
+    default: true
   },
 ];
 
@@ -243,6 +255,7 @@ const versionButtonsSolaris = [
   {
     id: 'solaris11',
     label: 'Solaris 11',
+    default: true
   },
 ];
 
@@ -268,6 +281,7 @@ const versionButtonsOracleLinux = [
   {
     id: 'oraclelinux6',
     label: 'Oracle Linux 6 +',
+    default: true
   },
 ];