-
-
{story()}
+export default {
+ title: 'components/WorkpadFilters/WorkpadFiltersComponent',
+
+ decorators: [
+ (story) => (
+
-
- ))
- .add('default', () => (
+ ),
+ ],
+} as Meta;
+
+export const Default = {
+ render: () => (
- ))
- .add('Filters groups without name', () => (
+ ),
+
+ name: 'default',
+};
+
+export const FiltersGroupsWithoutName = {
+ render: () => (
- ))
- .add('Filters groups without group name', () => (
+ ),
+
+ name: 'Filters groups without name',
+};
+
+export const FiltersGroupsWithoutGroupName = {
+ render: () => (
- ))
- .add('Filters groups without name and filters', () => (
+ ),
+
+ name: 'Filters groups without group name',
+};
+
+export const FiltersGroupsWithoutNameAndFilters = {
+ render: () => (
- ))
- .add('Empty filters groups', () => (
-
- ));
+ ),
+
+ name: 'Filters groups without name and filters',
+};
+
+export const EmptyFiltersGroups = {
+ render: () =>
,
+
+ name: 'Empty filters groups',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx
index b477ac220f6a9..e11e772ad7954 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_filters/__stories__/workpad_filters.stories.tsx
@@ -5,20 +5,33 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import React from 'react';
+import type { Meta } from '@storybook/react';
import { reduxDecorator } from '../../../../storybook';
import { WorkpadFilters } from '../workpad_filters';
import { elementWithGroup, elements } from './elements';
-storiesOf('components/WorkpadFilters/WorkpadFilters', module)
- .addDecorator((story) => (
-
-
-
{story()}
+export default {
+ title: 'components/WorkpadFilters/WorkpadFilters',
+
+ decorators: [
+ (story) => (
+
-
- ))
- .addDecorator(reduxDecorator({ elements }))
- .add('redux: default', () =>
)
- .add('redux: selected element with group', () =>
);
+ ),
+ reduxDecorator({ elements }),
+ ],
+} as Meta;
+
+export const ReduxDefault = {
+ render: () =>
,
+ name: 'redux: default',
+};
+
+export const ReduxSelectedElementWithGroup = {
+ render: () =>
,
+ name: 'redux: selected element with group',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx
index 282814829499e..d6b87e311f343 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { EditMenu } from '../edit_menu.component';
@@ -36,42 +35,74 @@ const handlers = {
redoHistory: action('redoHistory'),
};
-storiesOf('components/WorkpadHeader/EditMenu', module)
- .add('default', () => (
+export default {
+ title: 'components/WorkpadHeader/EditMenu',
+};
+
+export const Default = {
+ render: () => (
- ))
- .add('clipboard data exists', () => (
+ ),
+
+ name: 'default',
+};
+
+export const ClipboardDataExists = {
+ render: () => (
- ))
- .add('single element selected', () => (
+ ),
+
+ name: 'clipboard data exists',
+};
+
+export const SingleElementSelected = {
+ render: () => (
- ))
- .add('single grouped element selected', () => (
+ ),
+
+ name: 'single element selected',
+};
+
+export const SingleGroupedElementSelected = {
+ render: () => (
- ))
- .add('2 elements selected', () => (
+ ),
+
+ name: 'single grouped element selected',
+};
+
+export const _2ElementsSelected = {
+ render: () => (
- ))
- .add('3+ elements selected', () => (
+ ),
+
+ name: '2 elements selected',
+};
+
+export const _3ElementsSelected = {
+ render: () => (
- ));
+ ),
+
+ name: '3+ elements selected',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx
index d274c268459fc..105a01dfc6eed 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/editor_menu/__stories__/editor_menu.stories.tsx
@@ -5,14 +5,21 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { EditorMenu } from '../editor_menu.component';
-storiesOf('components/WorkpadHeader/EditorMenu', module).add('default', () => (
-
action('createNewEmbeddableFromAction')}
- />
-));
+export default {
+ title: 'components/WorkpadHeader/EditorMenu',
+};
+
+export const Default = {
+ render: () => (
+ action('createNewEmbeddableFromAction')}
+ />
+ ),
+
+ name: 'default',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
index 62d070dbf00f5..4669c05483d3d 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ElementSpec } from '../../../../../types';
@@ -134,6 +133,12 @@ You can use standard Markdown in here, but you can also access your piped-in dat
},
};
-storiesOf('components/WorkpadHeader/ElementMenu', module).add('default', () => (
-
-));
+export default {
+ title: 'components/WorkpadHeader/ElementMenu',
+};
+
+export const Default = {
+ render: () => ,
+
+ name: 'default',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
index bdc65421cb7f2..1a0dbc31dbecf 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
@@ -6,18 +6,27 @@
*/
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
import React from 'react';
import { reduxDecorator } from '../../../../../storybook';
import { ShareMenu } from '../share_menu.component';
-storiesOf('components/WorkpadHeader/ShareMenu', module)
- .addDecorator(reduxDecorator())
- .add('minimal', () => );
+export default {
+ title: 'components/WorkpadHeader/ShareMenu',
+ decorators: [reduxDecorator()],
+};
-storiesOf('components/WorkpadHeader/ShareMenu', module).add('with Reporting', () => (
- Provided Reporting Component
}
- />
-));
+export const Minimal = {
+ render: () => ,
+ name: 'minimal',
+};
+
+export const WithReporting = {
+ render: () => (
+ Provided Reporting Component
}
+ />
+ ),
+
+ name: 'with Reporting',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx
index 3e1212f3f3980..4e3e3d5f1fd3a 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx
@@ -5,15 +5,16 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ShareWebsiteFlyout } from '../flyout.component';
import { reduxDecorator } from '../../../../../../storybook';
-storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module)
- .addDecorator(reduxDecorator())
- .addParameters({
+export default {
+ title: 'components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout',
+ decorators: [reduxDecorator()],
+
+ parameters: {
info: {
inline: true,
styles: {
@@ -26,14 +27,23 @@ storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module)
},
},
},
- })
- .add('default', () => (
-
- ))
- .add('unsupported renderers', () => (
+ },
+};
+
+export const Default = {
+ render: () => ,
+
+ name: 'default',
+};
+
+export const UnsupportedRenderers = {
+ render: () => (
- ));
+ ),
+
+ name: 'unsupported renderers',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx
index a9a4752b96576..9c2cb3ab668cf 100644
--- a/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ViewMenu } from '../view_menu.component';
@@ -24,8 +23,12 @@ const handlers = {
enableAutoplay: action('enableAutoplay'),
};
-storiesOf('components/WorkpadHeader/ViewMenu', module)
- .add('edit mode', () => (
+export default {
+ title: 'components/WorkpadHeader/ViewMenu',
+};
+
+export const EditMode = {
+ render: () => (
- ))
- .add('read only mode', () => (
+ ),
+
+ name: 'edit mode',
+};
+
+export const ReadOnlyMode = {
+ render: () => (
- ))
- .add('with refresh enabled', () => (
+ ),
+
+ name: 'read only mode',
+};
+
+export const WithRefreshEnabled = {
+ render: () => (
- ))
- .add('with autoplay enabled', () => (
+ ),
+
+ name: 'with refresh enabled',
+};
+
+export const WithAutoplayEnabled = {
+ render: () => (
- ));
+ ),
+
+ name: 'with autoplay enabled',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx
index d80aaa6b39f27..d86db5fa6fcab 100644
--- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/extended_template.stories.tsx
@@ -6,7 +6,7 @@
*/
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
import React from 'react';
// @ts-expect-error untyped local
import { getDefaultWorkpad } from '../../../../state/defaults';
@@ -55,31 +55,48 @@ const getArgValue: (arg: T) => Arguments[T] = (arg) =
return defaultValues[arg];
};
-storiesOf('arguments/ContainerStyle', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('extended', () => );
-
-storiesOf('arguments/ContainerStyle/components', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('appearance form', () => (
+export default {
+ title: 'arguments/ContainerStyle',
+
+ decorators: [
+ (story) => {story()}
,
+ ],
+} as Meta;
+
+export const Extended = {
+ render: () => ,
+ name: 'extended',
+};
+
+export const _AppearanceForm = {
+ render: () => (
- ))
- .add('border form', () => (
+ ),
+
+ name: 'appearance form',
+};
+
+export const _BorderForm = {
+ render: () => (
- ))
- .add('extended template', () => (
+ ),
+
+ name: 'border form',
+};
+
+export const _ExtendedTemplate = {
+ render: () => (
- ));
+ ),
+
+ name: 'extended template',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx
index 6619a7e55198b..583f38070c19b 100644
--- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/container_style/__stories__/simple_template.stories.tsx
@@ -6,7 +6,7 @@
*/
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
import React from 'react';
// @ts-expect-error untyped local
import { getDefaultWorkpad } from '../../../../state/defaults';
@@ -44,20 +44,27 @@ const getArgValue: (arg: T) => Arguments[T] = (arg) =
return defaultValues[arg];
};
-storiesOf('arguments/ContainerStyle', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('simple', () => );
-
-storiesOf('arguments/ContainerStyle/components', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('simple template', () => (
+export default {
+ title: 'arguments/ContainerStyle',
+
+ decorators: [
+ (story) => {story()}
,
+ ],
+} as Meta;
+
+export const Simple = {
+ render: () => ,
+ name: 'simple',
+};
+
+export const _SimpleTemplate = {
+ render: () => (
- ));
+ ),
+
+ name: 'simple template',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx
index 10b6f1b17f4aa..2b564bc26c4d9 100644
--- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/extended_template.stories.tsx
@@ -6,9 +6,8 @@
*/
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
-import { array, radios, boolean } from '@storybook/addon-knobs';
-import React from 'react';
+import type { Meta } from '@storybook/react';
+import React, { useState } from 'react';
import { ExtendedTemplate } from '../extended_template';
import { ExpressionAstExpression } from '../../../../../types';
@@ -24,54 +23,70 @@ const defaultExpression: ExpressionAstExpression = {
],
};
-const defaultValues = {
- argValue: defaultExpression,
-};
+interface InteractiveProps {
+ lines?: boolean;
+ bars?: boolean;
+ points?: boolean;
+ seriesLabels: string[];
+ typeInstance: 'defaultStyle' | 'custom';
+}
-class Interactive extends React.Component<{}, { argValue: ExpressionAstExpression }> {
- public state = defaultValues;
+const Interactive = ({
+ lines = true,
+ bars = true,
+ points = true,
+ seriesLabels = ['label1', 'label2'],
+ typeInstance = 'custom',
+}: InteractiveProps) => {
+ const [argValue, setArgValue] = useState(defaultExpression);
- public render() {
- const include = [];
- if (boolean('Lines', true)) {
- include.push('lines');
- }
- if (boolean('Bars', true)) {
- include.push('bars');
- }
- if (boolean('Points', true)) {
- include.push('points');
- }
- return (
- {
- action('onValueChange')(argValue);
- this.setState({ argValue });
- }}
- resolved={{ labels: array('Series Labels', ['label1', 'label2']) }}
- typeInstance={{
- name: radios('Type Instance', { default: 'defaultStyle', custom: 'custom' }, 'custom'),
- options: {
- include,
- },
- }}
- />
- );
- }
-}
+ const include = [];
+ if (lines) include.push('lines');
+ if (bars) include.push('bars');
+ if (points) include.push('points');
-storiesOf('arguments/SeriesStyle', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('extended', () => );
+ return (
+ {
+ action('onValueChange')(newValue);
+ setArgValue(newValue);
+ }}
+ resolved={{ labels: seriesLabels }}
+ typeInstance={{
+ name: typeInstance,
+ options: { include },
+ }}
+ />
+ );
+};
-storiesOf('arguments/SeriesStyle/components', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('extended: defaults', () => (
+export default {
+ title: 'arguments/SeriesStyle',
+ component: Interactive,
+ decorators: [
+ (story) => {story()}
,
+ ],
+ args: {
+ lines: true,
+ bars: true,
+ points: true,
+ seriesLabels: ['label1', 'label2'],
+ typeInstance: 'custom',
+ },
+ argTypes: {
+ typeInstance: {
+ control: 'radio',
+ options: ['defaultStyle', 'custom'],
+ },
+ seriesLabels: {
+ control: 'object',
+ },
+ },
+} as Meta;
+
+export const ExtendedDefaults = {
+ render: () => (
- ));
+ ),
+
+ name: 'extended: defaults',
+};
diff --git a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx
index b8a6fc3ac2da7..becb9221715e2 100644
--- a/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/public/expression_types/arg_types/series_style/__stories__/simple_template.stories.tsx
@@ -6,7 +6,7 @@
*/
import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
+import type { Meta } from '@storybook/react';
import React from 'react';
// @ts-expect-error untyped local
import { getDefaultWorkpad } from '../../../../state/defaults';
@@ -50,17 +50,21 @@ class Interactive extends React.Component<{}, { argValue: ExpressionAstExpressio
}
}
-storiesOf('arguments/SeriesStyle', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('simple', () => );
-
-storiesOf('arguments/SeriesStyle/components', module)
- .addDecorator((story) => (
- {story()}
- ))
- .add('simple: no labels', () => (
+export default {
+ title: 'arguments/SeriesStyle',
+
+ decorators: [
+ (story) => {story()}
,
+ ],
+} as Meta;
+
+export const Simple = {
+ render: () => ,
+ name: 'simple',
+};
+
+export const SimpleNoLabels = {
+ render: () => (
- ))
- .add('simple: defaults', () => (
+ ),
+
+ name: 'simple: no labels',
+};
+
+export const SimpleDefaults = {
+ render: () => (
- ))
- .add('simple: no series', () => (
+ ),
+
+ name: 'simple: defaults',
+};
+
+export const SimpleNoSeries = {
+ render: () => (
- ))
- .add('simple: with series', () => (
+ ),
+
+ name: 'simple: no series',
+};
+
+export const SimpleWithSeries = {
+ render: () => (
- ));
+ ),
+
+ name: 'simple: with series',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx
index 0c07affca2271..363b8136826fb 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/canvas.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ExampleContext } from '../../test/context_example';
@@ -15,18 +14,32 @@ import { sharedWorkpads } from '../../test';
import { initialCanvasShareableState } from '../../context/state';
const { austin } = sharedWorkpads;
-storiesOf('shareables/Canvas', module)
- .add('contextual: austin', () => (
+export default {
+ title: 'shareables/Canvas',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ))
- .add('contextual: hello', () => (
+ ),
+
+ name: 'contextual: austin',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx
index 1c01cffc0619e..2b9b9fa7cf286 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/page.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import React from 'react';
import { ExampleContext } from '../../test/context_example';
@@ -13,19 +12,36 @@ import { Page, PageComponent } from '../page';
import { sharedWorkpads } from '../../test';
const { austin } = sharedWorkpads;
-storiesOf('shareables/Page', module)
- .add('contextual: austin', () => (
+export default {
+ title: 'shareables/Page',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ))
- .add('contextual: hello', () => (
+ ),
+
+ name: 'contextual: austin',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx
index ac35952a29765..1d8c2764a7cdb 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/__stories__/rendered_element.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import React from 'react';
import { imageFunction } from '@kbn/expression-image-plugin/__fixtures__';
import { ExampleContext } from '../../test/context_example';
@@ -15,18 +14,32 @@ import { RenderedElement, RenderedElementComponent } from '../rendered_element';
const { austin, hello } = sharedWorkpads;
-storiesOf('shareables/RenderedElement', module)
- .add('contextual: hello', () => (
+export default {
+ title: 'shareables/RenderedElement',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('contextual: austin', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual: austin',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx
index e33242735b289..4024e3ed4d47c 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/footer.stories.tsx
@@ -5,20 +5,31 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import React from 'react';
import { ExampleContext } from '../../../test/context_example';
import { Footer } from '../footer';
-storiesOf('shareables/Footer', module)
- .add('contextual: hello', () => (
+export default {
+ title: 'shareables/Footer',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('contextual: austin', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ));
+ ),
+
+ name: 'contextual: austin',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/page_controls.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/page_controls.stories.tsx
index ab5fec39c8058..ca453f12c07b9 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/page_controls.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/page_controls.stories.tsx
@@ -6,7 +6,6 @@
*/
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ExampleContext } from '../../../test/context_example';
@@ -14,18 +13,32 @@ import { PageControls, PageControlsComponent } from '../page_controls';
const style = { background: '#333', padding: 10 };
-storiesOf('shareables/Footer/PageControls', module)
- .add('contextual: hello', () => (
+export default {
+ title: 'shareables/Footer/PageControls',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('contextual: austin', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual: austin',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/scrubber.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/scrubber.stories.tsx
index fc30e301ae8aa..000685d6af9c1 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/scrubber.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/scrubber.stories.tsx
@@ -6,29 +6,45 @@
*/
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { CanvasRenderedPage } from '../../../types';
import { ExampleContext } from '../../../test/context_example';
import { Scrubber, ScrubberComponent } from '../scrubber';
import { workpads } from '../../../../__fixtures__/workpads';
-storiesOf('shareables/Footer/Scrubber', module)
- .add('contextual: hello', () => (
+export default {
+ title: 'shareables/Footer/Scrubber',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('contextual: austin', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual: austin',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/title.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/title.stories.tsx
index 00e58bdd4bce1..d6744f9fbcd6b 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/title.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/__stories__/title.stories.tsx
@@ -6,26 +6,42 @@
*/
import React from 'react';
-import { storiesOf } from '@storybook/react';
import { ExampleContext } from '../../../test/context_example';
import { Title, TitleComponent } from '../title';
const style = { background: '#333', padding: 10 };
-storiesOf('shareables/Footer/Title', module)
- .add('contextual: hello', () => (
+export default {
+ title: 'shareables/Footer/Title',
+};
+
+export const ContextualHello = {
+ render: () => (
- ))
- .add('contextual: austin', () => (
+ ),
+
+ name: 'contextual: hello',
+};
+
+export const ContextualAustin = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual: austin',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/autoplay_settings.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/autoplay_settings.stories.tsx
index b5965711ae712..c49e79a4d7c0b 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/autoplay_settings.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/autoplay_settings.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ExampleContext } from '../../../../test/context_example';
@@ -20,13 +19,22 @@ const style = {
background: '#fff',
};
-storiesOf('shareables/Footer/Settings/AutoplaySettings', module)
- .add('contextual', () => (
+export default {
+ title: 'shareables/Footer/Settings/AutoplaySettings',
+};
+
+export const Contextual = {
+ render: () => (
- ))
- .add('component: off, 2s', () => (
+ ),
+
+ name: 'contextual',
+};
+
+export const ComponentOff2S = {
+ render: () => (
- ))
- .add('component: on, 5s', () => (
+ ),
+
+ name: 'component: off, 2s',
+};
+
+export const ComponentOn5S = {
+ render: () => (
- ));
+ ),
+
+ name: 'component: on, 5s',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/settings.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/settings.stories.tsx
index 31c79c5d1d9dd..ca3951f8febeb 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/settings.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/settings.stories.tsx
@@ -5,21 +5,32 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import React from 'react';
import { ExampleContext } from '../../../../test/context_example';
import { Settings, SettingsComponent } from '../settings';
import { initialCanvasShareableState } from '../../../../context';
-storiesOf('shareables/Footer/Settings', module)
- .add('contextual', () => (
+export default {
+ title: 'shareables/Footer/Settings',
+};
+
+export const Contextual = {
+ render: () => (
- ))
- .add('component', () => (
+ ),
+
+ name: 'contextual',
+};
+
+export const Component = {
+ render: () => (
- ));
+ ),
+
+ name: 'component',
+};
diff --git a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/toolbar_settings.stories.tsx b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/toolbar_settings.stories.tsx
index 255fd746c3533..d42c768218716 100644
--- a/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/toolbar_settings.stories.tsx
+++ b/x-pack/platform/plugins/private/canvas/shareable_runtime/components/footer/settings/__stories__/toolbar_settings.stories.tsx
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ExampleContext } from '../../../../test/context_example';
@@ -20,19 +19,36 @@ const style = {
background: '#fff',
};
-storiesOf('shareables/Footer/Settings/ToolbarSettings', module)
- .add('contextual', () => (
+export default {
+ title: 'shareables/Footer/Settings/ToolbarSettings',
+};
+
+export const Contextual = {
+ render: () => (
- ))
- .add('component: on', () => (
+ ),
+
+ name: 'contextual',
+};
+
+export const ComponentOn = {
+ render: () => (
- ))
- .add('component: off', () => (
+ ),
+
+ name: 'component: on',
+};
+
+export const ComponentOff = {
+ render: () => (
- ));
+ ),
+
+ name: 'component: off',
+};
diff --git a/x-pack/platform/plugins/private/canvas/storybook/addon/components/action_list.tsx b/x-pack/platform/plugins/private/canvas/storybook/addon/components/action_list.tsx
index 734fbe87e831f..86d822db01b61 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/addon/components/action_list.tsx
+++ b/x-pack/platform/plugins/private/canvas/storybook/addon/components/action_list.tsx
@@ -7,7 +7,7 @@
import React, { FC, useEffect, useState } from 'react';
import { EuiSelectable, EuiSelectableOption } from '@elastic/eui';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
import { v4 as uuidv4 } from 'uuid';
import { EVENTS } from '../constants';
diff --git a/x-pack/platform/plugins/private/canvas/storybook/addon/register.tsx b/x-pack/platform/plugins/private/canvas/storybook/addon/register.tsx
index 4b74b3fcbc2a5..6e1fc976a09a0 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/addon/register.tsx
+++ b/x-pack/platform/plugins/private/canvas/storybook/addon/register.tsx
@@ -6,7 +6,7 @@
*/
import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
import { AddonPanel } from '@storybook/components';
import { STORY_CHANGED } from '@storybook/core-events';
import { create } from '@storybook/theming';
@@ -25,9 +25,9 @@ addons.register(ADDON_ID, (api) => {
addons.add(ACTIONS_PANEL_ID, {
title: 'Redux Actions',
type: types.PANEL,
- render: ({ active, key }) => {
+ render: ({ active }) => {
return (
-
+
);
diff --git a/x-pack/platform/plugins/private/canvas/storybook/addon/state.ts b/x-pack/platform/plugins/private/canvas/storybook/addon/state.ts
index dea83118e6433..46d5e143cd47b 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/addon/state.ts
+++ b/x-pack/platform/plugins/private/canvas/storybook/addon/state.ts
@@ -7,7 +7,7 @@
import { applyMiddleware, Dispatch, Store } from 'redux';
import thunkMiddleware from 'redux-thunk';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
import { diff } from 'jsondiffpatch';
import { isFunction } from 'lodash';
diff --git a/x-pack/platform/plugins/private/canvas/storybook/canvas_webpack.ts b/x-pack/platform/plugins/private/canvas/storybook/canvas_webpack.ts
index e7da29b33be24..b1a9a28b090ad 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/canvas_webpack.ts
+++ b/x-pack/platform/plugins/private/canvas/storybook/canvas_webpack.ts
@@ -6,9 +6,10 @@
*/
import { resolve } from 'path';
-import { defaultConfig, mergeWebpackFinal } from '@kbn/storybook';
+import { defaultConfig } from '@kbn/storybook';
import type { StorybookConfig } from '@kbn/storybook';
import { Configuration } from 'webpack';
+import { merge as webpackMerge } from 'webpack-merge';
import { KIBANA_ROOT } from './constants';
export const canvasWebpack: Configuration = {
@@ -62,5 +63,6 @@ export const canvasWebpack: Configuration = {
export const canvasStorybookConfig: StorybookConfig = {
...defaultConfig,
addons: [...(defaultConfig.addons || []), require.resolve('./addon/register')],
- ...mergeWebpackFinal(canvasWebpack),
+ webpackFinal: (config, options) =>
+ webpackMerge(defaultConfig.webpackFinal?.(config, options) ?? {}, canvasWebpack),
};
diff --git a/x-pack/platform/plugins/private/canvas/storybook/decorators/index.ts b/x-pack/platform/plugins/private/canvas/storybook/decorators/index.ts
index 68481e27ae48b..d178595d224a9 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/decorators/index.ts
+++ b/x-pack/platform/plugins/private/canvas/storybook/decorators/index.ts
@@ -5,7 +5,6 @@
* 2.0.
*/
-import { addDecorator } from '@storybook/react';
import { routerContextDecorator } from './router_decorator';
import { kibanaContextDecorator } from './kibana_decorator';
import { servicesContextDecorator, legacyContextDecorator } from './services_decorator';
@@ -19,8 +18,10 @@ export const addDecorators = () => {
require('babel-plugin-require-context-hook/register')();
}
- addDecorator(kibanaContextDecorator);
- addDecorator(routerContextDecorator);
- addDecorator(legacyContextDecorator());
- addDecorator(servicesContextDecorator());
+ return [
+ kibanaContextDecorator,
+ routerContextDecorator,
+ legacyContextDecorator,
+ servicesContextDecorator,
+ ];
};
diff --git a/x-pack/platform/plugins/private/canvas/storybook/decorators/services_decorator.tsx b/x-pack/platform/plugins/private/canvas/storybook/decorators/services_decorator.tsx
index c99f5df184cd4..4d83404aacd6f 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/decorators/services_decorator.tsx
+++ b/x-pack/platform/plugins/private/canvas/storybook/decorators/services_decorator.tsx
@@ -7,24 +7,22 @@
import React from 'react';
-import { DecoratorFn } from '@storybook/react';
+import { Decorator } from '@storybook/react';
import { I18nProvider } from '@kbn/i18n-react';
import { LegacyServicesProvider } from '../../public/services/legacy';
import { setStubKibanaServices } from '../../public/services/mocks';
-export const servicesContextDecorator = (): DecoratorFn => {
- return (story: Function, storybook) => {
- if (process.env.JEST_WORKER_ID !== undefined) {
- storybook.args.useStaticData = true;
- }
+export const servicesContextDecorator: Decorator = (story, storybook) => {
+ if (process.env.JEST_WORKER_ID !== undefined) {
+ storybook.args.useStaticData = true;
+ }
- return {story()};
- };
+ return {story()};
};
-export const legacyContextDecorator = () => {
+export const legacyContextDecorator: Decorator = (story) => {
setStubKibanaServices();
- return (story: Function) => {story()};
+ return {story()};
};
diff --git a/x-pack/platform/plugins/private/canvas/storybook/preview.ts b/x-pack/platform/plugins/private/canvas/storybook/preview.ts
index 040e1c3de1494..dde277e6953c3 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/preview.ts
+++ b/x-pack/platform/plugins/private/canvas/storybook/preview.ts
@@ -5,14 +5,9 @@
* 2.0.
*/
-import { addParameters } from '@storybook/react';
-
import { addDecorators } from './decorators';
// Import Canvas CSS
import '../public/style/index.scss';
-addDecorators();
-addParameters({
- controls: { hideNoControlsWarning: true },
-});
+export const decorators = addDecorators();
diff --git a/x-pack/platform/plugins/private/canvas/storybook/storyshots.skipped_test.tsx b/x-pack/platform/plugins/private/canvas/storybook/storyshots.skipped_test.tsx
index fbfc5e835df97..64e5938fefb8d 100644
--- a/x-pack/platform/plugins/private/canvas/storybook/storyshots.skipped_test.tsx
+++ b/x-pack/platform/plugins/private/canvas/storybook/storyshots.skipped_test.tsx
@@ -7,19 +7,18 @@
// This file is skipped
// @storybook/addon-storyshots is not supported in Jest 27+ https://github.com/storybookjs/storybook/issues/15916
+// @storybook/addon-storyshots has been removed in Storybook 8 https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyshots-has-been-removed
import fs from 'fs';
-import { ReactChildren, createElement } from 'react';
+import { ReactChildren } from 'react';
import path from 'path';
import moment from 'moment';
import 'moment-timezone';
import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import { create, act } from 'react-test-renderer';
-import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
// @ts-expect-error untyped library
import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer';
+// @ts-expect-error untyped library
import { addSerializer } from 'jest-specific-snapshot';
import { createSerializer } from '@emotion/jest';
import { replaceEmotionPrefix } from '@elastic/eui/lib/test';
@@ -96,23 +95,23 @@ const emotionSerializer = createSerializer({
});
addSerializer(emotionSerializer);
-const converter = new Stories2SnapsConverter();
+// const converter = new Stories2SnapsConverter();
// Initialize Storyshots and build the Jest Snapshots
-initStoryshots({
- configPath: path.resolve(__dirname),
- framework: 'react',
- asyncJest: true,
- test: async ({ story, context, done }) => {
- const renderer = create(createElement(story.render));
- // wait until the element will perform all renders and resolve all promises (lazy loading, especially)
- await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
- // save each snapshot to a different file (similar to "multiSnapshotWithOptions")
- const snapshotFileName = converter.getSnapshotFileName(context);
- expect(renderer).toMatchSpecificSnapshot(snapshotFileName);
- done?.();
- },
- // Don't snapshot tests that start with 'redux'
- storyNameRegex: /^((?!.*?redux).)*$/,
- renderer: shallow,
-});
+// initStoryshots({
+// configPath: path.resolve(__dirname),
+// framework: 'react',
+// asyncJest: true,
+// test: async ({ story, context, done }) => {
+// const renderer = create(createElement(story.render));
+// // wait until the element will perform all renders and resolve all promises (lazy loading, especially)
+// await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+// // save each snapshot to a different file (similar to "multiSnapshotWithOptions")
+// const snapshotFileName = converter.getSnapshotFileName(context);
+// expect(renderer).toMatchSpecificSnapshot(snapshotFileName);
+// done?.();
+// },
+// // Don't snapshot tests that start with 'redux'
+// storyNameRegex: /^((?!.*?redux).)*$/,
+// renderer: shallow,
+// });
diff --git a/x-pack/platform/plugins/shared/fleet/.storybook/context/index.tsx b/x-pack/platform/plugins/shared/fleet/.storybook/context/index.tsx
index c816ef62f46ba..66afafdf0e62b 100644
--- a/x-pack/platform/plugins/shared/fleet/.storybook/context/index.tsx
+++ b/x-pack/platform/plugins/shared/fleet/.storybook/context/index.tsx
@@ -8,7 +8,7 @@
import React, { useEffect, useMemo, useCallback } from 'react';
import { EMPTY } from 'rxjs';
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
import { createBrowserHistory } from 'history';
import { I18nProvider } from '@kbn/i18n-react';
@@ -52,13 +52,13 @@ import { getCustomBranding } from './custom_branding';
// Expect this to grow as components that are given Stories need access to mocked services.
export const StorybookContext: React.FC<{
children: React.ReactNode;
- storyContext?: Parameters[1];
+ storyContext?: Parameters;
}> = ({ storyContext, children: storyChildren }) => {
const basepath = '';
const browserHistory = createBrowserHistory();
const history = new CoreScopedHistory(browserHistory, basepath);
- const isCloudEnabled = storyContext?.args.isCloudEnabled;
+ const isCloudEnabled = Boolean(storyContext?.[1].args.isCloudEnabled);
// @ts-ignore {} no assignable to parameter
ExperimentalFeaturesService.init({});
const startServices: FleetStartServices = useMemo(
diff --git a/x-pack/platform/plugins/shared/fleet/.storybook/decorator.tsx b/x-pack/platform/plugins/shared/fleet/.storybook/decorator.tsx
index 93870809c94bb..0862d33e8afaf 100644
--- a/x-pack/platform/plugins/shared/fleet/.storybook/decorator.tsx
+++ b/x-pack/platform/plugins/shared/fleet/.storybook/decorator.tsx
@@ -6,10 +6,10 @@
*/
import React from 'react';
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
import { StorybookContext } from './context';
-export const decorator: DecoratorFn = (story, storybook) => {
- return {story()};
+export const decorator: Decorator = (story, storybook) => {
+ return {story()};
};
diff --git a/x-pack/platform/plugins/shared/fleet/.storybook/manager.ts b/x-pack/platform/plugins/shared/fleet/.storybook/manager.ts
index 7e77a6dd29e2d..d7ae2a23e82c2 100644
--- a/x-pack/platform/plugins/shared/fleet/.storybook/manager.ts
+++ b/x-pack/platform/plugins/shared/fleet/.storybook/manager.ts
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
import { create } from '@storybook/theming';
import { PANEL_ID } from '@storybook/addon-actions';
diff --git a/x-pack/platform/plugins/shared/fleet/.storybook/preview.tsx b/x-pack/platform/plugins/shared/fleet/.storybook/preview.tsx
index 7d8ac74f2fa80..425bbc3623d7a 100644
--- a/x-pack/platform/plugins/shared/fleet/.storybook/preview.tsx
+++ b/x-pack/platform/plugins/shared/fleet/.storybook/preview.tsx
@@ -6,12 +6,11 @@
*/
import React from 'react';
-import { addDecorator } from '@storybook/react';
-import { Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs';
+import { Title, Subtitle, Description, Primary, Stories } from '@storybook/blocks';
import { decorator } from './decorator';
-addDecorator(decorator);
+export const decorators = [decorator];
export const parameters = {
docs: {
diff --git a/x-pack/platform/plugins/shared/fleet/.storybook/smoke.test.tsx b/x-pack/platform/plugins/shared/fleet/.storybook/smoke.test.tsx
index 63c1199b75aa9..1cbbd43213af7 100644
--- a/x-pack/platform/plugins/shared/fleet/.storybook/smoke.test.tsx
+++ b/x-pack/platform/plugins/shared/fleet/.storybook/smoke.test.tsx
@@ -5,30 +5,19 @@
* 2.0.
*/
-import { getFips } from 'crypto';
-
-import { mount } from 'enzyme';
-import { createElement } from 'react';
-import { act } from 'react-dom/test-utils';
-import initStoryshots from '@storybook/addon-storyshots';
-
-describe('Fleet Storybook Smoke', function () {
- if (getFips() !== 1) {
- test('Init', async () => {
- await initStoryshots({
- configPath: __dirname,
- framework: 'react',
- test: async ({ story }) => {
- const renderer = mount(createElement(story.render));
- // wait until the element will perform all renders and resolve all promises (lazy loading, especially)
- await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
- expect(renderer.html()).not.toContain('euiErrorBoundary');
- },
- });
- });
- } else {
- test('fips is enabled', function () {
- expect(getFips() === 1).toEqual(true);
- });
- }
+// @storybook/addon-storyshots is not supported in Jest 27+ https://github.com/storybookjs/storybook/issues/15916
+// @storybook/addon-storyshots has been removed in Storybook 8 https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyshots-has-been-removed
+describe.skip('Fleet Storybook Smoke', () => {
+ test('Init', async () => {
+ // await initStoryshots({
+ // configPath: __dirname,
+ // framework: 'react',
+ // test: async ({ story }) => {
+ // const renderer = mount(createElement(story.render));
+ // // wait until the element will perform all renders and resolve all promises (lazy loading, especially)
+ // await act(() => new Promise((resolve) => setTimeout(resolve, 0)));
+ // expect(renderer.html()).not.toContain('euiErrorBoundary');
+ // },
+ // });
+ });
});
diff --git a/x-pack/platform/plugins/shared/fleet/common/jest.config.js b/x-pack/platform/plugins/shared/fleet/common/jest.config.js
index 0711e6f7f317e..1470b8e45ad8f 100644
--- a/x-pack/platform/plugins/shared/fleet/common/jest.config.js
+++ b/x-pack/platform/plugins/shared/fleet/common/jest.config.js
@@ -9,9 +9,6 @@ module.exports = {
preset: '@kbn/test',
rootDir: '../../../../../..',
roots: ['/x-pack/platform/plugins/shared/fleet/common'],
- transform: {
- '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
- },
coverageDirectory:
'/target/kibana-coverage/jest/x-pack/platform/plugins/shared/fleet/common',
coverageReporters: ['text', 'html'],
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/flyout.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/flyout.stories.tsx
index b08c965d084c8..5e14945e59916 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/flyout.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/flyout.stories.tsx
@@ -8,9 +8,9 @@
import React from 'react';
import { EuiButton } from '@elastic/eui';
-import { FleetServerFlyout as FleetServerFlyoutComponent } from '.';
+import { FleetServerFlyout } from '.';
-export const FleetServerFlyout = () => {
+const FleetServerFlyoutComponent = () => {
const [isOpen, setIsOpen] = React.useState(false);
return (
@@ -18,16 +18,15 @@ export const FleetServerFlyout = () => {
setIsOpen(true)}>
Show flyout
- {isOpen && setIsOpen(false)} />}
+ {isOpen && setIsOpen(false)} />}
);
};
-FleetServerFlyout.args = {
- isCloudEnabled: false,
-};
-
export default {
- component: FleetServerFlyout,
+ component: FleetServerFlyoutComponent,
title: 'Sections/Fleet/Agents/Fleet Server Instructions/In Flyout',
+ args: {
+ isCloudEnabled: false,
+ },
};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/instructions.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/instructions.stories.tsx
index cc930783f73c5..c934cf0fd00bd 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/instructions.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/fleet_server_instructions/instructions.stories.tsx
@@ -9,12 +9,14 @@ import React from 'react';
import { AddFleetServerLanding } from '.';
-export const FleetServerInstructions = () => {
- return
;
-};
+export const FleetServerInstructions = {
+ render: () => {
+ return
;
+ },
-FleetServerInstructions.args = {
- isCloudEnabled: false,
+ args: {
+ isCloudEnabled: false,
+ },
};
export default {
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/fleet_server_callouts/index.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/fleet_server_callouts/index.stories.tsx
index d16026851a2d8..2e74ba6b9a248 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/fleet_server_callouts/index.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/fleet_server_callouts/index.stories.tsx
@@ -16,58 +16,66 @@ interface Args {
width: number;
}
-export const FleetServerCallouts = ({ width }: Args) => {
- return (
-
-
-
- {}} />
-
-
-
- );
+export const FleetServerCallouts = {
+ render: ({ width }: Args) => {
+ return (
+
+
+
+ {}} />
+
+
+
+ );
+ },
+
+ args: {
+ width: 900,
+ } as Args,
};
-FleetServerCallouts.args = {
- width: 900,
-} as Args;
+export const FleetServerCloudUnhealthyCallout = {
+ render: ({ width }: Args) => {
+ return (
+
+
+
+ );
+ },
-export const FleetServerCloudUnhealthyCallout = ({ width }: Args) => {
- return (
-
-
-
- );
+ args: {
+ width: 900,
+ } as Args,
};
-FleetServerCloudUnhealthyCallout.args = {
- width: 900,
-} as Args;
+export const FleetServerOnPremUnhealthyCallout = {
+ render: ({ width }: Args) => {
+ return (
+
+ {}} />
+
+ );
+ },
-export const FleetServerOnPremUnhealthyCallout = ({ width }: Args) => {
- return (
-
- {}} />
-
- );
+ args: {
+ width: 900,
+ } as Args,
};
-FleetServerOnPremUnhealthyCallout.args = {
- width: 900,
-} as Args;
+export const FleetServerOnPremRequiredCallout = {
+ render: ({ width }: Args) => {
+ return (
+
+
+
+ );
+ },
-export const FleetServerOnPremRequiredCallout = ({ width }: Args) => {
- return (
-
-
-
- );
+ args: {
+ width: 900,
+ } as Args,
};
-FleetServerOnPremRequiredCallout.args = {
- width: 900,
-} as Args;
-
export default {
component: FleetServerCallouts,
title: 'Sections/Fleet/Agents/FleetServerCallouts',
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.stories.tsx
index 320d2bb7cbef8..91c1619b98f25 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.stories.tsx
@@ -24,7 +24,7 @@ const args: Args = {
placeholder: '# Place holder example',
};
-export const YamlCodeEditorWithPlaceholder = ({ width, placeholder }: Args) => {
+const YamlCodeEditorWithPlaceholderComponent = ({ width, placeholder }: Args) => {
const [value, setValue] = useState('');
// This component is not renderable in tests
@@ -39,4 +39,10 @@ export const YamlCodeEditorWithPlaceholder = ({ width, placeholder }: Args) => {
);
};
-YamlCodeEditorWithPlaceholder.args = args;
+export const YamlCodeEditorWithPlaceholder = {
+ render: ({ width, placeholder }: Args) => (
+
+ ),
+
+ args,
+};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.stories.tsx
index 55545325c3994..7f2702b7ea922 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.stories.tsx
@@ -29,12 +29,14 @@ const fleetServerHost = {
is_preconfigured: false,
};
-export const FleetServerHostsFlyout = ({ width }: Args) => {
- return (
-
- {}} fleetServerHost={fleetServerHost} />
-
- );
-};
+export const FleetServerHostsFlyout = {
+ render: ({ width }: Args) => {
+ return (
+
+ {}} fleetServerHost={fleetServerHost} />
+
+ );
+ },
-FleetServerHostsFlyout.args = args;
+ args,
+};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/multi_row_input/index.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/multi_row_input/index.stories.tsx
index da01661d5fc35..bb7fb0eb8e8a6 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/multi_row_input/index.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/multi_row_input/index.stories.tsx
@@ -5,22 +5,19 @@
* 2.0.
*/
-import { useState } from '@storybook/addons';
-import { addParameters } from '@storybook/react';
+import { useState } from '@storybook/preview-api';
+import type { StoryObj } from '@storybook/react';
import React from 'react';
import { MultiRowInput as Component } from '.';
-addParameters({
- options: {
- enableShortcuts: false,
- },
-});
-
export default {
component: Component,
title: 'Sections/Fleet/Settings/MultiRowInput',
-};
+ options: {
+ enableShortcuts: false,
+ },
+} as StoryObj;
interface Args {
width: number;
@@ -36,7 +33,7 @@ const args: Args = {
disabled: false,
};
-export const HostsInput = ({ width, label, helpText, disabled }: Args) => {
+const HostsInputComponent = ({ width, label, helpText, disabled }: Args) => {
const [value, setValue] = useState
([]);
return (
@@ -51,31 +48,39 @@ export const HostsInput = ({ width, label, helpText, disabled }: Args) => {
);
};
-HostsInput.args = args;
-export const HostsInputDisabled = ({ value }: { value: string[] }) => {
- return (
-
- {}}
- label={'Host input label'}
- disabled={true}
- />
-
- );
+export const HostsInput = {
+ render: (params: Args) => ,
+
+ args,
};
-HostsInputDisabled.args = { value: ['http://test1.fr', 'http://test2.fr'] };
-HostsInputDisabled.argTypes = {
- value: {
- control: { type: 'object' },
+export const HostsInputDisabled = {
+ render: ({ value }: { value: string[] }) => {
+ return (
+
+ {}}
+ label={'Host input label'}
+ disabled={true}
+ />
+
+ );
+ },
+
+ args: { value: ['http://test1.fr', 'http://test2.fr'] },
+
+ argTypes: {
+ value: {
+ control: { type: 'object' },
+ },
},
};
-export const HostsInputUrl = () => {
+const HostsInputUrlComponent = () => {
const [value, setValue] = useState([]);
return (
@@ -92,9 +97,14 @@ export const HostsInputUrl = () => {
);
};
-HostsInputUrl.args = { value: ['https://test1.com', 'https://test2.com', 'https://test3.com'] };
-HostsInputUrl.argTypes = {
- value: {
- control: { type: 'object' },
+export const HostsInputUrl = {
+ render: () =>
,
+
+ args: { value: ['https://test1.com', 'https://test2.com', 'https://test3.com'] },
+
+ argTypes: {
+ value: {
+ control: { type: 'object' },
+ },
},
};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/outputs_table/index.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/outputs_table/index.stories.tsx
index 70fb81b9f33db..04d78d6d50b8a 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/outputs_table/index.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/outputs_table/index.stories.tsx
@@ -93,12 +93,14 @@ const outputs: Output[] = [
},
];
-export const OutputsTable = ({ width }: Args) => {
- return (
-
- {}} outputs={outputs} />
-
- );
-};
+export const OutputsTable = {
+ render: ({ width }: Args) => {
+ return (
+
+ {}} outputs={outputs} />
+
+ );
+ },
-OutputsTable.args = args;
+ args,
+};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx
index fbafda4ef220b..02613d25105a6 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.stories.tsx
@@ -56,18 +56,24 @@ const argTypes = {
},
};
-export const AvailablePackage = ({ width, ...props }: Args) => (
-
-);
-AvailablePackage.args = args;
-AvailablePackage.argTypes = argTypes;
+export const AvailablePackage = {
+ render: ({ width, ...props }: Args) => (
+
+ ),
-export const InstalledPackage = ({ width, ...props }: Args) => (
-
-);
-InstalledPackage.args = args;
-InstalledPackage.argTypes = argTypes;
+ args,
+ argTypes,
+};
+
+export const InstalledPackage = {
+ render: ({ width, ...props }: Args) => (
+
+ ),
+
+ args,
+ argTypes,
+};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.stories.tsx
index 8b5498a160e5d..01196d056aa4d 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_list_grid/index.stories.tsx
@@ -47,112 +47,117 @@ const categories = [
},
];
-export const EmptyList = (props: Args) => (
-
-);
+export const EmptyList = {
+ render: (props: Args) => (
+
+ ),
-export const List = (props: Args) => (
-
-);
+ args,
+};
+
+export const List = {
+ render: (props: Args) => (
+
+ ),
-EmptyList.args = args;
-List.args = args;
+ args,
+};
diff --git a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/requirements.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/requirements.stories.tsx
index 205d739d48696..75bb1b2ffb7be 100644
--- a/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/requirements.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/requirements.stories.tsx
@@ -22,18 +22,20 @@ const args: Args = {
width: 250,
};
-export const Requirements = ({ width }: Args) => {
- return (
-
-
-
- );
-};
+export const Requirements = {
+ render: ({ width }: Args) => {
+ return (
+
+
+
+ );
+ },
-Requirements.args = args;
+ args,
+};
diff --git a/x-pack/platform/plugins/shared/fleet/public/components/confirm_force_install_modal.stories.tsx b/x-pack/platform/plugins/shared/fleet/public/components/confirm_force_install_modal.stories.tsx
index 6f7ea6af8428f..cd0420984e56d 100644
--- a/x-pack/platform/plugins/shared/fleet/public/components/confirm_force_install_modal.stories.tsx
+++ b/x-pack/platform/plugins/shared/fleet/public/components/confirm_force_install_modal.stories.tsx
@@ -45,24 +45,27 @@ const argTypes = {
},
};
-export const UnverifiedIntegrationModal = ({ packageName, packageVersion }: Args) => {
- const mockDocLinks: DocLinksStart = {
- links: {
- // @ts-ignore only defining what we need
- fleet: {
- packageSignatures: 'elastic.co',
+export const UnverifiedIntegrationModal = {
+ render: ({ packageName, packageVersion }: Args) => {
+ const mockDocLinks: DocLinksStart = {
+ links: {
+ // @ts-ignore only defining what we need
+ fleet: {
+ packageSignatures: 'elastic.co',
+ },
},
- },
- };
+ };
+
+ return (
+
{}}
+ onConfirm={() => {}}
+ pkg={{ name: packageName, version: packageVersion }}
+ docLinks={mockDocLinks}
+ />
+ );
+ },
- return (
- {}}
- onConfirm={() => {}}
- pkg={{ name: packageName, version: packageVersion }}
- docLinks={mockDocLinks}
- />
- );
+ args,
+ argTypes,
};
-UnverifiedIntegrationModal.args = args;
-UnverifiedIntegrationModal.argTypes = argTypes;
diff --git a/x-pack/platform/plugins/shared/fleet/public/jest.config.js b/x-pack/platform/plugins/shared/fleet/public/jest.config.js
index bb555a56943b8..4fa7ba966cdca 100644
--- a/x-pack/platform/plugins/shared/fleet/public/jest.config.js
+++ b/x-pack/platform/plugins/shared/fleet/public/jest.config.js
@@ -9,9 +9,6 @@ module.exports = {
preset: '@kbn/test',
rootDir: '../../../../../..',
roots: ['/x-pack/platform/plugins/shared/fleet/public'],
- transform: {
- '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
- },
coverageDirectory:
'/target/kibana-coverage/jest/x-pack/platform/plugins/shared/fleet/public',
coverageReporters: ['text', 'html'],
diff --git a/x-pack/platform/plugins/shared/fleet/scripts/jest.config.js b/x-pack/platform/plugins/shared/fleet/scripts/jest.config.js
index e68dcd69cc3e3..c816a87542062 100644
--- a/x-pack/platform/plugins/shared/fleet/scripts/jest.config.js
+++ b/x-pack/platform/plugins/shared/fleet/scripts/jest.config.js
@@ -9,9 +9,6 @@ module.exports = {
preset: '@kbn/test',
rootDir: '../../../../../..',
roots: ['/x-pack/platform/plugins/shared/fleet/scripts'],
- transform: {
- '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
- },
coverageDirectory:
'/target/kibana-coverage/jest/x-pack/platform/plugins/shared/fleet/scripts',
coverageReporters: ['text', 'html'],
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_error_callout.stories.tsx b/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_error_callout.stories.tsx
index 2b1217d4615ee..327e31ebf21f6 100644
--- a/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_error_callout.stories.tsx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_error_callout.stories.tsx
@@ -6,7 +6,7 @@
*/
import { PropsOf } from '@elastic/eui';
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { decorateWithGlobalStorybookThemeProviders } from '../test_utils/use_global_storybook_theme';
import { DataSearchErrorCallout } from './data_search_error_callout';
@@ -31,7 +31,7 @@ export default {
type DataSearchErrorCalloutProps = PropsOf;
-const DataSearchErrorCalloutTemplate: Story = (args) => (
+const DataSearchErrorCalloutTemplate: StoryFn = (args) => (
);
@@ -54,31 +54,39 @@ const commonArgs = {
],
};
-export const ErrorCallout = DataSearchErrorCalloutTemplate.bind({});
+export const ErrorCallout = {
+ render: DataSearchErrorCalloutTemplate,
-ErrorCallout.args = {
- ...commonArgs,
+ args: {
+ ...commonArgs,
+ },
};
-export const ErrorCalloutWithRetry = DataSearchErrorCalloutTemplate.bind({});
+export const ErrorCalloutWithRetry = {
+ render: DataSearchErrorCalloutTemplate,
-ErrorCalloutWithRetry.args = {
- ...commonArgs,
-};
-ErrorCalloutWithRetry.argTypes = {
- onRetry: { action: 'retrying' },
+ args: {
+ ...commonArgs,
+ },
+
+ argTypes: {
+ onRetry: { action: 'retrying' },
+ },
};
-export const AbortedErrorCallout = DataSearchErrorCalloutTemplate.bind({});
+export const AbortedErrorCallout = {
+ render: DataSearchErrorCalloutTemplate,
-AbortedErrorCallout.args = {
- ...commonArgs,
- errors: [
- {
- type: 'aborted',
- },
- ],
-};
-AbortedErrorCallout.argTypes = {
- onRetry: { action: 'retrying' },
+ args: {
+ ...commonArgs,
+ errors: [
+ {
+ type: 'aborted',
+ },
+ ],
+ },
+
+ argTypes: {
+ onRetry: { action: 'retrying' },
+ },
};
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_progress.stories.tsx b/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_progress.stories.tsx
index 0efbfb25c9749..0eeba73c6cb38 100644
--- a/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_progress.stories.tsx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/components/data_search_progress.stories.tsx
@@ -6,7 +6,7 @@
*/
import { PropsOf } from '@elastic/eui';
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { decorateWithGlobalStorybookThemeProviders } from '../test_utils/use_global_storybook_theme';
import { DataSearchProgress } from './data_search_progress';
@@ -24,27 +24,34 @@ export default {
type DataSearchProgressProps = PropsOf;
-const DataSearchProgressTemplate: Story = (args) => (
+const DataSearchProgressTemplate: StoryFn = (args) => (
);
-export const UndeterminedProgress = DataSearchProgressTemplate.bind({});
+export const UndeterminedProgress = {
+ render: DataSearchProgressTemplate,
+};
-export const DeterminedProgress = DataSearchProgressTemplate.bind({});
+export const DeterminedProgress = {
+ render: DataSearchProgressTemplate,
-DeterminedProgress.args = {
- label: 'Searching',
- maxValue: 10,
- value: 3,
+ args: {
+ label: 'Searching',
+ maxValue: 10,
+ value: 3,
+ },
};
-export const CancelableDeterminedProgress = DataSearchProgressTemplate.bind({});
+export const CancelableDeterminedProgress = {
+ render: DataSearchProgressTemplate,
-CancelableDeterminedProgress.args = {
- label: 'Searching',
- maxValue: 10,
- value: 3,
-};
-CancelableDeterminedProgress.argTypes = {
- onCancel: { action: 'canceled' },
+ args: {
+ label: 'Searching',
+ maxValue: 10,
+ value: 3,
+ },
+
+ argTypes: {
+ onCancel: { action: 'canceled' },
+ },
};
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/loading/__examples__/index.stories.tsx b/x-pack/platform/plugins/shared/logs_shared/public/components/loading/__examples__/index.stories.tsx
index 879d8a2328ebc..8304c51d4310d 100644
--- a/x-pack/platform/plugins/shared/logs_shared/public/components/loading/__examples__/index.stories.tsx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/components/loading/__examples__/index.stories.tsx
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { LogsSharedLoadingPanel } from '..';
import { decorateWithGlobalStorybookThemeProviders } from '../../../test_utils/use_global_storybook_theme';
@@ -18,6 +18,6 @@ export default {
],
} as Meta;
-export const LoadingPanel: Story = () => (
+export const LoadingPanel: StoryFn = () => (
);
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.mdx b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.mdx
similarity index 93%
rename from x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.mdx
rename to x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.mdx
index 28275ba066ee7..bf6c6eda074bf 100644
--- a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.mdx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.mdx
@@ -1,6 +1,7 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
+import * as LogStreamStories from './log_stream.stories';
-
+
# Embeddable `` component
@@ -35,7 +36,7 @@ const startTimestamp = endTimestamp - 15 * 60 * 1000; // 15 minutes
This will show a list of log entries between the specified timestamps.
-
+
## Query log entries
@@ -89,8 +90,7 @@ By default the component will load at the bottom of the list, showing the newest
center={{ time: 1595146275000, tiebreaker: 150 }}
/>
```
-
-
+
## Highlight a specific entry
@@ -99,16 +99,15 @@ The component can highlight a specific line via the `highlight` prop. It takes t
```tsx
```
-
-
+
## Column configuration
By default the component will use the same columns as the Logs UI:
-- `@timestamp` of the log.
-- `event.dataset` field.
-- The log message. This might be the `message` field, or a reconstruction based on other fields.
+* `@timestamp` of the log.
+* `event.dataset` field.
+* The log message. This might be the `message` field, or a reconstruction based on other fields.
These columns are user-configurable. When the end user changes the default columns those changes will be reflected in the `` component.
@@ -130,8 +129,7 @@ The easiest way is to specify what columns you want with the `columns` prop.
]}
/>
```
-
-
+
The rendering of the column headers and the cell contents can also be customized with the following properties:
@@ -141,37 +139,53 @@ The rendering of the column headers and the cell contents can also be customized
width
|
+
number | string
|
+
The width of the column. Accepts any valid `flex-basis` value. |
+
header
|
+
boolean | string
+
+
Defaults to true
|
+
When `boolean`, decide if the header should render or not.
+
+
When `string`, show the string contents in the header.
|
+
render
|
+
(timestamp: number) => ReactNode for the `timestamp` column
+
+
(message: string) => ReactNode for the `message` column.
+
+
(value: JsonValue) => ReactNode for the `field` columns.
|
+
How should the column value render |
@@ -205,8 +219,7 @@ The rendering of the column headers and the cell contents can also be customized
]}
/>
```
-
-
+
### With a static log view configuration
@@ -261,5 +274,4 @@ The component can render a button on the row that opens a flyout, via the `showF
endTimestamp={...}
showFlyoutAction />
```
-
-
+
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.stories.tsx b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.stories.tsx
new file mode 100644
index 0000000000000..e1449edea6a80
--- /dev/null
+++ b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.stories.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { I18nProvider } from '@kbn/i18n-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { decorateWithGlobalStorybookThemeProviders } from '../../../test_utils/use_global_storybook_theme';
+import { LogStream } from '../log_stream';
+import { decorateWithKibanaContext } from './log_stream.story_decorators';
+
+const startTimestamp = 1595145600000;
+const endTimestamp = startTimestamp + 15 * 60 * 1000;
+
+export default {
+ title: 'infra/LogStream',
+ component: LogStream,
+ decorators: [
+ (wrappedStory) => {wrappedStory()},
+ decorateWithKibanaContext,
+ decorateWithGlobalStorybookThemeProviders,
+ ],
+ parameters: {
+ layout: 'padded',
+ },
+ args: {
+ startTimestamp,
+ endTimestamp,
+ },
+} as Meta;
+
+export const BasicDateRange = {};
+
+export const CenteredOnLogEntry = {
+ args: {
+ center: { time: '2020-07-19T08:11:15.000Z', tiebreaker: 150 },
+ },
+};
+
+export const HighlightedLogEntry = {
+ args: {
+ highlight: 'entry-197',
+ },
+};
+
+export const CustomColumns = {
+ args: {
+ columns: [
+ { type: 'timestamp' },
+ { type: 'field', field: 'log.level' },
+ { type: 'field', field: 'host.name' },
+ { type: 'message' },
+ ],
+ },
+};
+
+export const CustomColumnRendering: StoryObj = {
+ args: {
+ columns: [
+ { type: 'timestamp', header: 'When?' },
+ {
+ type: 'field',
+ field: 'log.level',
+ header: false,
+ width: 24,
+ render: (value) => {
+ switch (value) {
+ case 'debug':
+ return '🐞';
+ case 'info':
+ return 'ℹ️';
+ case 'warn':
+ return '⚠️';
+ case 'error':
+ return '❌';
+ }
+ },
+ },
+ { type: 'message' },
+ ],
+ },
+};
+
+export const Flyout = {
+ args: {
+ showFlyoutAction: true,
+ },
+};
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.story_decorators.tsx b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.story_decorators.tsx
similarity index 93%
rename from x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.story_decorators.tsx
rename to x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.story_decorators.tsx
index c168feccce62a..950d7328c71dd 100644
--- a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.story_decorators.tsx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/__stories__/log_stream.story_decorators.tsx
@@ -21,13 +21,13 @@ import type {
IEsSearchResponse,
} from '@kbn/search-types';
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { getLogViewResponsePayloadRT } from '../../../common/http_api';
-import { defaultLogViewAttributes } from '../../../common/log_views';
+import { getLogViewResponsePayloadRT } from '../../../../common/http_api';
+import { defaultLogViewAttributes } from '../../../../common/log_views';
import {
LogEntriesSearchResponsePayload,
LOG_ENTRIES_SEARCH_STRATEGY,
-} from '../../../common/search_strategies/log_entries/log_entries';
-import { ENTRIES_EMPTY, generateFakeEntries } from '../../test_utils/entries';
+} from '../../../../common/search_strategies/log_entries/log_entries';
+import { ENTRIES_EMPTY, generateFakeEntries } from '../../../test_utils/entries';
export const decorateWithKibanaContext = (
wrappedStory: () => StoryFnReactReturnType,
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.tsx b/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.tsx
deleted file mode 100644
index eeba1e0b448dd..0000000000000
--- a/x-pack/platform/plugins/shared/logs_shared/public/components/log_stream/log_stream.stories.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * 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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { I18nProvider } from '@kbn/i18n-react';
-import type { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { decorateWithGlobalStorybookThemeProviders } from '../../test_utils/use_global_storybook_theme';
-import { LogStream, LogStreamProps } from './log_stream';
-import { decorateWithKibanaContext } from './log_stream.story_decorators';
-
-const startTimestamp = 1595145600000;
-const endTimestamp = startTimestamp + 15 * 60 * 1000;
-
-export default {
- title: 'infra/LogStream',
- component: LogStream,
- decorators: [
- (wrappedStory) => {wrappedStory()},
- decorateWithKibanaContext,
- decorateWithGlobalStorybookThemeProviders,
- ],
- parameters: {
- layout: 'padded',
- },
- args: {
- startTimestamp,
- endTimestamp,
- },
-} as Meta;
-
-const LogStreamStoryTemplate: Story = (args) => ;
-
-export const BasicDateRange = LogStreamStoryTemplate.bind({});
-
-export const CenteredOnLogEntry = LogStreamStoryTemplate.bind({});
-CenteredOnLogEntry.args = {
- center: { time: '2020-07-19T08:11:15.000Z', tiebreaker: 150 },
-};
-
-export const HighlightedLogEntry = LogStreamStoryTemplate.bind({});
-HighlightedLogEntry.args = {
- highlight: 'entry-197',
-};
-
-export const CustomColumns = LogStreamStoryTemplate.bind({});
-CustomColumns.args = {
- columns: [
- { type: 'timestamp' },
- { type: 'field', field: 'log.level' },
- { type: 'field', field: 'host.name' },
- { type: 'message' },
- ],
-};
-
-export const CustomColumnRendering = LogStreamStoryTemplate.bind({});
-CustomColumnRendering.args = {
- columns: [
- { type: 'timestamp', header: 'When?' },
- {
- type: 'field',
- field: 'log.level',
- header: false,
- width: 24,
- render: (value) => {
- switch (value) {
- case 'debug':
- return '🐞';
- case 'info':
- return 'ℹ️';
- case 'warn':
- return '⚠️';
- case 'error':
- return '❌';
- }
- },
- },
- { type: 'message' },
- ],
-};
-
-export const Flyout = LogStreamStoryTemplate.bind({});
-Flyout.args = {
- showFlyoutAction: true,
-};
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/test_utils/use_global_storybook_theme.tsx b/x-pack/platform/plugins/shared/logs_shared/public/test_utils/use_global_storybook_theme.tsx
index 482602c87fd06..18b92b41b5005 100644
--- a/x-pack/platform/plugins/shared/logs_shared/public/test_utils/use_global_storybook_theme.tsx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/test_utils/use_global_storybook_theme.tsx
@@ -5,15 +5,13 @@
* 2.0.
*/
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator, StoryContext } from '@storybook/react';
import React, { useEffect, useMemo, useState, FC, PropsWithChildren } from 'react';
import { BehaviorSubject } from 'rxjs';
import type { CoreTheme } from '@kbn/core/public';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
-type StoryContext = Parameters[1];
-
export const useGlobalStorybookTheme = ({ globals: { euiTheme } }: StoryContext) => {
const theme = useMemo(() => euiThemeFromId(euiTheme), [euiTheme]);
const [theme$] = useState(() => new BehaviorSubject(theme));
@@ -41,7 +39,7 @@ export const GlobalStorybookThemeProviders: FC<
);
};
-export const decorateWithGlobalStorybookThemeProviders: DecoratorFn = (
+export const decorateWithGlobalStorybookThemeProviders: Decorator = (
wrappedStory,
storyContext
) => (
diff --git a/x-pack/solutions/observability/plugins/infra/public/utils/data_search/data_search.stories.mdx b/x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.mdx
similarity index 82%
rename from x-pack/solutions/observability/plugins/infra/public/utils/data_search/data_search.stories.mdx
rename to x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.mdx
index a8854692caa36..3db7166d0a9bd 100644
--- a/x-pack/solutions/observability/plugins/infra/public/utils/data_search/data_search.stories.mdx
+++ b/x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.mdx
@@ -1,21 +1,22 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as DataSearchStories from './data_search.stories';
-
+
# The `data` plugin and `SearchStrategies`
The search functionality abstraction provided by the `search` service of the
`data` plugin is pretty powerful:
-- The execution of the request is delegated to a search strategy, which is
- executed on the Kibana server side.
-- Any plugin can register custom search strategies with custom parameters and
- response shapes.
-- Search requests can be cancelled via an `AbortSignal`.
-- Search requests are decoupled from the transport layer. The service will poll
- for new results transparently.
-- Partial responses can be returned as they become available if the search
- takes longer.
+* The execution of the request is delegated to a search strategy, which is
+ executed on the Kibana server side.
+* Any plugin can register custom search strategies with custom parameters and
+ response shapes.
+* Search requests can be cancelled via an `AbortSignal`.
+* Search requests are decoupled from the transport layer. The service will poll
+ for new results transparently.
+* Partial responses can be returned as they become available if the search
+ takes longer.
# Working with `data.search.search()` in the Browser
@@ -49,9 +50,9 @@ an appropriate way. Because most response projections follow a similar pattern
there's a helper `normalizeDataSearchResponses(initialResponse,
parseRawResponse)`, which generates an RxJS operator, that...
-- emits an initial response containing the given `initialResponse` value
-- applies `parseRawResponse` to the `rawResponse` property of each emitted response
-- transforms transport layer errors as well as parsing errors into
+* emits an initial response containing the given `initialResponse` value
+* applies `parseRawResponse` to the `rawResponse` property of each emitted response
+* transforms transport layer errors as well as parsing errors into
`SearchStrategyError`s
```typescript
@@ -125,9 +126,7 @@ following utility components can make that even easier.
If `total` and `loaded` are not (yet) known, we can show an undetermined
progress bar.
-
+
### Known progress
@@ -135,9 +134,7 @@ If `total` and `loaded` are returned by the search strategy, they can be used
to show a progress bar with the option to cancel the request if it takes too
long.
-
+
### Failed requests
@@ -146,7 +143,4 @@ the `latestResponseErrors` return value, they can be rendered as appropriate
for the respective part of the UI. For many cases a `EuiCallout` is suitable,
so the `DataSearchErrorCallout` can serve as a starting point:
-
-
+
diff --git a/x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.stories.tsx b/x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.stories.tsx
new file mode 100644
index 0000000000000..8744209236d26
--- /dev/null
+++ b/x-pack/platform/plugins/shared/logs_shared/public/utils/data_search/__stories__/data_search.stories.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+ UndeterminedProgress,
+ CancelableDeterminedProgress,
+} from '../../../components/data_search_progress.stories';
+import { ErrorCalloutWithRetry } from '../../../components/data_search_error_callout.stories';
+
+export default {
+ title: 'infra/dataSearch/Overview',
+};
+
+export { UndeterminedProgress, CancelableDeterminedProgress, ErrorCalloutWithRetry };
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/.storybook/jest_setup.js b/x-pack/platform/plugins/shared/observability_ai_assistant/.storybook/jest_setup.js
index 32071b8aa3f62..d789c541066f4 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/.storybook/jest_setup.js
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/.storybook/jest_setup.js
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { setGlobalConfig } from '@storybook/testing-react';
+import { setProjectAnnotations } from '@storybook/react';
import * as globalStorybookConfig from './preview';
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/regenerate_response_button.stories.tsx b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/regenerate_response_button.stories.tsx
index bfbb506a9e90a..e2cde764cd972 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/regenerate_response_button.stories.tsx
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/regenerate_response_button.stories.tsx
@@ -4,16 +4,16 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
import { RegenerateResponseButton as Component } from './regenerate_response_button';
-const meta: ComponentMeta = {
+const meta: Meta = {
component: Component,
title: 'app/Atoms/RegenerateResponseButton',
};
export default meta;
-export const RegenerateResponseButton: ComponentStoryObj = {
+export const RegenerateResponseButton: StoryObj = {
args: {},
};
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/start_chat_button.stories.tsx b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/start_chat_button.stories.tsx
index de9116900b61b..3f4b6cac092cc 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/start_chat_button.stories.tsx
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/start_chat_button.stories.tsx
@@ -4,16 +4,16 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
import { StartChatButton as Component } from './start_chat_button';
-const meta: ComponentMeta = {
+const meta: Meta = {
component: Component,
title: 'app/Atoms/StartChatButton',
};
export default meta;
-export const StartChatButton: ComponentStoryObj = {
+export const StartChatButton: StoryObj = {
args: {},
};
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/stop_generating_button.stories.tsx b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/stop_generating_button.stories.tsx
index acf27b4a01274..36a299a855c36 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/stop_generating_button.stories.tsx
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/buttons/stop_generating_button.stories.tsx
@@ -4,16 +4,16 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
import { StopGeneratingButton as Component } from './stop_generating_button';
-const meta: ComponentMeta = {
+const meta: Meta = {
component: Component,
title: 'app/Atoms/StopGeneratingButton',
};
export default meta;
-export const StopGeneratingButton: ComponentStoryObj = {
+export const StopGeneratingButton: StoryObj = {
args: {},
};
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/connector_selector/connector_selector_base.stories.tsx b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/connector_selector/connector_selector_base.stories.tsx
index 4a1a882c22692..76c75236b6504 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/connector_selector/connector_selector_base.stories.tsx
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/connector_selector/connector_selector_base.stories.tsx
@@ -5,13 +5,13 @@
* 2.0.
*/
import React from 'react';
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
import { FindActionResult } from '@kbn/actions-plugin/server';
import { ComponentProps } from 'react';
import { EuiPanel } from '@elastic/eui';
import { ConnectorSelectorBase as Component } from './connector_selector_base';
-const meta: ComponentMeta = {
+const meta: Meta = {
component: Component,
title: 'app/Molecules/ConnectorSelectorBase',
};
@@ -26,7 +26,7 @@ const render = (props: ComponentProps) => {
);
};
-export const Loaded: ComponentStoryObj = {
+export const Loaded: StoryObj = {
args: {
loading: false,
selectedConnector: 'gpt-4',
@@ -38,14 +38,14 @@ export const Loaded: ComponentStoryObj = {
render,
};
-export const Loading: ComponentStoryObj = {
+export const Loading: StoryObj = {
args: {
loading: true,
},
render,
};
-export const Empty: ComponentStoryObj = {
+export const Empty: StoryObj = {
args: {
loading: false,
connectors: [],
@@ -53,7 +53,7 @@ export const Empty: ComponentStoryObj = {
render,
};
-export const FailedToLoad: ComponentStoryObj = {
+export const FailedToLoad: StoryObj = {
args: {
loading: false,
error: new Error('Failed to load connectors'),
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/insight/insight_base.stories.tsx b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/insight/insight_base.stories.tsx
index eb1065a0d86fa..67e3a36012b5b 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/insight/insight_base.stories.tsx
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/insight/insight_base.stories.tsx
@@ -6,7 +6,6 @@
*/
import React from 'react';
-import { ComponentStory } from '@storybook/react';
import { FindActionResult } from '@kbn/actions-plugin/server';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@@ -25,10 +24,6 @@ export default {
decorators: [KibanaReactStorybookDecorator],
};
-const Template: ComponentStory = (props: InsightBaseProps) => (
-
-);
-
const defaultProps: InsightBaseProps = {
title: 'What is the root cause of performance degradation in my service?',
actions: [
@@ -91,5 +86,6 @@ Morbi non faucibus massa. Aliquam sed augue in eros ornare luctus sit amet cursu
isOpen: false,
};
-export const Insight = Template.bind({});
-Insight.args = defaultProps;
+export const Insight = {
+ args: defaultProps,
+};
diff --git a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/message_panel/esql_code_block.stories.tsx b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/message_panel/esql_code_block.stories.tsx
index 02c7454ddaab3..6e707f9947e8a 100644
--- a/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/message_panel/esql_code_block.stories.tsx
+++ b/x-pack/platform/plugins/shared/observability_ai_assistant/public/components/message_panel/esql_code_block.stories.tsx
@@ -5,12 +5,12 @@
* 2.0.
*/
import React from 'react';
-import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
import { ComponentProps } from 'react';
import { EuiPanel } from '@elastic/eui';
import { EsqlCodeBlock as Component } from './esql_code_block';
-const meta: ComponentMeta = {
+const meta: Meta = {
component: Component,
title: 'app/Molecules/ES|QL Code Block',
};
@@ -25,7 +25,7 @@ const render = (props: ComponentProps) => {
);
};
-export const Simple: ComponentStoryObj