From f5b2b65a45d0dd2ee5f88e67a6da5a19f935137f Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Sat, 6 Jul 2024 18:11:30 -0700
Subject: [PATCH] feat(SchemaConfig): add link to FieldFormatter VisualEditor

---
 .../lib/components/SchemaConfig/Format.tsx    | 53 +++++++++++++++++++
 .../lib/components/SchemaConfig/schemaData.ts |  2 +
 2 files changed, 55 insertions(+)

diff --git a/specifyweb/frontend/js_src/lib/components/SchemaConfig/Format.tsx b/specifyweb/frontend/js_src/lib/components/SchemaConfig/Format.tsx
index dd2d7203094..58b95c5e081 100644
--- a/specifyweb/frontend/js_src/lib/components/SchemaConfig/Format.tsx
+++ b/specifyweb/frontend/js_src/lib/components/SchemaConfig/Format.tsx
@@ -16,6 +16,7 @@ import { LoadingContext, ReadOnlyContext } from '../Core/Contexts';
 import { getField } from '../DataModel/helpers';
 import type { SerializedResource } from '../DataModel/helperTypes';
 import type { LiteralField, Relationship } from '../DataModel/specifyField';
+import type { SpecifyTable } from '../DataModel/specifyTable';
 import { tables } from '../DataModel/tables';
 import type { SpLocaleContainerItem } from '../DataModel/types';
 import { ResourceLink } from '../Molecules/ResourceLink';
@@ -62,6 +63,13 @@ export function SchemaConfigFormat({
       />
       <FormatterLine
         {...lineProps}
+        extraComponents={
+          <FieldFormatterEditing
+            schemaData={schemaData}
+            table={field.table}
+            value={item.format}
+          />
+        }
         label={schemaText.formatted()}
         name="formatted"
         value={item.format}
@@ -314,3 +322,48 @@ function WebLinkEditing({
     </>
   ) : null;
 }
+
+function FieldFormatterEditing({
+  table,
+  value,
+  schemaData,
+}: {
+  readonly table: SpecifyTable;
+  readonly value: string | null;
+  readonly schemaData: SchemaData;
+}): JSX.Element | null {
+  const index = schemaData.uiFormatters
+    .filter((formatter) => formatter.tableName === table.name)
+    .findIndex(({ name }) => name === value);
+  const resourceId = appResourceIds.UIFormatters;
+  const navigate = useNavigate();
+  if (resourceId === undefined) return null;
+
+  const baseUrl = `/specify/resources/app-resource/${resourceId}/field-formatters/${table.name}/`;
+  return (
+    <>
+      {typeof index === 'number' && (
+        <Link.Icon
+          className={className.dataEntryEdit}
+          href={`${baseUrl}${index}/`}
+          icon="pencil"
+          title={commonText.edit()}
+          onClick={(event): void => {
+            event.preventDefault();
+            navigate(`${baseUrl}${index}/`);
+          }}
+        />
+      )}
+      <Link.Icon
+        className={className.dataEntryAdd}
+        href={baseUrl}
+        icon="plus"
+        title={commonText.add()}
+        onClick={(event): void => {
+          event.preventDefault();
+          navigate(baseUrl);
+        }}
+      />
+    </>
+  );
+}
diff --git a/specifyweb/frontend/js_src/lib/components/SchemaConfig/schemaData.ts b/specifyweb/frontend/js_src/lib/components/SchemaConfig/schemaData.ts
index 3f5db193e36..2cddbef676c 100644
--- a/specifyweb/frontend/js_src/lib/components/SchemaConfig/schemaData.ts
+++ b/specifyweb/frontend/js_src/lib/components/SchemaConfig/schemaData.ts
@@ -44,6 +44,7 @@ type SimpleFieldFormatter = {
   readonly name: string;
   readonly isSystem: boolean;
   readonly value: string;
+  readonly tableName: keyof Tables | undefined;
 };
 
 export const fetchSchemaData = async (): Promise<RawSchemaData> =>
@@ -66,6 +67,7 @@ export const fetchSchemaData = async (): Promise<RawSchemaData> =>
           name,
           isSystem: formatter.isSystem,
           value: formatter.defaultValue,
+          tableName: formatter.table?.name,
         }))
         .filter(({ value }) => value)
     ),