houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Increase size of input in test setting logic function tab (#18369)

Browse Source 
## Before
<img width="1031" height="836" alt="image"
src="https://github.com/user-attachments/assets/475ca1be-f7c4-49d0-b329-649dbe8da489"
/>


## After

<img width="1195" height="862" alt="image"
src="https://github.com/user-attachments/assets/b1bac131-e562-4439-8f8e-bda4d6e2a646"
/>

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
martmull
2026-03-04 16:49:13 +01:00
committed by GitHub
parent b11f77df2a
commit 999dcd4468
15 changed files with 249 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/logic-functions/components/LogicFunctionExecutionResult.tsx
+1 -6
View File
@@ -8,11 +8,9 @@ import { LogicFunctionExecutionStatus } from '~/generated-metadata/graphql';
export const LogicFunctionExecutionResult = ({
logicFunctionTestData,
maxHeight,
isTesting = false,
}: {
logicFunctionTestData: LogicFunctionTestData;
maxHeight?: number;
isTesting?: boolean;
}) => {
const result =
@@ -39,10 +37,7 @@ export const LogicFunctionExecutionResult = ({
<WorkflowStepExecutionResult
result={result}
language={logicFunctionTestData.language}
height={Math.min(
logicFunctionTestData.height,
maxHeight ?? logicFunctionTestData.height,
)}
height={150}
status={status}
isTesting={isTesting}
loadingMessage={t`Running function`}
packages/twenty-front/src/modules/logic-functions/components/LogicFunctionLogs.tsx
+41
View File
@@ -0,0 +1,41 @@
import { useLingui } from '@lingui/react/macro';
import { ResizeHandle, useResizeHandle } from 'twenty-ui/layout';
import { TextArea } from '@/ui/input/components/TextArea';
type LogicFunctionLogsProps = {
componentInstanceId: string;
value: string;
};
export const LogicFunctionLogs = ({
componentInstanceId,
value,
}: LogicFunctionLogsProps) => {
const { t } = useLingui();
const {
size: height,
handleResizeStart,
handleResizeMove,
handleResizeEnd,
} = useResizeHandle({
initialSize: 150,
});
return (
<>
<TextArea
textAreaId={`logs-${componentInstanceId}`}
label={t`Logs`}
value={value}
height={height}
readOnly
/>
<ResizeHandle
onPointerDown={handleResizeStart}
onPointerMove={handleResizeMove}
onPointerUp={handleResizeEnd}
/>
</>
);
};
packages/twenty-front/src/modules/logic-functions/hooks/useExecuteLogicFunction.ts
-1
View File
@@ -75,7 +75,6 @@ export const useExecuteLogicFunction = ({
setLogicFunctionTestData((prev) => ({
...prev,
language: 'json',
height: 300,
output: {
data: executionResult?.data
? JSON.stringify(executionResult.data, null, 4)
packages/twenty-front/src/modules/page-layout/components/PageLayoutGridResizeHandle.tsx
+10 -25
View File
@@ -6,6 +6,7 @@ import {
IconRadiusTopLeft,
IconRadiusTopRight,
} from 'twenty-ui/display';
import { ResizeHandle } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { ThemeContext } from 'twenty-ui/theme';
@@ -67,28 +68,6 @@ const StyledVerticalHandle = styled.div`
width: ${themeCssVariables.icon.stroke.lg}px;
`;
const StyledHorizontalHandle = styled.div`
border-radius: ${themeCssVariables.border.radius.sm};
height: ${themeCssVariables.icon.stroke.lg}px;
width: ${themeCssVariables.spacing[5]};
`;
const StyledHorizontalHandleWrapper = styled.div<{
widgetHandleAxis: WidgetHorizontalHandleAxis;
}>`
border-radius: ${themeCssVariables.border.radius.sm};
cursor: row-resize;
transform: ${({ widgetHandleAxis }) =>
widgetHandleAxis === 'n' ? 'translateY(-50%)' : 'translateY(50%)'};
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]};
:hover {
& > div {
background-color: ${themeCssVariables.font.color.tertiary};
}
}
`;
const StyledVerticalHandleWrapper = styled.div<{
widgetHandleAxis: WidgetVerticalHandleAxis;
}>`
@@ -201,9 +180,15 @@ export const PageLayoutGridResizeHandle = forwardRef<
</StyledVerticalHandleWrapper>
)}
{isHorizontalHandle(widgetHandleAxis) && (
<StyledHorizontalHandleWrapper widgetHandleAxis={widgetHandleAxis}>
<StyledHorizontalHandle />
</StyledHorizontalHandleWrapper>
<ResizeHandle
style={{
cursor: 'row-resize',
transform:
widgetHandleAxis === 'n'
? 'translateY(-50%)'
: 'translateY(50%)',
}}
/>
)}
{widgetHandleAxis === 'ne' && (
<StyledCornerIconWrapper cursor="nesw-resize" position="ne">
packages/twenty-front/src/modules/settings/logic-functions/components/tabs/SettingsLogicFunctionTestTab.tsx
+4 -12
View File
@@ -1,4 +1,5 @@
import { LogicFunctionExecutionResult } from '@/logic-functions/components/LogicFunctionExecutionResult';
import { LogicFunctionLogs } from '@/logic-functions/components/LogicFunctionLogs';
import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
import { logicFunctionTestDataFamilyState } from '@/workflow/workflow-steps/workflow-actions/code-action/states/logicFunctionTestDataFamilyState';
@@ -8,8 +9,6 @@ import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
import { Button, CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { TextArea } from '@/ui/input/components/TextArea';
const StyledInputsContainer = styled.div`
display: flex;
@@ -48,8 +47,6 @@ export const SettingsLogicFunctionTestTab = ({
}));
};
const testLogsTextAreaId = `${logicFunctionId}-test-logs`;
return (
<Section>
<H2Title
@@ -78,23 +75,18 @@ export const SettingsLogicFunctionTestTab = ({
height={100}
onChange={onChange}
variant="with-header"
resizable
/>
</StyledCodeEditorContainer>
<LogicFunctionExecutionResult
logicFunctionTestData={logicFunctionTestData}
maxHeight={
logicFunctionTestData.output.logs.length > 0 ? 200 : undefined
}
isTesting={isTesting}
/>
{logicFunctionTestData.output.logs.length > 0 && (
<StyledCodeEditorContainer>
<InputLabel>{t`Logs`}</InputLabel>
<TextArea
textAreaId={testLogsTextAreaId}
<LogicFunctionLogs
componentInstanceId={`settings-logic-function-logs-${logicFunctionId}`}
value={isTesting ? '' : logicFunctionTestData.output.logs}
maxRows={20}
disabled
/>
</StyledCodeEditorContainer>
)}
packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+4
View File
@@ -5,6 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { isDefined } from 'twenty-shared/utils';
import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -14,6 +15,7 @@ export type TextAreaProps = {
textAreaId: string;
label?: string;
disabled?: boolean;
height?: number;
minRows?: number;
maxRows?: number;
onChange?: (value: string) => void;
@@ -73,6 +75,7 @@ export const TextArea = ({
textAreaId,
label,
disabled,
height,
placeholder,
minRows = 1,
maxRows = MAX_ROWS,
@@ -126,6 +129,7 @@ export const TextArea = ({
disabled={disabled}
className={className}
readOnly={readOnly}
style={isDefined(height) ? { height } : undefined}
/>
</StyledContainer>
);
packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx
+1 -2
View File
@@ -16,14 +16,12 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1;
min-height: 200px;
`;
const StyledCodeEditorWrapper = styled.div`
display: flex;
flex: 1;
flex-direction: column;
min-height: 200px;
`;
type OutputAccent = 'default' | 'success' | 'error';
@@ -137,6 +135,7 @@ export const WorkflowStepExecutionResult = ({
/>
<StyledCodeEditorWrapper>
<CodeEditor
resizable={true}
value={result}
language={language}
height={height}
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx
+3 -13
View File
@@ -10,9 +10,9 @@ import { setNestedValue } from '@/workflow/workflow-steps/workflow-actions/code-
import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionButton';
import { LogicFunctionExecutionResult } from '@/logic-functions/components/LogicFunctionExecutionResult';
import { LogicFunctionLogs } from '@/logic-functions/components/LogicFunctionLogs';
import { mergeDefaultFunctionInputAndFunctionInput } from '@/workflow/workflow-steps/workflow-actions/code-action/utils/mergeDefaultFunctionInputAndFunctionInput';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { TextArea } from '@/ui/input/components/TextArea';
import { TabList } from '@/ui/layout/tab-list/components/TabList';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
@@ -50,15 +50,10 @@ import { useDebouncedCallback } from 'use-debounce';
import { getFunctionInputFromInputSchema } from 'twenty-shared/workflow';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const CODE_EDITOR_MIN_HEIGHT = 343;
const StyledCodeEditorContainer = styled.div`
display: flex;
flex-direction: column;
position: relative;
flex: 1;
min-height: ${CODE_EDITOR_MIN_HEIGHT}px;
overflow: hidden;
`;
const StyledTabList = styled(TabList)`
@@ -304,8 +299,6 @@ export const WorkflowEditActionCode = ({
dependencies: [isFullScreen],
});
const testLogsTextAreaId = `${logicFunctionId}-test-logs`;
const breadcrumbLinks: BreadcrumbProps['links'] = [
{
children: workflow?.name?.trim() || t`Untitled Workflow`,
@@ -429,12 +422,9 @@ export const WorkflowEditActionCode = ({
</StyledCodeEditorContainer>
{logicFunctionTestData.output.logs.length > 0 && (
<StyledCodeEditorContainer>
<InputLabel>{t`Logs`}</InputLabel>
<TextArea
textAreaId={testLogsTextAreaId}
<LogicFunctionLogs
componentInstanceId={`workflow-edit-action-logs-${action.id}`}
value={isExecuting ? '' : logicFunctionTestData.output.logs}
maxRows={20}
disabled
/>
</StyledCodeEditorContainer>
)}
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/states/logicFunctionTestDataFamilyState.ts
-2
View File
@@ -12,7 +12,6 @@ export type LogicFunctionTestData = {
error?: string;
};
language: 'plaintext' | 'json';
height: number;
};
export const DEFAULT_OUTPUT_VALUE = {
@@ -28,7 +27,6 @@ export const logicFunctionTestDataFamilyState = createAtomFamilyState<
key: 'logicFunctionTestDataFamilyState',
defaultValue: {
language: 'plaintext',
height: 64,
input: {},
shouldInitInput: true,
output: DEFAULT_OUTPUT_VALUE,