4a4e65fe4a
# Introduction closes https://github.com/twentyhq/core-team-issues/issues/591 Same than for `twenty-shared` made in https://github.com/twentyhq/twenty/pull/11083. ## TODO - [x] Manual migrate twenty-website twenty-ui imports ## What's next: - Generate barrel and migration script factorization within own package + tests - Refactoring using preconstruct ? TimeBox - Lint circular dependencies - Lint import from barrel and forbid them ### Preconstruct We need custom rollup plugins addition, but preconstruct does not expose its rollup configuration. It might be possible to handle this using the babel overrides. But was a big tunnel. We could give it a try afterwards ! ( allowing cjs interop and stuff like that ) Stuck to vite lib app Closed related PRs: - https://github.com/twentyhq/twenty/pull/11294 - https://github.com/twentyhq/twenty/pull/11203
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
import { ServerlessFunctionExecutionResult } from '@/serverless-functions/components/ServerlessFunctionExecutionResult';
|
|
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
|
|
import { SettingsPath } from '@/types/SettingsPath';
|
|
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
|
import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
|
|
import styled from '@emotion/styled';
|
|
import { useRecoilState } from 'recoil';
|
|
import { Key } from 'ts-key-enum';
|
|
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
|
|
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
|
|
import { Button, CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
|
|
import { H2Title, IconPlayerPlay } from 'twenty-ui/display';
|
|
import { Section } from 'twenty-ui/layout';
|
|
|
|
const StyledInputsContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledCodeEditorContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
export const SettingsServerlessFunctionTestTab = ({
|
|
handleExecute,
|
|
serverlessFunctionId,
|
|
}: {
|
|
handleExecute: () => void;
|
|
serverlessFunctionId: string;
|
|
}) => {
|
|
const [serverlessFunctionTestData, setServerlessFunctionTestData] =
|
|
useRecoilState(serverlessFunctionTestDataFamilyState(serverlessFunctionId));
|
|
|
|
const onChange = (newInput: string) => {
|
|
setServerlessFunctionTestData((prev) => ({
|
|
...prev,
|
|
input: JSON.parse(newInput),
|
|
}));
|
|
};
|
|
|
|
const navigate = useNavigateSettings();
|
|
useHotkeyScopeOnMount(
|
|
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
|
|
);
|
|
|
|
useScopedHotkeys(
|
|
[Key.Escape],
|
|
() => {
|
|
navigate(SettingsPath.ServerlessFunctions);
|
|
},
|
|
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
|
|
);
|
|
|
|
return (
|
|
<Section>
|
|
<H2Title
|
|
title="Test your function"
|
|
description='Insert a JSON input, then press "Run" to test your function.'
|
|
/>
|
|
<StyledInputsContainer>
|
|
<StyledCodeEditorContainer>
|
|
<CoreEditorHeader
|
|
title={'Input'}
|
|
rightNodes={[
|
|
<Button
|
|
title="Run Function"
|
|
variant="primary"
|
|
accent="blue"
|
|
size="small"
|
|
Icon={IconPlayerPlay}
|
|
onClick={handleExecute}
|
|
/>,
|
|
]}
|
|
/>
|
|
<CodeEditor
|
|
value={JSON.stringify(serverlessFunctionTestData.input, null, 4)}
|
|
language="json"
|
|
height={200}
|
|
onChange={onChange}
|
|
withHeader
|
|
/>
|
|
</StyledCodeEditorContainer>
|
|
<ServerlessFunctionExecutionResult
|
|
serverlessFunctionTestData={serverlessFunctionTestData}
|
|
/>
|
|
</StyledInputsContainer>
|
|
</Section>
|
|
);
|
|
};
|