Create a tree split widget

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

@@ -44,6 +44,7 @@ export function DeleteButton<SCHEMA extends AnySchema>({
   deferred: initialDeferred = false,
   component: ButtonComponent = Button.Secondary,
   onDeleted: handleDeleted,
+  isIcon = false,
 }: {
   readonly resource: SpecifyResource<SCHEMA>;
   readonly deletionMessage?: React.ReactNode;
@@ -55,10 +56,12 @@ export function DeleteButton<SCHEMA extends AnySchema>({
   readonly deferred?: boolean;
   readonly component?: typeof Button['Secondary'];
   readonly onDeleted?: () => void;
+  readonly isIcon?: boolean;
 }): JSX.Element {
   const [deferred, setDeferred] = useLiveState<boolean>(
     React.useCallback(() => initialDeferred, [initialDeferred, resource])
   );
+
   const [blockers, setBlockers] = useAsyncState<RA<DeleteBlocker>>(
     React.useCallback(
       async () => (deferred ? undefined : fetchBlockers(resource)),
@@ -76,16 +79,27 @@ export function DeleteButton<SCHEMA extends AnySchema>({
 
   return (
     <>
-      <ButtonComponent
-        title={isBlocked ? formsText.deleteBlocked() : undefined}
-        onClick={(): void => {
-          handleOpen();
-          setDeferred(false);
-        }}
-      >
-        {isBlocked ? icons.exclamation : undefined}
-        {commonText.delete()}
-      </ButtonComponent>
+      {isIcon ? (
+        <Button.Icon
+          title={isBlocked ? formsText.deleteBlocked() : commonText.delete()}
+          icon="trash"
+          onClick={(): void => {
+            handleOpen();
+            setDeferred(false);
+          }}
+        />
+      ) : (
+        <ButtonComponent
+          title={isBlocked ? formsText.deleteBlocked() : undefined}
+          onClick={(): void => {
+            handleOpen();
+            setDeferred(false);
+          }}
+        >
+          {isBlocked ? icons.exclamation : undefined}
+          {commonText.delete()}
+        </ButtonComponent>
+      )}
       {isOpen ? (
         blockers === undefined ? (
           <Dialog

specifyweb/frontend/js_src/lib/components/TreeView/Actions.tsx

@@ -8,7 +8,7 @@ import { queryText } from '../../localization/query';
 import { treeText } from '../../localization/tree';
 import { formData } from '../../utils/ajax/helpers';
 import { ping } from '../../utils/ajax/ping';
-import type { GetOrSet, RA } from '../../utils/types';
+import type { GetSet, RA } from '../../utils/types';
 import { toLowerCase } from '../../utils/utils';
 import { Button } from '../Atoms/Button';
 import { Link } from '../Atoms/Link';
@@ -35,7 +35,7 @@ export function TreeViewActions<SCHEMA extends AnyTree>({
   actionRow,
   onChange: handleChange,
   onRefresh: handleRefresh,
-  setFocusPath,
+  focusPath: [focusPath, setFocusPath],
 }: {
   readonly tableName: SCHEMA['tableName'];
   readonly focusRef: React.MutableRefObject<HTMLAnchorElement | null>;
@@ -44,7 +44,7 @@ export function TreeViewActions<SCHEMA extends AnyTree>({
   readonly actionRow: Row | undefined;
   readonly onChange: (row: Row | undefined) => void;
   readonly onRefresh: () => void;
-  readonly setFocusPath: GetOrSet<RA<number> | undefined>[1];
+  readonly focusPath: GetSet<RA<number>>;
 }): JSX.Element {
   const isRoot = ranks[0] === focusedRow?.rankId;
 
@@ -77,22 +77,28 @@ export function TreeViewActions<SCHEMA extends AnyTree>({
         <li className="contents">
           {typeof focusedRow === 'object' ? (
             isRoot ? (
-              <Button.Small onClick={undefined}>
-                {queryText.query()}
-              </Button.Small>
+              <Button.Icon
+                title={queryText.query()}
+                onClick={undefined}
+                icon="search"
+              />
             ) : (
-              <Link.Small
+              <Link.Icon
                 forwardRef={focusRef}
                 href={`/specify/query/fromtree/${tableName.toLowerCase()}/${
                   focusedRow.nodeId
                 }/`}
                 target="_blank"
-              >
-                {queryText.query()}
-              </Link.Small>
+                title={queryText.query()}
+                icon="search"
+              />
             )
           ) : (
-            <Button.Small onClick={undefined}>{queryText.query()}</Button.Small>
+            <Button.Icon
+              title={queryText.query()}
+              onClick={undefined}
+              icon="search"
+            />
           )}
         </li>
       )}
@@ -119,7 +125,7 @@ export function TreeViewActions<SCHEMA extends AnyTree>({
             tableName={tableName}
             onDeleted={() => {
               handleRefresh();
-              setFocusPath((path) => path?.slice(0, -1));
+              setFocusPath(focusPath?.slice(0, -1));
             }}
           />
         </li>
@@ -144,30 +150,32 @@ export function TreeViewActions<SCHEMA extends AnyTree>({
       )}
       {hasPermission(resourceName, 'move') && (
         <li className="contents">
-          <Button.Small
+          <Button.Icon
+            title={treeText.move()}
             disabled={disableButtons || isRoot}
             onClick={(): void => setAction('move')}
-          >
-            {treeText.move()}
-          </Button.Small>
+            icon="arrowsMove"
+          />
         </li>
       )}
       {hasPermission(resourceName, 'merge') && (
         <li className="contents">
-          <Button.Small
+          <Button.Icon
+            icon="merge"
+            title={treeText.merge()}
             disabled={disableButtons || isRoot}
             onClick={(): void => setAction('merge')}
-          >
-            {treeText.merge()}
-          </Button.Small>
+          />
         </li>
       )}
       {hasPermission(
         resourceName,
         isSynonym ? 'desynonymize' : 'synonymize'
       ) && (
         <li className="contents">
-          <Button.Small
+          <Button.Icon
+            icon={isSynonym ? 'undoSynonym' : 'synonym'}
+            title={isSynonym ? treeText.undoSynonymy() : treeText.synonymize()}
             disabled={
               disableButtons ||
               isRoot ||
@@ -178,9 +186,7 @@ export function TreeViewActions<SCHEMA extends AnyTree>({
             onClick={(): void =>
               setAction(isSynonym ? 'desynonymize' : 'synonymize')
             }
-          >
-            {isSynonym ? treeText.undoSynonymy() : treeText.synonymize()}
-          </Button.Small>
+          />
         </li>
       )}
     </menu>
@@ -237,13 +243,13 @@ function EditRecordDialog<SCHEMA extends AnyTree>({
 
   return (
     <>
-      <Button.Small
+      <Button.Icon
         aria-pressed={isOpen}
         disabled={nodeId === undefined || disabled}
         onClick={handleToggle}
-      >
-        {label}
-      </Button.Small>
+        title={label}
+        icon={addNew === false ? 'pencil' : 'plus'}
+      />
       {isOpen && typeof resource === 'object' && (
         <ResourceView
           dialog="nonModal"
@@ -452,13 +458,14 @@ function NodeDeleteButton({
   );
 
   return disabled || resource === undefined ? (
-    <Button.Small onClick={undefined}>{commonText.delete()}</Button.Small>
+    <Button.Icon onClick={undefined} title={commonText.delete()} icon="trash" />
   ) : (
     <DeleteButton
       component={Button.Small}
       deferred
       resource={resource}
       onDeleted={handleDeleted}
+      isIcon={true}
     />
   );
 }

specifyweb/frontend/js_src/lib/components/TreeView/Row.tsx

@@ -175,9 +175,9 @@ export function TreeRow({
                 color:
                   typeof row.acceptedId === 'number' ? synonymColor : undefined,
               }}
-              onClick={({ metaKey, shiftKey }): void =>
-                metaKey || shiftKey ? handleFocusNode([]) : handleToggle(false)
-              }
+              onClick={({ metaKey, shiftKey }): void => {
+                metaKey || shiftKey ? handleFocusNode([]) : handleToggle(false);
+              }}
               onKeyDown={(event): void => {
                 const action = mapKey(event);
                 if (action === undefined) return undefined;