From 885b2d62d993eecd09e4e7061e46f200ec93bda2 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 13 Mar 2025 14:31:20 +0100 Subject: [PATCH] Fix stories (#10851) Fix storybook stories image --- .../__stories__/PrefetchLoading.stories.tsx | 2 +- .../__stories__/TaskList.stories.tsx | 4 + .../FormRawJsonFieldInput.stories.tsx | 77 ++++++++++++------ .../FormTextFieldInput.stories.tsx | 6 +- ...=> RelationFromManyFieldInput.stories.tsx} | 78 ++++++++++++++----- .../RelationToOneFieldInput.stories.tsx | 15 +--- .../components/SingleRecordPicker.tsx | 1 + ...ecordTableEmptyStateSoftDelete.stories.tsx | 15 ++-- ...AccountsCalendarChannelDetails.stories.tsx | 2 + ...sAccountsMessageChannelDetails.stories.tsx | 2 + ...RightDrawerWorkflowRunViewStep.stories.tsx | 21 ++++- .../decorators/WorkflowStepDecorator.tsx | 8 ++ 12 files changed, 168 insertions(+), 63 deletions(-) rename packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/{RelationManyFieldInput.stories.tsx => RelationFromManyFieldInput.stories.tsx} (53%) diff --git a/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx b/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx index 0f94fc9a0..ff0c14876 100644 --- a/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx +++ b/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx @@ -36,6 +36,6 @@ export const Default: Story = { await canvas.findByText('Search'); await canvas.findByText('Settings'); await canvas.findByText('Linkedin'); - await canvas.findByText('All companies'); + await canvas.findByText('Companies'); }, }; diff --git a/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx b/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx index c2a65b772..7f4814f9b 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx @@ -2,6 +2,8 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentDecorator } from 'twenty-ui'; import { TaskList } from '@/activities/tasks/components/TaskList'; +import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; @@ -13,6 +15,8 @@ const meta: Meta = { component: TaskList, decorators: [ ComponentDecorator, + ContextStoreDecorator, + I18nFrontDecorator, MemoryRouterDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx index 0bcc48426..97e1dbee0 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx @@ -52,8 +52,11 @@ export const Readonly: Story = { play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await userEvent.type(editor, '{{ "a": {{ "b" : "d" } }'); @@ -76,8 +79,11 @@ export const SaveValidJson: Story = { onPersist: fn(), }, play: async ({ canvasElement, args }) => { - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await userEvent.type(editor, '{{ "a": {{ "b" : "d" } }'); @@ -93,8 +99,11 @@ export const SaveValidMultilineJson: Story = { onPersist: fn(), }, play: async ({ canvasElement, args }) => { - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await userEvent.type( editor, @@ -115,8 +124,11 @@ export const MultilineWithDefaultValue: Story = { defaultValue: '{\n "a": {\n "b" : "d"\n }\n}', }, play: async ({ canvasElement }) => { - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await waitFor(() => { expect((editor as HTMLElement).innerText).toBe( @@ -132,8 +144,11 @@ export const DoesNotIgnoreInvalidJson: Story = { onPersist: fn(), }, play: async ({ canvasElement, args }) => { - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await userEvent.type(editor, 'lol'); @@ -180,8 +195,11 @@ export const InsertVariableInTheMiddleOnTextInput: Story = { play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); const addVariableButton = await canvas.findByRole('button', { name: 'Add variable', @@ -222,8 +240,11 @@ export const CanUseVariableAsObjectProperty: Story = { play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); const addVariableButton = await canvas.findByRole('button', { name: 'Add variable', @@ -250,8 +271,11 @@ export const ClearField: Story = { play: async ({ canvasElement, args }) => { const defaultValueStringLength = args.defaultValue!.length; - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await Promise.all([ userEvent.type(editor, `{Backspace>${defaultValueStringLength}}`), @@ -273,8 +297,11 @@ export const DoesNotBreakWhenUserInsertsNewlineInJsonString: Story = { onPersist: fn(), }, play: async ({ canvasElement, args }) => { - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await userEvent.type(editor, '"a{Enter}b"'); @@ -290,8 +317,11 @@ export const AcceptsJsonEncodedNewline: Story = { onPersist: fn(), }, play: async ({ canvasElement, args }) => { - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); await userEvent.type(editor, '"a\\nb"'); @@ -322,8 +352,11 @@ export const HasHistory: Story = { const canvas = within(canvasElement); - const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); + const editor = await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + return editor; + }); const addVariableButton = await canvas.findByRole('button', { name: 'Add variable', diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx index 42d24d036..0ec230a2c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormTextFieldInput.stories.tsx @@ -120,8 +120,12 @@ export const WithDeletableVariable: Story = { play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); + await waitFor(() => { + const editor = canvasElement.querySelector('.ProseMirror > p'); + expect(editor).toBeVisible(); + }); + const editor = canvasElement.querySelector('.ProseMirror > p'); - expect(editor).toBeVisible(); const variable = await canvas.findByText('Name'); expect(variable).toBeVisible(); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationManyFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx similarity index 53% rename from packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationManyFieldInput.stories.tsx rename to packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx index 5ee3d4681..031d44965 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationManyFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx @@ -1,13 +1,11 @@ import { Meta, StoryObj } from '@storybook/react'; -import { useEffect } from 'react'; +import { useEffect, useMemo } from 'react'; import { useSetRecoilState } from 'recoil'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { RelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; -import { FieldMetadataType } from '~/generated/graphql'; import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; @@ -17,7 +15,13 @@ import { mockedWorkspaceMemberData, } from '~/testing/mock-data/users'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/useOpenFieldInputEditMode'; import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider'; +import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { FieldMetadataType } from 'twenty-shared'; +import { RelationDefinitionType } from '~/generated-metadata/graphql'; const RelationWorkspaceSetterEffect = () => { const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState); @@ -36,31 +40,63 @@ const RelationWorkspaceSetterEffect = () => { const RelationManyFieldInputWithContext = () => { const setHotKeyScope = useSetHotkeyScope(); + const fieldDefinition = useMemo( + () => ({ + fieldMetadataId: 'relation', + label: 'People', + type: FieldMetadataType.RELATION, + iconName: 'IconLink', + metadata: { + fieldName: 'people', + relationType: RelationDefinitionType.ONE_TO_MANY, + relationObjectMetadataNamePlural: 'companies', + relationObjectMetadataNameSingular: CoreObjectNameSingular.Company, + objectMetadataNameSingular: 'company', + relationFieldMetadataId: '20202020-8c37-4163-ba06-1dada334ce3e', + }, + }), + [], + ); + + const setRecordStoreFieldValue = useSetRecoilState( + recordStoreFamilySelector({ + fieldName: 'people', + recordId: 'recordId', + }), + ); + + const { openFieldInput } = useOpenFieldInputEditMode(); + useEffect(() => { + setRecordStoreFieldValue([]); + setHotKeyScope('hotkey-scope'); - }, [setHotKeyScope]); + openFieldInput({ + fieldDefinition, + recordId: 'recordId', + }); + }, [ + fieldDefinition, + openFieldInput, + setHotKeyScope, + setRecordStoreFieldValue, + ]); return (
- - - - + + + + +
); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx index e367869db..31da0fa6c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx @@ -20,7 +20,6 @@ import { import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider'; import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState'; -import { SingleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/single-record-picker/states/contexts/SingleRecordPickerComponentInstanceContext'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { getCanvasElementForDropdownTesting } from 'twenty-ui'; import { @@ -92,12 +91,8 @@ const RelationToOneFieldInputWithContext = ({ instanceId: 'relation-to-one-field-input-123-Relation', }} > - - - - + +
@@ -176,9 +171,7 @@ export const Cancel: Story = { const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div'); - await waitFor(() => { - userEvent.click(emptyDiv); - expect(cancelJestFn).toHaveBeenCalledTimes(1); - }); + await userEvent.click(emptyDiv); + expect(cancelJestFn).toHaveBeenCalledTimes(1); }, }; diff --git a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx index 5235e26a2..fcf611779 100644 --- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx +++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx @@ -39,6 +39,7 @@ export const SingleRecordPicker = ({ event.target instanceof HTMLInputElement && event.target.tagName === 'INPUT' ); + if (weAreNotInAnHTMLInput && isDefined(onCancel)) { onCancel(); } diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx index 0a1e6c66e..32d1c3615 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/__stories__/RecordTableEmptyStateSoftDelete.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; +import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext'; import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance'; import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; @@ -19,12 +20,16 @@ const meta: Meta = { RecordTableDecorator, (Story) => ( - {}} + - - + {}} + > + + + ), ], diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsCalendarChannelDetails.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsCalendarChannelDetails.stories.tsx index 9109d0181..263b41e8c 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsCalendarChannelDetails.stories.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsCalendarChannelDetails.stories.tsx @@ -3,6 +3,7 @@ import { ComponentDecorator } from 'twenty-ui'; import { SettingsAccountsCalendarChannelDetails } from '@/settings/accounts/components/SettingsAccountsCalendarChannelDetails'; import { CalendarChannelVisibility } from '~/generated/graphql'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; @@ -12,6 +13,7 @@ const meta: Meta = { component: SettingsAccountsCalendarChannelDetails, decorators: [ ComponentDecorator, + I18nFrontDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, ], diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx index 6babbe320..bedebc827 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsMessageChannelDetails.stories.tsx @@ -4,6 +4,7 @@ import { ComponentDecorator } from 'twenty-ui'; import { MessageChannelContactAutoCreationPolicy } from '@/accounts/types/MessageChannel'; import { SettingsAccountsMessageChannelDetails } from '@/settings/accounts/components/SettingsAccountsMessageChannelDetails'; import { MessageChannelVisibility } from '~/generated/graphql'; +import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; @@ -13,6 +14,7 @@ const meta: Meta = { component: SettingsAccountsMessageChannelDetails, decorators: [ ComponentDecorator, + I18nFrontDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, ], diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/RightDrawerWorkflowRunViewStep.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/RightDrawerWorkflowRunViewStep.stories.tsx index 1a1c8131a..c8c0f51be 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/RightDrawerWorkflowRunViewStep.stories.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/RightDrawerWorkflowRunViewStep.stories.tsx @@ -5,7 +5,7 @@ import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerSt import styled from '@emotion/styled'; import { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, waitFor, within } from '@storybook/test'; -import { graphql, HttpResponse } from 'msw'; +import { HttpResponse, graphql } from 'msw'; import { useSetRecoilState } from 'recoil'; import { ComponentDecorator, RouterDecorator } from 'twenty-ui'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; @@ -63,8 +63,25 @@ const meta: Meta = { msw: { handlers: [ graphql.query('FindOneWorkflowRun', () => { + const workflowRunContext = + oneFailedWorkflowRunQueryResult.workflowRun.context; + + // Rendering the whole objectMetadata information in the JSON viewer is too long for storybook + // so we remove it for the story return HttpResponse.json({ - data: oneFailedWorkflowRunQueryResult, + data: { + ...oneFailedWorkflowRunQueryResult, + workflowRun: { + ...oneFailedWorkflowRunQueryResult.workflowRun, + context: { + ...workflowRunContext, + trigger: { + ...workflowRunContext.trigger, + objectMetadata: undefined, + }, + }, + }, + }, }); }), ...graphqlMocks.handlers, diff --git a/packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx b/packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx index 56c71bf33..9e1969d6b 100644 --- a/packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/WorkflowStepDecorator.tsx @@ -1,5 +1,6 @@ import { useStepsOutputSchema } from '@/workflow/hooks/useStepsOutputSchema'; import { WorkflowStepContextProvider } from '@/workflow/states/context/WorkflowStepContext'; +import { flowState } from '@/workflow/states/flowState'; import { workflowIdState } from '@/workflow/states/workflowIdState'; import { WorkflowVersion } from '@/workflow/types/Workflow'; import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState'; @@ -14,6 +15,7 @@ import { export const WorkflowStepDecorator: Decorator = (Story) => { const setWorkflowId = useSetRecoilState(workflowIdState); const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState); + const setFlow = useSetRecoilState(flowState); const workflowVersion = getWorkflowMock().versions.edges[0] .node as WorkflowVersion; const { populateStepsOutputSchema } = useStepsOutputSchema(); @@ -22,6 +24,11 @@ export const WorkflowStepDecorator: Decorator = (Story) => { useEffect(() => { setWorkflowId(getWorkflowMock().id); setWorkflowSelectedNode(getWorkflowNodeIdMock()); + setFlow({ + workflowVersionId: workflowVersion.id, + trigger: workflowVersion.trigger, + steps: workflowVersion.steps, + }); populateStepsOutputSchema(workflowVersion); setReady(true); }, [ @@ -29,6 +36,7 @@ export const WorkflowStepDecorator: Decorator = (Story) => { setWorkflowSelectedNode, populateStepsOutputSchema, workflowVersion, + setFlow, ]); return (