Migrate resource tree for resource token to react (#956)

.eslintignore

@@ -191,5 +191,4 @@ src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
 src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
 __mocks__/monaco-editor.ts
-src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx
 src/Explorer/Tree/ResourceTree.tsx

less/tree.less

@@ -1,6 +1,5 @@
 @import "./Common/Constants";
 
-
 .resourceTree {
   height: 100%;
   flex: 0 0 auto;
@@ -45,20 +44,19 @@
 }
 
 .contextmenushowing {
-    background-color: #EEE;
+  background-color: #eee;
 }
 
 .collectionstree {
   width: 100%;
   margin-top: @DefaultSpace;
 
-
   .databaseList {
     list-style-type: none;
     padding-left: 0px;
 
     .collectionList {
-            padding-left:(2 * @MediumSpace);
+      padding-left: (2 * @MediumSpace);
     }
 
     .collectionChildList {
@@ -84,7 +82,7 @@
   left: 0px;
   float: right;
   display: none;
-    padding-left: 6px!important;
+  padding-left: 6px !important;
   line-height: @TreeLineHeight;
 }
 
@@ -191,7 +189,7 @@ img.collectionsTreeCollapseExpand {
 }
 
 .expanded::before {
-    content: '\23F7';
+  content: "\23F7";
   margin-left: 0px;
   font-size: 15px;
 }
@@ -210,7 +208,7 @@ img.collectionsTreeCollapseExpand {
   transform: rotate(-90deg) translateX(-100%);
   -webkit-transform: rotate(-90deg) translateX(-100%);
   -ms-transform: rotate(-90deg) translateX(-100%);
-    border-bottom: 1px solid #CCC;
+  border-bottom: 1px solid #ccc;
 }
 
 .main-nav-img {
@@ -256,11 +254,11 @@ ul.nav {
   display: none;
 }
 
-.highlight:hover>.contextmenubutton {
+.highlight:hover > .contextmenubutton {
   display: unset;
 }
 
-.highlight:hover>.contextmenubutton::after {
+.highlight:hover > .contextmenubutton::after {
   content: "\2026";
   font-size: 12px;
 }

src/Common/ResourceTreeContainer.tsx

@@ -3,6 +3,7 @@ import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
 import Explorer from "../Explorer/Explorer";
+import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
 import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
 
@@ -52,7 +53,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
           </div>
         </div>
         {userContext.authType === AuthType.ResourceToken ? (
-          <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
+          <ResourceTokenTree />
         ) : userContext.features.enableKOResourceTree ? (
           <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
         ) : (

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -44,10 +44,6 @@ exports[`SettingsComponent renders 1`] = `
                   "copyNotebook": [Function],
                   "parameters": [Function],
                 },
-                "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
               },
               "databaseId": "test",
               "defaultTtl": [Function],
@@ -115,10 +111,6 @@ exports[`SettingsComponent renders 1`] = `
                   "copyNotebook": [Function],
                   "parameters": [Function],
                 },
-                "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
               },
               "databaseId": "test",
               "defaultTtl": [Function],

src/Explorer/Explorer.tsx

@@ -59,7 +59,6 @@ import TerminalTab from "./Tabs/TerminalTab";
 import Database from "./Tree/Database";
 import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
 import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
-import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
 import StoredProcedure from "./Tree/StoredProcedure";
 import { useDatabases } from "./useDatabases";
 import { useSelectedNode } from "./useSelectedNode";
@@ -74,9 +73,6 @@ export default class Explorer {
   // Resource Tree
   private resourceTree: ResourceTreeAdapter;
 
-  // Resource Token
-  public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
-
   // Tabs
   public isTabsContentExpanded: ko.Observable<boolean>;
 
@@ -186,7 +182,6 @@ export default class Explorer {
     );
 
     this.resourceTree = new ResourceTreeAdapter(this);
-    this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
 
     // Override notebook server parameters from URL parameters
     if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -33,10 +33,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "copyNotebook": [Function],
               "parameters": [Function],
             },
-            "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-              "container": [Circular],
-              "parameters": [Function],
-            },
           },
           "getRepo": [Function],
           "pinRepo": [Function],

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -23,10 +23,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "copyNotebook": [Function],
         "parameters": [Function],
       },
-      "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-        "container": [Circular],
-        "parameters": [Function],
-      },
     }
   }
   inProgressMessage="Creating directory "

src/Explorer/Tree/ResourceTokenTree.tsx

@@ -1,45 +1,18 @@
-import * as ko from "knockout";
-import * as React from "react";
+import React from "react";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { useTabs } from "../../hooks/useTabs";
 import { userContext } from "../../UserContext";
 import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
-import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 
-export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-  public myNotebooksContentRoot: NotebookContentItem;
+export const ResourceTokenTree: React.FC = (): JSX.Element => {
+  const collection = useDatabases((state) => state.resourceTokenCollection);
 
-  public constructor(private container: Explorer) {
-    this.parameters = ko.observable(Date.now());
-
-    useDatabases.subscribe(
-      () => this.triggerRender(),
-      (state) => state.resourceTokenCollection
-    );
-    useSelectedNode.subscribe(() => this.triggerRender());
-    useTabs.subscribe(
-      () => this.triggerRender(),
-      (state) => state.activeTab
-    );
-
-    this.triggerRender();
-  }
-
-  public renderComponent(): JSX.Element {
-    const dataRootNode = this.buildCollectionNode();
-    return <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />;
-  }
-
-  public buildCollectionNode(): TreeNode {
-    const collection: ViewModels.CollectionBase = useDatabases.getState().resourceTokenCollection;
+  const buildCollectionNode = (): TreeNode => {
     if (!collection) {
       return {
         label: undefined,
@@ -86,9 +59,7 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
       isExpanded: true,
       children: [collectionNode],
     };
-  }
+  };
 
-  public triggerRender() {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}
+  return <TreeComponent className="dataResourceTree" rootNode={buildCollectionNode()} />;
+};

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx

@@ -1,35 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";
-import { useDatabases } from "../useDatabases";
-import ResourceTokenCollection from "./ResourceTokenCollection";
-import { ResourceTreeAdapterForResourceToken } from "./ResourceTreeAdapterForResourceToken";
-
-describe("Resource tree for resource token", () => {
-  const mockContainer = {} as Explorer;
-  const resourceTree = new ResourceTreeAdapterForResourceToken(mockContainer);
-  const mockCollection = {
-    _rid: "fakeRid",
-    _self: "fakeSelf",
-    id: "fakeId",
-  } as DataModels.Collection;
-  const mockResourceTokenCollection: ViewModels.CollectionBase = new ResourceTokenCollection(
-    mockContainer,
-    "fakeDatabaseId",
-    mockCollection
-  );
-  useDatabases.setState({ resourceTokenCollection: mockResourceTokenCollection });
-
-  it("should render", () => {
-    const rootNode: TreeNode = resourceTree.buildCollectionNode();
-    const props: TreeComponentProps = {
-      rootNode,
-      className: "dataResourceTree",
-    };
-    const wrapper = shallow(<TreeComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Tree/__snapshots__/ResourceTreeAdapterForResourceToken.test.tsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Resource tree for resource token should render 1`] = `
-<div
-  className="treeComponent dataResourceTree"
-  role="tree"
->
-  <TreeNodeComponent
-    generation={0}
-    node={
-      Object {
-        "children": Array [
-          Object {
-            "children": Array [
-              Object {
-                "isSelected": [Function],
-                "label": "Items",
-                "onClick": [Function],
-              },
-            ],
-            "className": "collectionHeader",
-            "iconSrc": "",
-            "isExpanded": true,
-            "isSelected": [Function],
-            "label": "fakeId",
-            "onClick": [Function],
-          },
-        ],
-        "isExpanded": true,
-        "label": undefined,
-      }
-    }
-    paddingLeft={0}
-  />
-</div>
-`;