diff --git a/.eslintignore b/.eslintignore index 8c86e0e52..7a5d06bbf 100644 --- 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 \ No newline at end of file diff --git a/less/tree.less b/less/tree.less index 56a5ee38e..ed0fbf71f 100644 --- 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; -} \ No newline at end of file + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} diff --git a/src/Common/ResourceTreeContainer.tsx b/src/Common/ResourceTreeContainer.tsx index 129a38115..fe04f9e04 100644 --- 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 {userContext.authType === AuthType.ResourceToken ? ( -
+ ) : userContext.features.enableKOResourceTree ? (
) : ( diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap index cb8ecbfaf..b1164fe05 100644 --- 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], diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index ac1e077d6..79f6fec11 100644 --- 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; @@ -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) { diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap index 9d1b8cc0c..7406a14ee 100644 --- 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], diff --git a/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap b/src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap index 27f1f941d..80bb050de 100644 --- 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 " diff --git a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx b/src/Explorer/Tree/ResourceTokenTree.tsx similarity index 61% rename from src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx rename to src/Explorer/Tree/ResourceTokenTree.tsx index 49529f0d7..b405e2559 100644 --- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx +++ b/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; - 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 ; - } - - 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 ; +}; diff --git a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx b/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx deleted file mode 100644 index 47133e42a..000000000 --- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx +++ /dev/null @@ -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(); - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/src/Explorer/Tree/__snapshots__/ResourceTreeAdapterForResourceToken.test.tsx.snap b/src/Explorer/Tree/__snapshots__/ResourceTreeAdapterForResourceToken.test.tsx.snap deleted file mode 100644 index cb88eaa00..000000000 --- a/src/Explorer/Tree/__snapshots__/ResourceTreeAdapterForResourceToken.test.tsx.snap +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Resource tree for resource token should render 1`] = ` -
- -
-`;