Update Storybook to 6.5

package.json

@@ -736,25 +736,26 @@
     "@mapbox/vector-tile": "1.3.1",
     "@octokit/rest": "^16.35.0",
     "@openpgp/web-stream-tools": "^0.0.10",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-controls": "^6.4.22",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-a11y": "^6.5.11",
+    "@storybook/addon-actions": "^6.5.11",
+    "@storybook/addon-controls": "^6.5.11",
+    "@storybook/addon-docs": "^6.5.11",
+    "@storybook/addon-essentials": "^6.5.11",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-storyshots": "^6.4.22",
-    "@storybook/addons": "^6.4.22",
-    "@storybook/api": "^6.4.22",
-    "@storybook/client-api": "^6.4.22",
-    "@storybook/components": "^6.4.22",
-    "@storybook/core": "^6.4.22",
-    "@storybook/core-common": "^6.4.22",
-    "@storybook/core-events": "^6.4.22",
-    "@storybook/node-logger": "^6.4.22",
-    "@storybook/preview-web": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-react": "^1.2.4",
-    "@storybook/theming": "^6.4.22",
+    "@storybook/addon-storyshots": "^6.5.11",
+    "@storybook/addons": "^6.5.11",
+    "@storybook/api": "^6.5.11",
+    "@storybook/client-api": "^6.5.11",
+    "@storybook/components": "^6.5.11",
+    "@storybook/core": "^6.5.11",
+    "@storybook/core-common": "^6.5.11",
+    "@storybook/core-events": "^6.5.11",
+    "@storybook/node-logger": "^6.5.11",
+    "@storybook/preview-web": "^6.5.11",
+    "@storybook/react": "^6.5.11",
+    "@storybook/react-docgen-typescript-plugin": "^1.0.1",
+    "@storybook/testing-react": "^1.3.0",
+    "@storybook/theming": "^6.5.11",
     "@testing-library/dom": "^8.12.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.5",
@@ -1176,6 +1177,7 @@
     "@types/react-router": "^5.1.7",
     "@types/react-router-config": "^5.0.2",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-syntax-highlighter": "^15.4.0",
     "@types/react-test-renderer": "^17.0.2",
     "@types/react-virtualized": "^9.21.21",
     "@types/react-vis": "^1.11.9",
@@ -1362,6 +1364,7 @@
     "q": "^1.5.1",
     "raw-loader": "^3.1.0",
     "react-test-renderer": "^17.0.2",
+    "react-textarea-autosize": "^8.3.4",
     "regenerate": "^1.4.0",
     "resolve": "^1.22.0",
     "rxjs-marbles": "^7.0.1",

packages/kbn-ambient-storybook-types/BUILD.bazel

@@ -31,6 +31,11 @@ NPM_MODULE_EXTRA_FILES = [
 #    "@npm//name-of-package"
 #    eg. "@npm//lodash"
 RUNTIME_DEPS = [
+  # Storybook react doesn't depend on these types even though their types use
+  # them, so we depend on them in this package and import them to make sure that they
+  # are available to users of the ambient types
+  "@npm//react-textarea-autosize",
+  "@npm//@storybook/react-docgen-typescript-plugin",
 ]
 
 js_library(

packages/kbn-storybook/src/lib/register.ts

@@ -21,7 +21,7 @@ addons.setConfig({
   showPanel: false,
   isFullscreen: false,
   panelPosition: 'bottom',
-  isToolshown: true,
+  showToolbar: true,
 });
 
 registerThemeSwitcherAddon();

src/plugins/discover/.storybook/discover.webpack.ts

@@ -10,5 +10,4 @@ import { defaultConfig, StorybookConfig } from '@kbn/storybook';
 export const discoverStorybookConfig: StorybookConfig = {
   ...defaultConfig,
   stories: ['../**/*.stories.tsx'],
-  addons: [...(defaultConfig.addons || []), './addon/target/register'],
 };

x-pack/plugins/apm/public/components/shared/stacktrace/context.tsx

@@ -138,7 +138,7 @@ export function Context({ stackframe, codeLanguage, isLibraryFrame }: Props) {
             style={xcode}
             PreTag={Line}
             CodeTag={Code}
-            customStyle={{ padding: null, overflowX: null }}
+            customStyle={{ padding: undefined, overflowX: undefined }}
           >
             {line}
           </SyntaxHighlighter>

x-pack/plugins/canvas/storybook/addon/src/register.tsx → x-pack/plugins/canvas/storybook/addon/register.tsx

@@ -44,6 +44,6 @@ addons.setConfig({
   showPanel: true,
   isFullscreen: false,
   panelPosition: 'bottom',
-  isToolshown: true,
+  showToolbar: true,
   selectedPanel: PANEL_ID,
 });

x-pack/plugins/canvas/storybook/addon/src/state.ts → x-pack/plugins/canvas/storybook/addon/state.ts

@@ -14,11 +14,11 @@ import { isFunction } from 'lodash';
 import { EVENTS } from './constants';
 
 // @ts-expect-error untyped local
-import { getRootReducer } from '../../../public/state/reducers';
+import { getRootReducer } from '../../public/state/reducers';
 
 // @ts-expect-error Untyped local
-import { getInitialState as getState } from '../../../public/state/initial_state';
-import { State } from '../../../types';
+import { getInitialState as getState } from '../../public/state/initial_state';
+import { State } from '../../types';
 
 export const getInitialState: () => State = () => getState();
 export const getMiddleware = () => applyMiddleware(thunkMiddleware);

x-pack/plugins/canvas/storybook/addon/src/types.ts → x-pack/plugins/canvas/storybook/addon/types.ts

@@ -6,7 +6,7 @@
  */
 
 import { Action } from 'redux';
-import { State } from '../../../types';
+import { State } from '../../types';
 
 export interface RecordedPayload {
   previousState: State;

x-pack/plugins/canvas/storybook/canvas_webpack.ts

@@ -66,6 +66,6 @@ export const canvasWebpack = {
 
 export const canvasStorybookConfig: StorybookConfig = {
   ...defaultConfig,
-  addons: [...(defaultConfig.addons || []), './addon/target/register'],
+  addons: [...(defaultConfig.addons || []), require.resolve('./addon/register')],
   ...mergeWebpackFinal(canvasWebpack),
 };

x-pack/plugins/canvas/storybook/decorators/redux_decorator.tsx

@@ -18,8 +18,8 @@ import { elementsRegistry } from '../../public/lib/elements_registry';
 import { image } from '../../canvas_plugin_src/elements/image';
 elementsRegistry.register(image);
 
-import { getInitialState, getReducer, getMiddleware, patchDispatch } from '../addon/src/state';
-export { ADDON_ID, ACTIONS_PANEL_ID } from '../addon/src/constants';
+import { getInitialState, getReducer, getMiddleware, patchDispatch } from '../addon/state';
+export { ADDON_ID, ACTIONS_PANEL_ID } from '../addon/constants';
 
 export interface Params {
   workpad?: CanvasWorkpad;

x-pack/plugins/canvas/storybook/index.ts

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { ACTIONS_PANEL_ID } from './addon/src/constants';
+import { ACTIONS_PANEL_ID } from './addon/constants';
 
 export * from './decorators';
-export { ACTIONS_PANEL_ID } from './addon/src/constants';
+export { ACTIONS_PANEL_ID } from './addon/constants';
 
 export const getAddonPanelParameters = () => ({ options: { selectedPanel: ACTIONS_PANEL_ID } });