Merge pull request #2643 from omnivore-app/fix/web-trim-label-names

Trim label names when creating on web

packages/web/components/templates/article/AddBulkLabelsModal.tsx

@@ -130,8 +130,9 @@ export function AddBulkLabelsModal(
 
   const selectOrCreateLabel = useCallback(
     (value: string) => {
+      const trimmedValue = value.trim()
       const current = selectedLabels.labels ?? []
-      const lowerCasedValue = value.toLowerCase()
+      const lowerCasedValue = trimmedValue.toLowerCase()
       const existing = availableLabels.labels.find(
         (l) => l.name.toLowerCase() == lowerCasedValue
       )
@@ -148,12 +149,12 @@ export function AddBulkLabelsModal(
           dispatchLabels({ type: 'SAVE', labels: [...current, existing] })
           clearInputState()
         } else {
-          showMessage(`label ${value} already added.`, 5000)
+          showMessage(`label ${trimmedValue} already added.`, 5000)
         }
       } else {
         const tempLabel = {
           id: uuidv4(),
-          name: value,
+          name: trimmedValue,
           color: randomLabelColorHex(),
           description: '',
           createdAt: new Date(),

packages/web/components/templates/article/SetLabelsControl.tsx

@@ -202,6 +202,10 @@ function Footer(props: FooterProps): JSX.Element {
     return 'none'
   }, [props])
 
+  const trimmedLabelName = useMemo(() => {
+    return props.filterText.trim()
+  }, [props])
+
   return (
     <HStack
       ref={ref}
@@ -220,7 +224,7 @@ function Footer(props: FooterProps): JSX.Element {
         },
       }}
     >
-      {props.filterText.length > 0 ? (
+      {trimmedLabelName.length > 0 ? (
         <Button
           style="modalOption"
           css={{
@@ -251,14 +255,14 @@ function Footer(props: FooterProps): JSX.Element {
             {textMatch === 'available' && (
               <>
                 <Check size={18} color={theme.colors.grayText.toString()} />
-                Use Enter to add label &quot;{props.filterText}&quot;
+                Use Enter to add label &quot;{trimmedLabelName}&quot;
               </>
             )}
 
             {textMatch === 'none' && (
               <>
                 <Plus size={18} color={theme.colors.grayText.toString()} />
-                Use Enter to create new label &quot;{props.filterText}&quot;
+                Use Enter to create new label &quot;{trimmedLabelName}&quot;
               </>
             )}
           </HStack>
@@ -337,7 +341,12 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
 
   const createLabelFromFilterText = useCallback(
     async (text: string) => {
-      const label = await createLabelMutation(text, randomLabelColorHex(), '')
+      const trimmedLabelName = text.trim()
+      const label = await createLabelMutation(
+        trimmedLabelName,
+        randomLabelColorHex(),
+        ''
+      )
       if (label) {
         showSuccessToast(`Created label ${label.name}`, {
           position: 'bottom-right',