feat(schema-config): improve UX/UI

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

@@ -99,7 +99,7 @@ export const saveResource = async <TABLE_NAME extends keyof Tables>(
   tableName: TABLE_NAME,
   id: number,
   data: DeepPartial<SerializedResource<Tables[TABLE_NAME]>>,
-  handleConflict: (() => void) | void
+  handleConflict?: () => void
 ): Promise<SerializedResource<Tables[TABLE_NAME]>> =>
   ajax<SerializedRecord<Tables[TABLE_NAME]>>(
     `/api/specify/${tableName.toLowerCase()}/${id}/`,

specifyweb/frontend/js_src/lib/components/FieldFormatters/index.ts

@@ -23,24 +23,52 @@ import type { FieldFormatter, FieldFormatterPart } from './spec';
 import { fieldFormattersSpec, trimRegexString } from './spec';
 
 let uiFormatters: IR<UiFormatter>;
-export const fetchContext = Promise.all([
-  load<Element>(getAppResourceUrl('UIFormatters'), 'text/xml'),
-  import('../DataModel/tables').then(async ({ fetchContext }) => fetchContext),
-]).then(([formatters]) => {
-  uiFormatters = Object.fromEntries(
-    filterArray(
-      xmlToSpec(formatters, fieldFormattersSpec()).fieldFormatters.map(
-        (formatter, index) => {
-          const resolvedFormatter = resolveFieldFormatter(formatter, index);
-          return resolvedFormatter === undefined
-            ? undefined
-            : [formatter.name, resolvedFormatter];
-        }
+let uiFormattersGeneration = 0;
+
+const loadUiFormatters = (refresh = false): Promise<IR<UiFormatter>> => {
+  const generation = ++uiFormattersGeneration;
+  return Promise.all([
+    load<Element>(getAppResourceUrl('UIFormatters'), 'text/xml', refresh),
+    import('../DataModel/tables').then(
+      async ({ fetchContext }) => fetchContext
+    ),
+  ]).then(([formatters]) => {
+    const result = Object.fromEntries(
+      filterArray(
+        xmlToSpec(formatters, fieldFormattersSpec()).fieldFormatters.map(
+          (formatter, index) => {
+            const resolvedFormatter = resolveFieldFormatter(formatter, index);
+            return resolvedFormatter === undefined
+              ? undefined
+              : [formatter.name, resolvedFormatter];
+          }
+        )
       )
-    )
-  );
-  return uiFormatters;
-});
+    );
+    if (generation === uiFormattersGeneration) uiFormatters = result;
+    return result;
+  });
+};
+
+export let fetchContext = loadUiFormatters();
+
+// Re-fetch UI formatters after the app resource is edited
+export const refreshUiFormatters = async (): Promise<
+  Awaited<typeof fetchContext>
+> => {
+  const previous = fetchContext;
+  const refreshed = loadUiFormatters(true);
+  const generation = uiFormattersGeneration;
+  try {
+    const result = await refreshed;
+    if (generation === uiFormattersGeneration) fetchContext = refreshed;
+    return result;
+  } catch (error) {
+    // Keep the previous UI formatters on failure rather than a rejected promise
+    if (generation === uiFormattersGeneration) fetchContext = previous;
+    throw error;
+  }
+};
 export const getUiFormatters = (): typeof uiFormatters =>
   uiFormatters ?? error('Tried to access UI formatters before fetching them');
 

specifyweb/frontend/js_src/lib/components/Formatters/formatters.ts

@@ -35,20 +35,43 @@ import { fieldFormat } from './fieldFormat';
 import type { Aggregator, Formatter } from './spec';
 import { formattersSpec } from './spec';
 
-export const fetchFormatters: Promise<{
+const loadFormatters = (
+  refresh = false
+): Promise<{
   readonly formatters: RA<Formatter>;
   readonly aggregators: RA<Aggregator>;
-}> = contextUnlockedPromise.then(async (entrypoint) =>
-  entrypoint === 'main'
-    ? Promise.all([
-        ajax<Element>(cacheableUrl(getAppResourceUrl('DataObjFormatters')), {
-          headers: { Accept: 'text/xml' },
-        }).then(({ data }) => data),
-        fetchSchema,
-        fetchDomain,
-      ]).then(([definitions]) => xmlToSpec(definitions, formattersSpec()))
-    : foreverFetch()
-);
+}> =>
+  contextUnlockedPromise.then(async (entrypoint) =>
+    entrypoint === 'main'
+      ? Promise.all([
+          ajax<Element>(cacheableUrl(getAppResourceUrl('DataObjFormatters')), {
+            headers: { Accept: 'text/xml' },
+            cache: refresh ? 'no-cache' : undefined,
+          }).then(({ data }) => data),
+          fetchSchema,
+          fetchDomain,
+        ]).then(([definitions]) => xmlToSpec(definitions, formattersSpec()))
+      : foreverFetch()
+  );
+
+export let fetchFormatters = loadFormatters();
+
+// Re-fetch formatters and aggregators after the app resource is edited
+export const refreshFormatters = async (): Promise<
+  Awaited<typeof fetchFormatters>
+> => {
+  const previous = fetchFormatters;
+  const refreshed = loadFormatters(true);
+  try {
+    const result = await refreshed;
+    fetchFormatters = refreshed;
+    return result;
+  } catch (error) {
+    // Keep the previous formatters on failure rather than a rejected promise
+    fetchFormatters = previous;
+    throw error;
+  }
+};
 
 export const naiveFormatter = (
   tableLabel: string,

specifyweb/frontend/js_src/lib/components/InitialContext/index.ts

@@ -50,7 +50,11 @@ export const foreverFetch = async <T>(): Promise<T> => foreverPromise;
 export const unlockInitialContext = (entrypoint: typeof entrypointName): void =>
   unlock(entrypoint);
 
-export const load = async <T>(path: string, mimeType: MimeType): Promise<T> =>
+export const load = async <T>(
+  path: string,
+  mimeType: MimeType,
+  refresh = false
+): Promise<T> =>
   contextUnlockedPromise.then(async (entrypoint) => {
     if (entrypoint !== 'main') return foreverFetch<T>();
 
@@ -60,6 +64,7 @@ export const load = async <T>(path: string, mimeType: MimeType): Promise<T> =>
     const { data } = await ajax<T>(cacheableUrl(path), {
       errorMode: 'visible',
       headers: { Accept: mimeType },
+      cache: refresh ? 'no-cache' : undefined,
     });
 
     return data;

specifyweb/frontend/js_src/lib/components/Router/Routes.tsx

@@ -417,13 +417,17 @@ export const routes: RA<EnhancedRoute> = [
       },
       {
         path: ':language',
+        element: () =>
+          import('../SchemaConfig/Layout').then(
+            ({ SchemaConfigLayout }) => SchemaConfigLayout
+          ),
         children: [
           {
             index: true,
             title: schemaText.tables(),
             element: () =>
-              import('../SchemaConfig/Tables').then(
-                ({ SchemaConfigTables }) => SchemaConfigTables
+              import('../SchemaConfig/Redirect').then(
+                ({ SchemaConfigRedirect }) => SchemaConfigRedirect
               ),
           },
           {

specifyweb/frontend/js_src/lib/components/SchemaConfig/Components.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import type { LocalizedString } from 'typesafe-i18n';
 
 import { commonText } from '../../localization/common';
@@ -11,18 +10,20 @@ import { H2 } from '../Atoms';
 import { Button } from '../Atoms/Button';
 import { className } from '../Atoms/className';
 import { Select } from '../Atoms/Form';
+import { Link } from '../Atoms/Link';
+import { formatUrl } from '../Router/queryString';
 import type { SchemaData } from './schemaData';
 
 export function SchemaConfigHeader({
   languages,
-  language,
+  rawLanguage,
   onSave: handleSave,
 }: {
   readonly languages: SchemaData['languages'];
-  readonly language: string;
+  readonly rawLanguage: string;
   readonly onSave: (() => void) | undefined;
 }): JSX.Element {
-  const navigate = useNavigate();
+  const [language] = rawLanguage.split('-');
   return (
     <header className="flex gap-2">
       <H2 className="flex items-center">
@@ -32,11 +33,14 @@ export function SchemaConfigHeader({
           })`
         )}
       </H2>
-      <Button.Small
-        onClick={(): void => navigate(`/specify/schema-config/${language}/`)}
+      <Link.Small
+        download={`schema_localization_${rawLanguage}.json`}
+        href={formatUrl('/context/schema_localization.json', {
+          lang: rawLanguage,
+        })}
       >
-        {schemaText.changeBaseTable()}
-      </Button.Small>
+        {commonText.export()}
+      </Link.Small>
       <span className="-ml-2 flex-1" />
       <Button.Small variant={className.saveButton} onClick={handleSave}>
         {commonText.save()}
@@ -100,7 +104,6 @@ export function PickList({
               </optgroup>
             ))
           )}
-          {}
         </>
       )}
     </Select>

specifyweb/frontend/js_src/lib/components/SchemaConfig/Field.tsx

@@ -65,7 +65,7 @@ export function SchemaConfigField({
         />
       </Label.Block>
       <Label.Block>
-        {schemaText.fieldLength()}
+        {schemaText.characterLimit()}
         <Input.Integer isReadOnly value={field.length ?? ''} />
       </Label.Block>
       <Label.Block>