Merge branch 'issue-7138' of https://github.com/specify/specify7 into issue-7138

Author: grantfitzsimmons

specifyweb/frontend/js_src/lib/components/Toolbar/TreeRepair.tsx

@@ -148,7 +148,10 @@ export function TreeSelectDialog({
                       />
                     )}
                     {permissionName === 'repair' && (
-                      <TreeActionsDropdown treeDefinition={treeDefinition} treeName={treeName} />
+                      <TreeActionsDropdown
+                        treeDefinition={treeDefinition}
+                        treeName={treeName}
+                      />
                     )}
                   </div>
                 </div>
@@ -161,15 +164,35 @@ export function TreeSelectDialog({
   ) : null;
 }
 
-function ActionsMenu({ treeName, treeDefinition }: { readonly treeName: string; readonly treeDefinition: any }): JSX.Element | null {
-  const [result, setResult] = React.useState<{ readonly accepted: number; readonly synonyms: number; readonly total: number } | null>(null);
+function ActionsMenu({
+  treeName,
+  treeDefinition,
+}: {
+  readonly treeName: string;
+  readonly treeDefinition: any;
+}): JSX.Element | null {
+  const [result, setResult] = React.useState<{
+    readonly accepted: number;
+    readonly synonyms: number;
+    readonly total: number;
+  } | null>(null);
   const [isRunning, setIsRunning] = React.useState(false);
-  const [repairStatus, setRepairStatus] = React.useState<'idle' | 'success'>('idle');
-  const [hoveredAction, setHoveredAction] = React.useState<'rebuildAccepted' | 'rebuildSynonyms' | 'repair' | null>(null);
+  const [repairStatus, setRepairStatus] = React.useState<'idle' | 'success'>(
+    'idle'
+  );
+  const [hoveredAction, setHoveredAction] = React.useState<
+    'rebuildAccepted' | 'rebuildSynonyms' | 'repair' | null
+  >(null);
   if (typeof treeDefinition !== 'object') return null;
   if (!(treeName in TREE_RESOURCES)) return null;
-  const canRebuild = hasPermission(TREE_RESOURCES[treeName as TreeNameKey], 'rebuild_full_names');
-  const canRepair = hasPermission(TREE_RESOURCES[treeName as TreeNameKey], 'repair');
+  const canRebuild = hasPermission(
+    TREE_RESOURCES[treeName as TreeNameKey],
+    'rebuild_full_names'
+  );
+  const canRepair = hasPermission(
+    TREE_RESOURCES[treeName as TreeNameKey],
+    'repair'
+  );
   if (!canRebuild && !canRepair) return null;
   const id = treeDefinition.get('id');
   interface RebuildChanged { readonly accepted: number; readonly synonyms: number; readonly total: number }
@@ -196,7 +219,11 @@ function ActionsMenu({ treeName, treeDefinition }: { readonly treeName: string;
     setRepairStatus('idle');
     ajax<unknown>(
       `/api/specify_tree/${treeName.toLowerCase()}/${id}/rebuild-full-name${withSynonyms ? '?rebuild_synonyms=true' : ''}`,
-      { method: 'POST', headers: { Accept: 'application/json' }, errorMode: 'dismissible' }
+      {
+        method: 'POST',
+        headers: { Accept: 'application/json' },
+        errorMode: 'dismissible',
+      }
     )
       .then((resp) => setResult(parseRebuildResponse(resp)))
       .finally(() => setIsRunning(false));
@@ -220,7 +247,7 @@ function ActionsMenu({ treeName, treeDefinition }: { readonly treeName: string;
     readonly label: () => LocalizedString;
     readonly description: () => LocalizedString;
     readonly run: () => void;
-  }
+  };
   const actions: readonly ActionDef[] = [
     {
       key: 'repair',
@@ -247,25 +274,33 @@ function ActionsMenu({ treeName, treeDefinition }: { readonly treeName: string;
   const visibleActions = actions.filter((a) => a.can);
 
   let status: React.ReactNode = null;
-  if (isRunning) status = <span className="text-xs">{commonText.working()}</span>;
+  if (isRunning)
+    status = <span className="text-xs">{commonText.working()}</span>;
   else if (result && canRebuild) {
-    status = result.total > 0 ? (
-      <div className="text-xs">
-        {treeText.rebuildResult({ total: result.total, accepted: result.accepted, synonyms: result.synonyms })}
-      </div>
-    ) : (
-  <div className="text-xs italic">{treeText.noFullNamesUpdated()}</div>
-    );
+    status =
+      result.total > 0 ? (
+        <div className="text-xs">
+          {treeText.rebuildResult({
+            total: result.total,
+            accepted: result.accepted,
+            synonyms: result.synonyms,
+          })}
+        </div>
+      ) : (
+        <div className="text-xs italic">{treeText.noFullNamesUpdated()}</div>
+      );
   } else if (repairStatus === 'success' && (!canRebuild || !result)) {
     status = (
       <div className="text-xs text-green-600 dark:text-green-400">
-  {headerText.treeRepairComplete()}
+        {headerText.treeRepairComplete()}
       </div>
     );
   } else if (hoveredAction) {
     const current = actions.find((a) => a.key === hoveredAction);
     status = current ? (
-      <div className="text-xs leading-snug opacity-80">{current.description()}</div>
+      <div className="text-xs leading-snug opacity-80">
+        {current.description()}
+      </div>
     ) : null;
   }
   return (
@@ -275,9 +310,14 @@ function ActionsMenu({ treeName, treeDefinition }: { readonly treeName: string;
           <Button.Secondary
             disabled={isRunning}
             key={a.key}
-            onClick={(e): void => { e.preventDefault(); a.run(); }}
+            onClick={(e): void => {
+              e.preventDefault();
+              a.run();
+            }}
             onMouseEnter={(): void => setHoveredAction(a.key)}
-            onMouseLeave={(): void => setHoveredAction((h) => (h === a.key ? null : h))}
+            onMouseLeave={(): void =>
+              setHoveredAction((h) => (h === a.key ? null : h))
+            }
           >
             <>{a.label()}</>
           </Button.Secondary>
@@ -288,33 +328,47 @@ function ActionsMenu({ treeName, treeDefinition }: { readonly treeName: string;
   );
 }
 
-function TreeActionsDropdown({ treeName, treeDefinition }: { readonly treeName: string; readonly treeDefinition: any }): JSX.Element | null {
+function TreeActionsDropdown({
+  treeName,
+  treeDefinition,
+}: {
+  readonly treeName: string;
+  readonly treeDefinition: any;
+}): JSX.Element | null {
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef<HTMLButtonElement | null>(null);
   const menuRef = React.useRef<HTMLDivElement | null>(null);
-  const [position, setPosition] = React.useState<{ readonly top: number; readonly left: number } | null>(null);
+  const [position, setPosition] = React.useState<{
+    readonly top: number;
+    readonly left: number;
+  } | null>(null);
 
   const hasAnyPermission = React.useMemo(() => {
     if (!(treeName in TREE_RESOURCES)) return false;
     return (
-      hasPermission(TREE_RESOURCES[treeName as TreeNameKey], 'rebuild_full_names') ||
-      hasPermission(TREE_RESOURCES[treeName as TreeNameKey], 'repair')
+      hasPermission(
+        TREE_RESOURCES[treeName as TreeNameKey],
+        'rebuild_full_names'
+      ) || hasPermission(TREE_RESOURCES[treeName as TreeNameKey], 'repair')
     );
   }, [treeName]);
 
   const updatePosition = React.useCallback(() => {
     const element = anchorRef.current;
     if (!element) return;
     const rect = element.getBoundingClientRect();
-    setPosition({ top: rect.bottom + window.scrollY + 4, left: rect.right + window.scrollX });
+    setPosition({
+      top: rect.bottom + window.scrollY + 4,
+      left: rect.right + window.scrollX,
+    });
   }, []);
 
   React.useEffect(() => {
     if (!open) return;
     updatePosition();
     const onClick = (e: MouseEvent): void => {
       if (
-  anchorRef.current?.contains(e.target as Node) ||
+        anchorRef.current?.contains(e.target as Node) ||
         menuRef.current?.contains(e.target as Node)
       ) {
         return; // Inside