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:
martmull
2024-10-28 12:25:29 +01:00
committed by GitHub
parent 3ae987be92
commit 1aa961dedf
49 changed files with 706 additions and 83 deletions

View File

@ -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}
/>
)}

View File

@ -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;
};

View File

@ -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 {

View File

@ -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,
},
},
];

View File

@ -0,0 +1,5 @@
export type StepOutputSchema = {
id: string;
name: string;
outputSchema: Record<string, any>;
};

View File

@ -1,5 +0,0 @@
export type WorkflowStepMock = {
id: string;
name: string;
output: Record<string, any>;
};