feat(FieldFormatters): add visual editor

specifyweb/frontend/js_src/lib/components/AppResources/TabDefinitions.tsx

@@ -21,6 +21,8 @@ import type {
 } from '../DataModel/types';
 import { RssExportFeedEditor } from '../ExportFeed';
 import { exportFeedSpec } from '../ExportFeed/spec';
+import { FieldFormattersEditor } from '../FieldFormatters/Editor';
+import { fieldFormattersSpec } from '../FieldFormatters/spec';
 import { DataObjectFormatter } from '../Formatters';
 import { formattersSpec } from '../Formatters/spec';
 import { FormEditor } from '../FormEditor';
@@ -168,7 +170,10 @@ export const visualAppResourceEditors = f.store<
     visual: WebLinkEditor,
     xml: generateXmlEditor(webLinksSpec),
   },
-  uiFormatters: undefined,
+  uiFormatters: {
+    visual: FieldFormattersEditor,
+    xml: generateXmlEditor(fieldFormattersSpec),
+  },
   dataObjectFormatters: {
     visual: DataObjectFormatter,
     xml: generateXmlEditor(formattersSpec),

specifyweb/frontend/js_src/lib/components/AppResources/types.tsx

@@ -156,7 +156,7 @@ export const appResourceSubTypes = ensure<IR<AppResourceSubType>>()({
     documentationUrl:
       'https://github.com/specify/specify6/blob/master/config/backstop/uiformatters.xml',
     icon: icons.hashtag,
-    label: resourcesText.uiFormatters(),
+    label: resourcesText.fieldFormatters(),
   },
   dataObjectFormatters: {
     mimeType: 'text/xml',

specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx

@@ -257,6 +257,7 @@ export const Input = {
               props.onChange?.(event);
             },
             readOnly: isReadOnly,
+            ...withPreventWheel(props.onWheel),
           }
   ),
   Float: wrap<

specifyweb/frontend/js_src/lib/components/AttachmentsBulkImport/__tests__/utils.test.ts

@@ -1,11 +1,13 @@
+import type { LocalizedString } from 'typesafe-i18n';
+
 import { requireContext } from '../../../tests/helpers';
-import { formatterToParser } from '../../../utils/parser/definitions';
+import { fieldFormatterToParser } from '../../../utils/parser/definitions';
 import type { IR, RA } from '../../../utils/types';
 import { localized } from '../../../utils/types';
 import { tables } from '../../DataModel/tables';
 import {
   CatalogNumberNumeric,
-  formatterTypeMapper,
+  fieldFormatterTypeMapper,
   UiFormatter,
 } from '../../FieldFormatters';
 import { syncFieldFormat } from '../../Formatters/fieldFormat';
@@ -49,7 +51,7 @@ const fileNameTestSpec: TestDefinition = {
       false,
       localized('testNumeric'),
       [
-        new formatterTypeMapper.numeric({
+        new fieldFormatterTypeMapper.numeric({
           size: 3,
           autoIncrement: true,
           byYear: false,
@@ -73,10 +75,10 @@ const fileNameTestSpec: TestDefinition = {
       false,
       localized('testRegex'),
       [
-        new formatterTypeMapper.regex({
+        new fieldFormatterTypeMapper.regex({
           size: 3,
           autoIncrement: true,
-          value: localized('^\\d{1,6}(?:[a-zA-Z]{1,2})?$'),
+          placeholder: localized('^\\d{1,6}(?:[a-zA-Z]{1,2})?$'),
           byYear: false,
         }),
       ],
@@ -101,13 +103,14 @@ describe('file names resolution test', () => {
         jest.spyOn(console, 'error').mockImplementation();
         const field = tables.CollectionObject.getLiteralField('text1')!;
         const getResultFormatter =
-          (formatter: UiFormatter) => (value: number | string | undefined) =>
+          (formatter: UiFormatter) =>
+          (value: number | string | undefined): LocalizedString | undefined =>
             value === undefined || value === null
               ? undefined
               : syncFieldFormat(
                   field,
                   value.toString(),
-                  formatterToParser(field, formatter),
+                  fieldFormatterToParser(field, formatter),
                   undefined,
                   true
                 );

specifyweb/frontend/js_src/lib/components/AttachmentsBulkImport/utils.ts

@@ -28,10 +28,8 @@ import {
   serializeResource,
 } from '../DataModel/serializers';
 import { strictGetTable, tables } from '../DataModel/tables';
-import type { SpQuery, Tables } from '../DataModel/types';
-import type { CollectionObject } from '../DataModel/types';
+import type { CollectionObject, SpQuery, Tables } from '../DataModel/types';
 import type { UiFormatter } from '../FieldFormatters';
-import { formatterTypeMapper } from '../FieldFormatters';
 import { queryFieldFilters } from '../QueryBuilder/FieldFilter';
 import { makeQueryField } from '../QueryBuilder/fromTree';
 import type { QueryFieldWithPath } from '../Statistics/types';
@@ -105,7 +103,7 @@ function generateInQueryResource(
           };
     const { path, ...field } = rawField;
     return serializeResource(
-      makeQueryField(baseTable, rawField.path, { ...field, position: index })
+      makeQueryField(baseTable, path, { ...field, position: index })
     );
   });
 
@@ -232,24 +230,15 @@ export function resolveFileNames(
   // BUG: Won't catch if formatters begin or end with a space
   const splitName = stripFileExtension(fileName).trim();
   let nameToParse = splitName;
-  if (
-    formatter !== undefined &&
-    formatter.fields.every(
-      (field) => !(field instanceof formatterTypeMapper.regex)
-    )
-  ) {
-    const formattedLength = formatter.fields.reduce(
-      (length, field) => length + field.size,
-      0
-    );
-    nameToParse = fileName.trim().slice(0, formattedLength);
+  if (formatter?.parts.every((field) => field.type !== 'regex') === true) {
+    nameToParse = fileName.trim().slice(0, formatter.size);
   }
   let formatted = nameToParse === '' ? undefined : getFormatted(nameToParse);
-  const numericFields = formatter?.fields.filter(
-    (field) => field instanceof formatterTypeMapper.numeric
+  const numericFields = formatter?.parts.filter(
+    (field) => field.type === 'numeric'
   );
   if (
-    formatter?.fields?.length === 1 &&
+    formatter?.parts?.length === 1 &&
     numericFields?.length === 1 &&
     formatted === undefined &&
     splitName !== ''

specifyweb/frontend/js_src/lib/components/DataEntryTables/fetch.ts

@@ -8,11 +8,11 @@ import type { SpecifyTable } from '../DataModel/specifyTable';
 import { fetchContext as fetchSchema, getTable } from '../DataModel/tables';
 import type { Tables } from '../DataModel/types';
 import { fetchView } from '../FormParse';
-import { cachableUrl } from '../InitialContext';
+import { cacheableUrl } from '../InitialContext';
 import { xmlToSpec } from '../Syncer/xmlUtils';
 import { dataEntryItems } from './spec';
 
-const url = cachableUrl(getAppResourceUrl('DataEntryTaskInit'));
+const url = cacheableUrl(getAppResourceUrl('DataEntryTaskInit'));
 
 export const fetchLegacyForms = f.store(
   async (): Promise<RA<SpecifyTable>> =>

specifyweb/frontend/js_src/lib/components/DataModel/specifyTable.ts

@@ -458,7 +458,7 @@ export class SpecifyTable<SCHEMA extends AnySchema = AnySchema> {
    *
    * I.e, table can be scoped to collection using a "collectionMemberId" field
    * (which is not a relationship - sad). Back-end looks at that relationship
-   * for scoping inconsistenly. Front-end does not look at all.
+   * for scoping inconsistently. Front-end does not look at all.
    */
   public getScopingRelationship(): Relationship | undefined {
     this.scopingRelationship ??=

specifyweb/frontend/js_src/lib/components/FieldFormatters/Editor.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { AppResourceTabProps } from '../AppResources/TabDefinitions';
+import { createXmlContext, XmlEditor } from '../Formatters';
+import { fieldFormattersRoutes } from './Routes';
+import { fieldFormattersSpec } from './spec';
+
+export function FieldFormattersEditor(props: AppResourceTabProps): JSX.Element {
+  return (
+    <XmlEditor
+      context={FieldFormattersContext}
+      props={props}
+      rootTagName="formatters"
+      routes={fieldFormattersRoutes}
+      spec={fieldFormattersSpec()}
+    />
+  );
+}
+
+export const FieldFormattersContext = createXmlContext(fieldFormattersSpec());

specifyweb/frontend/js_src/lib/components/FieldFormatters/Element.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { resourcesText } from '../../localization/resources';
+import { ReadOnlyContext } from '../Core/Contexts';
+import { makeXmlEditorShellSlot, XmlEditorShell } from '../Formatters/Element';
+import { FieldFormatterElement } from './FieldFormatter';
+import type { FieldFormattersOutlet } from './List';
+import type { FieldFormatter } from './spec';
+
+export function FieldFormatterWrapper(): JSX.Element {
+  const { index } = useParams();
+  const isReadOnly = React.useContext(ReadOnlyContext);
+  return (
+    <XmlEditorShell<FieldFormatter, FieldFormattersOutlet>
+      header={resourcesText.fieldFormatters()}
+    >
+      {makeXmlEditorShellSlot(
+        (getSet) => (
+          <FieldFormatterElement item={getSet} />
+        ),
+        index,
+        isReadOnly
+      )}
+    </XmlEditorShell>
+  );
+}