Trim custom list names in gui

Author: hulthe

gui/src/renderer/components/select-location/CustomListDialogs.tsx

@@ -147,21 +147,25 @@ export function EditListDialog(props: EditListProps) {
   const { updateCustomList } = useAppContext();
 
   const [newName, setNewName] = useState(props.list.name);
+  const newNameTrimmed = newName.trim();
+  const newNameValid = newNameTrimmed !== '';
   const [error, setError, unsetError] = useBoolean();
 
   // Update name in list and save it.
   const save = useCallback(async () => {
-    try {
-      const updatedList = { ...props.list, name: newName };
-      const result = await updateCustomList(updatedList);
-      if (result && result.type === 'name already exists') {
-        setError();
-      } else {
-        props.hide();
+    if (newNameValid) {
+      try {
+        const updatedList = { ...props.list, name: newNameTrimmed };
+        const result = await updateCustomList(updatedList);
+        if (result && result.type === 'name already exists') {
+          setError();
+        } else {
+          props.hide();
+        }
+      } catch (e) {
+        const error = e as Error;
+        log.error(`Failed to edit custom list ${props.list.id}: ${error.message}`);
       }
-    } catch (e) {
-      const error = e as Error;
-      log.error(`Failed to edit custom list ${props.list.id}: ${error.message}`);
     }
   }, [props.list, newName, props.hide]);
 
@@ -175,7 +179,7 @@ export function EditListDialog(props: EditListProps) {
     <ModalAlert
       isOpen={props.isOpen}
       buttons={[
-        <AppButton.BlueButton key="save" onClick={save}>
+        <AppButton.BlueButton key="save" disabled={!newNameValid} onClick={save}>
           {messages.gettext('Save')}
         </AppButton.BlueButton>,
         <AppButton.BlueButton key="cancel" onClick={props.hide}>

gui/src/renderer/components/select-location/CustomLists.tsx

@@ -123,7 +123,8 @@ interface AddListFormProps {
 
 function AddListForm(props: AddListFormProps) {
   const [name, setName] = useState('');
-  const nameValid = name.trim() !== '';
+  const nameTrimmed = name.trim();
+  const nameValid = nameTrimmed !== '';
   const [error, setError, unsetError] = useBoolean();
   const containerRef = useStyledRef<HTMLDivElement>();
   const inputRef = useStyledRef<HTMLInputElement>();
@@ -137,7 +138,7 @@ function AddListForm(props: AddListFormProps) {
   const createList = useCallback(async () => {
     if (nameValid) {
       try {
-        const result = await props.onCreateList(name);
+        const result = await props.onCreateList(nameTrimmed);
         if (result) {
           setError();
         }