mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

9024 workflow test serverless function follow up (#9066)

Browse Source 
-  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:
martmull
2024-12-17 10:35:38 +01:00
committed by GitHub
parent 0692bba710
commit 5dfcc413cf
25 changed files with 218 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdown.tsx
View File

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

34
packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownFieldItems.tsx
View File

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

4
packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownObjectItems.tsx
View File

@ -60,6 +60,10 @@ export const SearchVariablesDropdownObjectItems = ({
const getDisplayedSubStepObject = () => {
const currentSubStep = getCurrentSubStep();
if (!isRecordOutputSchema(currentSubStep)) {
return;
}
return currentSubStep.object;
};

4
packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems.tsx
View File

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

1
packages/twenty-front/src/modules/workflow/search-variables/hooks/useAvailableVariablesInWorkflowStep.ts
View File

@ -82,6 +82,7 @@ export const useAvailableVariablesInWorkflowStep = ({
id: previousStep.id,
name: previousStep.name,
outputSchema: filteredOutputSchema,
...(previousStep.type === 'CODE' ? { icon: 'IconCode' } : {}),
});
}
});

22
packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts
View File

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

5
packages/twenty-front/src/modules/workflow/search-variables/utils/filterOutputSchema.ts
View File

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

10
packages/twenty-front/src/modules/workflow/search-variables/utils/isLinkOutputSchema.ts Normal file
View File

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