8726 workflow add a test button in workflow code step (#9016)

- add test button to workflow code step
- add test tab to workflow code step


https://github.com/user-attachments/assets/e180a827-7321-49a2-8026-88490c557da2



![image](https://github.com/user-attachments/assets/cacbd756-de3f-4141-a84c-8e1853f6556b)

![image](https://github.com/user-attachments/assets/ee170d81-8a22-4178-bd6d-11a0e8c73365)

packages/twenty-front/src/modules/serverless-functions/components/ServerlessFunctionExecutionResult.tsx

@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+
+import { useTheme } from '@emotion/react';
+import { ServerlessFunctionExecutionStatus } from '~/generated-metadata/graphql';
+import {
+  CodeEditor,
+  CoreEditorHeader,
+  IconSquareRoundedCheck,
+} from 'twenty-ui';
+import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
+import {
+  DEFAULT_OUTPUT_VALUE,
+  ServerlessFunctionTestData,
+} from '@/workflow/states/serverlessFunctionTestDataFamilyState';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledOutput = styled.div<{ status?: ServerlessFunctionExecutionStatus }>`
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+  color: ${({ theme, status }) =>
+    status === ServerlessFunctionExecutionStatus.Success
+      ? theme.color.turquoise
+      : theme.color.red};
+  display: flex;
+`;
+
+export const ServerlessFunctionExecutionResult = ({
+  serverlessFunctionTestData,
+}: {
+  serverlessFunctionTestData: ServerlessFunctionTestData;
+}) => {
+  const theme = useTheme();
+
+  const result =
+    serverlessFunctionTestData.output.data ||
+    serverlessFunctionTestData.output.error ||
+    '';
+
+  const leftNode =
+    serverlessFunctionTestData.output.data === DEFAULT_OUTPUT_VALUE ? (
+      'Output'
+    ) : (
+      <StyledOutput status={serverlessFunctionTestData.output.status}>
+        <IconSquareRoundedCheck size={theme.icon.size.md} />
+        {serverlessFunctionTestData.output.status ===
+        ServerlessFunctionExecutionStatus.Success
+          ? '200 OK'
+          : '500 Error'}
+        {' - '}
+        {serverlessFunctionTestData.output.duration}ms
+      </StyledOutput>
+    );
+
+  return (
+    <StyledContainer>
+      <CoreEditorHeader
+        leftNodes={[leftNode]}
+        rightNodes={[<LightCopyIconButton copyText={result} />]}
+      />
+      <CodeEditor
+        value={result}
+        language={serverlessFunctionTestData.language}
+        height={serverlessFunctionTestData.height}
+        options={{ readOnly: true, domReadOnly: true }}
+        withHeader
+      />
+    </StyledContainer>
+  );
+};