Value lists modal window (#179339)

## Value List Items Modal Window Experimental flag: **valueListItemsModal** it's temporarily true and will be set to false, before merge https://github.com/elastic/kibana/assets/7609147/2aafe007-734f-4c0e-b542-5eca229e310d Added a new modal window that lets users interact with value lists directly. This modal supports viewing, searching, adding, deleting, updating, and uploading items. Where to find the modal window: - Value list popup - Exception editing and viewing on both the rule page and shared exceptions management page Permissions: Add, edit, delete, and upload buttons are hidden for read-only users. The modal link is not shown to users without read permissions. ### Changes to API I added optional **refresh** flag for list items API, because we want to see the changes in UI, when editing list items ### How to review All new components is here - `x-pack/plugins/security_solution/public/value_list/` New hooks - `packages/kbn-securitysolution-list-hooks/` API calls - `packages/kbn-securitysolution-list-api` Actual API - `x-pack/plugins/lists/server/routes` There also some props drilling into exceptions package, which is not ideal, please let me know if you have better ideas [test plan](elastic/security-team#9128) --------- Co-authored-by: Kibana Machine <[email protected]>
elastic · Apr 15, 2024 · 35dc121 · 35dc121
1 parent 9a9fd49
commit 35dc121
Show file tree

Hide file tree

Showing 80 changed files with 2,346 additions and 85 deletions.
diff --git a/packages/kbn-securitysolution-autocomplete/src/field_value_lists/index.test.tsx b/packages/kbn-securitysolution-autocomplete/src/field_value_lists/index.test.tsx
@@ -26,7 +26,11 @@ import {
 // const mockKibanaHttpService = coreMock.createStart().http;
 // import { coreMock } from '../../../../../../../src/core/public/mocks';
 const mockKibanaHttpService = jest.fn();
-
+const mockShowValueListModal = jest.fn();
+const MockedShowValueListModal = (props: unknown) => {
+  mockShowValueListModal(props);
+  return <></>;
+};
 const mockStart = jest.fn();
 const mockKeywordList: ListSchema = {
   ...getListResponseMock(),
@@ -63,6 +67,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('ip')}
         selectedValue="some-list-id"
+        showValueListModal={MockedShowValueListModal}
       />
     );
 
@@ -84,6 +89,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('@tags')}
         selectedValue=""
+        showValueListModal={MockedShowValueListModal}
       />
     );
 
@@ -111,6 +117,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('ip')}
         selectedValue=""
+        showValueListModal={MockedShowValueListModal}
       />
     );
     expect(
@@ -131,6 +138,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('@tags')}
         selectedValue=""
+        showValueListModal={MockedShowValueListModal}
       />
     );
 
@@ -154,6 +162,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('ip')}
         selectedValue=""
+        showValueListModal={MockedShowValueListModal}
       />
     );
 
@@ -177,6 +186,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('ip')}
         selectedValue="some-list-id"
+        showValueListModal={MockedShowValueListModal}
       />
     );
 
@@ -200,6 +210,7 @@ describe('AutocompleteFieldListsComponent', () => {
         placeholder="Placeholder text"
         selectedField={getField('ip')}
         selectedValue=""
+        showValueListModal={MockedShowValueListModal}
       />
     );
 
@@ -230,4 +241,29 @@ describe('AutocompleteFieldListsComponent', () => {
       });
     });
   });
+
+  test('it render the value list modal', async () => {
+    mockShowValueListModal.mockReset();
+    mount(
+      <AutocompleteFieldListsComponent
+        httpService={mockKibanaHttpService}
+        isClearable={false}
+        isDisabled={false}
+        isLoading={false}
+        onChange={jest.fn()}
+        placeholder="Placeholder text"
+        selectedField={getField('ip')}
+        selectedValue="some-list-id"
+        showValueListModal={MockedShowValueListModal}
+      />
+    );
+
+    expect(mockShowValueListModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        children: 'Show value list',
+        listId: 'some-list-id',
+        shouldShowContentIfModalNotAvailable: false,
+      })
+    );
+  });
 });
diff --git a/packages/kbn-securitysolution-autocomplete/src/field_value_lists/index.tsx b/packages/kbn-securitysolution-autocomplete/src/field_value_lists/index.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { ElementType, useCallback, useEffect, useMemo, useState } from 'react';
 import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiLink, EuiText } from '@elastic/eui';
 import type { ListSchema } from '@kbn/securitysolution-io-ts-list-types';
 import { useFindListsBySize } from '@kbn/securitysolution-list-hooks';
@@ -36,6 +36,7 @@ interface AutocompleteFieldListsProps {
   selectedValue: string | undefined;
   allowLargeValueLists?: boolean;
   'aria-label'?: string;
+  showValueListModal: ElementType;
 }
 
 export interface AutocompleteListsData {
@@ -55,6 +56,7 @@ export const AutocompleteFieldListsComponent: React.FC<AutocompleteFieldListsPro
   selectedValue,
   allowLargeValueLists = false,
   'aria-label': ariaLabel,
+  showValueListModal,
 }): JSX.Element => {
   const [error, setError] = useState<string | undefined>(undefined);
   const [listData, setListData] = useState<AutocompleteListsData>({
@@ -118,29 +120,36 @@ export const AutocompleteFieldListsComponent: React.FC<AutocompleteFieldListsPro
   }, [selectedField, start, httpService]);
 
   const isLoadingState = useMemo((): boolean => isLoading || loading, [isLoading, loading]);
+  const ShowValueListModal = showValueListModal;
 
   const helpText = useMemo(() => {
     return (
-      !allowLargeValueLists && (
-        <EuiText size="xs">
-          {i18n.LISTS_TOOLTIP_INFO}{' '}
-          <EuiLink
-            external
-            target="_blank"
-            href={
-              getDocLinks({
-                kibanaBranch: 'main',
-                buildFlavor: 'traditional',
-              }).securitySolution.exceptions.value_lists
-            }
-          >
-            {i18n.SEE_DOCUMENTATION}
-          </EuiLink>
-        </EuiText>
-      )
+      <>
+        {selectedValue && (
+          <ShowValueListModal shouldShowContentIfModalNotAvailable={false} listId={selectedValue}>
+            {i18n.SHOW_VALUE_LIST_MODAL}
+          </ShowValueListModal>
+        )}
+        {!allowLargeValueLists && (
+          <EuiText size="xs">
+            {i18n.LISTS_TOOLTIP_INFO}{' '}
+            <EuiLink
+              external
+              target="_blank"
+              href={
+                getDocLinks({
+                  kibanaBranch: 'main',
+                  buildFlavor: 'traditional',
+                }).securitySolution.exceptions.value_lists
+              }
+            >
+              {i18n.SEE_DOCUMENTATION}
+            </EuiLink>
+          </EuiText>
+        )}
+      </>
     );
-  }, [allowLargeValueLists]);
-
+  }, [allowLargeValueLists, selectedValue, ShowValueListModal]);
   return (
     <EuiFormRow
       label={rowLabel}

diff --git a/packages/kbn-securitysolution-autocomplete/src/translations/index.ts b/packages/kbn-securitysolution-autocomplete/src/translations/index.ts
@@ -64,6 +64,10 @@ export const CONFLICT_MULTIPLE_INDEX_DESCRIPTION = (name: string, count: number)
     values: { count, name },
   });
 
+export const SHOW_VALUE_LIST_MODAL = i18n.translate('autocomplete.showValueListModal', {
+  defaultMessage: 'Show value list',
+});
+
 // eslint-disable-next-line import/no-default-export
 export default {
   LOADING,

diff --git a/...solution-exception-list-components/src/exception_item_card/conditions/conditions.test.tsx b/...solution-exception-list-components/src/exception_item_card/conditions/conditions.test.tsx
@@ -10,6 +10,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { ExceptionItemCardConditions } from '.';
+import { MockedShowValueListModal } from '../../mocks/value_list_modal.mock';
 
 interface TestEntry {
   field: string;
@@ -94,6 +95,7 @@ describe('ExceptionItemCardConditions', () => {
           },
         ]}
         dataTestSubj="exceptionItemConditions"
+        showValueListModal={MockedShowValueListModal}
       />
     );
     expect(wrapper.getByTestId('exceptionItemConditionsOs')).toHaveTextContent('OSIS Linux');
@@ -243,6 +245,7 @@ describe('ExceptionItemCardConditions', () => {
             type: 'nested',
           },
         ]}
+        showValueListModal={MockedShowValueListModal}
         dataTestSubj="exceptionItemConditions"
       />
     );
@@ -331,6 +334,7 @@ describe('ExceptionItemCardConditions', () => {
             type: 'list',
           },
         ]}
+        showValueListModal={MockedShowValueListModal}
         dataTestSubj="exceptionItemConditions"
       />
     );

diff --git a/...rc/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap b/...rc/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap
diff --git a/...components/src/exception_item_card/conditions/entry_content/entry_content.helper.test.tsx b/...components/src/exception_item_card/conditions/entry_content/entry_content.helper.test.tsx
@@ -14,6 +14,10 @@ import {
   includedListTypeEntry,
   includedMatchTypeEntry,
 } from '../../../mocks/entry.mock';
+import {
+  MockedShowValueListModal,
+  mockShowValueListModal,
+} from '../../../mocks/value_list_modal.mock';
 
 describe('entry_content.helper', () => {
   describe('getEntryOperator', () => {
@@ -62,36 +66,79 @@ describe('entry_content.helper', () => {
   describe('getValueExpression', () => {
     it('should render multiple values in badges when operator type is match_any and values is Array', () => {
       const wrapper = render(
-        getValueExpression(ListOperatorTypeEnum.MATCH_ANY, 'included', ['value 1', 'value 2'])
+        getValueExpression(
+          ListOperatorTypeEnum.MATCH_ANY,
+          'included',
+          ['value 1', 'value 2'],
+          MockedShowValueListModal
+        )
       );
       expect(wrapper.getByTestId('matchAnyBadge0')).toHaveTextContent('value 1');
       expect(wrapper.getByTestId('matchAnyBadge1')).toHaveTextContent('value 2');
     });
     it('should return one value when operator type is match_any and values is not Array', () => {
       const wrapper = render(
-        getValueExpression(ListOperatorTypeEnum.MATCH_ANY, 'included', 'value 1')
+        getValueExpression(
+          ListOperatorTypeEnum.MATCH_ANY,
+          'included',
+          'value 1',
+          MockedShowValueListModal
+        )
       );
       expect(wrapper.getByTestId('entryValueExpression')).toHaveTextContent('value 1');
     });
     it('should return one value when operator type is a single value', () => {
       const wrapper = render(
-        getValueExpression(ListOperatorTypeEnum.EXISTS, 'included', 'value 1')
+        getValueExpression(
+          ListOperatorTypeEnum.EXISTS,
+          'included',
+          'value 1',
+          MockedShowValueListModal
+        )
       );
       expect(wrapper.getByTestId('entryValueExpression')).toHaveTextContent('value 1');
     });
     it('should return value with warning icon when the value contains a leading or trailing space', () => {
       const wrapper = render(
-        getValueExpression(ListOperatorTypeEnum.EXISTS, 'included', ' value 1')
+        getValueExpression(
+          ListOperatorTypeEnum.EXISTS,
+          'included',
+          ' value 1',
+          MockedShowValueListModal
+        )
       );
       expect(wrapper.getByTestId('entryValueExpression')).toHaveTextContent(' value 1');
       expect(wrapper.getByTestId('valueWithSpaceWarningTooltip')).toBeInTheDocument();
     });
     it('should return value without warning icon when the value does not contain a leading or trailing space', () => {
       const wrapper = render(
-        getValueExpression(ListOperatorTypeEnum.EXISTS, 'included', 'value 1')
+        getValueExpression(
+          ListOperatorTypeEnum.EXISTS,
+          'included',
+          'value 1',
+          MockedShowValueListModal
+        )
       );
       expect(wrapper.getByTestId('entryValueExpression')).toHaveTextContent(' value 1');
       expect(wrapper.queryByTestId('valueWithSpaceWarningTooltip')).not.toBeInTheDocument();
     });
+    it('should render value list modal when operator type is list', () => {
+      mockShowValueListModal.mockReset();
+      render(
+        getValueExpression(
+          ListOperatorTypeEnum.LIST,
+          'included',
+          'value 1',
+          MockedShowValueListModal
+        )
+      );
+      expect(mockShowValueListModal).toHaveBeenCalledWith(
+        expect.objectContaining({
+          children: 'value 1',
+          listId: 'value 1',
+          shouldShowContentIfModalNotAvailable: true,
+        })
+      );
+    });
   });
 });
diff --git a/...list-components/src/exception_item_card/conditions/entry_content/entry_content.helper.tsx b/...list-components/src/exception_item_card/conditions/entry_content/entry_content.helper.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { ElementType } from 'react';
 import { css } from '@emotion/css';
 import { EuiExpression, EuiBadge } from '@elastic/eui';
 import type { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
@@ -21,13 +21,21 @@ const entryValueWrapStyle = css`
 const EntryValueWrap = ({ children }: { children: React.ReactNode }) => (
   <span className={entryValueWrapStyle}>{children}</span>
 );
-const getEntryValue = (type: string, value?: string | string[]) => {
+
+const getEntryValue = (type: string, value: string | string[], showValueListModal: ElementType) => {
+  const ShowValueListModal = showValueListModal;
   if (type === 'match_any' && Array.isArray(value)) {
     return value.map((currentValue, index) => (
       <EuiBadge key={index} data-test-subj={`matchAnyBadge${index}`} color="hollow">
         <EntryValueWrap>{currentValue}</EntryValueWrap>
       </EuiBadge>
     ));
+  } else if (type === 'list' && value) {
+    return (
+      <ShowValueListModal shouldShowContentIfModalNotAvailable listId={value.toString()}>
+        {value}
+      </ShowValueListModal>
+    );
   }
   return <EntryValueWrap>{value}</EntryValueWrap> ?? '';
 };
@@ -48,12 +56,13 @@ export const getValue = (entry: Entry) => {
 export const getValueExpression = (
   type: ListOperatorTypeEnum,
   operator: string,
-  value: string | string[]
+  value: string | string[],
+  showValueListModal: ElementType
 ) => (
   <>
     <EuiExpression
       description={getEntryOperator(type, operator)}
-      value={getEntryValue(type, value)}
+      value={getEntryValue(type, value, showValueListModal)}
       data-test-subj="entryValueExpression"
     />
     <ValueWithSpaceWarning value={value} />