-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Select full record in variable dropdown (#8851)
Output schema is now separated in two sections: - object, that gather all informations on the selectable object - fields, that display object fields in a record context, or simply the available fields from the previous steps The dropdown variable has now a new mode: - if objectNameSingularToSelect is defined, it goes into an object mode. Only objects of the right type will be shown - if not set, it will use the already existing mode, to select a field When an object is selected, it actually set the id of the object https://github.com/user-attachments/assets/1c95f8fd-10f0-4c1c-aeb7-c7d847e89536
- Loading branch information
Showing
22 changed files
with
931 additions
and
265 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
...nt/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; | ||
| import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; | ||
| import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; | ||
| import { | ||
| BaseOutputSchema, | ||
| OutputSchema, | ||
| StepOutputSchema, | ||
| } from '@/workflow/search-variables/types/StepOutputSchema'; | ||
| import { isBaseOutputSchema } from '@/workflow/search-variables/utils/isBaseOutputSchema'; | ||
| import { isRecordOutputSchema } from '@/workflow/search-variables/utils/isRecordOutputSchema'; | ||
| import { useTheme } from '@emotion/react'; | ||
|
|
||
| import { useState } from 'react'; | ||
| import { | ||
| HorizontalSeparator, | ||
| IconChevronLeft, | ||
| MenuItemSelect, | ||
| OverflowingTextWithTooltip, | ||
| useIcons, | ||
| } from 'twenty-ui'; | ||
|
|
||
| type SearchVariablesDropdownFieldItemsProps = { | ||
| step: StepOutputSchema; | ||
| onSelect: (value: string) => void; | ||
| onBack: () => void; | ||
| }; | ||
|
|
||
| export const SearchVariablesDropdownFieldItems = ({ | ||
| step, | ||
| onSelect, | ||
| onBack, | ||
| }: SearchVariablesDropdownFieldItemsProps) => { | ||
| const theme = useTheme(); | ||
| const [currentPath, setCurrentPath] = useState<string[]>([]); | ||
| const [searchInputValue, setSearchInputValue] = useState(''); | ||
| const { getIcon } = useIcons(); | ||
|
|
||
| const getCurrentSubStep = (): OutputSchema => { | ||
| let currentSubStep = step.outputSchema; | ||
|
|
||
| for (const key of currentPath) { | ||
| if (isRecordOutputSchema(currentSubStep)) { | ||
| currentSubStep = currentSubStep.fields[key]?.value; | ||
| } else if (isBaseOutputSchema(currentSubStep)) { | ||
| currentSubStep = currentSubStep[key]?.value; | ||
| } | ||
| } | ||
|
|
||
| return currentSubStep; | ||
| }; | ||
|
|
||
| const getDisplayedSubStepFields = () => { | ||
| const currentSubStep = getCurrentSubStep(); | ||
|
|
||
| if (isRecordOutputSchema(currentSubStep)) { | ||
| return currentSubStep.fields; | ||
| } else if (isBaseOutputSchema(currentSubStep)) { | ||
| return currentSubStep; | ||
| } | ||
| }; | ||
|
|
||
| const handleSelectField = (key: string) => { | ||
| const currentSubStep = getCurrentSubStep(); | ||
| const handleSelectBaseOutputSchema = ( | ||
| baseOutputSchema: BaseOutputSchema, | ||
| ) => { | ||
| if (!baseOutputSchema[key]?.isLeaf) { | ||
| setCurrentPath([...currentPath, key]); | ||
| setSearchInputValue(''); | ||
| } else { | ||
| onSelect(`{{${step.id}.${[...currentPath, key].join('.')}}}`); | ||
| } | ||
| }; | ||
|
|
||
| if (isRecordOutputSchema(currentSubStep)) { | ||
| handleSelectBaseOutputSchema(currentSubStep.fields); | ||
| } else if (isBaseOutputSchema(currentSubStep)) { | ||
| handleSelectBaseOutputSchema(currentSubStep); | ||
| } | ||
| }; | ||
|
|
||
| const goBack = () => { | ||
| if (currentPath.length === 0) { | ||
| onBack(); | ||
| } else { | ||
| setCurrentPath(currentPath.slice(0, -1)); | ||
| } | ||
| }; | ||
|
|
||
| const headerLabel = currentPath.length === 0 ? step.name : currentPath.at(-1); | ||
| const displayedObject = getDisplayedSubStepFields(); | ||
| const options = displayedObject ? Object.entries(displayedObject) : []; | ||
|
|
||
| const filteredOptions = searchInputValue | ||
| ? options.filter( | ||
| ([_, value]) => | ||
| value.label && | ||
| value.label.toLowerCase().includes(searchInputValue.toLowerCase()), | ||
| ) | ||
| : options; | ||
|
|
||
| return ( | ||
| <DropdownMenuItemsContainer> | ||
| <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={goBack}> | ||
| <OverflowingTextWithTooltip text={headerLabel} /> | ||
| </DropdownMenuHeader> | ||
| <HorizontalSeparator | ||
| color={theme.background.transparent.primary} | ||
| noMargin | ||
| /> | ||
| <DropdownMenuSearchInput | ||
| autoFocus | ||
| value={searchInputValue} | ||
| onChange={(event) => setSearchInputValue(event.target.value)} | ||
| /> | ||
| <HorizontalSeparator | ||
| color={theme.background.transparent.primary} | ||
| noMargin | ||
| /> | ||
| {filteredOptions.map(([key, value]) => ( | ||
| <MenuItemSelect | ||
| key={key} | ||
| selected={false} | ||
| hovered={false} | ||
| onClick={() => handleSelectField(key)} | ||
| text={value.label || key} | ||
| hasSubMenu={!value.isLeaf} | ||
| LeftIcon={value.icon ? getIcon(value.icon) : undefined} | ||
| /> | ||
| ))} | ||
| </DropdownMenuItemsContainer> | ||
| ); | ||
| }; |
Oops, something went wrong.