SWC-6882 - Reapply migrate Bootstrap 3 Row/Column to MUI Grid

e2e/discussions.spec.ts

@@ -82,7 +82,7 @@ const expectThreadReplyVisible = async (
 const getDiscussionParentActionButtons = (page: Page, threadTitle: string) => {
   const parentPost = page
     .locator(discussionThreadSelector)
-    .locator('.row')
+    .getByRole('article')
     .filter({ hasText: threadTitle })
   return {
     PIN: parentPost.locator(discussionActionIconClasses.PIN),
@@ -96,8 +96,7 @@ const getDiscussionParentActionButtons = (page: Page, threadTitle: string) => {
 
 const getDiscussionReplyActionButtons = (page: Page, threadReply: string) => {
   const replyPost = page
-    .locator(discussionThreadSelector)
-    .locator('.row')
+    .locator(discussionReplySelector)
     .filter({ hasText: threadReply })
   return {
     EDIT: replyPost.locator(discussionActionIconClasses.EDIT),

src/main/java/org/sagebionetworks/web/client/view/ACTAccessApprovalsViewImpl.java

@@ -16,7 +16,6 @@
 import java.util.List;
 import org.gwtbootstrap3.client.ui.Anchor;
 import org.gwtbootstrap3.client.ui.Button;
-import org.gwtbootstrap3.client.ui.Column;
 import org.gwtbootstrap3.client.ui.Panel;
 import org.gwtbootstrap3.client.ui.html.Div;
 import org.gwtbootstrap3.extras.datetimepicker.client.ui.DateTimePicker;
@@ -26,6 +25,7 @@
 import org.sagebionetworks.web.client.DisplayUtils;
 import org.sagebionetworks.web.client.SynapseJSNIUtilsImpl;
 import org.sagebionetworks.web.client.SynapseJavascriptClient;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.widget.header.Header;
 
 public class ACTAccessApprovalsViewImpl implements ACTAccessApprovalsView {
@@ -82,7 +82,7 @@ public interface ACTViewImplUiBinder
   Anchor downloadLink;
 
   @UiField
-  Column accessorUI;
+  Grid accessorUI;
 
   private Presenter presenter;
   private Header headerWidget;

src/main/java/org/sagebionetworks/web/client/view/SignedTokenViewImpl.java

@@ -12,9 +12,9 @@
 import org.gwtbootstrap3.client.ui.Button;
 import org.gwtbootstrap3.client.ui.Heading;
 import org.gwtbootstrap3.client.ui.Modal;
-import org.gwtbootstrap3.client.ui.Row;
 import org.gwtbootstrap3.client.ui.html.Div;
 import org.sagebionetworks.repo.model.SignedTokenInterface;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.widget.LoadingSpinner;
 import org.sagebionetworks.web.client.widget.header.Header;
 
@@ -36,7 +36,7 @@ public interface SignedTokenViewImplUiBinder
   Button cancelUnsubscribe;
 
   @UiField
-  Row successUI;
+  Grid successUI;
 
   @UiField
   Heading successMessage;

src/main/java/org/sagebionetworks/web/client/widget/ReactComponentV2.java

@@ -94,16 +94,8 @@ private void createRoot() {
 
   private void destroyRoot() {
     if (root != null) {
-      // Asynchronously schedule unmounting the root to allow React to finish the current render cycle.
-      // https://github.com/facebook/react/issues/25675
-      Timer t = new Timer() {
-        @Override
-        public void run() {
-          root.unmount();
-          root = null;
-        }
-      };
-      t.schedule(0);
+      root.unmount();
+      root = null;
     }
   }
 
@@ -186,21 +178,23 @@ public HandlerRegistration addClickHandler(ClickHandler handler) {
   }
 
   public void render() {
-    if (isRenderedAsReactComponentChild()) {
-      // This component will be rendered as a child of another React component, so destroy the root if one exists
-      destroyRoot();
-    }
+    // This component will be rendered as a child of another React component, so destroy the root if one exists
+    boolean shouldDestroyRoot = isRenderedAsReactComponentChild();
 
     // This component may be a React child of another component, so retrieve the root widget that renders this component tree.
     ReactComponentV2<?, ?> componentToRender = getRootReactComponentWidget();
 
-    // Asynchronously schedule creating a root in case we queued up an unmount of the current root
+    // Asynchronously schedule root operations in case the component is in the middle of an asynchronous render cycle
     // See https://stackoverflow.com/questions/73459382
     Timer t = new Timer() {
       @Override
       public void run() {
-        componentToRender.createRoot();
+        if (shouldDestroyRoot) {
+          destroyRoot();
+        }
+
         // Create a fresh ReactElement tree and render it
+        componentToRender.createRoot();
         componentToRender.root.render(componentToRender.createReactElement());
       }
     };
@@ -227,7 +221,15 @@ protected void onUnload() {
     // Detach any non-React descendants that were injected into the component tree
     detachNonReactChildElements();
 
-    destroyRoot();
+    // Asynchronously schedule unmounting the root to allow React to finish the current render cycle.
+    // https://github.com/facebook/react/issues/25675
+    Timer t = new Timer() {
+      @Override
+      public void run() {
+        destroyRoot();
+      }
+    };
+    t.schedule(0);
   }
 
   /**

src/main/java/org/sagebionetworks/web/client/widget/discussion/DiscussionThreadListWidgetViewImpl.java

@@ -6,11 +6,11 @@
 import com.google.gwt.user.client.ui.IsWidget;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
-import org.gwtbootstrap3.client.ui.Column;
 import org.gwtbootstrap3.client.ui.html.Div;
 import org.gwtbootstrap3.client.ui.html.Span;
 import org.sagebionetworks.repo.model.discussion.DiscussionThreadOrder;
 import org.sagebionetworks.repo.model.table.SortDirection;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.widget.table.v2.results.SortableTableHeaderImpl;
 import org.sagebionetworks.web.client.widget.table.v2.results.SortingListener;
 
@@ -21,7 +21,7 @@ public interface Binder
     extends UiBinder<Widget, DiscussionThreadListWidgetViewImpl> {}
 
   @UiField
-  Column threadListContainer;
+  Grid threadListContainer;
 
   @UiField
   Div synAlertContainer;

src/main/java/org/sagebionetworks/web/client/widget/discussion/SingleDiscussionThreadWidgetViewImpl.java

@@ -42,6 +42,9 @@ public interface Binder
   @UiField
   Div synAlertContainer;
 
+  @UiField
+  Div discussionThreadMessageContainer;
+
   @UiField
   Div refreshAlertContainer;
 
@@ -102,6 +105,9 @@ public interface Binder
   @Inject
   public SingleDiscussionThreadWidgetViewImpl(Binder binder) {
     widget = binder.createAndBindUi(this);
+    discussionThreadMessageContainer
+      .getElement()
+      .setAttribute("role", "article");
     deleteIcon.addClickHandler(
       new ClickHandler() {
         @Override

src/main/java/org/sagebionetworks/web/client/widget/entity/download/UploaderViewImpl.java

@@ -23,7 +23,6 @@
 import org.gwtbootstrap3.client.ui.AnchorListItem;
 import org.gwtbootstrap3.client.ui.Button;
 import org.gwtbootstrap3.client.ui.ButtonGroup;
-import org.gwtbootstrap3.client.ui.Column;
 import org.gwtbootstrap3.client.ui.DropDownMenu;
 import org.gwtbootstrap3.client.ui.FieldSet;
 import org.gwtbootstrap3.client.ui.Form;
@@ -35,14 +34,12 @@
 import org.gwtbootstrap3.client.ui.NavTabs;
 import org.gwtbootstrap3.client.ui.Progress;
 import org.gwtbootstrap3.client.ui.ProgressBar;
-import org.gwtbootstrap3.client.ui.Row;
 import org.gwtbootstrap3.client.ui.TabContent;
 import org.gwtbootstrap3.client.ui.TabListItem;
 import org.gwtbootstrap3.client.ui.TabPane;
 import org.gwtbootstrap3.client.ui.TextBox;
 import org.gwtbootstrap3.client.ui.constants.ButtonSize;
 import org.gwtbootstrap3.client.ui.constants.ButtonType;
-import org.gwtbootstrap3.client.ui.constants.ColumnSize;
 import org.gwtbootstrap3.client.ui.constants.HeadingSize;
 import org.gwtbootstrap3.client.ui.constants.IconType;
 import org.gwtbootstrap3.client.ui.constants.InputType;
@@ -53,19 +50,18 @@
 import org.gwtbootstrap3.client.ui.html.Div;
 import org.gwtbootstrap3.client.ui.html.Italic;
 import org.gwtbootstrap3.client.ui.html.Span;
-import org.sagebionetworks.repo.model.Entity;
 import org.sagebionetworks.web.client.DisplayConstants;
 import org.sagebionetworks.web.client.DisplayUtils;
 import org.sagebionetworks.web.client.EventHandlerUtils;
 import org.sagebionetworks.web.client.PortalGinInjector;
 import org.sagebionetworks.web.client.SageImageBundle;
 import org.sagebionetworks.web.client.SynapseJSNIUtils;
 import org.sagebionetworks.web.client.jsinterop.ToastMessageOptions;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.place.Synapse;
 import org.sagebionetworks.web.client.utils.Callback;
 import org.sagebionetworks.web.client.utils.JavaScriptCallback;
 import org.sagebionetworks.web.client.widget.entity.SharingAndDataUseConditionWidget;
-import org.sagebionetworks.web.client.widget.entity.menu.v3.Action;
 
 /**
  * Note on the form submission. This supports two form submission use cases. 1. Submit to Portal
@@ -531,8 +527,10 @@ public void onClick(ClickEvent event) {
       container.add(sharingDataUseWidget.asWidget());
     }
 
-    Row row = new Row();
-    Column col = new Column(ColumnSize.XS_12);
+    Grid row = new Grid();
+    row.setContainer(true);
+    Grid col = new Grid();
+    col.setXs(12);
     col.add(uploadBtn);
     if (showCancelButton) {
       col.add(cancelBtn);
@@ -665,8 +663,10 @@ public void onValueChange(ValueChangeEvent<String> event) {
     uploadPanel.add(uploadDestinationContainer);
     uploadPanel.add(formPanel);
 
-    Row row = new Row();
-    Column col = new Column(ColumnSize.XS_12);
+    Grid row = new Grid();
+    row.setContainer(true);
+    Grid col = new Grid();
+    col.setXs(12);
     col.add(spinningProgressContainer);
     col.add(progressContainer);
     row.add(col);

src/main/java/org/sagebionetworks/web/client/widget/entity/tabs/FilesTabViewImpl.java

@@ -5,20 +5,21 @@
 import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.IsWidget;
 import com.google.gwt.user.client.ui.ScrollPanel;
 import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 import org.gwtbootstrap3.client.ui.Anchor;
 import org.gwtbootstrap3.client.ui.Button;
-import org.gwtbootstrap3.client.ui.Column;
 import org.gwtbootstrap3.client.ui.Modal;
 import org.gwtbootstrap3.client.ui.ModalBody;
 import org.gwtbootstrap3.client.ui.ModalFooter;
 import org.gwtbootstrap3.client.ui.html.Div;
 import org.gwtbootstrap3.client.ui.html.Text;
 import org.sagebionetworks.web.client.DisplayConstants;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.widget.LoadingSpinner;
 import org.sagebionetworks.web.client.widget.user.UserBadge;
 
@@ -39,13 +40,13 @@ public class FilesTabViewImpl implements FilesTabView {
   SimplePanel addToDownloadListWidgetContainer;
 
   @UiField
-  Column filePreviewContainer;
+  Grid filePreviewContainer;
 
   @UiField
   Div filePreviewWidgetContainer;
 
   @UiField
-  Column fileProvenanceContainer;
+  FlowPanel fileProvenanceContainer;
 
   @UiField
   Div fileProvenanceGraphContainer;
@@ -75,7 +76,7 @@ public class FilesTabViewImpl implements FilesTabView {
   Div discussionThreadsContainer;
 
   @UiField
-  Column discussionContainer;
+  FlowPanel discussionContainer;
 
   @UiField
   Text discussionText;

src/main/java/org/sagebionetworks/web/client/widget/entity/tabs/TablesTabViewImpl.java

@@ -8,10 +8,10 @@
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 import org.gwtbootstrap3.client.ui.Anchor;
-import org.gwtbootstrap3.client.ui.Column;
 import org.gwtbootstrap3.client.ui.Heading;
 import org.gwtbootstrap3.client.ui.html.Div;
 import org.gwtbootstrap3.client.ui.html.Span;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.widget.FullWidthAlert;
 
 public class TablesTabViewImpl implements TablesTabView {
@@ -39,7 +39,7 @@ public class TablesTabViewImpl implements TablesTabView {
   SimplePanel synapseAlertContainer;
 
   @UiField
-  Column provenanceContainer;
+  Grid provenanceContainer;
 
   @UiField
   Div provenanceContainerHighlightBox;

src/main/java/org/sagebionetworks/web/client/widget/profile/UserProfileWidgetViewImpl.java

@@ -14,7 +14,6 @@
 import java.util.List;
 import org.gwtbootstrap3.client.ui.Anchor;
 import org.gwtbootstrap3.client.ui.Button;
-import org.gwtbootstrap3.client.ui.Column;
 import org.gwtbootstrap3.client.ui.FormGroup;
 import org.gwtbootstrap3.client.ui.HelpBlock;
 import org.gwtbootstrap3.client.ui.Tooltip;
@@ -31,6 +30,7 @@
 import org.sagebionetworks.web.client.jsinterop.ReactElement;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.jsinterop.UserProfileLinksProps;
+import org.sagebionetworks.web.client.jsinterop.mui.Grid;
 import org.sagebionetworks.web.client.widget.ReactComponent;
 import org.sagebionetworks.web.shared.WebConstants;
 
@@ -96,13 +96,13 @@ public interface Binder extends UiBinder<Widget, UserProfileWidgetViewImpl> {}
   Anchor changePasswordLink;
 
   @UiField
-  Column orcIDContainer;
+  Grid orcIDContainer;
 
   @UiField
   Anchor orcIdLink;
 
   @UiField
-  Column accountTypeContainer;
+  Grid accountTypeContainer;
 
   @UiField
   ReactComponent accountLevelBadgesContainer;
@@ -114,7 +114,7 @@ public interface Binder extends UiBinder<Widget, UserProfileWidgetViewImpl> {}
   ReactComponent userProfileLinksReactComponentContainer;
 
   @UiField
-  Column emailAddressContainer;
+  Grid emailAddressContainer;
 
   @UiField
   Div commandsContainer;
@@ -134,11 +134,11 @@ public UserProfileWidgetViewImpl(
     CookieProvider cookies,
     SynapseJavascriptClient jsClient
   ) {
-    widget = binder.createAndBindUi(this);
     this.jsniUtils = jsniUtils;
     this.propsProvider = propsProvider;
     this.cookies = cookies;
     this.jsClient = jsClient;
+    widget = binder.createAndBindUi(this);
     editProfileButton.addClickHandler(event -> {
       Window.open(WebConstants.ONESAGE_ACCOUNT_SETTINGS_URL, "_blank", "");
     });