feat: Add a way to rename files from View header#588
Conversation
going-confetti
force-pushed
the
filename-header
branch
from
ac172a9 to
dbc230d
Compare
going-confetti
force-pushed
the
filename-header
branch
from
dbc230d to
7c51773
Compare
| interface FileNameHeaderProps { | ||
| file: StudioFile | ||
| isDirty?: boolean | ||
| showExt?: boolean |
|
|
||
| interface FileNameHeaderProps { | ||
| file: StudioFile | ||
| isDirty?: boolean |
| showExt?: boolean | ||
| } | ||
|
|
||
| export function FileNameHeader({ |
There was a problem hiding this comment.
Not sure if it's the best name, but we only have views that represent files, so I think it's fine
| fileName, | ||
| displayName: getFileNameWithoutExtension(fileName), |
There was a problem hiding this comment.
Note: this is getting repetitive and is fairly error-prone - displayName is always (at least for now) the same as the file name without the extension, so it can be easily derived from it without the need to keep both values in sync.
| <> | ||
| {getFileNameWithoutExtension(fileName)} {isDirty && '*'} | ||
| </> | ||
| <FileNameHeader |
There was a problem hiding this comment.
This also fixes a recent regression that made it impossible to see the full file name if it overflows
|
|
||
| const handleSave = async (newValue: string) => { | ||
| const newFileName = `${newValue}.${fileExtension}` | ||
| const newFileName = `${newValue.trim()}.${fileExtension}` |
There was a problem hiding this comment.
Without this, it's easy to have multiple files with different names that look the same (e.g. generator.k6g and generator .k6g)
going-confetti
changed the title
| onOpenChange: (open: boolean) => void | ||
| } | ||
|
|
||
| function RenameFileDialog({ file, open, onOpenChange }: RenameFileDialogProps) { |
There was a problem hiding this comment.
I wanted to have some kind of an inline text input, but didn't have time to implement it the right way 🫤
e-fisher
left a comment
e-fisher
left a comment
There was a problem hiding this comment.
Works great! 🙌 Have a few suggestions regarding UI:
- The dialog seems a bit overkill here, maybe Popover would be a better fit?
- Validation errors are displayed as toasts and a covered with dialog's overlay, inline validation could look better. Although, it becomes less of a problem if we switch to popover.
Looks better indeed 👍
I'll switch to popover |
| } | ||
|
|
||
| return ( | ||
| <Popover.Root open={isOpen} onOpenChange={setIsOpen}> |
3 participants
Closes #318
Description
Makes it much easier to rename a file, which should ideally nudge the users to give files names that are more meaningful than the auto generated ones.
Testing instructions