make custom fields case sensitive (#1242)

* remove custom field lowercasing

* don't allow custom field form to submit duplicate field

* remove unused

* update custom field tests

* also keep upper case when editing

* show key in UI

* also kep upper case when creating a new field

* fix test

* allow old forced case keys to stay as is

* allow space

* add extension to import

* supply initial key to CustomFieldForm

* refactor: improve element contrast

* refactor: style and composition

* consistent use of `customFieldLabelToKey`

* fix CopyTag

* remove log

---------

Co-authored-by: arc-alex <ac@omnivox.dk>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx

@@ -6,13 +6,12 @@ import { CustomField, CustomFieldLabel } from 'ontime-types';
 import { deleteCustomField, editCustomField, postCustomField } from '../../../../../common/api/customFields';
 import ExternalLink from '../../../../../common/components/external-link/ExternalLink';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
+import { customFieldsDocsUrl } from '../../../../../externals';
 import * as Panel from '../../PanelUtils';
 
 import CustomFieldEntry from './CustomFieldEntry';
 import CustomFieldForm from './CustomFieldForm';
 
-const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
-
 export default function CustomFields() {
   const { data, refetch } = useCustomFields();
   const [isAdding, setIsAdding] = useState(false);
@@ -59,9 +58,14 @@ export default function CustomFields() {
           <Alert status='info' variant='ontime-on-dark-info'>
             <AlertIcon />
             <AlertDescription>
-              Custom fields allow for additional information to be added to an event (eg. light, sound, camera). <br />
+              Custom fields allow for additional information to be added to an event.
               <br />
-              This data is not used by Ontime.
+              <br />
+              This data is not used by Ontime, but provides place for cueing or department specific information (eg.
+              light, sound, camera).
+              <br />
+              <br />
+              Custom fields can be used width the Integrations feature using the generated key.
               <ExternalLink href={customFieldsDocsUrl}>See the docs</ExternalLink>
             </AlertDescription>
           </Alert>
@@ -73,6 +77,7 @@ export default function CustomFields() {
               <tr>
                 <th>Colour</th>
                 <th>Name</th>
+                <th>Key (used in Integrations)</th>
                 <th />
               </tr>
             </thead>