Replace WzSearchBar component

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Changed
 
 - Changed of regular expression in RBAC. [#5201](https://github.com/wazuh/wazuh-kibana-app/pull/5201)
+- Changed the search bar of agent selector modal and Agents section [#5366](https://github.com/wazuh/wazuh-kibana-app/pull/5366)
 - Migrate the timeFilter, metaFields, maxBuckets health checks inside the pattern check. [#5384](https://github.com/wazuh/wazuh-kibana-app/pull/5384)
 
 ### Fixed

public/components/common/tables/__snapshots__/table-with-search-bar.test.tsx.snap

@@ -108,6 +108,7 @@ exports[`Table With Search Bar component renders correctly to match the snapshot
                       anchorPosition="downLeft"
                       attachToAnchor={true}
                       closePopover={[Function]}
+                      disableFocusTrap={false}
                       display="block"
                       fullWidth={true}
                       id="popover"

public/components/eui-suggest/suggest_input.js

@@ -53,6 +53,7 @@ export class EuiSuggestInput extends Component {
       onPopoverFocus,
       isPopoverOpen,
       onClosePopover,
+      disableFocusTrap = false,
       ...rest
     } = this.props;
 
@@ -108,6 +109,7 @@ export class EuiSuggestInput extends Component {
           panelPaddingSize="none"
           fullWidth
           closePopover={onClosePopover}
+          disableFocusTrap={disableFocusTrap}
         >
           <div>{suggestions}</div>
         </EuiInputPopover>

public/components/search-bar/README.md

@@ -0,0 +1,201 @@
+# Component
+
+The `SearchBar` component is a base component of a search bar.
+
+It is designed to be extensible through the self-contained query language implementations. This means
+the behavior of the search bar depends on the business logic of each query language. For example, a
+query language can display suggestions according to the user input or prepend some buttons to the search bar.
+
+It is based on a custom `EuiSuggest` component defined in `public/components/eui-suggest/suggest.js`. So the
+abilities are restricted by this one.
+
+## Features
+
+- Supports multiple query languages.
+- Switch the selected query language.
+- Self-contained query language implementation and ability to interact with the search bar component.
+- React to external changes to set the new input. This enables to change the input from external components.
+
+# Usage
+
+Basic usage:
+
+```tsx
+<SearchBar
+  // Define the query languages. Required.
+  // The ID of them should be registered previously. See How to add a new query language documentation.
+  modes={[
+    {
+      id: 'wql',
+      // specific query language parameters
+      options: {
+        // implicit query. Optional
+        // Set a implicit query that can't be changed by the user.
+        // Use the UQL (Unified Query Language) syntax.
+        implicitQuery: {
+          query: 'id!=000',
+          conjunction: ';'
+        },
+        searchTermFields: ['id', 'ip']
+      },
+      suggestions: {
+        field(currentValue) {
+          return [
+            { label: 'configSum', description: 'Config sum' },
+            { label: 'dateAdd', description: 'Date add' },
+            { label: 'id', description: 'ID' },
+            { label: 'ip', description: 'IP address' },
+            { label: 'group', description: 'Group' },
+            { label: 'group_config_status', description: 'Synced configuration status' },
+            { label: 'lastKeepAline', description: 'Date add' },
+            { label: 'manager', description: 'Manager' },
+            { label: 'mergedSum', description: 'Merged sum' },
+            { label: 'name', description: 'Agent name' },
+            { label: 'node_name', description: 'Node name' },
+            { label: 'os.platform', description: 'Operating system platform' },
+            { label: 'status', description: 'Status' },
+            { label: 'version', description: 'Version' },
+          ];
+        },
+        value: async (currentValue, { field }) => {
+          switch (field) {
+            case 'configSum':
+              return [
+                { label: 'configSum1' },
+                { label: 'configSum2' },
+              ];
+              break;
+            case 'dateAdd':
+              return [
+                { label: 'dateAdd1' },
+                { label: 'dateAdd2' },
+              ];
+              break;
+            case 'status':
+              return UI_ORDER_AGENT_STATUS.map(
+                (status) => ({
+                  label: status,
+                }),
+              );
+              break;
+            default:
+              return [];
+              break;
+          }
+        },
+      }
+    },
+  ]}
+  // Handler fired when the input handler changes. Optional.
+  onChange={onChange}
+  // Handler fired when the user press the Enter key or custom implementations. Required.
+  onSearch={onSearch}
+  // Used to define the internal input. Optional.
+  // This could be used to change the input text from the external components.
+  // Use the UQL (Unified Query Language) syntax.
+  input=''
+  // Define the default mode. Optional. If not defined, it will use the first one mode.
+  defaultMode=''
+></SearchBar>
+```
+
+# Query languages
+
+The built-in query languages are:
+
+- AQL: API Query Language. Based on https://documentation.wazuh.com/current/user-manual/api/queries.html.
+
+## How to add a new query language
+
+### Definition
+
+The language expects to take the interface:
+
+```ts
+type SearchBarQueryLanguage = {
+  description: string;
+  documentationLink?: string;
+  id: string;
+  label: string;
+  getConfiguration?: () => any;
+  run: (input: string | undefined, params: any) => Promise<{
+    searchBarProps: any,
+    output: {
+      language: string,
+      apiQuery: string,
+      query: string
+    }
+  }>;
+  transformUQLToQL: (unifiedQuery: string) => string;
+};
+```
+
+where:
+
+- `description`: is the description of the query language. This is displayed in a query language popover
+  on the right side of the search bar. Required.
+- `documentationLink`: URL to the documentation link. Optional.
+- `id`: identification of the query language.
+- `label`: name
+- `getConfiguration`: method that returns the configuration of the language. This allows custom behavior.
+- `run`: method that returns:
+  - `searchBarProps`: properties to be passed to the search bar component. This allows the
+  customization the properties that will used by the base search bar component and the output used when searching
+  - `output`:
+    - `language`: query language ID
+    - `apiQuery`: API query.
+    - `query`: current query in the specified language
+- `transformUQLToQL`: method that transforms the UQL (Unified Query Language) to the specific query
+  language. This is used when receives a external input in the Unified Query Language, the returned
+  value is converted to the specific query language to set the new input text of the search bar
+  component.
+
+Create a new file located in `public/components/search-bar/query-language` and define the expected interface;
+
+### Register
+
+Go to `public/components/search-bar/query-language/index.ts` and add the new query language:
+
+```ts
+import { AQL } from './aql';
+
+// Import the custom query language
+import { CustomQL } from './custom';
+
+// [...]
+
+// Register the query languages
+export const searchBarQueryLanguages: {
+  [key: string]: SearchBarQueryLanguage;
+} = [
+  AQL,
+  CustomQL, // Add the new custom query language
+].reduce((accum, item) => {
+  if (accum[item.id]) {
+    throw new Error(`Query language with id: ${item.id} already registered.`);
+  }
+  return {
+    ...accum,
+    [item.id]: item,
+  };
+}, {});
+```
+
+## Unified Query Language - UQL
+
+This is an unified syntax used by the search bar component that provides a way to communicate
+with the different query language implementations.
+
+The input and output parameters of the search bar component must use this syntax.
+
+This is used in:
+- input:
+  - `input` component property
+- output:
+  - `onChange` component handler 
+  - `onSearch` component handler
+
+Its syntax is equal to Wazuh API Query Language
+https://wazuh.com/<major_version>.<minor_version>/user-manual/api/queries.html
+
+> The AQL query language is a implementation of this syntax.

public/components/search-bar/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SearchBar component Renders correctly the initial render 1`] = `
+<div>
+  <div>
+    <div
+      class="euiSuggestInput"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiInputPopover--fullWidth"
+        id="popover"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <div>
+            <div
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                  placeholder="Search"
+                  type="text"
+                  value=""
+                />
+              </div>
+              <div
+                class="euiPopover euiPopover--anchorDownCenter euiFormControlLayout__append"
+              >
+                <div
+                  class="euiPopover__anchor"
+                >
+                  <button
+                    class="euiButtonEmpty euiButtonEmpty--primary"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButtonEmpty__content"
+                    >
+                      <span
+                        class="euiButtonEmpty__text"
+                      >
+                        WQL
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

public/components/search-bar/index.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SearchBar } from './index';
+
+describe('SearchBar component', () => {
+  const componentProps = {
+    defaultMode: 'wql',
+    input: '',
+    modes: [
+      {
+        id: 'aql',
+        implicitQuery: 'id!=000;',
+        suggestions: {
+          field(currentValue) {
+            return [];
+          },
+          value(currentValue, { field }){
+            return [];
+          },
+        },
+      },
+      {
+        id: 'wql',
+        implicitQuery: {
+          query: 'id!=000',
+          conjunction: ';'
+        },
+        suggestions: {
+          field(currentValue) {
+            return [];
+          },
+          value(currentValue, { field }){
+            return [];
+          },
+        },
+      },
+    ],
+    /* eslint-disable @typescript-eslint/no-empty-function */
+    onChange: () => {},
+    onSearch: () => {}
+    /* eslint-enable @typescript-eslint/no-empty-function */
+  };
+
+  it('Renders correctly the initial render', async () => {
+    const wrapper = render(
+      <SearchBar
+        {...componentProps}
+        defaultMode='wql'
+      />
+    );
+
+    /* This test causes a warning about act. This is intentional, because the test pretends to get
+    the first rendering of the component that doesn't have the component properties coming of the
+    selected query language */
+    expect(wrapper.container).toMatchSnapshot();
+  });
+});