Make record name editable on show page #9172
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR adds record name editing functionality in the show page header and breadcrumb navigation, with conditional rendering based on field visibility.
- Added new
RecordEditableNamecomponent in/pages/object-record/RecordEditableName.tsxfor inline name editing with proper loading states - Modified
RecordShowPageHeaderto conditionally render editable name whenlayout.hideSummaryAndFieldsis true - Made
Iconprop optional inNavigationDrawerInputandNavigationDrawerItemcomponents to support breadcrumb editing - Added Storybook story with GraphQL mocks to test
RecordEditableNamerendering and interactions - Exposed
objectMetadataItemthroughuseRecordShowPagePaginationhook to support metadata access for name editing
8 file(s) reviewed, 6 comment(s)
Edit PR Review Bot Settings | Greptile
| graphql.query('FindOneWorkflow', () => { | ||
| return HttpResponse.json({ | ||
| data: { | ||
| workflow: { | ||
| __typename: 'Workflow', | ||
| id: '1', | ||
| name: 'My Workflow', | ||
| }, | ||
| }, | ||
| }); | ||
| }), |
There was a problem hiding this comment.
logic: mock response missing mutation handler for updating the workflow name
| const { layout } = useRecordShowContainerTabs( | ||
| false, | ||
| objectNameSingular as CoreObjectNameSingular, | ||
| false, | ||
| objectMetadataItem, | ||
| ); |
There was a problem hiding this comment.
style: useRecordShowContainerTabs is called with hardcoded false values that could be derived from props or context
| @@ -17,13 +20,33 @@ export const RecordShowPageHeader = ({ | |||
| navigateToPreviousRecord, | |||
| navigateToNextRecord, | |||
| navigateToIndexView, | |||
| objectMetadataItem, | |||
There was a problem hiding this comment.
logic: objectMetadataItem is now used but not type-checked - could be undefined from useRecordShowPagePagination
| }, | ||
| }); | ||
|
|
||
| const [recordName, setRecordName] = useState(record?.name); |
There was a problem hiding this comment.
logic: recordName state initialized with record?.name before record is loaded. Could cause undefined initial state. Move this initialization into the useEffect or set an empty string as initial value.
| objectMetadataItem, | ||
| ); | ||
|
|
||
| const hasEditableName = layout.hideSummaryAndFields === true; |
There was a problem hiding this comment.
logic: layout.hideSummaryAndFields could be undefined - needs null check or default value
| const handleSubmit = (value: string) => { | ||
| updateOneRecord({ | ||
| idToUpdate: objectRecordId, | ||
| updateOneRecordInput: { | ||
| name: value, | ||
| }, | ||
| }); | ||
| setIsRenaming(false); | ||
| }; |
There was a problem hiding this comment.
style: handleSubmit should validate that value is not empty/whitespace before updating. Also consider adding error handling for failed updates.
thomtrp
force-pushed
the
tt-make-record-name-editable-in-breadcumb
branch
from
7c110c7 to
7c19f5e
Compare
thomtrp
force-pushed
the
tt-make-record-name-editable-in-breadcumb
branch
from
7c19f5e to
9a5a87e
Compare
When fields are not displayed in show page, title should be editable
Enregistrement.de.l.ecran.2024-12-20.a.16.04.24.mov