Add Select form field #8815

Devessier · 2024-11-29T17:00:33Z

I took inspiration from existing parts of the codebase. Please, see the comments I left below.

Remaining questions:

I'm not sure about the best way to handle hotkey scopes in the components easily

CleanShot.2024-12-02.at.17.35.16.mp4

Devessier · 2024-12-02T16:25:11Z

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

+
+              {draftValue.editingMode === 'edit' ? (
+                <SelectableList
+                  selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}


Not sure about the id to use here.

Devessier · 2024-12-02T16:29:20Z

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

+}: FormSelectFieldInputProps) => {
+  const inputId = useId();
+
+  const hotkeyScope = InlineCellHotkeyScope.InlineCell;


We might want to create another scope

greptile-apps

PR Summary

This PR introduces a new select form field component and integrates it into the existing form system, with support for variable picking and keyboard navigation.

Added new FormSelectFieldInput.tsx component with hotkey scope management and variable support
Modified FormFieldInput.tsx to handle select fields using isFieldSelect guard
Updated WorkflowEditActionFormRecordCreate.tsx to support metadata-driven select fields
Added type safety improvements by replacing FieldMetadataItem with FieldDefinition<FieldMetadata>
Implemented keyboard navigation and filtering in select field component following existing patterns

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

greptile-apps · 2024-12-02T16:39:07Z

packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx

@@ -23,7 +26,6 @@ export const FormFieldInput = ({
 }: FormFieldInputProps) => {
  return isFieldNumber(field) ? (
    <FormNumberFieldInput
-      key={field.id}
      label={field.label}
      defaultValue={defaultValue as string | number | undefined}


logic: type assertion could be unsafe here - consider adding runtime type checking before the cast

greptile-apps · 2024-12-02T16:39:10Z

packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx

+      onPersist={onPersist}
+      field={field}
+      VariablePicker={VariablePicker}
+    />
  ) : null;


style: consider throwing an error for unhandled field types instead of silently returning null

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

greptile-apps · 2024-12-02T16:39:46Z

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

+  const onCancel = () => {
+    if (draftValue.type !== 'static') {
+      throw new Error('Can only be called when editing a static value');
+    }


style: Consider handling this error case more gracefully instead of throwing - could lead to runtime crashes if state gets corrupted

greptile-apps · 2024-12-02T16:39:47Z

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

+  const optionIds = [
+    `No ${field.label}`,
+    ...filteredOptions.map((option) => option.value),
+  ];


logic: optionIds includes 'No {field.label}' but this ID isn't handled in handleSelectEnter - could cause undefined behavior

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

martmull

Nice work, some comments

martmull · 2024-12-03T09:40:05Z

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

+                  <Tag
+                    preventShrink
+                    color={selectedOption.color}
+                    text={selectedOption.label}
+                  />


can you use <SelectFieldDisplay component here?

I've considered using the existing FieldInput components; however, they rely on the FieldContext. See the useSelectField and useSelectFieldDisplay hooks. We don't currently provide this context. If we do, we will couple the FormFieldInputs with the usual FieldInputs. This might be considered, but it is an opinionated choice.

I duplicated most of SelectFieldInput's code. We might reconsider this and find a way to reduce the code.

we might create a new components to decouple the component design definition from the fieldContext. Thus we will be able to factorize

I created a component to unify what we display for the display mode of a select input.

nice, is it possible to do the same with the input mode?

Would you like to extract this part?

<SelectableList selectableListId={SINGLE_RECORD_SELECT_BASE_LIST} selectableItemIdArray={optionIds} hotkeyScope={hotkeyScope} onEnter={(itemId) => { const option = filteredOptions.find( (option) => option.value === itemId, ); if (isDefined(option)) { onSubmit?.(() => persistField(option.value)); resetSelectedItem(); } }} > <SelectInput parentRef={selectWrapperRef} onOptionSelected={handleSubmit} options={fieldDefinition.metadata.options} onCancel={onCancel} defaultOption={selectedOption} onFilterChange={setFilteredOptions} onClear={ fieldDefinition.metadata.isNullable ? handleClearField : undefined } clearLabel={fieldDefinition.label} hotkeyScope={hotkeyScope} /> </SelectableList>

I'm not sure it would be great, as I would end up with a component taking +10 unrelated props.

For me, the SelectableList and SelectInput components are well enough abstracted. They own the design decisions. These two components are meta components with business logic. I don't think we need to go deeper into the refactoring.

I think yes you should extract this part into packages/twenty-front/src/modules/ui/field/input/components in a SelectInput component and use that in FormSelectFieldInput and in SelectFieldInput

Like this, the way to display or modify a SELECT value is uniquely defined throughout the application

martmull · 2024-12-03T09:41:00Z

...-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

+              </StyledDisplayModeContainer>
+
+              {draftValue.editingMode === 'edit' ? (
+                <SelectableList


same here, can you use <SelectFieldInput component?

The same reasoning applies here: #8815 (comment)

martmull · 2024-12-03T09:51:52Z

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

+  const availableFieldMetadataItems = objectMetadataItem.fields
+    .filter(
+      (fieldMetadataItem) =>
+        fieldMetadataItem.type !== FieldMetadataType.Relation &&
+        !fieldMetadataItem.isSystem &&
+        fieldMetadataItem.isActive,
+    )
+    .sort((fieldMetadataItemA, fieldMetadataItemB) =>


@thomtrp, we should not forget to do that also for Update Action when developed

…et complete definitions

…de the next draft value we set in the clearField function

…ect field

martmull · 2024-12-03T14:29:10Z

...dules/object-record/record-field/meta-types/display/components/SelectFieldDisplayContent.tsx

+import { Tag, ThemeColor } from 'twenty-ui';
+
+type SelectFieldDisplayContentProps = {
+  color: ThemeColor;
+  label: string;
+};
+
+export const SelectFieldDisplayContent = ({
+  color,
+  label,
+}: SelectFieldDisplayContentProps) => {
+  return <Tag preventShrink color={color} text={label} />;
+};


think you should move that to packages/twenty-front/src/modules/ui/field/display/components and call it SelectDisplay

…input

Devessier added the -PR: wip label Nov 29, 2024

Devessier self-assigned this Nov 29, 2024

Devessier commented Dec 2, 2024

View reviewed changes

Devessier marked this pull request as ready for review December 2, 2024 16:38

greptile-apps bot reviewed Dec 2, 2024

View reviewed changes

martmull reviewed Dec 3, 2024

View reviewed changes

Devessier added 5 commits December 3, 2024 11:14

feat: scaffold a basic FormSelectFieldInput

8346cd1

feat: style the container of display value for form field select

5c4215d

feat: take inspiration from record inline cell field definitions to g…

dcc34c0

…et complete definitions

feat: integrate hotkey scope with the select component

aafb8b1

refactor: move callbacks in separate function declarations

943dca6

Devessier force-pushed the add-select-form-field branch from 664c2b7 to 943dca6 Compare December 3, 2024 10:15

Devessier added 5 commits December 3, 2024 11:15

fix: as we rely on a single React state, calling onCancel will overri…

f0eff4a

…de the next draft value we set in the clearField function

fix: be sure to persist the updated value when clearing the field

f45a086

refactor: remove unnecessary optional chaining

a232c2a

refactor: remove unnecessary filter

bedc6f1

refactor: unify the component displayed for the display mode of a sel…

5c22366

…ect field

martmull reviewed Dec 3, 2024

View reviewed changes

Devessier added 4 commits December 3, 2024 15:29

fix: put the operand on the key and not the value

e958d17

fix: improve the design of SortOfFilterChip to match the Figma design

6ea272e

refactor: unify the component used to render the input for select fields

b7678cb

refactor: rename the component used to display the value of a select …

278d2f1

…input

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Select form field #8815

Add Select form field #8815

Devessier commented Nov 29, 2024 •

edited

Loading

Devessier Dec 2, 2024

Devessier Dec 2, 2024

greptile-apps bot left a comment

greptile-apps bot Dec 2, 2024

greptile-apps bot Dec 2, 2024

greptile-apps bot Dec 2, 2024

greptile-apps bot Dec 2, 2024

martmull left a comment

martmull Dec 3, 2024

Devessier Dec 3, 2024

martmull Dec 3, 2024

Devessier Dec 3, 2024

martmull Dec 3, 2024

Devessier Dec 3, 2024

Devessier Dec 3, 2024

martmull Dec 3, 2024

martmull Dec 3, 2024

martmull Dec 3, 2024

Devessier Dec 3, 2024

martmull Dec 3, 2024

martmull Dec 3, 2024

Add Select form field #8815

Are you sure you want to change the base?

Add Select form field #8815

Conversation

Devessier commented Nov 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Dec 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 2, 2024

Choose a reason for hiding this comment

greptile-apps bot Dec 2, 2024

Choose a reason for hiding this comment

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

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

Devessier commented Nov 29, 2024 •

edited

Loading