584875e666
## Summary Epic: https://github.com/elastic/kibana-team/issues/1435 Closes https://github.com/elastic/kibana/issues/205413 Closes https://github.com/elastic/kibana/issues/205411 This PR creates a new way to expose stateful service dependencies needed for rendering React elements in Kibana. The concept of the changes is that `KibanaRenderContextProvider` should not be a shared module, but should be wrapped by a core service (the `RenderContextService` name is TBD). The next steps in this direction would be to coordinate teams to migrate away from directly using `KibanaRenderContextProvider`. ### Background Today, the dependencies for `KibanaRenderContextProvider` are declared as separate services which can be found in the `CoreStart` context. This has created a situation where enhancing the module with more dependencies creates widespread changes needed for the UI codebase. The @elastic/appex-sharedux team is looking to solve this situation by defining a less impactful way to make future enhancements. The solution is one that can be gradually migrated towards, so the SharedUX team can ask Kibana contributors to migrate towards in their own code. This PR offers a POC for that solution. ### Details of this POC The driving goal for this refactor is to lessen the impact across the Kibana codebase whenever the `KibanaRenderContext` module needs to require additional services from the `CoreStart` context. #### Rendering a React Element with `ReactDOM.render`: Before ```tsx const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => { // If `KibanaRenderContextProvider` needs to expand its scope, more services could be needed here, // updating all the places throughout the code to pass those is a ton of work 👎🏻 const { i18n, theme, analytics, userProfile, executionContext } = core; ReactDOM.render( <KibanaRenderContextProvider {...{ i18n, theme, analytics, userProfile, executionContext }}> <MyApplication /> </KibanaRenderContextProvider>, targetDomElement ); return () => ReactDOM.unmountComponentAtNode(targetDomElement); }; ``` #### Rendering a React Element with `ReactDOM.render`: After ```tsx const renderApp = ({ core, targetDomElement }: { core: CoreStart; targetDomElement: HTMLElement; }) => { // So much less code, so much more future-proof 👍🏻 ReactDOM.render(core.rendering.addContext(<MyApplication />), targetDomElement); return () => ReactDOM.unmountComponentAtNode(targetDomElement); }; ``` ### Alternatives considered See https://github.com/elastic/kibana/pull/209161 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [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 ### FAQ 1. **Q**: This is React-centric. Does this give Kibana more commitment towards React? **A:** For now, yes. But if we want to Kibana to remain framework-agnostic we may be able to add more extensions to the RenderContextService that support other frameworks. 1. **Q:** Why not have a service that wraps `ReactDOM.render`? **A:** As we steer towards upgrading to React 18 in Kibana, staying agnostic of how React is rendered benefits us. React 18 has different ergonomics based on whether you want to update an existing tree or mount a new one. 1. **Q:** Does the API have to be named `rendering.addContext`? **A:** No, it does not. Please suggest a better name if you have one in mind. 1. **Q:** What are the next steps? **A:** Refer to the [Epic](https://github.com/elastic/kibana-team/issues/1435). This PR started as a POC but became ready for merge. After it is delivered to the codebase, the next steps are to improve documentation and engage in "sheparding." That is, socialize the new way of injecting dependencies into the context, support teams in their migration, and track the progress of migration. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [x] Care is needed to ensure this doesn't not negatively impact performance with unnecessary re-renders. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| build_chromium | ||
| dev-tools | ||
| examples | ||
| packages | ||
| performance | ||
| platform | ||
| scripts | ||
| solutions | ||
| test | ||
| test_serverless | ||
| .gitignore | ||
| .i18nrc.json | ||
| .telemetryrc.json | ||
| package.json | ||
| README.md | ||
Elastic License Functionality
This directory tree contains files subject to the Elastic License 2.0. The files subject to the Elastic License 2.0 are grouped in this directory to clearly separate them from files licensed otherwise.
Alert Details page feature flags (feature-flag-per-App)
If you have:
xpack.observability.unsafe.alertDetails.uptime.enabled: true
[For Uptime rule type] In Kibana configuration, will allow the user to navigate to the new Alert Details page, instead of the Alert Flyout when clicking on View alert details in the Alert table
Development
By default, Kibana will run with X-Pack installed as mentioned in the contributing guide.
Elasticsearch will run with a basic license. To run with a trial license, including security, you can specifying that with the yarn es command.
Example: yarn es snapshot --license trial --password changeme
By default, this will also set the password for native realm accounts to the password provided (changeme by default). This includes that of the kibana_system user which elasticsearch.username defaults to in development. If you wish to specify a password for a given native realm account, you can do that like so: --password.kibana_system=notsecure
Testing
For information on testing, see the Elastic functional test development guide.
Running functional tests
The functional UI tests, the API integration tests, and the SAML API integration tests are all run against a live browser, Kibana, and Elasticsearch install. Each set of tests is specified with a unique config that describes how to start the Elasticsearch server, the Kibana server, and what tests to run against them. The sets of tests that exist today are functional UI tests (specified by this config), API integration tests (specified by this config), and SAML API integration tests (specified by this config).
The script runs all sets of tests sequentially like so:
- builds Elasticsearch and X-Pack
- runs Elasticsearch with X-Pack
- starts up the Kibana server with X-Pack
- runs the functional UI tests against those servers
- tears down the servers
- repeats the same process for the API and SAML API integration test configs.
To do all of this in a single command run:
node scripts/functional_tests
Developing functional UI tests
If you are developing functional tests then you probably don't want to rebuild Elasticsearch and wait for all that setup on every test run, so instead use this command to build and start just the Elasticsearch and Kibana servers:
node scripts/functional_tests_server
After the servers are started, open a new terminal and run this command to run just the tests (without tearing down Elasticsearch or Kibana):
node scripts/functional_test_runner
For both of the above commands, it's crucial that you pass in --config to specify the same config file to both commands. This makes sure that the right tests will run against the right servers. Typically a set of tests and server configuration go together.
Read more about how the scripts work here.
For a deeper dive, read more about the way functional tests and servers work here.
Running API integration tests
API integration tests are run with a unique setup usually without UI assets built for the Kibana server.
API integration tests are intended to test only programmatic API exposed by Kibana. There is no need to run browser and simulate user actions, which significantly reduces execution time. In addition, the configuration for API integration tests typically sets optimize.enabled=false for Kibana because UI assets are usually not needed for these tests.
To run only the API integration tests:
node scripts/functional_tests --config test/api_integration/config
Running SAML API integration tests
We also have SAML API integration tests which set up Elasticsearch and Kibana with SAML support. Run only API integration tests with SAML enabled like so:
node scripts/functional_tests --config test/security_api_integration/saml.config
Running Jest integration tests
Jest integration tests can be used to test behavior with Elasticsearch and the Kibana server.
yarn test:jest_integration
Running Reporting functional tests
See here for more information on running reporting tests.
Running Security Solution Cypress E2E/integration tests
See here for information on running this test suite.