mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
010ee2e112
Resolves https://github.com/elastic/kibana/issues/144887 ## Summary This PR adds an ESLint Plugin which checks specific `Eui` elements for the existence of a `data-test-subj` prop. This rule will make having one for these elements required. This rule is currently only enabled for Observability apps (APM, Infra, Observability, Synthetics, Uptime). The plugin is also able to generate a suggestion based on the context in which the element is used. In the IDE this suggestion can be applied by using the autofix capability (see video below). When opening a PR, the CI will automatically apply the suggestion to qualifying Eui elements in the branch. https://user-images.githubusercontent.com/535564/225449622-bbfccb40-fdd2-4f69-9d5a-7d5a97bf62e6.mov ## Why do this? There is an increased push to move towards data driven feature development. In order to facilitate this, we need to have an increased focus on instrumenting user event generating elements in the Kibana codebase. This linting rule is an attempt to nudge Kibana engineers to not forget to add this property when writing frontend code. It also saves a bit of work for engineers by suggesting a value for the `data-test-subj` based on the location of the file in the codebase and any potential default values that might be present in the JSX node tree. Finally, because the suggestion is always of the same form, it can increase the consistency in the values given to these elements. ## Shape of the suggestion The suggestion for the value of data-test-subj is of the form: `[app][componentName][intent][euiElementName]`. For example, when working in a component in the location: `x-pack/plugins/observability/public/pages/overview/containers/overview_page/header_actions.tsx`, and having the code: ``` function HeaderActions() { return ( <EuiButton>{i18n.translate('id', { defaultMessage: 'Submit Form' })}</EuiButton> ) } ``` the suggestion becomes: `data-test-subj=o11yHeaderActionsSubmitFormButton`. For elements that don't take a `defaultMessage` prop / translation, the suggestion takes the form: `[app][componentName][euiElementName]` ## Which elements are checked by the ESLint rule? In its current iteration the rule checks these Eui elements: * `EuiButton` * `EuiButtonEmpty` * `EuiLink` * `EuiFieldText` * `EuiFieldSearch` * `EuiFieldNumber` * `EuiSelect` * `EuiRadioGroup` * 'EuiTextArea` ## What types of prop setting does this rule support? * `<EuiButton data-test-subj="foo">` (direct prop) * `<EuiButton {...foo}>` (via spreaded object; rule checks for `data-test-subj` key in object) ## What types of function declarations does this rule support? * `function Foo(){}` (Named function) * `const Foo = () => {}` (Arrow function assigned to variable) * `const Foo = memo(() => {})` (Arrow function assigned to variable wrapped in function) * `const Foo = hoc(uponHoc(uponHoc(() => {})))` (Arrow function assigned to variable wrapped in infinite levels of functions) ## Things to note * If an element already has a value for `data-test-subj` the rule will not kick in as any existing instrumentation might depend on the value. * the auto suggestion is just a suggestion: the engineer can always adjust the value for a `data-test-subj` before or after committing. Once a value is present (autofixed or manually set) the rule will not kick in. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dario Gieselaar <d.gieselaar@gmail.com> Co-authored-by: Katerina Patticha <kate@kpatticha.com> Co-authored-by: Tiago Costa <tiago.costa@elastic.co> |
||
|---|---|---|
| .. | ||
| helpers | ||
| rules | ||
| index.ts | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| README.mdx | ||
| tsconfig.json | ||
--- id: kibDevDocsOpsEslintPluginTelemetry slug: /kibana-dev-docs/ops/kbn-eslint-plugin-telemetry title: '@kbn/eslint-plugin-telemetry' description: Custom ESLint rules to support telemetry in the Kibana repository tags: ['kibana', 'dev', 'contributor', 'operations', 'eslint', 'telemetry'] --- `@kbn/eslint-plugin-telemetry` is an ESLint plugin providing custom rules for validating JSXCode in the Kibana repo to make sure it can be instrumented for the purposes of telemetry. ## `@kbn/telemetry/instrumentable_elements_should_be_instrumented` This rule warns engineers to add `data-test-subj` to instrumentable components. It currently suggests the most widely used EUI components (`EuiButton`, `EuiFieldText`, etc), but can be expanded with often-used specific components used in the Kibana repo.