mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-22 19:41:53 +03:00
9024 workflow test serverless function follow up (#9066)
- Fix Tablist style - Fix dropdown style (wrong grey background) - Update dropdown variable when no outputSchema is available https://github.com/user-attachments/assets/56698fe8-8dd3-404a-b2b2-f1eca6f5fa28
This commit is contained in:
parent
0692bba710
commit
5dfcc413cf
@ -10,14 +10,22 @@ describe('getFunctionOutputSchema', () => {
|
||||
e: [1, 2, 3],
|
||||
};
|
||||
const expectedOutputSchema = {
|
||||
a: { isLeaf: true, type: 'unknown', value: null },
|
||||
b: { isLeaf: true, type: 'string', value: 'b' },
|
||||
a: { isLeaf: true, type: 'unknown', value: null, icon: 'IconVariable' },
|
||||
b: { isLeaf: true, type: 'string', value: 'b', icon: 'IconVariable' },
|
||||
c: {
|
||||
isLeaf: false,
|
||||
value: { cc: { isLeaf: true, type: 'number', value: 1 } },
|
||||
icon: 'IconVariable',
|
||||
value: {
|
||||
cc: { isLeaf: true, type: 'number', value: 1, icon: 'IconVariable' },
|
||||
},
|
||||
},
|
||||
d: { isLeaf: true, type: 'boolean', value: true, icon: 'IconVariable' },
|
||||
e: {
|
||||
isLeaf: true,
|
||||
type: 'array',
|
||||
value: [1, 2, 3],
|
||||
icon: 'IconVariable',
|
||||
},
|
||||
d: { isLeaf: true, type: 'boolean', value: true },
|
||||
e: { isLeaf: true, type: 'array', value: [1, 2, 3] },
|
||||
};
|
||||
expect(getFunctionOutputSchema(testResult)).toEqual(expectedOutputSchema);
|
||||
});
|
||||
|
@ -32,6 +32,7 @@ export const getFunctionOutputSchema = (testResult: object) => {
|
||||
if (isObject(value) && !Array.isArray(value)) {
|
||||
acc[key] = {
|
||||
isLeaf: false,
|
||||
icon: 'IconVariable',
|
||||
value: getFunctionOutputSchema(value),
|
||||
};
|
||||
} else {
|
||||
@ -39,6 +40,7 @@ export const getFunctionOutputSchema = (testResult: object) => {
|
||||
isLeaf: true,
|
||||
value,
|
||||
type: getValueType(value),
|
||||
icon: 'IconVariable',
|
||||
};
|
||||
}
|
||||
return acc;
|
||||
|
@ -8,9 +8,15 @@ import {
|
||||
UpdateOneServerlessFunctionMutationVariables,
|
||||
UpdateServerlessFunctionInput,
|
||||
} from '~/generated-metadata/graphql';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FIND_ONE_SERVERLESS_FUNCTION } from '@/settings/serverless-functions/graphql/queries/findOneServerlessFunction';
|
||||
import { sleep } from '~/utils/sleep';
|
||||
|
||||
export const useUpdateOneServerlessFunction = () => {
|
||||
export const useUpdateOneServerlessFunction = (
|
||||
serverlessFunctionId: string,
|
||||
) => {
|
||||
const apolloMetadataClient = useApolloMetadataClient();
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const [mutate] = useMutation<
|
||||
UpdateOneServerlessFunctionMutation,
|
||||
UpdateOneServerlessFunctionMutationVariables
|
||||
@ -19,18 +25,48 @@ export const useUpdateOneServerlessFunction = () => {
|
||||
});
|
||||
|
||||
const updateOneServerlessFunction = async (
|
||||
input: UpdateServerlessFunctionInput,
|
||||
input: Omit<UpdateServerlessFunctionInput, 'id'>,
|
||||
) => {
|
||||
return await mutate({
|
||||
const result = await mutate({
|
||||
variables: {
|
||||
input,
|
||||
input: { ...input, id: serverlessFunctionId },
|
||||
},
|
||||
awaitRefetchQueries: true,
|
||||
refetchQueries: [
|
||||
getOperationName(FIND_ONE_SERVERLESS_FUNCTION_SOURCE_CODE) ?? '',
|
||||
],
|
||||
});
|
||||
setIsReady(false);
|
||||
return result;
|
||||
};
|
||||
|
||||
return { updateOneServerlessFunction };
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const pollFunctionStatus = async () => {
|
||||
while (isMounted && !isReady) {
|
||||
const { data } = await apolloMetadataClient.query({
|
||||
query: FIND_ONE_SERVERLESS_FUNCTION,
|
||||
variables: { input: { id: serverlessFunctionId } },
|
||||
fetchPolicy: 'network-only', // Always fetch fresh data
|
||||
});
|
||||
|
||||
const serverlessFunction = data?.findOneServerlessFunction;
|
||||
|
||||
if (serverlessFunction?.syncStatus === 'READY') {
|
||||
setIsReady(true);
|
||||
break;
|
||||
}
|
||||
await sleep(500);
|
||||
}
|
||||
};
|
||||
|
||||
pollFunctionStatus();
|
||||
|
||||
return () => {
|
||||
isMounted = false; // Cleanup when the component unmounts
|
||||
};
|
||||
}, [serverlessFunctionId, apolloMetadataClient, isReady]);
|
||||
|
||||
return { updateOneServerlessFunction, isReady };
|
||||
};
|
||||
|
@ -4,6 +4,7 @@ import styled from '@emotion/styled';
|
||||
import { ReactElement } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { IconComponent, Pill } from 'twenty-ui';
|
||||
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
|
||||
|
||||
type TabProps = {
|
||||
id: string;
|
||||
@ -93,7 +94,7 @@ export const Tab = ({
|
||||
<StyledHover>
|
||||
{logo && <StyledLogo src={logo} alt={`${title} logo`} />}
|
||||
{Icon && <Icon size={theme.icon.size.md} />}
|
||||
{title}
|
||||
<EllipsisDisplay>{title}</EllipsisDisplay>
|
||||
{pill && typeof pill === 'string' ? <Pill label={pill} /> : pill}
|
||||
</StyledHover>
|
||||
</StyledTab>
|
||||
|
@ -37,6 +37,10 @@ const StyledTabsContainer = styled.div`
|
||||
height: 40px;
|
||||
user-select: none;
|
||||
margin-bottom: -1px;
|
||||
overflow-y: scroll;
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
@ -52,10 +56,10 @@ export const TabList = ({
|
||||
}: TabListProps) => {
|
||||
const visibleTabs = tabs.filter((tab) => !tab.hide);
|
||||
|
||||
const initialActiveTabId = visibleTabs[0]?.id || '';
|
||||
|
||||
const { activeTabId, setActiveTabId } = useTabList(tabListInstanceId);
|
||||
|
||||
const initialActiveTabId = activeTabId || visibleTabs[0]?.id || '';
|
||||
|
||||
useEffect(() => {
|
||||
setActiveTabId(initialActiveTabId);
|
||||
}, [initialActiveTabId, setActiveTabId]);
|
||||
|
@ -13,11 +13,11 @@ const wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
);
|
||||
|
||||
describe('useTriggerNodeSelection', () => {
|
||||
const mockUpdateNode = jest.fn();
|
||||
const mockSetNodes = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
(useReactFlow as jest.Mock).mockReturnValue({
|
||||
updateNode: mockUpdateNode,
|
||||
setNodes: mockSetNodes,
|
||||
});
|
||||
});
|
||||
|
||||
@ -51,7 +51,6 @@ describe('useTriggerNodeSelection', () => {
|
||||
result.current.setWorkflowDiagramTriggerNodeSelection(mockNodeId);
|
||||
});
|
||||
|
||||
expect(mockUpdateNode).toHaveBeenCalledWith(mockNodeId, { selected: true });
|
||||
expect(result.current.workflowDiagramTriggerNodeSelection).toBeUndefined();
|
||||
});
|
||||
|
||||
@ -61,6 +60,6 @@ describe('useTriggerNodeSelection', () => {
|
||||
});
|
||||
|
||||
// Ensure updateNode is not called when state is undefined
|
||||
expect(mockUpdateNode).not.toHaveBeenCalled();
|
||||
expect(mockSetNodes).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
|
||||
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
|
||||
import { workflowCreateStepFromParentStepIdState } from '@/workflow/states/workflowCreateStepFromParentStepIdState';
|
||||
import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
|
||||
import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
|
||||
import {
|
||||
WorkflowStepType,
|
||||
@ -25,10 +24,6 @@ export const useCreateStep = ({
|
||||
workflowCreateStepFromParentStepIdState,
|
||||
);
|
||||
|
||||
const setWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
|
||||
workflowDiagramTriggerNodeSelectionState,
|
||||
);
|
||||
|
||||
const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
|
||||
|
||||
const createStep = async (newStepType: WorkflowStepType) => {
|
||||
@ -51,15 +46,6 @@ export const useCreateStep = ({
|
||||
|
||||
setWorkflowSelectedNode(createdStep.id);
|
||||
openRightDrawer(RightDrawerPages.WorkflowStepEdit);
|
||||
|
||||
/**
|
||||
* After the step has been created, select it.
|
||||
* As the `insertNodeAndSave` function mutates the cached workflow before resolving,
|
||||
* we are sure that the new node will have been created at this stage.
|
||||
*
|
||||
* Selecting the node will cause a right drawer to open in order to edit the step.
|
||||
*/
|
||||
setWorkflowDiagramTriggerNodeSelection(createdStep.id);
|
||||
};
|
||||
|
||||
return {
|
||||
|
@ -21,9 +21,12 @@ export const useTriggerNodeSelection = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
reactflow.updateNode(workflowDiagramTriggerNodeSelection, {
|
||||
selected: true,
|
||||
});
|
||||
reactflow.setNodes((nodes) =>
|
||||
nodes.map((node) => ({
|
||||
...node,
|
||||
selected: workflowDiagramTriggerNodeSelection === node.id,
|
||||
})),
|
||||
);
|
||||
|
||||
setWorkflowDiagramTriggerNodeSelection(undefined);
|
||||
}, [
|
||||
|
@ -28,7 +28,8 @@ const StyledDropdownVariableButtonContainer = styled(
|
||||
`;
|
||||
|
||||
const StyledDropdownComponentsContainer = styled(DropdownMenuItemsContainer)`
|
||||
background-color: ${({ theme }) => theme.background.transparent.light};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const SearchVariablesDropdown = ({
|
||||
|
@ -2,6 +2,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
|
||||
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
|
||||
import {
|
||||
BaseOutputSchema,
|
||||
LinkOutputSchema,
|
||||
OutputSchema,
|
||||
StepOutputSchema,
|
||||
} from '@/workflow/search-variables/types/StepOutputSchema';
|
||||
@ -13,10 +14,17 @@ import { useState } from 'react';
|
||||
import {
|
||||
HorizontalSeparator,
|
||||
IconChevronLeft,
|
||||
isDefined,
|
||||
MenuItemSelect,
|
||||
OverflowingTextWithTooltip,
|
||||
useIcons,
|
||||
} from 'twenty-ui';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { workflowSelectedNodeState } from '@/workflow/states/workflowSelectedNodeState';
|
||||
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
|
||||
import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
|
||||
import { isLinkOutputSchema } from '@/workflow/search-variables/utils/isLinkOutputSchema';
|
||||
import { workflowDiagramTriggerNodeSelectionState } from '@/workflow/states/workflowDiagramTriggerNodeSelectionState';
|
||||
|
||||
type SearchVariablesDropdownFieldItemsProps = {
|
||||
step: StepOutputSchema;
|
||||
@ -33,6 +41,13 @@ export const SearchVariablesDropdownFieldItems = ({
|
||||
const [currentPath, setCurrentPath] = useState<string[]>([]);
|
||||
const [searchInputValue, setSearchInputValue] = useState('');
|
||||
const { getIcon } = useIcons();
|
||||
const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
|
||||
const { setActiveTabId } = useTabList(
|
||||
WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,
|
||||
);
|
||||
const setWorkflowDiagramTriggerNodeSelection = useSetRecoilState(
|
||||
workflowDiagramTriggerNodeSelectionState,
|
||||
);
|
||||
|
||||
const getCurrentSubStep = (): OutputSchema => {
|
||||
let currentSubStep = step.outputSchema;
|
||||
@ -51,7 +66,9 @@ export const SearchVariablesDropdownFieldItems = ({
|
||||
const getDisplayedSubStepFields = () => {
|
||||
const currentSubStep = getCurrentSubStep();
|
||||
|
||||
if (isRecordOutputSchema(currentSubStep)) {
|
||||
if (isLinkOutputSchema(currentSubStep)) {
|
||||
return { link: currentSubStep.link };
|
||||
} else if (isRecordOutputSchema(currentSubStep)) {
|
||||
return currentSubStep.fields;
|
||||
} else if (isBaseOutputSchema(currentSubStep)) {
|
||||
return currentSubStep;
|
||||
@ -60,6 +77,7 @@ export const SearchVariablesDropdownFieldItems = ({
|
||||
|
||||
const handleSelectField = (key: string) => {
|
||||
const currentSubStep = getCurrentSubStep();
|
||||
|
||||
const handleSelectBaseOutputSchema = (
|
||||
baseOutputSchema: BaseOutputSchema,
|
||||
) => {
|
||||
@ -71,7 +89,19 @@ export const SearchVariablesDropdownFieldItems = ({
|
||||
}
|
||||
};
|
||||
|
||||
if (isRecordOutputSchema(currentSubStep)) {
|
||||
const handleSelectLinkOutputSchema = (
|
||||
linkOutputSchema: LinkOutputSchema,
|
||||
) => {
|
||||
setWorkflowSelectedNode(step.id);
|
||||
setWorkflowDiagramTriggerNodeSelection(step.id);
|
||||
if (isDefined(linkOutputSchema.link.tab)) {
|
||||
setActiveTabId(linkOutputSchema.link.tab);
|
||||
}
|
||||
};
|
||||
|
||||
if (isLinkOutputSchema(currentSubStep)) {
|
||||
handleSelectLinkOutputSchema(currentSubStep);
|
||||
} else if (isRecordOutputSchema(currentSubStep)) {
|
||||
handleSelectBaseOutputSchema(currentSubStep.fields);
|
||||
} else if (isBaseOutputSchema(currentSubStep)) {
|
||||
handleSelectBaseOutputSchema(currentSubStep);
|
||||
|
@ -60,6 +60,10 @@ export const SearchVariablesDropdownObjectItems = ({
|
||||
const getDisplayedSubStepObject = () => {
|
||||
const currentSubStep = getCurrentSubStep();
|
||||
|
||||
if (!isRecordOutputSchema(currentSubStep)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return currentSubStep.object;
|
||||
};
|
||||
|
||||
|
@ -10,6 +10,7 @@ import {
|
||||
MenuItem,
|
||||
MenuItemSelect,
|
||||
OverflowingTextWithTooltip,
|
||||
useIcons,
|
||||
} from 'twenty-ui';
|
||||
|
||||
type SearchVariablesDropdownWorkflowStepItemsProps = {
|
||||
@ -24,6 +25,7 @@ export const SearchVariablesDropdownWorkflowStepItems = ({
|
||||
onSelect,
|
||||
}: SearchVariablesDropdownWorkflowStepItemsProps) => {
|
||||
const theme = useTheme();
|
||||
const { getIcon } = useIcons();
|
||||
const [searchInputValue, setSearchInputValue] = useState('');
|
||||
|
||||
const { closeDropdown } = useDropdown(dropdownId);
|
||||
@ -60,7 +62,7 @@ export const SearchVariablesDropdownWorkflowStepItems = ({
|
||||
hovered={false}
|
||||
onClick={() => onSelect(item.id)}
|
||||
text={item.name}
|
||||
LeftIcon={undefined}
|
||||
LeftIcon={item.icon ? getIcon(item.icon) : undefined}
|
||||
hasSubMenu
|
||||
/>
|
||||
))
|
||||
|
@ -82,6 +82,7 @@ export const useAvailableVariablesInWorkflowStep = ({
|
||||
id: previousStep.id,
|
||||
name: previousStep.name,
|
||||
outputSchema: filteredOutputSchema,
|
||||
...(previousStep.type === 'CODE' ? { icon: 'IconCode' } : {}),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { InputSchemaPropertyType } from '@/workflow/types/InputSchema';
|
||||
|
||||
export type Leaf = {
|
||||
type Leaf = {
|
||||
isLeaf: true;
|
||||
type?: InputSchemaPropertyType;
|
||||
icon?: string;
|
||||
@ -8,13 +8,20 @@ export type Leaf = {
|
||||
value: any;
|
||||
};
|
||||
|
||||
export type Node = {
|
||||
type Node = {
|
||||
isLeaf: false;
|
||||
icon?: string;
|
||||
label?: string;
|
||||
value: OutputSchema;
|
||||
};
|
||||
|
||||
type Link = {
|
||||
isLeaf: true;
|
||||
tab?: string;
|
||||
icon?: string;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export type BaseOutputSchema = Record<string, Leaf | Node>;
|
||||
|
||||
export type RecordOutputSchema = {
|
||||
@ -23,10 +30,19 @@ export type RecordOutputSchema = {
|
||||
_outputSchemaType: 'RECORD';
|
||||
};
|
||||
|
||||
export type OutputSchema = BaseOutputSchema | RecordOutputSchema;
|
||||
export type LinkOutputSchema = {
|
||||
link: Link;
|
||||
_outputSchemaType: 'LINK';
|
||||
};
|
||||
|
||||
export type OutputSchema =
|
||||
| BaseOutputSchema
|
||||
| RecordOutputSchema
|
||||
| LinkOutputSchema;
|
||||
|
||||
export type StepOutputSchema = {
|
||||
id: string;
|
||||
name: string;
|
||||
icon?: string;
|
||||
outputSchema: OutputSchema;
|
||||
};
|
||||
|
@ -6,6 +6,7 @@ import {
|
||||
import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema';
|
||||
import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema';
|
||||
import { isDefined } from 'twenty-ui';
|
||||
import { isLinkOutputSchema } from '@/workflow/search-variables/utils/isLinkOutputSchema';
|
||||
|
||||
const isValidRecordOutputSchema = (
|
||||
outputSchema: RecordOutputSchema,
|
||||
@ -105,7 +106,9 @@ export const filterOutputSchema = (
|
||||
return outputSchema;
|
||||
}
|
||||
|
||||
if (isRecordOutputSchema(outputSchema)) {
|
||||
if (isLinkOutputSchema(outputSchema)) {
|
||||
return outputSchema;
|
||||
} else if (isRecordOutputSchema(outputSchema)) {
|
||||
return filterRecordOutputSchema(outputSchema, objectNameSingularToSelect);
|
||||
} else if (isBaseOutputSchema(outputSchema)) {
|
||||
return filterBaseOutputSchema(outputSchema, objectNameSingularToSelect);
|
||||
|
@ -0,0 +1,10 @@
|
||||
import {
|
||||
OutputSchema,
|
||||
LinkOutputSchema,
|
||||
} from '@/workflow/search-variables/types/StepOutputSchema';
|
||||
|
||||
export const isLinkOutputSchema = (
|
||||
outputSchema: OutputSchema,
|
||||
): outputSchema is LinkOutputSchema => {
|
||||
return outputSchema._outputSchemaType === 'LINK';
|
||||
};
|
@ -15,7 +15,7 @@ import { editor } from 'monaco-editor';
|
||||
import { AutoTypings } from 'monaco-editor-auto-typings';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { CodeEditor, IconCode, isDefined, IconPlayerPlay } from 'twenty-ui';
|
||||
import { CodeEditor, IconCode, IconPlayerPlay, isDefined } from 'twenty-ui';
|
||||
import { useDebouncedCallback } from 'use-debounce';
|
||||
import { WorkflowStepBody } from '@/workflow/components/WorkflowStepBody';
|
||||
import { TabList } from '@/ui/layout/tab/components/TabList';
|
||||
@ -32,6 +32,7 @@ import { getFunctionOutputSchema } from '@/serverless-functions/utils/getFunctio
|
||||
import { getFunctionInputFromSourceCode } from '@/serverless-functions/utils/getFunctionInputFromSourceCode';
|
||||
import { mergeDefaultFunctionInputAndFunctionInput } from '@/serverless-functions/utils/mergeDefaultFunctionInputAndFunctionInput';
|
||||
import { WorkflowEditActionFormServerlessFunctionFields } from '@/workflow/workflow-actions/components/WorkflowEditActionFormServerlessFunctionFields';
|
||||
import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
@ -66,17 +67,19 @@ type ServerlessFunctionInputFormData = {
|
||||
[field: string]: string | ServerlessFunctionInputFormData;
|
||||
};
|
||||
|
||||
const TAB_LIST_COMPONENT_ID = 'serverless-function-code-step';
|
||||
|
||||
export const WorkflowEditActionFormServerlessFunction = ({
|
||||
action,
|
||||
actionOptions,
|
||||
}: WorkflowEditActionFormServerlessFunctionProps) => {
|
||||
const theme = useTheme();
|
||||
const { activeTabId, setActiveTabId } = useTabList(TAB_LIST_COMPONENT_ID);
|
||||
const { updateOneServerlessFunction } = useUpdateOneServerlessFunction();
|
||||
const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
|
||||
const serverlessFunctionId = action.settings.input.serverlessFunctionId;
|
||||
const theme = useTheme();
|
||||
const { activeTabId, setActiveTabId } = useTabList(
|
||||
WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,
|
||||
);
|
||||
const { updateOneServerlessFunction, isReady } =
|
||||
useUpdateOneServerlessFunction(serverlessFunctionId);
|
||||
const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
|
||||
|
||||
const workflowId = useRecoilValue(workflowIdState);
|
||||
const workflow = useWorkflowWithCurrentVersion(workflowId);
|
||||
const { availablePackages } = useGetAvailablePackages({
|
||||
@ -112,12 +115,11 @@ export const WorkflowEditActionFormServerlessFunction = ({
|
||||
|
||||
const handleSave = useDebouncedCallback(async () => {
|
||||
await updateOneServerlessFunction({
|
||||
id: serverlessFunctionId,
|
||||
name: formValues.name,
|
||||
description: formValues.description,
|
||||
code: formValues.code,
|
||||
});
|
||||
}, 1_000);
|
||||
}, 500);
|
||||
|
||||
const onCodeChange = async (newCode: string) => {
|
||||
if (actionOptions.readonly === true) {
|
||||
@ -161,7 +163,15 @@ export const WorkflowEditActionFormServerlessFunction = ({
|
||||
...action,
|
||||
settings: {
|
||||
...action.settings,
|
||||
outputSchema: {},
|
||||
outputSchema: {
|
||||
link: {
|
||||
isLeaf: true,
|
||||
icon: 'IconVariable',
|
||||
tab: 'test',
|
||||
label: 'Generate Function Input',
|
||||
},
|
||||
_outputSchemaType: 'LINK',
|
||||
},
|
||||
input: {
|
||||
...action.settings.input,
|
||||
serverlessFunctionInput: newMergedInput,
|
||||
@ -169,7 +179,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
|
||||
},
|
||||
});
|
||||
},
|
||||
1_000,
|
||||
500,
|
||||
);
|
||||
|
||||
const handleInputChange = async (value: any, path: string[]) => {
|
||||
@ -254,7 +264,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
|
||||
!loading && (
|
||||
<StyledContainer>
|
||||
<StyledTabList
|
||||
tabListInstanceId={TAB_LIST_COMPONENT_ID}
|
||||
tabListInstanceId={WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}
|
||||
tabs={tabs}
|
||||
behaveAsLinks={false}
|
||||
/>
|
||||
@ -277,7 +287,7 @@ export const WorkflowEditActionFormServerlessFunction = ({
|
||||
readonly={actionOptions.readonly}
|
||||
/>
|
||||
<StyledCodeEditorContainer>
|
||||
<InputLabel>Code</InputLabel>
|
||||
<InputLabel>Code {!isReady && <span>•</span>}</InputLabel>
|
||||
<CodeEditor
|
||||
height={343}
|
||||
value={formValues.code?.[INDEX_FILE_PATH]}
|
||||
|
@ -0,0 +1,2 @@
|
||||
export const WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID =
|
||||
'workflow-serverless-function-tab-list-component-id';
|
@ -33,21 +33,6 @@ import {
|
||||
import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
|
||||
import { updatedObjectSlugState } from '~/pages/settings/data-model/states/updatedObjectSlugState';
|
||||
|
||||
const StyledTabListContainer = styled.div`
|
||||
align-items: center;
|
||||
border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
height: ${({ theme }) => theme.spacing(10)};
|
||||
.tab-list {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.tab-list > div {
|
||||
padding: ${({ theme }) => theme.spacing(3) + ' 0'};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledContentContainer = styled.div`
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
@ -177,15 +162,13 @@ export const SettingsObjectDetailPage = () => {
|
||||
}
|
||||
>
|
||||
<SettingsPageContainer>
|
||||
<StyledTabListContainer>
|
||||
<TabList
|
||||
tabListInstanceId={
|
||||
SETTINGS_OBJECT_DETAIL_TABS.COMPONENT_INSTANCE_ID
|
||||
}
|
||||
tabs={tabs}
|
||||
className="tab-list"
|
||||
/>
|
||||
</StyledTabListContainer>
|
||||
<TabList
|
||||
tabListInstanceId={
|
||||
SETTINGS_OBJECT_DETAIL_TABS.COMPONENT_INSTANCE_ID
|
||||
}
|
||||
tabs={tabs}
|
||||
className="tab-list"
|
||||
/>
|
||||
<StyledContentContainer>
|
||||
{renderActiveTabContent()}
|
||||
</StyledContentContainer>
|
||||
|
@ -32,7 +32,8 @@ export const SettingsServerlessFunctionDetail = () => {
|
||||
const { enqueueSnackBar } = useSnackBar();
|
||||
const { activeTabId, setActiveTabId } = useTabList(TAB_LIST_COMPONENT_ID);
|
||||
const [isCodeValid, setIsCodeValid] = useState(true);
|
||||
const { updateOneServerlessFunction } = useUpdateOneServerlessFunction();
|
||||
const { updateOneServerlessFunction } =
|
||||
useUpdateOneServerlessFunction(serverlessFunctionId);
|
||||
const { publishOneServerlessFunction } = usePublishOneServerlessFunction();
|
||||
const { formValues, setFormValues, loading } =
|
||||
useServerlessFunctionUpdateFormState(serverlessFunctionId);
|
||||
@ -45,7 +46,6 @@ export const SettingsServerlessFunctionDetail = () => {
|
||||
|
||||
const handleSave = useDebouncedCallback(async () => {
|
||||
await updateOneServerlessFunction({
|
||||
id: serverlessFunctionId,
|
||||
name: formValues.name,
|
||||
description: formValues.description,
|
||||
code: formValues.code,
|
||||
|
@ -7,7 +7,10 @@ import { Processor } from 'src/engine/core-modules/message-queue/decorators/proc
|
||||
import { MessageQueue } from 'src/engine/core-modules/message-queue/message-queue.constants';
|
||||
import { Process } from 'src/engine/core-modules/message-queue/decorators/process.decorator';
|
||||
import { ServerlessService } from 'src/engine/core-modules/serverless/serverless.service';
|
||||
import { ServerlessFunctionEntity } from 'src/engine/metadata-modules/serverless-function/serverless-function.entity';
|
||||
import {
|
||||
ServerlessFunctionEntity,
|
||||
ServerlessFunctionSyncStatus,
|
||||
} from 'src/engine/metadata-modules/serverless-function/serverless-function.entity';
|
||||
import { isDefined } from 'src/utils/is-defined';
|
||||
|
||||
export type BuildServerlessFunctionBatchEvent = {
|
||||
@ -42,10 +45,16 @@ export class BuildServerlessFunctionJob {
|
||||
});
|
||||
|
||||
if (isDefined(serverlessFunction)) {
|
||||
await this.serverlessFunctionRepository.update(serverlessFunction.id, {
|
||||
syncStatus: ServerlessFunctionSyncStatus.NOT_READY,
|
||||
});
|
||||
await this.serverlessService.build(
|
||||
serverlessFunction,
|
||||
serverlessFunctionVersion,
|
||||
);
|
||||
await this.serverlessFunctionRepository.update(serverlessFunction.id, {
|
||||
syncStatus: ServerlessFunctionSyncStatus.READY,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -277,12 +277,6 @@ export class ServerlessFunctionService {
|
||||
serverlessFunctionVersion: 'draft',
|
||||
workspaceId,
|
||||
});
|
||||
await this.serverlessFunctionRepository.update(
|
||||
existingServerlessFunction.id,
|
||||
{
|
||||
syncStatus: ServerlessFunctionSyncStatus.READY,
|
||||
},
|
||||
);
|
||||
|
||||
return this.serverlessFunctionRepository.findOneBy({
|
||||
id: existingServerlessFunction.id,
|
||||
|
@ -81,6 +81,15 @@ export class WorkflowVersionStepWorkspaceService {
|
||||
valid: false,
|
||||
settings: {
|
||||
...BASE_STEP_DEFINITION,
|
||||
outputSchema: {
|
||||
link: {
|
||||
isLeaf: true,
|
||||
icon: 'IconVariable',
|
||||
tab: 'test',
|
||||
label: 'Generate Function Input',
|
||||
},
|
||||
_outputSchemaType: 'LINK',
|
||||
},
|
||||
input: {
|
||||
serverlessFunctionId: newServerlessFunction.id,
|
||||
serverlessFunctionVersion: 'draft',
|
||||
|
@ -15,6 +15,13 @@ export type Node = {
|
||||
value: OutputSchema;
|
||||
};
|
||||
|
||||
type Link = {
|
||||
isLeaf: true;
|
||||
tab?: string;
|
||||
icon?: string;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
export type BaseOutputSchema = Record<string, Leaf | Node>;
|
||||
|
||||
export type RecordOutputSchema = {
|
||||
@ -23,4 +30,12 @@ export type RecordOutputSchema = {
|
||||
_outputSchemaType: 'RECORD';
|
||||
};
|
||||
|
||||
export type OutputSchema = BaseOutputSchema | RecordOutputSchema;
|
||||
export type LinkOutputSchema = {
|
||||
link: Link;
|
||||
_outputSchemaType: 'LINK';
|
||||
};
|
||||
|
||||
export type OutputSchema =
|
||||
| BaseOutputSchema
|
||||
| RecordOutputSchema
|
||||
| LinkOutputSchema;
|
||||
|
@ -250,6 +250,7 @@ export {
|
||||
IconUserCircle,
|
||||
IconUserPlus,
|
||||
IconUsers,
|
||||
IconVariable,
|
||||
IconVariablePlus,
|
||||
IconVideo,
|
||||
IconWand,
|
||||
|
Loading…
Reference in New Issue
Block a user