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/edit-social-links.tsx

@@ -13,7 +13,7 @@ import {
   OTHER_SOCIAL_HANDLE_OPTION,
 } from '../../utils/config-constants';
 import { SocialHandle, UpdateArgs } from '../../types/config-section';
-import isValidUrl from '../../utils/urls';
+import isValidUrl, { DEFAULT_TEXTFIELD_URL_PATTERN } from '../../utils/urls';
 import TextField from './form-textfield';
 import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/input-statuses';
 import FormStatusIndicator from './form-status-indicator';
@@ -62,6 +62,10 @@ export default function EditSocialLinks() {
     }
   };
 
+  const isPredefinedSocial = (platform: string) => {
+    return availableIconsList.find(item => item.key === platform) || false;
+  };
+
   const selectedOther =
     modalDataState.platform !== '' &&
     !availableIconsList.find(item => item.key === modalDataState.platform);
@@ -172,9 +176,18 @@ export default function EditSocialLinks() {
       key: 'combo',
       render: (data, record) => {
         const { platform, url } = record;
-        const platformInfo = availableIconsList.find(item => item.key === platform);
+        const platformInfo = isPredefinedSocial(platform);
+
+        // custom platform case
         if (!platformInfo) {
-          return platform;
+          return (
+            <div className="social-handle-cell">
+              <p className="option-label">
+                <strong>{platform}</strong>
+                <span className="handle-url" title={url}>{url}</span>
+              </p>
+            </div>
+          );
         }
         const { icon, platform: platformName } = platformInfo;
         const iconUrl = NEXT_PUBLIC_API_HOST + `${icon.slice(1)}`;
@@ -201,9 +214,13 @@ export default function EditSocialLinks() {
           <Button
             size="small"
             onClick={() => {
+              const platformInfo = currentSocialHandles[index];
               setEditId(index);
-              setModalDataState({ ...currentSocialHandles[index] });
+              setModalDataState({ ...platformInfo });
               setDisplayModal(true);
+              if (!isPredefinedSocial(platformInfo.platform)) {
+                setDisplayOther(true);
+              }
             }}
           >
             Edit
@@ -251,7 +268,7 @@ export default function EditSocialLinks() {
         className="social-handles-table"
         pagination={false}
         size="small"
-        rowKey={record => record.url}
+        rowKey={record => `${record.platform}-${record.url}`}
         columns={socialHandlesColumns}
         dataSource={currentSocialHandles}
       />
@@ -278,6 +295,9 @@ export default function EditSocialLinks() {
             placeholder={PLACEHOLDERS[modalDataState.platform] || 'Url to page'}
             value={modalDataState.url}
             onChange={handleUrlChange}
+            useTrim
+            type="url"
+            pattern={DEFAULT_TEXTFIELD_URL_PATTERN}
           />
           <FormStatusIndicator status={submitStatus} />
         </div>