[Security Solution][Exceptions] - Create/ refactor Exception-List com…

…mon's components in @kbn/securitysolution-exception-list-components (elastic#143363)

* feat: add list header components + refactoring

* add tests for comments and conditions components

* remove unused var

* complete tests for exception_item_card, excpetion_items, empty_viewer_state

* add test for useExceptionItemCard hook

* add tests for generateLinedRulesMenuItems

* add readme and index.md

* Update index.md

* remove unused file

* remove unused file

* add tests for Header_menu

* extract security mocks to a file

* test for header

* add missing tests

* fix tests

* fix text_with_edit dataTestSubj

* apply rewview comment

Co-authored-by: Kibana Machine <[email protected]>

packages/kbn-securitysolution-exception-list-components/README.md

@@ -1,11 +1,11 @@
 # @kbn/securitysolution-exception-list-components
 
-This is where the building UI components of the Exception-List live
-Most of the components here are imported from `x-pack/plugins/security_solutions/public/detection_engine` 
+Common exceptions' components
 
 # Aim 
 
-TODO
+- To have most of the Exceptions' components in one place, to be shared accross multiple pages and used for different logic.
+- This `package` holds the presetational part of the components only as the API or the logic part should reside under the consumer page
 
 # Pattern used
 
@@ -14,9 +14,19 @@ component
     index.tsx
     index.styles.ts <-- to hold styles if the component has many custom styles
     use_component.ts <-- for logic if the Presentational Component has logic
-    index.test.tsx
+    component.test.tsx
     use_component.test.tsx
+  
 ```
+# Testing 
+
+In order to unify our testing tools, we configured only two libraries, the `React-Testing-Library` to test the component UI part and the `Reat-Testing-Hooks` to test the component's UI interactions
+
+# Styling 
+
+In order to follow the `KBN-Packages's` recommendations, to define a custom CSS we can only use the `@emotion/react` or `@emotion/css` libraries
+
+
 
 # Next
 

packages/kbn-securitysolution-exception-list-components/index.ts

@@ -6,11 +6,13 @@
  * Side Public License, v 1.
  */
 
-export * from './src/search_bar/search_bar';
-export * from './src/empty_viewer_state/empty_viewer_state';
+export * from './src/search_bar';
+export * from './src/empty_viewer_state';
 export * from './src/pagination/pagination';
 // export * from './src/exceptions_utility/exceptions_utility';
-export * from './src/exception_items/exception_items';
+export * from './src/exception_items';
 export * from './src/exception_item_card';
 export * from './src/value_with_space_warning';
 export * from './src/types';
+export * from './src/list_header';
+export * from './src/header_menu';

packages/kbn-securitysolution-exception-list-components/jest.config.js

@@ -14,6 +14,13 @@ module.exports = {
   collectCoverageFrom: [
     '<rootDir>/packages/kbn-securitysolution-exception-list-components/**/*.{ts,tsx}',
     '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/*.test',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/types/*',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/*.type',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/*.styles',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/mocks/*',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/*.config',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/translations',
+    '!<rootDir>/packages/kbn-securitysolution-exception-list-components/**/types/*',
   ],
   setupFilesAfterEnv: [
     '<rootDir>/packages/kbn-securitysolution-exception-list-components/setup_test.ts',

packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/empty_viewer_state.test.tsx

@@ -9,8 +9,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { EmptyViewerState } from './empty_viewer_state';
+import { EmptyViewerState } from '.';
 import { ListTypeText, ViewerStatus } from '../types';
+import * as i18n from '../translations';
 
 describe('EmptyViewerState', () => {
   it('it should render "error" with the default title and body', () => {
@@ -23,10 +24,10 @@ describe('EmptyViewerState', () => {
     );
 
     expect(wrapper.getByTestId('errorViewerState')).toBeTruthy();
-    expect(wrapper.getByTestId('errorTitle')).toHaveTextContent('Unable to load exception items');
-    expect(wrapper.getByTestId('errorBody')).toHaveTextContent(
-      'There was an error loading the exception items. Contact your administrator for help.'
+    expect(wrapper.getByTestId('errorTitle')).toHaveTextContent(
+      i18n.EMPTY_VIEWER_STATE_ERROR_TITLE
     );
+    expect(wrapper.getByTestId('errorBody')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_ERROR_BODY);
   });
   it('it should render "error" when sending the title and body props', () => {
     const wrapper = render(
@@ -65,9 +66,11 @@ describe('EmptyViewerState', () => {
 
     expect(wrapper.getByTestId('emptySearchViewerState')).toBeTruthy();
     expect(wrapper.getByTestId('emptySearchTitle')).toHaveTextContent(
-      'No results match your search criteria'
+      i18n.EMPTY_VIEWER_STATE_EMPTY_SEARCH_TITLE
+    );
+    expect(wrapper.getByTestId('emptySearchBody')).toHaveTextContent(
+      i18n.EMPTY_VIEWER_STATE_EMPTY_SEARCH_BODY
     );
-    expect(wrapper.getByTestId('emptySearchBody')).toHaveTextContent('Try modifying your search');
   });
   it('it should render empty search when sending title and body props', () => {
     const wrapper = render(
@@ -111,11 +114,11 @@ describe('EmptyViewerState', () => {
 
     const { getByTestId } = wrapper;
     expect(getByTestId('emptyViewerState')).toBeTruthy();
-    expect(getByTestId('emptyTitle')).toHaveTextContent('Add exceptions to this rule');
-    expect(getByTestId('emptyBody')).toHaveTextContent(
-      'There is no exception in your rule. Create your first rule exception.'
+    expect(getByTestId('emptyTitle')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_EMPTY_TITLE);
+    expect(getByTestId('emptyBody')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_EMPTY_BODY);
+    expect(getByTestId('emptyStateButton')).toHaveTextContent(
+      i18n.EMPTY_VIEWER_STATE_EMPTY_VIEWER_BUTTON('rule')
     );
-    expect(getByTestId('emptyStateButton')).toHaveTextContent('Create rule exception');
   });
   it('it should render no items screen with default title and body props and listType endPoint', () => {
     const wrapper = render(
@@ -129,10 +132,29 @@ describe('EmptyViewerState', () => {
 
     const { getByTestId } = wrapper;
     expect(getByTestId('emptyViewerState')).toBeTruthy();
-    expect(getByTestId('emptyTitle')).toHaveTextContent('Add exceptions to this rule');
-    expect(getByTestId('emptyBody')).toHaveTextContent(
-      'There is no exception in your rule. Create your first rule exception.'
+    expect(getByTestId('emptyTitle')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_EMPTY_TITLE);
+    expect(getByTestId('emptyBody')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_EMPTY_BODY);
+    expect(getByTestId('emptyStateButton')).toHaveTextContent(
+      i18n.EMPTY_VIEWER_STATE_EMPTY_VIEWER_BUTTON(ListTypeText.ENDPOINT)
+    );
+  });
+  it('it should render no items screen and disable the Create exception button if isReadOnly true', () => {
+    const wrapper = render(
+      <EmptyViewerState
+        isReadOnly={true}
+        viewerStatus={ViewerStatus.EMPTY}
+        onCreateExceptionListItem={jest.fn()}
+        listType={ListTypeText.ENDPOINT}
+      />
+    );
+
+    const { getByTestId } = wrapper;
+    expect(getByTestId('emptyViewerState')).toBeTruthy();
+    expect(getByTestId('emptyTitle')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_EMPTY_TITLE);
+    expect(getByTestId('emptyBody')).toHaveTextContent(i18n.EMPTY_VIEWER_STATE_EMPTY_BODY);
+    expect(getByTestId('emptyStateButton')).toHaveTextContent(
+      i18n.EMPTY_VIEWER_STATE_EMPTY_VIEWER_BUTTON(ListTypeText.ENDPOINT)
     );
-    expect(getByTestId('emptyStateButton')).toHaveTextContent('Create endpoint exception');
+    expect(getByTestId('emptyStateButton')).toBeDisabled();
   });
 });