SWC-7185

src/main/java/org/sagebionetworks/web/client/FeatureFlagKey.java

@@ -43,6 +43,9 @@ public enum FeatureFlagKey {
   // If enabled, uses the v2 uploader (react implementation) for file entity uploads.
   UPLOADER_V2("UPLOADER_V2"),
 
+  // If enabled, uses the file browser react implementation
+  REACT_FILE_BROWSER("REACT_FILE_BROWSER"),
+
   // Last flag is used only for tests
   TEST_FLAG_ONLY("TEST_FLAG_ONLY");
 

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

@@ -0,0 +1,31 @@
+package org.sagebionetworks.web.client.jsinterop;
+
+import jsinterop.annotations.JsFunction;
+import jsinterop.annotations.JsOverlay;
+import jsinterop.annotations.JsPackage;
+import jsinterop.annotations.JsType;
+import org.sagebionetworks.web.client.jsni.ReferenceJSNIObject;
+
+@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
+public class EntityFileBrowserProps extends ReactComponentProps {
+
+  @FunctionalInterface
+  @JsFunction
+  public interface OnSelectCallback {
+    void run(ReferenceJSNIObject selected);
+  }
+
+  OnSelectCallback onSelect;
+  String parentContainerId;
+
+  @JsOverlay
+  public static EntityFileBrowserProps create(
+    String parentContainerId,
+    OnSelectCallback onSelect
+  ) {
+    EntityFileBrowserProps props = new EntityFileBrowserProps();
+    props.parentContainerId = parentContainerId;
+    props.onSelect = onSelect;
+    return props;
+  }
+}

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

@@ -21,6 +21,7 @@ public static class SynapseComponents {
     public static ReactComponentType<EntityBadgeIconsProps> EntityBadgeIcons;
     public static ReactComponentType<DatasetEditorProps> DatasetItemsEditor;
     public static ReactComponentType<EntityFinderProps> EntityFinder;
+    public static ReactComponentType<EntityFileBrowserProps> EntityFileBrowser;
     public static ReactComponentType<EvaluationCardProps> EvaluationCard;
     public static ReactComponentType<
       EvaluationEditorPageProps

src/main/java/org/sagebionetworks/web/client/widget/entity/browse/FilesBrowserViewImpl.java

@@ -1,20 +1,23 @@
 package org.sagebionetworks.web.client.widget.entity.browse;
 
+import com.google.gwt.core.client.GWT;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 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.AnchorListItem;
-import org.gwtbootstrap3.client.ui.Button;
 import org.gwtbootstrap3.client.ui.Heading;
-import org.gwtbootstrap3.client.ui.Tooltip;
 import org.gwtbootstrap3.client.ui.html.Div;
-import org.gwtbootstrap3.client.ui.html.Span;
 import org.sagebionetworks.web.client.DisplayUtils;
-import org.sagebionetworks.web.client.security.AuthenticationController;
+import org.sagebionetworks.web.client.FeatureFlagConfig;
+import org.sagebionetworks.web.client.FeatureFlagKey;
+import org.sagebionetworks.web.client.context.SynapseReactClientFullContextPropsProvider;
+import org.sagebionetworks.web.client.jsinterop.EntityFileBrowserProps;
+import org.sagebionetworks.web.client.jsinterop.React;
+import org.sagebionetworks.web.client.jsinterop.ReactElement;
+import org.sagebionetworks.web.client.jsinterop.SRC;
 import org.sagebionetworks.web.client.utils.CallbackP;
-import org.sagebionetworks.web.client.widget.HelpWidget;
+import org.sagebionetworks.web.client.widget.ReactComponent;
 
 public class FilesBrowserViewImpl implements FilesBrowserView {
 
@@ -23,6 +26,8 @@ public interface FilesBrowserViewImplUiBinder
 
   private EntityTreeBrowser entityTreeBrowser;
   private Widget widget;
+  SynapseReactClientFullContextPropsProvider propsProvider;
+  private FeatureFlagConfig featureFlagConfig;
 
   @UiField
   Div files;
@@ -39,12 +44,21 @@ public interface FilesBrowserViewImplUiBinder
   @UiField
   Heading title;
 
+  @UiField
+  Div reactFileBrowserContainer;
+
+  CallbackP<String> entityClickedCallback;
+
   @Inject
   public FilesBrowserViewImpl(
     FilesBrowserViewImplUiBinder binder,
-    EntityTreeBrowser entityTreeBrowser
+    EntityTreeBrowser entityTreeBrowser,
+    SynapseReactClientFullContextPropsProvider propsProvider,
+    FeatureFlagConfig featureFlagConfig
   ) {
     widget = binder.createAndBindUi(this);
+    this.featureFlagConfig = featureFlagConfig;
+    this.propsProvider = propsProvider;
     this.entityTreeBrowser = entityTreeBrowser;
     Widget etbW = entityTreeBrowser.asWidget();
     etbW.addStyleName("margin-top-10");
@@ -53,15 +67,46 @@ public FilesBrowserViewImpl(
 
   @Override
   public void configure(String entityId) {
+    boolean isReactFileBrowser = featureFlagConfig.isFeatureEnabled(
+      FeatureFlagKey.REACT_FILE_BROWSER
+    );
     title.setVisible(false);
-    entityTreeBrowser.configure(entityId);
+    reactFileBrowserContainer.setVisible(isReactFileBrowser);
+    files.setVisible(!isReactFileBrowser);
+    if (isReactFileBrowser) {
+      rerenderFileBrowser(entityId);
+    } else {
+      entityTreeBrowser.configure(entityId);
+    }
+  }
+
+  public void rerenderFileBrowser(String parentContainerId) {
+    // TODO: Should not need to remount, but currently the parentContainer is not shown if the existing react component is updated
+    // TODO: Bug: The tree is not always auto-expanding (to the path to the parent container Id)
+    reactFileBrowserContainer.clear();
+    ReactComponent componentContainer = new ReactComponent();
+    EntityFileBrowserProps props = EntityFileBrowserProps.create(
+      parentContainerId,
+      ref -> {
+        String entityId = ref.getTargetId();
+        entityClickedCallback.invoke(entityId);
+      }
+    );
+    ReactElement component = React.createElementWithSynapseContext(
+      SRC.SynapseComponents.EntityFileBrowser,
+      props,
+      propsProvider.getJsInteropContextProps()
+    );
+    reactFileBrowserContainer.add(componentContainer);
+    componentContainer.render(component);
   }
 
   @Override
   public void setEntityClickedHandler(CallbackP<String> callback) {
+    this.entityClickedCallback = callback;
     entityTreeBrowser.setEntityClickedHandler(entityId -> {
       entityTreeBrowser.setLoadingVisible(true);
-      callback.invoke(entityId);
+      entityClickedCallback.invoke(entityId);
     });
   }
 

src/main/resources/org/sagebionetworks/web/client/widget/entity/browse/FilesBrowserViewImpl.ui.xml

@@ -22,6 +22,7 @@
       />
     </bh:Div>
     <bh:Div ui:field="addToDownloadListContainer" />
+    <bh:Div ui:field="reactFileBrowserContainer" />
     <bh:Div
       ui:field="files"
       styleName="highlight-box padding-top-0-imp overflow-auto"