[WIP] Upgrade to Storybook 8

[Ikuni17]

WIP

Summary

Depends on #191106 Closes #171591

• [ ] Migrate .mdx stories
• [ ] Migrate packages which were removed in 8.0
• [ ] react-doc-gen resolution
• [ ] Migrate blocks
• [ ] Migrate deprecated addon-knobs to addon-controls
• [ ] React Fast Refresh support
• [ ] Watch flag callback
• [ ] Update kbn-storybook docs
• [ ] canvas webpack

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[elasticmachine]

Pinging @elastic/obs-ai-assistant (Team:Obs AI Assistant)

[elasticmachine]

Pinging @elastic/fleet (Team:Fleet)

[stratoula]

@Ikuni17 I realized that the esql_editor storybook is broken (also in main) so I created this PR to fix it https://github.com/Ikuni17/kibana/pull/2

You can either merge it in your PR or I can open a follow up PR after yours is merged. Whatever you want

[Ikuni17]

@stratoula I merged it into this PR, thanks!

[clintandrewhall]

@Ikuni17 I just published a PR for the theme switcher. Let me know if you want it to go to main, or this branch, or wait...?

Thank you for wrangling this!!

[juliaElastic]

the Fleet components don't load here https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/index.html?path=/ , though it seems the same issue was there on main.

ReferenceError: jest is not defined
    at createFeatureFlagsStart (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/main.09b915bb.iframe.bundle.js:1:528700)
    at https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/main.09b915bb.iframe.bundle.js:23:21364
    at mountMemo (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:58030:19)
    at Object.useMemo (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:58475:16)
    at useMemo (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:36332:21)
    at StorybookContext (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/main.09b915bb.iframe.bundle.js:23:20491)
    at renderWithHooks (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:57110:18)
    at mountIndeterminateComponent (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:60874:13)
    at beginWork (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:62387:16)
    at beginWork$1 (https://ci-artifacts.kibana.dev/storybooks/pr-195148/fleet/kbn-ui-shared-deps-npm.dll.js:68226:14)

[clintandrewhall]

@Ikuni17 Should we opt-out of telemetry?

https://storybook.js.org/docs/configure/telemetry#how-to-opt-out

[clintandrewhall]

I have a small set of fixes for you: https://github.com/Ikuni17/kibana/pull/3

• Adds a Jest fix for stories that use jest mocks;
• Removes a defunct story that was throwing errors;
• Fixes a component that had an error, but wasn't showing until SB 8. 🤷🏻

Thanks for your work here!

[clintandrewhall]

@juliaElastic I fixed the jest issue with https://github.com/Ikuni17/kibana/pull/3

[elasticmachine]

:yellow_heart: Build succeeded, but was flaky

• Buildkite Build
• Commit: d436d7e73e18c2ffd1bf8a2390120faced1f3daf
• Storybooks Preview

Failed CI Steps

• FTR Configs #45
• Rules, Alerts and Exceptions ResponseOps Cypress Tests on Security Solution #5
• UX Plugin @elastic/synthetics Tests

Test Failures

• [job] [logs] FTR Configs #45 / dashboard app - esql controls dashboard - add a value type ES|QL control should update the Lens chart accordingly

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
enterpriseSearch	1329	1331	+2
home	221	202	-19
total			-17

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/shared-ux-card-no-data-mocks	28	29	+1
@kbn/shared-ux-markdown-mocks	40	45	+5
@kbn/shared-ux-page-analytics-no-data-mocks	20	23	+3
@kbn/shared-ux-page-kibana-no-data-mocks	24	27	+3
@kbn/shared-ux-page-no-data-config-mocks	24	27	+3
@kbn/shared-ux-page-no-data-mocks	26	29	+3
@kbn/shared-ux-prompt-no-data-views-mocks	25	27	+2
@kbn/storybook	25	27	+2
total			+22

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
automaticImport	1.1MB	1.1MB	+110.0B
dataUsage	259.9KB	259.9KB	+10.0B
enterpriseSearch	1.3MB	1.3MB	+1.9KB
fleet	1.7MB	1.7MB	+3.0B
maps	3.0MB	3.0MB	+4.0B
observabilityAIAssistant	19.6KB	19.7KB	+94.0B
observabilityAiAssistantManagement	107.1KB	107.2KB	+96.0B
searchAssistant	158.7KB	158.8KB	+103.0B
securitySolution	8.9MB	8.9MB	+114.0B
securitySolutionEss	36.0KB	36.1KB	+96.0B
securitySolutionServerless	57.2KB	57.3KB	+96.0B
total			+2.7KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
enterpriseSearch	38.7KB	38.8KB	+91.0B
kbnUiSharedDeps-npmDll	6.0MB	6.0MB	-6.3KB
observabilityAIAssistantApp	15.7KB	15.8KB	+113.0B
total			-6.1KB

Unknown metric groups

API count

id	before	after	diff
@kbn/shared-ux-card-no-data-mocks	32	33	+1
@kbn/shared-ux-markdown-mocks	41	46	+5
@kbn/shared-ux-page-analytics-no-data-mocks	21	24	+3
@kbn/shared-ux-page-kibana-no-data-mocks	25	28	+3
@kbn/shared-ux-page-no-data-config-mocks	24	27	+3
@kbn/shared-ux-page-no-data-mocks	27	30	+3
@kbn/shared-ux-prompt-no-data-views-mocks	26	28	+2
@kbn/storybook	45	27	-18
total			+2

ESLint disabled in files

id	before	after	diff
@kbn/storybook	1	2	+1

ESLint disabled line counts

id	before	after	diff
uiActionsEnhanced	16	17	+1

Total ESLint disabled count

id	before	after	diff
@kbn/storybook	2	3	+1
uiActionsEnhanced	20	21	+1
total			+2

Unreferenced deprecated APIs

id	before	after	diff
@kbn/storybook	1	0	-1

History

• :yellow_heart: Build #283955 was flaky 5db2d7f20fcc3ddf9ac3f0a1d0d3af87eefab30b
• :yellow_heart: Build #283817 was flaky 466f1d8762ab2837d9fab5a4908dc0b2a996b3c3
• :broken_heart: Build #283549 failed 66a6f2937bbe3095c77c4de4390021d53a58d65c
• :broken_heart: Build #283543 failed fc8ed0994b5e25a358f4c2df37bd9baa7e2d465d
• :green_heart: Build #282387 succeeded ee6cd726e1b97077139b5d070d02170ff9c8b2e1
• :green_heart: Build #281913 succeeded 452005eb49dac30401897043d878c1c53dc56029

cc @Ikuni17

[Ikuni17]

We're going to merge this without all reviews due to merge conflicts often and migrating new/updated stories from other PRs. Feel free to comment still if needed.

[kibanamachine]

Starting backport for target branches: 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13866527293

[kibanamachine]

💔 All backports failed

Status	Branch	Result
❌	8.x	Backport failed because of merge conflicts
❌	9.0	Backport failed because of merge conflicts You might need to backport the following PRs to 9.0: - [Space time] extending Scout with perfTracker fixture (#212397) - Update dependency @redocly/cli to ^1.32.0 (main) (#212624) - [Streams] Replay loghub data with synthtrace (#212120)

Manual backport

To create the backport manually run:

node scripts/backport --pr 195148

Questions ?

Please refer to the Backport tool documentation

[Ikuni17]

💚 All backports created successfully

Status	Branch	Result
✅	9.0
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

[kibanamachine]

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

[kibanamachine]

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.

[kibanamachine]

Looks like this PR has backport PRs but they still haven't been merged. Please merge them ASAP to keep the branches relatively in sync.