101 featch available variables from previous steps (#8062)
- add outputSchema in workflow step settings - use outputSchemas to compute step available variables https://github.com/user-attachments/assets/6b851d8e-625c-49ff-b29c-074cd86cbfee
This commit is contained in:
@ -5,14 +5,14 @@ import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/S
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { SearchVariablesDropdownStepItem } from '@/workflow/search-variables/components/SearchVariablesDropdownStepItem';
|
||||
import SearchVariablesDropdownStepSubItem from '@/workflow/search-variables/components/SearchVariablesDropdownStepSubItem';
|
||||
import { AVAILABLE_VARIABLES_MOCK } from '@/workflow/search-variables/constants/AvailableVariablesMock';
|
||||
import { SEARCH_VARIABLES_DROPDOWN_ID } from '@/workflow/search-variables/constants/SearchVariablesDropdownId';
|
||||
import { WorkflowStepMock } from '@/workflow/search-variables/types/WorkflowStepMock';
|
||||
import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { Editor } from '@tiptap/react';
|
||||
import { useState } from 'react';
|
||||
import { IconVariable } from 'twenty-ui';
|
||||
import { useAvailableVariablesInWorkflowStep } from '@/workflow/hooks/useAvailableVariablesInWorkflowStep';
|
||||
|
||||
const StyledDropdownVariableButtonContainer = styled(
|
||||
StyledDropdownButtonContainer,
|
||||
@ -34,8 +34,11 @@ const SearchVariablesDropdown = ({
|
||||
|
||||
const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${inputId}`;
|
||||
const { isDropdownOpen } = useDropdown(dropdownId);
|
||||
const availableVariablesInWorkflowStep =
|
||||
useAvailableVariablesInWorkflowStep();
|
||||
|
||||
const [selectedStep, setSelectedStep] = useState<
|
||||
WorkflowStepMock | undefined
|
||||
StepOutputSchema | undefined
|
||||
>(undefined);
|
||||
|
||||
const insertVariableTag = (variable: string) => {
|
||||
@ -44,7 +47,7 @@ const SearchVariablesDropdown = ({
|
||||
|
||||
const handleStepSelect = (stepId: string) => {
|
||||
setSelectedStep(
|
||||
AVAILABLE_VARIABLES_MOCK.find((step) => step.id === stepId),
|
||||
availableVariablesInWorkflowStep.find((step) => step.id === stepId),
|
||||
);
|
||||
};
|
||||
|
||||
@ -78,7 +81,7 @@ const SearchVariablesDropdown = ({
|
||||
/>
|
||||
) : (
|
||||
<SearchVariablesDropdownStepItem
|
||||
steps={AVAILABLE_VARIABLES_MOCK}
|
||||
steps={availableVariablesInWorkflowStep}
|
||||
onSelect={handleStepSelect}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
|
||||
import { WorkflowStepMock } from '@/workflow/search-variables/types/WorkflowStepMock';
|
||||
import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
|
||||
|
||||
type SearchVariablesDropdownStepItemProps = {
|
||||
steps: WorkflowStepMock[];
|
||||
steps: StepOutputSchema[];
|
||||
onSelect: (value: string) => void;
|
||||
};
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
|
||||
import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
|
||||
import { WorkflowStepMock } from '@/workflow/search-variables/types/WorkflowStepMock';
|
||||
import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
|
||||
import { isObject } from '@sniptt/guards';
|
||||
import { useState } from 'react';
|
||||
import { IconChevronLeft } from 'twenty-ui';
|
||||
|
||||
type SearchVariablesDropdownStepSubItemProps = {
|
||||
step: WorkflowStepMock;
|
||||
step: StepOutputSchema;
|
||||
onSelect: (value: string) => void;
|
||||
onBack: () => void;
|
||||
};
|
||||
@ -19,7 +19,7 @@ const SearchVariablesDropdownStepSubItem = ({
|
||||
const [currentPath, setCurrentPath] = useState<string[]>([]);
|
||||
|
||||
const getSelectedObject = () => {
|
||||
let selected = step.output;
|
||||
let selected = step.outputSchema;
|
||||
for (const key of currentPath) {
|
||||
selected = selected[key];
|
||||
}
|
||||
@ -28,6 +28,7 @@ const SearchVariablesDropdownStepSubItem = ({
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
const selectedObject = getSelectedObject();
|
||||
|
||||
if (isObject(selectedObject[key])) {
|
||||
setCurrentPath([...currentPath, key]);
|
||||
} else {
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
import { WorkflowStepMock } from '@/workflow/search-variables/types/WorkflowStepMock';
|
||||
|
||||
export const AVAILABLE_VARIABLES_MOCK: WorkflowStepMock[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Person is Created',
|
||||
output: {
|
||||
userId: '1',
|
||||
recordId: '123',
|
||||
objectMetadataItem: {
|
||||
id: '1234',
|
||||
nameSingular: 'person',
|
||||
namePlural: 'people',
|
||||
},
|
||||
properties: {
|
||||
after: {
|
||||
name: 'John Doe',
|
||||
email: 'john.doe@email.com',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Send Email',
|
||||
output: {
|
||||
success: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,5 @@
|
||||
export type StepOutputSchema = {
|
||||
id: string;
|
||||
name: string;
|
||||
outputSchema: Record<string, any>;
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
export type WorkflowStepMock = {
|
||||
id: string;
|
||||
name: string;
|
||||
output: Record<string, any>;
|
||||
};
|
||||
Reference in New Issue
Block a user