Commit graph

12 commits

Author SHA1 Message Date
Marta Bondyra
65bdf1ff8e
Optimize existing image assets with lossless compression (#223998)
## Summary

This PR applies **lossless compression** to all SVG and JPG/PNG assets
across Kibana using:

- [`svgo`](https://github.com/svg/svgo) — for optimizing SVGs  
- [`image-optimize`](https://www.npmjs.com/package/image-optimize) — for
JPG/PNG compression

‼️**Please scroll to ''Unknown metric groups" accordion to see what's
the gain for your code.**
<img width="542" alt="Screenshot 2025-06-18 at 13 24 20"
src="https://github.com/user-attachments/assets/191afb28-44fc-4551-9026-756a8385c66a"
/>

The goal is to reduce asset size and improve load performance without
compromising visual quality.

This PR achieves a **23 MB** reduction in asset size across all images
bundled in Kibana’s running code—meaning these compressed images
directly impact what ships in Kibana.
Some assets get bundled into chunks due to our bundling strategy but
might not actually be requested at runtime.

Additionally, I ran the same optimization script on the docs assets as a
harmless extra step, but those savings aren’t included in the 23 MB
total.

---

## Why

While working on Emotion rewrites, I noticed some SVGs seemed
unnecessarily heavy. That led to a broader investigation into our image
assets, and it turns out we’re not consistently optimizing them during
development or build.


---

## Notes

- Visual fidelity of optimized assets has been manually verified — no
visible differences
- The optimization is **lossless**, meaning no quality degradation
- Some assets (like large background images) could benefit further from
**lossy compression**

---

## Follow-ups / Ideas

1. **Automate compression in the dev/build pipeline**
   - e.g. add `svgo` as a pre-commit or CI step for SVGs
2. **Improve CI reporting**  
- Currently, bundle size diffs for images are hidden under "Unknown
metric groups" in the GitHub CI comment. We may want to make these more
visible.
   - 
3. **Audit large assets manually** — apply lossy compression where
appropriate
4. **Avoid redundant image loading**  
- e.g. background images on the login page are loaded again on the space
selector page since they’re bundled twice. I’m working on a separate PR
to address that.

## Snippets I used to apply the compression

```
# Find SVG files
find . -type f -iname "*.svg" \
  -not -path "*/node_modules/*" \
  -not -path "*/functional/*" > svg-files.txt

# Compress SVGs
while IFS= read -r file; do
  svgo "$file"
done < svg-files.txt
```

This snippet has been used for png and jpg, but the example below is for
png:
```
# Find PNG files
find . -type f -iname "*.png \
  -not -path "*/node_modules/*" \
  -not -path "*/functional/*" > png-files.txt

# Compress PNGs
while IFS= read -r file; do
  image-optimize -f jpg "$file"
done < png-files.txt
```
2025-06-19 16:44:13 +02:00
Gerard Soldevila
bb877cff7e
Sustainable Kibana Architecture: Move modules owned by @elastic/kibana-data-discovery (#203152)
## Summary

This PR aims at relocating some of the Kibana modules (plugins and
packages) into a new folder structure, according to the _Sustainable
Kibana Architecture_ initiative.

> [!IMPORTANT]
> * We kindly ask you to:
> * Manually fix the errors in the error section below (if there are
any).
> * Search for the `packages[\/\\]` and `plugins[\/\\]` patterns in the
source code (Babel and Eslint config files), and update them
appropriately.
> * Manually review
`.buildkite/scripts/pipelines/pull_request/pipeline.ts` to ensure that
any CI pipeline customizations continue to be correctly applied after
the changed path names
> * Review all of the updated files, specially the `.ts` and `.js` files
listed in the sections below, as some of them contain relative paths
that have been updated.
> * Think of potential impact of the move, including tooling and
configuration files that can be pointing to the relocated modules. E.g.:
>     * customised eslint rules
>     * docs pointing to source code

> [!NOTE]
> * This PR has been auto-generated.
> * Any manual contributions will be lost if the 'relocate' script is
re-run.
> * Try to obtain the missing reviews / approvals before applying manual
fixes, and/or keep your changes in a .patch / git stash.
> * Please use
[#sustainable_kibana_architecture](https://elastic.slack.com/archives/C07TCKTA22E)
Slack channel for feedback.

Are you trying to rebase this PR to solve merge conflicts? Please follow
the steps describe
[here](https://elastic.slack.com/archives/C07TCKTA22E/p1734019532879269?thread_ts=1734019339.935419&cid=C07TCKTA22E).

#### 12 plugin(s) are going to be relocated:

| Id | Target folder |
| -- | ------------- |
| `@kbn/data-view-editor-plugin` |
`src/platform/plugins/shared/data_view_editor` |
| `@kbn/data-view-field-editor-plugin` |
`src/platform/plugins/shared/data_view_field_editor` |
| `@kbn/data-view-management-plugin` |
`src/platform/plugins/shared/data_view_management` |
| `@kbn/data-views-plugin` | `src/platform/plugins/shared/data_views` |
| `@kbn/discover-enhanced-plugin` |
`x-pack/platform/plugins/private/discover_enhanced` |
| `@kbn/discover-plugin` | `src/platform/plugins/shared/discover` |
| `@kbn/discover-shared-plugin` |
`src/platform/plugins/shared/discover_shared` |
| `@kbn/field-formats-plugin` |
`src/platform/plugins/shared/field_formats` |
| `@kbn/saved-objects-finder-plugin` |
`src/platform/plugins/shared/saved_objects_finder` |
| `@kbn/saved-search-plugin` |
`src/platform/plugins/shared/saved_search` |
| `@kbn/unified-doc-viewer-plugin` |
`src/platform/plugins/shared/unified_doc_viewer` |
| `@kbn/unified-histogram-plugin` |
`src/platform/plugins/shared/unified_histogram` |




#### 18 packages(s) are going to be relocated:

| Id | Target folder |
| -- | ------------- |
| `@kbn/content-management-utils` |
`src/platform/packages/shared/kbn-content-management-utils` |
| `@kbn/data-view-utils` |
`src/platform/packages/shared/kbn-data-view-utils` |
| `@kbn/datemath` | `src/platform/packages/shared/kbn-datemath` |
| `@kbn/deeplinks-analytics` |
`src/platform/packages/shared/deeplinks/analytics` |
| `@kbn/default-nav-analytics` |
`src/platform/packages/private/default-nav/analytics` |
| `@kbn/discover-utils` |
`src/platform/packages/shared/kbn-discover-utils` |
| `@kbn/es-query` | `src/platform/packages/shared/kbn-es-query` |
| `@kbn/field-types` | `src/platform/packages/shared/kbn-field-types` |
| `@kbn/field-utils` | `src/platform/packages/shared/kbn-field-utils` |
| `@kbn/react-field` | `src/platform/packages/shared/kbn-react-field` |
| `@kbn/resizable-layout` |
`src/platform/packages/shared/kbn-resizable-layout` |
| `@kbn/search-errors` |
`src/platform/packages/shared/kbn-search-errors` |
| `@kbn/search-response-warnings` |
`src/platform/packages/shared/kbn-search-response-warnings` |
| `@kbn/search-types` | `src/platform/packages/shared/kbn-search-types`
|
| `@kbn/unified-data-table` |
`src/platform/packages/shared/kbn-unified-data-table` |
| `@kbn/unified-doc-viewer` |
`src/platform/packages/shared/kbn-unified-doc-viewer` |
| `@kbn/unified-field-list` |
`src/platform/packages/shared/kbn-unified-field-list` |
| `@kbn/unsaved-changes-badge` |
`src/platform/packages/private/kbn-unsaved-changes-badge` |


<details >
<summary>Updated references</summary>

```
./.buildkite/scripts/steps/functional/scout_ui_tests.sh
./.eslintrc.js
./.i18nrc.json
./docs/developer/advanced/sharing-saved-objects.asciidoc
./docs/developer/architecture/core/saved-objects-service.asciidoc
./docs/developer/best-practices/navigation.asciidoc
./docs/developer/contributing/development-unit-tests.asciidoc
./docs/developer/plugin-list.asciidoc
./examples/unified_doc_viewer/README.md
./examples/unified_field_list_examples/public/plugin.ts
./legacy_rfcs/text/0015_bazel.md
./oas_docs/scripts/merge_ess_oas.js
./oas_docs/scripts/merge_serverless_oas.js
./package.json
./packages/kbn-repo-packages/package-map.json
./packages/kbn-synthetic-package-map/synthetic-packages.json
./packages/kbn-test/src/functional_tests/lib/babel_register_for_test_plugins.js
./packages/kbn-ts-projects/config-paths.json
./packages/kbn-ui-shared-deps-src/BUILD.bazel
./packages/kbn-unified-field-list/src/services/field_examples_calculator/field_examples_calculator.ts
./packages/shared-ux/prompt/no_data_views/types/index.d.ts
./src/dev/code_coverage/ingest_coverage/__tests__/mocks/team_assign_mock.txt
./src/dev/storybook/aliases.ts
./src/platform/packages/private/default-nav/analytics/jest.config.js
./src/platform/packages/private/kbn-unsaved-changes-badge/jest.config.js
./src/platform/packages/shared/deeplinks/analytics/jest.config.js
./src/platform/packages/shared/kbn-content-management-utils/jest.config.js
./src/platform/packages/shared/kbn-data-view-utils/jest.config.js
./src/platform/packages/shared/kbn-datemath/jest.config.js
./src/platform/packages/shared/kbn-discover-utils/jest.config.js
./src/platform/packages/shared/kbn-es-query/jest.config.js
./src/platform/packages/shared/kbn-field-types/jest.config.js
./src/platform/packages/shared/kbn-field-utils/jest.config.js
./src/platform/packages/shared/kbn-react-field/jest.config.js
./src/platform/packages/shared/kbn-resizable-layout/jest.config.js
./src/platform/packages/shared/kbn-search-errors/jest.config.js
./src/platform/packages/shared/kbn-search-response-warnings/jest.config.js
./src/platform/packages/shared/kbn-search-types/jest.config.js
./src/platform/packages/shared/kbn-unified-data-table/jest.config.js
./src/platform/packages/shared/kbn-unified-doc-viewer/jest.config.js
./src/platform/packages/shared/kbn-unified-field-list/jest.config.js
./src/platform/plugins/shared/data_view_editor/jest.config.js
./src/platform/plugins/shared/data_view_field_editor/jest.config.js
./src/platform/plugins/shared/data_view_management/jest.config.js
./src/platform/plugins/shared/data_views/jest.config.js
./src/platform/plugins/shared/discover/README.md
./src/platform/plugins/shared/discover/jest.config.js
./src/platform/plugins/shared/discover/public/context_awareness/README.md
./src/platform/plugins/shared/discover_shared/README.md
./src/platform/plugins/shared/discover_shared/jest.config.js
./src/platform/plugins/shared/field_formats/jest.config.js
./src/platform/plugins/shared/saved_objects_finder/jest.config.js
./src/platform/plugins/shared/saved_search/jest.config.js
./src/platform/plugins/shared/unified_doc_viewer/jest.config.js
./src/platform/plugins/shared/unified_histogram/jest.config.js
./tsconfig.base.json
./tsconfig.refs.json
./x-pack/.i18nrc.json
./x-pack/platform/plugins/private/discover_enhanced/jest.config.js
./x-pack/platform/plugins/private/discover_enhanced/ui_tests/README.md
./x-pack/solutions/security/plugins/timelines/common/search_strategy/index_fields/index.ts
./yarn.lock
.github/CODEOWNERS
```

</details><details >
<summary>Updated relative paths</summary>

```
src/platform/packages/private/default-nav/analytics/jest.config.js:12
src/platform/packages/private/default-nav/analytics/tsconfig.json:2
src/platform/packages/private/kbn-unsaved-changes-badge/jest.config.js:12
src/platform/packages/private/kbn-unsaved-changes-badge/tsconfig.json:2
src/platform/packages/shared/deeplinks/analytics/jest.config.js:12
src/platform/packages/shared/deeplinks/analytics/tsconfig.json:2
src/platform/packages/shared/kbn-content-management-utils/jest.config.js:12
src/platform/packages/shared/kbn-content-management-utils/tsconfig.json:2
src/platform/packages/shared/kbn-data-view-utils/jest.config.js:12
src/platform/packages/shared/kbn-data-view-utils/tsconfig.json:2
src/platform/packages/shared/kbn-datemath/jest.config.js:22
src/platform/packages/shared/kbn-datemath/tsconfig.json:2
src/platform/packages/shared/kbn-discover-utils/jest.config.js:12
src/platform/packages/shared/kbn-discover-utils/tsconfig.json:2
src/platform/packages/shared/kbn-es-query/jest.config.js:12
src/platform/packages/shared/kbn-es-query/tsconfig.json:2
src/platform/packages/shared/kbn-field-types/jest.config.js:12
src/platform/packages/shared/kbn-field-types/tsconfig.json:2
src/platform/packages/shared/kbn-field-utils/jest.config.js:12
src/platform/packages/shared/kbn-field-utils/tsconfig.json:2
src/platform/packages/shared/kbn-react-field/jest.config.js:12
src/platform/packages/shared/kbn-react-field/tsconfig.json:2
src/platform/packages/shared/kbn-resizable-layout/jest.config.js:12
src/platform/packages/shared/kbn-resizable-layout/tsconfig.json:2
src/platform/packages/shared/kbn-search-errors/jest.config.js:12
src/platform/packages/shared/kbn-search-errors/tsconfig.json:2
src/platform/packages/shared/kbn-search-response-warnings/jest.config.js:12
src/platform/packages/shared/kbn-search-response-warnings/tsconfig.json:2
src/platform/packages/shared/kbn-search-types/jest.config.js:12
src/platform/packages/shared/kbn-search-types/tsconfig.json:2
src/platform/packages/shared/kbn-unified-data-table/jest.config.js:12
src/platform/packages/shared/kbn-unified-data-table/tsconfig.json:2
src/platform/packages/shared/kbn-unified-doc-viewer/jest.config.js:12
src/platform/packages/shared/kbn-unified-doc-viewer/tsconfig.json:2
src/platform/packages/shared/kbn-unified-field-list/jest.config.js:12
src/platform/packages/shared/kbn-unified-field-list/tsconfig.json:2
src/platform/plugins/shared/data_view_editor/jest.config.js:12
src/platform/plugins/shared/data_view_editor/tsconfig.json:2
src/platform/plugins/shared/data_view_field_editor/jest.config.js:12
src/platform/plugins/shared/data_view_field_editor/tsconfig.json:2
src/platform/plugins/shared/data_view_field_editor/tsconfig.json:7
src/platform/plugins/shared/data_view_management/jest.config.js:12
src/platform/plugins/shared/data_view_management/tsconfig.json:2
src/platform/plugins/shared/data_views/jest.config.js:12
src/platform/plugins/shared/data_views/tsconfig.json:2
src/platform/plugins/shared/discover/jest.config.js:12
src/platform/plugins/shared/discover/public/application/context/context_app.scss:1
src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.scss:1
src/platform/plugins/shared/discover/public/context_awareness/README.md:118
src/platform/plugins/shared/discover/public/context_awareness/README.md:119
src/platform/plugins/shared/discover/tsconfig.json:10
src/platform/plugins/shared/discover/tsconfig.json:2
src/platform/plugins/shared/discover_shared/jest.config.js:12
src/platform/plugins/shared/discover_shared/tsconfig.json:10
src/platform/plugins/shared/discover_shared/tsconfig.json:2
src/platform/plugins/shared/field_formats/jest.config.js:12
src/platform/plugins/shared/field_formats/tsconfig.json:2
src/platform/plugins/shared/saved_objects_finder/jest.config.js:12
src/platform/plugins/shared/saved_objects_finder/tsconfig.json:2
src/platform/plugins/shared/saved_search/jest.config.js:12
src/platform/plugins/shared/saved_search/tsconfig.json:2
src/platform/plugins/shared/saved_search/tsconfig.json:6
src/platform/plugins/shared/unified_doc_viewer/jest.config.js:12
src/platform/plugins/shared/unified_doc_viewer/tsconfig.json:2
src/platform/plugins/shared/unified_doc_viewer/tsconfig.json:6
src/platform/plugins/shared/unified_histogram/jest.config.js:12
src/platform/plugins/shared/unified_histogram/tsconfig.json:2
src/platform/plugins/shared/unified_histogram/tsconfig.json:6
x-pack/platform/plugins/private/discover_enhanced/jest.config.js:10
x-pack/platform/plugins/private/discover_enhanced/tsconfig.json:2
```

</details>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2024-12-30 13:23:47 +01:00
Tim Sullivan
99aa884fa0
Preparation for High Contrast Mode, Analytics Experience domains (#202608)
## Summary

**Reviewers: Please test the code paths affected by this PR. See the
"Risks" section below.**

Part of work for enabling "high contrast mode" in Kibana. See
https://github.com/elastic/kibana/issues/176219.

**Background:**
Kibana will soon have a user profile setting to allow users to enable
"high contrast mode." This setting will activate a flag with
`<EuiProvider>` that causes EUI components to render with higher
contrast visual elements. Consumer plugins and packages need to be
updated selected places where `<EuiProvider>` is wrapped, to pass the
`UserProfileService` service dependency from the CoreStart contract.

**NOTE:** **EUI currently does not yet support the high-contrast mode
flag**, but support for that is expected to come in around 2 weeks.
These first PRs are simply preparing the code by wiring up the
`UserProvideService`.

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [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
- [X] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### 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.

- [ ] [medium/high] The implementor of this change did not manually test
the affected code paths and relied on type-checking and functional tests
to drive the changes. Code owners for this PR need to manually test the
affected code paths.
- [ ] [medium] The `UserProfileService` dependency comes from the
CoreStart contract. If acquiring the service causes synchronous code to
become asynchronous, check for race conditions or errors in rendering
React components. Code owners for this PR need to manually test the
affected code paths.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2024-12-12 13:16:07 -06:00
Gerard Soldevila
b24fdf5d3f
Sustainable Kibana Architecture: Categorise straightforward packages (#199630)
## Summary

This PR is part of the Kibana Sustainable Architecture effort.

The goal is to start categorising Kibana packages into _generic
platform_ (`group: "platform"`) vs _solution-specific_.

```
group?: 'search' | 'security' | 'observability' | 'platform'
visibility?: 'private' | 'shared'
```
Uncategorised modules are considered to be `group: 'common', visibility:
'shared'` by default.

We want to prevent code from solution A to depend on code from solution
B.
Thus, the rules are pretty simple:

* Modules can only depend on:
  * Modules in the same group
  * OR modules with 'shared' visibility
* Modules in `'observability', 'security', 'search'` groups are
mandatorily `visibility: "private"`.

Long term, the goal is to re-organise packages into dedicated folders,
e.g.:

```
x-pack/platform/plugins/private
x-pack/observability/packages
```

For this first wave, we have categorised packages that seem
"straightforward":
* Any packages that have:
  * at least one dependant module
  * all dependants belong to the same group
* Categorise all Core packages:
  * `@kbn/core-...-internal` => _platform/private_
  * everything else => _platform/shared_
* Categorise as _platform/shared_ those packages that:
  * Have at least one dependant in the _platform_ group.
  * Don't have any `devOnly: true` dependants.

### What we ask from you, as CODEOWNERS of the _package manifests_, is
that you confirm that the categorisation is correct:

* `group: "platform", visibility: "private"` if it's a package that
should only be used from platform code, not from any solution code. It
will be loaded systematically in all serverless flavors, but solution
plugins and packages won't be able to `import` from it.
* `group: "platform", visibility: "shared"` if it's a package that can
be consumed by both platform and solutions code. It will be loaded
systematically in all serverless flavors, and anybody can import / use
code from it.
* `group: "observability" | "security" | "search", visibility:
"private"` if it's a package that is intented to be used exclusively
from a given solution. It won't be accessible nor loaded from other
solutions nor platform code.

Please refer to
[#kibana-sustainable-architecture](https://elastic.slack.com/archives/C07TCKTA22E)
for any related questions.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2024-11-22 10:33:25 +01:00
Luke Elmers
b6287708f6
Adds AGPL 3.0 license (#192025)
Updates files outside of x-pack to be triple-licensed under Elastic
License 2.0, AGPL 3.0, or SSPL 1.0.
2024-09-06 19:02:41 -06:00
Marta Bondyra
095c0593c5
[kbn-dnd-package] Divide draggable and droppable (#177282)
## Summary

Refactors a `<DragDrop/>` component to `<Draggable/>` and
`<Droppable/>`.

1. Performance gains
Performance improvements – one rerender less and then longest render
dropped by 30-40% (for 6x slowdown from 250 to 150ms action). The main
reason is that the components that were switching between being
Draggable and Droppable don't have to do it anymore so we don't mount
and unmount components as often.

<img width="856" alt="Screenshot 2024-02-22 at 17 10 07"
src="1555d1e0-93e6-4037-8636-470ea5101a14">

<img width="834" alt="Screenshot 2024-02-22 at 17 11 27"
src="11db4f37-e1c8-4ca5-83b7-c59d7937ce9a">

2. Readability improvements
Now it's much easier to see if the component is a drop zone or a
draggable component. The logic that was mixed between these two is
untangled and the components are smaller thanks to it.

4. Better API
It's easier to add a `<Draggable/>` or `<Droppable/>` components.

6. Small bugs fixes
Flash of colors when starting dragging in reorder group
![Feb-22-2024
17-15-32](e63296f5-1bc5-455c-ad7b-05738511f16a)

Annotation cut content
<img width="297" alt="Screenshot 2024-02-22 at 17 17 49"
src="ce4ab3d1-2a89-49cc-9230-c2ade194d1a3">

Half-transparent content when dragging - it doesn't make sense.
<img width="284" alt="Screenshot 2024-02-22 at 17 16 51"
src="fcafc12e-2ec9-4f93-a224-c7b4c8852e09">

7. Rewriting all the dnd tests from the package to rtl. It's still not
ideal, but way more tested from user perspective and way more readable.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2024-03-21 14:30:14 +01:00
Sébastien Loix
9db8d2558c
[Core] Deprecate nav link status (#176383) 2024-02-16 11:06:33 -07:00
Julia Rechkunova
6cb937a37a
[Discover] Redesign for the grid, panels and sidebar v1 (#165866)
## Summary

### Part 1

- Resolves https://github.com/elastic/kibana/issues/164287
- Closes https://github.com/elastic/kibana/issues/146339
- Previously separate PR https://github.com/elastic/kibana/pull/164187

Changes:
- ~~swaps checkbox and row selection~~
- removes vertical borders
- adds rows highlight
- increases cell padding
- adds row stripes
- updates header background
- removes grey background from field name and makes it bolder (part of
https://github.com/elastic/kibana/issues/164634)
- updates Surrounding Documents side paddings

### Part 2

- Resolves https://github.com/elastic/kibana/issues/164661
- Previously separate PR https://github.com/elastic/kibana/pull/165687

Changes:
- removes background from panels, tabs and sidebar
- updates "Add a field" button style
- removes shadow from field list items
- makes field search compact

### Part 3

- Resolves https://github.com/elastic/kibana/issues/164662

Changes:
- wraps "Add a field" button in its own container with a top border
- ~~adds a drag handle to sidebar items~~
- ~~adds new Show/Hide buttons to toggle sidebar~~ moves sidebar toggle
button from discover plugin to unified field list
- reduces spaces between sidebar items from 4px to 2px
- reduces padding on Single Document page
- removes border above grid tabs

<img width="600" alt="Screenshot 2023-09-07 at 14 39 48"
src="976db247-fd70-4c9b-8634-552ece45b522">


Please note that "auto" row height is in a separate PR which is also
ready for review https://github.com/elastic/kibana/pull/164218

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
2023-09-12 08:51:34 +02:00
Marta Bondyra
91a0d2f454
[Lens] Refactor drag and drop (#161257)
## Summary

When I created drag and drop for Lens, the API I went for was not the
most readable one. It was designed this way because I wanted to gain
some performance, but it was very hard to maintain the performance gain
with a lot of changes in the drag and drop area because all the pieces
of the code needed to memoized in a tricky way and it wasn't
communicated well.
In the end it works even without these tricks so I decided to simplify
it in this PR.

The main changes include:

1. Instead of multiple `useState` per parameter, we keep all the state
in reducer both for `ReorderProvider` and `RootDragDropProvider`. Thanks
to that we get multiple improvements:
2. The code in `DragDrop` component becomes more descriptive as we don't
run multiple state updates when user executes an action but one state
update describing what actually happens (eg. `dispatchDnd({type:
'selectDropTarget' ....})`. The internal logic of the update lives in
the reducer.
3. We don't have to pass `trackUiCounterEvents` as another prop to
`DragDrop` and run it wherever we need - instead we pass it as a
middleware to the context and run before dispatching (and it's very easy
to add more middlewares if we need extra integrations at some point!)
4. We also run a11y announcements as a middleware instead of inside
`DragDrop` component
5. The `ChildDragDropProvider` props look much cleaner:
    before:
```
      <ChildDragDropProvider
        keyboardMode={keyboardModeState}
        setKeyboardMode={setKeyboardModeState}
        dragging={draggingState.dragging}
        setA11yMessage={setA11yMessage}
        setDragging={setDragging}
        activeDropTarget={activeDropTargetState}
        setActiveDropTarget={setActiveDropTarget}
        registerDropTarget={registerDropTarget}
        dropTargetsByOrder={dropTargetsByOrderState}
        dataTestSubjPrefix={dataTestSubj}
        onTrackUICounterEvent={onTrackUICounterEvent}
      >
        {children}
      </ChildDragDropProvider>
```
after:
```
<ChildDragDropProvider value={[state, dispatch]}>{children}</ChildDragDropProvider>
```
6. Created custom hook `useDragDropContext` instead of using
`useContext(DragContext)` and making DragContext private. This way we
will avoid potential problems with using context outside of root.
7. Bonus thing - if we ever decide to move to redux, the structure is
there already



What I am still not happy with is that the tests are very
domain-dependant instead of user-driven - instead of checking the store
actions, I should check the interface from the user perspective. I will
try to work on it once I find some time between more important tasks
though.
2023-07-11 13:05:03 +02:00
Julia Rechkunova
ea53763028
[UnifiedFieldList][Discover] Create a high level unified field list building block (#160397)
- Closes https://github.com/elastic/kibana/issues/145162 
- Closes https://github.com/elastic/kibana/issues/147884

## Summary

This PR creates a wrapper/container component (building block) for
unified field list subcomponents:

93acc6f707/packages/kbn-unified-field-list/README.md (L5)

Available customization options are listed here:
93acc6f707/packages/kbn-unified-field-list/src/types.ts (L116)

It's now integrated [into
Discover](93acc6f707/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar_responsive.tsx (L373))
and [into example
plugin](93acc6f707/examples/unified_field_list_examples/public/field_list_sidebar.tsx (L84)).
Usage of unified field list subcomponents and hooks stays unchanged in
Lens plugin as it requires more complex customization (for example Lens
uses IndexPattern/IndexPatternField types instead of data view types).

Also this PR allows to disable multifields grouping and select a variant
(responsive, list only, button only) via
`UnifiedFieldListSidebarContainer` properties.

There should no visual changes on Discover and Lens pages. Unified Field
List Examples plugin will get the same sidebar UI as it's on Discover.

### Checklist

- [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
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
2023-07-10 12:18:40 +02:00
Julia Rechkunova
7f0d57d9fd
[UnifiedFieldList] Convert from a plugin into a package (#158718)
- Closes https://github.com/elastic/kibana/issues/149336

## Summary

This PR converts `unifiedFieldList` plugin into a new
`@kbn/unified-field-list` package.

Had to also move some deps:
- from `uiActions` plugin to the existing `@kbn/ui-actions-browser`
package
- from `data` plugin to a new `@kbn/data-service` package

Please test that Field Stats from the package are still working on your
pages.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-06-23 14:28:12 +02:00
Julia Rechkunova
8d399fe3aa
[UnifiedFieldList] Remove redundant server routes. Create new example plugin for unified field list components and migrate tests. (#158377)
- Closes https://github.com/elastic/kibana/issues/147885
- Closes https://github.com/elastic/kibana/issues/157109

## Summary

**Before:**

Unified Field List plugin has internal routes (wrappers for client code)
which exist only to run api functional tests against them:
 - `/api/unified_field_list/existing_fields/{dataViewId}`
 - `/api/unified_field_list/field_stats`

Client code does not call these routes directly. So there is no reason
in keeping and versioning them.

**After:**
- Internal routes are removed 
- A new "Unified Field List Examples" page was created
http://localhost:5601/app/unifiedFieldListExamples
- API functional tests (which used the routes) were converted to
functional tests against this new example page
- Created a new `unifiedFieldList` page object which is used now in
functional tests (methods are extracted from existing `discover` page
object).

**For testing:**

Steps:
1. Run Kibana with examples: `yarn start --run-examples` 
2. Install sample data
3. And navigate to Developer Examples > Unified Field List Examples
page.

![May-26-2023
13-24-03](5a2149f7-beb8-40a5-b7d5-9eeaabfd42ca)


### Checklist

- [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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-05-31 13:25:47 +02:00