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

2024-11-28 16:36:46 +00:00 · 2021-07-22 17:11:19 -07:00 · 2021-07-22 17:11:19 -07:00 · fecac5625a
commit fecac5625a
parent dc21032d69
10 changed files with 143 additions and 266 deletions
--- a/.eslintignore
+++ b/.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
--- a/less/tree.less
+++ b/less/tree.less
@ -1,272 +1,270 @@
@import "./Common/Constants";

-
 .resourceTree {
+  height: 100%;
+  flex: 0 0 auto;
+  .main {
    height: 100%;
-    flex: 0 0 auto;
-    .main {
-        height: 100%;
-    }
+  }
 }

 .resourceTreeScroll {
-    height: 100%;
-    display: flex;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
 }

 .userSelectNone {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }

 .treeHovermargin {
-    margin-left: 16px;
+  margin-left: 16px;
 }

 .highlight {
-    padding: @SmallSpace 2px;
-    outline: 0;
+  padding: @SmallSpace 2px;
+  outline: 0;

-    &:hover {
-        .hover();
-    }
+  &:hover {
+    .hover();
+  }

-    &:active {
-        .active();
-    }
+  &:active {
+    .active();
+  }

-    &:focus {
-        .focus();
-    }
+  &:focus {
+    .focus();
+  }
 }

 .contextmenushowing {
-    background-color: #EEE;
+  background-color: #eee;
 }

 .collectionstree {
-    width: 100%;
-    margin-top: @DefaultSpace;
+  width: 100%;
+  margin-top: @DefaultSpace;

+  .databaseList {
+    list-style-type: none;
+    padding-left: 0px;

-    .databaseList {
-        list-style-type: none;
-        padding-left: 0px;
-
-        .collectionList {
-            padding-left:(2 * @MediumSpace);
-        }
-
-        .collectionChildList {
-            padding-left: @LargeSpace;
-        }
-
-        .databaseDocuments {
-            padding-left: (5 * @MediumSpace);
-        }
+    .collectionList {
+      padding-left: (2 * @MediumSpace);
    }
+
+    .collectionChildList {
+      padding-left: @LargeSpace;
+    }
+
+    .databaseDocuments {
+      padding-left: (5 * @MediumSpace);
+    }
+  }
 }

 .pointerCursor {
-    cursor: pointer;
+  cursor: pointer;
 }

 .menuEllipsis {
-    padding-right: 6px;
-    font-weight: bold;
-    font-size: 18px;
-    position: relative;
-    top: -5px;
-    left: 0px;
-    float: right;
-    display: none;
-    padding-left: 6px!important;
-    line-height: @TreeLineHeight;
+  padding-right: 6px;
+  font-weight: bold;
+  font-size: 18px;
+  position: relative;
+  top: -5px;
+  left: 0px;
+  float: right;
+  display: none;
+  padding-left: 6px !important;
+  line-height: @TreeLineHeight;
 }

 .databaseMenu {
-    .flex-display();
+  .flex-display();
 }

 .databaseMenu:hover .menuEllipsis,
 .databaseMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .databaseCollChildTextOverflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
 }

 .collectionMenu {
-    .flex-display();
+  .flex-display();
 }

 .collectionMenu:hover .menuEllipsis,
 .collectionMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .documentsMenu:hover .menuEllipsis,
 .documentsMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .treeChildMenu {
-    display: flex;
+  display: flex;
 }

 .storedProcedureMenu:hover .menuEllipsis,
 .storedProcedureMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .childMenu {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-left: (6 * @MediumSpace);
-    width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: (6 * @MediumSpace);
+  width: 100%;
 }

 .storedChildMenu:hover .menuEllipsis,
 .storedChildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .contextmenu6 {
-    top: -29px;
+  top: -29px;
 }

 .userDefinedMenu:hover .contextmenu6 {
-    display: block;
+  display: block;
 }

 .userDefinedchildMenu:hover .menuEllipsis,
 .userDefinedchildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .triggersMenu:hover .menuEllipsis,
 .triggersMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .triggersChildMenu:hover .menuEllipsis,
 .triggersChildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .databaseId {
-    font-size: 14px;
+  font-size: 14px;
 }

 .storedUdfTriggerMenu {
-    padding-left: 0px;
+  padding-left: 0px;
 }

 .collectionstree img {
-    width: 16px;
-    height: 16px;
-    vertical-align: text-top;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
 }

 img.collectionsTreeCollapseExpand {
-    width: 10px;
-    height: 10px;
-    vertical-align: middle;
-    margin-bottom: 5px;
+  width: 10px;
+  height: 10px;
+  vertical-align: middle;
+  margin-bottom: 5px;
 }

 .collapsed::before {
-    content: "\23F5";
-    margin-left: 0px;
-    font-size: 15px;
+  content: "\23F5";
+  margin-left: 0px;
+  font-size: 15px;
 }

 .expanded::before {
-    content: '\23F7';
-    margin-left: 0px;
-    font-size: 15px;
+  content: "\23F7";
+  margin-left: 0px;
+  font-size: 15px;
 }

 .collectionMenuChildren {
-    padding-left: 42px;
+  padding-left: 42px;
 }

 .main-nav {
-    width: 100vh;
-    height: 40px;
-    background: white;
-    transform-origin: left top;
-    -webkit-transform-origin: left top;
-    -ms-transform-origin: left top;
-    transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -ms-transform: rotate(-90deg) translateX(-100%);
-    border-bottom: 1px solid #CCC;
+  width: 100vh;
+  height: 40px;
+  background: white;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+  border-bottom: 1px solid #ccc;
 }

 .main-nav-img {
-    width: 16px;
-    height: 16px;
-    margin: -32px 0 0 0;
-    transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -ms-transform: rotate(-90deg) translateX(-100%);
+  width: 16px;
+  height: 16px;
+  margin: -32px 0 0 0;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
 }

 .main-nav-img.main-nav-sub-img {
-    width: 16px;
-    height: 16px;
-    margin: 0px 0px 0 0;
-    transform: rotate(180deg) translateX(0%);
-    -webkit-transform: rotate(180deg) translateX(0%);
-    -ms-transform: rotate(180deg) translateX(0%);
-    position: absolute;
-    right: -8px;
-    top: 16px;
+  width: 16px;
+  height: 16px;
+  margin: 0px 0px 0 0;
+  transform: rotate(180deg) translateX(0%);
+  -webkit-transform: rotate(180deg) translateX(0%);
+  -ms-transform: rotate(180deg) translateX(0%);
+  position: absolute;
+  right: -8px;
+  top: 16px;
 }

 ul.nav {
-    margin: 0 auto;
-    margin-top: 0px;
-    margin-left: 0px;
+  margin: 0 auto;
+  margin-top: 0px;
+  margin-left: 0px;
 }

 .mini ul.nav li {
-    float: right;
-    line-height: 25px;
-    height: auto;
-    margin-top: 3px;
+  float: right;
+  line-height: 25px;
+  height: auto;
+  margin-top: 3px;
 }

 .spancolchildstyle {
-    padding: 4px;
+  padding: 4px;
 }

 .contextmenubutton {
-    float: right;
-    display: none;
+  float: right;
+  display: none;
 }

-.highlight:hover>.contextmenubutton {
-    display: unset;
+.highlight:hover > .contextmenubutton {
+  display: unset;
 }

-.highlight:hover>.contextmenubutton::after {
-    content: "\2026";
-    font-size: 12px;
+.highlight:hover > .contextmenubutton::after {
+  content: "\2026";
+  font-size: 12px;
 }

 .showEllipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/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" />
        ) : (
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/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],
--- a/src/Explorer/Explorer.tsx
+++ b/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) {
--- a/src/Explorer/Panes/GitHubReposPanel/snapshots/GitHubReposPanel.test.tsx.snap
+++ b/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],
--- a/src/Explorer/Panes/StringInputPane/snapshots/StringInputPane.test.tsx.snap
+++ b/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 "
--- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.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()} />;
+};
--- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx
+++ b/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();
-  });
-});
--- a/src/Explorer/Tree/snapshots/ResourceTreeAdapterForResourceToken.test.tsx.snap
+++ b/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>
-`;