diff --git a/packages/ee/ui/embed-sdk/src/index.ts b/packages/ee/ui/embed-sdk/src/index.ts index 4151e28ee30..d149c0d6f77 100644 --- a/packages/ee/ui/embed-sdk/src/index.ts +++ b/packages/ee/ui/embed-sdk/src/index.ts @@ -11,8 +11,6 @@ export enum ActivepiecesClientEventName { CLIENT_CONFIGURATION_FINISHED = 'CLIENT_CONFIGURATION_FINISHED', CLIENT_CONNECTION_PIECE_NOT_FOUND = 'CLIENT_CONNECTION_PIECE_NOT_FOUND', CLIENT_BUILDER_HOME_BUTTON_CLICKED = 'CLIENT_BUILDER_HOME_BUTTON_CLICKED', - CLIENT_STEP_SETTINGS_DIALOG_CLOSED = 'CLIENT_STEP_SETTINGS_DIALOG_CLOSED', - CLIENT_SHOW_STEP_SETTINGS_IFRAME = 'CLIENT_SHOW_STEP_SETTINGS_IFRAME', } export interface ActivepiecesClientInit { type: ActivepiecesClientEventName.CLIENT_INIT; @@ -65,14 +63,6 @@ export interface ActivepiecesBuilderHomeButtonClicked { route: string; }; } -export interface ActivepiecesClientShowStepSettingsIframe { - type: ActivepiecesClientEventName.CLIENT_SHOW_STEP_SETTINGS_IFRAME; - data: Record; -} -export interface ActivepiecesStepSettingsDialogClosed { - type: ActivepiecesClientEventName.CLIENT_STEP_SETTINGS_DIALOG_CLOSED; - data: Record; -} type IframeWithWindow = HTMLIFrameElement & { contentWindow: Window }; @@ -411,59 +401,6 @@ class ActivepiecesEmbedded { } - private _addStepSettingsIframe({stepName, flowVersionId, flowId}:{stepName:string, flowVersionId:string, flowId:string}) { - const stepSettingsIframe = this.connectToEmbed({ - iframeContainer: document.body, - initialRoute: `/embed/step-settings?${STEP_SETTINGS_QUERY_PARAMS.stepName}=${stepName}&${STEP_SETTINGS_QUERY_PARAMS.flowVersionId}=${flowVersionId}&${STEP_SETTINGS_QUERY_PARAMS.flowId}=${flowId}` - }); - stepSettingsIframe.style.cssText = ['display:none', 'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%', 'border:none'].join(';'); - return stepSettingsIframe; - } - - private _openNewWindowForStepSettings({stepName, flowVersionId, flowId, newWindow}:{stepName:string, flowVersionId:string, flowId:string, newWindow:newWindowFeatures}) { - const popup = window.open(`${this._instanceUrl}/embed`, '_blank', this._getNewWindowFeatures(newWindow)); - if (!popup) { - this._errorCreator('Failed to open popup window'); - } - this._setupInitialMessageHandler(popup, `/embed/step-settings?${STEP_SETTINGS_QUERY_PARAMS.stepName}=${stepName}&${STEP_SETTINGS_QUERY_PARAMS.flowVersionId}=${flowVersionId}&${STEP_SETTINGS_QUERY_PARAMS.flowId}=${flowId}`); - return popup; - } - - async openStepSettings({ stepName, flowVersionId, flowId, newWindow }: { - stepName: string, - flowVersionId: string, - flowId: string, - newWindow?:newWindowFeatures - }) { - this._cleanStepSettingsIframe(); - return this._addGracePeriodBeforeMethod({ - condition: () => { - return !!document.body; - }, - method: async () => { - const target = newWindow? this._openNewWindowForStepSettings({stepName, flowVersionId, flowId, newWindow}) : this._addStepSettingsIframe({stepName, flowVersionId, flowId}); - //don't check for window because (instanceof Window) is false for popups - if(!(target instanceof HTMLIFrameElement)) { - const checkClosed = setInterval(() => { - if (target.closed) { - clearInterval(checkClosed); - if(this._resolveStepSettingsDialogClosed) { - this._resolveStepSettingsDialogClosed() - } - } - }, 500); - } - return new Promise((resolve, reject) => { - this._resolveStepSettingsDialogClosed = resolve; - this._rejectStepSettingsDialogClosed = reject; - this._setStepSettingsIframeEventsListener(target); - }); - }, - errorMessage: 'unable to add step settings embedding' - }); - } - - navigate({ route }: { route: string }) { if (!this._dashboardAndBuilderIframeWindow) { this._logger().error('dashboard iframe not found'); @@ -524,8 +461,6 @@ class ActivepiecesEmbedded { } // eslint-disable-next-line @typescript-eslint/no-empty-function private _cleanConnectionIframe = () => { }; - // eslint-disable-next-line @typescript-eslint/no-empty-function - private _cleanStepSettingsIframe = () => { }; private _setConnectionIframeEventsListener(target: Window | HTMLIFrameElement ) { const connectionRelatedMessageHandler = (event: MessageEvent) => { if (event.data.type) { @@ -570,40 +505,6 @@ class ActivepiecesEmbedded { this._removeEmbedding(target); } } - - private _setStepSettingsIframeEventsListener(target: Window | HTMLIFrameElement ) { - const stepSettingsRelatedMessageHandler = (event: MessageEvent) => { - if (event.data.type) { - switch (event.data.type) { - case ActivepiecesClientEventName.CLIENT_STEP_SETTINGS_DIALOG_CLOSED: { - if (this._resolveStepSettingsDialogClosed) { - this._resolveStepSettingsDialogClosed(); - } - this._removeEmbedding(target); - window.removeEventListener('message', stepSettingsRelatedMessageHandler); - break; - } - case ActivepiecesClientEventName.CLIENT_SHOW_STEP_SETTINGS_IFRAME: { - if (target instanceof HTMLIFrameElement) { - target.style.display = 'block'; - } - break; - } - } - } - } - window.addEventListener( - 'message', - stepSettingsRelatedMessageHandler - ); - this._cleanStepSettingsIframe = () => { - window.removeEventListener('message', stepSettingsRelatedMessageHandler); - this._resolveStepSettingsDialogClosed = undefined; - this._rejectStepSettingsDialogClosed = undefined; - this._removeEmbedding(target); - } - } - private _removeTrailingSlashes(str: string) { return str.endsWith('/') ? str.slice(0, -1) : str; } diff --git a/packages/react-ui/src/app/builder/index.tsx b/packages/react-ui/src/app/builder/index.tsx index a1ec121b400..a95738d4240 100644 --- a/packages/react-ui/src/app/builder/index.tsx +++ b/packages/react-ui/src/app/builder/index.tsx @@ -21,7 +21,6 @@ import { FlowTriggerType, FlowVersionState, flowStructureUtil, - isNil, } from '@activepieces/shared'; import { cn, useElementSize } from '../../lib/utils'; @@ -43,34 +42,28 @@ const animateResizeClassName = `transition-all `; const BuilderPage = () => { const { platform } = platformHooks.useCurrentPlatform(); - const [flowVersion, rightSidebar, selectedStep, removeAllStepTestsListeners] = - useBuilderStateContext((state) => [ - state.flowVersion, - state.rightSidebar, - state.selectedStep, - state.removeAllStepTestsListeners, - ]); + const [ + flowVersion, + rightSidebar, + selectedStepName, + removeAllStepTestsListeners, + selectedStep, + ] = useBuilderStateContext((state) => [ + state.flowVersion, + state.rightSidebar, + state.selectedStep, + state.removeAllStepTestsListeners, + flowStructureUtil.getStep( + state.selectedStep ?? '', + state.flowVersion.trigger, + ), + ]); useEffect(() => { return () => { removeAllStepTestsListeners(); }; }, [removeAllStepTestsListeners]); flowCanvasHooks.useShowBuilderIsSavingWarningBeforeLeaving(); - const { memorizedSelectedStep } = useBuilderStateContext((state) => { - const flowVersion = state.flowVersion; - if (isNil(state.selectedStep) || isNil(flowVersion)) { - return { - memorizedSelectedStep: undefined, - }; - } - const step = flowStructureUtil.getStep( - state.selectedStep, - flowVersion.trigger, - ); - return { - memorizedSelectedStep: step, - }; - }); const middlePanelRef = useRef(null); const middlePanelSize = useElementSize(middlePanelRef); const [isDraggingHandle, setIsDraggingHandle] = useState(false); @@ -78,11 +71,11 @@ const BuilderPage = () => { const rightSidePanelRef = useRef(null); const { pieceModel, refetch: refetchPiece } = piecesHooks.usePieceModelForStepSettings({ - name: memorizedSelectedStep?.settings.pieceName, - version: memorizedSelectedStep?.settings.pieceVersion, + name: selectedStep?.settings.pieceName, + version: selectedStep?.settings.pieceVersion, enabled: - memorizedSelectedStep?.type === FlowActionType.PIECE || - memorizedSelectedStep?.type === FlowTriggerType.PIECE, + selectedStep?.type === FlowActionType.PIECE || + selectedStep?.type === FlowTriggerType.PIECE, getExactVersion: flowVersion.state === FlowVersionState.LOCKED, }); flowCanvasHooks.useSetSocketListener(refetchPiece); @@ -114,7 +107,7 @@ const BuilderPage = () => { canvasHeight={middlePanelRef.current?.clientHeight ?? 0} canvasWidth={middlePanelRef.current?.clientWidth ?? 0} hasCanvasBeenInitialised={hasCanvasBeenInitialised} - selectedStep={selectedStep} + selectedStep={selectedStepName} > )} @@ -157,14 +150,14 @@ const BuilderPage = () => { >
{rightSidebar === RightSideBarType.PIECE_SETTINGS && - memorizedSelectedStep && ( + selectedStep && ( diff --git a/packages/react-ui/src/app/builder/piece-properties/array-property-in-inline-item-mode.tsx b/packages/react-ui/src/app/builder/piece-properties/array-property-in-inline-item-mode.tsx index d9e553cc420..a84269edf83 100644 --- a/packages/react-ui/src/app/builder/piece-properties/array-property-in-inline-item-mode.tsx +++ b/packages/react-ui/src/app/builder/piece-properties/array-property-in-inline-item-mode.tsx @@ -1,7 +1,9 @@ -import React, { useRef } from 'react'; +import React, { useEffect, useRef } from 'react'; +import { useFormContext } from 'react-hook-form'; import { cn, GAP_SIZE_FOR_STEP_SETTINGS } from '@/lib/utils'; import { ArraySubProps } from '@activepieces/pieces-framework'; +import { isNil } from '@activepieces/shared'; import { useBuilderStateContext } from '../builder-hooks'; import { flowCanvasHooks } from '../flow-canvas/hooks'; @@ -40,7 +42,7 @@ const ArrayPiecePropertyInInlineItemMode = React.memo( setIsFocusInsideListMapperModeInput, isFocusInsideListMapperModeInput, }); - + useFixInlineArrayPropertyValue(inputName, props); return (
{props.arrayProperties ? ( @@ -74,3 +76,23 @@ const ArrayPiecePropertyInInlineItemMode = React.memo( ArrayPiecePropertyInInlineItemMode.displayName = 'ArrayPiecePropertyInInlineItemMode'; export { ArrayPiecePropertyInInlineItemMode }; + +/** + * we had a bug where the value for inline array property was not an object + * this will always insure the value is an object + */ +const useFixInlineArrayPropertyValue = ( + inputName: string, + props: ArrayPiecePropertyInInlineItemModeProps, +) => { + const form = useFormContext(); + useEffect(() => { + const value = form.getValues(inputName); + if ( + props.arrayProperties && + (isNil(value) || typeof value !== 'object' || Array.isArray(value)) + ) { + form.setValue(inputName, {}, { shouldValidate: true }); + } + }, []); +}; diff --git a/packages/react-ui/src/app/builder/piece-properties/dynamic-piece-property.tsx b/packages/react-ui/src/app/builder/piece-properties/dynamic-piece-property.tsx index c77e2050123..14b987967fb 100644 --- a/packages/react-ui/src/app/builder/piece-properties/dynamic-piece-property.tsx +++ b/packages/react-ui/src/app/builder/piece-properties/dynamic-piece-property.tsx @@ -139,7 +139,7 @@ const DynamicPropertiesImplementation = React.memo( const defaultValue = formUtils.getDefaultValueForProperties({ props: response.options, existingInput: currentValue ?? {}, - propertySettings: undefined, + propertySettings: props.propertySettings ?? {}, }); setPropertyMap(response.options); const schemaWithoutDropdownOptions = @@ -159,7 +159,6 @@ const DynamicPropertiesImplementation = React.memo( form, ); } - form.setValue( prependPrefixToPropertyName({ propertyName: props.propertyName, diff --git a/packages/react-ui/src/app/builder/state/flow-state.ts b/packages/react-ui/src/app/builder/state/flow-state.ts index dbc46584a5e..e0dc2ba1761 100644 --- a/packages/react-ui/src/app/builder/state/flow-state.ts +++ b/packages/react-ui/src/app/builder/state/flow-state.ts @@ -1,7 +1,8 @@ -import dayjs from 'dayjs'; +import { QueryClient } from '@tanstack/react-query'; import { StoreApi } from 'zustand'; import { flowsApi } from '@/features/flows/lib/flows-api'; +import { sampleDataHooks } from '@/features/flows/lib/sample-data-hooks'; import { pieceSelectorUtils } from '@/features/pieces/lib/piece-selector-utils'; import { PromiseQueue } from '@/lib/promise-queue'; import { @@ -21,6 +22,8 @@ import { StepSettings, FlowTriggerType, debounce, + FlowAction, + FlowTrigger, } from '@activepieces/shared'; import { BuilderState } from '../builder-hooks'; @@ -73,7 +76,9 @@ export type FlowState = { export type FlowInitialState = Pick< FlowState, 'flow' | 'flowVersion' | 'outputSampleData' | 'inputSampleData' ->; +> & { + queryClient: QueryClient; +}; export const createFlowState = ( initialState: FlowInitialState, @@ -167,25 +172,39 @@ export const createFlowState = ( console.warn('Cannot apply operation while readonly'); return state; } - let newFlowVersion = flowOperations.apply(state.flowVersion, operation); - + const newFlowVersion = flowOperations.apply( + state.flowVersion, + operation, + ); state.operationListeners.forEach((listener) => { listener(state.flowVersion, operation); }); set({ saving: true }); const updateRequest = async () => { try { - const updatedFlowVersion = await flowsApi.update( + const { version: serverFlowVersion } = await flowsApi.update( state.flow.id, operation, true, ); + if (operation.type === FlowOperationType.SAVE_SAMPLE_DATA) { + sampleDataHooks.invalidateSampleData( + serverFlowVersion.id, + initialState.queryClient, + ); + } set((state) => { + const updatedFlowVersionWithUpdatedSampleData = + handleUpdatingSampleDataForStepLocallyAfterServerUpdate({ + operation, + localFlowVersion: state.flowVersion, + updatedFlowVersion: serverFlowVersion, + }); return { flowVersion: { - ...state.flowVersion, - id: updatedFlowVersion.version.id, - state: updatedFlowVersion.version.state, + ...updatedFlowVersionWithUpdatedSampleData, + id: serverFlowVersion.id, + state: serverFlowVersion.state, }, saving: flowUpdatesQueue.size() !== 0, }; @@ -200,32 +219,6 @@ export const createFlowState = ( switch (operation.type) { case FlowOperationType.SAVE_SAMPLE_DATA: { flowUpdatesQueue.add(updateRequest); - const step = flowStructureUtil.getStep( - operation.request.stepName, - newFlowVersion.trigger, - ); - if (isNil(step)) { - console.error(`Step ${operation.request.stepName} not found`); - return state; - } - step.settings.sampleData = { - ...step.settings.sampleData, - lastTestDate: dayjs().toISOString(), - }; - if ( - step.type === FlowTriggerType.PIECE || - step.type === FlowTriggerType.EMPTY - ) { - newFlowVersion = flowOperations.apply(newFlowVersion, { - type: FlowOperationType.UPDATE_TRIGGER, - request: step, - }); - } else { - newFlowVersion = flowOperations.apply(newFlowVersion, { - type: FlowOperationType.UPDATE_ACTION, - request: step, - }); - } break; } @@ -410,3 +403,48 @@ export const createFlowState = ( }, }; }; + +const handleUpdatingSampleDataForStepLocallyAfterServerUpdate = ({ + operation, + localFlowVersion, + updatedFlowVersion, +}: { + operation: FlowOperationRequest; + localFlowVersion: FlowVersion; + updatedFlowVersion: FlowVersion; +}) => { + if (operation.type !== FlowOperationType.SAVE_SAMPLE_DATA) { + return localFlowVersion; + } + const localStep = flowStructureUtil.getStep( + operation.request.stepName, + updatedFlowVersion.trigger, + ); + const updatedStep = flowStructureUtil.getStep( + operation.request.stepName, + updatedFlowVersion.trigger, + ); + if (isNil(localStep) || isNil(updatedStep)) { + console.error(`Step ${operation.request.stepName} not found`); + return localFlowVersion; + } + const clonedLocalStepWithUpdatedSampleDataProperty: FlowAction | FlowTrigger = + JSON.parse(JSON.stringify(localStep)); + clonedLocalStepWithUpdatedSampleDataProperty.settings.sampleData = + updatedStep.settings.sampleData; + if ( + flowStructureUtil.isAction( + clonedLocalStepWithUpdatedSampleDataProperty.type, + ) + ) { + return flowOperations.apply(localFlowVersion, { + type: FlowOperationType.UPDATE_ACTION, + request: clonedLocalStepWithUpdatedSampleDataProperty as FlowAction, + }); + } else { + return flowOperations.apply(localFlowVersion, { + type: FlowOperationType.UPDATE_TRIGGER, + request: clonedLocalStepWithUpdatedSampleDataProperty as FlowTrigger, + }); + } +}; diff --git a/packages/react-ui/src/app/builder/state/run-state.ts b/packages/react-ui/src/app/builder/state/run-state.ts index c7f74a6f808..4435e8c7d78 100644 --- a/packages/react-ui/src/app/builder/state/run-state.ts +++ b/packages/react-ui/src/app/builder/state/run-state.ts @@ -1,10 +1,8 @@ -import { QueryClient } from '@tanstack/react-query'; import { Socket } from 'socket.io-client'; import { StoreApi } from 'zustand'; import { internalErrorToast } from '@/components/ui/sonner'; import { flowRunUtils } from '@/features/flow-runs/lib/flow-run-utils'; -import { sampleDataHooks } from '@/features/flows/lib/sample-data-hooks'; import { FlowAction, FlowActionType, @@ -61,7 +59,6 @@ type RunStateInitialState = { run: FlowRun | null; flowVersion: FlowVersion; socket: Socket; - queryClient: QueryClient; }; type StepTestListener = { onProgress: (response: StepRunResponse) => void; @@ -276,10 +273,6 @@ export const createRunState = ( }, }); } - sampleDataHooks.invalidateSampleData( - flowVersion.id, - initialState.queryClient, - ); }, setErrorLogs: (stepName: string, error: string | null) => { set((state) => { diff --git a/packages/react-ui/src/app/builder/step-settings/index.tsx b/packages/react-ui/src/app/builder/step-settings/index.tsx index c545a66dc35..283bc460715 100644 --- a/packages/react-ui/src/app/builder/step-settings/index.tsx +++ b/packages/react-ui/src/app/builder/step-settings/index.tsx @@ -2,7 +2,6 @@ import { typeboxResolver } from '@hookform/resolvers/typebox'; import deepEqual from 'deep-equal'; import { useEffect, useRef, useState } from 'react'; import { useForm } from 'react-hook-form'; -import { useLocation } from 'react-router-dom'; import { useBuilderStateContext } from '@/app/builder/builder-hooks'; import { Form } from '@/components/ui/form'; @@ -15,7 +14,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'; import { pieceSelectorUtils } from '@/features/pieces/lib/piece-selector-utils'; import { stepsHooks } from '@/features/pieces/lib/steps-hooks'; import { projectCollectionUtils } from '@/hooks/project-collection'; -import { cn, GAP_SIZE_FOR_STEP_SETTINGS, parentWindow } from '@/lib/utils'; +import { cn, GAP_SIZE_FOR_STEP_SETTINGS } from '@/lib/utils'; import { FlowAction, FlowActionType, @@ -24,7 +23,6 @@ import { FlowTriggerType, isNil, } from '@activepieces/shared'; -import { ActivepiecesClientEventName } from 'ee-embed-sdk'; import { formUtils } from '../../../features/pieces/lib/form-utils'; import { ActionErrorHandlingForm } from '../piece-properties/action-error-handling'; @@ -43,9 +41,7 @@ import { RouterSettings } from './router-settings'; import { useStepSettingsContext } from './step-settings-context'; const StepSettingsContainer = () => { - const location = useLocation(); - const { selectedStep, pieceModel, formSchema, hideTestStep } = - useStepSettingsContext(); + const { selectedStep, pieceModel, formSchema } = useStepSettingsContext(); const { project } = projectCollectionUtils.useCurrentProject(); const [ readonly, @@ -77,6 +73,10 @@ const StepSettingsContainer = () => { disabled: readonly, reValidateMode: 'onChange', defaultValues: selectedStep, + resetOptions: { + keepDefaultValues: false, + keepDirtyValues: true, + }, resolver: async (values, context, options) => { const result = await typeboxResolver(formSchema)( values, @@ -131,9 +131,8 @@ const StepSettingsContainer = () => { pieceName: modifiedStep.settings.pieceName, triggerName: modifiedStep.settings.triggerName ?? '', }); - const showGenerateSampleData = !readonly && !isManualTrigger && !hideTestStep; - const showStepInputOutFromRun = - !isNil(run) && !isManualTrigger && !hideTestStep; + const showGenerateSampleData = !readonly && !isManualTrigger; + const showStepInputOutFromRun = !isNil(run) && !isManualTrigger; const [isEditingStepOrBranchName, setIsEditingStepOrBranchName] = useState(false); @@ -153,19 +152,6 @@ const StepSettingsContainer = () => { const { height, setHeight } = useResizableVerticalPanelsContext(); - const handleClose = () => { - if (location.pathname.includes('/embed/step-settings')) { - parentWindow.postMessage( - { - type: ActivepiecesClientEventName.CLIENT_STEP_SETTINGS_DIALOG_CLOSED, - data: {}, - }, - '*', - ); - } - exitStepSettings(); - }; - return (
{ className="w-full h-full" >
- + exitStepSettings()}> { diff --git a/packages/react-ui/src/app/builder/step-settings/step-settings-context.tsx b/packages/react-ui/src/app/builder/step-settings/step-settings-context.tsx index 6e589b85730..dc9ae4e6f84 100644 --- a/packages/react-ui/src/app/builder/step-settings/step-settings-context.tsx +++ b/packages/react-ui/src/app/builder/step-settings/step-settings-context.tsx @@ -49,14 +49,12 @@ export type StepSettingsContextState = { propertyName: string, form: UseFormReturn, ) => void; - hideTestStep?: boolean; }; export type StepSettingsProviderProps = { selectedStep: FlowAction | FlowTrigger; pieceModel: PieceMetadataModel | undefined; children: ReactNode; - hideTestStep?: boolean; }; const StepSettingsContext = createContext( @@ -67,7 +65,6 @@ export const StepSettingsProvider = ({ selectedStep, pieceModel, children, - hideTestStep = false, }: StepSettingsProviderProps) => { const [formSchema, setFormSchema] = useState>( Type.Object(Type.Unknown()), @@ -125,7 +122,6 @@ export const StepSettingsProvider = ({ formSchema, updateFormSchema, updatePropertySettingsSchema, - hideTestStep, }} > {children} diff --git a/packages/react-ui/src/app/guards/index.tsx b/packages/react-ui/src/app/guards/index.tsx index 02187c01b2b..0c5929dd929 100644 --- a/packages/react-ui/src/app/guards/index.tsx +++ b/packages/react-ui/src/app/guards/index.tsx @@ -34,7 +34,6 @@ import AuthenticatePage from '../routes/authenticate'; import { ChangePasswordPage } from '../routes/change-password'; import { AppConnectionsPage } from '../routes/connections'; import { EmbeddedConnectionDialog } from '../routes/embed/embedded-connection-dialog'; -import { EmbeddedStepSettingsDialog } from '../routes/embed/embedded-step-settings-dialog'; import { FlowsPage } from '../routes/flows'; import { FlowBuilderPage } from '../routes/flows/id'; import { ResetPasswordPage } from '../routes/forget-password'; @@ -92,10 +91,6 @@ const routes = [ path: '/embed/connections', element: , }, - { - path: '/embed/step-settings', - element: , - }, { path: '/authenticate', element: , diff --git a/packages/react-ui/src/app/routes/embed/embedded-step-settings-dialog.tsx b/packages/react-ui/src/app/routes/embed/embedded-step-settings-dialog.tsx deleted file mode 100644 index c24d9118dc9..00000000000 --- a/packages/react-ui/src/app/routes/embed/embedded-step-settings-dialog.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import { useEffect, useState } from 'react'; - -import { memoryRouter } from '@/app/guards'; -import { Dialog, DialogContent } from '@/components/ui/dialog'; -import { LoadingSpinner } from '@/components/ui/spinner'; -import { flowsApi } from '@/features/flows/lib/flows-api'; -import { cn, parentWindow } from '@/lib/utils'; -import { - FlowAction, - FlowTrigger, - flowStructureUtil, -} from '@activepieces/shared'; -import { - ActivepiecesClientEventName, - ActivepiecesClientShowStepSettingsIframe, - ActivepiecesStepSettingsDialogClosed, - STEP_SETTINGS_QUERY_PARAMS, -} from 'ee-embed-sdk'; - -import { piecesHooks } from '../../../features/pieces/lib/pieces-hooks'; -import { BuilderStateProvider } from '../../builder/state/builder-state-provider'; -import { StepSettingsContainer } from '../../builder/step-settings'; -import { StepSettingsProvider } from '../../builder/step-settings/step-settings-context'; - -const extractIdFromQueryParams = () => { - const stepName = new URLSearchParams(memoryRouter.state.location.search).get( - STEP_SETTINGS_QUERY_PARAMS.stepName, - ); - return stepName; -}; - -export const EmbeddedStepSettingsDialog = () => { - const stepName = extractIdFromQueryParams(); - const queryParams = new URLSearchParams(memoryRouter.state.location.search); - const flowVersionId = queryParams.get( - STEP_SETTINGS_QUERY_PARAMS.flowVersionId, - ); - const flowId = queryParams.get(STEP_SETTINGS_QUERY_PARAMS.flowId); - const dialogKey = `${stepName}-${flowVersionId}-${flowId}-${Date.now()}`; - - return ( - - ); -}; - -type EmbeddedStepSettingsDialogContentProps = { - stepName: string | null; - flowVersionId: string | null; - flowId: string | null; -}; - -const EmbeddedStepSettingsDialogContent = ({ - stepName, - flowVersionId, - flowId, -}: EmbeddedStepSettingsDialogContentProps) => { - const [isDialogOpen, setIsDialogOpen] = useState(true); - - const hideStepSettingsIframe = () => { - setIsDialogOpen(false); - postMessageToParent({ - type: ActivepiecesClientEventName.CLIENT_STEP_SETTINGS_DIALOG_CLOSED, - data: {}, - }); - }; - - const postMessageToParent = (event: ActivepiecesStepSettingsDialogClosed) => { - parentWindow.postMessage(event, '*'); - }; - - const { - data: flow, - isLoading: isLoadingFlow, - isError: isFlowError, - } = useQuery({ - queryKey: ['flow', flowId, flowVersionId], - queryFn: () => flowsApi.get(flowId!, { versionId: flowVersionId! }), - enabled: !!flowId && !!flowVersionId, - }); - - const flowVersion = flow?.version; - const selectedStep = - flowVersion && stepName - ? flowStructureUtil.getStep(stepName, flowVersion.trigger) - : undefined; - - const { pieceModel, isLoading: isLoadingPiece } = - piecesHooks.usePieceModelForStepSettings({ - name: selectedStep?.settings?.pieceName, - version: selectedStep?.settings?.pieceVersion, - enabled: !!selectedStep && 'pieceName' in (selectedStep.settings || {}), - getExactVersion: false, - }); - - useEffect(() => { - const showStepSettingsIframeEvent: ActivepiecesClientShowStepSettingsIframe = - { - type: ActivepiecesClientEventName.CLIENT_SHOW_STEP_SETTINGS_IFRAME, - data: {}, - }; - parentWindow.postMessage(showStepSettingsIframeEvent, '*'); - document.body.style.background = 'transparent'; - }, []); - - if (isFlowError) { - hideStepSettingsIframe(); - return null; - } - - const isLoading = isLoadingFlow || isLoadingPiece; - - return ( - { - setIsDialogOpen(open); - if (!open) { - hideStepSettingsIframe(); - } - }} - > - - {isLoading && ( -
- -
- )} - - {!isLoading && selectedStep && flow && ( - - )} - - - ); -}; - -type EmbeddedStepSettingsFormProps = { - selectedStep: FlowAction | FlowTrigger; - pieceModel: any; - flow: any; -}; - -const EmbeddedStepSettingsForm = ({ - selectedStep, - pieceModel, - flow, -}: EmbeddedStepSettingsFormProps) => { - return ( - - - - - - ); -}; diff --git a/packages/react-ui/src/app/routes/flows/id/index.tsx b/packages/react-ui/src/app/routes/flows/id/index.tsx index fb1861b4351..be8e9ca0ab1 100644 --- a/packages/react-ui/src/app/routes/flows/id/index.tsx +++ b/packages/react-ui/src/app/routes/flows/id/index.tsx @@ -34,7 +34,6 @@ const FlowBuilderPage = () => { const { data: sampleDataInput, isLoading: isSampleDataInputLoading } = sampleDataHooks.useSampleDataInputForFlow(flow?.version, flow?.projectId); - if (isLoading || isSampleDataLoading || isSampleDataInputLoading) { return (
diff --git a/packages/server/api/src/app/app-connection/app-connection.controller.ts b/packages/server/api/src/app/app-connection/app-connection.controller.ts index bb81e06cbd5..8b80dc5b0e4 100644 --- a/packages/server/api/src/app/app-connection/app-connection.controller.ts +++ b/packages/server/api/src/app/app-connection/app-connection.controller.ts @@ -189,8 +189,7 @@ const ReplaceAppConnectionsRequest = { [PrincipalType.USER, PrincipalType.SERVICE], Permission.WRITE_APP_CONNECTION, { - type: ProjectResourceType.TABLE, - tableName: AppConnectionEntity, + type: ProjectResourceType.BODY, }, ), },