Update inputs form

wazuh · Jan 29, 2025 · a034679 · a034679
1 parent d7dcdd2
commit a034679
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 36 deletions.
diff --git a/plugins/wazuh-security-policies/public/components/common/components/render-steps.tsx b/plugins/wazuh-security-policies/public/components/common/components/render-steps.tsx
@@ -66,7 +66,12 @@ export const renderStepPanel = step => {
         >
           <EuiHorizontalRule margin='s' />
           <EuiForm component='form'>
-            {renderInputs({ key: step.key, value: item })}
+            {renderInputs({
+              key: step.key,
+              value: item,
+              handleSetItem: step.handleSetItem,
+              keyValue: step.keyValue ?? '',
+            })}
           </EuiForm>
         </EuiAccordion>
       </EuiPanel>

diff --git a/plugins/wazuh-security-policies/public/components/common/templates/create-template.tsx b/plugins/wazuh-security-policies/public/components/common/templates/create-template.tsx
@@ -11,6 +11,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
+import { set } from 'lodash';
 import { PopoverIconButton } from '../components/popover';
 import { getAppUrl } from '../../utils/get-app-url';
 import { capitalizeFirstLetter } from '../../utils/capitalize-first-letter';
@@ -59,32 +60,61 @@ export const CreateTemplate = () => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [onXml, setOnXml] = useState(false);
   const [stepsToRender, setstepsToRender] = useState(['metadata']);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [item, setItem] = useState(metadataInitialValues);
   const [addStep, setAddStep] = useState(
     getAvailableOptions(stepsToRender)?.[0]?.value,
   );
   const view = getAppUrl();
+
+  const handleSetItem = ({
+    newValue,
+    key,
+  }: {
+    newValue: string | boolean;
+    key: string;
+  }) => {
+    setItem(prevItem => {
+      const newItem = { ...prevItem };
+
+      set(newItem, key, newValue);
+
+      return newItem;
+    });
+  };
+
   const buttonsPopover = [
     {
       id: 'editOnFormOrXML',
       label: onXml ? 'Edit on form' : 'Edit on XML',
       color: 'text',
+      onClick: () => setOnXml(!onXml),
     },
     {
       id: 'enable/disable',
       label: item?.enable ? 'Disable' : 'Enable',
       color: item?.enable ? 'danger' : 'primary',
+      onClick: () => {
+        handleSetItem({
+          newValue: !item?.enable,
+          key: 'enable',
+        });
+      },
     },
     {
       id: 'testItem',
       label: `Test ${view}`,
       color: 'text',
+      onClick: () => {},
     },
     {
       id: 'setSaveAsDraft',
       label: useParams()?.id ? 'Save as Draft' : 'Set as draft',
       color: 'text',
+      onClick: () =>
+        handleSetItem({
+          newValue: 'draft',
+          key: 'status',
+        }),
     },
   ];
   const buttons = [
@@ -102,10 +132,29 @@ export const CreateTemplate = () => {
         ))}
       </div>
     </PopoverIconButton>,
-    <EuiButton size='s' key='save-item' color='primary' fill onClick={() => {}}>
+    <EuiButton
+      size='s'
+      key='save-item'
+      color='primary'
+      fill
+      onClick={() =>
+        console.log(
+          Object.fromEntries(
+            Object.entries(item).filter(([key]) =>
+              [...stepsToRender, 'name', 'status', 'enable'].includes(key),
+            ),
+          ),
+        )
+      }
+    >
       Save
     </EuiButton>,
-    <EuiButton size='s' key='cancel-item' color='danger'>
+    <EuiButton
+      size='s'
+      key='cancel-item'
+      color='danger'
+      onClick={() => history.back()}
+    >
       Cancel
     </EuiButton>,
   ];
@@ -119,7 +168,7 @@ export const CreateTemplate = () => {
       .filter(([key]) => stepsToRender.includes(key))
       .map(([stepName, value]) => ({
         title: capitalizeFirstLetter(stepName),
-        children: renderStepPanel({ key: stepName, value }),
+        children: renderStepPanel({ key: stepName, value, handleSetItem }),
       }));
     const optionsToSelect = getAvailableOptions(stepsToRender);
 
@@ -163,10 +212,15 @@ export const CreateTemplate = () => {
         pageTitle={
           <EuiFieldText
             placeholder={`${capitalizeFirstLetter(view)} name`}
-            value=''
+            value={item.name}
             style={{ display: 'flex' }}
             compressed
-            onChange={() => {}}
+            onChange={event =>
+              handleSetItem({
+                newValue: event.target.value,
+                key: 'name',
+              })
+            }
           />
         }
         bottomBorder={true}

diff --git a/plugins/wazuh-security-policies/public/components/common/views.tsx b/plugins/wazuh-security-policies/public/components/common/views.tsx
@@ -172,6 +172,37 @@ export const views: ViewInterface[] = [
       },
     ],
   },
+  {
+    name: i18n.translate('wz-security-policies-decoders-details', {
+      defaultMessage: 'Create decoder',
+    }),
+    id: 'decodersCreate',
+    path: '/decoders/create',
+    renderOnMenu: false,
+    renderMenu: false,
+    render: () => <CreateTemplate />,
+    breadcrumb: () => [
+      {
+        text: (
+          <FormattedMessage
+            id={`wz-security-policies-breadcrumbs-decodersDetails`}
+            defaultMessage={views.find(view => view.id === 'decoders')?.name}
+          />
+        ),
+        href: getCore().application.getUrlForApp('wazuhSecurityPolicies', {
+          path: `#/${views.find(view => view.id === 'decoders')?.path}`,
+        }),
+      },
+      {
+        text: (
+          <FormattedMessage
+            id={`wz-security-policies-breadcrumbs-decoderCreate`}
+            defaultMessage='Create'
+          />
+        ),
+      },
+    ],
+  },
   {
     name: i18n.translate('wz-security-policies-decoders-details', {
       defaultMessage: 'Decoders details',
@@ -220,6 +251,37 @@ export const views: ViewInterface[] = [
       },
     ],
   },
+  {
+    name: i18n.translate('wz-security-policies-decoders-details', {
+      defaultMessage: 'Create KVDB',
+    }),
+    id: 'kvdbCreate',
+    path: '/kvdb/create',
+    renderOnMenu: false,
+    renderMenu: false,
+    render: () => <CreateTemplate />,
+    breadcrumb: () => [
+      {
+        text: (
+          <FormattedMessage
+            id={`wz-security-policies-breadcrumbs-decodersDetails`}
+            defaultMessage={views.find(view => view.id === 'kvdb')?.name}
+          />
+        ),
+        href: getCore().application.getUrlForApp('wazuhSecurityPolicies', {
+          path: `#/${views.find(view => view.id === 'decoders')?.path}`,
+        }),
+      },
+      {
+        text: (
+          <FormattedMessage
+            id={`wz-security-policies-breadcrumbs-kvdbCreate`}
+            defaultMessage='Create'
+          />
+        ),
+      },
+    ],
+  },
   {
     name: i18n.translate('wz-security-policies-kvdb-details', {
       defaultMessage: 'KVDB details',

diff --git a/plugins/wazuh-security-policies/public/components/rules/schemas/metadata.schema.ts b/plugins/wazuh-security-policies/public/components/rules/schemas/metadata.schema.ts
@@ -1,6 +1,7 @@
 export interface MetadataSchema {
   enable: boolean;
   name: string;
+  status: string;
   metadata: {
     module: string;
     title: string;
@@ -29,20 +30,22 @@ export interface MetadataSchema {
 export const metadataInitialValues: MetadataSchema = {
   enable: false,
   name: '',
+  status: '',
   metadata: {
     module: '',
     title: '',
     description: '',
     compatibility: '',
-    versions: [''],
+    versions: [],
     author: {
       name: '',
-      date: new Date().toISOString().split('T')[0],
+      date: '',
       email: '',
     },
-    references: [''],
+    references: [],
   },
   check: '',
+  parse: '',
   normalize: [],
   definitions: '',
   allow: '',

diff --git a/plugins/wazuh-security-policies/public/components/utils/inputs/array-inputs.tsx b/plugins/wazuh-security-policies/public/components/utils/inputs/array-inputs.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { EuiBasicTable, EuiFormRow, EuiComboBox } from '@elastic/eui';
 import { capitalizeFirstLetter } from '../capitalize-first-letter';
+import { transformInputKeyName } from '../transform-input-key-name';
 import { inputString } from './string-inputs';
 
 export const inputArray = (
-  input: { key: string; value: any },
+  input: { key: string; value: any; handleSetItem: any; keyValue?: string },
   isEditable: boolean,
 ) => {
   const renderArrayTable = ['check', 'parse|', 'normalize'];
@@ -53,9 +54,39 @@ export const inputArray = (
     );
   }
 
+  const onChange = event => {
+    const newValue = event.map(({ value }) => value);
+
+    input.handleSetItem({
+      key: transformInputKeyName(input.keyValue, input.key),
+      newValue: newValue,
+    });
+  };
+
+  const onCreateOption = (searchValue: string) => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+    if (!normalizedSearchValue) {
+      return;
+    }
+
+    input.handleSetItem({
+      key: transformInputKeyName(input.keyValue, input.key),
+      newValue: [...input.value, searchValue],
+    });
+  };
+
   const comboBoxInput =
     !isEditable && inputs.length === 1 && inputs[0].value === '' ? (
-      inputString({ key: input.key, value: inputs[0].value }, isEditable)
+      inputString(
+        {
+          key: input.key,
+          value: inputs[0].value,
+          handleSetItem: input.handleSetItem,
+          keyValue: input.keyValue,
+        },
+        isEditable,
+      )
     ) : (
       <EuiFormRow
         key={`${input.key}`}
@@ -67,12 +98,15 @@ export const inputArray = (
           label={input.key}
           fullWidth
           noSuggestions
+          onChange={onChange}
           placeholder={`${capitalizeFirstLetter(input.key)} value`}
           selectedOptions={
             isEditable && inputs?.[0]?.value === '' ? [] : inputs
           }
           compressed
           isDisabled={!isEditable}
+          isClearable={true}
+          onCreateOption={onCreateOption}
         />
       </EuiFormRow>
     );

diff --git a/plugins/wazuh-security-policies/public/components/utils/inputs/object-inputs.tsx b/plugins/wazuh-security-policies/public/components/utils/inputs/object-inputs.tsx
@@ -1,13 +1,22 @@
 import { inputString } from './string-inputs';
 
 export const inputObject = (
-  input: { key: string; value: any },
+  input: { key: string; value: any; handleSetItem: any; keyValue?: string },
   isEditable: boolean,
 ) => {
   const inputsList = Object.entries(input.value).map(([key, value]) => ({
     key: `${input.key}.${key}`,
     value,
   }));
 
-  return inputsList.map(item => inputString(item, isEditable));
+  return inputsList.map(item =>
+    inputString(
+      {
+        ...item,
+        handleSetItem: input.handleSetItem,
+        keyValue: input.keyValue ?? '',
+      },
+      isEditable,
+    ),
+  );
 };
diff --git a/plugins/wazuh-security-policies/public/components/utils/inputs/render-inputs.tsx b/plugins/wazuh-security-policies/public/components/utils/inputs/render-inputs.tsx
@@ -1,4 +1,5 @@
 import { useLocation } from 'react-router-dom';
+import { transformInputKeyName } from '../transform-input-key-name';
 import { inputString } from './string-inputs';
 import { inputArray } from './array-inputs';
 import { inputObject } from './object-inputs';
@@ -12,7 +13,12 @@ const possibleSteps = new Set([
   'definitions',
 ]);
 
-export const renderInputs = (input: { key: string; value: any }) => {
+export const renderInputs = (input: {
+  key: string;
+  value: any;
+  handleSetItem: any;
+  keyValue?: string;
+}) => {
   const isEditable =
     useLocation().pathname.includes('edit') ||
     useLocation().pathname.includes('create');
@@ -23,7 +29,13 @@ export const renderInputs = (input: { key: string; value: any }) => {
       value,
     }));
 
-    return inputsSteps.map(step => renderInputs(step));
+    return inputsSteps.map(step =>
+      renderInputs({
+        ...step,
+        handleSetItem: input.handleSetItem,
+        keyValue: transformInputKeyName(input.keyValue, input.key),
+      }),
+    );
   }
 
   if (typeof input.value === 'string') {