Minor fixes around playlist (#3416)

* Fix some collection publish errors not reaching UI

* Trim leading/trailing whitespaces in collection title

* Fix new playlist creation eating "Enter" globally until reload

* Coderabbit

---------

Co-authored-by: miko <sauce47@posteo.net>

Author: keikari

ui/component/formNewCollection/view.jsx

@@ -32,7 +32,7 @@ function FormNewCollection(props: Props) {
   }
 
   function handleAddCollection() {
-    const name = newCollectionName;
+    const name = newCollectionName.trim();
     let id;
 
     doPlaylistAddAndAllowPlaying({
@@ -50,21 +50,13 @@ function FormNewCollection(props: Props) {
     closeForm(name, id);
   }
 
-  function altEnterListener(e: SyntheticKeyboardEvent<*>) {
+  function handleKeyDown(e: SyntheticKeyboardEvent<*>) {
     if (e.keyCode === KEYCODES.ENTER) {
       e.preventDefault();
       buttonref.current.click();
     }
   }
 
-  function onTextareaFocus() {
-    window.addEventListener('keydown', altEnterListener);
-  }
-
-  function onTextareaBlur() {
-    window.removeEventListener('keydown', altEnterListener);
-  }
-
   function handleClearNew() {
     closeForm();
   }
@@ -76,16 +68,15 @@ function FormNewCollection(props: Props) {
       name="new_collection"
       label={__('New Playlist Title')}
       placeholder={__(COLLECTIONS_CONSTS.PLACEHOLDER)}
-      onFocus={onTextareaFocus}
-      onBlur={onTextareaBlur}
+      onKeyDown={handleKeyDown}
       inputButton={
         <>
           <Button
             button="alt"
             icon={ICONS.COMPLETED}
             title={__('Confirm')}
             className="button-toggle"
-            disabled={newCollectionName.length === 0}
+            disabled={newCollectionName.trim().length === 0}
             onClick={handleAddCollection}
             ref={buttonref}
           />

ui/page/collection/internal/collectionPublishForm/view.jsx

@@ -104,7 +104,7 @@ const CollectionPublishForm = (props: Props) => {
     setFormParams((prevParams) => ({ ...prevParams, ...newParams }));
   }
 
-  function handlePublish() {
+  function handlePublish(params) {
     setPublishPending(true);
 
     const successCb = (pendingClaim) => {
@@ -118,17 +118,22 @@ const CollectionPublishForm = (props: Props) => {
     };
 
     // $FlowFixMe
-    doCollectionPublish(formParams, collectionId)
+    doCollectionPublish(params, collectionId)
       .then(successCb)
       .catch(() => setPublishPending(false));
   }
 
   function handleSubmitForm() {
     if (!hasChanges) return goBack();
 
+    const trimmedParams = { ...formParams };
+    if (trimmedParams.title) trimmedParams.title = trimmedParams.title.trim();
+
+    setFormParams(trimmedParams);
+
     if (editing) {
       // $FlowFixMe
-      doCollectionEdit(collectionId, formParams);
+      doCollectionEdit(collectionId, trimmedParams);
 
       return onDoneForId(collectionId);
     }
@@ -140,12 +145,12 @@ const CollectionPublishForm = (props: Props) => {
           'You are about to publish this playlist with unavailable items that will be removed (all other items will be unaffected). This action is permanent and cannot be undone.'
         ),
         onConfirm: (closeModal) => {
-          handlePublish();
+          handlePublish(trimmedParams);
           closeModal();
         },
       });
     } else {
-      handlePublish();
+      handlePublish(trimmedParams);
     }
   }
 

ui/redux/actions/collections.js

@@ -160,7 +160,7 @@ export function doCollectionPublish(options: CollectionPublishCreateParams, coll
       function failure(error) {
         if (cb) cb();
 
-        const scriptSizeError = error.message.match(/script size ([0-9]+) exceeds limit 8192/);
+        const scriptSizeError = error?.message?.match && error.message.match(/script size ([0-9]+) exceeds limit 8192/);
         let customMessage = null;
         if (scriptSizeError) {
           const maxSize = 8192;
@@ -179,7 +179,7 @@ export function doCollectionPublish(options: CollectionPublishCreateParams, coll
               ? __('or %extraBytes% characters of text.', { extraBytes })
               : __('or 1 character of text.'));
         }
-        dispatch(doToast({ message: customMessage || error.message, isError: true }));
+        dispatch(doToast({ message: customMessage || error.message || error, isError: true }));
         reject(error);
         throw new Error(error);
       }