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/utils/config-constants.tsx

@@ -1,6 +1,8 @@
 // DEFAULT VALUES
 import { fetchData, SERVER_CONFIG_UPDATE_URL } from './apis';
 import { ApiPostArgs, VideoVariant, SocialHandle } from '../types/config-section';
+import { TEXTFIELD_TYPE_URL } from '../components/config/form-textfield';
+import { DEFAULT_TEXTFIELD_URL_PATTERN } from './urls';
 
 export const TEXT_MAXLENGTH = 255;
 
@@ -131,6 +133,9 @@ export const TEXTFIELD_PROPS_INSTANCE_URL = {
   placeholder: 'https://owncast.mysite.com',
   label: 'Server URL',
   tip: 'The full url to your Owncast server.',
+  type: TEXTFIELD_TYPE_URL,
+  pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
+  useTrim: true,
 };
 // MISC FIELDS
 export const FIELD_PROPS_TAGS = {
@@ -247,7 +252,7 @@ export const VIDEO_BITRATE_DEFAULTS = {
 export const VIDEO_NAME_DEFAULTS = {
   fieldName: 'name',
   label: 'Name',
-  maxLength: 12,
+  maxLength: 15,
   placeholder: 'HD or Low',
   tip: 'Human-readable name for for displaying in the player.',
 };
@@ -313,7 +318,10 @@ export const S3_TEXT_FIELDS_INFO = {
     label: 'Endpoint',
     maxLength: 255,
     placeholder: 'https://your.s3.provider.endpoint.com',
-    tip: 'The full URL endpoint your storage provider gave you.',
+    tip: 'The full URL (with "https://") endpoint from your storage provider.',
+    useTrim: true,
+    type: TEXTFIELD_TYPE_URL,
+    pattern: DEFAULT_TEXTFIELD_URL_PATTERN, 
   },
   region: {
     fieldName: 'region',
@@ -336,5 +344,8 @@ export const S3_TEXT_FIELDS_INFO = {
     placeholder: 'http://cdn.ss3.provider.endpoint.com',
     tip:
       'Optional URL that content should be accessed from instead of the default.  Used with CDNs and specific storage providers. Generally not required.',
+    type: TEXTFIELD_TYPE_URL,
+    pattern: DEFAULT_TEXTFIELD_URL_PATTERN,
+    useTrim: true,
   },
 };

web/utils/urls.ts

@@ -1,3 +1,6 @@
+// to use with <input type="url"> fields, as the default pattern only checks for `:`,
+export const DEFAULT_TEXTFIELD_URL_PATTERN = 'https?://.*';
+
 export default function isValidUrl(url: string): boolean {
   const validProtocols = ['http:', 'https:'];