Hide Input and Test tabs for app logic function nodes (#21671)

When opening a logic function node that comes from an app (e.g. "Enrich
Company" from People Data Labs), the node detail panel was showing
**Input** and **Test** tabs. App-sourced functions should only expose
their input fields, with no test surface.

This hides the tab list when the logic function has an `applicationId`,
rendering the input fields directly. The test tab is also never treated
as active for these nodes, which guards against a stale "test" tab state
leaking in from a previously-opened custom function (the tab list shares
one component instance id).

## Before

<img width="800" height="546" alt="CleanShot 2026-06-16 at 15 11 32@2x"
src="https://github.com/user-attachments/assets/c4582e27-9a41-4ebd-a436-49404cefb515"
/>

## After

<img width="800" height="454" alt="CleanShot 2026-06-16 at 15 11 09@2x"
src="https://github.com/user-attachments/assets/2756e07b-fa28-410a-be14-ad5f49e2d7ed"
/>


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21671?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Raphaël Bosi
2026-06-16 16:24:12 +02:00
committed by GitHub
parent 9001078cb2
commit 637ae65e9f
@@ -1,3 +1,4 @@
import { useIsThirdPartyApplication } from '@/applications/hooks/useIsThirdPartyApplication';
import { LogicFunctionExecutionResult } from '@/logic-functions/components/LogicFunctionExecutionResult';
import { LogicFunctionLogs } from '@/logic-functions/components/LogicFunctionLogs';
import { LogicFunctionTestInputInitEffect } from '@/logic-functions/components/LogicFunctionTestInputInitEffect';
@@ -75,6 +76,10 @@ export const WorkflowEditActionLogicFunction = ({
id: logicFunctionId,
});
const isThirdPartyApp = useIsThirdPartyApplication(
logicFunction?.applicationId,
);
const activeTabId = useAtomComponentStateValue(
activeTabIdComponentState,
WORKFLOW_LOGIC_FUNCTION_ACTION_TAB_LIST_COMPONENT_ID,
@@ -183,6 +188,8 @@ export const WorkflowEditActionLogicFunction = ({
const hasInputFields = Object.keys(functionInput).length > 0;
const isTestTabActive = !isThirdPartyApp && activeTabId === TEST_TAB_ID;
const tabs = [
{
id: INPUT_TAB_ID,
@@ -199,17 +206,19 @@ export const WorkflowEditActionLogicFunction = ({
return (
<>
<LogicFunctionTestInputInitEffect logicFunctionId={logicFunctionId} />
<StyledTabListContainer>
<TabList
tabs={tabs}
behaveAsLinks={false}
componentInstanceId={
WORKFLOW_LOGIC_FUNCTION_ACTION_TAB_LIST_COMPONENT_ID
}
/>
</StyledTabListContainer>
{!isThirdPartyApp && (
<StyledTabListContainer>
<TabList
tabs={tabs}
behaveAsLinks={false}
componentInstanceId={
WORKFLOW_LOGIC_FUNCTION_ACTION_TAB_LIST_COMPONENT_ID
}
/>
</StyledTabListContainer>
)}
<WorkflowStepBody>
{activeTabId === TEST_TAB_ID ? (
{isTestTabActive ? (
<>
<WorkflowEditActionCodeFields
functionInput={testInput}
@@ -262,7 +271,7 @@ export const WorkflowEditActionLogicFunction = ({
<WorkflowStepFooter
stepId={action.id}
additionalActions={
activeTabId === TEST_TAB_ID
isTestTabActive
? [
<WorkflowStepCmdEnterButton
title={t`Test`}