Add COG children picker to forms

specifyweb/frontend/js_src/lib/components/FormCells/COJODialog.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { commonText } from '../../localization/common';
+import { formsText } from '../../localization/forms';
+import { localized } from '../../utils/types';
+import { DataEntry } from '../Atoms/DataEntry';
+import type { AnySchema } from '../DataModel/helperTypes';
+import type { SpecifyResource } from '../DataModel/legacyTypes';
+import type { Collection, SpecifyTable } from '../DataModel/specifyTable';
+import { tables } from '../DataModel/tables';
+import type {
+  CollectionObject,
+  CollectionObjectGroup,
+} from '../DataModel/types';
+import { ResourceView } from '../Forms/ResourceView';
+import { Dialog } from '../Molecules/Dialog';
+import { TableIcon } from '../Molecules/TableIcon';
+import { SearchDialog } from '../SearchDialog';
+
+export function COJODialog({
+  parentResource,
+  collection,
+}: {
+  readonly parentResource: SpecifyResource<CollectionObjectGroup> | undefined;
+  readonly collection: Collection<AnySchema> | undefined;
+}): JSX.Element | null {
+  const [isOpen, handleOpen, handleClose] = useBooleanState();
+  const COJOChildrenTables = [
+    tables.CollectionObject,
+    tables.CollectionObjectGroup,
+  ];
+  const [state, setState] = React.useState<'Add' | 'Search' | undefined>(
+    undefined
+  );
+  const [resource, setResource] = React.useState<
+    | SpecifyTable<CollectionObject>
+    | SpecifyTable<CollectionObjectGroup>
+    | undefined
+  >(undefined);
+  const [newResource, setNewResource] = React.useState<
+    | SpecifyResource<CollectionObject>
+    | SpecifyResource<CollectionObjectGroup>
+    | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    if (resource !== undefined) {
+      const createdResource = new resource.Resource();
+      setNewResource(createdResource);
+    }
+  }, [resource]);
+  return (
+    <>
+      <DataEntry.Add onClick={handleOpen} />
+      {isOpen && (
+        <Dialog
+          buttons={commonText.cancel()}
+          dimensionsKey="COGChildren"
+          header={formsText.addCOGChildren()}
+          onClose={handleClose}
+        >
+          <div className="flex flex-col gap-4">
+            {COJOChildrenTables.map((table) => (
+              <div className="flex items-center gap-2" key={table.name}>
+                <TableIcon label name={table.name} />
+                {localized(table.label)}
+                <DataEntry.Add
+                  onClick={(): void => {
+                    setState('Add');
+                    setResource(table);
+                  }}
+                />
+                <DataEntry.Search
+                  aria-pressed="true"
+                  onClick={(): void => {
+                    setState('Search');
+                    setResource(table);
+                  }}
+                />
+              </div>
+            ))}
+          </div>
+        </Dialog>
+      )}
+      {state === 'Add' &&
+      newResource !== undefined &&
+      parentResource !== undefined ? (
+        <ResourceView
+          dialog="nonModal"
+          isDependent={false}
+          isSubForm={false}
+          resource={newResource as SpecifyResource<CollectionObject>}
+          onAdd={undefined}
+          onClose={(): void => {
+            setState(undefined);
+            handleClose();
+          }}
+          onDeleted={undefined}
+          onSaved={(): void => {
+            const newCOJO = new tables.CollectionObjectGroupJoin.Resource();
+            const field =
+              newResource.specifyTable.name === 'CollectionObject'
+                ? 'childco'
+                : 'childcog';
+            newCOJO.set(field, newResource as never);
+            newCOJO.set('parentcog', parentResource);
+            collection?.add(newCOJO);
+            setState(undefined);
+            setResource(undefined);
+            handleClose();
+          }}
+          onSaving={undefined}
+        />
+      ) : undefined}
+      {state === 'Search' &&
+      resource !== undefined &&
+      parentResource !== undefined ? (
+        <SearchDialog
+          extraFilters={undefined}
+          forceCollection={undefined}
+          multiple={false}
+          searchView={undefined}
+          table={resource as SpecifyTable<CollectionObject>}
+          onClose={(): void => setState(undefined)}
+          onSelected={([selectedResource]): void => {
+            const newCOJO = new tables.CollectionObjectGroupJoin.Resource();
+            const field =
+              selectedResource.specifyTable.name === 'CollectionObject'
+                ? 'childco'
+                : 'childcog';
+            newCOJO.set(field, selectedResource as never);
+            newCOJO.set('parentcog', parentResource);
+            collection?.add(newCOJO);
+            setState(undefined);
+            handleClose();
+          }}
+        />
+      ) : undefined}
+    </>
+  );
+}

specifyweb/frontend/js_src/lib/components/FormCells/FormTable.tsx

@@ -19,7 +19,8 @@ import { backboneFieldSeparator } from '../DataModel/helpers';
 import type { AnySchema } from '../DataModel/helperTypes';
 import type { SpecifyResource } from '../DataModel/legacyTypes';
 import type { Relationship } from '../DataModel/specifyField';
-import type { SpecifyTable } from '../DataModel/specifyTable';
+import type { Collection, SpecifyTable } from '../DataModel/specifyTable';
+import type { CollectionObjectGroup } from '../DataModel/types';
 import { FormMeta } from '../FormMeta';
 import type { FormCellDefinition, SubViewSortField } from '../FormParse/cells';
 import { attachmentView } from '../FormParse/webOnlyViews';
@@ -34,6 +35,7 @@ import { userPreferences } from '../Preferences/userPreferences';
 import { SearchDialog } from '../SearchDialog';
 import { AttachmentPluginSkeleton } from '../SkeletonLoaders/AttachmentPlugin';
 import { relationshipIsToMany } from '../WbPlanView/mappingHelpers';
+import { COJODialog } from './COJODialog';
 import { FormCell } from './index';
 
 const cellToLabel = (
@@ -73,6 +75,7 @@ export function FormTable<SCHEMA extends AnySchema>({
   onFetchMore: handleFetchMore,
   isCollapsed = false,
   preHeaderButtons,
+  collection,
 }: {
   readonly relationship: Relationship;
   readonly isDependent: boolean;
@@ -89,6 +92,7 @@ export function FormTable<SCHEMA extends AnySchema>({
   readonly onFetchMore: (() => Promise<void>) | undefined;
   readonly isCollapsed: boolean | undefined;
   readonly preHeaderButtons?: JSX.Element;
+  readonly collection: Collection<AnySchema> | undefined;
 }): JSX.Element {
   const [sortConfig, setSortConfig] = React.useState<
     SortConfig<string> | undefined
@@ -441,30 +445,39 @@ export function FormTable<SCHEMA extends AnySchema>({
         </DataEntry.Grid>
       </div>
     );
-  const addButton =
-    typeof handleAddResources === 'function' &&
+
+  const isCOJO = relationship.relatedTable.name === 'CollectionObjectGroupJoin';
+
+  const addButton = isCOJO ? (
+    <COJODialog
+      collection={collection}
+      parentResource={
+        collection?.related as SpecifyResource<CollectionObjectGroup>
+      }
+    />
+  ) : typeof handleAddResources === 'function' &&
     mode !== 'view' &&
     !disableAdding &&
     hasTablePermission(
       relationship.relatedTable.name,
       isDependent ? 'create' : 'read'
     ) ? (
-      <DataEntry.Add
-        onClick={
-          disableAdding
-            ? undefined
-            : isDependent
-            ? (): void => {
-                const resource = new relationship.relatedTable.Resource();
-                handleAddResources([resource]);
-              }
-            : (): void =>
-                setState({
-                  type: 'SearchState',
-                })
-        }
-      />
-    ) : undefined;
+    <DataEntry.Add
+      onClick={
+        disableAdding
+          ? undefined
+          : isDependent
+          ? (): void => {
+              const resource = new relationship.relatedTable.Resource();
+              handleAddResources([resource]);
+            }
+          : (): void =>
+              setState({
+                type: 'SearchState',
+              })
+      }
+    />
+  ) : undefined;
   return dialog === false ? (
     <DataEntry.SubForm>
       <DataEntry.SubFormHeader>

specifyweb/frontend/js_src/lib/components/FormCells/FormTableCollection.tsx

@@ -68,6 +68,7 @@ export function FormTableCollection({
       }}
       onFetchMore={collection.isComplete() ? undefined : handleFetchMore}
       {...props}
+      collection={collection}
     />
   );
 }

specifyweb/frontend/js_src/lib/components/SchemaConfig/Fields.tsx

@@ -66,15 +66,7 @@ export function SchemaConfigFields({
 
         {relationships.length > 0 && (
           <optgroup label={schemaText.relationships()}>
-            <SchemaConfigFieldsList
-              fields={
-                table.name === 'CollectionObject'
-                  ? relationships.filter(
-                      ({ name }) => name !== 'collectionObjectType'
-                    )
-                  : relationships
-              }
-            />
+            <SchemaConfigFieldsList fields={relationships} />
           </optgroup>
         )}
       </Select>

specifyweb/frontend/js_src/lib/components/SchemaConfig/TableUniquenessRules.tsx

@@ -71,9 +71,7 @@ export function TableUniquenessRules(): JSX.Element {
         (relationship) =>
           (['many-to-one', 'one-to-one'] as RA<RelationshipType>).includes(
             relationship.type
-          ) &&
-          !relationship.isVirtual &&
-          relationship.name !== 'collectionObjectType'
+          ) && !relationship.isVirtual
       ),
     [table]
   );

specifyweb/frontend/js_src/lib/components/SchemaConfig/Tables.tsx

@@ -21,7 +21,6 @@ import { Dialog } from '../Molecules/Dialog';
 import { TableIcon } from '../Molecules/TableIcon';
 import { hasTablePermission } from '../Permissions/helpers';
 import { formatUrl } from '../Router/queryString';
-import { HIDDEN_GEO_TABLES } from '../Toolbar/QueryTablesEdit';
 
 export function SchemaConfigTables(): JSX.Element {
   const { language = '' } = useParams();
@@ -127,8 +126,6 @@ export function TableList({
     () =>
       Object.values(genericTables)
         .filter((table) => filter(showHiddenTables, table))
-        // TODO: temp fix, remove this, use to hide geo tables for COG until 9.8 release
-        .filter((table) => !HIDDEN_GEO_TABLES.has(table.name))
         .sort(sortFunction(({ name }) => name)),
     [filter, showHiddenTables]
   );

specifyweb/frontend/js_src/lib/components/Toolbar/QueryTablesEdit.tsx

@@ -37,16 +37,7 @@ export function QueryTablesEdit({
     />
   );
 }
-/*
- * TODO: temp fix, remove this, use to hide geo tables for COG until 9.8 release
- * TODO: Revert #5236 to unhide COType
- */
-export const HIDDEN_GEO_TABLES = new Set([
-  'CollectionObjectType',
-  'CollectionObjectGroup',
-  'CollectionObjectGroupJoin',
-  'CollectionObjectGroupType',
-]);
+
 export function TablesListEdit({
   isNoRestrictionMode,
   defaultTables,
@@ -67,8 +58,6 @@ export function TablesListEdit({
     .filter((table) =>
       tablesFilter(isNoRestrictionMode, false, true, table, selectedValues)
     )
-    // TODO: temp fix, remove this, use to hide geo tables for COG until 9.8 release
-    .filter((table) => !HIDDEN_GEO_TABLES.has(table.name))
     .map(({ name, label }) => ({ name, label }));
 
   const handleChanged = (items: RA<keyof Tables>): void =>

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

@@ -227,8 +227,7 @@ export function MappingElement({
   fieldsData,
   ...props
 }: MappingElementProps): JSX.Element {
-  const { collectionObjectType, ...rest } = fieldsData;
-  const fieldGroups = Object.entries(rest).reduce<
+  const fieldGroups = Object.entries(fieldsData).reduce<
     R<R<CustomSelectElementOptionProps>>
   >((fieldGroups, [fieldName, fieldData]) => {
     const groupName = getFieldGroupName(

specifyweb/frontend/js_src/lib/localization/forms.ts

@@ -1162,4 +1162,7 @@ export const formsText = createDictionary({
   invalidTree: {
     'en-us': 'Taxon does not belong to the same tree as this Object Type',
   },
+  addCOGChildren: {
+    'en-us': 'Add COG Children',
+  },
 } as const);