From d1ae76fcee6368e63c78408f3001e48d477b2345 Mon Sep 17 00:00:00 2001
From: Russell Dempsey <1173416+SgtPooki@users.noreply.github.com>
Date: Wed, 5 Mar 2025 07:35:43 -0600
Subject: [PATCH] chore: minor ux fixes

---
 public/locales/en/files.json                       | 3 ++-
 src/files/modals/add-by-car-modal/AddByCarModal.js | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index ddc652288..2ffba5ba2 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -65,7 +65,8 @@
     "title": "CAR Import",
     "description": "Choose a CAR file to import a DAG from and specify a name for it to be imported into the current directory.",
     "selectCARButtonText": "Select CAR…",
-    "namePlaceholder": "Name"
+    "namePlaceholder": "Name",
+    "renameImportPath": "Rename import"
   },
   "bulkImportModal": {
     "title": "Bulk import with text file",
diff --git a/src/files/modals/add-by-car-modal/AddByCarModal.js b/src/files/modals/add-by-car-modal/AddByCarModal.js
index dda351a00..32d703976 100644
--- a/src/files/modals/add-by-car-modal/AddByCarModal.js
+++ b/src/files/modals/add-by-car-modal/AddByCarModal.js
@@ -58,10 +58,12 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
     <Modal className={className} onCancel={onCancel}>
       <ModalBody title={t('addByCarModal.title')} Icon={Icon}>
         <div className='mb3 flex flex-row items-center'>
-          <p className='mt0 charcoal tl w-90'>{t('addByCarModal.description')}</p>
+          <p className='mt0 center charcoal tl w-90'>{t('addByCarModal.description')}</p>
         </div>
 
+        <label htmlFor='import-car-file-name' className='mt0 f7 center charcoal-muted tl w-90'>{t('addByCarModal.renameImportPath')}</label>
         <input
+          id='import-car-file-name'
           onChange={onNameChange}
           value={name}
           name='name'
@@ -80,6 +82,11 @@ const AddByCarModal = ({ t, className, onCancel, onSubmit, ...props }) => {
           onChange={onFileInputChange}
         />
         <Button className='ma2 tc' bg='bg-teal' onClick={onAddFileButtonClick}>{t('addByCarModal.selectCARButtonText')}</Button>
+        {/* Gray text showing original car file name */}
+        { file != null
+          ? <div className='mt1 f7 center charcoal-muted tl w-90'>{file.path}</div>
+          : null
+        }
       </ModalBody>
 
       <ModalActions>