kibana/packages/kbn-securitysolution-exception-list-components
Wafaa Nasr b33acd0fe6
[Security Solution][Exceptions] -Feature Add Exception list details page 132862 (#143041)
## Summary

Add *Exceptions List Details* page, addresses
(https://github.com/elastic/kibana/issues/132862)

**1. Search with no results**

<img width="1440" alt="image"
src="https://user-images.githubusercontent.com/12671903/195093683-a49aae90-1604-4d8b-931e-e6e75347d348.png">



**2. List with exceptions**

<img width="1450" alt="image"
src="https://user-images.githubusercontent.com/12671903/195093569-0ceb4e91-e7dc-47ba-975f-eaa060529614.png">

**3. Empty Exceptions**


![image](https://user-images.githubusercontent.com/12671903/195383665-eda7a5f8-fbcd-4f7d-a6b3-9a53a2bd7877.png)
  
**4. Update List Name and Description**


![image](https://user-images.githubusercontent.com/12671903/195384842-cf31751d-de47-4350-b2c3-79dff6669dfa.png)

**5. Export List**

![image](https://user-images.githubusercontent.com/12671903/195385602-e0b18a2b-ff55-4636-ba7f-145700c80a46.png)

**6. Manage Rules**
<img width="1227" alt="image"
src="https://user-images.githubusercontent.com/12671903/195641742-e70a46ed-d692-4536-a57c-6a56653efbd5.png">

**7. Linked Rules**
<img width="1186" alt="image"
src="https://user-images.githubusercontent.com/12671903/195641889-51c9b1db-8371-4455-b7b7-759c8e2adeca.png">

**8. ReadOnly mode when list is empty**

![image](https://user-images.githubusercontent.com/12671903/197999965-a379bc47-c6ca-45c3-ad95-a0581de37d90.png)

### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2022-11-15 16:23:00 +01:00
..
src [Security Solution][Exceptions] -Feature Add Exception list details page 132862 (#143041) 2022-11-15 16:23:00 +01:00
BUILD.bazel [auto] migrate existing plugin/package configs 2022-10-28 14:06:46 -05:00
index.ts [Security Solution][Exceptions] - Create/ refactor Exception-List common's components in @kbn/securitysolution-exception-list-components (#143363) 2022-10-19 19:33:17 +02:00
jest.config.js [Security Solution][Exceptions] - Create/ refactor Exception-List common's components in @kbn/securitysolution-exception-list-components (#143363) 2022-10-19 19:33:17 +02:00
kibana.jsonc Exceptions List component (#140985) 2022-09-28 20:36:05 +02:00
package.json [auto] migrate existing plugin/package configs 2022-10-28 14:06:46 -05:00
README.md [Security Solution][Exceptions] - Create/ refactor Exception-List common's components in @kbn/securitysolution-exception-list-components (#143363) 2022-10-19 19:33:17 +02:00
setup_test.ts Exceptions List component (#140985) 2022-09-28 20:36:05 +02:00
tsconfig.json fix(NA): wrongly spread stripInternal and rootDir configs across packages (#144463) 2022-11-03 01:04:55 +00:00

@kbn/securitysolution-exception-list-components

Common exceptions' components

Aim

  • 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

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
    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

  • Now the ExceptionItems, ExceptionItemCard and ExceptionItemCardMetaInfo receive securityLinkAnchorComponent, exceptionsUtilityComponent , and exceptionsUtilityComponent as props to avoid moving all the common components under the x-pack at once, later we should move all building blocks to this kbn-package