Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

6653 serverless functions store and use environment variables in serverless function scripts #7390

Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
3f0c09a
Add process.env.VAR resolution in editor
martmull Sep 11, 2024
3dd60c8
Merge branch 'main' into 6653-serverless-functions-store-and-use-envi…
martmull Sep 12, 2024
10737d6
Merge branch 'main' into 6653-serverless-functions-store-and-use-envi…
martmull Sep 12, 2024
a380ad6
Use models for monaco editor
martmull Sep 13, 2024
d20f4b9
Add .env file
martmull Sep 13, 2024
f1494c4
WIP support multi files
martmull Sep 13, 2024
6522dbe
WIP2 support multi files
martmull Sep 13, 2024
0cc1e52
Merge branch 'main' into 6653-serverless-functions-store-and-use-envi…
martmull Sep 30, 2024
a917cd1
WIP
martmull Sep 30, 2024
b4798b4
WIP
martmull Sep 30, 2024
5a43465
WIP
martmull Sep 30, 2024
9f321a1
Handle env file updates in monaco
martmull Oct 1, 2024
2a77355
Make it work for lambda driver
martmull Oct 2, 2024
08bf3f8
Fix reset and publish buttons
martmull Oct 2, 2024
b795cbe
Fix lint
martmull Oct 2, 2024
f2d6b3e
Add .env file to tracking
martmull Oct 2, 2024
0ae6dad
Improve s3 driver download
martmull Oct 2, 2024
dda9e63
Remove existSync
martmull Oct 2, 2024
9accc9c
Remove useless function
martmull Oct 2, 2024
d2358dc
Fix typo
martmull Oct 2, 2024
83f833a
Code review return: refactor local.driver.ts
martmull Oct 3, 2024
3e60893
Code review return: enhanced error message
martmull Oct 3, 2024
1b66234
Code review return: wrap try catch in local execution promise
martmull Oct 3, 2024
0cfdc94
Code review return: stop reading content synchronously
martmull Oct 3, 2024
9c2a3a0
Code review return: load base project files once
martmull Oct 3, 2024
d4bed93
Code review return: improve get all files
martmull Oct 3, 2024
554ab8f
Code review return: add dedicated gitignore
martmull Oct 3, 2024
86fdc06
Code review return: simplify code
martmull Oct 3, 2024
0f77f5b
Code review return: remove ugly code
martmull Oct 3, 2024
6eede1c
Code review return: simplify code
martmull Oct 3, 2024
00f3854
Code review return: fix wrong code
martmull Oct 3, 2024
26960f3
Remove env variable update on the fly because of monaco bug
martmull Oct 3, 2024
2c1e431
Fix lint
martmull Oct 3, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
**/**/.env
!**/base-typescript-project/**/.env
martmull marked this conversation as resolved.
Show resolved Hide resolved
.DS_Store
/.idea
**/**/node_modules/
Expand Down
20 changes: 10 additions & 10 deletions packages/twenty-front/src/generated-metadata/gql.ts

Large diffs are not rendered by default.

105 changes: 60 additions & 45 deletions packages/twenty-front/src/generated-metadata/graphql.ts

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { ServerlessFunctionFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Button } from '@/ui/input/button/components/Button';
import { CodeEditor } from '@/ui/input/code-editor/components/CodeEditor';
import { CodeEditor, File } from '@/ui/input/code-editor/components/CodeEditor';
import { CoreEditorHeader } from '@/ui/input/code-editor/components/CodeEditorHeader';
import { Section } from '@/ui/layout/section/components/Section';
import { TabList } from '@/ui/layout/tab/components/TabList';
Expand All @@ -13,13 +12,16 @@ import { useNavigate } from 'react-router-dom';
import { Key } from 'ts-key-enum';
import { H2Title, IconGitCommit, IconPlayerPlay, IconRestore } from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/settings/serverless-functions/constants/SettingsServerlessFunctionTabListComponentId';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useRecoilValue } from 'recoil';

const StyledTabList = styled(TabList)`
border-bottom: none;
`;

export const SettingsServerlessFunctionCodeEditorTab = ({
formValues,
files,
handleExecute,
handlePublish,
handleReset,
Expand All @@ -28,15 +30,19 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
onChange,
setIsCodeValid,
}: {
formValues: ServerlessFunctionFormValues;
files: File[];
handleExecute: () => void;
handlePublish: () => void;
handleReset: () => void;
resetDisabled: boolean;
publishDisabled: boolean;
onChange: (key: string) => (value: string) => void;
onChange: (filePath: string, value: string) => void;
setIsCodeValid: (isCodeValid: boolean) => void;
}) => {
const { activeTabIdState } = useTabList(
SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,
);
const activeTabId = useRecoilValue(activeTabIdState);
const TestButton = (
<Button
title="Test"
Expand Down Expand Up @@ -68,21 +74,15 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
/>
);

const TAB_LIST_COMPONENT_ID = 'serverless-function-editor';

const HeaderTabList = (
<StyledTabList
tabListId={TAB_LIST_COMPONENT_ID}
tabs={[{ id: 'index.ts', title: 'index.ts' }]}
tabListId={SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}
tabs={files.map((file) => {
return { id: file.path, title: file.path.split('/').reverse()?.[0] };
})}
martmull marked this conversation as resolved.
Show resolved Hide resolved
/>
);

const Header = (
<CoreEditorHeader
leftNodes={[HeaderTabList]}
rightNodes={[ResetButton, PublishButton, TestButton]}
/>
);
const navigate = useNavigate();
useHotkeyScopeOnMount(
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionEditorTab,
Expand All @@ -95,18 +95,25 @@ export const SettingsServerlessFunctionCodeEditorTab = ({
},
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionEditorTab,
);

return (
<Section>
<H2Title
title="Code your function"
description="Write your function (in typescript) below"
/>
<CodeEditor
value={formValues.code}
onChange={onChange('code')}
setIsCodeValid={setIsCodeValid}
header={Header}
<CoreEditorHeader
leftNodes={[HeaderTabList]}
rightNodes={[ResetButton, PublishButton, TestButton]}
/>
{activeTabId && (
<CodeEditor
files={files}
currentFilePath={activeTabId}
onChange={(newCodeValue) => onChange(activeTabId, newCodeValue)}
setIsCodeValid={setIsCodeValid}
/>
)}
</Section>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -44,28 +44,6 @@ export const SettingsServerlessFunctionTestTab = ({
settingsServerlessFunctionOutput.error ||
'';

const InputHeader = (
<CoreEditorHeader
title={'Input'}
rightNodes={[
<Button
title="Run Function"
variant="primary"
accent="blue"
size="small"
Icon={IconPlayerPlay}
onClick={handleExecute}
/>,
]}
/>
);

const OutputHeader = (
<CoreEditorHeader
leftNodes={[<SettingsServerlessFunctionsOutputMetadataInfo />]}
rightNodes={[<LightCopyIconButton copyText={result} />]}
/>
);
const navigate = useNavigate();
useHotkeyScopeOnMount(
SettingsServerlessFunctionHotkeyScope.ServerlessFunctionTestTab,
Expand All @@ -86,20 +64,52 @@ export const SettingsServerlessFunctionTestTab = ({
description='Insert a JSON input, then press "Run" to test your function.'
/>
<StyledInputsContainer>
<CodeEditor
value={settingsServerlessFunctionInput}
height={200}
onChange={setSettingsServerlessFunctionInput}
language={'json'}
header={InputHeader}
/>
<CodeEditor
value={result}
height={settingsServerlessFunctionCodeEditorOutputParams.height}
language={settingsServerlessFunctionCodeEditorOutputParams.language}
options={{ readOnly: true, domReadOnly: true }}
header={OutputHeader}
/>
<div>
<CoreEditorHeader
title={'Input'}
rightNodes={[
<Button
title="Run Function"
variant="primary"
accent="blue"
size="small"
Icon={IconPlayerPlay}
onClick={handleExecute}
/>,
]}
/>
<CodeEditor
files={[
{
content: settingsServerlessFunctionInput,
language: 'json',
path: 'input.json',
},
]}
currentFilePath={'input.json'}
height={200}
onChange={setSettingsServerlessFunctionInput}
/>
</div>
<div>
<CoreEditorHeader
leftNodes={[<SettingsServerlessFunctionsOutputMetadataInfo />]}
rightNodes={[<LightCopyIconButton copyText={result} />]}
/>
<CodeEditor
files={[
{
content: result,
language:
settingsServerlessFunctionCodeEditorOutputParams.language,
path: 'result.any',
},
]}
currentFilePath={'result.any'}
height={settingsServerlessFunctionCodeEditorOutputParams.height}
options={{ readOnly: true, domReadOnly: true }}
/>
</div>
</StyledInputsContainer>
</Section>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const SETTINGS_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID =
'settings-serverless-function-editor-tab-list';
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ export const SERVERLESS_FUNCTION_FRAGMENT = gql`
id
name
description
sourceCodeHash
runtime
syncStatus
latestVersion
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export type ServerlessFunctionNewFormValues = {
};

export type ServerlessFunctionFormValues = ServerlessFunctionNewFormValues & {
code: string;
code: { [filePath: string]: string } | undefined;
};

type SetServerlessFunctionFormValues = Dispatch<
Expand All @@ -26,7 +26,7 @@ export const useServerlessFunctionUpdateFormState = (
const [formValues, setFormValues] = useState<ServerlessFunctionFormValues>({
name: '',
description: '',
code: '',
code: undefined,
});

const { serverlessFunction } =
Expand All @@ -37,7 +37,7 @@ export const useServerlessFunctionUpdateFormState = (
version: 'draft',
onCompleted: (data: FindOneServerlessFunctionSourceCodeQuery) => {
const newState = {
code: data?.getServerlessFunctionSourceCode || '',
code: data?.getServerlessFunctionSourceCode || undefined,
name: serverlessFunction?.name || '',
description: serverlessFunction?.description || '',
};
Expand Down
Loading
Loading