Recordedit with association picker when adding rows using prefill (#2490

) * changes to show and association picker before record edit form input * add more popup modal * initialize form provider while showing the modal instead of waiting * add/remove selected rows when forms removed, input value is updated/removed * disable set some button, don't clone unique fk data * move prefill object to the provider instead of creating it each time it was needed * foreign key dropdown support to update the association selected rows on change and update dropdowns when the set changes to have new values disabled * changes to add tooltips to modal and dropdown rows that are disabled. clean up code and move some functions around. Proper types added in more places. Change single-select icons when row is selected or disabled. remove color change when a row is disabled * always initialize prefill in RE * add test cases for modal and dropdown inputs * address comments from the PR
informatics-isi-edu · Oct 3, 2024 · f4f08c1 · f4f08c1
1 parent 882b884
commit f4f08c1
Show file tree

Hide file tree

Showing 43 changed files with 2,900 additions and 692 deletions.
diff --git a/docs/user-docs/logging.md b/docs/user-docs/logging.md
@@ -213,10 +213,13 @@ Where,
   - `pcol`: Based on `pcol` stack node `type`.
   - `related`, `related-inline`: Based on `related` stack node `type`.
   - `related-link-picker`: Used for the association link picker.
+  - `related-unlink-picker`: Used for the association unlink picker.
   - `facet`: Based on `facet` stack node `type`.
   - `facet-picker`: Used for facet picker.
   - `fk`: Based on `fk` stack node `type`.
   - `fk-picker`: Used for foreign key picker.
+  - `fk-bulk-picker`: Used for foreign key picker when the selections fill the same foreign key field in multiple recordedit forms
+  - `fk-dropdown`: Used for foreign key inputs when they are a dropdown.
   - `saved-query-entity`: Used for saved query create popup.
   - `saved-query-picker`: Used for saved query apply picker.
   - `annotation-set`: Annotation list displayed on the viewer app.

diff --git a/src/assets/scss/_input-switch.scss b/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;
+  }
+}
diff --git a/src/assets/scss/_inputs.scss b/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 {

diff --git a/src/assets/scss/_recordedit.scss b/src/assets/scss/_recordedit.scss
@@ -18,9 +18,18 @@
       width: auto;
       margin-left: auto;
 
-      .add-rows-input {
-        width: 50px;
-        padding-left: 5px;
+      .chaise-input-group {
+        width: auto;
+
+        .add-rows-input {
+          width: 45px;
+          padding-left: 5px;
+          padding-right: 5px;
+        }
+      }
+
+      #recordedit-add-more {
+        margin-left: 10px;
       }
     }
   }
@@ -404,61 +413,4 @@
     padding-top: 10px;
     padding-bottom: 20px;
   }
-
-  /****************** Upload modal css *****************/
-
-  // .progress-percent {
-  //   font-weight: bold;
-  //   margin-top: -25px;
-  //   margin-left: 50%;
-  // }
-
-  // .inner-progress-percent {
-  //   margin-top: -18px;
-  //   font-size: 12px;
-  // }
-
-  // table.upload-table {
-
-  // }
-
-  // table.upload-table > tbody {
-  //   border: none;
-  // }
-
-  // table.upload-table > tbody > tr > td:first-child {
-  //   padding-left: 20px;
-
-  // }
-
-  // table.upload-table > tbody > tr > td:last-child {
-  //   width: 40%;
-  // }
-
-  // table.upload-table > tbody > tr > td:nth-child(2) {
-  //   padding-left: 0px;
-  //   padding-right: 0px;
-  // }
-
-  // table.upload-table > tbody > tr:last-child > td {
-  //   border-bottom: 1px solid $disabled-background-color;
-  //   background-color: white;
-  // }
-
-  // table.upload-table > tbody > tr:first-child > td {
-  //   padding-left:0px;
-  //   padding-top: 15px;
-  //   border-bottom: 2px solid gainsboro;
-  //   font-weight: 600;
-  // }
-
-  // table.upload-table .progress {
-  //   height: 20px;
-  // }
-
-  // .upload-progress-bar {
-  //   width: 0%;
-  //   background-color: #8cacc7 !important;
-  // }
-
 }
diff --git a/src/assets/scss/_recordset-table.scss b/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)

diff --git a/src/assets/scss/_variables.scss b/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;

diff --git a/src/assets/scss/helpers.scss b/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

diff --git a/src/assets/scss/maps/_color-map.scss b/src/assets/scss/maps/_color-map.scss
@@ -33,6 +33,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,