WB Attachments: Fix possible attachment column check crash

specifyweb/frontend/js_src/lib/components/AppResources/__tests__/AppResourceEditButton.test.tsx

@@ -70,18 +70,18 @@ describe('AppResourceEditButton', () => {
 
     const dialog = getByRole('dialog');
     expect(dialog.innerHTML).toMatchInlineSnapshot(`
-"<div class=\\"
-          flex items-center gap-2 md:gap-4
-          -m-4 cursor-move p-4
-          flex-wrap
-        \\" id=\\"modal-0-handle\\"><div class=\\"flex items-center gap-2\\"><h2 class=\\"font-semibold text-black dark:text-white text-xl\\" id=\\"modal-0-header\\">TestTitle</h2></div></div><div class=\\"
-            dark:text-neutral-350 -mx-1 flex-1 overflow-y-auto px-1 py-4
-            text-gray-700 flex flex-col gap-2
-          \\" id=\\"modal-0-content\\"></div><div class=\\"flex gap-2 justify-end\\"><span class=\\"-ml-2 flex-1\\"></span><button class=\\"button rounded cursor-pointer active:brightness-80 px-4 py-2
-    disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
-    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-125 bg-[color:var(--secondary-button-color)] text-gray-800
-dark:text-gray-100\\" type=\\"button\\">Close</button></div>"
-`);
+      "<div class=\\"
+                flex items-center gap-2 md:gap-4
+                -m-4 cursor-move p-4
+                flex-wrap
+              \\" id=\\"modal-0-handle\\"><div class=\\"flex items-center gap-2\\"><h2 class=\\"font-semibold text-black dark:text-white text-xl\\" id=\\"modal-0-header\\">TestTitle</h2></div></div><div class=\\"
+                  dark:text-neutral-350 -mx-1 flex-1 overflow-y-auto px-1 py-4
+                  text-gray-700 flex flex-col gap-2
+                \\" id=\\"modal-0-content\\"></div><div class=\\"flex gap-2 justify-end\\"><span class=\\"-ml-2 flex-1\\"></span><button class=\\"button rounded cursor-pointer active:brightness-80 px-4 py-2
+          disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
+          dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-125 bg-[color:var(--secondary-button-color)] text-gray-800
+      dark:text-gray-100\\" type=\\"button\\">Close</button></div>"
+    `);
 
     expect(handleDeleted).not.toHaveBeenCalled();
   });

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

@@ -354,8 +354,8 @@ export const Select = wrap<
        */
       if (props.required !== true && props.multiple === true) {
         selected.map((option) => option.classList.add('dark:bg-neutral-500')); // Highlights selected object less bright
-        unselected.map((option) =>
-          option.classList.remove('dark:bg-neutral-500') // Prevents a previously selected option from remaining highlighted
+        unselected.map(
+          (option) => option.classList.remove('dark:bg-neutral-500') // Prevents a previously selected option from remaining highlighted
         );
       }
       const value = (event.target as HTMLSelectElement).value;

specifyweb/frontend/js_src/lib/components/Attachments/__tests__/uploadFile.test.ts

@@ -31,12 +31,15 @@ describe('uploadFile', () => {
     return {
       open: jest.fn(),
       send: jest.fn((..._args: readonly unknown[]) => listeners[nextEvent]?.()),
-      addEventListener: jest.fn((eventName: EventName, callback: () => void) => {
-        listeners[eventName] = callback;
-      }),
+      addEventListener: jest.fn(
+        (eventName: EventName, callback: () => void) => {
+          listeners[eventName] = callback;
+        }
+      ),
       removeEventListener: jest.fn(
         (eventName: EventName, callback: () => void) => {
-          if (listeners[eventName] === callback) listeners[eventName] = undefined;
+          if (listeners[eventName] === callback)
+            listeners[eventName] = undefined;
         }
       ),
       upload: {

specifyweb/frontend/js_src/lib/components/Molecules/index.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 
+import { useHueDifference } from '../../hooks/useHueDifference';
 import { commonText } from '../../localization/common';
 import type { RA } from '../../utils/types';
-import { useHueDifference } from '../../hooks/useHueDifference';
 
 export const loadingGif = (
   <div className="hover:animate-hue-rotate [.reduce-motion_&]:animate-hue-rotate">
@@ -31,7 +31,7 @@ export const loadingGif = (
  * This must be accompanied by a label since loading bar is hidden from screen
  * readers
  */
-const LoadingBar = () => {
+function LoadingBar() {
   const hueDifference = useHueDifference();
 
   return (
@@ -45,7 +45,7 @@ const LoadingBar = () => {
       />
     </div>
   );
-};
+}
 
 export const loadingBar = <LoadingBar />;
 

specifyweb/frontend/js_src/lib/components/WbPlanView/CustomSelectElement.tsx

@@ -849,8 +849,8 @@ export function CustomSelectElement({
           >
             <input
               // Associate validation message with the listbox
-              id={id('validation')}
               defaultValue={validation}
+              id={id('validation')}
               aria-label={validation}
               // Announce validation message to screen readers
               aria-live="polite"

specifyweb/frontend/js_src/lib/components/WorkBench/WbAttachmentsPreview.tsx

@@ -38,8 +38,8 @@ import { PopupWindow } from '../Molecules/PopupWindow';
 import { Skeleton } from '../SkeletonLoaders/Skeleton';
 import type { Dataset } from '../WbPlanView/Wrapped';
 import {
-  getAttachmentsColumn,
   getAttachmentsFromCell,
+  getVisualAttachmentsColumn,
 } from '../WorkBench/attachmentHelpers';
 
 const { formatCacheKey } = exportsForTests;
@@ -173,9 +173,7 @@ function fetchRowAttachments(
   ) => void
 ): void {
   // Look for Attachments column
-  const attachmentColumnIndex = hot.toVisualColumn(
-    getAttachmentsColumn(dataset)
-  );
+  const attachmentColumnIndex = getVisualAttachmentsColumn(dataset, hot);
   if (attachmentColumnIndex === -1) return;
 
   // Each row should have comma-separated IDs for SpDataSetAttachments

specifyweb/frontend/js_src/lib/components/WorkBench/attachmentHelpers.tsx

@@ -1,3 +1,5 @@
+import type Handsontable from 'handsontable';
+
 import type { RA, WritableArray } from '../../utils/types';
 import type { SerializedResource } from '../DataModel/helperTypes';
 import type {
@@ -83,6 +85,14 @@ export function getAttachmentsColumn(dataset: Dataset): number {
   return dataset.columns.indexOf(ATTACHMENTS_COLUMN);
 }
 
+export function getVisualAttachmentsColumn(
+  dataset: Dataset,
+  hot: Handsontable
+): number {
+  const physical = getAttachmentsColumn(dataset);
+  return physical === -1 ? -1 : hot.toVisualColumn(physical);
+}
+
 /**
  * In contexts where the dataset is not known, this function can be modified to
  * accept an uploadPlan to determine where the attachments column is.

specifyweb/frontend/js_src/lib/components/WorkBench/hooks.ts

@@ -42,7 +42,7 @@ export function useHotHooks({
      * Add accessibility labels to empty table header cells
      * This ensures screen readers can properly announce the structure
      */
-    afterInit: function () {
+    afterInit() {
       if (workbench.hot === undefined) return;
 
       // Add aria-label to corner header cell (intersection of row/column headers)