diff --git a/packages/twenty-front/src/modules/logic-functions/hooks/useLogicFunctionThirdPartyApplicationInformation.ts b/packages/twenty-front/src/modules/logic-functions/hooks/useLogicFunctionThirdPartyApplicationInformation.ts new file mode 100644 index 0000000000..95709a91ea --- /dev/null +++ b/packages/twenty-front/src/modules/logic-functions/hooks/useLogicFunctionThirdPartyApplicationInformation.ts @@ -0,0 +1,35 @@ +import { useApplicationChipData } from '@/applications/hooks/useApplicationChipData'; +import { useIsThirdPartyApplication } from '@/applications/hooks/useIsThirdPartyApplication'; +import { logicFunctionsSelector } from '@/logic-functions/states/logicFunctionsSelector'; +import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { isDefined } from 'twenty-shared/utils'; + +type LogicFunctionThirdPartyApplicationInformation = { + applicationId: string; + name: string; +}; + +export const useLogicFunctionThirdPartyApplicationInformation = ( + logicFunctionId?: string, +): LogicFunctionThirdPartyApplicationInformation | undefined => { + const logicFunctions = useAtomStateValue(logicFunctionsSelector); + + const applicationId = isDefined(logicFunctionId) + ? logicFunctions.find( + (logicFunction) => logicFunction.id === logicFunctionId, + )?.applicationId + : undefined; + + const isThirdPartyApplication = useIsThirdPartyApplication(applicationId); + + const { applicationChipData } = useApplicationChipData({ applicationId }); + + if (!isThirdPartyApplication || !isDefined(applicationId)) { + return undefined; + } + + return { + applicationId, + name: applicationChipData.name, + }; +}; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx index a28d20f72b..bce795dfe8 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx @@ -1,3 +1,5 @@ +import { AppChip } from '@/applications/components/AppChip'; +import { useLogicFunctionThirdPartyApplicationInformation } from '@/logic-functions/hooks/useLogicFunctionThirdPartyApplicationInformation'; import { useUpdateSidePanelPageInfo } from '@/side-panel/hooks/useUpdateSidePanelPageInfo'; import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow'; import { sidePanelWorkflowStepIdComponentState } from '@/side-panel/pages/workflow/states/sidePanelWorkflowStepIdComponentState'; @@ -85,6 +87,15 @@ export const SidePanelWorkflowStepInfo = ({ const isTrigger = stepDefinition?.type === 'trigger'; + const logicFunctionId = + stepDefinition?.type === 'action' && + stepDefinition.definition.type === 'LOGIC_FUNCTION' + ? stepDefinition.definition.settings.input.logicFunctionId + : undefined; + + const thirdPartyApplicationInformation = + useLogicFunctionThirdPartyApplicationInformation(logicFunctionId); + const agentId = getAgentIdFromStep(stepDefinition); const { updateAgentLabel } = useUpdateAgentLabel(agentId); const stepName = @@ -126,6 +137,10 @@ export const SidePanelWorkflowStepInfo = ({ const headerType = isTrigger ? t`Trigger` : t`Action`; + const label = isDefined(thirdPartyApplicationInformation) + ? thirdPartyApplicationInformation.name + : headerType; + const Icon = getIcon(headerIcon ?? 'IconDefault'); const saveTitle = async () => { @@ -169,11 +184,21 @@ export const SidePanelWorkflowStepInfo = ({ return ( + ) : headerIcon ? ( ) : undefined } - iconColor={headerIconColor} + iconColor={ + isDefined(thirdPartyApplicationInformation) + ? undefined + : headerIconColor + } title={ } - label={isTrigger ? t`Trigger` : t`Action`} + label={label} /> ); };