Upgrade to Storybook 8

.devcontainer/Dockerfile

@@ -73,4 +73,4 @@ RUN echo "source ${KBN_DIR}/.devcontainer/scripts/env.sh" >> ${HOME}/.bashrc &&
   echo "source ${KBN_DIR}/.devcontainer/scripts/env.sh" >> ${HOME}/.zshrc
 
 # This is for documentation. Ports are exposed via devcontainer.json
-EXPOSE 9200 5601 9229 9230 9231
+EXPOSE 9200 5601 9229 9230 9231 9001

.devcontainer/devcontainer.json

@@ -24,7 +24,8 @@
     5601,
     9229,
     9230,
-    9231
+    9231,
+    9001
   ],
   "postStartCommand": "${containerWorkspaceFolder}/.devcontainer/scripts/post_start.sh",
   "remoteUser": "vscode",

.github/CODEOWNERS

@@ -1616,6 +1616,7 @@ packages/kbn-monaco/src/esql @elastic/kibana-esql
 /.devcontainer/ @elastic/kibana-operations
 /.eslintrc.js @elastic/kibana-operations
 /.eslintignore @elastic/kibana-operations
+/.ci/.storybook @elastic/kibana-operations
 
 # QA - Appex QA
 /x-pack/test/.gitignore @elastic/appex-qa

package.json

@@ -60,7 +60,7 @@
     "serverless-security": "node scripts/kibana --dev --serverless=security",
     "spec_to_console": "node scripts/spec_to_console",
     "start": "node scripts/kibana --dev",
-    "storybook": "node --no-deprecation scripts/storybook",
+    "storybook": "node scripts/storybook",
     "test:ftr": "node scripts/functional_tests",
     "test:ftr:runner": "node scripts/functional_test_runner",
     "test:ftr:server": "node scripts/functional_tests_server",
@@ -77,6 +77,7 @@
     "yarn": "^1.22.19"
   },
   "resolutions": {
+    "**/@babel/parser": "7.24.7",
     "**/@bazel/typescript/protobufjs": "6.11.4",
     "**/@hello-pangea/dnd": "16.6.0",
     "**/@langchain/core": "^0.3.40",
@@ -92,6 +93,7 @@
     "**/remark-parse/trim": "1.0.1",
     "**/sharp": "0.32.6",
     "**/typescript": "5.1.6",
+    "**/util": "^0.11.1",
     "@aws-sdk/client-bedrock-agent-runtime": "^3.744.0",
     "@aws-sdk/client-bedrock-runtime": "^3.744.0",
     "@aws-sdk/client-kendra": "3.744.0",
@@ -1545,28 +1547,26 @@
     "@octokit/rest": "^21.1.1",
     "@parcel/watcher": "^2.1.0",
     "@playwright/test": "1.49.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@redocly/cli": "^1.33.0",
     "@statoscope/webpack-plugin": "^5.28.2",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storyshots": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/api": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/client-api": "^6.5.16",
-    "@storybook/components": "^6.5.16",
-    "@storybook/core": "^6.5.16",
-    "@storybook/core-common": "^6.5.16",
-    "@storybook/core-events": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/preview-web": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-react": "^1.3.0",
-    "@storybook/theming": "^6.5.16",
+    "@storybook/addon-a11y": "^8.6.3",
+    "@storybook/addon-actions": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/components": "^8.6.3",
+    "@storybook/core-events": "^8.6.3",
+    "@storybook/core-server": "^8.6.3",
+    "@storybook/icons": "^1.3.2",
+    "@storybook/manager-api": "^8.6.3",
+    "@storybook/preview-api": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-webpack5": "^8.6.3",
+    "@storybook/test": "^8.6.3",
+    "@storybook/theming": "^8.6.3",
+    "@storybook/types": "^8.6.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -1654,6 +1654,7 @@
     "@types/picomatch": "^2.3.0",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.5",
+    "@types/prettier": "^2.7.3",
     "@types/prop-types": "^15.7.5",
     "@types/rbush": "^3.0.0",
     "@types/react": "~18.2.0",
@@ -1769,6 +1770,7 @@
     "fetch-mock": "^10.1.0",
     "file-loader": "^4.2.0",
     "find-cypress-specs": "^1.41.4",
+    "fix-esm": "^1.0.1",
     "form-data": "^4.0.2",
     "geckodriver": "^5.0.0",
     "gulp-brotli": "^3.0.0",
@@ -1835,6 +1837,7 @@
     "prettier": "^2.8.8",
     "proxy": "^2.1.1",
     "react-is": "~18.2.0",
+    "react-refresh": "^0.16.0",
     "react-test-renderer": "~18.2.0",
     "recast": "^0.23.9",
     "regenerate": "^1.4.0",
@@ -1848,6 +1851,7 @@
     "sinon": "^7.4.2",
     "sort-package-json": "^1.53.1",
     "source-map": "^0.7.4",
+    "storybook": "^8.6.3",
     "string-replace-loader": "^3.1.0",
     "style-loader": "^4.0.0",
     "stylelint": "^14.16.1",

renovate.json

@@ -44,10 +44,25 @@
     },
     {
       "groupName": "webpack",
-      "matchDepNames": ["webpack", "@types/webpack", "webpack-cli", "webpack-dev-server", "webpack-merge"],
-      "reviewers": ["team:kibana-operations"],
-      "matchBaseBranches": ["main"],
-      "labels": ["Team:Operations", "backport:all-open", "release_note:skip", "ci:build-webpack-bundle-analyzer"],
+      "matchDepNames": [
+        "webpack",
+        "@types/webpack",
+        "webpack-cli",
+        "webpack-dev-server",
+        "webpack-merge"
+      ],
+      "reviewers": [
+        "team:kibana-operations"
+      ],
+      "matchBaseBranches": [
+        "main"
+      ],
+      "labels": [
+        "Team:Operations",
+        "backport:all-open",
+        "release_note:skip",
+        "ci:build-webpack-bundle-analyzer"
+      ],
       "minimumReleaseAge": "60 days",
       "enabled": true
     },
@@ -1419,7 +1434,8 @@
       "matchDepNames": [
         "prettier",
         "eslint-plugin-prettier",
-        "eslint-config-prettier"
+        "eslint-config-prettier",
+        "@types/prettier"
       ],
       "reviewers": [
         "team:kibana-operations"
@@ -3388,45 +3404,28 @@
       "enabled": true
     },
     {
-      "groupName": "@storybook",
-      "reviewers": [
-        "team:kibana-operations"
-      ],
-      "matchBaseBranches": [
-        "main"
-      ],
-      "matchDepPatterns": [
-        "^@storybook"
-      ],
-      "labels": [
-        "Team:Operations",
-        "release_note:skip",
-        "ci:build-storybooks",
-        "backport:skip"
-      ],
-      "minimumReleaseAge": "7 days",
-      "allowedVersions": "<7.0",
-      "enabled": true
-    },
-    {
-      "groupName": "@storybook/testing-react",
+      "groupName": "storybook",
       "reviewers": [
         "team:kibana-operations"
       ],
       "matchBaseBranches": [
         "main"
       ],
       "matchDepNames": [
-        "@storybook/testing-react"
+        "@pmmmwh/react-refresh-webpack-plugin",
+        "fix-esm",
+        "react-refresh"
+      ],
+      "matchDepPatterns": [
+        "storybook"
       ],
       "labels": [
         "Team:Operations",
         "release_note:skip",
         "ci:build-storybooks",
-        "backport:skip"
+        "backport:prev-minor"
       ],
       "minimumReleaseAge": "7 days",
-      "allowedVersions": "<2.0",
       "enabled": true
     },
     {

src/dev/license_checker/config.ts

@@ -71,6 +71,7 @@ export const LICENSE_ALLOWED = [
   'Python-2.0',
   '(Apache-2.0 AND MIT)',
   'BlueOak-1.0.0',
+  'WTFPL OR CC0-1.0',
 ];
 
 // The following list only applies to licenses that

src/dev/storybook/aliases.ts

@@ -7,32 +7,28 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-// Please also add new aliases to .buildkite/scripts/steps/storybooks/build_and_upload.ts
-//
-// If you wish for your Storybook to be built and included in CI, also add your
-// alias to .buildkite/scripts/steps/storybooks/build_and_upload.ts
 export const storybookAliases = {
   ai_assistant: 'x-pack/platform/packages/shared/kbn-ai-assistant/.storybook',
   apm: 'x-pack/solutions/observability/plugins/apm/.storybook',
   canvas: 'x-pack/platform/plugins/private/canvas/storybook',
   cases: 'src/platform/packages/shared/kbn-cases-components/.storybook',
   cell_actions: 'src/platform/packages/shared/kbn-cell-actions/.storybook',
+  chart_icons: 'src/platform/packages/shared/kbn-chart-icons/.storybook',
   cloud_security_posture_graph:
     'x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/.storybook',
   cloud: 'src/platform/packages/shared/cloud/.storybook',
   coloring: 'src/platform/packages/shared/kbn-coloring/.storybook',
-  language_documentation_popover:
-    'src/platform/packages/private/kbn-language-documentation/.storybook',
-  chart_icons: 'src/platform/packages/shared/kbn-chart-icons/.storybook',
   content_management_examples: 'examples/content_management_examples/.storybook',
   custom_icons: 'src/platform/packages/shared/kbn-custom-icons/.storybook',
   custom_integrations: 'src/platform/plugins/shared/custom_integrations/storybook',
   dashboard_enhanced: 'x-pack/platform/plugins/shared/dashboard_enhanced/.storybook',
   dashboard: 'src/platform/plugins/shared/dashboard/.storybook',
   data: 'src/platform/plugins/shared/data/.storybook',
   discover: 'src/platform/plugins/shared/discover/.storybook',
-  esql_ast_inspector: 'examples/esql_ast_inspector/.storybook',
   es_ui_shared: 'src/platform/plugins/shared/es_ui_shared/.storybook',
+  esql_ast_inspector: 'examples/esql_ast_inspector/.storybook',
+  esql_editor: 'src/platform/packages/private/kbn-esql-editor/.storybook',
+  event_stacktrace: 'x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook',
   expandable_flyout: 'x-pack/solutions/security/packages/expandable-flyout/.storybook',
   expression_error: 'src/platform/plugins/shared/expression_error/.storybook',
   expression_image: 'src/platform/plugins/shared/expression_image/.storybook',
@@ -53,21 +49,22 @@ export const storybookAliases = {
   inventory: 'x-pack/solutions/observability/plugins/inventory/.storybook',
   investigate: 'x-pack/solutions/observability/plugins/investigate_app/.storybook',
   kibana_react: 'src/platform/plugins/shared/kibana_react/.storybook',
+  language_documentation_popover:
+    'src/platform/packages/private/kbn-language-documentation/.storybook',
   lists: 'x-pack/solutions/security/plugins/lists/.storybook',
   management: 'src/platform/packages/shared/kbn-management/storybook/config',
-  observability: 'x-pack/solutions/observability/plugins/observability/.storybook',
-  observability_ai_assistant:
-    'x-pack/platform/plugins/shared/observability_ai_assistant/.storybook',
   observability_ai_assistant_app:
     'x-pack/solutions/observability/plugins/observability_ai_assistant_app/.storybook',
+  observability_ai_assistant:
+    'x-pack/platform/plugins/shared/observability_ai_assistant/.storybook',
   observability_inventory: 'x-pack/solutions/observability/plugins/inventory/.storybook',
   observability_shared: 'x-pack/solutions/observability/plugins/observability_shared/.storybook',
   observability_slo: 'x-pack/solutions/observability/plugins/slo/.storybook',
+  observability: 'x-pack/solutions/observability/plugins/observability/.storybook',
   presentation: 'src/platform/plugins/shared/presentation_util/storybook',
+  profiling: 'x-pack/solutions/observability/plugins/profiling/.storybook',
   random_sampling: 'x-pack/platform/packages/private/kbn-random-sampling/.storybook',
-  esql_editor: 'src/platform/packages/private/kbn-esql-editor/.storybook',
-  // Skipped, please check and fix https://github.com/elastic/kibana/issues/207227
-  // security_solution: 'x-pack/solutions/security/plugins/security_solution/.storybook',
+  security_solution: 'x-pack/solutions/security/plugins/security_solution/.storybook',
   // security_solution_packages: 'x-pack/solutions/security/packages/storybook/config',
   serverless: 'src/platform/packages/shared/serverless/storybook/config',
   shared_ux: 'src/platform/packages/private/shared-ux/storybook/config',
@@ -76,6 +73,4 @@ export const storybookAliases = {
   ui_actions_enhanced: 'src/platform/plugins/shared/ui_actions_enhanced/.storybook',
   unified_search: 'src/platform/plugins/shared/unified_search/.storybook',
   unified_tabs: 'src/platform/packages/shared/kbn-unified-tabs/.storybook',
-  profiling: 'x-pack/solutions/observability/plugins/profiling/.storybook',
-  event_stacktrace: 'x-pack/platform/packages/shared/kbn-event-stacktrace/.storybook',
 };

src/dev/storybook/run_storybook_cli.ts

@@ -41,7 +41,6 @@ run(
 
     log.verbose('Loading Storybook:', configDir);
 
-    // TODO: once storybook is upgraded into a newer version, --no-deprecation flag could be removed when invoking it through the package.json script
     runStorybookCli({ configDir, name: alias });
   },
   {

src/platform/packages/private/kbn-esql-editor/.storybook/main.js

@@ -11,7 +11,6 @@ const defaultConfig = require('@kbn/storybook').defaultConfig;
 
 module.exports = {
   ...defaultConfig,
-  stories: ['../**/*.stories.+(tsx|mdx)'],
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },

src/platform/packages/private/kbn-esql-editor/src/__stories__/esql_editor.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import * as EsqlEditorStories from './esql_editor.stories';
+
+<Meta of={EsqlEditorStories} />
+
+# Overview
+
+The ESQLEditor component is a reusable component and can be used to support text based languages in your application (SQL, ESQL):
+
+<Canvas of={EsqlEditorStories.ExpandedMode} />
+
+When there are errors to the query the UI displays the errors to the editor:
+
+<Canvas of={EsqlEditorStories.WithErrors} />
+
+## Component props
+
+The component exposes the following properties:
+
+<Controls />../esql\_editor