Recordedit with association picker when adding rows using prefill

src/components/input-switch/foreignkey-dropdown-field.tsx

@@ -421,20 +421,14 @@ const ForeignkeyDropdownField = (props: ForeignkeyDropdownFieldProps): JSX.Eleme
    * @param selectedRow tuple object from ERMrestJS that represents the dropdown row
    * @param onChange
    */
-  const onRowSelected = (selectedRow: any, onChange: any) => {
+  const onRowSelected = (selectedRow: SelectedRow, onChange: any) => {
     setCheckedRow(selectedRow);
 
-    const rowToAdd: SelectedRow = {
-      displayname: selectedRow.displayname,
-      uniqueId: selectedRow.uniqueId,
-      data: selectedRow.data
-    }
-
     const column = props.columnModel.column;
 
     // if the recordedit page's table is an association table with a unique key pair, track the selected rows
     if (props.foreignKeyCallbacks?.updateBulkForeignKeySelectedRows) {
-      props.foreignKeyCallbacks.updateBulkForeignKeySelectedRows(usedFormNumber, rowToAdd);
+      props.foreignKeyCallbacks.updateBulkForeignKeySelectedRows(usedFormNumber, selectedRow);
     }
 
     callOnChangeAfterSelection(

src/components/input-switch/foreignkey-field.tsx

@@ -150,13 +150,15 @@ const ForeignkeyField = (props: ForeignkeyFieldProps): JSX.Element => {
     );
 
     let currentSelectedRow;
-    // there is a value in the input but no selected row yet because of prefill showing an association picker on recordedit page load
-    if (getValues(props.name) && props.foreignKeyCallbacks?.bulkForeignKeySelectedRows) {
-      // find row in bulkForeignKeySelectedRows
-      currentSelectedRow = props.foreignKeyCallbacks.bulkForeignKeySelectedRows.filter((row: SelectedRow) => {
-        // if an input is empty, there won't be a row defined in `bulkForeignKeySelectedRows`
-        return row && row.displayname.value === getValues(props.name);
-      })[0];
+    const inputFKData = props.foreignKeyData?.current[`c_${usedFormNumber}-${props.columnModel.column.RID}`];
+    if (inputFKData) {
+      currentSelectedRow = {
+        displayname: {
+          value: getValues(props.name),
+          isHTML: false
+        },
+        uniqueId: props.columnModel.column.generateUniqueId(inputFKData)
+      }
     }
 
     setRecordsetModalProps({

src/components/modals/recordset-modal.tsx

@@ -49,7 +49,7 @@ export type RecordestModalProps = {
    * and instead is just going to call this function. This is done this way
    * so we can apply the logic to disable the submit button
    */
-  onSelectedRowsChanged?: (SelectedRow: SelectedRow[]) => boolean,
+  onSelectedRowsChanged?: (SelectedRow: SelectedRow[]) => boolean | string,
   /**
    * The function that will be called on submit
    * Note: the modal won't close on submit and if that's the expected behavior,
@@ -249,7 +249,7 @@ const RecordsetModal = ({
         </>
       )
       break;
-    case RecordsetDisplayMode.FK_BULK:
+    case RecordsetDisplayMode.FK_POPUP_BULK_CREATE:
       submitText = 'Continue';
       submitTooltip = (
         <>
@@ -314,7 +314,7 @@ const RecordsetModal = ({
             <Title displayname={recordsetProps.parentTuple?.displayname} />
           </div>
         );
-      case RecordsetDisplayMode.FK_BULK:
+      case RecordsetDisplayMode.FK_POPUP_BULK_CREATE:
         return (
           <div>
             <span>Select a set of </span>

src/components/recordedit/form-container.tsx

@@ -76,6 +76,9 @@ const FormContainer = ({
   const handleRemoveForm = (formIndex: number, formNumber: number) => {
     setRemoveFormIndex(formNumber);
     setRemoveClicked(true);
+
+    console.log('index: ', formIndex);
+    console.log('number: ', formNumber);
     removeForm([formIndex]);
   };
 

src/components/recordedit/form-row.tsx

@@ -327,9 +327,9 @@ const FormRow = ({
      *  - the column is a foreignkey
      *  - and the column is the one used for associating to the leaf table of the association
      */
-    if (bulkFKObject?.isUnique && column.isForeignKey && bulkFKObject.leafColumn.name === colName) {
+    if (columnModel.isLeafInUniqueBulkForeignKeyCreate) {
       tempForeignKeyCallbacks.getDisabledTuples = disabledTuplesPromise(
-        column.reference.contextualize.compactSelectForeignKey,
+        column.reference.contextualize.compactSelectBulkForeignKey,
         bulkFKObject.disabledRowsFilter(),
         bulkForeignKeySelectedRows
       );

src/components/recordedit/key-column.tsx

@@ -29,7 +29,7 @@ const KeyColumn = ({
 
   const {
     appMode, columnModels, columnPermissionErrors,
-    config, forms, logRecordeditClientAction, reference
+    config, forms, logRecordeditClientAction
   } = useRecordedit();
 
   const onToggleClick = (cmIndex: number) => {
@@ -75,8 +75,9 @@ const KeyColumn = ({
   const canShowMultiFormBtn = (columnIndex: number) => {
     const cm = columnModels[columnIndex];
 
-    const bulkFKObject = reference.bulkCreateForeignKeyObject
-    if (bulkFKObject?.isUnique && cm.column.name === bulkFKObject.leafColumn.name) {
+    // hide the button if the foreign key values for this column are part of a unique key
+    // and the other part of that key is the prefiiled column that triggered the bulkForeignKey UI
+    if (cm.isLeafInUniqueBulkForeignKeyCreate) {
       return false
     }