[docs] Remove jsx from typescript code blocks (#213955)

In https://github.com/elastic/docs-builder/pull/699, we added the
ability to pass arguments to code blocks. In this repo, there are a few
code blocks that list two languages (`typescript jsx`). The docs-builder
interprets the second language `jsx` as an argument, but `jsx` is not a
valid argument so it throws an error. This should fix the `docs-build`
check.

cc @elastic/docs-engineering
This commit is contained in:
Colleen McGinnis 2025-03-11 10:48:24 -05:00 committed by GitHub
parent 68f46ba10c
commit 52381cb9bc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 11 deletions

View file

@ -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 apps URL in your apps code.
2. Avoid generating other apps 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 apps 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>

View file

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