From c703170571d5e8b0b1c6ca145f9306ddeb3c0851 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Wed, 15 Mar 2023 14:38:53 -0700
Subject: [PATCH 01/23] Create paginator component

Fixes #1398
---
 .../lib/components/Toolbar/Paginator.tsx      |  56 ++++++++
 .../lib/components/Toolbar/RecordSets.tsx     | 121 ++++++++++--------
 2 files changed, 124 insertions(+), 53 deletions(-)
 create mode 100644 specifyweb/frontend/js_src/lib/components/Toolbar/Paginator.tsx

diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/Paginator.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/Paginator.tsx
new file mode 100644
index 00000000000..acfb0cd3b31
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/Paginator.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Select } from '../Atoms/Form';
+import { Slider } from '../FormSliders/Slider';
+
+export function usePaginator({
+  totalCount,
+  onPageChange: handlePageChange,
+  currentPage,
+  rowsPerPage,
+  rowsPerPageValue = 10,
+}: {
+  readonly totalCount: number | undefined;
+  readonly onPageChange: (selected: number) => void;
+  readonly currentPage: number;
+  readonly rowsPerPage: (selected: number) => void;
+  readonly rowsPerPageValue: number;
+}): { paginator: JSX.Element } {
+  const pageCount =
+    totalCount === undefined ? 0 : Math.ceil(totalCount / rowsPerPageValue);
+  return {
+    paginator: (
+      <div className="flex flex-wrap gap-2">
+        <span className="flex-1"></span>
+        {rowsPerPageValue === 500 ? (
+          ''
+        ) : (
+          <div>
+            <Slider
+              count={pageCount ?? 0}
+              value={currentPage}
+              onChange={handlePageChange}
+            />
+          </div>
+        )}
+        <div className="flex flex-1 justify-end">
+          <Select
+            value={rowsPerPageValue}
+            onValueChange={(selected) => {
+              const currentIndex = currentPage * rowsPerPageValue;
+              rowsPerPage(Number.parseInt(selected));
+              const newPageIndex = Math.floor(
+                currentIndex / Number.parseInt(selected)
+              );
+              handlePageChange(newPageIndex);
+            }}
+          >
+            <option value={10}>10</option>
+            <option value={50}>50</option>
+            <option value={100}>100</option>
+            <option value={500}>Unlimited</option>
+          </Select>
+        </div>
+      </div>
+    ),
+  };
+}
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index ddd652c2cf1..94bf3ef45fd 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -27,6 +27,7 @@ import { TableIcon } from '../Molecules/TableIcon';
 import { hasToolPermission } from '../Permissions/helpers';
 import { OverlayContext } from '../Router/Router';
 import { EditRecordSet } from './RecordSetEdit';
+import { usePaginator } from './Paginator';
 
 export function RecordSetsOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);
@@ -65,18 +66,29 @@ export function RecordSetsDialog({
     'name'
   );
 
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const [rowsPerPage, setRowPerPage] = React.useState<number>(10);
+  const { paginator } = usePaginator({
+    totalCount: data?.totalCount,
+    onPageChange: handlePageChange,
+    currentPage,
+    rowsPerPage,
+    rowsPerPageValue,
+  });
+
   const [unsortedData] = useAsyncState(
     React.useCallback(
       async () =>
         fetchCollection('RecordSet', {
           specifyUser: userInformation.id,
           type: 0,
-          limit: 5000,
+          limit: rowsPerPage,
           domainFilter: true,
           orderBy: '-timestampCreated',
+          offset: currentPage * rowsPerPage,
           dbTableId: table?.tableId,
         }),
-      [table]
+      [table, rowsPerPage]
     ),
     true
   );
@@ -100,59 +112,62 @@ export function RecordSetsDialog({
       children({
         ...data,
         children: (
-          <table className="grid-table grid-cols-[1fr_auto_min-content_min-content] gap-2">
-            <thead>
-              <tr>
-                <th scope="col">
-                  <Button.LikeLink onClick={(): void => handleSort('name')}>
-                    {tables.RecordSet.label}
-                    <SortIndicator fieldName="name" sortConfig={sortConfig} />
-                  </Button.LikeLink>
-                </th>
-                <th scope="col">
-                  <Button.LikeLink
-                    onClick={(): void => handleSort('timestampCreated')}
-                  >
-                    {getField(tables.RecordSet, 'timestampCreated').label}
-                    <SortIndicator
-                      fieldName="timestampCreated"
-                      sortConfig={sortConfig}
-                    />
-                  </Button.LikeLink>
-                </th>
-                <th scope="col">{commonText.size()}</th>
-                <td />
-              </tr>
-            </thead>
-            <tbody>
-              {data.records.map((recordSet) => (
-                <Row
-                  key={recordSet.id}
-                  recordSet={recordSet}
-                  onConfigure={handleConfigure?.bind(undefined, recordSet)}
-                  onEdit={
-                    isReadOnly
-                      ? undefined
-                      : (): void =>
-                          setState({
-                            type: 'EditState',
-                            recordSet: deserializeResource(recordSet),
-                          })
-                  }
-                  onSelect={
-                    typeof handleSelect === 'function'
-                      ? (): void => handleSelect(recordSet)
-                      : undefined
-                  }
-                />
-              ))}
-              {data.totalCount !== data.records.length && (
+          <>
+            <table className="grid-table grid-cols-[1fr_auto_min-content_min-content] gap-2">
+              <thead>
                 <tr>
-                  <td colSpan={3}>{commonText.listTruncated()}</td>
+                  <th scope="col">
+                    <Button.LikeLink onClick={(): void => handleSort('name')}>
+                      {tables.RecordSet.label}
+                      <SortIndicator fieldName="name" sortConfig={sortConfig} />
+                    </Button.LikeLink>
+                  </th>
+                  <th scope="col">
+                    <Button.LikeLink
+                      onClick={(): void => handleSort('timestampCreated')}
+                    >
+                      {getField(tables.RecordSet, 'timestampCreated').label}
+                      <SortIndicator
+                        fieldName="timestampCreated"
+                        sortConfig={sortConfig}
+                      />
+                    </Button.LikeLink>
+                  </th>
+                  <th scope="col">{commonText.size()}</th>
+                  <td />
                 </tr>
-              )}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {data.records.map((recordSet) => (
+                  <Row
+                    key={recordSet.id}
+                    recordSet={recordSet}
+                    onConfigure={handleConfigure?.bind(undefined, recordSet)}
+                    onEdit={
+                      isReadOnly
+                        ? undefined
+                        : (): void =>
+                            setState({
+                              type: 'EditState',
+                              recordSet: deserializeResource(recordSet),
+                            })
+                    }
+                    onSelect={
+                      typeof handleSelect === 'function'
+                        ? (): void => handleSelect(recordSet)
+                        : undefined
+                    }
+                  />
+                ))}
+                {data.totalCount !== data.records.length && (
+                  <tr>
+                    <td colSpan={3}>{commonText.listTruncated()}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            {paginator}
+          </>
         ),
         dialog: (children, buttons) => (
           <Dialog

From 44ac47af37f4f469f83b19fed7de1a3df070b81d Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Thu, 16 Mar 2023 12:40:02 -0700
Subject: [PATCH 02/23] Move Paginator component to molecule and delete
 uncessary libraries

Fixes #1398
---
 .../js_src/lib/components/{Toolbar => Molecules}/Paginator.tsx  | 0
 .../frontend/js_src/lib/components/Toolbar/RecordSets.tsx       | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename specifyweb/frontend/js_src/lib/components/{Toolbar => Molecules}/Paginator.tsx (100%)

diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/Paginator.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
similarity index 100%
rename from specifyweb/frontend/js_src/lib/components/Toolbar/Paginator.tsx
rename to specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 94bf3ef45fd..07291853237 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -27,7 +27,7 @@ import { TableIcon } from '../Molecules/TableIcon';
 import { hasToolPermission } from '../Permissions/helpers';
 import { OverlayContext } from '../Router/Router';
 import { EditRecordSet } from './RecordSetEdit';
-import { usePaginator } from './Paginator';
+import { usePaginator } from '../Molecules/Paginator';
 
 export function RecordSetsOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);

From 928be8b4816e7dd0e6aedbbc83ca1fd663cb5b47 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 17 Mar 2023 09:33:09 -0500
Subject: [PATCH 03/23] Simplify usage of usePaginator()

Shift burden of responsibility to the hook, from the component. Since
the hook is going to be called in many places, that will result in
reduction of code.
---
 .../lib/components/Molecules/Paginator.tsx    | 103 ++++++++++--------
 .../lib/components/Toolbar/RecordSets.tsx     |  21 +---
 .../js_src/lib/localization/common.ts         |   3 +
 3 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
index acfb0cd3b31..887e2185c70 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
@@ -1,56 +1,65 @@
 import React from 'react';
+
+import { commonText } from '../../localization/common';
+import type { GetSet } from '../../utils/types';
 import { Select } from '../Atoms/Form';
+import { formatNumber } from '../Atoms/Internationalization';
 import { Slider } from '../FormSliders/Slider';
 
-export function usePaginator({
-  totalCount,
-  onPageChange: handlePageChange,
-  currentPage,
-  rowsPerPage,
-  rowsPerPageValue = 10,
-}: {
-  readonly totalCount: number | undefined;
-  readonly onPageChange: (selected: number) => void;
-  readonly currentPage: number;
-  readonly rowsPerPage: (selected: number) => void;
-  readonly rowsPerPageValue: number;
-}): { paginator: JSX.Element } {
-  const pageCount =
-    totalCount === undefined ? 0 : Math.ceil(totalCount / rowsPerPageValue);
+/**
+ * Infinity hitting the practical limits
+ */
+const infinity = 500;
+const pageSizes = [10, 50, 100];
+
+export function usePaginator(defaultRowsPerPage: number = 10): {
+  readonly paginator: (totalCount: number | undefined) => JSX.Element;
+  readonly currentPage: GetSet<number>;
+  readonly limit: number;
+  readonly offset: number;
+} {
+  const getSetPage = React.useState<number>(0);
+  const [currentPage, setCurrentPage] = getSetPage;
+  const [pageSize, setPageSize] = React.useState<number>(defaultRowsPerPage);
   return {
-    paginator: (
-      <div className="flex flex-wrap gap-2">
-        <span className="flex-1"></span>
-        {rowsPerPageValue === 500 ? (
-          ''
-        ) : (
-          <div>
-            <Slider
-              count={pageCount ?? 0}
-              value={currentPage}
-              onChange={handlePageChange}
-            />
+    paginator(totalCount): JSX.Element {
+      const pageCount =
+        totalCount === undefined ? 0 : Math.ceil(totalCount / pageSize);
+      return (
+        <div className="flex flex-wrap gap-2">
+          <span className="flex-1" />
+          {pageSize === infinity ? undefined : (
+            <div>
+              <Slider
+                count={pageCount ?? 0}
+                value={currentPage}
+                onChange={setCurrentPage}
+              />
+            </div>
+          )}
+          <div className="flex flex-1 justify-end">
+            <Select
+              value={pageSize}
+              onValueChange={(rawNewPageSize): void => {
+                const newPageSize = Number.parseInt(rawNewPageSize);
+                const currentIndex = currentPage * pageSize;
+                setPageSize(newPageSize);
+                setCurrentPage(Math.floor(currentIndex / newPageSize));
+              }}
+            >
+              {pageSizes.map((size) => (
+                <option key={size} value={size}>
+                  {formatNumber(size)}
+                </option>
+              ))}
+              <option value={infinity}>{commonText.unlimited()}</option>
+            </Select>
           </div>
-        )}
-        <div className="flex flex-1 justify-end">
-          <Select
-            value={rowsPerPageValue}
-            onValueChange={(selected) => {
-              const currentIndex = currentPage * rowsPerPageValue;
-              rowsPerPage(Number.parseInt(selected));
-              const newPageIndex = Math.floor(
-                currentIndex / Number.parseInt(selected)
-              );
-              handlePageChange(newPageIndex);
-            }}
-          >
-            <option value={10}>10</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-            <option value={500}>Unlimited</option>
-          </Select>
         </div>
-      </div>
-    ),
+      );
+    },
+    currentPage: getSetPage,
+    limit: pageSize,
+    offset: currentPage * pageSize,
   };
 }
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 07291853237..3b4958ee7e0 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -22,12 +22,12 @@ import type { RecordSet } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
 import { DateElement } from '../Molecules/DateElement';
 import { Dialog } from '../Molecules/Dialog';
+import { usePaginator } from '../Molecules/Paginator';
 import { SortIndicator, useSortConfig } from '../Molecules/Sorting';
 import { TableIcon } from '../Molecules/TableIcon';
 import { hasToolPermission } from '../Permissions/helpers';
 import { OverlayContext } from '../Router/Router';
 import { EditRecordSet } from './RecordSetEdit';
-import { usePaginator } from '../Molecules/Paginator';
 
 export function RecordSetsOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);
@@ -66,29 +66,20 @@ export function RecordSetsDialog({
     'name'
   );
 
-  const [currentPage, setCurrentPage] = React.useState<number>(0);
-  const [rowsPerPage, setRowPerPage] = React.useState<number>(10);
-  const { paginator } = usePaginator({
-    totalCount: data?.totalCount,
-    onPageChange: handlePageChange,
-    currentPage,
-    rowsPerPage,
-    rowsPerPageValue,
-  });
-
+  const { paginator, limit, offset } = usePaginator();
   const [unsortedData] = useAsyncState(
     React.useCallback(
       async () =>
         fetchCollection('RecordSet', {
           specifyUser: userInformation.id,
           type: 0,
-          limit: rowsPerPage,
+          limit,
           domainFilter: true,
           orderBy: '-timestampCreated',
-          offset: currentPage * rowsPerPage,
+          offset,
           dbTableId: table?.tableId,
         }),
-      [table, rowsPerPage]
+      [table, limit, offset]
     ),
     true
   );
@@ -166,7 +157,7 @@ export function RecordSetsDialog({
                 )}
               </tbody>
             </table>
-            {paginator}
+            {paginator(data?.totalCount)}
           </>
         ),
         dialog: (children, buttons) => (
diff --git a/specifyweb/frontend/js_src/lib/localization/common.ts b/specifyweb/frontend/js_src/lib/localization/common.ts
index 9cd7fdde6ba..7ee3dff4d39 100644
--- a/specifyweb/frontend/js_src/lib/localization/common.ts
+++ b/specifyweb/frontend/js_src/lib/localization/common.ts
@@ -609,4 +609,7 @@ export const commonText = createDictionary({
     'ru-ru': 'Времени осталось',
     'uk-ua': 'Час, що залишився',
   },
+  unlimited: {
+    'en-us': 'Unlimited',
+  },
 } as const);

From 08bb7ba9f3e6957c6dd54d9c3712d43d7ae407d1 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 17 Mar 2023 09:36:29 -0500
Subject: [PATCH 04/23] Sort Record Sets on the back-end

Fixes https://github.com/specify/specify7/pull/3195/files#r1140301202
---
 .../lib/components/Toolbar/RecordSets.tsx     | 24 ++++---------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 3b4958ee7e0..17a6cd9f149 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -61,13 +61,10 @@ export function RecordSetsDialog({
     | State<'MainState'>
   >({ type: 'MainState' });
 
-  const [sortConfig, handleSort, applySortConfig] = useSortConfig(
-    'listOfRecordSets',
-    'name'
-  );
+  const [sortConfig, handleSort] = useSortConfig('listOfRecordSets', 'name');
 
   const { paginator, limit, offset } = usePaginator();
-  const [unsortedData] = useAsyncState(
+  const [data] = useAsyncState(
     React.useCallback(
       async () =>
         fetchCollection('RecordSet', {
@@ -75,27 +72,14 @@ export function RecordSetsDialog({
           type: 0,
           limit,
           domainFilter: true,
-          orderBy: '-timestampCreated',
+          orderBy: `${sortConfig.ascending ? '' : '-'}${sortConfig.sortField}`,
           offset,
           dbTableId: table?.tableId,
         }),
-      [table, limit, offset]
+      [table, limit, offset, sortConfig]
     ),
     true
   );
-  const data = React.useMemo(
-    () =>
-      typeof unsortedData === 'object'
-        ? {
-            ...unsortedData,
-            records: applySortConfig(
-              unsortedData.records,
-              (recordSet) => recordSet[sortConfig.sortField]
-            ),
-          }
-        : undefined,
-    [unsortedData, sortConfig]
-  );
 
   const isReadOnly = React.useContext(ReadOnlyContext);
   return typeof data === 'object' ? (

From 5cfa38e7e7a223d9faaa886009adfa3fd57bf765 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 17 Mar 2023 09:45:17 -0500
Subject: [PATCH 05/23] Fix sort config causing infinite fetch loop

Because default value for sort config was a new object that was
created on each render
---
 .../js_src/lib/components/Molecules/Sorting.tsx        | 10 ++++++++--
 .../js_src/lib/components/Toolbar/RecordSets.tsx       |  7 +++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Sorting.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Sorting.tsx
index 84eb612a77d..58a045c677d 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Sorting.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Sorting.tsx
@@ -51,8 +51,14 @@ export function useSortConfig<NAME extends keyof SortConfigs>(
     mapper: (item: T) => boolean | number | string | null | undefined
   ) => RA<T>
 ] {
-  const [sortConfig = { sortField: defaultField, ascending }, setSortConfig] =
-    useCachedState('sortConfig', cacheKey);
+  const defaultValue = React.useMemo(
+    () => ({ sortField: defaultField, ascending }),
+    [defaultField, ascending]
+  );
+  const [sortConfig = defaultValue, setSortConfig] = useCachedState(
+    'sortConfig',
+    cacheKey
+  );
   const handleClick = React.useCallback(
     (sortField: SortConfigs[NAME]) => {
       const newSortConfig: SortConfig<SortConfigs[NAME]> = {
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 17a6cd9f149..058a6d5949b 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -64,6 +64,9 @@ export function RecordSetsDialog({
   const [sortConfig, handleSort] = useSortConfig('listOfRecordSets', 'name');
 
   const { paginator, limit, offset } = usePaginator();
+  const orderBy = `${sortConfig.ascending ? '' : '-'}${
+    sortConfig.sortField
+  }` as const;
   const [data] = useAsyncState(
     React.useCallback(
       async () =>
@@ -72,11 +75,11 @@ export function RecordSetsDialog({
           type: 0,
           limit,
           domainFilter: true,
-          orderBy: `${sortConfig.ascending ? '' : '-'}${sortConfig.sortField}`,
+          orderBy,
           offset,
           dbTableId: table?.tableId,
         }),
-      [table, limit, offset, sortConfig]
+      [table, limit, offset, orderBy]
     ),
     true
   );

From 1ec1f2528ced133b0ed4927e370d9718e5ac859c Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 17 Mar 2023 10:00:56 -0500
Subject: [PATCH 06/23] Fix wrong sizing for the paginator <select>

@CarolineDenis I had to remove the min-w from <select> as it was causing
issues in many places. Instead, you should add it back only for small
screens, and only in places where it was necessary
---
 specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx        | 2 +-
 .../frontend/js_src/lib/components/Molecules/Paginator.tsx      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx b/specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx
index 864fba8ea43..2f9100e9920 100644
--- a/specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx
@@ -259,7 +259,7 @@ export const Select = wrap<
 >(
   'Select',
   'select',
-  `${className.notTouchedInput} w-full pr-5 bg-right cursor-pointer min-w-[theme(spacing.40)]`,
+  `${className.notTouchedInput} w-full pr-5 bg-right cursor-pointer`,
   ({ onValueChange, onValuesChange, ...props }) => ({
     ...props,
     /*
diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
index 887e2185c70..a8d5e615745 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
@@ -39,6 +39,7 @@ export function usePaginator(defaultRowsPerPage: number = 10): {
           )}
           <div className="flex flex-1 justify-end">
             <Select
+              className="!w-auto"
               value={pageSize}
               onValueChange={(rawNewPageSize): void => {
                 const newPageSize = Number.parseInt(rawNewPageSize);

From bf23b487961776b2757c1e55c533f8f4ffb21775 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 17 Mar 2023 10:05:49 -0500
Subject: [PATCH 07/23] Remember user's page size preference

---
 .../lib/components/Molecules/Paginator.tsx    | 20 ++++++++++++++-----
 .../lib/components/Toolbar/RecordSets.tsx     |  2 +-
 .../js_src/lib/utils/cache/definitions.ts     |  5 ++++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
index a8d5e615745..c4feb8f61bd 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useCachedState } from '../../hooks/useCachedState';
 import { commonText } from '../../localization/common';
 import type { GetSet } from '../../utils/types';
 import { Select } from '../Atoms/Form';
@@ -10,9 +11,14 @@ import { Slider } from '../FormSliders/Slider';
  * Infinity hitting the practical limits
  */
 const infinity = 500;
-const pageSizes = [10, 50, 100];
+export const pageSizes = [10, 50, 100, infinity];
 
-export function usePaginator(defaultRowsPerPage: number = 10): {
+export type Paginators = 'recordSets';
+
+export function usePaginator(
+  cacheName: Paginators,
+  defaultRowsPerPage: typeof pageSizes[number] = 10
+): {
   readonly paginator: (totalCount: number | undefined) => JSX.Element;
   readonly currentPage: GetSet<number>;
   readonly limit: number;
@@ -20,7 +26,10 @@ export function usePaginator(defaultRowsPerPage: number = 10): {
 } {
   const getSetPage = React.useState<number>(0);
   const [currentPage, setCurrentPage] = getSetPage;
-  const [pageSize, setPageSize] = React.useState<number>(defaultRowsPerPage);
+  const [pageSize = defaultRowsPerPage, setPageSize] = useCachedState(
+    'pageSizes',
+    cacheName
+  );
   return {
     paginator(totalCount): JSX.Element {
       const pageCount =
@@ -50,10 +59,11 @@ export function usePaginator(defaultRowsPerPage: number = 10): {
             >
               {pageSizes.map((size) => (
                 <option key={size} value={size}>
-                  {formatNumber(size)}
+                  {size === infinity
+                    ? commonText.unlimited()
+                    : formatNumber(size)}
                 </option>
               ))}
-              <option value={infinity}>{commonText.unlimited()}</option>
             </Select>
           </div>
         </div>
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 058a6d5949b..9f03031161c 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -63,7 +63,7 @@ export function RecordSetsDialog({
 
   const [sortConfig, handleSort] = useSortConfig('listOfRecordSets', 'name');
 
-  const { paginator, limit, offset } = usePaginator();
+  const { paginator, limit, offset } = usePaginator('recordSets');
   const orderBy = `${sortConfig.ascending ? '' : '-'}${
     sortConfig.sortField
   }` as const;
diff --git a/specifyweb/frontend/js_src/lib/utils/cache/definitions.ts b/specifyweb/frontend/js_src/lib/utils/cache/definitions.ts
index e876fc92c84..49b519622d8 100644
--- a/specifyweb/frontend/js_src/lib/utils/cache/definitions.ts
+++ b/specifyweb/frontend/js_src/lib/utils/cache/definitions.ts
@@ -19,11 +19,13 @@ import type {
   LeafletCacheSalt,
   MarkerLayerName,
 } from '../../components/Leaflet/addOns';
+import type { pageSizes } from '../../components/Molecules/Paginator';
+import { Paginators } from '../../components/Molecules/Paginator';
 import type { SortConfig } from '../../components/Molecules/Sorting';
 import type { Conformations } from '../../components/TreeView/helpers';
 import type { UserPreferences } from '../../components/UserPreferences/helpers';
 import type { WbSearchPreferences } from '../../components/WorkBench/AdvancedSearch';
-import type { IR, RA } from '../types';
+import type { IR, RA, RR } from '../types';
 import { ensure } from '../types';
 
 /** The types of cached values are defined here */
@@ -141,6 +143,7 @@ export type CacheDefinitions = {
     readonly filters: AppResourceFilters;
     readonly showHiddenTables: boolean;
   };
+  readonly pageSizes: RR<Paginators, typeof pageSizes[number]>;
 };
 
 export type SortConfigs = {

From 88137e78cafc4dc185b3768cd108689550b872fa Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Mon, 20 Mar 2023 13:18:26 -0700
Subject: [PATCH 08/23] Implement pagination in Query overlay and refactor it

Fixes #1398
---
 .../lib/components/Molecules/Paginator.tsx    |   4 +-
 .../lib/components/QueryBuilder/Import.tsx    |  34 +-
 .../js_src/lib/components/Toolbar/Query.tsx   | 307 ++++++++++--------
 .../lib/components/Toolbar/QueryTables.tsx    |   7 +-
 .../lib/components/Toolbar/RecordSetEdit.tsx  |  13 +-
 .../lib/components/Toolbar/RecordSets.tsx     |   3 +
 6 files changed, 199 insertions(+), 169 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
index c4feb8f61bd..a03b994a4b3 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx
@@ -13,7 +13,7 @@ import { Slider } from '../FormSliders/Slider';
 const infinity = 500;
 export const pageSizes = [10, 50, 100, infinity];
 
-export type Paginators = 'recordSets';
+export type Paginators = 'recordSets' | 'queryBuilder';
 
 export function usePaginator(
   cacheName: Paginators,
@@ -48,7 +48,7 @@ export function usePaginator(
           )}
           <div className="flex flex-1 justify-end">
             <Select
-              className="!w-auto"
+              className={pageSize === infinity ? 'w-auto' : 'w-16'}
               value={pageSize}
               onValueChange={(rawNewPageSize): void => {
                 const newPageSize = Number.parseInt(rawNewPageSize);
diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx
index 050ee6e3618..63dd5c006ec 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useAsyncState } from '../../hooks/useAsyncState';
 
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
@@ -14,17 +15,15 @@ import { Form } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
 import { Submit } from '../Atoms/Submit';
 import { LoadingContext } from '../Core/Contexts';
+import { fetchRows } from '../DataModel/collection';
 import { getField } from '../DataModel/helpers';
-import type {
-  SerializedRecord,
-  SerializedResource,
-} from '../DataModel/helperTypes';
+import type { SerializedRecord } from '../DataModel/helperTypes';
 import type { SpecifyResource } from '../DataModel/legacyTypes';
 import { getResourceApiUrl } from '../DataModel/resource';
 import { tables } from '../DataModel/tables';
 import type { SpQuery } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
-import { Dialog, LoadingScreen } from '../Molecules/Dialog';
+import { Dialog } from '../Molecules/Dialog';
 import { FilePicker, fileToText } from '../Molecules/FilePicker';
 import { TableIcon } from '../Molecules/TableIcon';
 import { generateMappingPathPreview } from '../WbPlanView/mappingPreview';
@@ -32,11 +31,9 @@ import { QueryFieldSpec } from './fieldSpec';
 
 export function QueryImport({
   onClose: handleClose,
-  queries,
 }: {
   readonly onClose: () => void;
-  readonly queries: RA<SerializedResource<SpQuery>> | undefined;
-}): JSX.Element {
+}): JSX.Element | null {
   const loading = React.useContext(LoadingContext);
   const navigate = useNavigate();
 
@@ -53,7 +50,20 @@ export function QueryImport({
       navigate(`/specify/query/${queryResource.id}/`);
   }, [queryResource, hiddenFields]);
 
-  return typeof queries === 'object' ? (
+  const [queriesNames] = useAsyncState(
+    React.useCallback(
+      async () =>
+        fetchRows('SpQuery', {
+          fields: { name: ['string'] },
+          distinct: true,
+          limit: 0,
+        }),
+      []
+    ),
+    true
+  );
+
+  return typeof queriesNames === 'object' ? (
     <Dialog
       buttons={commonText.cancel()}
       header={commonText.import()}
@@ -123,7 +133,7 @@ export function QueryImport({
                       'name',
                       getUniqueName(
                         queryResource.get('name'),
-                        queries.map(({ name }) => name),
+                        queriesNames.map(({ name }) => name),
                         getField(tables.SpQuery, 'name').length
                       )
                     )
@@ -164,7 +174,5 @@ export function QueryImport({
         )}
       </>
     </Dialog>
-  ) : (
-    <LoadingScreen />
-  );
+  ) : null;
 }
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx
index 4e000c488ce..6c7da7cf4a0 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx
@@ -4,6 +4,7 @@
 
 import React from 'react';
 import { useOutletContext } from 'react-router';
+import { LocalizedString } from 'typesafe-i18n';
 
 import { useAsyncState } from '../../hooks/useAsyncState';
 import { commonText } from '../../localization/common';
@@ -13,7 +14,6 @@ import { Button } from '../Atoms/Button';
 import { icons } from '../Atoms/Icons';
 import { Link } from '../Atoms/Link';
 import { ReadOnlyContext } from '../Core/Contexts';
-import type { CollectionFetchFilters } from '../DataModel/collection';
 import { fetchCollection } from '../DataModel/collection';
 import { getField } from '../DataModel/helpers';
 import type { SerializedResource } from '../DataModel/helperTypes';
@@ -23,6 +23,7 @@ import type { SpQuery } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
 import { DateElement } from '../Molecules/DateElement';
 import { Dialog } from '../Molecules/Dialog';
+import { usePaginator } from '../Molecules/Paginator';
 import { SortIndicator, useSortConfig } from '../Molecules/Sorting';
 import { TableIcon } from '../Molecules/TableIcon';
 import { hasPermission, hasToolPermission } from '../Permissions/helpers';
@@ -33,179 +34,211 @@ import { QueryTables } from './QueryTables';
 
 export function QueriesOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);
-  const queries = useQueries();
   return (
     <SafeOutlet<QueryListContextType>
       getQuerySelectUrl={undefined}
       newQueryUrl="/specify/overlay/queries/new/"
-      queries={queries}
       onClose={handleClose}
     />
   );
 }
 
-const QUERY_FETCH_LIMIT = 5000;
-
 export type QueryListContextType = {
-  readonly queries: RA<SerializedResource<SpQuery>> | undefined;
+  readonly queries?: RA<SerializedResource<SpQuery>>;
   readonly newQueryUrl: string;
   readonly onClose: () => void;
-  readonly getQuerySelectUrl?: (query: SerializedResource<SpQuery>) => string;
+  readonly getQuerySelectUrl?: (
+    query: SerializedResource<SpQuery>
+  ) => string | undefined;
+  readonly children?: (props: {
+    readonly totalCount: number;
+    readonly records: RA<SerializedResource<SpQuery>>;
+    readonly children: JSX.Element;
+    readonly dialog: (children: JSX.Element) => JSX.Element;
+  }) => JSX.Element;
 };
 
-export function useQueries(
-  spQueryFilter?: Partial<CollectionFetchFilters<SpQuery>>
-): RA<SerializedResource<SpQuery>> | undefined {
-  const [queries, setQueries] = useAsyncState<RA<SerializedResource<SpQuery>>>(
+export function QueryListOutlet(): JSX.Element {
+  const props = useOutletContext<QueryListContextType>();
+  return <QueryListDialog {...props} />;
+}
+
+export function QueryListDialog({
+  newQueryUrl,
+  onClose: handleClose,
+  getQuerySelectUrl,
+  children = ({ children, dialog }): JSX.Element => dialog(children),
+}: QueryListContextType): JSX.Element | null {
+  const [sortConfig, handleSort] = useSortConfig(
+    'listOfQueries',
+    'name',
+    false
+  );
+
+  const { paginator, limit, offset } = usePaginator('queryBuilder');
+
+  const orderBy = `${sortConfig.ascending ? '' : '-'}${
+    sortConfig.sortField
+  }` as const;
+
+  const [data, setData] = useAsyncState(
     React.useCallback(
       async () =>
         fetchCollection('SpQuery', {
-          limit: QUERY_FETCH_LIMIT,
-          ...(spQueryFilter ?? { specifyUser: userInformation.id }),
-        }).then(({ records }) => records),
-      [spQueryFilter]
+          limit,
+          specifyUser: userInformation.id,
+          offset,
+          orderBy,
+        }),
+      [limit, offset, orderBy]
     ),
     true
   );
+
   React.useEffect(
     () =>
       resourceEvents.on('deleted', (resource) => {
         if (resource.specifyTable.name === 'SpQuery')
-          setQueries(queries?.filter((query) => query.id !== resource.id));
+          setData(
+            data === undefined
+              ? undefined
+              : {
+                  records: data.records.filter(
+                    (query) => query.id !== resource.id
+                  ),
+                  totalCount: data.totalCount - 1,
+                }
+          );
       }),
-    [queries]
+    [data]
   );
-  return queries;
-}
 
-export function QueryListOutlet(): JSX.Element {
-  const props = useOutletContext<QueryListContextType>();
-  return <QueryListDialog {...props} />;
-}
+  const isReadOnly = React.useContext(ReadOnlyContext);
 
-export function QueryListDialog({
-  queries,
-  newQueryUrl,
-  onClose: handleClose,
-  getQuerySelectUrl,
-}: QueryListContextType): JSX.Element | null {
-  return Array.isArray(queries) ? (
-    <Dialog
-      buttons={
-        <>
-          <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
-          {(hasToolPermission('queryBuilder', 'create') ||
-            hasPermission('/querybuilder/query', 'execute')) && (
-            <Link.Blue href={newQueryUrl}>{commonText.new()}</Link.Blue>
-          )}
-        </>
-      }
-      header={commonText.countLine({
-        resource: queryText.queries(),
-        count: queries.length,
-      })}
-      icon={<span className="text-blue-500">{icons.documentSearch}</span>}
-      onClose={handleClose}
-    >
-      <QueryList getQuerySelectUrl={getQuerySelectUrl} queries={queries} />
-    </Dialog>
-  ) : null;
+  return typeof data === 'object'
+    ? children({
+        ...data,
+        children: (
+          <>
+            <table className="grid-table grid-cols-[repeat(3,auto)_min-content] gap-2">
+              <thead>
+                <tr>
+                  <th
+                    className="pl-[calc(theme(spacing.table-icon)_+_theme(spacing.2))]"
+                    scope="col"
+                  >
+                    <Button.LikeLink onClick={(): void => handleSort('name')}>
+                      {getField(tables.SpQuery, 'name').label}
+                      <SortIndicator fieldName="name" sortConfig={sortConfig} />
+                    </Button.LikeLink>
+                  </th>
+                  <th scope="col">
+                    <Button.LikeLink
+                      onClick={(): void => handleSort('timestampCreated')}
+                    >
+                      {getField(tables.SpQuery, 'timestampCreated').label}
+                      <SortIndicator
+                        fieldName="timestampCreated"
+                        sortConfig={sortConfig}
+                      />
+                    </Button.LikeLink>
+                  </th>
+                  <th scope="col">
+                    <Button.LikeLink
+                      onClick={(): void => handleSort('timestampModified')}
+                    >
+                      {getField(tables.SpQuery, 'timestampModified').label}
+                      <SortIndicator
+                        fieldName="timestampModified"
+                        sortConfig={sortConfig}
+                      />
+                    </Button.LikeLink>
+                  </th>
+                  <td />
+                </tr>
+              </thead>
+              <tbody>
+                {data.records.map((query) => (
+                  <QueryList
+                    key={query.id}
+                    query={query}
+                    isReadOnly={isReadOnly}
+                    getQuerySelectUrl={getQuerySelectUrl}
+                  />
+                ))}
+                {data.totalCount !== data.records.length && (
+                  <tr>
+                    <td colSpan={3}>{commonText.listTruncated()}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            {paginator(data?.totalCount)}
+          </>
+        ),
+        dialog: (children) => (
+          <Dialog
+            buttons={
+              <>
+                <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
+                {(hasToolPermission('queryBuilder', 'create') ||
+                  hasPermission('/querybuilder/query', 'execute')) && (
+                  <Link.Blue href={newQueryUrl}>{commonText.new()}</Link.Blue>
+                )}
+              </>
+            }
+            header={commonText.countLine({
+              resource: queryText.queries(),
+              count: data.totalCount,
+            })}
+            icon={<span className="text-blue-500">{icons.documentSearch}</span>}
+            onClose={handleClose}
+          >
+            {children}
+          </Dialog>
+        ),
+      })
+    : null;
 }
 
 function QueryList({
-  queries: unsortedQueries,
+  query,
   getQuerySelectUrl,
+  isReadOnly,
 }: {
-  readonly queries: RA<SerializedResource<SpQuery>>;
-  readonly getQuerySelectUrl?: (query: SerializedResource<SpQuery>) => string;
+  readonly query: SerializedResource<SpQuery>;
+  readonly getQuerySelectUrl?: (
+    query: SerializedResource<SpQuery>
+  ) => string | undefined;
+  readonly isReadOnly: boolean;
 }): JSX.Element {
-  const [sortConfig, handleSort, applySortConfig] = useSortConfig(
-    'listOfQueries',
-    'name',
-    false
-  );
-
-  const queries = applySortConfig(
-    unsortedQueries,
-    (query) => query[sortConfig.sortField]
-  );
-
-  const isReadOnly = React.useContext(ReadOnlyContext);
   return (
-    <table className="grid-table grid-cols-[repeat(3,auto)_min-content] gap-2">
-      <thead>
-        <tr>
-          <th
-            className="pl-[calc(theme(spacing.table-icon)_+_theme(spacing.2))]"
-            scope="col"
-          >
-            <Button.LikeLink onClick={(): void => handleSort('name')}>
-              {getField(tables.SpQuery, 'name').label}
-              <SortIndicator fieldName="name" sortConfig={sortConfig} />
-            </Button.LikeLink>
-          </th>
-          <th scope="col">
-            <Button.LikeLink
-              onClick={(): void => handleSort('timestampCreated')}
-            >
-              {getField(tables.SpQuery, 'timestampCreated').label}
-              <SortIndicator
-                fieldName="timestampCreated"
-                sortConfig={sortConfig}
-              />
-            </Button.LikeLink>
-          </th>
-          <th scope="col">
-            <Button.LikeLink
-              onClick={(): void => handleSort('timestampModified')}
-            >
-              {getField(tables.SpQuery, 'timestampModified').label}
-              <SortIndicator
-                fieldName="timestampModified"
-                sortConfig={sortConfig}
-              />
-            </Button.LikeLink>
-          </th>
-          <td />
-        </tr>
-      </thead>
-      <tbody>
-        {queries.map((query) => (
-          <tr key={query.id} title={query.remarks ?? undefined}>
-            <td>
-              <Link.Default
-                className="overflow-x-auto"
-                href={
-                  getQuerySelectUrl?.(query) ?? `/specify/query/${query.id}/`
-                }
-              >
-                <TableIcon
-                  label
-                  name={getTableById(query.contextTableId).name}
-                />
-                {query.name}
-              </Link.Default>
-            </td>
-            <td>
-              <DateElement date={query.timestampCreated} />
-            </td>
-            <td>
-              {typeof query.timestampModified === 'string' && (
-                <DateElement date={query.timestampModified} />
-              )}
-            </td>
-            <td className="justify-end">
-              {!isReadOnly && <QueryEditButton query={query} />}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <tr title={query.remarks ?? undefined}>
+      <td>
+        <Link.Default
+          className="overflow-x-auto"
+          href={getQuerySelectUrl?.(query) ?? `/specify/query/${query.id}/`}
+        >
+          <TableIcon label name={getTableById(query.contextTableId).name} />
+          {query.name as LocalizedString}
+        </Link.Default>
+      </td>
+      <td>
+        <DateElement date={query.timestampCreated} />
+      </td>
+      <td>
+        {typeof query.timestampModified === 'string' && (
+          <DateElement date={query.timestampModified} />
+        )}
+      </td>
+      <td className="justify-end">
+        {!isReadOnly && <QueryEditButton query={query} />}
+      </td>
+    </tr>
   );
 }
 
 export function NewQuery(): JSX.Element {
-  const { queries, onClose: handleClose } =
-    useOutletContext<QueryListContextType>();
-  return <QueryTables queries={queries} onClose={handleClose} />;
+  const { onClose: handleClose } = useOutletContext<QueryListContextType>();
+  return <QueryTables onClose={handleClose} />;
 }
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/QueryTables.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/QueryTables.tsx
index b1c85b14306..791a8848d79 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/QueryTables.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/QueryTables.tsx
@@ -10,10 +10,9 @@ import { DataEntry } from '../Atoms/DataEntry';
 import { icons } from '../Atoms/Icons';
 import { Link } from '../Atoms/Link';
 import { ReadOnlyContext } from '../Core/Contexts';
-import type { SerializedResource } from '../DataModel/helperTypes';
 import type { SpecifyTable } from '../DataModel/specifyTable';
 import { getTableById, strictGetTable } from '../DataModel/tables';
-import type { SpQuery, Tables } from '../DataModel/types';
+import type { Tables } from '../DataModel/types';
 import { Dialog, dialogClassNames } from '../Molecules/Dialog';
 import { TableIcon } from '../Molecules/TableIcon';
 import { hasTablePermission, hasToolPermission } from '../Permissions/helpers';
@@ -91,10 +90,8 @@ export function useQueryTables(): GetSet<RA<SpecifyTable>> {
 }
 
 export function QueryTables({
-  queries,
   onClose: handleClose,
 }: {
-  readonly queries: RA<SerializedResource<SpQuery>> | undefined;
   readonly onClose: () => void;
 }): JSX.Element {
   const [tables] = useQueryTables();
@@ -103,7 +100,7 @@ export function QueryTables({
   const [isEditing, handleEditing] = useBooleanState();
   const [isImporting, handleImporting] = useBooleanState();
   return isImporting ? (
-    <QueryImport queries={queries} onClose={handleClose} />
+    <QueryImport onClose={handleClose} />
   ) : isEditing ? (
     <QueryTablesEdit onClose={handleClose} />
   ) : (
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSetEdit.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSetEdit.tsx
index fc5ce6407ad..a7fff205da9 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSetEdit.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSetEdit.tsx
@@ -9,10 +9,9 @@ import type { SpecifyResource } from '../DataModel/legacyTypes';
 import { getTableById, tables } from '../DataModel/tables';
 import type { RecordSet } from '../DataModel/types';
 import { ResourceView } from '../Forms/ResourceView';
-import { userInformation } from '../InitialContext/userInformation';
 import { hasToolPermission } from '../Permissions/helpers';
 import { formatUrl } from '../Router/queryString';
-import { QueryListDialog, useQueries } from './Query';
+import { QueryListDialog } from './Query';
 import { ReadOnlyContext } from '../Core/Contexts';
 
 export function EditRecordSet({
@@ -77,15 +76,6 @@ function QueryRecordSet({
   readonly recordSet: SpecifyResource<RecordSet>;
   readonly onClose: () => void;
 }): JSX.Element {
-  const filters = React.useMemo(
-    () => ({
-      specifyUser: userInformation.id,
-      contextTableId: recordSet.get('dbTableId'),
-    }),
-    [recordSet]
-  );
-  const queries = useQueries(filters);
-
   return (
     <QueryListDialog
       getQuerySelectUrl={(query): string =>
@@ -99,7 +89,6 @@ function QueryRecordSet({
         ).name.toLowerCase()}/`,
         { recordSetId: recordSet.id }
       )}
-      queries={queries}
       onClose={handleClose}
     />
   );
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 9f03031161c..4dfbd977009 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -64,9 +64,11 @@ export function RecordSetsDialog({
   const [sortConfig, handleSort] = useSortConfig('listOfRecordSets', 'name');
 
   const { paginator, limit, offset } = usePaginator('recordSets');
+
   const orderBy = `${sortConfig.ascending ? '' : '-'}${
     sortConfig.sortField
   }` as const;
+
   const [data] = useAsyncState(
     React.useCallback(
       async () =>
@@ -85,6 +87,7 @@ export function RecordSetsDialog({
   );
 
   const isReadOnly = React.useContext(ReadOnlyContext);
+
   return typeof data === 'object' ? (
     state.type === 'MainState' ? (
       children({

From 05a0c4a400c864f2092f126b6e7eb5b2dea75250 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Wed, 19 Apr 2023 09:30:14 -0500
Subject: [PATCH 09/23] Delete duplicate file

It should have been removed, but probably was resurected by a git merge
---
 .../js_src/lib/utils/ajax/specifyApi.ts       | 215 ------------------
 1 file changed, 215 deletions(-)
 delete mode 100644 specifyweb/frontend/js_src/lib/utils/ajax/specifyApi.ts

diff --git a/specifyweb/frontend/js_src/lib/utils/ajax/specifyApi.ts b/specifyweb/frontend/js_src/lib/utils/ajax/specifyApi.ts
deleted file mode 100644
index 4260c2c93d7..00000000000
--- a/specifyweb/frontend/js_src/lib/utils/ajax/specifyApi.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * Wrappers for some back-end API endpoints
- */
-
-import type { CollectionFetchFilters } from '../../components/DataModel/collection';
-import type {
-  AnySchema,
-  AnyTree,
-  SerializedRecord,
-} from '../../components/DataModel/helperTypes';
-import type { SpecifyResource } from '../../components/DataModel/legacyTypes';
-import type { Tables } from '../../components/DataModel/types';
-import { formatUrl } from '../../components/Router/queryString';
-import type { IR, RA, RR } from '../types';
-import { filterArray } from '../types';
-import { formData } from './helpers';
-import { ajax } from './index';
-
-// FEATURE: consider replacing this with Query Builder
-export const queryCbxExtendedSearch = async <SCHEMA extends AnySchema>(
-  templateResource: SpecifyResource<SCHEMA>,
-  forceCollection: number | undefined
-): Promise<RA<SpecifyResource<SCHEMA>>> =>
-  ajax<RA<SerializedRecord<SCHEMA>>>(
-    formatUrl(
-      `/express_search/querycbx/${templateResource.specifyTable.name.toLowerCase()}/`,
-      {
-        ...Object.fromEntries(
-          filterArray(
-            Object.entries(templateResource.toJSON()).map(([key, value]) => {
-              const field = templateResource.specifyTable.getField(key);
-              return field && !field.isRelationship && Boolean(value)
-                ? [key, value]
-                : undefined;
-            })
-          )
-        ),
-        forceCollection,
-      }
-    ),
-    {
-      headers: { Accept: 'application/json' },
-    }
-  ).then(({ data: results }) =>
-    results.map((result) => new templateResource.specifyTable.Resource(result))
-  );
-
-export const fetchTreePath = async (treeResource: SpecifyResource<AnyTree>) =>
-  typeof treeResource.id === 'number'
-    ? ajax<{
-        readonly Genus?: {
-          readonly name: string;
-        };
-        readonly Species?: {
-          readonly name: string;
-        };
-      }>(
-        `/api/specify_tree/${treeResource.specifyTable.name.toLowerCase()}/${
-          treeResource.id
-        }/path/`,
-        {
-          headers: {
-            Accept: 'application/json',
-          },
-        }
-      ).then(({ data }) => data)
-    : undefined;
-
-export type Preparations = RA<{
-  readonly catalogNumber: string;
-  readonly taxon: string;
-  readonly preparationId: number;
-  readonly prepType: string;
-  readonly countAmount: number;
-  readonly loaned: number;
-  readonly gifted: number;
-  readonly exchanged: number;
-  readonly available: number;
-}>;
-
-export type PreparationRow = readonly [
-  string,
-  string,
-  number,
-  string,
-  number,
-  string | null,
-  string | null,
-  string | null,
-  string
-];
-
-export const getPrepsAvailableForLoanRs = async (recordSetId: number) =>
-  ajax<RA<PreparationRow>>(
-    `/interactions/preparations_available_rs/${recordSetId}/`,
-    {
-      headers: { Accept: 'application/json' },
-    }
-  ).then(({ data }) => data);
-
-export const getPrepsAvailableForLoanCoIds = async (
-  idField: string,
-  collectionObjectIds: RA<string>
-) =>
-  ajax<RA<PreparationRow>>('/interactions/preparations_available_ids/', {
-    method: 'POST',
-    headers: { Accept: 'application/json' },
-    body: formData({
-      id_fld: idField,
-      co_ids: collectionObjectIds,
-    }),
-  }).then(({ data }) => data);
-
-export const getInteractionsForPrepId = async (prepId: number) =>
-  ajax<RA<readonly [number, string | null, string | null, string | null]>>(
-    '/interactions/prep_interactions/',
-    {
-      method: 'POST',
-      headers: { Accept: 'application/json' },
-      body: formData({ prepIds: prepId }),
-    }
-  ).then(({ data }) => data[0]);
-
-export const getPrepAvailability = async (
-  prepId: number,
-  iPrepId: number | undefined,
-  iPrepName: string
-) =>
-  ajax(
-    `/interactions/prep_availability/${prepId}/${
-      typeof iPrepId === 'number' ? `${iPrepId}/${iPrepName}/` : ''
-    }`,
-    { headers: { Accept: 'application/json' } }
-  ).then(({ data }) => data);
-
-/**
- * Fetch a collection of resources from the back-end. Can also provide filters
- */
-export const fetchRows = async <
-  TABLE_NAME extends keyof Tables,
-  SCHEMA extends Tables[TABLE_NAME],
-  FIELDS extends RR<
-    string | keyof SCHEMA['fields'],
-    RA<'boolean' | 'null' | 'number' | 'string'>
-  >
->(
-  tableName: TABLE_NAME,
-  // Basic filters. Type-safe
-  {
-    fields,
-    distinct = false,
-    ...filters
-  }: Omit<CollectionFetchFilters<SCHEMA>, 'fields'> & {
-    readonly fields: FIELDS;
-    readonly distinct?: boolean;
-  },
-  /**
-   * Advanced filters, not type-safe.
-   *
-   * Can filter on relationships by separating fields with "__"
-   * Can filter on partial dates (e.g. catalogedDate__year=2030)
-   * More info: https://docs.djangoproject.com/en/4.0/topics/db/queries/
-   */
-  advancedFilters: IR<number | string> = {}
-): Promise<RA<FieldsToTypes<FIELDS>>> => {
-  const { data } = await ajax<RA<RA<boolean | number | string | null>>>(
-    formatUrl(
-      `/api/specify_rows/${tableName.toLowerCase()}/`,
-      Object.fromEntries(
-        filterArray(
-          Array.from(
-            Object.entries({
-              ...filters,
-              ...advancedFilters,
-              ...(distinct ? { distinct: 'true' } : {}),
-              fields: Object.keys(fields).join(',').toLowerCase(),
-            }).map(([key, value]) =>
-              value === undefined
-                ? undefined
-                : [
-                    key.toLowerCase(),
-                    key === 'orderBy'
-                      ? value.toString().toLowerCase()
-                      : value.toString(),
-                  ]
-            )
-          )
-        )
-      )
-    ),
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    { headers: { Accept: 'application/json' } }
-  );
-  const keys = Object.keys(fields);
-  return data.map(
-    (row) =>
-      Object.fromEntries(
-        keys.map((key, index) => [key, row[index]])
-      ) as FieldsToTypes<FIELDS>
-  );
-};
-
-type FieldsToTypes<
-  FIELDS extends IR<RA<'boolean' | 'null' | 'number' | 'string'>>
-> = {
-  readonly [FIELD in keyof FIELDS]: FIELDS[FIELD][number] extends 'boolean'
-    ? boolean
-    : FIELDS[FIELD][number] | never extends 'null'
-    ? null
-    : FIELDS[FIELD][number] | never extends 'number'
-    ? number
-    : FIELDS[FIELD][number] | never extends 'string'
-    ? string
-    : never;
-};

From 93babd6a706ed8a681d979bfa3782620f9d9f810 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Wed, 19 Apr 2023 09:30:47 -0500
Subject: [PATCH 10/23] Fix wrong typing for fetchRows

There was conflict between "fields", the relationship in the SpQuery
table, and "fields" the property of the /api/specify_rows/ endpoint
---
 .../frontend/js_src/lib/components/DataModel/collection.ts    | 4 ++--
 .../frontend/js_src/lib/components/QueryBuilder/Import.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/DataModel/collection.ts b/specifyweb/frontend/js_src/lib/components/DataModel/collection.ts
index 7154b69fa9b..ec68d40aeac 100644
--- a/specifyweb/frontend/js_src/lib/components/DataModel/collection.ts
+++ b/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;
   },
diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx
index 63dd5c006ec..e00b1d1fbb2 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useAsyncState } from '../../hooks/useAsyncState';
 
+import { useAsyncState } from '../../hooks/useAsyncState';
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
 import { wbPlanText } from '../../localization/wbPlan';

From 3f73d6ce829140ad7bb2666460a9515623b2a3e9 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Wed, 19 Apr 2023 14:39:52 +0000
Subject: [PATCH 11/23] Lint code with ESLint and Prettier

Triggered by 03601791212086a597df739789ed0e7409882f0e on branch refs/heads/issue-1398
---
 .../js_src/lib/components/FormEditor/index.tsx         | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/FormEditor/index.tsx b/specifyweb/frontend/js_src/lib/components/FormEditor/index.tsx
index f8e2188bae0..f5e5aee166e 100644
--- a/specifyweb/frontend/js_src/lib/components/FormEditor/index.tsx
+++ b/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))

From d0f8a1529049323710bb30a14144de53db584cab Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Thu, 20 Apr 2023 08:35:53 -0700
Subject: [PATCH 12/23] Fix dialog size when navigating between pages in
 RecordSets overlay

---
 .../lib/components/Molecules/Dialog.tsx       |  45 +++-
 .../lib/components/Toolbar/RecordSets.tsx     | 219 +++++++++---------
 2 files changed, 157 insertions(+), 107 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
index 912fb4b9d25..b03ef057268 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
@@ -3,7 +3,7 @@
  *
  * @module
  */
-import React from 'react';
+import React, { MutableRefObject } from 'react';
 import type { DraggableData } from 'react-draggable';
 import Draggable from 'react-draggable';
 import type { Props } from 'react-modal';
@@ -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,44 @@ function useTitleChangeNotice(dimensionKey: string | undefined): void {
       );
   }, [dimensionKey]);
 }
+
+export function useFreezeDialogSize(
+  containerSizeRef: HTMLDivElement | null,
+  dimensionKey: string | false | undefined
+): void {
+  React.useEffect(() => {
+    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]);
+}
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 4dfbd977009..65fada650f5 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -21,13 +21,18 @@ import { getTableById, tables } from '../DataModel/tables';
 import type { RecordSet } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
 import { DateElement } from '../Molecules/DateElement';
-import { Dialog } from '../Molecules/Dialog';
+import {
+  Dialog,
+  LoadingScreen,
+  useFreezeDialogSize,
+} from '../Molecules/Dialog';
 import { usePaginator } from '../Molecules/Paginator';
 import { SortIndicator, useSortConfig } from '../Molecules/Sorting';
 import { TableIcon } from '../Molecules/TableIcon';
 import { hasToolPermission } from '../Permissions/helpers';
 import { OverlayContext } from '../Router/Router';
 import { EditRecordSet } from './RecordSetEdit';
+import { loadingGif } from '../Molecules';
 
 export function RecordSetsOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);
@@ -47,7 +52,7 @@ export function RecordSetsDialog({
   readonly onSelect?: (recordSet: SerializedResource<RecordSet>) => void;
   readonly children?: (props: {
     readonly totalCount: number;
-    readonly records: RA<SerializedResource<RecordSet>>;
+    readonly records: RA<SerializedResource<RecordSet>> | undefined;
     readonly children: JSX.Element;
     readonly dialog: (
       children: JSX.Element,
@@ -83,115 +88,117 @@ export function RecordSetsDialog({
         }),
       [table, limit, offset, orderBy]
     ),
-    true
+    false
   );
 
+  const totalCountRef = React.useRef<number | undefined>(undefined);
+  totalCountRef.current = data?.totalCount ?? totalCountRef.current;
+  const totalCount = totalCountRef.current;
+
   const isReadOnly = React.useContext(ReadOnlyContext);
 
-  return typeof data === 'object' ? (
-    state.type === 'MainState' ? (
-      children({
-        ...data,
-        children: (
-          <>
-            <table className="grid-table grid-cols-[1fr_auto_min-content_min-content] gap-2">
-              <thead>
-                <tr>
-                  <th scope="col">
-                    <Button.LikeLink onClick={(): void => handleSort('name')}>
-                      {tables.RecordSet.label}
-                      <SortIndicator fieldName="name" sortConfig={sortConfig} />
-                    </Button.LikeLink>
-                  </th>
-                  <th scope="col">
-                    <Button.LikeLink
-                      onClick={(): void => handleSort('timestampCreated')}
-                    >
-                      {getField(tables.RecordSet, 'timestampCreated').label}
-                      <SortIndicator
-                        fieldName="timestampCreated"
-                        sortConfig={sortConfig}
-                      />
-                    </Button.LikeLink>
-                  </th>
-                  <th scope="col">{commonText.size()}</th>
-                  <td />
-                </tr>
-              </thead>
-              <tbody>
-                {data.records.map((recordSet) => (
-                  <Row
-                    key={recordSet.id}
-                    recordSet={recordSet}
-                    onConfigure={handleConfigure?.bind(undefined, recordSet)}
-                    onEdit={
-                      isReadOnly
-                        ? undefined
-                        : (): void =>
-                            setState({
-                              type: 'EditState',
-                              recordSet: deserializeResource(recordSet),
-                            })
-                    }
-                    onSelect={
-                      typeof handleSelect === 'function'
-                        ? (): void => handleSelect(recordSet)
-                        : undefined
-                    }
-                  />
-                ))}
-                {data.totalCount !== data.records.length && (
-                  <tr>
-                    <td colSpan={3}>{commonText.listTruncated()}</td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-            {paginator(data?.totalCount)}
-          </>
-        ),
-        dialog: (children, buttons) => (
-          <Dialog
-            buttons={
-              <>
-                <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
-                {!isReadOnly && hasToolPermission('recordSets', 'create') && (
-                  <Button.Blue
-                    onClick={(): void => setState({ type: 'CreateState' })}
+  return totalCount === undefined ? (
+    <LoadingScreen />
+  ) : state.type === 'MainState' ? (
+    children({
+      totalCount,
+      records: data?.records,
+      children: (
+        <>
+          <table className="grid-table grid-cols-[1fr_auto_min-content_min-content] gap-2">
+            <thead>
+              <tr>
+                <th scope="col">
+                  <Button.LikeLink onClick={(): void => handleSort('name')}>
+                    {tables.RecordSet.label}
+                    <SortIndicator fieldName="name" sortConfig={sortConfig} />
+                  </Button.LikeLink>
+                </th>
+                <th scope="col">
+                  <Button.LikeLink
+                    onClick={(): void => handleSort('timestampCreated')}
                   >
-                    {commonText.new()}
-                  </Button.Blue>
-                )}
-                {buttons}
-              </>
-            }
-            dimensionsKey="RecordSets"
-            header={commonText.countLine({
-              resource: commonText.recordSets(),
-              count: data.totalCount,
-            })}
-            icon={<span className="text-blue-500">{icons.collection}</span>}
-            onClose={handleClose}
-          >
-            {children}
-          </Dialog>
-        ),
-      })
-    ) : state.type === 'CreateState' ? (
-      <FormsDialog
-        onClose={handleClose}
-        onSelected={(table): void =>
-          setState({
-            type: 'EditState',
-            recordSet: new tables.RecordSet.Resource()
-              .set('dbTableId', table.tableId)
-              .set('type', 0),
-          })
-        }
-      />
-    ) : state.type === 'EditState' ? (
-      <EditRecordSet recordSet={state.recordSet} onClose={handleClose} />
-    ) : null
+                    {getField(tables.RecordSet, 'timestampCreated').label}
+                    <SortIndicator
+                      fieldName="timestampCreated"
+                      sortConfig={sortConfig}
+                    />
+                  </Button.LikeLink>
+                </th>
+                <th scope="col">{commonText.size()}</th>
+                <td />
+              </tr>
+            </thead>
+            <tbody>
+              {data?.records.map((recordSet) => (
+                <Row
+                  key={recordSet.id}
+                  recordSet={recordSet}
+                  onConfigure={handleConfigure?.bind(undefined, recordSet)}
+                  onEdit={
+                    isReadOnly
+                      ? undefined
+                      : (): void =>
+                          setState({
+                            type: 'EditState',
+                            recordSet: deserializeResource(recordSet),
+                          })
+                  }
+                  onSelect={
+                    typeof handleSelect === 'function'
+                      ? (): void => handleSelect(recordSet)
+                      : undefined
+                  }
+                />
+              ))}
+            </tbody>
+          </table>
+          <span className="-ml-2 flex-1" />
+          {data === undefined && loadingGif}
+          {paginator(data?.totalCount)}
+        </>
+      ),
+      dialog: (children, buttons) => (
+        <Dialog
+          buttons={
+            <>
+              <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
+              {!isReadOnly && hasToolPermission('recordSets', 'create') && (
+                <Button.Blue
+                  onClick={(): void => setState({ type: 'CreateState' })}
+                >
+                  {commonText.new()}
+                </Button.Blue>
+              )}
+              {buttons}
+            </>
+          }
+          dimensionsKey="RecordSets"
+          header={commonText.countLine({
+            resource: commonText.recordSets(),
+            count: totalCount,
+          })}
+          icon={<span className="text-blue-500">{icons.collection}</span>}
+          onClose={handleClose}
+        >
+          {children}
+        </Dialog>
+      ),
+    })
+  ) : state.type === 'CreateState' ? (
+    <FormsDialog
+      onClose={handleClose}
+      onSelected={(table): void =>
+        setState({
+          type: 'EditState',
+          recordSet: new tables.RecordSet.Resource()
+            .set('dbTableId', table.tableId)
+            .set('type', 0),
+        })
+      }
+    />
+  ) : state.type === 'EditState' ? (
+    <EditRecordSet recordSet={state.recordSet} onClose={handleClose} />
   ) : null;
 }
 

From 62147efa1587aa19d5191d0506fce2db6c1dcd88 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Thu, 20 Apr 2023 09:11:30 -0700
Subject: [PATCH 13/23] Fix the size of dialog when changing page in Query
 Overlay

---
 .../js_src/lib/components/Toolbar/Query.tsx   | 177 +++++++++---------
 .../lib/components/Toolbar/RecordSets.tsx     |   6 +-
 2 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx
index 6c7da7cf4a0..e3630f84f19 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/Query.tsx
@@ -22,7 +22,7 @@ import { getTableById, tables } from '../DataModel/tables';
 import type { SpQuery } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
 import { DateElement } from '../Molecules/DateElement';
-import { Dialog } from '../Molecules/Dialog';
+import { Dialog, LoadingScreen } from '../Molecules/Dialog';
 import { usePaginator } from '../Molecules/Paginator';
 import { SortIndicator, useSortConfig } from '../Molecules/Sorting';
 import { TableIcon } from '../Molecules/TableIcon';
@@ -31,6 +31,7 @@ import { QueryEditButton } from '../QueryBuilder/Edit';
 import { OverlayContext } from '../Router/Router';
 import { SafeOutlet } from '../Router/RouterUtils';
 import { QueryTables } from './QueryTables';
+import { loadingGif } from '../Molecules';
 
 export function QueriesOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);
@@ -52,7 +53,7 @@ export type QueryListContextType = {
   ) => string | undefined;
   readonly children?: (props: {
     readonly totalCount: number;
-    readonly records: RA<SerializedResource<SpQuery>>;
+    readonly records: RA<SerializedResource<SpQuery>> | undefined;
     readonly children: JSX.Element;
     readonly dialog: (children: JSX.Element) => JSX.Element;
   }) => JSX.Element;
@@ -92,7 +93,7 @@ export function QueryListDialog({
         }),
       [limit, offset, orderBy]
     ),
-    true
+    false
   );
 
   React.useEffect(
@@ -113,92 +114,96 @@ export function QueryListDialog({
     [data]
   );
 
+  const totalCountRef = React.useRef<number | undefined>(undefined);
+  totalCountRef.current = data?.totalCount ?? totalCountRef.current;
+  const totalCount = totalCountRef.current;
+
   const isReadOnly = React.useContext(ReadOnlyContext);
 
-  return typeof data === 'object'
-    ? children({
-        ...data,
-        children: (
-          <>
-            <table className="grid-table grid-cols-[repeat(3,auto)_min-content] gap-2">
-              <thead>
-                <tr>
-                  <th
-                    className="pl-[calc(theme(spacing.table-icon)_+_theme(spacing.2))]"
-                    scope="col"
+  return totalCount === undefined ? (
+    <LoadingScreen />
+  ) : (
+    children({
+      totalCount,
+      records: data?.records,
+      children: (
+        <>
+          <table className="grid-table grid-cols-[repeat(3,auto)_min-content] gap-2">
+            <thead>
+              <tr>
+                <th
+                  className="pl-[calc(theme(spacing.table-icon)_+_theme(spacing.2))]"
+                  scope="col"
+                >
+                  <Button.LikeLink onClick={(): void => handleSort('name')}>
+                    {getField(tables.SpQuery, 'name').label}
+                    <SortIndicator fieldName="name" sortConfig={sortConfig} />
+                  </Button.LikeLink>
+                </th>
+                <th scope="col">
+                  <Button.LikeLink
+                    onClick={(): void => handleSort('timestampCreated')}
+                  >
+                    {getField(tables.SpQuery, 'timestampCreated').label}
+                    <SortIndicator
+                      fieldName="timestampCreated"
+                      sortConfig={sortConfig}
+                    />
+                  </Button.LikeLink>
+                </th>
+                <th scope="col">
+                  <Button.LikeLink
+                    onClick={(): void => handleSort('timestampModified')}
                   >
-                    <Button.LikeLink onClick={(): void => handleSort('name')}>
-                      {getField(tables.SpQuery, 'name').label}
-                      <SortIndicator fieldName="name" sortConfig={sortConfig} />
-                    </Button.LikeLink>
-                  </th>
-                  <th scope="col">
-                    <Button.LikeLink
-                      onClick={(): void => handleSort('timestampCreated')}
-                    >
-                      {getField(tables.SpQuery, 'timestampCreated').label}
-                      <SortIndicator
-                        fieldName="timestampCreated"
-                        sortConfig={sortConfig}
-                      />
-                    </Button.LikeLink>
-                  </th>
-                  <th scope="col">
-                    <Button.LikeLink
-                      onClick={(): void => handleSort('timestampModified')}
-                    >
-                      {getField(tables.SpQuery, 'timestampModified').label}
-                      <SortIndicator
-                        fieldName="timestampModified"
-                        sortConfig={sortConfig}
-                      />
-                    </Button.LikeLink>
-                  </th>
-                  <td />
-                </tr>
-              </thead>
-              <tbody>
-                {data.records.map((query) => (
-                  <QueryList
-                    key={query.id}
-                    query={query}
-                    isReadOnly={isReadOnly}
-                    getQuerySelectUrl={getQuerySelectUrl}
-                  />
-                ))}
-                {data.totalCount !== data.records.length && (
-                  <tr>
-                    <td colSpan={3}>{commonText.listTruncated()}</td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-            {paginator(data?.totalCount)}
-          </>
-        ),
-        dialog: (children) => (
-          <Dialog
-            buttons={
-              <>
-                <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
-                {(hasToolPermission('queryBuilder', 'create') ||
-                  hasPermission('/querybuilder/query', 'execute')) && (
-                  <Link.Blue href={newQueryUrl}>{commonText.new()}</Link.Blue>
-                )}
-              </>
-            }
-            header={commonText.countLine({
-              resource: queryText.queries(),
-              count: data.totalCount,
-            })}
-            icon={<span className="text-blue-500">{icons.documentSearch}</span>}
-            onClose={handleClose}
-          >
-            {children}
-          </Dialog>
-        ),
-      })
-    : null;
+                    {getField(tables.SpQuery, 'timestampModified').label}
+                    <SortIndicator
+                      fieldName="timestampModified"
+                      sortConfig={sortConfig}
+                    />
+                  </Button.LikeLink>
+                </th>
+                <td />
+              </tr>
+            </thead>
+            <tbody>
+              {data?.records.map((query) => (
+                <QueryList
+                  key={query.id}
+                  query={query}
+                  isReadOnly={isReadOnly}
+                  getQuerySelectUrl={getQuerySelectUrl}
+                />
+              ))}
+            </tbody>
+          </table>
+          <span className="-ml-2 flex-1" />
+          {data === undefined && loadingGif}
+          {paginator(data?.totalCount)}
+        </>
+      ),
+      dialog: (children) => (
+        <Dialog
+          buttons={
+            <>
+              <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
+              {(hasToolPermission('queryBuilder', 'create') ||
+                hasPermission('/querybuilder/query', 'execute')) && (
+                <Link.Blue href={newQueryUrl}>{commonText.new()}</Link.Blue>
+              )}
+            </>
+          }
+          header={commonText.countLine({
+            resource: queryText.queries(),
+            count: totalCount,
+          })}
+          icon={<span className="text-blue-500">{icons.documentSearch}</span>}
+          onClose={handleClose}
+        >
+          {children}
+        </Dialog>
+      ),
+    })
+  );
 }
 
 function QueryList({
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 65fada650f5..7c26e31f0f0 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -21,11 +21,7 @@ import { getTableById, tables } from '../DataModel/tables';
 import type { RecordSet } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
 import { DateElement } from '../Molecules/DateElement';
-import {
-  Dialog,
-  LoadingScreen,
-  useFreezeDialogSize,
-} from '../Molecules/Dialog';
+import { Dialog, LoadingScreen } from '../Molecules/Dialog';
 import { usePaginator } from '../Molecules/Paginator';
 import { SortIndicator, useSortConfig } from '../Molecules/Sorting';
 import { TableIcon } from '../Molecules/TableIcon';

From 0d08ab3fbcf1b732ffa44e695b460b2694af9e38 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Thu, 20 Apr 2023 09:23:11 -0700
Subject: [PATCH 14/23] Remove unnecessary import

---
 specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
index b03ef057268..90755252351 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
@@ -3,7 +3,7 @@
  *
  * @module
  */
-import React, { MutableRefObject } from 'react';
+import React from 'react';
 import type { DraggableData } from 'react-draggable';
 import Draggable from 'react-draggable';
 import type { Props } from 'react-modal';

From edb9802dfb59168846b3b9762e370f7d3546a909 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Thu, 20 Apr 2023 10:52:43 -0700
Subject: [PATCH 15/23] Remove full-height from ResourceView Dialog

---
 .../frontend/js_src/lib/components/Forms/ResourceView.tsx   | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx b/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx
index 06f9596ac58..cd7b6504e5e 100644
--- a/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx
+++ b/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}

From 2032722ab0712b7bcbdcce9294fb7c22730faa2f Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 21 Apr 2023 08:50:53 -0700
Subject: [PATCH 16/23] Simplify code

---
 .../frontend/js_src/lib/components/Forms/ResourceView.tsx    | 2 +-
 .../frontend/js_src/lib/components/Molecules/Dialog.tsx      | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx b/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx
index cd7b6504e5e..d2bc2a78643 100644
--- a/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx
@@ -298,7 +298,7 @@ export function ResourceView<SCHEMA extends AnySchema>({
         )
       }
       className={{
-        container: `${dialogClassNames.normalContainer}`,
+        container: dialogClassNames.normalContainer,
         content: `${className.formStyles} ${dialogClassNames.flexContent}`,
       }}
       dimensionsKey={viewName ?? resource?.specifyTable.view}
diff --git a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
index 90755252351..92366888884 100644
--- a/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx
@@ -572,11 +572,12 @@ function useTitleChangeNotice(dimensionKey: string | undefined): void {
   }, [dimensionKey]);
 }
 
-export function useFreezeDialogSize(
+function useFreezeDialogSize(
   containerSizeRef: HTMLDivElement | null,
-  dimensionKey: string | false | undefined
+  dimensionKey: string | undefined
 ): void {
   React.useEffect(() => {
+    if (dimensionKey === undefined) return;
     if (containerSizeRef === null) return undefined;
     let oldHeight = containerSizeRef.offsetHeight;
     let oldWidth = containerSizeRef.offsetWidth;

From e9aed7f366ada07b982d32201d6dff89e6d9ae43 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 21 Apr 2023 14:20:21 -0500
Subject: [PATCH 17/23] Fix failing test

---
 .../frontend/js_src/lib/components/Errors/stackTrace.ts      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Errors/stackTrace.ts b/specifyweb/frontend/js_src/lib/components/Errors/stackTrace.ts
index 56ab8cd0e96..97d463a9c1c 100644
--- a/specifyweb/frontend/js_src/lib/components/Errors/stackTrace.ts
+++ b/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,

From 17d598257111e3fc42fe80a6398e10bc33fdc94c Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Fri, 21 Apr 2023 14:27:06 -0500
Subject: [PATCH 18/23] Provide simple mock for resize observer

---
 .../frontend/js_src/lib/localization/common.ts    |  7 -------
 .../js_src/lib/tests/__mocks__/ResizeObserver.ts  | 15 +++++++++++++++
 specifyweb/frontend/js_src/lib/tests/setup.ts     |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 specifyweb/frontend/js_src/lib/tests/__mocks__/ResizeObserver.ts

diff --git a/specifyweb/frontend/js_src/lib/localization/common.ts b/specifyweb/frontend/js_src/lib/localization/common.ts
index f5ab2f79b1f..21fad67ee84 100644
--- a/specifyweb/frontend/js_src/lib/localization/common.ts
+++ b/specifyweb/frontend/js_src/lib/localization/common.ts
@@ -231,13 +231,6 @@ export const commonText = createDictionary({
     'fr-fr': 'Mettre à jour',
     'uk-ua': 'Оновити',
   },
-  listTruncated: {
-    'en-us': '(list truncated)',
-    'ru-ru': '(список усечен)',
-    'es-es': '(lista truncada)',
-    'fr-fr': '(liste tronquée)',
-    'uk-ua': '(список скорочено)',
-  },
   fullDate: {
     'en-us': 'Full Date',
     'ru-ru': 'Полная дата',
diff --git a/specifyweb/frontend/js_src/lib/tests/__mocks__/ResizeObserver.ts b/specifyweb/frontend/js_src/lib/tests/__mocks__/ResizeObserver.ts
new file mode 100644
index 00000000000..e87c3b266a9
--- /dev/null
+++ b/specifyweb/frontend/js_src/lib/tests/__mocks__/ResizeObserver.ts
@@ -0,0 +1,15 @@
+Object.defineProperty(globalThis, 'ResizeObserver', {
+  /**
+   * Can't use an arrow function or method shorthand here because Response
+   * should be invokable with "new" (as in "new ResizeObserver()")
+   */
+  // eslint-disable-next-line object-shorthand
+  value: function () {
+    return {
+      observe: (): void => {},
+      disconnect: (): void => {},
+    };
+  },
+});
+
+export {};
diff --git a/specifyweb/frontend/js_src/lib/tests/setup.ts b/specifyweb/frontend/js_src/lib/tests/setup.ts
index b7e9fc40504..b4cc471cb82 100644
--- a/specifyweb/frontend/js_src/lib/tests/setup.ts
+++ b/specifyweb/frontend/js_src/lib/tests/setup.ts
@@ -6,6 +6,7 @@ import '@testing-library/jest-dom';
 import './__mocks__/CSS';
 import './__mocks__/Response';
 import './__mocks__/matchMedia';
+import './__mocks__/ResizeObserver';
 
 import { configure } from '@testing-library/react';
 import failOnConsole from 'jest-fail-on-console';

From 0e47c2b9299687dfc64eec53b80dda71b34e7402 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Thu, 27 Apr 2023 10:55:50 -0500
Subject: [PATCH 19/23] Work arround DevTools UX issue

---
 specifyweb/frontend/js_src/css/main.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/specifyweb/frontend/js_src/css/main.css b/specifyweb/frontend/js_src/css/main.css
index 7fe0d44d742..c042dc37660 100644
--- a/specifyweb/frontend/js_src/css/main.css
+++ b/specifyweb/frontend/js_src/css/main.css
@@ -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

From 73cc56a30b868ffdd6b740e43109ec7fe7c542fc Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Thu, 27 Apr 2023 10:56:53 -0500
Subject: [PATCH 20/23] Always apply padding right to numeric fields

So that long numbers are not hidden behind numeric field arrows when
typing them
---
 specifyweb/frontend/js_src/css/main.css                        | 2 +-
 specifyweb/frontend/js_src/lib/components/FormFields/Field.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/specifyweb/frontend/js_src/css/main.css b/specifyweb/frontend/js_src/css/main.css
index c042dc37660..6b12230b9c1 100644
--- a/specifyweb/frontend/js_src/css/main.css
+++ b/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) {
diff --git a/specifyweb/frontend/js_src/lib/components/FormFields/Field.tsx b/specifyweb/frontend/js_src/lib/components/FormFields/Field.tsx
index 725982dcd3f..94d18d644f8 100644
--- a/specifyweb/frontend/js_src/lib/components/FormFields/Field.tsx
+++ b/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'
             : ''
         }
       `}

From b397f5a5ca916405673e19d47e7b7e22660fd8d9 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Thu, 27 Apr 2023 11:40:15 -0500
Subject: [PATCH 21/23] Fix slider positioning in Interactions Dialog

Make them stick to the bottom of the dialog
---
 .../lib/components/Errors/ErrorDialog.tsx     |   2 +-
 .../Interactions/InteractionDialog.tsx        | 168 +++++++++---------
 .../lib/components/Toolbar/RecordSets.tsx     |   2 +-
 3 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Errors/ErrorDialog.tsx b/specifyweb/frontend/js_src/lib/components/Errors/ErrorDialog.tsx
index f4413d1ee65..cca4bfd6c5a 100644
--- a/specifyweb/frontend/js_src/lib/components/Errors/ErrorDialog.tsx
+++ b/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}
diff --git a/specifyweb/frontend/js_src/lib/components/Interactions/InteractionDialog.tsx b/specifyweb/frontend/js_src/lib/components/Interactions/InteractionDialog.tsx
index 5a698e87df1..fbd050be2e4 100644
--- a/specifyweb/frontend/js_src/lib/components/Interactions/InteractionDialog.tsx
+++ b/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>
         )}
diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 7c26e31f0f0..00f16a359fa 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -149,7 +149,7 @@ export function RecordSetsDialog({
               ))}
             </tbody>
           </table>
-          <span className="-ml-2 flex-1" />
+          <span className="-mt-2 flex-1" />
           {data === undefined && loadingGif}
           {paginator(data?.totalCount)}
         </>

From 4763ca45c117bb5fe01241fd3a5602aad6e1d462 Mon Sep 17 00:00:00 2001
From: Max Patiiuk <max@patii.uk>
Date: Thu, 27 Apr 2023 16:46:41 +0000
Subject: [PATCH 22/23] Lint code with ESLint and Prettier

Triggered by b397f5a5ca916405673e19d47e7b7e22660fd8d9 on branch refs/heads/issue-1398
---
 .../frontend/js_src/lib/components/Toolbar/RecordSets.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
index 00f16a359fa..f4581d1b961 100644
--- a/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
+++ b/specifyweb/frontend/js_src/lib/components/Toolbar/RecordSets.tsx
@@ -20,6 +20,7 @@ import type { SpecifyTable } from '../DataModel/specifyTable';
 import { getTableById, tables } from '../DataModel/tables';
 import type { RecordSet } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
+import { loadingGif } from '../Molecules';
 import { DateElement } from '../Molecules/DateElement';
 import { Dialog, LoadingScreen } from '../Molecules/Dialog';
 import { usePaginator } from '../Molecules/Paginator';
@@ -28,7 +29,6 @@ import { TableIcon } from '../Molecules/TableIcon';
 import { hasToolPermission } from '../Permissions/helpers';
 import { OverlayContext } from '../Router/Router';
 import { EditRecordSet } from './RecordSetEdit';
-import { loadingGif } from '../Molecules';
 
 export function RecordSetsOverlay(): JSX.Element {
   const handleClose = React.useContext(OverlayContext);

From 949a08ae79afde5145157e523e8e0cb2d1bcd673 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Wed, 3 May 2023 10:32:24 -0700
Subject: [PATCH 23/23] Fix failing tests

---
 specifyweb/frontend/js_src/lib/components/Forms/Save.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/Forms/Save.tsx b/specifyweb/frontend/js_src/lib/components/Forms/Save.tsx
index 28e7d7b620b..6f36e66f5d0 100644
--- a/specifyweb/frontend/js_src/lib/components/Forms/Save.tsx
+++ b/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;
   /**