Redirect to select option creation when no result

[animesh65432]

fix:Ability to add a new option for a multi-select on the fly
Issues:#13877

[greptile-apps]

Greptile Summary

This PR implements the ability to add new multi-select options on-the-fly, addressing issue #13877 to improve the user experience from a cumbersome 7-step process to a streamlined workflow similar to AirTable's functionality.

The implementation works by adding a "No results" + "Add option" interface in the filter dropdown that appears when users search for non-existent options. When clicked, it navigates to the field settings page with the new option name passed via React Router's location state, where a useEffect hook automatically detects and creates the new option.

Key changes include:

• New Component: ObjectFilterDropdownCreateNewOption displays the "Add option" interface with permission checks
• Enhanced Existing Components: ObjectFilterDropdownOptionSelect now conditionally renders the new option creation component when no results are found
• Automatic Option Creation: SettingsDataModelFieldSelectForm detects new options via location state and automatically adds them to the form
• Utility Enhancement: generateNewSelectOption now accepts an optional name parameter for custom option labels
• Code Cleanup: Minor whitespace cleanup in useUpdateOneFieldMetadataItem

The solution maintains existing permissions through the DATA_MODEL flag and integrates with the current settings infrastructure while providing a seamless user experience for dynamic option creation.

PR Description Notes:

• Contains a typo: "fix:Ability" should be "fix: Ability" (missing space after colon)
• Issue reference format could be improved: "Issues:#13877" should be "Issues: #13877"

Confidence score: 3/5

• This PR has moderate risk due to several implementation concerns that could cause issues in production
• Score reflects reliance on potentially unreliable navigation state mechanism and inconsistent coding patterns that don't follow established conventions
• Pay close attention to the navigation state handling in SettingsDataModelFieldSelectForm.tsx and the naming conventions in ObjectFilterDropdownCreateNewOption.tsx

Context used:

Rule - Extract utility functions like 'includesExpectedScopes' to utils modules instead of keeping them in service classes. (link)
Rule - Error messages should be user-friendly rather than technical. Avoid technical jargon like 'missing scopes' in user-facing error messages. (link)
Context - Avoid using abbreviations in the codebase; prefer full descriptive names, e.g., use 'record' instead of 'r'. (link)
Context - Use 'type' instead of 'interface' for type definitions in the project. (link)
Context - When using styled components, prefer to use theme spacing directly in calculations instead of wrapping them in template literals. (link)
Context - Use TypeScript interface definitions for component props to enhance maintainability. (link)
Context - Always consider adding tests for new functionality, especially for edge cases like empty responses. (link)

_{5 files reviewed, 6 comments}

_{Edit Code Review Bot Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:36863

This environment will automatically shut down when the PR is closed or after 5 hours.

[animesh65432]

@FelixMalfait I’ve run all the tests and they all passed and remove useEffect— can you check it now ?

[FelixMalfait]

Hey @animesh65432 could you please merge main and fix conclits? The tests can't run otherwise. I haven't tested the PR yet it was just preliminary comments. Thanks!

[animesh65432]

@FelixMalfait check it now

[ehconitin]

does not work for me!

[ehconitin]

Ah you added it on filter lol

[ehconitin]

I am taking over! The idea was correct, just in the wrong place
thanks @animesh65432

[animesh65432]

@ehconitin can i do it

[animesh65432]

sorry can i fix it

[ehconitin]

@animesh65432 don't be! Yes, of course you can try! I will wait on the push till tomorrow

[ehconitin]

@greptileai trigger

[greptile-apps]

Greptile Summary

This review covers only the changes made since the last review, not the entire PR. The latest changes focus on implementing a comprehensive solution for adding multi-select options on-the-fly, addressing issue #13877. The implementation allows users to create new select options directly from field inputs without navigating through the lengthy settings workflow.

The key architectural change involves updating the navigationMemorizedUrlState from a simple string to an object structure containing both a url property and an optional isAddingFieldOption boolean flag. This enables the application to track navigation context when users are redirected to create new options and ensures they return to their original location afterward.

The feature is implemented across multiple layers: input components (SelectFieldInput, MultiSelectFieldInput, SelectInput, MultiSelectInput) now accept an optional onAddSelectOption prop that triggers navigation to the field edit page with the desired option name passed via router state. The SettingsDataModelFieldSelectForm component automatically detects this state and creates a new option using the existing generateNewSelectOption utility. The SettingsObjectFieldEdit component handles the return navigation by checking the isAddingFieldOption flag and redirecting users back to their memorized URL.

A new AddSelectOptionMenuItem component provides the UI for creating options when no search results are found. The useUpdateOneFieldMetadataItem hook was enhanced to refresh related views after field updates, ensuring consistency across the application. All changes maintain backward compatibility through optional props and follow the established patterns in the codebase.

Confidence score: 4/5

• This PR significantly improves user experience but introduces complex navigation state management that requires careful testing
• Score reflects well-structured implementation following existing patterns, but the complexity of navigation flow between multiple components needs thorough validation
• Pay close attention to the navigation state management in SettingsObjectFieldEdit.tsx and ensure all navigation flows work correctly across different user paths

_{21 files reviewed, 4 comments}

_{Edit Code Review Bot Settings | Greptile}

[ehconitin]

I couldn't think of a generic naming here! Any suggestions?

[FelixMalfait]

This seems much too specific too be in a NavigationMemorizedUrl ; it doesn't seem like the right approach

[ehconitin]

Should we use a seperate state for this use case?
We definitely want it to be specific, because we would need to know if we want to navigate to objects field table page or go back to the view?

[ehconitin]

Ah may be shouldNavigateBackToViewOnSave?

And keep it a diff state?

[lucasbordeau]

Agree we should revert everything around this modification including this,

[ehconitin]

I am struggling to make the form dirty when we navigate to settings on click.
Right now, we have to manually edit something in the form to get the save button, which is annoying!

[animesh65432]

@ehconitin okay i will try to fix it

[ehconitin]

@animesh65432 I dont think its possible without a hacky solution! lets wait for a review from a third person before we make anymore changes to keep PR clean! thanks!

[animesh65432]

@ehconitin okay

[lucasbordeau]

Try by creating an independant atom for this

[lucasbordeau]

Agree we should revert everything around this modification including this,

[lucasbordeau]

The save / cancel buttons should be enabled when we land on the settings page, right now we have to modify something to have save passing from disabled to enabled.

[lucasbordeau]