fixes for various admin issues (#181)

* up max char count for variant name to fix https://github.com/owncast/owncast/issues/1037

* max widthing the line chart canvas size so it scales with the page.
fixes
- https://github.com/owncast/owncast/issues/842
- https://github.com/owncast/owncast/issues/1024

* A fix to make Storage Endpoint URL validation have better feedback.

- give the field a type of "url"
- give the field a pattern to check
- have native browser handle the validation
- if the field is invalid, use :invalid selector to turn the text red on blur.

fixes: https://github.com/owncast/owncast/issues/1000

* a fix for https://github.com/owncast/owncast/issues/874

* - fixes for https://github.com/owncast/owncast/issues/972
Add optional prop to text field to trim() whitespaces from field. Apply logic to mostly url fields.

- move textfield blur if invalid turn red to globaal

* - a fix for bug:  https://github.com/owncast/owncast/issues/998
don't return null if platform name not found because its custom.

- clean up react key problem on socialhandles table

* fix react key issue on Actions table

* fix for https://github.com/owncast/owncast/issues/1008 to display 'other' field when editing an item not in predefined social list

* clean up other potential react key warnings

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>

web/components/config/form-textfield.tsx

@@ -22,11 +22,13 @@ export interface TextFieldProps {
   disabled?: boolean;
   label?: string;
   maxLength?: number;
+  pattern?: string;
   placeholder?: string;
   required?: boolean;
   status?: StatusState;
   tip?: string;
   type?: string;
+  useTrim?: boolean;
   value?: string | number;
   onBlur?: FieldUpdaterFunc;
   onChange?: FieldUpdaterFunc;
@@ -42,20 +44,21 @@ export default function TextField(props: TextFieldProps) {
     onBlur,
     onChange,
     onPressEnter,
+    pattern,
     placeholder,
     required,
     status,
     tip,
     type,
+    useTrim,
     value,
   } = props;
 
-  // if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
   const handleChange = (e: any) => {
-    const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
     // if an extra onChange handler was sent in as a prop, let's run that too.
     if (onChange) {
-      onChange({ fieldName, value: val });
+      const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
+      onChange({ fieldName, value: useTrim ? val.trim() : val });
     }
   };
 
@@ -100,6 +103,7 @@ export default function TextField(props: TextFieldProps) {
   } else if (type === TEXTFIELD_TYPE_URL) {
     fieldProps = {
       type: 'url',
+      pattern,
     };
   }
 
@@ -114,6 +118,7 @@ export default function TextField(props: TextFieldProps) {
     required,
     [`status-${statusType}`]: status,
   });
+
   return (
     <div className={containerClass}>
       {label ? (
@@ -130,7 +135,7 @@ export default function TextField(props: TextFieldProps) {
             id={fieldId}
             className={`field ${className} ${fieldId}`}
             {...fieldProps}
-            allowClear
+            {...(type !== TEXTFIELD_TYPE_NUMBER && { allowClear: true })}
             placeholder={placeholder}
             maxLength={maxLength}
             onChange={handleChange}