Upgrade Storybook to version 8

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",
@@ -96,7 +96,6 @@
     "@aws-sdk/client-bedrock-runtime": "^3.744.0",
     "@aws-sdk/client-kendra": "3.744.0",
     "@aws-sdk/credential-provider-node": "3.744.0",
-    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@xstate5/react/**/xstate": "^5.19.2",
@@ -1545,26 +1544,20 @@
     "@playwright/test": "1.49.0",
     "@redocly/cli": "^1.29.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-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/manager-api": "^8.6.3",
+    "@storybook/node-logger": "^8.6.3",
+    "@storybook/preview-api": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-webpack5": "^8.6.3",
+    "@storybook/theming": "^8.6.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -1845,6 +1838,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

@@ -3369,7 +3369,8 @@
         "main"
       ],
       "matchDepPatterns": [
-        "^@storybook"
+        "^@storybook",
+        "storybook"
       ],
       "labels": [
         "Team:Operations",
@@ -3378,28 +3379,7 @@
         "backport:skip"
       ],
       "minimumReleaseAge": "7 days",
-      "allowedVersions": "<7.0",
-      "enabled": true
-    },
-    {
-      "groupName": "@storybook/testing-react",
-      "reviewers": [
-        "team:kibana-operations"
-      ],
-      "matchBaseBranches": [
-        "main"
-      ],
-      "matchDepNames": [
-        "@storybook/testing-react"
-      ],
-      "labels": [
-        "Team:Operations",
-        "release_note:skip",
-        "ci:build-storybooks",
-        "backport:skip"
-      ],
-      "minimumReleaseAge": "7 days",
-      "allowedVersions": "<2.0",
+      "allowedVersions": ">8.0",
       "enabled": true
     },
     {

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/src/__stories__/esql_editor.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { ESQLEditor } from '../esql_editor';
+import * as EsqlEditorStories from './esql_editor.stories';
+
+export const Template = (args) => 
+<I18nProvider> 
+    <KibanaContextProvider
+        services={{
+          settings: { client: { get: () => {} } },
+          uiSettings: { get: () => {} },
+        }}
+    >
+        <ESQLEditor {...args} />
+    </KibanaContextProvider>
+</I18nProvider>;
+
+<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>
+  <Story of={EsqlEditorStories.ExpandedMode} />
+</Canvas>
+
+When there are errors to the query the UI displays the errors to the editor:
+
+<Canvas>
+  <Story of={EsqlEditorStories.WithErrors} />
+</Canvas>
+
+## Component props
+
+The component exposes the following properties:
+
+<Controls />../esql\_editor

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

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { ESQLEditor } from '../esql_editor';
+
+const Template = (args) => (
+  <I18nProvider>
+    <KibanaContextProvider
+      services={{
+        settings: { client: { get: () => {} } },
+        uiSettings: { get: () => {} },
+      }}
+    >
+      <ESQLEditor {...args} />
+    </KibanaContextProvider>
+  </I18nProvider>
+);
+
+export default {
+  title: 'Text based languages editor',
+  component: ESQLEditor,
+};
+
+export const ExpandedMode = {
+  render: Template.bind({}),
+  name: 'expanded mode',
+
+  args: {
+    query: {
+      esql: 'from dataview | keep field1, field2',
+    },
+
+    'data-test-subj': 'test-id',
+  },
+
+  argTypes: {
+    onTextLangQueryChange: {
+      action: 'changed',
+    },
+
+    onTextLangQuerySubmit: {
+      action: 'submitted',
+    },
+  },
+};
+
+export const WithErrors = {
+  render: Template.bind({}),
+  name: 'with errors',
+
+  args: {
+    query: {
+      esql: 'from dataview | keep field1, field2',
+    },
+
+    'data-test-subj': 'test-id',
+
+    errors: [
+      new Error(
+        '[essql] > Unexpected error from Elasticsearch: verification_exception - Found 1 problem line 1:16: Unknown column [field10]'
+      ),
+    ],
+  },
+
+  argTypes: {
+    onTextLangQueryChange: {
+      action: 'changed',
+    },
+
+    onTextLangQuerySubmit: {
+      action: 'submitted',
+    },
+  },
+};

src/platform/packages/private/shared-ux/storybook/config/main.ts

@@ -12,8 +12,10 @@ import { defaultConfig } from '@kbn/storybook';
 module.exports = {
   ...defaultConfig,
   stories: [
-    '../../**/*.stories.+(tsx|mdx)',
-    '../../../../shared/shared-ux/**/*.stories.+(tsx|mdx)',
+    '../../**/*.stories.tsx',
+    '../../**/*.mdx',
+    '../../../../shared/shared-ux/**/*.stories.tsx',
+    '../../../../shared/shared-ux/**/*.mdx',
   ],
   reactOptions: {
     strictMode: true,

src/platform/packages/private/shared-ux/storybook/config/manager.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import { create } from '@storybook/theming';
 import { PANEL_ID as selectedPanel } from '@storybook/addon-actions';
 

src/platform/packages/shared/home/sample_data_card/src/footer/footer.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import type { SampleDataSet } from '@kbn/home-sample-data-types';
@@ -27,7 +27,7 @@ export default {
     },
   },
   decorators: [(Story) => <div style={{ width: '433px', padding: '25px' }}>{Story()}</div>],
-} as ComponentMeta<typeof Component>;
+} as Meta<typeof Component>;
 
 const { description, ...argTypes } = getStoryArgTypes();
 

src/platform/packages/shared/home/sample_data_card/src/sample_data_card.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import type { SampleDataSet } from '@kbn/home-sample-data-types';
@@ -28,7 +28,7 @@ export default {
     },
   },
   decorators: [(Story) => <div style={{ width: '433px', padding: '25px' }}>{Story()}</div>],
-} as ComponentMeta<typeof SampleDataCard>;
+} as Meta<typeof SampleDataCard>;
 
 const argTypes = getStoryArgTypes();
 

src/platform/packages/shared/home/sample_data_tab/src/demo_env_panel.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 import { DemoEnvironmentPanel } from './demo_env_panel';
 
@@ -23,6 +23,6 @@ export default {
     },
   },
   decorators: [(Story) => <div style={{ width: 1200 }}>{Story()}</div>],
-} as ComponentMeta<typeof DemoEnvironmentPanel>;
+} as Meta<typeof DemoEnvironmentPanel>;
 
 export const DemoPanel = () => <DemoEnvironmentPanel demoUrl="https://google.com" />;