5518 inputs logic server address name password and group (#5554)

* Add useForm hook types * Add custom field use in useForm hook * Add some code redeability fixes * Refactored useForm types and unit tests * Move types to types file * reuse of common form on the card * Card with logic * CheckboxGroup component logic update * CheckboxGroup component logic update * Adding card icons * update checkbox logic, styles, and card styles * clean code * clean code * gitignore Mac files * updating checkbox logic, styles, and card styles * step component * Passing interfaces to a separate file, updating styles, and component logic * Update interfaces and clean up code * update of folder structure and step logic * tcp, udp, protocols, password, groups, logics * input logic server address name password groups and styles * group input logic * oscards input logic * oscards input logic * styles * regex * styles and settings * styles * various adjustments * cleaning up code and changing some styles * cleaning up code * cleaning code * update password * gitignore * gitignore * correcting validation text in input agent name * correcting validation text in input agent name * corrección de validación de input de nombre del agente * cleaning code * cleaning code * regex that differentiates between FQDN and IP * Use of PLUGIN_VERSION_SHORT * Use of PLUGIN_VERSION_SHORT * link * Revert "Merge branch '4205-redesign-add-agent-page' into 5518-inputs-logic-server-address-name-password-and-group" This reverts commit a4c6fb5, reversing changes made to 5a0d2cb. * link and revert * characteres valid * correction of styles when bringing changes from parent branch * change tooltip to popover * moving validations to a separate file with their tests * corrections and cleaning of comments * camel case * change in function * type * remove type * fullWidth * type * change * conditional * change label a to Euilink * change label a to Euilink * conditional * delete usePrevious * delete usePrevious * deleted files ds store * test correction and placeholder * show architecture instead of id * removing console css warnings * fixed regex fqdn * fixed regex fqdn * data * changelog * changelog --------- Co-authored-by: Maximiliano Ibarra <maximiliano.ibarra@wazuh.com> Co-authored-by: Maximiliano Ibarra <6089438+Machi3mfl@users.noreply.github.com>
wazuh · Jun 23, 2023 · 10a9d9d · 10a9d9d
1 parent 9ada6ba
commit 10a9d9d
Show file tree

Hide file tree

Showing 29 changed files with 1,185 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to the Wazuh app project will be documented in this file.
 
+## Wazuh v4.6.0 - OpenSearch Dashboards 2.6.0 - Revision 4500
+
+### Added
+
+### Changed
+
+- Changed the deploy a new agent page from step one to step three. [#5554](https://github.com/wazuh/wazuh-kibana-app/pull/5554) [5462](https://github.com/wazuh/wazuh-kibana-app/pull/5462)
+
+### Fixed
+
 ## Wazuh v4.5.0 - OpenSearch Dashboards 2.6.0 - Revision 4500
 
 ### Added

diff --git a/public/components/common/form/hooks.tsx b/public/components/common/form/hooks.tsx
@@ -103,7 +103,7 @@ export const useForm = (fields: FormConfiguration): UseFormReturn => {
     Object.entries(enhanceFields as EnhancedFields)
       .filter(([, { error }]) => error)
       .map(([fieldKey, { error }]) => [fieldKey, error]),
-  ) as { [key: string]: string };
+  );
 
   function undoChanges() {
     setFormFields(state =>

diff --git a/public/components/common/form/index.tsx b/public/components/common/form/index.tsx
@@ -7,10 +7,9 @@ import { InputFormSwitch } from './input_switch';
 import { InputFormFilePicker } from './input_filepicker';
 import { InputFormTextArea } from './input_text_area';
 import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
-import { OsCard } from '../../../controllers/register-agent/components/os-card/os-card';
 import { SettingTypes } from './types';
 
-interface InputFormProps {
+export interface InputFormProps {
   type: SettingTypes;
   value: any;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -65,10 +64,6 @@ export const InputForm = ({
     />
   );
 
-  if (type === 'custom') {
-    return <OsCard {...rest} />;
-  }
-
   return label ? (
     <EuiFormRow label={label} fullWidth isInvalid={isInvalid} error={error}>
       <>
@@ -98,5 +93,5 @@ const Input = {
   select: InputFormSelect,
   text: InputFormText,
   textarea: InputFormTextArea,
-  custom: OsCard,
+  custom: ({ component, ...rest }) => component(rest),
 };
diff --git a/public/components/common/form/input_select.tsx b/public/components/common/form/input_select.tsx
@@ -2,12 +2,26 @@ import React from 'react';
 import { EuiSelect } from '@elastic/eui';
 import { IInputFormType } from './types';
 
-export const InputFormSelect = ({ options, value, onChange }: IInputFormType) => {
-	return (
-		<EuiSelect
-			options={options.select}
-			value={value}
-			onChange={onChange}
-		/>
-	)
+export const InputFormSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder,
+  selectedOptions,
+  isDisabled,
+  isClearable,
+  dataTestSubj,
+}: IInputFormType) => {
+  return (
+    <EuiSelect
+      options={options.select}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      selectedOptions={selectedOptions}
+      isDisabled={isDisabled}
+      isClearable={isClearable}
+      data-test-subj={dataTestSubj}
+    />
+  );
 };
diff --git a/public/components/common/form/input_text.tsx b/public/components/common/form/input_text.tsx
@@ -1,14 +1,21 @@
 import React from 'react';
 import { EuiFieldText } from '@elastic/eui';
-import { IInputFormType } from "./types";
+import { IInputFormType } from './types';
 
-export const InputFormText = ({ value, isInvalid, onChange }: IInputFormType) => {
-	return (
-		<EuiFieldText
-			fullWidth
-			value={value}
-			isInvalid={isInvalid}
-			onChange={onChange}
-		/>
-	);
+export const InputFormText = ({
+  value,
+  isInvalid,
+  onChange,
+  placeholder,
+  fullWidth,
+}: IInputFormType) => {
+  return (
+    <EuiFieldText
+      fullWidth={typeof fullWidth === 'undefined' ? true : fullWidth}
+      value={value}
+      isInvalid={isInvalid}
+      onChange={onChange}
+      placeholder={placeholder}
+    />
+  );
 };
diff --git a/public/components/common/form/types.ts b/public/components/common/form/types.ts
@@ -19,6 +19,7 @@ export interface IInputForm {
 }
 
 /// use form hook types
+
 export type SettingTypes =
   | 'text'
   | 'textarea'
@@ -54,7 +55,7 @@ interface EnhancedField {
   initialValue: any;
   value: any;
   changed: boolean;
-  error: string | null;
+  error: string | null | undefined;
   setInputRef: (reference: any) => void;
   inputRef: any;
   onChange: (event: any) => void;

diff --git a/public/controllers/agent/index.js b/public/controllers/agent/index.js
@@ -11,7 +11,7 @@
  */
 import { AgentsPreviewController } from './agents-preview';
 import { AgentsController } from './agents';
-import { RegisterAgent } from '../register-agent/container/register-agent';
+import { RegisterAgent } from '../../controllers/register-agent/containers/register-agent/register-agent';
 import { ExportConfiguration } from './components/export-configuration';
 import { AgentsWelcome } from '../../components/common/welcome/agents-welcome';
 import { Mitre } from '../../components/overview';

diff --git a/public/controllers/agent/register-agent/steps/wz-manager-address.tsx b/public/controllers/agent/register-agent/steps/wz-manager-address.tsx
@@ -11,14 +11,14 @@ const WzManagerAddressInput = (props: Props) => {
   const [value, setValue] = useState('');
 
   useEffect(() => {
-    if(defaultValue){
+    if (defaultValue) {
       setValue(defaultValue);
       onChange(defaultValue);
-    }else{
+    } else {
       setValue('');
       onChange('');
     }
-  },[])
+  }, []);
   /**
    * Handles the change of the selected node IP
    * @param value

diff --git a/public/controllers/register-agent/components/os-card/os-card.tsx b/public/controllers/register-agent/components/os-card/os-card.tsx
diff --git a/...onents/checkbox-group/checkbox-group.scss → ...ep-one/checkbox-group/checkbox-group.scss b/...onents/checkbox-group/checkbox-group.scss → ...ep-one/checkbox-group/checkbox-group.scss
@@ -1,14 +1,14 @@
 .checkbox-group-container {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   margin-top: 26px;
-  margin-bottom: 11px;
+  justify-content: center;
 }
 
 .checkbox-item {
-  width: 50%;
   display: flex;
   flex-direction: row-reverse;
+  align-items: center;
   justify-content: center;
 }
 
@@ -28,24 +28,21 @@
   .checkbox-item {
     display: flex;
     flex-direction: row-reverse;
-    justify-content: start;
+    // justify-content: start;
+    align-self: baseline;
   }
 }
 
 .architecture-label {
   margin-left: 8px;
   font-style: normal;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 12px;
   color: #343741;
 }
-
 .first-card-four-items {
   .checkbox-item:nth-child(n + 3) {
     padding-top: 16px;
+    justify-content: center;
   }
 }
-
-.first-of-row {
-  padding-right: 17px;
-}
diff --git a/...ts/checkbox-group/checkbox-group.test.tsx → ...ne/checkbox-group/checkbox-group.test.tsx b/...ts/checkbox-group/checkbox-group.test.tsx → ...ne/checkbox-group/checkbox-group.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { CheckboxGroupComponent } from './checkbox-group';
+import { CheckboxGroupComponent } from '../../step-one/checkbox-group/checkbox-group';
 
 describe('CheckboxGroupComponent', () => {
   const data = ['Option 1', 'Option 2', 'Option 3'];
@@ -50,6 +50,10 @@ describe('CheckboxGroupComponent', () => {
     fireEvent.click(checkboxItems[1]);
 
     expect(onOptionChange).toHaveBeenCalledTimes(1);
-    expect(onOptionChange).toHaveBeenCalledWith('option-0-1');
+    expect(onOptionChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: { value: `option-${cardIndex}-1` },
+      }),
+    );
   });
 });
diff --git a/...ponents/checkbox-group/checkbox-group.tsx → ...tep-one/checkbox-group/checkbox-group.tsx b/...ponents/checkbox-group/checkbox-group.tsx → ...tep-one/checkbox-group/checkbox-group.tsx
@@ -2,13 +2,6 @@ import React from 'react';
 import { EuiRadioGroup } from '@elastic/eui';
 import './checkbox-group.scss';
 
-interface RegisterAgentData {
-  icon: string;
-  title: string;
-  hr: boolean;
-  architecture: string[];
-}
-
 interface Props {
   data: string[];
   cardIndex: number;
@@ -23,14 +16,9 @@ const CheckboxGroupComponent: React.FC<Props> = ({
   selectedOption,
   onOptionChange,
 }) => {
-  const handleOptionChange = (optionId: string) => {
-    onOptionChange(optionId);
-  };
-
   const isSingleArchitecture = data.length === 1;
   const isDoubleArchitecture = data.length === 2;
   const isFirstCardWithFourItems = cardIndex === 0 && data.length === 4;
-
   return (
     <div
       className={`checkbox-group-container${
@@ -48,9 +36,11 @@ const CheckboxGroupComponent: React.FC<Props> = ({
         >
           <span className='architecture-label'>{arch}</span>
           <EuiRadioGroup
-            options={[{ id: `option-${cardIndex}-${idx}` }]}
+            options={[{ id: `${arch}` }]}
             idSelected={selectedOption}
-            onChange={(id: string) => handleOptionChange(id)}
+            onChange={(id: string) => {
+              onOptionChange({ target: { value: id } });
+            }}
           />
         </div>
       ))}
@@ -59,4 +49,3 @@ const CheckboxGroupComponent: React.FC<Props> = ({
 };
 
 export { CheckboxGroupComponent };
-export type { RegisterAgentData };
diff --git a/...ter-agent/components/os-card/os-card.scss → .../components/step-one/os-card/os-card.scss b/...ter-agent/components/os-card/os-card.scss → .../components/step-one/os-card/os-card.scss
@@ -48,3 +48,7 @@
 .last-card {
   margin-right: 63px;
 }
+
+.cardsCallOut {
+  margin-top: 16px;
+}
diff --git a/...agent/components/os-card/os-card.test.tsx → ...ponents/step-one/os-card/os-card.test.tsx b/...agent/components/os-card/os-card.test.tsx → ...ponents/step-one/os-card/os-card.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { OsCard } from './os-card';
+import { OsCard } from '../../step-one/os-card/os-card';
 
 describe('OsCard', () => {
   test('renders three cards with different titles', () => {