PORTALS-3195 - Use bundled react-router, add props to ReviewerDashboard

package.json

@@ -30,7 +30,6 @@
     "react-dom": "18.2.0",
     "react-measure": "2.5.2",
     "react-plotly.js": "^2.6.0",
-    "react-router-dom": "^5.3.4",
     "react-transition-group": "2.6.0",
     "sass": "^1.63.6",
     "spark-md5": "^3.0.2",

pom.xml

@@ -214,7 +214,6 @@
         <!-- Plugin configuration. There are many available options, see gwt-maven-plugin 
 					documentation at codehaus.org -->
         <configuration>
-          <workDir>${project.build.directory}/gwt/codeserver</workDir>
           <launcherDir>${webappDirectory}</launcherDir>
           <runTarget>Portal.html</runTarget>
           <hostedWebapp>${webappDirectory}</hostedWebapp>
@@ -454,10 +453,6 @@
                   file="${project.basedir}/node_modules/react-dom/umd/react-dom.production.min.js"
                   tofile="src/main/webapp/generated/react-dom.production.min.js"
                 />
-                <copy
-                  file="${project.basedir}/node_modules/react-router-dom/umd/react-router-dom.min.js"
-                  tofile="src/main/webapp/generated/react-router-dom.min.js"
-                />
                 <copy
                   file="${project.basedir}/node_modules/react-transition-group/dist/react-transition-group.min.js"
                   tofile="src/main/webapp/generated/react-transition-group.min.js"

src/main/java/org/sagebionetworks/web/client/jsinterop/ReviewerDashboardProps.java

@@ -0,0 +1,18 @@
+package org.sagebionetworks.web.client.jsinterop;
+
+import jsinterop.annotations.JsOverlay;
+import jsinterop.annotations.JsPackage;
+import jsinterop.annotations.JsType;
+
+@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
+public class ReviewerDashboardProps extends ReactComponentProps {
+
+  String routerBaseName;
+
+  @JsOverlay
+  public static ReviewerDashboardProps create(String routerBaseName) {
+    ReviewerDashboardProps props = new ReviewerDashboardProps();
+    props.routerBaseName = routerBaseName;
+    return props;
+  }
+}

src/main/java/org/sagebionetworks/web/client/jsinterop/SRC.java

@@ -47,7 +47,7 @@ public static class SynapseComponents {
       StandaloneQueryWrapperProps
     > StandaloneQueryWrapper;
     public static ReactComponentType<ForumSearchProps> ForumSearch;
-    public static ReactComponentType ReviewerDashboard;
+    public static ReactComponentType<ReviewerDashboardProps> ReviewerDashboard;
     public static ReactComponentType<ProvenanceGraphProps> ProvenanceGraph;
     public static ReactComponentType SynapseToastContainer;
     public static ReactComponentType<EmptyProps> OAuthManagement;

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

@@ -8,6 +8,7 @@
 import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
 import org.sagebionetworks.web.client.jsinterop.React;
 import org.sagebionetworks.web.client.jsinterop.ReactElement;
+import org.sagebionetworks.web.client.jsinterop.ReviewerDashboardProps;
 import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.widget.ReactComponent;
 import org.sagebionetworks.web.client.widget.header.Header;
@@ -43,9 +44,13 @@ public void render() {
     headerWidget.refresh();
     Window.scrollTo(0, 0);
 
+    ReviewerDashboardProps props = ReviewerDashboardProps.create(
+      "/DataAccessManagement:default"
+    );
+
     ReactElement node = React.createElementWithSynapseContext(
       SRC.SynapseComponents.ReviewerDashboard,
-      null,
+      props,
       propsProvider.getJsInteropContextProps()
     );
     reactComponent.render(node);

src/main/webapp/Portal.html

@@ -195,7 +195,6 @@
       loadJs(cdnEndpoint + 'generated/react-measure.js')
       loadJs(cdnEndpoint + 'generated/plotly.min.js')
       loadJs(cdnEndpoint + 'generated/create-plotly-component.min.js')
-      loadJs(cdnEndpoint + 'generated/react-router-dom.min.js')
       loadJs(cdnEndpoint + 'generated/universalCookie.min.js')
       loadJs(cdnEndpoint + 'generated/react-bootstrap.min.js')
       loadJs(cdnEndpoint + 'generated/synapse-react-client.production.min.js') // We don't load SRC's scss because we include it in our own compiled scss

yarn.lock

@@ -773,6 +773,11 @@
     classcat "^5.0.3"
     zustand "^4.4.1"
 
+"@remix-run/[email protected]":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.20.0.tgz#03554155b45d8b529adf635b2f6ad1165d70d8b4"
+  integrity sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==
+
 "@restart/context@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
@@ -5094,6 +5099,14 @@ react-router-dom@^5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-router-dom@^6.27.0:
+  version "6.27.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.27.0.tgz#8d7972a425fd75f91c1e1ff67e47240c5752dc3f"
+  integrity sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==
+  dependencies:
+    "@remix-run/router" "1.20.0"
+    react-router "6.27.0"
+
 [email protected]:
   version "5.3.4"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5"
@@ -5109,6 +5122,13 @@ [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+[email protected]:
+  version "6.27.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.27.0.tgz#db292474926c814c996c0ff3ef0162d1f9f60ed4"
+  integrity sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==
+  dependencies:
+    "@remix-run/router" "1.20.0"
+
 react-select@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"