[feature]:Improved Options Menu for Default View #13427
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR improves the user experience for the default view options menu by implementing a cleaner, more intuitive interface. The main changes include:
Core Functionality Changes:
- Replaced the original options menu for default views with a simplified version that removes confusing disabled options (layout, group by, delete view)
- Added a new
DefaultViewHeadercomponent that displays "Default View" with a lock icon to communicate that default views aren't customizable - Introduced a "Create custom view" option that opens a dialog for users to create customizable views
- Created a new
ObjectOptionsDropdownCreateCustomViewContentcomponent to handle custom view scenarios with full options
User Experience Improvements:
- Auto-focus functionality added to text inputs when editing custom views for better interaction flow
- Conditional rendering logic to switch between simplified default view menu and full custom view creation flow
- Clear visual indicators (lock icon) to communicate view limitations
- Reduced cognitive load by only showing relevant options for default views (Fields, Copy link, Create custom view)
Code Structure:
The implementation uses React best practices with proper state management via useState hooks, maintains existing functionality while improving discoverability, and follows the established component patterns in the codebase using SelectableList and MenuItem components.
PR Description Notes:
- Demo video provided shows the functionality working as intended
Confidence score: 3/5
- This PR has some implementation issues that should be addressed before merging, particularly around component naming, code duplication, and hardcoded values.
- The score reflects concerns about component naming mismatches, duplicated clipboard logic, inconsistent grouping logic, and missing internationalization for user-facing text.
- Files needing more attention:
ObjectOptionsDropdownCreateCustomViewContent.tsxfor naming and logic issues, andObjectOptionsDropdownMenuContent.tsxfor missing i18n translation.
3 files reviewed, 6 comments
| return ( | ||
| <DropdownMenuItemsContainer scrollable={false}> | ||
| <MenuItem | ||
| text="Default View" |
There was a problem hiding this comment.
style: text should use translation with tDefault View instead of hardcoded string
| text="Default View" | |
| text={t`Default View`} |
| } from 'twenty-ui/display'; | ||
| import { MenuItem } from 'twenty-ui/navigation'; | ||
|
|
||
| const DefaultViewHeader = ({ currentView }: { currentView: any }) => { |
There was a problem hiding this comment.
style: component props should use proper TypeScript interface instead of any type
| export const ObjectOptionsDropdownMenuContentCustom = ({ | ||
| onBackToDefault | ||
| }: ObjectOptionsDropdownMenuContentCustomProps) => { |
There was a problem hiding this comment.
syntax: Component name doesn't match filename - should be ObjectOptionsDropdownCreateCustomViewContent based on the file path, not ObjectOptionsDropdownMenuContentCustom
| export const ObjectOptionsDropdownMenuContentCustom = ({ | |
| onBackToDefault | |
| }: ObjectOptionsDropdownMenuContentCustomProps) => { | |
| export const ObjectOptionsDropdownCreateCustomViewContent = ({ | |
| onBackToDefault | |
| }: ObjectOptionsDropdownMenuContentCustomProps) => { |
| const customViewData = currentView ? { | ||
| ...currentView, | ||
| key: 'CUSTOM' as ViewKey, | ||
| name: currentView.name || 'Custom View' | ||
| } : null; |
There was a problem hiding this comment.
logic: Hardcoding key: 'CUSTOM' as ViewKey may be incorrect - this should use the actual view's key or handle the transformation properly
| const isGroupByEnabled = | ||
| (isDefined(customViewData?.viewGroups) && customViewData.viewGroups.length > 0) || | ||
| customViewData?.key !== 'INDEX'; |
There was a problem hiding this comment.
logic: Logic inconsistency: isGroupByEnabled checks viewGroups length AND key !== 'INDEX', but line 83 uses customViewData?.key === 'INDEX' for isDefaultView. Should use consistent logic.
| {!isGroupByEnabled && ( | ||
| <AppTooltip | ||
| anchorSelect={`#group-by-menu-item`} | ||
| content={t`Not available on Default View`} | ||
| noArrow | ||
| place="bottom" | ||
| width="100%" | ||
| /> | ||
| )} |
There was a problem hiding this comment.
logic: Tooltip condition !isGroupByEnabled doesn't match the message 'Not available on Default View' - should check isDefaultView instead
|
🚀 Preview Environment Ready! Your preview environment is available at: http://bore.pub:44077 This environment will automatically shut down when the PR is closed or after 5 hours. |
Feature - Improved Options Menu for Default View
Closes - #13306
Description
This PR fixes the feature request of Better Options in the Default View.
Added the option of Create a Custom View in the Options, this helps user create custom views.
Working Demo
OS3.mp4