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:
+20
-11
@@ -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`}
|
||||
|
||||
Reference in New Issue
Block a user