Merge pull request #261 from 4dn-dcic/utk_react_bootstrap_v2

React bootstrap v2
4dn-dcic · Oct 17, 2024 · 4471b0d · 4471b0d
2 parents e0ffcd9 + 1a60f78
commit 4471b0d
Show file tree

Hide file tree

Showing 61 changed files with 559 additions and 803 deletions.
diff --git a/es/components/browse/components/CustomColumnController.js b/es/components/browse/components/CustomColumnController.js
@@ -257,9 +257,9 @@ var ColumnOption = /*#__PURE__*/React.memo(function (props) {
   var showDescription = description;
   if (sameTitleColExists) {
     if (!description) {
-      showDescription = '<i class="icon icon-fw fas icon-code mr-07"></i><span class="text-300 text-monospace">' + field + '</span>';
+      showDescription = '<i class="icon icon-fw fas icon-code me-07"></i><span class="text-300 font-monospace">' + field + '</span>';
     } else {
-      showDescription += '<br/><i class="icon icon-fw fas icon-code mr-07"></i><span class="text-300 text-monospace">' + field + '</span>';
+      showDescription += '<br/><i class="icon icon-fw fas icon-code me-07"></i><span class="text-300 font-monospace">' + field + '</span>';
     }
   }
   return /*#__PURE__*/React.createElement("div", {

diff --git a/es/components/browse/components/FacetList/ExtendedDescriptionPopoverIcon.js b/es/components/browse/components/FacetList/ExtendedDescriptionPopoverIcon.js
@@ -71,7 +71,7 @@ export var ExtendedDescriptionPopoverIcon = /*#__PURE__*/React.memo(function (pr
           id: idToUse,
           ref: target,
           // By time icon is clicked, this will be mounted.
-          popover: /*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(Popover.Title, {
+          popover: /*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(Popover.Header, {
             as: "div"
           }, /*#__PURE__*/React.createElement("div", {
             className: "row align-items-center"
@@ -84,7 +84,7 @@ export var ExtendedDescriptionPopoverIcon = /*#__PURE__*/React.memo(function (pr
             onClick: dismissPopover
           }, /*#__PURE__*/React.createElement("i", {
             className: "icon icon-times fas"
-          })))), /*#__PURE__*/React.createElement(Popover.Content, null, /*#__PURE__*/React.createElement("div", {
+          })))), /*#__PURE__*/React.createElement(Popover.Body, null, /*#__PURE__*/React.createElement("div", {
             className: "popover-content-inner",
             dangerouslySetInnerHTML: {
               __html: extendedDescription

diff --git a/es/components/browse/components/FacetList/FacetTermsList.js b/es/components/browse/components/FacetList/FacetTermsList.js
@@ -250,7 +250,7 @@ export var Term = /*#__PURE__*/function (_React$PureComponent) {
         return subTermComponents;
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
-        className: "facet-list-element" + statusClassName + (groupingTermKey && !facetSearchActive ? " pl-3" : ""),
+        className: "facet-list-element" + statusClassName + (groupingTermKey && !facetSearchActive ? " ps-3" : ""),
         key: term.key,
         "data-key": term.key,
         "data-is-grouping": isGroupingTerm,

diff --git a/es/components/browse/components/FacetList/RangeFacet.js b/es/components/browse/components/FacetList/RangeFacet.js
@@ -473,7 +473,7 @@ export var RangeFacet = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement("div", {
           className: "range-drop col-12 col-sm-6"
         }, /*#__PURE__*/React.createElement("label", {
-          className: "mb-0 small mr-07"
+          className: "mb-0 small me-07"
         }, "From:"), /*#__PURE__*/React.createElement(RangeDropdown, {
           title: fromTitle,
           value: fromVal,
@@ -490,7 +490,7 @@ export var RangeFacet = /*#__PURE__*/function (_React$PureComponent) {
         })), /*#__PURE__*/React.createElement("div", {
           className: "range-drop col-12 col-sm-6"
         }, /*#__PURE__*/React.createElement("label", {
-          className: "mb-0 small ml-05 mr-07"
+          className: "mb-0 small ms-05 me-07"
         }, "To:"), /*#__PURE__*/React.createElement(RangeDropdown, {
           title: toTitle,
           value: toVal,
@@ -1120,7 +1120,7 @@ var RangeDropdown = /*#__PURE__*/function (_React$PureComponent3) {
         })), /*#__PURE__*/React.createElement("button", {
           type: "submit",
           disabled: !updateAble,
-          className: "btn"
+          className: "btn border-0"
         }, /*#__PURE__*/React.createElement("i", {
           className: "icon icon-fw icon-check fas"
         }))));
@@ -1177,7 +1177,7 @@ var RangeDropdown = /*#__PURE__*/function (_React$PureComponent3) {
         })), /*#__PURE__*/React.createElement("button", {
           type: "submit",
           disabled: !updateAble,
-          className: "btn"
+          className: "btn border-0"
         }, /*#__PURE__*/React.createElement("i", {
           className: "icon icon-fw icon-check fas"
         }))), menuOptions);

diff --git a/es/components/browse/components/SelectedItemsController.js b/es/components/browse/components/SelectedItemsController.js
@@ -242,7 +242,7 @@ export var SelectionItemCheckbox = /*#__PURE__*/React.memo(function (props) {
     type: "checkbox",
     checked: isChecked,
     onChange: onChange,
-    className: "mr-2"
+    className: "me-2"
   });
 });
 
@@ -302,13 +302,13 @@ export var SelectStickyFooter = /*#__PURE__*/React.memo(function (props) {
   }, /*#__PURE__*/React.createElement("h3", {
     className: "mt-0 mb-0 col-auto text-600"
   }, selectedItems.size), /*#__PURE__*/React.createElement("h4", {
-    className: "mt-0 mb-0 text-muted col-auto text-400 px-0"
+    className: "mt-0 mb-0 text-body-secondary col-auto text-400 px-0"
   }, itemTypeFriendlyName + (selectedItems.size === 1 ? '' : 's'), " selected")) : /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("h4", {
     className: "mt-0 mb-0 col-auto text-400"
   }, selectedItemDisplayTitle), /*#__PURE__*/React.createElement("h4", {
-    className: "mt-0 mb-0 text-muted col-auto text-400 px-0"
+    className: "mt-0 mb-0 text-body-secondary col-auto text-400 px-0"
   }, "selected"))), /*#__PURE__*/React.createElement("div", {
     className: "col-12 col-md-auto"
   }, /*#__PURE__*/React.createElement("button", {
@@ -321,7 +321,7 @@ export var SelectStickyFooter = /*#__PURE__*/React.memo(function (props) {
     className: "icon icon-fw fas icon-check"
   }), "\xA0 Apply"), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-outline-warning ml-1",
+    className: "btn btn-outline-warning ms-1",
     onClick: onCancel,
     "data-tip": "Cancel selection and close window"
   }, /*#__PURE__*/React.createElement("i", {
@@ -347,7 +347,7 @@ export var BackNavigationStickyFooter = /*#__PURE__*/React.memo(function (props)
     className: "col-12 col-md-auto"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-outline-warning ml-1",
+    className: "btn btn-outline-warning ms-1",
     onClick: onBackButtonClick,
     "data-tip": tooltip || ''
   }, /*#__PURE__*/React.createElement("i", {

diff --git a/es/components/browse/components/SortController.js b/es/components/browse/components/SortController.js
@@ -352,7 +352,7 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
       title = foundSortDefinition.title;
     } else {
       title = /*#__PURE__*/React.createElement("span", {
-        className: "text-monospace small"
+        className: "font-monospace small"
       }, useCol);
     }
   }
@@ -377,7 +377,7 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     title: title,
     size: size,
-    variant: (variant ? variant + " " : "") + "btn-block text-left",
+    variant: (variant ? variant + " " : "") + "w-100 text-start",
     onSelect: handleSortColumnSelection
   }, allSortFields.map(function (col, idx) {
     var field = col.field,
@@ -391,10 +391,10 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
       disabled: !!noSort
     }, title) : null;
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "col-3 pl-0"
+    className: "col-3 ps-0"
   }, /*#__PURE__*/React.createElement(DropdownButton, {
     title: sortOrderTitle,
-    variant: (variant ? variant + " " : "") + "btn-block text-left",
+    variant: (variant ? variant + " " : "") + "w-100 text-start",
     size: size,
     onSelect: handleSortOrderSelection
   }, /*#__PURE__*/React.createElement(DropdownItem, {
@@ -404,20 +404,24 @@ var MultiColumnSortOption = /*#__PURE__*/React.memo(function (props) {
     key: "sort-direction-desc",
     eventKey: index + "|desc"
   }, "Descending"))), /*#__PURE__*/React.createElement("div", {
-    className: "col-lg-1 col-2 pl-0"
-  }, !(rowCount - 1 === index) ? /*#__PURE__*/React.createElement("button", {
+    className: "col-lg-1 col-2 ps-0"
+  }, !(rowCount - 1 === index) ? /*#__PURE__*/React.createElement("div", {
+    className: "d-grid gap-1"
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-".concat(variant, " btn-").concat(size, " btn-block"),
+    className: "btn btn-".concat(variant, " btn-").concat(size),
     onClick: onRemoveClick,
     "data-tip": "Remove sort column"
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw fas icon-minus w-100"
-  })) : /*#__PURE__*/React.createElement("button", {
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "d-grid gap-1"
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-primary btn-".concat(size, " btn-block"),
+    className: "btn btn-primary btn-".concat(size),
     onClick: handleSettingsApply,
     "data-tip": "Re-sort columns"
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw fas icon-check w-100"
-  }))));
+  })))));
 });
diff --git a/es/components/browse/components/StackedBlockTable.js b/es/components/browse/components/StackedBlockTable.js
@@ -127,7 +127,7 @@ export var StackedBlockListViewMoreButton = /*#__PURE__*/function (_React$PureCo
         return /*#__PURE__*/React.createElement("div", {
           className: "view-more-button"
         }, /*#__PURE__*/React.createElement("i", {
-          className: "icon fas icon-plus mr-1 ml-02 small"
+          className: "icon fas icon-plus me-1 ms-02 small"
         }), collapsibleChildrenLen + " More" + (title ? ' ' + title : ''), showMoreExtTitle ? /*#__PURE__*/React.createElement("span", {
           className: "ext text-400"
         }, " ", showMoreExtTitle) : null);
@@ -138,7 +138,7 @@ export var StackedBlockListViewMoreButton = /*#__PURE__*/function (_React$PureCo
         className: cls,
         onClick: preventExpand ? null : handleCollapseToggle
       }, /*#__PURE__*/React.createElement("i", {
-        className: "mr-1 icon fas icon-" + (collapsed ? 'plus' : 'minus')
+        className: "me-1 icon fas icon-" + (collapsed ? 'plus' : 'minus')
       }), titleStr, showMoreExtTitle ? /*#__PURE__*/React.createElement("span", {
         className: "ext text-400"
       }, " ", showMoreExtTitle) : null);
@@ -293,7 +293,7 @@ export var StackedBlockList = /*#__PURE__*/function (_React$PureComponent3) {
           className: "view-more-button clickable",
           onClick: this.handleIncrementalExpandClick.bind(this, nextCount)
         }, /*#__PURE__*/React.createElement("i", {
-          className: "mr-1 icon fas icon-" + (nextCount >= incrementalExpandVisibleCount ? "plus" : "minus")
+          className: "me-1 icon fas icon-" + (nextCount >= incrementalExpandVisibleCount ? "plus" : "minus")
         }), /*#__PURE__*/React.createElement("span", null, " ", titleStr, " "));
       } else {
         viewMoreButton = /*#__PURE__*/React.createElement(StackedBlockListViewMoreButton, _extends({}, this.props, {
@@ -555,12 +555,12 @@ _defineProperty(StackedBlockTable, "propTypes", {
 _defineProperty(StackedBlockTable, "defaultProps", {
   'columnHeaders': [{
     columnClass: 'biosample',
-    className: 'text-left',
+    className: 'text-start',
     title: 'Biosample',
     initialWidth: 115
   }, {
     columnClass: 'experiment',
-    className: 'text-left',
+    className: 'text-start',
     title: 'Experiment',
     initialWidth: 145
   }, {

diff --git a/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js b/es/components/browse/components/above-table-controls/AboveSearchViewTableControls.js
@@ -34,11 +34,11 @@ export var AboveSearchViewTableControls = /*#__PURE__*/React.memo(function (prop
     });
     if (addAction && typeof addAction.href === 'string') {
       addButton = /*#__PURE__*/React.createElement("a", {
-        className: "btn btn-primary btn-xs" + (total ? " ml-1" : ""),
+        className: "btn btn-primary btn-xs" + (total ? " ms-1" : ""),
         href: addAction.href,
         "data-skiprequest": "true"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "icon icon-fw icon-plus fas mr-03 fas"
+        className: "icon icon-fw icon-plus fas me-03 fas"
       }), "Create New \xA0");
     }
   }

diff --git a/es/components/browse/components/above-table-controls/RightButtonsSection.js b/es/components/browse/components/above-table-controls/RightButtonsSection.js
@@ -59,7 +59,7 @@ export var ConfigureVisibleColumnsButton = /*#__PURE__*/React.memo(function (_re
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-table fas"
   }), /*#__PURE__*/React.createElement("i", {
-    className: "icon icon-fw icon-angle-down ml-03 fas"
+    className: "icon icon-fw icon-angle-down ms-03 fas"
   }));
 });
 export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
@@ -78,7 +78,7 @@ export var MultiColumnSortButton = /*#__PURE__*/React.memo(function (_ref2) {
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon icon-fw icon-sort fas"
   }), /*#__PURE__*/React.createElement("i", {
-    className: "icon icon-fw icon-angle-down ml-03 fas"
+    className: "icon icon-fw icon-angle-down ms-03 fas"
   }));
 });
 
@@ -121,7 +121,7 @@ export var ToggleLayoutButton = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon icon-fw fas icon-" + (!isFullscreen ? 'arrows-alt-h icon-expand' : 'compress')
       }), /*#__PURE__*/React.createElement("span", {
-        className: "ml-05 d-none d-xl-inline"
+        className: "ms-05 d-none d-xl-inline"
       }, !isFullscreen ? "Full Screen" : "Collapse Table Width"));
     }
   }]);

diff --git a/es/components/browse/components/table-commons/ColumnCombiner.js b/es/components/browse/components/table-commons/ColumnCombiner.js
@@ -285,5 +285,6 @@ export function getColumnWidthFromDefinition(columnDefinition) {
   if (!mounted || isServerSide()) responsiveGridSize = 'lg';else responsiveGridSize = responsiveGridState(windowWidth);
   if (responsiveGridSize === 'xs') responsiveGridSize = 'sm';
   if (responsiveGridSize === 'xl') responsiveGridSize = 'lg';
+  if (responsiveGridSize === 'xxl') responsiveGridSize = 'lg';
   return widthMap[responsiveGridSize || 'lg'];
 }
diff --git a/es/components/browse/components/table-commons/HeadersRow.js b/es/components/browse/components/table-commons/HeadersRow.js
@@ -779,7 +779,7 @@ var SortOptionsMenu = /*#__PURE__*/React.memo(function (_ref16) {
       key: field,
       onClick: onClick
     }, title || field, !isActive ? null : /*#__PURE__*/React.createElement("i", {
-      className: "small icon fas ml-12 icon-arrow-".concat(descend ? "down" : "up")
+      className: "small icon fas ms-12 icon-arrow-".concat(descend ? "down" : "up")
     }));
   });
   return /*#__PURE__*/React.createElement("div", {

diff --git a/es/components/browse/components/table-commons/ResultRowColumnBlockValue.js b/es/components/browse/components/table-commons/ResultRowColumnBlockValue.js
@@ -201,7 +201,8 @@ export function sanitizeOutputValue(value) {
         var atId = itemUtil.atId(value);
         if (atId) {
           return /*#__PURE__*/React.createElement("a", {
-            href: atId
+            href: atId,
+            className: "link-underline-hover"
           }, value.display_title);
         } else {
           return value.display_title;

diff --git a/es/components/browse/components/table-commons/basicColumnExtensionMap.js b/es/components/browse/components/table-commons/basicColumnExtensionMap.js
@@ -72,7 +72,7 @@ export var basicColumnExtensionMap = {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "icon-container"
       }, /*#__PURE__*/React.createElement("i", {
-        className: "icon icon-fw fas icon-filter clickable mr-08",
+        className: "icon icon-fw fas icon-filter clickable me-08",
         onClick: function onClick(e) {
           // Preserve search query, if any, but remove filters (which are usually per-type).
           if (!href || href.indexOf('/search/') === -1) return;
@@ -107,7 +107,7 @@ export var basicColumnExtensionMap = {
         date_created = _result$date_created === void 0 ? null : _result$date_created;
       if (!date_created) return null;
       return /*#__PURE__*/React.createElement("span", {
-        className: "value text-right"
+        className: "value text-end"
       }, /*#__PURE__*/React.createElement(LocalizedTime, {
         timestamp: date_created,
         formatType: "date-sm"
@@ -130,7 +130,7 @@ export var basicColumnExtensionMap = {
         date_modified = _result$last_modified3 === void 0 ? null : _result$last_modified3;
       if (!date_modified) return null;
       return /*#__PURE__*/React.createElement("span", {
-        className: "value text-right"
+        className: "value text-end"
       }, /*#__PURE__*/React.createElement(LocalizedTime, {
         timestamp: date_modified,
         formatType: "date-sm"
@@ -203,12 +203,13 @@ export var DisplayTitleColumnDefault = /*#__PURE__*/React.memo(function (props)
       link = "".concat(propLink, "#").concat(targetTabKey);
     }
     title = /*#__PURE__*/React.createElement("a", {
+      className: "link-underline-hover",
       key: "title",
       href: link || '#',
       onClick: onClick
     }, title);
   }
-  var cls = "title-block text-truncate" + (shouldMonospace ? " text-monospace text-small" : "") + (className ? " " + className : "");
+  var cls = "title-block text-truncate" + (shouldMonospace ? " font-monospace text-small" : "") + (className ? " " + className : "");
   return /*#__PURE__*/React.createElement("div", {
     key: "title-container",
     className: cls,

diff --git a/es/components/forms/SubmissionView.js b/es/components/forms/SubmissionView.js
@@ -479,8 +479,7 @@ var SubmissionView = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/React.createElement(DropdownItem, {
         key: val,
         title: val || '',
-        eventKey: val,
-        onSelect: this.handleTypeSelection
+        eventKey: val
       }, val || '');
     }
 
@@ -1690,7 +1689,7 @@ var SubmissionView = /*#__PURE__*/function (_React$PureComponent) {
         id: "content"
       }, /*#__PURE__*/React.createElement(TypeSelectModal, _extends({
         show: showAmbiguousModal
-      }, _.pick(this.state, 'ambiguousIdx', 'ambiguousType', 'ambiguousSelected', 'currKey', 'creatingIdx'), _.pick(this, 'buildAmbiguousEnumEntry', 'submitAmbiguousType', 'cancelCreateNewObject', 'cancelCreatePrimaryObject'), {
+      }, _.pick(this.state, 'ambiguousIdx', 'ambiguousType', 'ambiguousSelected', 'currKey', 'creatingIdx'), _.pick(this, 'buildAmbiguousEnumEntry', 'handleTypeSelection', 'submitAmbiguousType', 'cancelCreateNewObject', 'cancelCreatePrimaryObject'), {
         schemas: schemas
       })), /*#__PURE__*/React.createElement(AliasSelectModal, _extends({
         show: !showAmbiguousModal && creatingIdx !== null && creatingType !== null
@@ -1937,7 +1936,7 @@ var WarningBanner = /*#__PURE__*/React.memo(function (props) {
   }, "Please note: your work will be lost if you navigate away from, refresh or close this page while submitting. The submission process is under active development and features may change."), /*#__PURE__*/React.createElement("div", {
     className: "col-md-auto"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "action-buttons-container text-right"
+    className: "action-buttons-container text-end"
   }, children))));
 });
 var DetailTitleBanner = /*#__PURE__*/function (_React$PureComponent2) {
@@ -2150,7 +2149,8 @@ var TypeSelectModal = /*#__PURE__*/function (_React$Component) {
         ambiguousSelected = _this$props10.ambiguousSelected,
         buildAmbiguousEnumEntry = _this$props10.buildAmbiguousEnumEntry,
         submitAmbiguousType = _this$props10.submitAmbiguousType,
-        schemas = _this$props10.schemas;
+        schemas = _this$props10.schemas,
+        handleTypeSelection = _this$props10.handleTypeSelection;
       if (!show) return null;
       var itemTypeHierarchy = schemaTransforms.schemasToItemTypeHierarchy(schemas);
       var specificItemTypeOptions = null;
@@ -2177,7 +2177,8 @@ var TypeSelectModal = /*#__PURE__*/function (_React$Component) {
         className: "input-wrapper mb-15"
       }, /*#__PURE__*/React.createElement(DropdownButton, {
         id: "dropdown-type-select",
-        title: ambiguousSelected || "No value"
+        title: ambiguousSelected || "No value",
+        onSelect: handleTypeSelection
       }, specificItemTypeOptions.map(buildAmbiguousEnumEntry))), ambiguousDescrip ? /*#__PURE__*/React.createElement("div", {
         className: "mb-15 mt-15"
       }, /*#__PURE__*/React.createElement("h5", {
@@ -2236,7 +2237,7 @@ var AliasSelectModal = /*#__PURE__*/function (_TypeSelectModal) {
           'fontSize': '1.2em'
         }
       }, creatingAliasMessage) : null, /*#__PURE__*/React.createElement("div", {
-        className: "text-right"
+        className: "text-end"
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
         className: "btn btn-primary",