Create paginator component

specifyweb/frontend/js_src/css/main.css

@@ -154,7 +154,7 @@
   }
 
   [type='number']:not([readonly], .no-arrows) {
-    @apply relative;
+    @apply relative pr-4;
   }
 
   .button:is([aria-pressed='true'], [aria-selected='true'], [aria-current]):not(.aria-handled) {
@@ -309,6 +309,16 @@
   }
 }
 
+.\! {
+  /**
+   * In Chrome DevTools, in the "Element Classes" box (where you customize
+   * element class names), DevTools apply the first matching class name even
+   * before you started typing. The first matching happens to be !absolute,
+   * which breaks the UI. This noop is a workaround for that UX issue
+   */
+  --dev-tools-hack: 0;
+}
+
 /* Leaflet dark mode */
 .leaflet-bar a {
   @apply dark:!border-b-neutral-600 dark:!bg-black dark:!text-white

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

@@ -159,7 +159,7 @@ export const fetchRows = async <
   TABLE_NAME extends keyof Tables,
   SCHEMA extends Tables[TABLE_NAME],
   FIELDS extends RR<
-    string | keyof SCHEMA['fields'],
+    string | Exclude<keyof SCHEMA['fields'], 'fields'>,
     RA<'boolean' | 'null' | 'number' | 'string'>
   >
 >(
@@ -169,7 +169,7 @@ export const fetchRows = async <
     fields,
     distinct = false,
     ...filters
-  }: CollectionFetchFilters<SCHEMA> & {
+  }: Omit<CollectionFetchFilters<SCHEMA>, 'fields'> & {
     readonly fields: FIELDS;
     readonly distinct?: boolean;
   },

specifyweb/frontend/js_src/lib/components/Errors/ErrorDialog.tsx

@@ -122,7 +122,7 @@ export function ErrorDialog({
           >
             {commonText.downloadErrorMessage()}
           </Button.Blue>
-          <span className="-ml-2 flex-1" />
+          <span className="-mt-2 flex-1" />
           <Label.Inline>
             <Input.Checkbox
               checked={clearCacheOnException}

specifyweb/frontend/js_src/lib/components/Errors/stackTrace.ts

@@ -51,7 +51,10 @@ export const produceStackTrace = (message: unknown): string =>
       pageHtml: document.documentElement.outerHTML,
       localStorage: { ...localStorage },
       // Network log and page load telemetry
-      eventLog: globalThis.performance.getEntries(),
+      eventLog:
+        process.env.NODE_ENV === 'test'
+          ? []
+          : globalThis.performance.getEntries(),
       navigator: {
         userAgent: navigator.userAgent,
         language: navigator.language,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useLiveState } from '../../hooks/useLiveState';
-import {f} from '../../utils/functools';
+import { f } from '../../utils/functools';
 import type { RA } from '../../utils/types';
 import { defined } from '../../utils/types';
 import type { AppResourceTabProps } from '../AppResources/TabDefinitions';
@@ -40,7 +40,7 @@ export function FormEditorWrapper(): JSX.Element {
     parsed: [initialParsed],
     syncer: { deserializer },
     onChange: handleChange,
-    onSetCleanup:handleSetCleanup
+    onSetCleanup: handleSetCleanup,
   } = React.useContext(FormEditorContext)!;
 
   const originalParsed = React.useRef<ViewSets | undefined>(undefined);
@@ -61,10 +61,8 @@ export function FormEditorWrapper(): JSX.Element {
         (parsed, changedViewNames): void => {
           setChanged((changed) => new Set([...changed, ...changedViewNames]));
           setParsed(parsed);
-          handleChange(() =>
-            updateXml(deserializer(parsed))
-          );
-          handleSetCleanup(async ()=>
+          handleChange(() => updateXml(deserializer(parsed)));
+          handleSetCleanup(async () =>
             Promise.all(
               Array.from(changed, async (viewName) =>
                 clearUrlCache(getViewSetApiUrl(viewName))

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

@@ -133,7 +133,7 @@ function Field({
           parser.type === 'number' &&
           rightAlignNumberFields &&
           globalThis.navigator.userAgent.toLowerCase().includes('webkit')
-            ? `text-right ${isReadOnly ? '' : 'pr-6'}`
+            ? 'text-right'
             : ''
         }
       `}

specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx

@@ -276,8 +276,6 @@ export function ResourceView<SCHEMA extends AnySchema>({
    * navigation buttons don't jump around a lot as you navigate between
    * records
    */
-  const isFullHeight =
-    dialog === 'modal' && typeof headerButtons === 'function' && !isSubForm;
 
   return (
     <Dialog
@@ -300,9 +298,7 @@ export function ResourceView<SCHEMA extends AnySchema>({
         )
       }
       className={{
-        container: `${dialogClassNames.normalContainer} ${
-          isFullHeight ? 'h-full' : ''
-        }`,
+        container: dialogClassNames.normalContainer,
         content: `${className.formStyles} ${dialogClassNames.flexContent}`,
       }}
       dimensionsKey={viewName ?? resource?.specifyTable.view}

specifyweb/frontend/js_src/lib/components/Forms/Save.tsx

@@ -59,7 +59,9 @@ export function SaveButton<SCHEMA extends AnySchema = AnySchema>({
    */
   readonly saveRequired?: boolean;
   // Returning false would cancel the save proces (allowing to trigger custom behaviour)
-  readonly onSaving?: (unsetUnloadProtect: () => void) => false | undefined;
+  readonly onSaving?: (
+    unsetUnloadProtect: () => void
+  ) => false | undefined | void;
   readonly onSaved?: () => void;
   readonly onAdd?: (newResource: SpecifyResource<SCHEMA>) => void;
   /**

specifyweb/frontend/js_src/lib/components/Interactions/InteractionDialog.tsx

@@ -246,95 +246,95 @@ export function InteractionDialog({
             }
             onClose={handleClose}
           >
-            <div className="flex flex-col gap-8">
-              <details>
+            <details>
+              <summary>
+                {interactionsText.byEnteringNumbers({
+                  fieldName: searchField.label,
+                })}
+              </summary>
+              <div className="flex flex-col gap-2">
+                <AutoGrowTextArea
+                  forwardRef={validationRef}
+                  spellCheck={false}
+                  value={catalogNumbers}
+                  onBlur={(): void => {
+                    const parseResults = split(catalogNumbers).map((value) =>
+                      parseValue(parser, inputRef.current ?? undefined, value)
+                    );
+                    const errorMessages = parseResults
+                      .filter(
+                        (result): result is InvalidParseResult =>
+                          !result.isValid
+                      )
+                      .map(({ reason, value }) => `${reason} (${value})`);
+                    if (errorMessages.length > 0) {
+                      setValidation(errorMessages);
+                      return;
+                    }
+
+                    const parsed = f
+                      .unique(
+                        (parseResults as RA<ValidParseResult>)
+                          .filter(({ parsed }) => parsed !== null)
+                          .map(({ parsed }) =>
+                            (parsed as number | string).toString()
+                          )
+                          .sort(sortFunction(f.id))
+                      )
+                      .join('\n');
+                    setCatalogNumbers(parsed);
+                  }}
+                  onValueChange={setCatalogNumbers}
+                  {...attributes}
+                />
+                <div>
+                  <Button.Blue
+                    disabled={
+                      catalogNumbers.length === 0 ||
+                      inputRef.current?.validity.valid !== true
+                    }
+                    onClick={(): void => handleProceed(undefined)}
+                  >
+                    {commonText.next()}
+                  </Button.Blue>
+                </div>
+                {state.type === 'PreparationSelectState' &&
+                Object.keys(state.problems).length > 0 ? (
+                  <>
+                    {interactionsText.problemsFound()}
+                    {Object.entries(state.problems).map(
+                      ([header, problems], index) => (
+                        <React.Fragment key={index}>
+                          <H3>{header}</H3>
+                          {problems.map((problem, index) => (
+                            <p key={index}>{problem}</p>
+                          ))}
+                        </React.Fragment>
+                      )
+                    )}
+                    <div>
+                      <Button.Blue
+                        onClick={(): void =>
+                          setState({
+                            ...state,
+                            problems: {},
+                          })
+                        }
+                      >
+                        {commonText.ignore()}
+                      </Button.Blue>
+                    </div>
+                  </>
+                ) : undefined}
+              </div>
+            </details>
+            <div className="flex flex-1 flex-col gap-2">
+              <details className="contents">
                 <summary>
                   {interactionsText.byChoosingRecordSet({ count: totalCount })}
                 </summary>
                 {children}
               </details>
-              <details>
-                <summary>
-                  {interactionsText.byEnteringNumbers({
-                    fieldName: searchField.label,
-                  })}
-                </summary>
-                <div className="flex flex-col gap-2">
-                  <AutoGrowTextArea
-                    forwardRef={validationRef}
-                    spellCheck={false}
-                    value={catalogNumbers}
-                    onBlur={(): void => {
-                      const parseResults = split(catalogNumbers).map((value) =>
-                        parseValue(parser, inputRef.current ?? undefined, value)
-                      );
-                      const errorMessages = parseResults
-                        .filter(
-                          (result): result is InvalidParseResult =>
-                            !result.isValid
-                        )
-                        .map(({ reason, value }) => `${reason} (${value})`);
-                      if (errorMessages.length > 0) {
-                        setValidation(errorMessages);
-                        return;
-                      }
-
-                      const parsed = f
-                        .unique(
-                          (parseResults as RA<ValidParseResult>)
-                            .filter(({ parsed }) => parsed !== null)
-                            .map(({ parsed }) =>
-                              (parsed as number | string).toString()
-                            )
-                            .sort(sortFunction(f.id))
-                        )
-                        .join('\n');
-                      setCatalogNumbers(parsed);
-                    }}
-                    onValueChange={setCatalogNumbers}
-                    {...attributes}
-                  />
-                  <div>
-                    <Button.Blue
-                      disabled={
-                        catalogNumbers.length === 0 ||
-                        inputRef.current?.validity.valid !== true
-                      }
-                      onClick={(): void => handleProceed(undefined)}
-                    >
-                      {commonText.next()}
-                    </Button.Blue>
-                  </div>
-                  {state.type === 'PreparationSelectState' &&
-                  Object.keys(state.problems).length > 0 ? (
-                    <>
-                      {interactionsText.problemsFound()}
-                      {Object.entries(state.problems).map(
-                        ([header, problems], index) => (
-                          <React.Fragment key={index}>
-                            <H3>{header}</H3>
-                            {problems.map((problem, index) => (
-                              <p key={index}>{problem}</p>
-                            ))}
-                          </React.Fragment>
-                        )
-                      )}
-                      <div>
-                        <Button.Blue
-                          onClick={(): void =>
-                            setState({
-                              ...state,
-                              problems: {},
-                            })
-                          }
-                        >
-                          {commonText.ignore()}
-                        </Button.Blue>
-                      </div>
-                    </>
-                  ) : undefined}
-                </div>
-              </details>
             </div>
           </Dialog>
         )}

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

@@ -287,6 +287,8 @@ export function Dialog({
     [positionKey]
   );
 
+  useFreezeDialogSize(container, dimensionsKey);
+
   const isFullScreen = containerClassName.includes(dialogClassNames.fullScreen);
 
   const draggableContainer: Props['contentElement'] = React.useCallback(
@@ -569,3 +571,45 @@ function useTitleChangeNotice(dimensionKey: string | undefined): void {
       );
   }, [dimensionKey]);
 }
+
+function useFreezeDialogSize(
+  containerSizeRef: HTMLDivElement | null,
+  dimensionKey: string | undefined
+): void {
+  React.useEffect(() => {
+    if (dimensionKey === undefined) return;
+    if (containerSizeRef === null) return undefined;
+    let oldHeight = containerSizeRef.offsetHeight;
+    let oldWidth = containerSizeRef.offsetWidth;
+    const resizeObserver = new ResizeObserver(() => {
+      const newHeight = containerSizeRef.offsetHeight;
+      const newWidth = containerSizeRef.offsetWidth;
+
+      const width = f.parseInt(containerSizeRef.style.width);
+      const height = f.parseInt(containerSizeRef.style.height);
+      const hasBeenChanged =
+        typeof width === 'number' && typeof height === 'number';
+
+      if (oldHeight !== undefined && newHeight < oldHeight && !hasBeenChanged) {
+        containerSizeRef.style.minHeight = `${oldHeight}px`;
+      } else oldHeight = newHeight;
+
+      if (oldWidth !== undefined && newWidth < oldWidth && !hasBeenChanged) {
+        containerSizeRef.style.minWidth = `${oldWidth}px`;
+      } else oldWidth = newWidth;
+
+      if (hasBeenChanged) {
+        containerSizeRef.style.minHeight = '';
+        containerSizeRef.style.minWidth = '';
+      }
+    });
+
+    resizeObserver.observe(containerSizeRef);
+
+    return () => {
+      resizeObserver.disconnect();
+      containerSizeRef.style.minHeight = '';
+      containerSizeRef.style.minWidth = '';
+    };
+  }, [containerSizeRef, dimensionKey]);
+}