Add Record Create action in the frontend #8514

Devessier · 2024-11-15T11:44:51Z

In this PR:

Updated the front-end types for workflows to include CRUD actions and global naming changes
Allow users to create a Record Create action
Scaffold the edit for Record Create action; for now, I render a <VariableTagInput /> component for every editable field; it's likely we'll change it soon

Closes https://github.com/twentyhq/private-issues/issues/142

Demo:

CleanShot.2024-11-15.at.12.45.36.mp4

greptile-apps

PR Summary

This PR adds Record Create action functionality to the workflow system, allowing users to create new records through workflow automation with a configurable form interface.

Added WorkflowEditActionFormRecordCreate component with dynamic field rendering based on object metadata and variable tag inputs
Implemented CRUD action type handling in workflow diagram generation with RECORD_CRUD.CREATE support and appropriate icons
Added type guard isWorkflowRecordCreateAction for better type safety when handling record creation actions
Renamed workflow step types to action types throughout the codebase for consistency
Needs attention: Form data type naming (SendEmailFormData), ts-expect-error fix, and activeObjectMetadataItems undefined checks

_{12 file(s) reviewed, 11 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-11-15T11:45:22Z

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx

+          case 'RECORD_CRUD.DELETE':
+          case 'RECORD_CRUD.UPDATE': {
+            return null;
+          }


style: Missing icons for DELETE and UPDATE actions could make it harder for users to distinguish between action types. Consider adding distinct icons for these operations.

greptile-apps · 2024-11-15T11:45:23Z

packages/twenty-front/src/modules/workflow/components/WorkflowDiagramStepNodeBase.tsx

        }
      }


logic: Missing break statement after switch case could cause fallthrough to assertUnreachable. Add break or return statement.

greptile-apps · 2024-11-15T11:45:57Z

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormRecordCreate.tsx

+type SendEmailFormData = {
+  objectName: string;
+  [field: string]: unknown;
+};


style: Type name 'SendEmailFormData' is incorrect for this context - should be 'RecordCreateFormData' or similar

greptile-apps · 2024-11-15T11:45:58Z

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormRecordCreate.tsx

+      objectName: activeObjectMetadataItems[0].nameSingular,
+      ...props.action.settings.input.objectRecord,


logic: Potential runtime error if activeObjectMetadataItems is empty - need to handle this case

greptile-apps · 2024-11-15T11:45:58Z

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormRecordCreate.tsx

+              // @ts-expect-error Temporary fix
+              value={formField.value}
+              onChange={(value) => {


syntax: Fix type mismatch between VariableTagInput value prop and formField.value instead of using @ts-expect-error

greptile-apps · 2024-11-15T11:49:14Z

packages/twenty-front/src/modules/workflow/types/Workflow.ts

@@ -30,29 +30,83 @@ export type WorkflowSendEmailStepSettings = BaseWorkflowStepSettings & {
  };
 };

-type BaseWorkflowStep = {
+type ObjectRecord = Record<string, any>;


style: Using Record<string, any> for ObjectRecord loses type safety. Consider using a generic type parameter or more specific record type.

greptile-apps · 2024-11-15T11:49:46Z

packages/twenty-front/src/modules/workflow/utils/generateWorkflowDiagram.ts

+    if (step.type === 'RECORD_CRUD') {
+      nodeActionType = `RECORD_CRUD.${step.settings.input.type}`;
+    } else {


logic: No type checking on step.settings.input.type - could cause runtime errors if input type is undefined

greptile-apps · 2024-11-15T11:50:14Z

packages/twenty-front/src/modules/workflow/utils/getStepDefaultDefinition.ts

+        settings: {
+          input: {
+            type: 'CREATE',
+            objectName: activeObjectMetadataItems[0].nameSingular,


logic: Potential crash if activeObjectMetadataItems is empty array. Add validation or provide fallback.

greptile-apps · 2024-11-15T11:50:42Z

packages/twenty-front/src/modules/workflow/utils/isWorkflowRecordCreateAction.ts

+export const isWorkflowRecordCreateAction = (
+  action: WorkflowAction,
+): action is WorkflowRecordCreateAction => {


style: Consider adding JSDoc documentation to explain the function's purpose and return type

greptile-apps · 2024-11-15T11:51:09Z

packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx

+      stroke={props.color ?? 'currentColor'}
+      strokeWidth={stroke}


logic: stroke attribute should use props.color ?? theme.something as fallback, currently no default if color prop is missing

thomtrp · 2024-11-15T13:53:27Z

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormRecordCreate.tsx

+      value: item.nameSingular,
+    }));
+
+  const form = useForm<SendEmailFormData>({


react hook form has been banned, let's use a normal state 👍

you have an example with WorkflowEditActionFormServerlessFunction

As far as I understand, the WorkflowEditActionFormServerlessFunction component directly sends debounced updates to the backend.

The form I implemented is a bit more complex as I want to synchronously update the available fields based on the selected object type while still debouncing the server update. I wouldn't be able to fully rely on props.action for that. Instead, I will have to create a useState specifically for the object type.

I will use a useState but I think we'll quickly want to create our own tiny form library.

I spotted a bug in the WorkflowEditActionFormServerlessFunction component. I created an issue here: #8523.

We'll have to use a useState in this component as well.

I will do the change on Monday.

...es/twenty-front/src/modules/workflow/components/WorkflowEditActionFormServerlessFunction.tsx

martmull · 2024-11-15T16:55:59Z

Hey, I have tested the functionality, it works well I have 2 remarks:

composite fields are not recursively rendered. Ex with company, only Address field exists, but not subfields addressStreet1, addressStreet2, ... (see packages/twenty-server/src/engine/metadata-modules/field-metadata/composite-types/address.composite-type.ts)
there is a separator missing between object, and generated fields (see https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=45225-479230&node-type=frame&t=spN9UE00UdvOjP4X-0)

martmull

Hey, nice job, I have left some comments

packages/twenty-front/src/modules/workflow/components/WorkflowEditActionFormRecordCreate.tsx

martmull · 2024-11-15T17:05:42Z

packages/twenty-front/src/modules/workflow/components/WorkflowStepDetail.tsx

+              <WorkflowEditActionFormRecordCreate
+                action={stepDefinition.definition}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}


think we should avoid props spreading. It lower the readability of the code
just pass all

Suggested change

{...props}

stepId={stepId}

workflowVersion={workflowVersion}

readonly={readonly}

onTriggerUpdate={onTriggerUpdate}

onActionUpdate={onActionUpdate}

I will do the change on Monday.

This won't work easily. I wrote a type union for WorkflowEditTriggerDatabaseEventForm props to have really strong types and prevent edge cases. This won't play well if I provide properties the usual way instead of spreading props.

twenty/packages/twenty-front/src/modules/workflow/components/WorkflowEditTriggerDatabaseEventForm.tsx

Lines 48 to 59 in 65f47b6

type WorkflowEditTriggerDatabaseEventFormProps =

| {

trigger: WorkflowDatabaseEventTrigger;

readonly: true;

onTriggerUpdate?: undefined;

}

| {

trigger: WorkflowDatabaseEventTrigger;

readonly?: false;

onTriggerUpdate: (trigger: WorkflowDatabaseEventTrigger) => void;

};

Here, the props object is a type union. If I provide the properties of this object individually, I will loose the type union and, for instance, props.readonly will be a boolean.

This component serves as a dispatcher. I think it's better to have strong types than to provide props as usually recommended.

Another way to keep the benefits without disabling the ESLint rule would be to have a single prop containing readonly, onTriggerUpdate, onActionUpdate:

<WorkflowStepDetail xxx={{ readonly: true }} /> <WorkflowStepDetail xxx={{ onActionUpdate: yyy, onTriggerUpdate: zzz }} />

Ok for the

<WorkflowStepDetail xxx={{ readonly: true }} /> <WorkflowStepDetail xxx={{ onActionUpdate: yyy, onTriggerUpdate: zzz }} />

solution

…nder

thomtrp

LGTM, just move the FormFieldInput to the other folder please ✅

thomtrp · 2024-11-18T14:24:04Z

packages/twenty-front/src/modules/workflow/components/FormFieldInput.tsx

+type FormFieldInputProps = {
+  recordFieldInputdId: string;
+  label: string;
+  value: string;


will probably come from a context but this is ok for now

thomtrp · 2024-11-18T14:25:28Z

packages/twenty-front/src/modules/workflow/components/FormFieldInput.tsx

+  isReadOnly?: boolean;
+};
+
+export const FormFieldInput = ({


That component is not workflow specific. Could you move it next to FieldInput.tsx 🙏

thomtrp · 2024-11-18T14:30:17Z

packages/twenty-front/src/modules/workflow/components/FormFieldInput.tsx

@@ -0,0 +1,26 @@
+import VariableTagInput from '@/workflow/search-variables/components/VariableTagInput';


we need that component and the variables handling to be outside of workflows. But not for this PR!

I will move the file next to the FieldInput file.

martmull

LGTM

github-actions · 2024-11-18T17:24:52Z

Thanks @Devessier for your contribution!
This marks your 27th PR on the repo. You're top 2% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter

Devessier added 6 commits November 13, 2024 18:04

refactor: rename some types

845f0ec

feat: update types and components to include crud actions

315b8fc

feat: make Record Create actions recognizable

50e0895

feat: start creating the form for record create action

d157b21

feat: wire the record create edit form to the backend

67d8290

fix: add a default value for stroke property to the icon

33c688a

greptile-apps bot reviewed Nov 15, 2024

View reviewed changes

thomtrp reviewed Nov 15, 2024

View reviewed changes

martmull reviewed Nov 15, 2024

View reviewed changes

Devessier added 2 commits November 18, 2024 13:35

refactor: replace react-hook-form with a useState

3f0ea86

feat: scaffold abstract component determining which field input to re…

65f47b6

…nder

thomtrp approved these changes Nov 18, 2024

View reviewed changes

charlesBochet assigned Devessier Nov 18, 2024

charlesBochet added the -PR: awaiting author label Nov 18, 2024

Devessier added 3 commits November 18, 2024 17:08

refactor: move FormFieldInput file

05b3661

refactor: stop spreading props and pass an options object down the tree

7cc6932

feat: add hr between object select and generated fields

13ddd2d

Devessier added -PR: awaiting review and removed -PR: awaiting author labels Nov 18, 2024

martmull approved these changes Nov 18, 2024

View reviewed changes

Weiko merged commit c17e18b into main Nov 18, 2024
19 checks passed

Weiko deleted the add-create-record-action branch November 18, 2024 17:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Record Create action in the frontend #8514

Add Record Create action in the frontend #8514

Devessier commented Nov 15, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

greptile-apps bot Nov 15, 2024

thomtrp Nov 15, 2024

thomtrp Nov 15, 2024

Devessier Nov 15, 2024

Devessier Nov 15, 2024

Devessier Nov 15, 2024

Devessier Nov 18, 2024

martmull commented Nov 15, 2024 •

edited

Loading

martmull left a comment

martmull Nov 15, 2024

Devessier Nov 15, 2024

Devessier Nov 18, 2024

Devessier Nov 18, 2024

Devessier Nov 18, 2024

martmull Nov 18, 2024

Devessier Nov 18, 2024

thomtrp left a comment

thomtrp Nov 18, 2024

thomtrp Nov 18, 2024

thomtrp Nov 18, 2024

Devessier Nov 18, 2024

martmull left a comment

github-actions bot commented Nov 18, 2024

		objectName: activeObjectMetadataItems[0].nameSingular,
		...props.action.settings.input.objectRecord,

-                {...props}
+      stepId={stepId}
+      workflowVersion={workflowVersion}
+      readonly={readonly}
+      onTriggerUpdate={onTriggerUpdate}
+      onActionUpdate={onActionUpdate}

	type WorkflowEditTriggerDatabaseEventFormProps =
	\| {
	trigger: WorkflowDatabaseEventTrigger;
	readonly: true;
	onTriggerUpdate?: undefined;
	}
	\| {
	trigger: WorkflowDatabaseEventTrigger;
	readonly?: false;
	onTriggerUpdate: (trigger: WorkflowDatabaseEventTrigger) => void;
	};

		@@ -0,0 +1,26 @@
		import VariableTagInput from '@/workflow/search-variables/components/VariableTagInput';

Add Record Create action in the frontend #8514

Add Record Create action in the frontend #8514

Conversation

Devessier commented Nov 15, 2024 • edited Loading

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Nov 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martmull commented Nov 15, 2024 • edited Loading

martmull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thomtrp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

martmull left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 18, 2024

Devessier commented Nov 15, 2024 •

edited

Loading

martmull commented Nov 15, 2024 •

edited

Loading