mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
# Backport This will backport the following commits from `main` to `9.0`: - [[docs] Remove `jsx` from `typescript` code blocks (#213955)](https://github.com/elastic/kibana/pull/213955) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Colleen McGinnis","email":"colleen.mcginnis@elastic.co"},"sourceCommit":{"committedDate":"2025-03-11T15:48:24Z","message":"[docs] Remove `jsx` from `typescript` code blocks (#213955)\n\nIn https://github.com/elastic/docs-builder/pull/699, we added the\nability to pass arguments to code blocks. In this repo, there are a few\ncode blocks that list two languages (`typescript jsx`). The docs-builder\ninterprets the second language `jsx` as an argument, but `jsx` is not a\nvalid argument so it throws an error. This should fix the `docs-build`\ncheck.\n\ncc @elastic/docs-engineering","sha":"52381cb9bcc8f84a200184254d042a45924f6f85","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","release_note:skip","v9.0.0","docs","backport:version","v9.1.0"],"title":"[docs] Remove `jsx` from `typescript` code blocks","number":213955,"url":"https://github.com/elastic/kibana/pull/213955","mergeCommit":{"message":"[docs] Remove `jsx` from `typescript` code blocks (#213955)\n\nIn https://github.com/elastic/docs-builder/pull/699, we added the\nability to pass arguments to code blocks. In this repo, there are a few\ncode blocks that list two languages (`typescript jsx`). The docs-builder\ninterprets the second language `jsx` as an argument, but `jsx` is not a\nvalid argument so it throws an error. This should fix the `docs-build`\ncheck.\n\ncc @elastic/docs-engineering","sha":"52381cb9bcc8f84a200184254d042a45924f6f85"}},"sourceBranch":"main","suggestedTargetBranches":["9.0"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213955","number":213955,"mergeCommit":{"message":"[docs] Remove `jsx` from `typescript` code blocks (#213955)\n\nIn https://github.com/elastic/docs-builder/pull/699, we added the\nability to pass arguments to code blocks. In this repo, there are a few\ncode blocks that list two languages (`typescript jsx`). The docs-builder\ninterprets the second language `jsx` as an argument, but `jsx` is not a\nvalid argument so it throws an error. This should fix the `docs-build`\ncheck.\n\ncc @elastic/docs-engineering","sha":"52381cb9bcc8f84a200184254d042a45924f6f85"}}]}] BACKPORT--> Co-authored-by: Colleen McGinnis <colleen.mcginnis@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
495d0b93a0
commit
417dc639ec
2 changed files with 11 additions and 11 deletions
|
|
@ -29,7 +29,7 @@ Assuming you want to link from your app to **Discover**. When building such URL
|
|||
|
||||
To prepend {{kib}}'s `basePath` use [core.http.basePath.prepend](https://github.com/elastic/kibana/tree/master/src/core/packages/http/browser-internal/src/base_path.ts) helper:
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
const discoverUrl = core.http.basePath.prepend(`/discover`);
|
||||
|
||||
console.log(discoverUrl); // http://localhost:5601/bpr/s/space/app/discover
|
||||
|
|
@ -43,14 +43,14 @@ console.log(discoverUrl); // http://localhost:5601/bpr/s/space/app/discover
|
|||
1. Avoid hardcoding other app’s URL in your app’s code.
|
||||
2. Avoid generating other app’s state and serializing it into URL query params.
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
// Avoid relying on other app's state structure in your app's code:
|
||||
const discoverUrlWithSomeState = core.http.basePath.prepend(`/discover#/?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'2020-09-10T11:39:50.203Z',to:'2020-09-10T11:40:20.249Z'))&_a=(columns:!(_source),filters:!(),index:'90943e30-9a47-11e8-b64d-95841ca0b247',interval:auto,query:(language:kuery,query:''),sort:!())`);
|
||||
```
|
||||
|
||||
Instead, each app should expose [a locator](https://github.com/elastic/kibana/tree/master/src/platform/plugins/shared/share/common/url_service/locators/README.md). Other apps should use those locators for navigation or URL creation.
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
// Properly generated URL to *Discover* app. Locator code is owned by *Discover* app and available on *Discover*'s plugin contract.
|
||||
const discoverUrl = await plugins.discover.locator.getUrl({filters, timeRange});
|
||||
// or directly execute navigation
|
||||
|
|
@ -93,14 +93,14 @@ Both methods offer customization such as opening the target in a new page, with
|
|||
|
||||
**Rendering a link to a different {{kib}} app on its own would also cause a full page reload:**
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
const myLink = () =>
|
||||
<a href={urlToADashboard}>Go to Dashboard</a>;
|
||||
```
|
||||
|
||||
A workaround could be to handle a click, prevent browser navigation and use `core.application.navigateToApp` API:
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
const MySPALink = () =>
|
||||
<a
|
||||
href={urlToADashboard}
|
||||
|
|
@ -115,7 +115,7 @@ const MySPALink = () =>
|
|||
|
||||
As it would be too much boilerplate to do this for each {{kib}} link in your app, there is a handy wrapper that helps with it: [RedirectAppLinks](https://github.com/elastic/kibana/tree/master/src/platform/packages/shared/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx).
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
const MyApp = () =>
|
||||
<RedirectAppLinks coreStart={{application: core.application}}>
|
||||
{/*...*/}
|
||||
|
|
@ -130,7 +130,7 @@ There may be cases where you need a full page reload. While rare and should be a
|
|||
::::
|
||||
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
const MyForcedPageReloadLink = () =>
|
||||
<a
|
||||
href={urlToSomeSpecialApp}
|
||||
|
|
@ -161,7 +161,7 @@ This is required to make sure `core` is aware of navigations triggered inside yo
|
|||
|
||||
Relative links will be resolved relative to your app’s route (e.g.: `http://localhost5601/app/{{your-app-id}}`) and setting up internal links in your app in SPA friendly way would look something like:
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
const MyInternalLink = () => <Link to="/my-other-page"></Link>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ In general this plugin provides:
|
|||
|
||||
To get started, first you need to know a trigger you will attach your actions to. You can either pick an existing one, or register your own one:
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
plugins.uiActions.registerTrigger({
|
||||
id: 'MY_APP_PIE_CHART_CLICK',
|
||||
title: 'Pie chart click',
|
||||
|
|
@ -34,7 +34,7 @@ plugins.uiActions.registerTrigger({
|
|||
|
||||
Now, when user clicks on a pie slice you need to "trigger" your trigger and provide some context data:
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
plugins.uiActions.getTrigger('MY_APP_PIE_CHART_CLICK').exec({
|
||||
/* Custom context data. */
|
||||
});
|
||||
|
|
@ -42,7 +42,7 @@ plugins.uiActions.getTrigger('MY_APP_PIE_CHART_CLICK').exec({
|
|||
|
||||
Finally, your code or developers from other plugins can register UI actions that listen for the above trigger and execute some code when the trigger is triggered.
|
||||
|
||||
```typescript jsx
|
||||
```typescript
|
||||
plugins.uiActions.registerAction({
|
||||
id: 'DO_SOMETHING',
|
||||
isCompatible: async (context) => true,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue