Add basic tree creation functionality

specifyweb/frontend/js_src/lib/components/FormSliders/IntegratedRecordSelector.tsx

@@ -111,6 +111,9 @@ export function IntegratedRecordSelector({
 
   const [isDialogOpen, handleOpenDialog, handleCloseDialog] = useBooleanState();
 
+  const isTaxonTreeDefItemTable = 
+    collection.table.specifyTable.name.includes('TaxonTreeDefItem');
+
   const isAttachmentTable =
     collection.table.specifyTable.name.includes('Attachment');
 
@@ -185,6 +188,7 @@ export function IntegratedRecordSelector({
                       <DataEntry.Add
                         disabled={
                           isReadOnly ||
+                          isTaxonTreeDefItemTable ||
                           (isToOne && collection.models.length > 0)
                         }
                         onClick={(): void => {
@@ -252,7 +256,8 @@ export function IntegratedRecordSelector({
                 preHeaderButtons={collapsibleButton}
                 sortField={sortField}
                 viewName={viewName}
-                onAdd={(resources): void => {
+                onAdd={isTaxonTreeDefItemTable ? undefined :
+                  (resources): void => { 
                   if (!isInteraction) collection.add(resources);
                   handleAdd?.(resources);
                 }}

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

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { commonText } from '../../localization/common';
+import { treeText } from '../../localization/tree';
+import type { DeepPartial } from '../../utils/types';
+import { localized } from '../../utils/types';
+import { Ul } from '../Atoms';
+import { Button } from '../Atoms/Button';
+import { className } from '../Atoms/className';
+import type {
+  AnySchema,
+  AnyTree,
+  SerializedResource,
+} from '../DataModel/helperTypes';
+import type { SpecifyResource } from '../DataModel/legacyTypes';
+import { deserializeResource } from '../DataModel/serializers';
+import type { TaxonTreeDef } from '../DataModel/types';
+import { ResourceView } from '../Forms/ResourceView';
+import { userInformation } from '../InitialContext/userInformation';
+import { Dialog } from '../Molecules/Dialog';
+import { defaultTreeDefs } from './defaults';
+
+export function CreateTree<SCHEMA extends AnyTree>({
+  tableName,
+}: {
+  readonly tableName: SCHEMA['tableName'];
+}): JSX.Element {
+  const [isActive, setIsActive] = React.useState(0);
+  const [selectedResource, setSelectedResource] = React.useState<
+    SpecifyResource<AnySchema> | undefined
+  >(undefined);
+
+  const handleClick = (
+    resource: DeepPartial<SerializedResource<TaxonTreeDef>>
+  ) => {
+    const dsResource = deserializeResource(resource);
+    setSelectedResource(dsResource);
+    setIsActive(2);
+  };
+
+  return (
+    <>
+      {tableName === 'Taxon' && userInformation.isadmin ? (
+        <Button.Icon
+          className={className.dataEntryAdd}
+          icon="plus"
+          title={treeText.addTree()}
+          onClick={() => {
+            setIsActive(1);
+          }}
+        />
+      ) : null}
+      {isActive === 1 ? (
+        <Dialog
+          buttons={
+            <Button.DialogClose component={Button.BorderedGray}>
+              {commonText.cancel()}
+            </Button.DialogClose>
+          }
+          header={treeText.addTree()}
+          onClose={() => setIsActive(0)}
+        >
+          <Ul className="flex flex-col gap-2">
+            {defaultTreeDefs.map((resource, index) => (
+              <li key={index}>
+                <Button.LikeLink onClick={(): void => handleClick(resource)}>
+                  {localized(resource.name)}
+                </Button.LikeLink>
+              </li>
+            ))}
+          </Ul>
+        </Dialog>
+      ) : null}
+      {isActive === 2 && selectedResource !== undefined ? (
+        <ResourceView
+          dialog="modal"
+          isDependent={false}
+          isSubForm={false}
+          resource={selectedResource}
+          onAdd={undefined}
+          onClose={() => setIsActive(0)}
+          onDeleted={undefined}
+          onSaved={(): void => globalThis.location.reload()}
+        />
+      ) : null}
+    </>
+  );
+}