-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Automatic Import] Fix the enter bug #199894
Conversation
Pinging @elastic/security-scalability (Team:Security-Scalability) |
@elasticmachine merge upstream |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you also add the corresponding cypress tests to test these UI changes
…bana into auto-import/form-submit-fixes
It looks like this will be the first time we add Cypress tests to our plugin. Shouldn't we best do it in a feature PR and not in a bugfix? |
Pinging @elastic/fleet (Team:Fleet) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
x-pack/plugins/fleet/cypress/e2e/integrations_automatic_import.cy.ts
Outdated
Show resolved
Hide resolved
.../components/create_integration/create_integration_assistant/create_integration_assistant.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Do we want to merge this before the sustainable kibana changes
💚 Build Succeeded
Metrics [docs]Async chunks
History
cc @ilyannn |
Starting backport for target branches: 8.x |
## Release Notes Fixes the bug where pressing Enter reloaded the Automatic Import. ## Summary - Fixes elastic#198238 - Adds/fixes telemetry for CEL events. - Refactors navigation functionality. - Adds extensive unit tests and a Cypress test for it. ## Details When the user presses the Enter inside our input field, the expected action is to send the form, in this case completing the step. However, previously the form submission would instead lead to reloading the whole Automatic Import page. In this PR we capture the form submission event and bubble it up as `completeStep` to the main component. We also move the implementation from the `Footer` up to this main component `CreateIntegrationAssistant`. This helps collect all the details about the step order in one place and refactor this logic. As a result, pressing `Enter` in any field now either - Is processed by the field itself (in case of multi-line fields); - Leads to the same action as pressing the "Next" button (desired result); or - Does nothing (e.g. in the inputs in the "Define data stream and upload logs" group – the reason for this is unclear). We add CEL-specific telemetry identifiers so that telemetry for step 5 is not always reported as `Deploy Step`. We also rename a bunch of stuff that was named `...StepReady` into `...StepReadyToComplete` as the previous name was ambiguous. To demonstrate this ambiguity we've enlisted the help of GPT 4o: <img width="832" alt="SCR-20241125-tiaa" src="https://github.com/user-attachments/assets/ad6bcf7c-7cb2-41c2-ac6b-38924ce990d3"> ## Testing We provide a Cypress test for Enter behavior: pressing it on the "integration title" input should let the flow proceed to the next step. This test fails on `main`. We also provide unit tests for all steps of navigation functionality in `x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/create_integration_assistant.test.tsx`: Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit d8bb72e)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
# Backport This will backport the following commits from `main` to `8.x`: - [[Automatic Import] Fix the enter bug (#199894)](#199894) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Ilya Nikokoshev","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-11T15:04:45Z","message":"[Automatic Import] Fix the enter bug (#199894)\n\n## Release Notes\r\n\r\nFixes the bug where pressing Enter reloaded the Automatic Import.\r\n\r\n## Summary\r\n\r\n- Fixes #198238\r\n- Adds/fixes telemetry for CEL events.\r\n- Refactors navigation functionality.\r\n- Adds extensive unit tests and a Cypress test for it.\r\n\r\n## Details\r\n\r\nWhen the user presses the Enter inside our input field, the expected\r\naction is to send the form, in this case completing the step. However,\r\npreviously the form submission would instead lead to reloading the whole\r\nAutomatic Import page.\r\n\r\nIn this PR we capture the form submission event and bubble it up as\r\n`completeStep` to the main component. We also move the implementation\r\nfrom the `Footer` up to this main component\r\n`CreateIntegrationAssistant`. This helps collect all the details about\r\nthe step order in one place and refactor this logic.\r\n\r\nAs a result, pressing `Enter` in any field now either\r\n - Is processed by the field itself (in case of multi-line fields);\r\n- Leads to the same action as pressing the \"Next\" button (desired\r\nresult); or\r\n- Does nothing (e.g. in the inputs in the \"Define data stream and upload\r\nlogs\" group – the reason for this is unclear).\r\n\r\nWe add CEL-specific telemetry identifiers so that telemetry for step 5\r\nis not always reported as `Deploy Step`.\r\n\r\nWe also rename a bunch of stuff that was named `...StepReady` into\r\n`...StepReadyToComplete` as the previous name was ambiguous. To\r\ndemonstrate this ambiguity we've enlisted the help of GPT 4o:\r\n\r\n<img width=\"832\" alt=\"SCR-20241125-tiaa\"\r\nsrc=\"https://github.com/user-attachments/assets/ad6bcf7c-7cb2-41c2-ac6b-38924ce990d3\">\r\n\r\n\r\n## Testing\r\n\r\nWe provide a Cypress test for Enter behavior: pressing it on the\r\n\"integration title\" input should let the flow proceed to the next step.\r\nThis test fails on `main`.\r\n\r\nWe also provide unit tests for all steps of navigation functionality in\r\n`x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/create_integration_assistant.test.tsx`:\r\n\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"d8bb72ebfdb1514f1fc03857d4c4e02f70fb7403","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","refactoring","Team:Fleet","v9.0.0","accessibility: keyboard navigation","backport:prev-minor","Team:Security-Scalability","Feature:AutomaticImport"],"title":"[Automatic Import] Fix the enter bug","number":199894,"url":"https://github.com/elastic/kibana/pull/199894","mergeCommit":{"message":"[Automatic Import] Fix the enter bug (#199894)\n\n## Release Notes\r\n\r\nFixes the bug where pressing Enter reloaded the Automatic Import.\r\n\r\n## Summary\r\n\r\n- Fixes #198238\r\n- Adds/fixes telemetry for CEL events.\r\n- Refactors navigation functionality.\r\n- Adds extensive unit tests and a Cypress test for it.\r\n\r\n## Details\r\n\r\nWhen the user presses the Enter inside our input field, the expected\r\naction is to send the form, in this case completing the step. However,\r\npreviously the form submission would instead lead to reloading the whole\r\nAutomatic Import page.\r\n\r\nIn this PR we capture the form submission event and bubble it up as\r\n`completeStep` to the main component. We also move the implementation\r\nfrom the `Footer` up to this main component\r\n`CreateIntegrationAssistant`. This helps collect all the details about\r\nthe step order in one place and refactor this logic.\r\n\r\nAs a result, pressing `Enter` in any field now either\r\n - Is processed by the field itself (in case of multi-line fields);\r\n- Leads to the same action as pressing the \"Next\" button (desired\r\nresult); or\r\n- Does nothing (e.g. in the inputs in the \"Define data stream and upload\r\nlogs\" group – the reason for this is unclear).\r\n\r\nWe add CEL-specific telemetry identifiers so that telemetry for step 5\r\nis not always reported as `Deploy Step`.\r\n\r\nWe also rename a bunch of stuff that was named `...StepReady` into\r\n`...StepReadyToComplete` as the previous name was ambiguous. To\r\ndemonstrate this ambiguity we've enlisted the help of GPT 4o:\r\n\r\n<img width=\"832\" alt=\"SCR-20241125-tiaa\"\r\nsrc=\"https://github.com/user-attachments/assets/ad6bcf7c-7cb2-41c2-ac6b-38924ce990d3\">\r\n\r\n\r\n## Testing\r\n\r\nWe provide a Cypress test for Enter behavior: pressing it on the\r\n\"integration title\" input should let the flow proceed to the next step.\r\nThis test fails on `main`.\r\n\r\nWe also provide unit tests for all steps of navigation functionality in\r\n`x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/create_integration_assistant.test.tsx`:\r\n\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"d8bb72ebfdb1514f1fc03857d4c4e02f70fb7403"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199894","number":199894,"mergeCommit":{"message":"[Automatic Import] Fix the enter bug (#199894)\n\n## Release Notes\r\n\r\nFixes the bug where pressing Enter reloaded the Automatic Import.\r\n\r\n## Summary\r\n\r\n- Fixes #198238\r\n- Adds/fixes telemetry for CEL events.\r\n- Refactors navigation functionality.\r\n- Adds extensive unit tests and a Cypress test for it.\r\n\r\n## Details\r\n\r\nWhen the user presses the Enter inside our input field, the expected\r\naction is to send the form, in this case completing the step. However,\r\npreviously the form submission would instead lead to reloading the whole\r\nAutomatic Import page.\r\n\r\nIn this PR we capture the form submission event and bubble it up as\r\n`completeStep` to the main component. We also move the implementation\r\nfrom the `Footer` up to this main component\r\n`CreateIntegrationAssistant`. This helps collect all the details about\r\nthe step order in one place and refactor this logic.\r\n\r\nAs a result, pressing `Enter` in any field now either\r\n - Is processed by the field itself (in case of multi-line fields);\r\n- Leads to the same action as pressing the \"Next\" button (desired\r\nresult); or\r\n- Does nothing (e.g. in the inputs in the \"Define data stream and upload\r\nlogs\" group – the reason for this is unclear).\r\n\r\nWe add CEL-specific telemetry identifiers so that telemetry for step 5\r\nis not always reported as `Deploy Step`.\r\n\r\nWe also rename a bunch of stuff that was named `...StepReady` into\r\n`...StepReadyToComplete` as the previous name was ambiguous. To\r\ndemonstrate this ambiguity we've enlisted the help of GPT 4o:\r\n\r\n<img width=\"832\" alt=\"SCR-20241125-tiaa\"\r\nsrc=\"https://github.com/user-attachments/assets/ad6bcf7c-7cb2-41c2-ac6b-38924ce990d3\">\r\n\r\n\r\n## Testing\r\n\r\nWe provide a Cypress test for Enter behavior: pressing it on the\r\n\"integration title\" input should let the flow proceed to the next step.\r\nThis test fails on `main`.\r\n\r\nWe also provide unit tests for all steps of navigation functionality in\r\n`x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/create_integration_assistant.test.tsx`:\r\n\r\n\r\nCo-authored-by: Elastic Machine <[email protected]>","sha":"d8bb72ebfdb1514f1fc03857d4c4e02f70fb7403"}}]}] BACKPORT--> Co-authored-by: Ilya Nikokoshev <[email protected]>
## Release Notes Fixes the bug where pressing Enter reloaded the Automatic Import. ## Summary - Fixes elastic#198238 - Adds/fixes telemetry for CEL events. - Refactors navigation functionality. - Adds extensive unit tests and a Cypress test for it. ## Details When the user presses the Enter inside our input field, the expected action is to send the form, in this case completing the step. However, previously the form submission would instead lead to reloading the whole Automatic Import page. In this PR we capture the form submission event and bubble it up as `completeStep` to the main component. We also move the implementation from the `Footer` up to this main component `CreateIntegrationAssistant`. This helps collect all the details about the step order in one place and refactor this logic. As a result, pressing `Enter` in any field now either - Is processed by the field itself (in case of multi-line fields); - Leads to the same action as pressing the "Next" button (desired result); or - Does nothing (e.g. in the inputs in the "Define data stream and upload logs" group – the reason for this is unclear). We add CEL-specific telemetry identifiers so that telemetry for step 5 is not always reported as `Deploy Step`. We also rename a bunch of stuff that was named `...StepReady` into `...StepReadyToComplete` as the previous name was ambiguous. To demonstrate this ambiguity we've enlisted the help of GPT 4o: <img width="832" alt="SCR-20241125-tiaa" src="https://github.com/user-attachments/assets/ad6bcf7c-7cb2-41c2-ac6b-38924ce990d3"> ## Testing We provide a Cypress test for Enter behavior: pressing it on the "integration title" input should let the flow proceed to the next step. This test fails on `main`. We also provide unit tests for all steps of navigation functionality in `x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/create_integration_assistant.test.tsx`: Co-authored-by: Elastic Machine <[email protected]>
Release Notes
Fixes the bug where pressing Enter reloaded the Automatic Import.
Summary
Details
When the user presses the Enter inside our input field, the expected action is to send the form, in this case completing the step. However, previously the form submission would instead lead to reloading the whole Automatic Import page.
In this PR we capture the form submission event and bubble it up as
completeStep
to the main component. We also move the implementation from theFooter
up to this main componentCreateIntegrationAssistant
. This helps collect all the details about the step order in one place and refactor this logic.As a result, pressing
Enter
in any field now eitherWe add CEL-specific telemetry identifiers so that telemetry for step 5 is not always reported as
Deploy Step
.We also rename a bunch of stuff that was named
...StepReady
into...StepReadyToComplete
as the previous name was ambiguous. To demonstrate this ambiguity we've enlisted the help of GPT 4o:Testing
We provide a Cypress test for Enter behavior: pressing it on the "integration title" input should let the flow proceed to the next step. This test fails on
main
.We also provide unit tests for all steps of navigation functionality in
x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/create_integration_assistant.test.tsx
: