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

@@ -157,7 +157,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,
@@ -74,10 +76,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,
         }),
       ],
@@ -103,13 +105,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 { queryFieldFilterSpecs } from '../QueryBuilder/FieldFilterSpec';
 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

@@ -0,0 +1,59 @@
+import { ajax } from '../../utils/ajax';
+import { getAppResourceUrl } from '../../utils/ajax/helpers';
+import { f } from '../../utils/functools';
+import type { RA } from '../../utils/types';
+import { filterArray } from '../../utils/types';
+import { parseJavaClassName } from '../DataModel/resource';
+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 { cacheableUrl } from '../InitialContext';
+import { xmlToSpec } from '../Syncer/xmlUtils';
+import { dataEntryItems } from './spec';
+
+const url = cacheableUrl(getAppResourceUrl('DataEntryTaskInit'));
+
+export const fetchLegacyForms = f.store(
+  async (): Promise<RA<SpecifyTable>> =>
+    Promise.all([
+      ajax<Element>(url, {
+        headers: { Accept: 'text/xml' },
+      }),
+      fetchSchema,
+    ])
+      .then(async ([{ data }]) =>
+        Promise.all(
+          xmlToSpec(data, dataEntryItems()).items.map(async ({ viewName }) =>
+            f.maybe(viewName, resolveTable)
+          )
+        )
+      )
+      .then(filterArray)
+);
+
+async function resolveTable(
+  viewName: string
+): Promise<SpecifyTable | undefined> {
+  const table = getTable(viewName);
+  if (typeof table === 'object') return table;
+  const form = await fetchView(viewName);
+  return typeof form === 'object'
+    ? getTable(parseJavaClassName(form.class))
+    : undefined;
+}
+
+export const defaultFormTablesConfig: RA<keyof Tables> = [
+  'CollectionObject',
+  'CollectingEvent',
+  'Locality',
+  'Taxon',
+  'Agent',
+  'Geography',
+  'DNASequence',
+  'ReferenceWork',
+];
+
+export const exportsForTests = {
+  fetchLegacyForms,
+};

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>
+  );
+}