Recordedit with association picker when adding rows using prefill

.github/workflows/e2e.yml

@@ -105,6 +105,7 @@ jobs:
         run: |
           git clone https://github.com/informatics-isi-edu/ermrestjs.git
           cd ermrestjs
+          git checkout association-display
           sudo make root-install
       - name: Install chaise
         run: |

src/assets/scss/_input-switch.scss

@@ -191,6 +191,7 @@
       background: map-get(variables.$color-map, 'disabled-background');
       opacity: 0.55;
     }
+
     .spinner-border-sm {
       top: 8px;
       position: absolute;
@@ -214,19 +215,21 @@
   }
 
   // highlight the recordedit input for visual clarity
-  .dropdown.show {    
+  .dropdown.show {
+
     /**
-    * Select the input groups that are not disabled. react-bootstrap tends to toggle the `show` class for Dropdown toggles with a custom element type. 
+    * Select the input groups that are not disabled. react-bootstrap tends to toggle the `show` class for Dropdown toggles with a custom element type.
     * this check avoid unexpected highlighting of disabled elements.
     */
     >.chaise-input-group:not([aria-disabled="true"]),
-    .dropdown-menu{
+    .dropdown-menu {
       border: 2px solid map-get(variables.$color-map, 'primary');
       border-radius: 6px;
     }
   }
 
-  .responsive-dropdown-menu, .dropdown-menu {
+  .responsive-dropdown-menu,
+  .dropdown-menu {
     // make sure the menu expands the whole row
     width: auto;
     min-width: 100%;
@@ -245,11 +248,11 @@
 
     // remove rounded borders for search input components when in a dropdown
     .search-row .chaise-search-box {
-      .chaise-input-group-prepend > .chaise-input-group-text {
+      .chaise-input-group-prepend>.chaise-input-group-text {
         border-bottom-left-radius: 0;
       }
 
-      .chaise-input-group-append > .chaise-search-btn {
+      .chaise-input-group-append>.chaise-search-btn {
         border-bottom-right-radius: 0;
       }
     }
@@ -264,6 +267,18 @@
       .dropdown-item {
         cursor: pointer;
 
+        &.disabled,
+        &:disabled {
+          pointer-events: unset;
+          cursor: unset;
+
+          // bootstrap stylesheets have :hover defined before :disabled so disabled always takes precedence
+          // redefine with the same hover color to override bootstrap order
+          &:hover {
+            background-color: map-get(variables.$color-map, 'recordedit-dropdown-hover');
+          }
+        }
+
         label {
           padding-left: 31px;
           cursor: inherit;
@@ -328,7 +343,19 @@
   &.input-switch-error-danger {
     color: map-get(variables.$color-map, 'input-error-message-danger');
   }
+
   &.input-switch-error-warning {
     color: map-get(variables.$color-map, 'input-error-message-warning');
   }
 }
+
+// used for foreignkey-dropdown-field
+// !important needs to be used here since bootstrap attaches styles directly to the component which override stylesheet styles
+.tooltip.reposition-li-tooltip {
+  left: 10px !important;
+
+  .tooltip-arrow {
+    left: 40px !important;
+    transform: unset !important;
+  }
+}

src/assets/scss/_inputs.scss

@@ -237,7 +237,7 @@
     cursor: not-allowed;
     // We are adding this to fix the issue in firefox where the form is not clickable if its disabled
     pointer-events: none;
-    
+
     // make sure the input is taking the input-disabled styles and not the default bootstrap/browser ones
     // (using * so it selects input, textarea, or any other HTML element that we might have
     *::placeholder, *:disabled {
@@ -320,7 +320,7 @@
 .chaise-input-group-text-sm {
   height: variables.$btn-height-sm;
   min-height: variables.$btn-height-sm;
-  padding: variables.$btn-padding-y variables.$btn-padding-x;
+  padding: variables.$btn-padding-sm-y variables.$btn-padding-sm-x;
 }
 
 .chaise-input-control-sm {

src/assets/scss/_recordedit.scss

@@ -19,8 +19,9 @@
       margin-left: auto;
 
       .add-rows-input {
-        width: 50px;
+        width: 45px;
         padding-left: 5px;
+        padding-right: 5px;
       }
     }
   }

src/assets/scss/_recordset-table.scss

@@ -21,37 +21,18 @@
     display: table-row-group;
     vertical-align: middle;
 
-    > tr > td.disabled-cell {
-      background-color: map-get(variables.$color-map, 'table-disabled-background');
-    }
-
     /* table hover */
     > tr:hover {
       background-color: map-get(variables.$color-map, 'table-highlight-background') !important;
 
-      /* match color from row highlight for disabled cells */
-      > td.disabled-cell {
-        background-color: map-get(variables.$color-map, 'table-highlight-background') !important;
-      }
-
       .hover-show {
         visibility: visible;
       }
     }
 
-    /* odd disabled cells need to be darker */
-    > tr:nth-child(odd) > td.disabled-cell {
-      background-color: map-get(variables.$color-map, 'table-striped-disabled-background');
-    }
-
     /* odd row hover for striped table */
     > tr:nth-child(odd):hover {
       background-color: map-get(variables.$color-map, 'table-striped-highlight-background') !important;
-
-      /* odd disabled cells need to match odd row hover for striped table above */
-      > td.disabled-cell {
-        background-color: map-get(variables.$color-map, 'table-striped-highlight-background') !important;
-      }
     }
   }
 
@@ -194,7 +175,27 @@
     }
 
     .chaise-btn.select-action-button {
-      border-radius: 10px;
+      border-radius: 12px;
+
+      &.chaise-btn-secondary {
+        border-width: 2px;
+      }
+
+      &[disabled] {
+        min-width: 12px;
+        width: 12px;
+        height: 12px;
+        margin-top: 5px;
+      }
+
+      // change size of single select icon to "fill" the whole button
+      .fa-regular.fa-circle, .fa-circle-check {
+        font-size: 1.6rem;
+        // added here instead of to the button as padding-top to only affect these buttons/icons
+        margin-top: 1px;
+        background-color: map-get(variables.$color-map, 'white') !important;
+        border-radius: inherit;
+      }
     }
 
     // make the button smaller (only visible for primary buttons. for others won't make a difference in UI and that's fine)

src/assets/scss/_variables.scss

@@ -14,6 +14,8 @@ $btn-height-sm: 24px;
 $btn-border-width: 1px;
 $btn-padding-y: 4px;
 $btn-padding-x: 10px;
+$btn-padding-sm-y: 2px;
+$btn-padding-sm-x: 5px;
 
 // input
 $input-remove-width: 18px;

src/assets/scss/helpers.scss

@@ -88,8 +88,8 @@
   -moz-user-select: none;
   -ms-user-select: none;
   white-space: nowrap;
-  /** 
-  * Fixing button spacing issue. Fix- center aligning the buttons. Adding line-height will make the children of button to 
+  /**
+  * Fixing button spacing issue. Fix- center aligning the buttons. Adding line-height will make the children of button to
   * use this property  to override what bootstrap is defining.
   */
   display: inline-flex;
@@ -124,7 +124,7 @@
   height: variables.$btn-height-sm;
   min-width: variables.$btn-height-sm;
   font-size: 1rem;
-  padding: 2px 5px;
+  padding: variables.$btn-padding-sm-y variables.$btn-padding-sm-x;
 }
 
 // can be used to write media-queries

src/assets/scss/maps/_color-map.scss

@@ -32,6 +32,7 @@ $color-map: (
   'primary': #4674a7,
   'primary-hover': #428bca,
   'recordedit-border': #888888,
+  'recordedit-dropdown-hover': #e9ecef, // same color as bootstrap dropdown-item hover
   'recordedit-highlighted-row': #f7f0cf,
   'recordedit-column-permission-warning': rgb(180, 95, 6),
   'spinner': #6e6e6e,