kibana/packages/kbn-babel-preset
Julia Bardi ea855c8dba
[Fleet] Sync integration status UI (#218389)
## Summary

Closes https://github.com/elastic/kibana/issues/217154

To test locally:
- Follow this guide to set up 2 clusters locally:
https://github.com/elastic/kibana/blob/main/x-pack/platform/plugins/shared/fleet/dev_docs/local_setup/remote_clusters_ccr.md
- Install a few integrations on the main cluster and create a few custom
component templates and ingest pipelines
 - Go to Fleet Settings, check the Sync status in the Output table

### Screenshots

Output table

<img width="1096" alt="image"
src="https://github.com/user-attachments/assets/047b516a-b32a-4827-a943-de1119d45dbe"
/>

Sync integrations status flyout 
- Added mock response to show the different UI states
- Added `Close` button instead of `Cancel` and `Done` because there is
no action to take on the flyout, it seemed unnecessary

<img width="598" alt="image"
src="https://github.com/user-attachments/assets/7cc70721-a765-488b-8191-a8a0aaefe4a1"
/>

 Tooltips

<img width="532" alt="image"
src="https://github.com/user-attachments/assets/387cdf84-e807-4287-8802-4a512c756a3a"
/>
<img width="343" alt="image"
src="https://github.com/user-attachments/assets/3c947361-5de8-40c2-bab8-a73e6321e9a8"
/>

Top level error without any integrations

<img width="605" alt="image"
src="https://github.com/user-attachments/assets/78d9a79a-fac5-4af2-9745-46dbdbe956a2"
/>




### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [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
2025-04-22 10:58:17 +02:00
..
BUILD.bazel chore(NA): upgrade to webpack 5 (#191106) 2025-02-14 03:01:36 +00:00
common_babel_parser_options.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
common_preset.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
istanbul_preset.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
kibana.jsonc Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
node_preset.js Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
package.json Adds AGPL 3.0 license (#192025) 2024-09-06 19:02:41 -06:00
README.mdx Initialize ops documentation section (#132262) 2022-05-17 15:22:38 -05:00
styled_components_files.js [Fleet] Sync integration status UI (#218389) 2025-04-22 10:58:17 +02:00
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
webpack_preset.js chore(NA): upgrade to webpack 5 (#191106) 2025-02-14 03:01:36 +00:00

---
id: kibDevDocsOpsBabelPreset
slug: /kibana-dev-docs/ops/babel-preset
title: "@kbn/babel-preset"
description: A package holding the main babel configs on Kibana
date: 2022-05-17
tags: ['kibana', 'dev', 'contributor', 'operations', 'babel', 'custom', 'preset']
---

This package contains the shared bits of babel config that we use for transpiling our source code to code compatible with Node.JS and the various [browsers we support](https://www.elastic.co/support/matrix#matrix_browsers).

## Usage

To use those presets add either `@kbn/babel-preset/node_preset` or `@kbn/babel-preset/webpack_preset` into the babel config file.

`@kbn/babel-preset/node_preset` is usually placed in a [`babel.config.js` file](https://babeljs.io/docs/en/configuration#babelconfigjs).

`@kbn/babel-preset/webpack_preset` is usually placed directly in a `webpack` configuration.

If you're transpiling code that will be run in both the browser and node you must transpile your code twice, once for each target. 

Along with the introduction of Bazel to build packages we also provide now an easier way to easily use the babel transpiler by using the `js_ts_tarnspiler` rule with our without the `web` property enabled. 
Take a look for example at `@kbn/i18n` to see how that can look.