random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove old resource tree and cleanup (#28)

Browse Source 
* Remove old resource tree and its various components

* Fix stored procedure, udf, trigger not always deleting when context menu option chosen

* Reformat and fix eslint warnings

* Remove CommandButtonOptions
This commit is contained in:
Laurent Nguyen
2020-06-15 12:16:52 +02:00
committed by GitHub
parent d70e30c4fc
commit 73f2c612ed
32 changed files with 50 additions and 2307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/Explorer/Tree/Collection.ts
View File

@@ -14,8 +14,6 @@ import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
import { OfferUtils } from "../../Utils/OfferUtils";
import { StartUploadMessageParams, UploadDetails, UploadDetailsRecord } from "../../workers/upload/definitions";
import { ContextMenuButtonFactory } from "../ContextMenuButtonFactory";
import ContextMenu from "../Menus/ContextMenu";
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
import { ConflictsTab } from "../Tabs/ConflictsTab";
@@ -86,9 +84,6 @@ export default class Collection implements ViewModels.Collection {
public userDefinedFunctionsFocused: ko.Observable<boolean>;
public triggersFocused: ko.Observable<boolean>;
public contextMenu: ViewModels.ContextMenu;
public documentsContextMenu: ViewModels.ContextMenu;
constructor(
container: ViewModels.Explorer,
databaseId: string,
@@ -216,217 +211,8 @@ export default class Collection implements ViewModels.Collection {
this.isStoredProceduresExpanded = ko.observable<boolean>(false);
this.isUserDefinedFunctionsExpanded = ko.observable<boolean>(false);
this.isTriggersExpanded = ko.observable<boolean>(false);
this.contextMenu = new ContextMenu(this.container, this.rid);
this.contextMenu.options(
ContextMenuButtonFactory.createCollectionContextMenuButton(container, {
databaseId: this.databaseId,
collectionId: this.id()
})
);
this.documentsContextMenu = new ContextMenu(this.container, `${this.rid}/documents`);
}
public onKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.expandCollapseCollection();
return false;
}
return true;
};
public onKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Delete") {
this.onDeleteCollectionContextMenuClick(source, event);
return false;
}
if (event.key === "ArrowRight" && !this.isCollectionExpanded()) {
this.expandCollection();
return false;
}
if (event.key === "ArrowDown" && !this.isCollectionExpanded()) {
this.expandCollection();
return false;
}
if (event.key === "ArrowLeft" && this.isCollectionExpanded()) {
this.collapseCollection();
return false;
}
return true;
};
public onMenuKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Escape") {
this.contextMenu.hide(source, event);
return false;
}
return true;
};
public onTableEntitiesKeyDown = (source: any, event: KeyboardEvent): boolean => {
return true;
};
public onTableEntitiesKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.onTableEntitiesClick();
event.stopPropagation();
return false;
}
return true;
};
public onGraphDocumentsKeyDown = (source: any, event: KeyboardEvent): boolean => {
return true;
};
public onGraphDocumentsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.onGraphDocumentsClick();
event.stopPropagation();
return false;
}
return true;
};
public onDocumentDBDocumentsKeyDown = (source: any, event: KeyboardEvent): boolean => {
return true;
};
public onDocumentDBDocumentsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.onDocumentDBDocumentsClick();
return false;
}
return true;
};
public onConflictsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.onConflictsClick();
return false;
}
return true;
};
public onMongoDBDocumentsKeyDown = (source: any, event: KeyboardEvent): boolean => {
return true;
};
public onMongoDBDocumentsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.onMongoDBDocumentsClick();
return false;
}
return true;
};
public onSettingsKeyDown = (source: any, event: KeyboardEvent): boolean => {
return true;
};
public onSettingsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.onSettingsClick();
return false;
}
return true;
};
public onStoredProceduresKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "ArrowRight" && !this.isStoredProceduresExpanded()) {
this.expandStoredProcedures();
return false;
}
if (event.key === "ArrowDown" && !this.isStoredProceduresExpanded()) {
this.expandStoredProcedures();
return false;
}
if (event.key === "ArrowLeft" && this.isStoredProceduresExpanded()) {
this.collapseStoredProcedures();
return false;
}
return true;
};
public onStoredProceduresKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.expandCollapseStoredProcedures();
return false;
}
return true;
};
public onUserDefinedFunctionsKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "ArrowRight" && !this.isUserDefinedFunctionsExpanded()) {
this.expandUserDefinedFunctions();
return false;
}
if (event.key === "ArrowDown" && !this.isUserDefinedFunctionsExpanded()) {
this.expandUserDefinedFunctions();
return false;
}
if (event.key === "ArrowLeft" && this.isUserDefinedFunctionsExpanded()) {
this.collapseUserDefinedFunctions();
return false;
}
return true;
};
public onUserDefinedFunctionsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.expandCollapseUserDefinedFunctions();
return false;
}
return true;
};
public onTriggersKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "ArrowRight" && !this.isTriggersExpanded()) {
this.expandTriggers();
return false;
}
if (event.key === "ArrowDown" && !this.isTriggersExpanded()) {
this.expandTriggers();
return false;
}
if (event.key === "ArrowLeft" && this.isTriggersExpanded()) {
this.collapseTriggers();
return false;
}
return true;
};
public onTriggersKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
this.expandCollapseTriggers();
return false;
}
return true;
};
public expandCollapseCollection() {
this.container.selectedNode(this);
TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
@@ -985,9 +771,6 @@ export default class Collection implements ViewModels.Collection {
// Activate
queryTab.onTabClick();
// Hide Context Menu (if necessary)
collection.contextMenu.hide(this, null);
}
public onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string) {
@@ -1025,9 +808,6 @@ export default class Collection implements ViewModels.Collection {
// Activate
queryTab.onTabClick();
// Hide Context Menu (if necessary)
collection.contextMenu.hide(this, null);
}
public onNewGraphClick() {
@@ -1036,8 +816,6 @@ export default class Collection implements ViewModels.Collection {
this.container.openedTabs.push(graphTab);
// Activate
graphTab.onTabClick();
// Hide Context Menu (if necessary)
this.contextMenu.hide(this, null);
}
public onNewMongoShellClick() {
@@ -1060,9 +838,6 @@ export default class Collection implements ViewModels.Collection {
// Activate
mongoShellTab.onTabClick();
// Hide Context Menu (if necessary)
this.contextMenu.hide(this, null);
}
public onNewStoredProcedureClick(source: ViewModels.Collection, event: MouseEvent) {
@@ -1357,7 +1132,6 @@ export default class Collection implements ViewModels.Collection {
}
public onDeleteCollectionContextMenuClick(source: ViewModels.Collection, event: MouseEvent | KeyboardEvent) {
this._onContextMenuClick(source, event);
this.container.deleteCollectionConfirmationPane.open();
}
@@ -1605,11 +1379,6 @@ export default class Collection implements ViewModels.Collection {
});
}
private _onContextMenuClick(source: ViewModels.Collection, event: MouseEvent | KeyboardEvent) {
this.container.selectedNode(this);
this.contextMenu.hide(source, event);
}
protected _getOfferForCollection(offers: DataModels.Offer[], collection: DataModels.Collection): DataModels.Offer {
return _.find(offers, (offer: DataModels.Offer) => offer.resource.indexOf(collection._rid) >= 0);
}

425
src/Explorer/Tree/CollectionTreeNode.html
View File

@@ -1,425 +0,0 @@
<div class="pointerCursor">
<div
role="treeitem"
data-test="collectionList"
tabindex="0"
class="collectionMenu treeHovermargin highlight"
data-bind="
click: $data.expandCollapseCollection,
clickBubble: false,
contextmenuBubble: false,
css:{
collectionNodeSelected: isCollectionNodeSelected(),
contextmenushowing: $data.contextMenu.visible
},
event: {
keydown: onKeyDown,
keypress: onKeyPress,
contextmenu: $data.contextMenu.show,
drop: $data.onDrop,
dragover: $data.onDragOver
},
attr:{
'aria-expanded': $data.isCollectionExpanded,
'aria-selected': isCollectionNodeSelected()
}"
>
<span
class="collectionList databaseCollChildTextOverflow"
data-bind="
attr: {
title: $data.id()
}"
>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-right.svg"
alt="Show collection properties"
data-bind="visible: !$data.isCollectionExpanded()"
/>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-down.svg"
alt="Hide collection properties"
data-bind="visible: $data.isCollectionExpanded()"
/>
<img
src="/tree-collection.svg"
data-bind="
attr: {
alt: container.addCollectionText
}"
/>
<!--ko text: $data.id-->
<!--/ko-->
</span>
<span
class="menuEllipsis"
data-test="collectionEllipsisMenu"
name="context menu"
role="button"
data-bind="click: $data.contextMenu.show, clickBubble: false"
>&hellip;</span
>
</div>
<!-- Collection node children - Start -->
<div
class="collectionChildList"
role="group"
data-bind="
visible: $data.isCollectionExpanded,
clickBubble: false"
>
<!-- Documents Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="documentsMenu"
data-bind="
visible: $root.isPreferredApiDocumentDB(),
click: $data.onDocumentDBDocumentsClick,
event: {
keydown: onDocumentDBDocumentsKeyDown,
keypress: onDocumentDBDocumentsKeyPress
},
clickBubble: false,
css: {
highlight: true,
collectionNodeSelected: isSubNodeSelected(0)
},
attr:{
'aria-selected': isSubNodeSelected(0)
}"
>
<span class="databaseDocuments">Items</span>
</div>
</div>
<!-- Documents Node - End -->
<!-- Entitites Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="documentsMenu"
data-bind="
visible: $root.isPreferredApiTable(),
click: $data.onTableEntitiesClick,
event: {
keydown: onTableEntitiesKeyDown,
keypress: onTableEntitiesKeyPress
},
clickBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 9
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 9
}"
>
<span class="databaseDocuments">Entities</span>
</div>
</div>
<!-- Entitites Node - End -->
<!-- Rows Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="documentsMenu"
data-bind="
visible: $root.isPreferredApiCassandra(),
click: $data.onTableEntitiesClick,
event: {
keydown: onTableEntitiesKeyDown,
keypress: onTableEntitiesKeyPress
},
clickBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 9
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 9
}"
>
<span class="databaseDocuments">Rows</span>
</div>
</div>
<!-- Rows Node - End -->
<!-- Graph Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="documentsMenu"
data-bind="
visible: $root.isPreferredApiGraph,
click: $data.onGraphDocumentsClick,
event: {
keydown: onGraphDocumentsKeyDown,
keypress: onGraphDocumentsKeyPress
},
clickBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 6
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 6
}"
>
<span class="databaseDocuments">Graph</span>
</div>
</div>
<!-- Graph Node - End -->
<!-- MongoDB Documents Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="documentsMenu"
data-bind="
visible: $root.isPreferredApiMongoDB,
click: $data.onMongoDBDocumentsClick,
event: {
keydown: onMongoDBDocumentsKeyDown,
keypress: onMongoDBDocumentsKeyPress
},
clickBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 0
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 0
}"
>
<span class="databaseDocuments">Documents</span>
</div>
</div>
<!-- MongoDB Documents Node - End -->
<!-- Scale & Setings Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
data-bind="
click: $data.onSettingsClick,
event: {
keydown: onSettingsKeyDown,
keypress: onSettingsKeyPress
},
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 1
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 1
}"
>
<span class="databaseDocuments">
<!-- ko if: !$data.database.isDatabaseShared() -->
Scale & Settings
<!-- /ko -->
<!-- ko if: $data.database.isDatabaseShared() -->
Settings
<!-- /ko -->
</span>
</div>
</div>
<!-- Scale & Setings Node - End -->
<!-- Stored Procedures Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="storedProcedureMenu highlight"
data-bind="
click: $data.expandCollapseStoredProcedures,
event: {
keydown: onStoredProceduresKeyDown,
keypress: onStoredProceduresKeyPress
},
css: {
collectionNodeSelected: !isStoredProceduresExpanded() && isSubNodeSelected(2)
},
attr:{
'aria-expanded': $data.isStoredProceduresExpanded(),
'aria-selected': !isStoredProceduresExpanded() && isSubNodeSelected(2)
},
visible: showStoredProcedures"
>
<span
class="collectionMenuChildren"
data-bind="
attr: {
title: $data.id()
}"
>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-right.svg"
alt="Show storedprocedures properties"
data-bind="visible: !$data.isStoredProceduresExpanded()"
/>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-down.svg"
alt="Hide storedprocedures properties"
data-bind="visible: $data.isStoredProceduresExpanded()"
/>
Stored Procedures
</span>
</div>
<div
class="storedUdfTriggerMenu"
data-bind=" visible: $data.isStoredProceduresExpanded(), foreach: $data.storedProcedures"
>
<stored-procedure-node params="{data: $data}"></stored-procedure-node>
</div>
</div>
<!-- Stored Procedures Node - End -->
<!-- User Defined Functions Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="userDefinedMenu highlight"
data-bind="
click: $data.expandCollapseUserDefinedFunctions,
event: {
keydown: onUserDefinedFunctionsKeyDown,
keypress: onUserDefinedFunctionsKeyPress
},
css: {
collectionNodeSelected: !isUserDefinedFunctionsExpanded() && isSubNodeSelected(3)
},
attr:{
'aria-expanded': $data.isUserDefinedFunctionsExpanded(),
'aria-selected': !isUserDefinedFunctionsExpanded() && isSubNodeSelected(3)
},
visible: showUserDefinedFunctions"
>
<div>
<span
class="collectionMenuChildren"
data-bind="
attr: {
title: $data.id()
}"
>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-right.svg"
alt="Show userdefinedfunctions properties"
data-bind="visible: !$data.isUserDefinedFunctionsExpanded()"
/>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-down.svg"
alt="Hide userdefinedfunctions properties"
data-bind="visible: $data.isUserDefinedFunctionsExpanded()"
/>
User Defined Functions
</span>
</div>
</div>
<div
class="storedUdfTriggerMenu"
data-bind="visible: $data.isUserDefinedFunctionsExpanded(), foreach: $data.userDefinedFunctions"
>
<user-defined-function-node params="{data: $data}"></user-defined-function-node>
</div>
</div>
<!-- User Defined Functions Node - End -->
<!-- Triggers Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
class="triggersMenu highlight"
data-bind="
click: $data.expandCollapseTriggers,
event: {
keydown: onTriggersKeyDown,
keypress: onTriggersKeyPress
},
css: {
collectionNodeSelected: !isTriggersExpanded() && isSubNodeSelected(4)
},
attr:{
'aria-expanded': $data.isTriggersExpanded(),
'aria-selected': !isTriggersExpanded() && isSubNodeSelected(4)
},
visible: showTriggers"
>
<div>
<span
class="collectionMenuChildren"
data-bind="
attr: {
title: $data.id()
}"
>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-right.svg"
alt="Show Triggers properties"
data-bind="visible: !$data.isTriggersExpanded()"
/>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-down.svg"
alt="Hide Triggers properties"
data-bind="visible: $data.isTriggersExpanded()"
/>
Triggers
</span>
</div>
</div>
<div class="storedUdfTriggerMenu" data-bind="visible: $data.isTriggersExpanded(), foreach: $data.triggers">
<trigger-node params="{data: $data}"></trigger-node>
</div>
</div>
<!-- Triggers Node - End -->
<!-- Conflicts Node - Start -->
<div>
<div
role="treeitem"
tabindex="0"
data-bind="
click: $data.onConflictsClick,
event: {
keypress: onConflictsKeyPress
},
css: {
highlight: true,
collectionNodeSelected: isSubNodeSelected(12)
},
attr:{
'aria-selected': isSubNodeSelected(12)
},
visible: showConflicts"
>
<span class=" databaseDocuments"> Conflicts </span>
</div>
</div>
<!-- Conflicts Node - End -->
</div>
<!-- Collection node children - End -->
</div>

16
src/Explorer/Tree/CollectionTreeNodeContextMenu.html
View File

@@ -1,16 +0,0 @@
<div data-bind="event: { keydown: onMenuKeyDown }">
<div
class="context-menu-background"
data-bind="
visible: $data.contextMenu.visible,
click: $data.contextMenu.hide"
></div>
<div
class="context-menu"
data-test="collectionContextMenu"
data-bind="attr:{ tabindex: $data.contextMenu.tabIndex, id: $data.contextMenu.elementId }, visible: $data.contextMenu.visible, foreach: $data.contextMenu.options"
>
<command-button class="context-menu-option" params="{buttonProps: $data}"></command-button>
</div>
</div>

65
src/Explorer/Tree/Database.ts
View File

@@ -7,11 +7,9 @@ import * as DataModels from "../../Contracts/DataModels";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import DatabaseSettingsTab from "../Tabs/DatabaseSettingsTab";
import Collection from "./Collection";
import ContextMenu from "../Menus/ContextMenu";
import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
import { ContextMenuButtonFactory } from "../ContextMenuButtonFactory";
import { Logger } from "../../Common/Logger";
export default class Database implements ViewModels.Database {
@@ -25,7 +23,6 @@ export default class Database implements ViewModels.Database {
public isDatabaseExpanded: ko.Observable<boolean>;
public isDatabaseShared: ko.Computed<boolean>;
public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
public contextMenu: ViewModels.ContextMenu;
constructor(container: ViewModels.Explorer, data: any, offer: DataModels.Offer) {
this.nodeKind = "Database";
@@ -36,71 +33,12 @@ export default class Database implements ViewModels.Database {
this.offer = ko.observable(offer);
this.collections = ko.observableArray<Collection>();
this.isDatabaseExpanded = ko.observable<boolean>(false);
this.contextMenu = new ContextMenu(this.container, this.rid);
this.contextMenu.options(
ContextMenuButtonFactory.createDatabaseContextMenuButton(container, { databaseId: this.id() })
);
this.selectedSubnodeKind = ko.observable<ViewModels.CollectionTabKind>();
this.isDatabaseShared = ko.pureComputed(() => {
return this.offer && !!this.offer();
});
}
public onKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.key === " " || event.key === "Enter") {
this.expandCollapseDatabase();
return false;
}
return true;
};
public onKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Delete") {
this.onDeleteDatabaseContextMenuClick(source, event);
return false;
}
if (event.key === "ArrowRight") {
this.expandDatabase();
return false;
}
if (event.key === "ArrowLeft") {
this.collapseDatabase();
return false;
}
if (event.key === "Enter") {
this.expandCollapseDatabase();
return false;
}
return true;
};
public onMenuKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Escape") {
this.contextMenu.hide(source, event);
return false;
}
return true;
};
public onSettingsKeyDown = (source: any, event: KeyboardEvent): boolean => {
return true;
};
public onSettingsKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.key === " " || event.key === "Enter") {
this.onSettingsClick();
return false;
}
return true;
};
public onSettingsClick = () => {
this.container.selectedNode(this);
this.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
@@ -262,8 +200,6 @@ export default class Database implements ViewModels.Database {
}
public onDeleteDatabaseContextMenuClick(source: ViewModels.Database, event: MouseEvent | KeyboardEvent) {
source.container.selectedNode(source);
source.contextMenu.hide(source, event);
this.container.deleteDatabaseConfirmationPane.open();
}
@@ -346,7 +282,6 @@ export default class Database implements ViewModels.Database {
}
public openAddCollection(database: Database, event: MouseEvent) {
database.contextMenu.hide(database, event);
database.container.addCollectionPane.databaseId(database.id());
database.container.addCollectionPane.open();
}

110
src/Explorer/Tree/DatabaseTreeNode.html
View File

@@ -1,110 +0,0 @@
<div class="pointerCursor">
<div
role="treeitem"
tabindex="0"
data-test="databaseMenu"
class="databaseMenu treeHovermargin highlight"
data-bind="
click: $data.expandCollapseDatabase,
event: {
keydown: onKeyDown,
keypress: onKeyPress,
contextmenu: $data.contextMenu.show
},
clickBubble: false,
contextmenuBubble: false,
css:{
contextmenushowing: $data.contextMenu.visible,
highlight: true,
databaseNodeSelected: isDatabaseNodeSelected()
},
attr:{
'aria-expanded': $data.isDatabaseExpanded,
'aria-selected': isDatabaseNodeSelected()
}"
>
<span
class="databaseId databaseCollChildTextOverflow"
data-bind="
attr: {
title: $data.id()
}"
>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-right.svg"
alt="Show database properties"
data-bind="visible: !$data.isDatabaseExpanded()"
/>
<img
class="imgiconwidth collectionsTreeCollapseExpand"
src="/Triangle-down.svg"
alt="Hide database properties"
data-bind="visible: $data.isDatabaseExpanded()"
/>
<img src="/Azure-Cosmos-DB.svg" alt="Database" />
<!--ko text: $data.id--><!--/ko-->
</span>
<span
class="menuEllipsis"
data-test="databaseEllipsisMenu"
name="context menu"
role="button"
data-bind="
click: $data.contextMenu.show,
clickBubble: false
"
>&hellip;</span
>
</div>
<div class="databaseList" data-test="databaseList" data-bind="visible: $data.isDatabaseExpanded">
<!-- Scale & Setings Node - Start -->
<div data-bind="visible: $data.isDatabaseShared">
<div
role="treeitem"
class="databaseCollChildTextOverflow treeHovermargin highlight"
tabindex="0"
data-bind="
click: $data.onSettingsClick,
event: {
keydown: onSettingsKeyDown,
keypress: onSettingsKeyPress
},
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 11
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid && $data.selectedSubnodeKind() === 11
}"
>
<span class="databaseDocuments"> Scale </span>
</div>
</div>
<!-- Scale & Setings Node - End -->
<div data-bind="foreach: $data.collections">
<collection-node params="{data: $data}"></collection-node>
<collection-node-context-menu params="{data: $data}"></collection-node-context-menu>
</div>
</div>
<!-- Database Context Menu - Start -->
<div data-bind="event: { keydown: onMenuKeyDown }">
<div
class="context-menu-background"
data-bind="
visible: $data.contextMenu.visible,
click: $data.contextMenu.hide"
></div>
<div
class="context-menu"
data-test="databaseContextMenu"
data-bind="attr:{ tabindex: $data.contextMenu.tabIndex, id: $data.contextMenu.elementId }, visible: $data.contextMenu.visible, foreach: $data.contextMenu.options"
>
<command-button class="context-menu-option" params="{buttonProps: $data}"></command-button>
</div>
</div>
<!-- Database Context Menu - End -->
</div>

11
src/Explorer/Tree/ResourceTree.html
View File

@@ -1,11 +0,0 @@
<div
class="collectionstree"
data-test="resoureTree-collectionsTree"
tabindex="0"
role="tree"
data-bind="attr: { 'aria-label': collectionTitle }"
>
<div class="databaseList" data-bind="foreach: nonSystemDatabases">
<database-node params="{data: $data}"></database-node>
</div>
</div>

6
src/Explorer/Tree/ResourceTreeAdapter.tsx
View File

@@ -301,7 +301,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
onClick: sp.open.bind(sp),
isSelected: () =>
this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.StoredProcedures),
contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(this.container)
contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(this.container, sp)
})),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.StoredProcedures);
@@ -318,7 +318,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
onClick: udf.open.bind(udf),
isSelected: () =>
this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.UserDefinedFunctions),
contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(this.container)
contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(this.container, udf)
})),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.UserDefinedFunctions);
@@ -334,7 +334,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
label: trigger.id(),
onClick: trigger.open.bind(trigger),
isSelected: () => this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.Triggers),
contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(this.container)
contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(this.container, trigger)
})),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Triggers);

41
src/Explorer/Tree/StoredProcedure.ts
View File

@@ -5,9 +5,7 @@ import * as DataModels from "../../Contracts/DataModels";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import StoredProcedureTab from "../Tabs/StoredProcedureTab";
import ContextMenu from "../Menus/ContextMenu";
import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { ContextMenuButtonFactory } from "../ContextMenuButtonFactory";
const sampleStoredProcedureBody: string = `// SAMPLE STORED PROCEDURE
function sample(prefix) {
@@ -44,7 +42,6 @@ export default class StoredProcedure implements ViewModels.StoredProcedure {
public rid: string;
public id: ko.Observable<string>;
public body: ko.Observable<string>;
public contextMenu: ViewModels.ContextMenu;
public isExecuteEnabled: boolean;
constructor(container: ViewModels.Explorer, collection: ViewModels.Collection, data: DataModels.StoredProcedure) {
@@ -56,9 +53,6 @@ export default class StoredProcedure implements ViewModels.StoredProcedure {
this.id = ko.observable(data.id);
this.body = ko.observable(data.body);
this.isExecuteEnabled = this.container.isFeatureEnabled(Constants.Features.executeSproc);
this.contextMenu = new ContextMenu(this.container, this.rid);
this.contextMenu.options(ContextMenuButtonFactory.createStoreProcedureContextMenuButton(container));
}
public static create(source: ViewModels.Collection, event: MouseEvent) {
@@ -89,9 +83,6 @@ export default class StoredProcedure implements ViewModels.StoredProcedure {
// Activate
storedProcedureTab.onTabClick();
// Hide Context Menu (if necessary)
source.contextMenu.hide(source, event);
}
public select() {
@@ -148,10 +139,7 @@ export default class StoredProcedure implements ViewModels.StoredProcedure {
storedProcedureTab.onTabClick();
};
public delete(source: ViewModels.Collection, event: MouseEvent | KeyboardEvent) {
// Hide Context Menu (if necessary)
this.contextMenu.hide(source, event);
public delete() {
if (!window.confirm("Are you sure you want to delete the stored procedure?")) {
return;
}
@@ -192,33 +180,6 @@ export default class StoredProcedure implements ViewModels.StoredProcedure {
});
}
public onKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Delete") {
this.delete(source, event);
return false;
}
return true;
};
public onMenuKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Escape") {
this.contextMenu.hide(source, event);
return false;
}
return true;
};
public onKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.key === " " || event.key === "Enter") {
this.open();
return false;
}
return true;
};
public onFocusAfterExecute(): void {
const focusElement = document.getElementById("execute-storedproc-toggles");
focusElement && focusElement.focus();

63
src/Explorer/Tree/StoredProcedureTreeNode.html
View File

@@ -1,63 +0,0 @@
<div
role="treeitem"
tabindex="0"
class="pointerCursor"
data-bind="
click: $data.open,
event: {
keydown: onKeyDown,
keypress: onKeyPress,
contextmenu: $data.contextMenu.show
},
clickBubble: false,
contextmenuBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid,
contextmenushowing: $data.contextMenu.visible
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid
}"
>
<div class="storedChildMenu treeChildMenu">
<div
class="childMenu"
data-bind="
attr: {
title: $data.id()
}"
>
<!--ko text: $data.id-->
<!--/ko-->
</div>
<span
class="menuEllipsis"
name="context menu"
role="button"
data-bind="
click: $data.contextMenu.show,
clickBubble: false
"
>&hellip;</span
>
</div>
</div>
<!-- Stored Procedure Node Context Menu - Start -->
<div data-bind="event: { keydown: onMenuKeyDown }">
<div
class="context-menu-background"
data-bind="
visible: $data.contextMenu.visible,
click: $data.contextMenu.hide"
></div>
<div
class="context-menu"
data-bind="attr:{ tabindex: $data.contextMenu.tabIndex, id: $data.contextMenu.elementId }, visible: $data.contextMenu.visible, foreach: $data.contextMenu.options"
>
<command-button class="context-menu-option" params="{buttonProps: $data}"></command-button>
</div>
</div>
<!-- Stored Procedure Node Context Menu - End -->

76
src/Explorer/Tree/TreeComponents.ts
View File

@@ -1,76 +0,0 @@
import resourceTreeTemplate from "./ResourceTree.html";
import databaseTreeNoteTemplate from "./DatabaseTreeNode.html";
import collectionTreeNodeTemplate from "./CollectionTreeNode.html";
import storedProcedureTreeNodeTemplate from "./StoredProcedureTreeNode.html";
import userDefinedFunctionTreeNodeTemplate from "./UserDefinedFunctionTreeNode.html";
import triggerTreeNodeTemplate from "./TriggerTreeNode.html";
import collectionTreeNodeContextMenuTemplate from "./CollectionTreeNodeContextMenu.html";
export class TreeNodeComponent {
constructor(data: any) {
return data.data;
}
}
export class ResourceTree {
constructor() {
return {
viewModel: TreeNodeComponent,
template: resourceTreeTemplate
};
}
}
export class DatabaseTreeNode {
constructor() {
return {
viewModel: TreeNodeComponent,
template: databaseTreeNoteTemplate
};
}
}
export class CollectionTreeNode {
constructor() {
return {
viewModel: TreeNodeComponent,
template: collectionTreeNodeTemplate
};
}
}
export class StoredProcedureTreeNode {
constructor() {
return {
viewModel: TreeNodeComponent,
template: storedProcedureTreeNodeTemplate
};
}
}
export class UserDefinedFunctionTreeNode {
constructor() {
return {
viewModel: TreeNodeComponent,
template: userDefinedFunctionTreeNodeTemplate
};
}
}
export class TriggerTreeNode {
constructor() {
return {
viewModel: TreeNodeComponent,
template: triggerTreeNodeTemplate
};
}
}
export class CollectionTreeNodeContextMenu {
constructor() {
return {
viewModel: TreeNodeComponent,
template: collectionTreeNodeContextMenuTemplate
};
}
}

41
src/Explorer/Tree/Trigger.ts
View File

@@ -5,9 +5,7 @@ import * as DataModels from "../../Contracts/DataModels";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import Collection from "./Collection";
import TriggerTab from "../Tabs/TriggerTab";
import ContextMenu from "../Menus/ContextMenu";
import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { ContextMenuButtonFactory } from "../ContextMenuButtonFactory";
export default class Trigger implements ViewModels.Trigger {
public nodeKind: string;
@@ -19,7 +17,6 @@ export default class Trigger implements ViewModels.Trigger {
public body: ko.Observable<string>;
public triggerType: ko.Observable<string>;
public triggerOperation: ko.Observable<string>;
public contextMenu: ViewModels.ContextMenu;
constructor(container: ViewModels.Explorer, collection: ViewModels.Collection, data: any) {
this.nodeKind = "Trigger";
@@ -31,9 +28,6 @@ export default class Trigger implements ViewModels.Trigger {
this.body = ko.observable(data.body);
this.triggerOperation = ko.observable(data.triggerOperation);
this.triggerType = ko.observable(data.triggerType);
this.contextMenu = new ContextMenu(this.container, this.rid);
this.contextMenu.options(ContextMenuButtonFactory.createTriggerContextMenuButton(container));
}
public select() {
@@ -78,9 +72,6 @@ export default class Trigger implements ViewModels.Trigger {
// Activate
triggerTab.onTabClick();
// Hide Context Menu (if necessary)
source.contextMenu.hide(source, event);
}
public open = () => {
@@ -125,10 +116,7 @@ export default class Trigger implements ViewModels.Trigger {
triggerTab.onTabClick();
};
public delete(source: Collection, event: MouseEvent | KeyboardEvent) {
// Hide Context Menu (if necessary)
this.contextMenu.hide(source, event);
public delete() {
if (!window.confirm("Are you sure you want to delete the trigger?")) {
return;
}
@@ -150,31 +138,4 @@ export default class Trigger implements ViewModels.Trigger {
reason => {}
);
}
public onKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Delete") {
this.delete(source, event);
return false;
}
return true;
};
public onMenuKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Escape") {
this.contextMenu.hide(source, event);
return false;
}
return true;
};
public onKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.key === " " || event.key === "Enter") {
this.open();
return false;
}
return true;
};
}

62
src/Explorer/Tree/TriggerTreeNode.html
View File

@@ -1,62 +0,0 @@
<div
role="treeitem"
tabindex="0"
class="pointerCursor"
data-bind="
click: $data.open,
event: {
keydown: onKeyDown,
keypress: onKeyPress,
contextmenu: $data.contextMenu.show
},
clickBubble: false,
contextmenuBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid,
contextmenushowing: $data.contextMenu.visible
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid
}"
>
<div class="triggersChildMenu treeChildMenu">
<div
class="childMenu"
data-bind="
attr: {
title: $data.id()
}"
>
<!--ko text: $data.id-->
<!--/ko-->
</div>
<span
class="menuEllipsis"
name="context menu"
role="button"
data-bind="
click: $data.contextMenu.show,
clickBubble: false
"
>&hellip;</span
>
</div>
</div>
<!-- Trigger Node Context Menu - Start -->
<div data-bind="event: { keydown: onMenuKeyDown }">
<div
class="context-menu-background"
data-bind="
visible: $data.contextMenu.visible,
click: $data.contextMenu.hide"
></div>
<div
class="context-menu"
data-bind="attr:{ tabindex: $data.contextMenu.tabIndex, id: $data.contextMenu.elementId }, visible: $data.contextMenu.visible, foreach: $data.contextMenu.options"
>
<command-button class="context-menu-option" params="{buttonProps: $data}"></command-button>
</div>
</div>

41
src/Explorer/Tree/UserDefinedFunction.ts
View File

@@ -4,9 +4,7 @@ import * as Constants from "../../Common/Constants";
import * as DataModels from "../../Contracts/DataModels";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import UserDefinedFunctionTab from "../Tabs/UserDefinedFunctionTab";
import ContextMenu from "../Menus/ContextMenu";
import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { ContextMenuButtonFactory } from "../ContextMenuButtonFactory";
import Collection from "./Collection";
export default class UserDefinedFunction implements ViewModels.UserDefinedFunction {
@@ -17,7 +15,6 @@ export default class UserDefinedFunction implements ViewModels.UserDefinedFuncti
public rid: string;
public id: ko.Observable<string>;
public body: ko.Observable<string>;
public contextMenu: ViewModels.ContextMenu;
constructor(container: ViewModels.Explorer, collection: ViewModels.Collection, data: DataModels.UserDefinedFunction) {
this.nodeKind = "UserDefinedFunction";
@@ -28,9 +25,6 @@ export default class UserDefinedFunction implements ViewModels.UserDefinedFuncti
this.rid = data._rid;
this.id = ko.observable(data.id);
this.body = ko.observable(data.body);
this.contextMenu = new ContextMenu(this.container, this.rid);
this.contextMenu.options(ContextMenuButtonFactory.createUserDefinedFunctionContextMenuButton(container));
}
public static create(source: ViewModels.Collection, event: MouseEvent) {
@@ -61,9 +55,6 @@ export default class UserDefinedFunction implements ViewModels.UserDefinedFuncti
// Activate
userDefinedFunctionTab.onTabClick();
// Hide Context Menu (if necessary)
source.contextMenu.hide(source, event);
}
public open = () => {
@@ -115,10 +106,7 @@ export default class UserDefinedFunction implements ViewModels.UserDefinedFuncti
});
}
public delete(source: Collection, event: MouseEvent | KeyboardEvent) {
// Hide Context Menu (if necessary)
this.contextMenu.hide(source, event);
public delete() {
if (!window.confirm("Are you sure you want to delete the user defined function?")) {
return;
}
@@ -137,31 +125,4 @@ export default class UserDefinedFunction implements ViewModels.UserDefinedFuncti
reason => {}
);
}
public onKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Delete") {
this.delete(source, event);
return false;
}
return true;
};
public onMenuKeyDown = (source: any, event: KeyboardEvent): boolean => {
if (event.key === "Escape") {
this.contextMenu.hide(source, event);
return false;
}
return true;
};
public onKeyPress = (source: any, event: KeyboardEvent): boolean => {
if (event.key === " " || event.key === "Enter") {
this.open();
return false;
}
return true;
};
}

62
src/Explorer/Tree/UserDefinedFunctionTreeNode.html
View File

@@ -1,62 +0,0 @@
<div
role="treeitem"
tabindex="0"
class="pointerCursor"
data-bind="
click: $data.open,
event: {
keydown: onKeyDown,
keypress: onKeyPress,
contextmenu: $data.contextMenu.show
},
clickBubble: false,
contextmenuBubble: false,
css: {
highlight: true,
collectionNodeSelected: $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid,
contextmenushowing: $data.contextMenu.visible
},
attr:{
'aria-selected': $root.selectedNode && $root.selectedNode() && $root.selectedNode().rid === $data.rid
}"
>
<div class="userDefinedchildMenu treeChildMenu">
<div
class="childMenu"
data-bind="
attr: {
title: $data.id()
}"
>
<!--ko text: $data.id-->
<!--/ko-->
</div>
<span
class="menuEllipsis"
name="context menu"
role="button"
data-bind="
click: $data.contextMenu.show,
clickBubble: false
"
>&hellip;</span
>
</div>
</div>
<!-- User Defined Function Node Context Menu - Start -->
<div data-bind="event: { keydown: onMenuKeyDown }">
<div
class="context-menu-background"
data-bind="
visible: $data.contextMenu.visible,
click: $data.contextMenu.hide"
></div>
<div
class="context-menu"
data-bind="attr:{ tabindex: $data.contextMenu.tabIndex, id: $data.contextMenu.elementId }, visible: $data.contextMenu.visible, foreach: $data.contextMenu.options"
>
<command-button class="context-menu-option" params="{buttonProps: $data}"></command-button>
</div>
</div>
<!-- User Defined Function Node Context Menu - End -->