[Fix] Prevent empty name category from being added (#3761)

* Fix: Prevent empty name category from being added

* Refactor: Trim input to prevent category name with blank spaces only

* Refactor: Remove unnecessary optional chaining operator

* Test: Add E2E scenario for disable "Add" category button when empty name is presented

* Refactor: Change test scenario comment

e2e/categories.spec.ts

@@ -15,6 +15,9 @@ electronTest('categories', async (app) => {
 
     await expect(dialog.getByText('No categories yet.')).toBeInViewport()
 
+    // add button should be disabled without a name
+    await expect(dialog.getByTitle('Add', { exact: true })).toBeDisabled()
+
     // add new category
     await dialog.getByPlaceholder('Add new category').fill('Great games')
     await dialog.getByTitle('Add', { exact: true }).click()
@@ -23,8 +26,20 @@ electronTest('categories', async (app) => {
       dialog.locator('span', { hasText: 'Great games' })
     ).toBeInViewport()
 
-    // rename category
+    // add button should be disable if trying to rename category to same name
     await dialog.getByTitle('Rename "Great games"').click()
+    await dialog.getByLabel('Rename "Great games"').fill('Great games')
+    await expect(dialog.getByTitle('Add', { exact: true })).toBeDisabled()
+
+    // add button should be disabled if trying to rename category to empty string
+    await dialog.getByLabel('Rename "Great games"').fill('')
+    await expect(dialog.getByTitle('Add', { exact: true })).toBeDisabled()
+
+    // add button should be disabled if trying to rename category to empty spaces
+    await dialog.getByLabel('Rename "Great games"').fill('   ')
+    await expect(dialog.getByTitle('Add', { exact: true })).toBeDisabled()
+
+    // rename category
     await dialog.getByLabel('Rename "Great games"').fill('Amazing games')
     await dialog
       .getByTitle('Confirm rename of "Great games" as "Amazing games"')

src/frontend/screens/Library/components/CategoriesManager/index.tsx

@@ -30,6 +30,8 @@ function CategoryItem({
   const [renameMode, setRenameMode] = useState(false)
   const [newName, setNewName] = useState(name)
   const [removeMode, setRemoveMode] = useState(false)
+  const isNewNameEmptyOrEqualsOldName =
+    newName.trim() === '' || newName === name
 
   const rename = () => {
     renameFunction(name, newName)
@@ -57,6 +59,7 @@ function CategoryItem({
             'Confirm rename of "{{oldName}}" as "{{newName}}"',
             { oldName: name, newName }
           )}
+          disabled={isNewNameEmptyOrEqualsOldName}
         >
           <FontAwesomeIcon icon={faCheck} />
         </button>
@@ -157,6 +160,8 @@ function CategoriesManager() {
 
   const [newCategoryName, setNewCategoryName] = useState('')
 
+  const isCategoryNameEmpty = newCategoryName.trim() === ''
+
   const removeCategory = (cat: string) => {
     customCategories.removeCategory(cat)
   }
@@ -206,6 +211,7 @@ function CategoriesManager() {
               className="button"
               onClick={() => addCategory()}
               title={t('categories-manager.add', 'Add')}
+              disabled={isCategoryNameEmpty}
             >
               <FontAwesomeIcon icon={faAdd} />
             </button>