fix(Storybook): Add missing provider to Storybook

KaotoIO · Oct 1, 2024 · c36f314 · c36f314
1 parent b0291b5
commit c36f314
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 27 deletions.
diff --git a/packages/ui-tests/.storybook/main.ts b/packages/ui-tests/.storybook/main.ts
@@ -7,9 +7,10 @@ import packageJson from '../../../package.json';
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string): string {
   return dirname(require.resolve(join(value, 'package.json')));
 }
+
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [

diff --git a/packages/ui-tests/.storybook/preview.ts → packages/ui-tests/.storybook/preview.tsx b/packages/ui-tests/.storybook/preview.ts → packages/ui-tests/.storybook/preview.tsx
@@ -18,8 +18,15 @@ const preview: Preview = {
       },
     },
   },
-
-  tags: ['autodocs']
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ height: '600px', width: '100%' }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default preview;
diff --git a/packages/ui-tests/stories/canvas/Aggregate.stories.tsx b/packages/ui-tests/stories/canvas/Aggregate.stories.tsx
@@ -1,4 +1,5 @@
 import {
+  CanvasFormTabsContext,
   CanvasNode,
   CanvasSideBar,
   IVisualizationNode,
@@ -8,13 +9,14 @@ import {
   VisibleFlowsProvider,
   VisualComponentSchema,
 } from '@kaoto/kaoto/testing';
+import { NodeShape } from '@patternfly/react-topology';
 import { Meta, StoryFn } from '@storybook/react';
 
 const selectedNode: CanvasNode = {
   id: 'aggregate-6839',
   label: 'aggregate',
   parentNode: undefined,
-  shape: 'rect',
+  shape: NodeShape.rect,
   type: 'node',
   data: {
     vizNode: {
@@ -272,9 +274,16 @@ export default {
 
 const Template: StoryFn<typeof CanvasSideBar> = (args) => {
   return (
-    <VisibleFlowsProvider>
-      <CanvasSideBar {...args} onClose={() => {}} />
-    </VisibleFlowsProvider>
+    <CanvasFormTabsContext.Provider
+      value={{
+        selectedTab: 'All',
+        onTabChange: () => {},
+      }}
+    >
+      <VisibleFlowsProvider>
+        <CanvasSideBar {...args} onClose={() => {}} />
+      </VisibleFlowsProvider>
+    </CanvasFormTabsContext.Provider>
   );
 };
 

diff --git a/packages/ui-tests/stories/canvas/Canvas.stories.tsx b/packages/ui-tests/stories/canvas/Canvas.stories.tsx
@@ -4,6 +4,7 @@ import {
   CatalogLoaderProvider,
   CatalogSchemaLoader,
   CatalogTilesProvider,
+  ControllerService,
   EntitiesProvider,
   KameletVisualEntity,
   PipeVisualEntity,
@@ -15,7 +16,9 @@ import {
   kameletJson,
   pipeJson,
 } from '@kaoto/kaoto/testing';
+import { VisualizationProvider } from '@patternfly/react-topology';
 import { Meta, StoryFn } from '@storybook/react';
+import { useMemo } from 'react';
 import complexRouteMock from '../../cypress/fixtures/complexRouteMock.json';
 
 const emptyPipeJson = {
@@ -46,21 +49,27 @@ const pipeEntity = new PipeVisualEntity(pipeJson);
 const kameletEntity = new KameletVisualEntity(kameletJson);
 const emptyPipeEntity = new PipeVisualEntity(emptyPipeJson);
 
-const ContextDecorator = (Story: StoryFn) => (
-  <SourceCodeProvider>
-    <EntitiesProvider>
-      <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
-        <SchemasLoaderProvider>
-          <CatalogLoaderProvider>
-            <CatalogTilesProvider>
-              <Story />
-            </CatalogTilesProvider>
-          </CatalogLoaderProvider>
-        </SchemasLoaderProvider>
-      </RuntimeProvider>
-    </EntitiesProvider>
-  </SourceCodeProvider>
-);
+const ContextDecorator = (Story: StoryFn) => {
+  const controller = useMemo(() => ControllerService.createController(), []);
+
+  return (
+    <SourceCodeProvider>
+      <EntitiesProvider>
+        <RuntimeProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+          <SchemasLoaderProvider>
+            <CatalogLoaderProvider>
+              <CatalogTilesProvider>
+                <VisualizationProvider controller={controller}>
+                  <Story />
+                </VisualizationProvider>
+              </CatalogTilesProvider>
+            </CatalogLoaderProvider>
+          </SchemasLoaderProvider>
+        </RuntimeProvider>
+      </EntitiesProvider>
+    </SourceCodeProvider>
+  );
+};
 
 export default {
   title: 'Canvas/Canvas',
@@ -73,11 +82,9 @@ const Template: StoryFn<typeof Canvas> = (args) => {
   const firstVisibleEntity: unknown = { visibleFlows: { [visibleId]: true } };
 
   return (
-    <div style={{ height: '600px', width: '100%' }}>
-      <VisibleFlowsContext.Provider value={firstVisibleEntity as VisibleFLowsContextResult}>
-        <Canvas {...args} />
-      </VisibleFlowsContext.Provider>
-    </div>
+    <VisibleFlowsContext.Provider value={firstVisibleEntity as VisibleFLowsContextResult}>
+      <Canvas {...args} />
+    </VisibleFlowsContext.Provider>
   );
 };
 

diff --git a/packages/ui/src/testing-api.ts b/packages/ui/src/testing-api.ts
@@ -6,6 +6,7 @@ export * from './providers';
 export * from './utils';
 export * from './stubs';
 export type { EntitiesContextResult } from './hooks/entities';
+export * from './components/Visualization/Canvas/controller.service';
 
 /** Re-export public components */
 export * from './public-api';