random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-24 22:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move tabs manager to zustand (#915)

Browse Source
This commit is contained in:
victor-meng 2021-07-08 21:32:22 -07:00 committed by GitHub
parent f4eef1b61b
commit f8ab0a82e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 609 additions and 663 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Explorer/ContextMenuButtonFactory.tsx
View File

@ -50,7 +50,10 @@ export const createDatabaseContextMenu = (container: Explorer, databaseId: strin
onClick: () =>
useSidePanel
.getState()
.openSidePanel("Delete " + getDatabaseName(), <DeleteDatabaseConfirmationPanel explorer={container} />),
.openSidePanel(
"Delete " + getDatabaseName(),
<DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />
),
label: `Delete ${getDatabaseName()}`,
styleClass: "deleteDatabaseMenuItem",
});
@ -126,7 +129,10 @@ export const createCollectionContextMenuButton = (
onClick: () =>
useSidePanel
.getState()
.openSidePanel("Delete " + getCollectionName(), <DeleteCollectionConfirmationPane explorer={container} />),
.openSidePanel(
"Delete " + getCollectionName(),
<DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />
),
label: `Delete ${getCollectionName()}`,
styleClass: "deleteCollectionMenuItem",
});

10
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@ -31,7 +31,6 @@ exports[`SettingsComponent renders 1`] = `
"_isInitializingNotebooks": false,
"_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isSchemaEnabled": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
@ -49,10 +48,6 @@ exports[`SettingsComponent renders 1`] = `
"container": [Circular],
"parameters": [Function],
},
"tabsManager": TabsManager {
"activeTab": [Function],
"openedTabs": [Function],
},
},
"databaseId": "test",
"defaultTtl": [Function],
@ -107,7 +102,6 @@ exports[`SettingsComponent renders 1`] = `
"_isInitializingNotebooks": false,
"_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isSchemaEnabled": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
@ -125,10 +119,6 @@ exports[`SettingsComponent renders 1`] = `
"container": [Circular],
"parameters": [Function],
},
"tabsManager": TabsManager {
"activeTab": [Function],
"openedTabs": [Function],
},
},
"databaseId": "test",
"defaultTtl": [Function],

262
src/Explorer/Explorer.tsx
View File

@ -1,6 +1,5 @@
import { IChoiceGroupProps } from "@fluentui/react";
import * as ko from "knockout";
import Q from "q";
import React from "react";
import _ from "underscore";
import { AuthType } from "../AuthType";
@ -17,6 +16,7 @@ import * as DataModels from "../Contracts/DataModels";
import * as ViewModels from "../Contracts/ViewModels";
import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
import { useSidePanel } from "../hooks/useSidePanel";
import { useTabs } from "../hooks/useTabs";
import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
import { ExplorerSettings } from "../Shared/ExplorerSettings";
import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
@ -59,7 +59,7 @@ import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
import { TabsManager } from "./Tabs/TabsManager";
import TabsBase from "./Tabs/TabsBase";
import TerminalTab from "./Tabs/TerminalTab";
import Database from "./Tree/Database";
import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
@ -73,10 +73,6 @@ BindingHandlersRegisterer.registerBindingHandlers();
// Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
var tmp = ComponentRegisterer;
export interface ExplorerParams {
tabsManager: TabsManager;
}
export default class Explorer {
public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
public queriesClient: QueriesClient;
@ -90,10 +86,8 @@ export default class Explorer {
// Tabs
public isTabsContentExpanded: ko.Observable<boolean>;
public tabsManager: TabsManager;
public gitHubOAuthService: GitHubOAuthService;
public isSchemaEnabled: ko.Computed<boolean>;
// Notebooks
public notebookManager?: NotebookManager;
@ -106,7 +100,7 @@ export default class Explorer {
private static readonly MaxNbDatabasesToAutoExpand = 5;
constructor(params?: ExplorerParams) {
constructor() {
const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
dataExplorerArea: Constants.Areas.ResourceTree,
});
@ -117,7 +111,6 @@ export default class Explorer {
);
this.queriesClient = new QueriesClient(this);
this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
useSelectedNode.subscribe(() => {
// Make sure switching tabs restores tabs display
@ -136,13 +129,15 @@ export default class Explorer {
return isCapabilityEnabled("EnableMongo");
});
this.tabsManager = params?.tabsManager ?? new TabsManager();
this.tabsManager.openedTabs.subscribe((tabs) => {
if (tabs.length === 0) {
useTabs.subscribe(
(openedTabs: TabsBase[]) => {
if (openedTabs.length === 0) {
useSelectedNode.getState().setSelectedNode(undefined);
useCommandBar.getState().setContextButtons([]);
}
});
},
(state) => state.openedTabs
);
this.isTabsContentExpanded = ko.observable(false);
@ -283,35 +278,26 @@ export default class Explorer {
// TODO: return result
}
public refreshDatabaseForResourceToken(): Promise<void> {
public async refreshDatabaseForResourceToken(): Promise<void> {
const databaseId = userContext.parsedResourceToken?.databaseId;
const collectionId = userContext.parsedResourceToken?.collectionId;
if (!databaseId || !collectionId) {
return Promise.reject();
return;
}
return readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
const collection: DataModels.Collection = await readCollection(databaseId, collectionId);
const resourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection);
useDatabases.setState({ resourceTokenCollection });
useSelectedNode.getState().setSelectedNode(resourceTokenCollection);
});
}
public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
public async refreshAllDatabases(): Promise<void> {
const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
dataExplorerArea: Constants.Areas.ResourceTree,
});
let resourceTreeStartKey: number = null;
if (isInitialLoad) {
resourceTreeStartKey = TelemetryProcessor.traceStart(Action.LoadResourceTree, {
dataExplorerArea: Constants.Areas.ResourceTree,
});
}
// TODO: Refactor
const deferred: Q.Deferred<any> = Q.defer();
readDatabases().then(
(databases: DataModels.Database[]) => {
try {
const databases: DataModels.Database[] = await readDatabases();
TelemetryProcessor.traceSuccess(
Action.LoadDatabases,
{
@ -319,20 +305,17 @@ export default class Explorer {
},
startKey
);
const deltaDatabases = this.getDeltaDatabases(databases);
this.addDatabasesToList(deltaDatabases.toAdd);
this.deleteDatabasesFromList(deltaDatabases.toDelete);
this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
() => {
deferred.resolve();
},
(reason) => {
deferred.reject(reason);
}
const currentDatabases = useDatabases.getState().databases;
const deltaDatabases = this.getDeltaDatabases(databases, currentDatabases);
let updatedDatabases = currentDatabases.filter(
(database) => !deltaDatabases.toDelete.some((deletedDatabase) => deletedDatabase.id() === database.id())
);
},
(error) => {
deferred.reject(error);
updatedDatabases = [...updatedDatabases, ...deltaDatabases.toAdd].sort((db1, db2) =>
db1.id().localeCompare(db2.id())
);
useDatabases.setState({ databases: updatedDatabases });
await this.refreshAndExpandNewDatabases(deltaDatabases.toAdd, currentDatabases);
} catch (error) {
const errorMessage = getErrorMessage(error);
TelemetryProcessor.traceFailure(
Action.LoadDatabases,
@ -345,34 +328,6 @@ export default class Explorer {
);
logConsoleError(`Error while refreshing databases: ${errorMessage}`);
}
);
return deferred.promise.then(
() => {
if (resourceTreeStartKey != null) {
TelemetryProcessor.traceSuccess(
Action.LoadResourceTree,
{
dataExplorerArea: Constants.Areas.ResourceTree,
},
resourceTreeStartKey
);
}
},
(error) => {
if (resourceTreeStartKey != null) {
TelemetryProcessor.traceFailure(
Action.LoadResourceTree,
{
dataExplorerArea: Constants.Areas.ResourceTree,
error: getErrorMessage(error),
errorStack: getErrorStack(error),
},
resourceTreeStartKey
);
}
}
);
}
public onRefreshDatabasesKeyPress = (source: any, event: KeyboardEvent): boolean => {
@ -513,69 +468,13 @@ export default class Explorer {
}
};
private refreshAndExpandNewDatabases(newDatabases: ViewModels.Database[]): Q.Promise<void> {
// we reload collections for all databases so the resource tree reflects any collection-level changes
// i.e addition of stored procedures, etc.
const deferred: Q.Deferred<void> = Q.defer<void>();
let loadCollectionPromises: Q.Promise<void>[] = [];
// If the user has a lot of databases, only load expanded databases.
const databases = useDatabases.getState().databases;
const databasesToLoad =
databases.length <= Explorer.MaxNbDatabasesToAutoExpand
? databases
: databases.filter((db) => db.isDatabaseExpanded() || db.id() === Constants.SavedQueries.DatabaseName);
const startKey: number = TelemetryProcessor.traceStart(Action.LoadCollections, {
dataExplorerArea: Constants.Areas.ResourceTree,
});
databasesToLoad.forEach(async (database: ViewModels.Database) => {
await database.loadCollections();
const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
if (isNewDatabase) {
database.expandDatabase();
}
this.tabsManager.refreshActiveTab((tab) => tab.collection && tab.collection.getDatabase().id() === database.id());
});
Q.all(loadCollectionPromises).done(
() => {
deferred.resolve();
TelemetryProcessor.traceSuccess(
Action.LoadCollections,
{ dataExplorerArea: Constants.Areas.ResourceTree },
startKey
);
},
(error: any) => {
deferred.reject(error);
TelemetryProcessor.traceFailure(
Action.LoadCollections,
{
dataExplorerArea: Constants.Areas.ResourceTree,
error: getErrorMessage(error),
errorStack: getErrorStack(error),
},
startKey
);
}
);
return deferred.promise;
}
private _initSettings() {
if (!ExplorerSettings.hasSettingsDefined()) {
ExplorerSettings.createDefaultSettings();
}
}
private getDeltaDatabases(
updatedDatabaseList: DataModels.Database[]
updatedDatabaseList: DataModels.Database[],
databases: ViewModels.Database[]
): {
toAdd: ViewModels.Database[];
toDelete: ViewModels.Database[];
} {
const databases = useDatabases.getState().databases;
const newDatabases: DataModels.Database[] = _.filter(updatedDatabaseList, (database: DataModels.Database) => {
const databaseExists = _.some(
databases,
@ -587,8 +486,8 @@ export default class Explorer {
(newDatabase: DataModels.Database) => new Database(this, newDatabase)
);
let databasesToDelete: ViewModels.Database[] = [];
ko.utils.arrayForEach(databases, (database: ViewModels.Database) => {
const databasesToDelete: ViewModels.Database[] = [];
databases.forEach((database: ViewModels.Database) => {
const databasePresentInUpdatedList = _.some(
updatedDatabaseList,
(db: DataModels.Database) => db.id === database.id()
@ -601,13 +500,58 @@ export default class Explorer {
return { toAdd: databasesToAdd, toDelete: databasesToDelete };
}
private addDatabasesToList(databases: ViewModels.Database[]): void {
useDatabases.getState().addDatabases(databases);
private async refreshAndExpandNewDatabases(
newDatabases: ViewModels.Database[],
databases: ViewModels.Database[]
): Promise<void> {
// we reload collections for all databases so the resource tree reflects any collection-level changes
// i.e addition of stored procedures, etc.
// If the user has a lot of databases, only load expanded databases.
const databasesToLoad =
databases.length <= Explorer.MaxNbDatabasesToAutoExpand
? databases
: databases.filter((db) => db.isDatabaseExpanded() || db.id() === Constants.SavedQueries.DatabaseName);
const startKey: number = TelemetryProcessor.traceStart(Action.LoadCollections, {
dataExplorerArea: Constants.Areas.ResourceTree,
});
try {
await Promise.all(
databasesToLoad.map(async (database: ViewModels.Database) => {
await database.loadCollections();
const isNewDatabase: boolean = _.some(newDatabases, (db: ViewModels.Database) => db.id() === database.id());
if (isNewDatabase) {
database.expandDatabase();
}
useTabs
.getState()
.refreshActiveTab((tab) => tab.collection && tab.collection.getDatabase().id() === database.id());
TelemetryProcessor.traceSuccess(
Action.LoadCollections,
{ dataExplorerArea: Constants.Areas.ResourceTree },
startKey
);
})
);
} catch (error) {
TelemetryProcessor.traceFailure(
Action.LoadCollections,
{
dataExplorerArea: Constants.Areas.ResourceTree,
error: getErrorMessage(error),
errorStack: getErrorStack(error),
},
startKey
);
}
}
private deleteDatabasesFromList(databasesToRemove: ViewModels.Database[]): void {
const deleteDatabase = useDatabases.getState().deleteDatabase;
databasesToRemove.forEach((database) => deleteDatabase(database));
private _initSettings() {
if (!ExplorerSettings.hasSettingsDefined()) {
ExplorerSettings.createDefaultSettings();
}
}
public uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
@ -750,7 +694,9 @@ export default class Explorer {
throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
}
const notebookTabs = this.tabsManager.getTabs(
const notebookTabs = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.NotebookV2,
(tab) =>
(tab as NotebookV2Tab).notebookPath &&
@ -759,7 +705,7 @@ export default class Explorer {
let notebookTab = notebookTabs && notebookTabs[0];
if (notebookTab) {
this.tabsManager.activateTab(notebookTab);
useTabs.getState().activateTab(notebookTab);
} else {
const options: NotebookTabOptions = {
account: userContext.databaseAccount,
@ -778,7 +724,7 @@ export default class Explorer {
try {
const NotebookTabV2 = await import(/* webpackChunkName: "NotebookV2Tab" */ "./Tabs/NotebookV2Tab");
notebookTab = new NotebookTabV2.default(options);
this.tabsManager.activateNewTab(notebookTab);
useTabs.getState().activateNewTab(notebookTab);
} catch (reason) {
console.error("Import NotebookV2Tab failed!", reason);
return false;
@ -796,19 +742,17 @@ export default class Explorer {
}
// Don't delete if tab is open to avoid accidental deletion
const openedNotebookTabs = this.tabsManager.getTabs(
ViewModels.CollectionTabKind.NotebookV2,
(tab: NotebookV2Tab) => {
const openedNotebookTabs = useTabs
.getState()
.getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
}
);
});
if (openedNotebookTabs.length > 0) {
this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
} else {
useSidePanel.getState().openSidePanel(
"Rename Notebook",
<StringInputPane
explorer={this}
closePanel={() => {
useSidePanel.getState().closeSidePanel();
this.resourceTree.triggerRender();
@ -839,7 +783,6 @@ export default class Explorer {
useSidePanel.getState().openSidePanel(
"Create new directory",
<StringInputPane
explorer={this}
closePanel={() => {
useSidePanel.getState().closeSidePanel();
this.resourceTree.triggerRender();
@ -927,12 +870,11 @@ export default class Explorer {
}
// Don't delete if tab is open to avoid accidental deletion
const openedNotebookTabs = this.tabsManager.getTabs(
ViewModels.CollectionTabKind.NotebookV2,
(tab: NotebookV2Tab) => {
const openedNotebookTabs = useTabs
.getState()
.getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
}
);
});
if (openedNotebookTabs.length > 0) {
this.showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
return Promise.reject();
@ -1034,10 +976,9 @@ export default class Explorer {
throw new Error("Terminal kind: ${kind} not supported");
}
const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(
ViewModels.CollectionTabKind.Terminal,
(tab) => tab.tabTitle() === title
) as TerminalTab[];
const terminalTabs: TerminalTab[] = useTabs
.getState()
.getTabs(ViewModels.CollectionTabKind.Terminal, (tab) => tab.tabTitle() === title) as TerminalTab[];
let index = 1;
if (terminalTabs.length > 0) {
@ -1058,7 +999,7 @@ export default class Explorer {
index: index,
});
this.tabsManager.activateNewTab(newTab);
useTabs.getState().activateNewTab(newTab);
}
public async openGallery(
@ -1069,14 +1010,15 @@ export default class Explorer {
) {
const title = "Gallery";
const GalleryTab = await (await import(/* webpackChunkName: "GalleryTab" */ "./Tabs/GalleryTab")).default;
const galleryTab = this.tabsManager
const galleryTab = useTabs
.getState()
.getTabs(ViewModels.CollectionTabKind.Gallery)
.find((tab) => tab.tabTitle() == title);
if (galleryTab instanceof GalleryTab) {
this.tabsManager.activateTab(galleryTab);
useTabs.getState().activateTab(galleryTab);
} else {
this.tabsManager.activateNewTab(
useTabs.getState().activateNewTab(
new GalleryTab(
{
tabKind: ViewModels.CollectionTabKind.Gallery,
@ -1116,7 +1058,7 @@ export default class Explorer {
}
private refreshCommandBarButtons(): void {
const activeTab = this.tabsManager.activeTab();
const activeTab = useTabs.getState().activeTab;
if (activeTab) {
activeTab.onActivate(); // TODO only update tabs buttons?
} else {
@ -1208,7 +1150,7 @@ export default class Explorer {
public async refreshExplorer(): Promise<void> {
userContext.authType === AuthType.ResourceToken
? this.refreshDatabaseForResourceToken()
: this.refreshAllDatabases(true);
: this.refreshAllDatabases();
await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
const isNotebookEnabled: boolean =
userContext.authType !== AuthType.ResourceToken &&

3
src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
View File

@ -8,6 +8,7 @@ import * as React from "react";
import create, { UseStore } from "zustand";
import { StyleConstants } from "../../../Common/Constants";
import * as ViewModels from "../../../Contracts/ViewModels";
import { useTabs } from "../../../hooks/useTabs";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
import Explorer from "../../Explorer";
import { useSelectedNode } from "../../useSelectedNode";
@ -53,7 +54,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
if (container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
}

9
src/Explorer/Notebook/NotebookComponent/epics.ts
View File

@ -34,6 +34,7 @@ import {
import { webSocket } from "rxjs/webSocket";
import * as Constants from "../../../Common/Constants";
import { Areas } from "../../../Common/Constants";
import { useTabs } from "../../../hooks/useTabs";
import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
@ -776,7 +777,9 @@ const closeUnsupportedMimetypesEpic = (
if (explorer && !TextFile.handles(mimetype)) {
const filepath = action.payload.filepath;
// Close tab and show error message
explorer.tabsManager.closeTabsByComparator(
useTabs
.getState()
.closeTabsByComparator(
(tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
);
const msg = `${filepath} cannot be rendered. Please download the file, in order to view it outside of Data Explorer.`;
@ -804,7 +807,9 @@ const closeContentFailedToFetchEpic = (
if (explorer) {
const filepath = action.payload.filepath;
// Close tab and show error message
explorer.tabsManager.closeTabsByComparator(
useTabs
.getState()
.closeTabsByComparator(
(tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
);
const msg = `Failed to load file: ${filepath}.`;

3
src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.tsx
View File

@ -4,6 +4,7 @@ import { logError } from "../../../Common/Logger";
import { Query } from "../../../Contracts/DataModels";
import { Collection } from "../../../Contracts/ViewModels";
import { useSidePanel } from "../../../hooks/useSidePanel";
import { useTabs } from "../../../hooks/useTabs";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../../UserContext";
@ -36,7 +37,7 @@ export const BrowseQueriesPane: FunctionComponent<BrowseQueriesPaneProps> = ({
selectedCollection.onNewQueryClick(selectedCollection, undefined, savedQuery.query);
}
const queryTab = explorer && (explorer.tabsManager.activeTab() as NewQueryTab);
const queryTab = useTabs.getState().activeTab as NewQueryTab;
queryTab.tabTitle(savedQuery.queryName);
queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);

16
src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx
View File

@ -10,7 +10,6 @@ import { Collection, Database } from "../../../Contracts/ViewModels";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
import { updateUserContext } from "../../../UserContext";
import Explorer from "../../Explorer";
import { useDatabases } from "../../useDatabases";
import { useSelectedNode } from "../../useSelectedNode";
import { DeleteCollectionConfirmationPane } from "./DeleteCollectionConfirmationPane";
@ -53,10 +52,7 @@ describe("Delete Collection Confirmation Pane", () => {
describe("shouldRecordFeedback()", () => {
it("should return true if last collection and database does not have shared throughput else false", () => {
const fakeExplorer = new Explorer();
fakeExplorer.refreshAllDatabases = () => undefined;
const wrapper = shallow(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
const wrapper = shallow(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
const database = { id: ko.observable("testDB") } as Database;
@ -65,11 +61,11 @@ describe("Delete Collection Confirmation Pane", () => {
database.isDatabaseShared = ko.computed(() => false);
useDatabases.getState().addDatabases([database]);
useSelectedNode.getState().setSelectedNode(database);
wrapper.setProps({ explorer: fakeExplorer });
wrapper.setProps({});
expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
database.isDatabaseShared = ko.computed(() => true);
wrapper.setProps({ explorer: fakeExplorer });
wrapper.setProps({});
expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
});
});
@ -77,8 +73,6 @@ describe("Delete Collection Confirmation Pane", () => {
describe("submit()", () => {
const selectedCollectionId = "testCol";
const databaseId = "testDatabase";
const fakeExplorer = {} as Explorer;
fakeExplorer.refreshAllDatabases = () => undefined;
const database = { id: ko.observable(databaseId) } as Database;
const collection = {
id: ko.observable(selectedCollectionId),
@ -115,7 +109,7 @@ describe("Delete Collection Confirmation Pane", () => {
});
it("should call delete collection", () => {
const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
const wrapper = mount(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.exists("#confirmCollectionId")).toBe(true);
@ -132,7 +126,7 @@ describe("Delete Collection Confirmation Pane", () => {
});
it("should record feedback", async () => {
const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
const wrapper = mount(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
expect(wrapper.exists("#confirmCollectionId")).toBe(true);
wrapper
.find("#confirmCollectionId")

15
src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
View File

@ -6,23 +6,23 @@ import DeleteFeedback from "../../../Common/DeleteFeedback";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
import { Collection } from "../../../Contracts/ViewModels";
import { useSidePanel } from "../../../hooks/useSidePanel";
import { useTabs } from "../../../hooks/useTabs";
import { DefaultExperienceUtility } from "../../../Shared/DefaultExperienceUtility";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../../UserContext";
import { getCollectionName } from "../../../Utils/APITypeUtils";
import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
import Explorer from "../../Explorer";
import { useDatabases } from "../../useDatabases";
import { useSelectedNode } from "../../useSelectedNode";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
export interface DeleteCollectionConfirmationPaneProps {
explorer: Explorer;
refreshDatabases: () => Promise<void>;
}
export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectionConfirmationPaneProps> = ({
explorer,
refreshDatabases,
}: DeleteCollectionConfirmationPaneProps) => {
const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
@ -31,8 +31,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
const [isExecuting, setIsExecuting] = useState(false);
const shouldRecordFeedback = (): boolean =>
useDatabases.getState().isLastCollection() &&
!useSelectedNode.getState().findSelectedDatabase()?.isDatabaseShared();
useDatabases.getState().isLastCollection() && !useDatabases.getState().findSelectedDatabase()?.isDatabaseShared();
const collectionName = getCollectionName().toLocaleLowerCase();
const paneTitle = "Delete " + collectionName;
@ -63,10 +62,12 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
setIsExecuting(false);
useSelectedNode.getState().setSelectedNode(collection.database);
explorer.tabsManager?.closeTabsByComparator(
useTabs
.getState()
.closeTabsByComparator(
(tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
);
explorer.refreshAllDatabases();
refreshDatabases();
TelemetryProcessor.traceSuccess(Action.DeleteCollection, paneInfo, startKey);

6
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@ -2,11 +2,7 @@
exports[`Delete Collection Confirmation Pane submit() should call delete collection 1`] = `
<DeleteCollectionConfirmationPane
explorer={
Object {
"refreshAllDatabases": [Function],
}
}
refreshDatabases={[Function]}
>
<RightPaneForm
formError=""

15
src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx
View File

@ -10,15 +10,12 @@ import { Collection, Database } from "../../Contracts/ViewModels";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { updateUserContext } from "../../UserContext";
import Explorer from "../Explorer";
import { TabsManager } from "../Tabs/TabsManager";
import { useDatabases } from "../useDatabases";
import { useSelectedNode } from "../useSelectedNode";
import { DeleteDatabaseConfirmationPanel } from "./DeleteDatabaseConfirmationPanel";
describe("Delete Database Confirmation Pane", () => {
const selectedDatabaseId = "testDatabase";
let fakeExplorer: Explorer;
let database: Database;
beforeAll(() => {
@ -37,10 +34,6 @@ describe("Delete Database Confirmation Pane", () => {
});
beforeEach(() => {
fakeExplorer = {} as Explorer;
fakeExplorer.refreshAllDatabases = () => undefined;
fakeExplorer.tabsManager = new TabsManager();
database = {} as Database;
database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
database.id = ko.observable<string>(selectedDatabaseId);
@ -56,17 +49,17 @@ describe("Delete Database Confirmation Pane", () => {
});
it("shouldRecordFeedback() should return true if last non empty database or is last database that has shared throughput", () => {
const wrapper = shallow(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
const wrapper = shallow(<DeleteDatabaseConfirmationPanel refreshDatabases={() => undefined} />);
expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
useDatabases.getState().addDatabases([database]);
wrapper.setProps({ explorer: fakeExplorer });
wrapper.setProps({});
expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
useDatabases.getState().clearDatabases();
});
it("Should call delete database", () => {
const wrapper = mount(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
const wrapper = mount(<DeleteDatabaseConfirmationPanel refreshDatabases={() => undefined} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
@ -81,7 +74,7 @@ describe("Delete Database Confirmation Pane", () => {
});
it("should record feedback", async () => {
const wrapper = mount(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
const wrapper = mount(<DeleteDatabaseConfirmationPanel refreshDatabases={() => undefined} />);
expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
wrapper
.find("#confirmDatabaseId")

19
src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
View File

@ -7,23 +7,23 @@ import DeleteFeedback from "../../Common/DeleteFeedback";
import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
import { Collection, Database } from "../../Contracts/ViewModels";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext";
import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
import Explorer from "../Explorer";
import { useDatabases } from "../useDatabases";
import { useSelectedNode } from "../useSelectedNode";
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
interface DeleteDatabaseConfirmationPanelProps {
explorer: Explorer;
refreshDatabases: () => Promise<void>;
}
export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = ({
explorer,
refreshDatabases,
}: DeleteDatabaseConfirmationPanelProps): JSX.Element => {
const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
const isLastNonEmptyDatabase = useDatabases((state) => state.isLastNonEmptyDatabase);
@ -32,7 +32,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
const [formError, setFormError] = useState<string>("");
const [databaseInput, setDatabaseInput] = useState<string>("");
const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
const selectedDatabase: Database = useSelectedNode.getState().findSelectedDatabase();
const selectedDatabase: Database = useDatabases.getState().findSelectedDatabase();
const submit = async (): Promise<void> => {
if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
@ -52,14 +52,17 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
try {
await deleteDatabase(selectedDatabase.id());
closeSidePanel();
explorer.refreshAllDatabases();
explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
refreshDatabases();
useTabs.getState().closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
useSelectedNode.getState().setSelectedNode(undefined);
selectedDatabase
.collections()
.forEach((collection: Collection) =>
explorer.tabsManager.closeTabsByComparator(
(tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
useTabs
.getState()
.closeTabsByComparator(
(tab) =>
tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
)
);
TelemetryProcessor.traceSuccess(

5
src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
View File

@ -20,7 +20,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
"_isInitializingNotebooks": false,
"_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isSchemaEnabled": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
@ -38,10 +37,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
"container": [Circular],
"parameters": [Function],
},
"tabsManager": TabsManager {
"activeTab": [Function],
"openedTabs": [Function],
},
},
"getRepo": [Function],
"pinRepo": [Function],

3
src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
View File

@ -5,6 +5,7 @@ import { Areas, SavedQueries } from "../../../Common/Constants";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
import { Query } from "../../../Contracts/DataModels";
import { useSidePanel } from "../../../hooks/useSidePanel";
import { useTabs } from "../../../hooks/useTabs";
import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
@ -34,7 +35,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
logConsoleError("Failed to save query: account not setup to save queries");
}
const queryTab = explorer && (explorer.tabsManager.activeTab() as NewQueryTab);
const queryTab = useTabs.getState().activeTab as NewQueryTab;
const query: string = queryTab && queryTab.iTabAccessor.onSaveClickEvent();
if (!queryName || queryName.length === 0) {

8
src/Explorer/Panes/StringInputPane/StringInputPane.tsx
View File

@ -1,15 +1,14 @@
import { TextField } from "@fluentui/react";
import React, { FormEvent, FunctionComponent, useState } from "react";
import * as ViewModels from "../../../Contracts/ViewModels";
import { useTabs } from "../../../hooks/useTabs";
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
import Explorer from "../../Explorer";
import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
import NotebookV2Tab from "../../Tabs/NotebookV2Tab";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
export interface StringInputPanelProps {
explorer: Explorer;
closePanel: () => void;
errorMessage: string;
inProgressMessage: string;
@ -23,7 +22,6 @@ export interface StringInputPanelProps {
}
export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
explorer: container,
closePanel,
errorMessage,
inProgressMessage,
@ -55,7 +53,9 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
logConsoleInfo(`${successMessage}: ${stringInput}`);
const originalPath = notebookFile.path;
const notebookTabs = container.tabsManager.getTabs(
const notebookTabs = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.NotebookV2,
(tab: NotebookV2Tab) => tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), originalPath)
);

5
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@ -10,7 +10,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"_isInitializingNotebooks": false,
"_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isSchemaEnabled": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
"onRefreshResourcesClick": [Function],
@ -28,10 +27,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"container": [Circular],
"parameters": [Function],
},
"tabsManager": TabsManager {
"activeTab": [Function],
"openedTabs": [Function],
},
}
}
inProgressMessage="Creating directory "

10
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@ -2,15 +2,7 @@
exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
<DeleteDatabaseConfirmationPanel
explorer={
Object {
"refreshAllDatabases": [Function],
"tabsManager": TabsManager {
"activeTab": [Function],
"openedTabs": [Function],
},
}
}
refreshDatabases={[Function]}
>
<RightPaneForm
formError=""

2
src/Explorer/SplashScreen/SplashScreen.test.ts
View File

@ -1,12 +1,10 @@
import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
import Explorer from "../Explorer";
import { TabsManager } from "../Tabs/TabsManager";
import { SplashScreen } from "./SplashScreen";
jest.mock("../Explorer");
const createExplorer = () => {
const mock = new Explorer();
mock.tabsManager = new TabsManager();
return mock as jest.Mocked<Explorer>;
};

2
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -280,7 +280,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
}
/* Scale & Settings */
const isShared = useSelectedNode.getState().findSelectedDatabase()?.isDatabaseShared();
const isShared = useDatabases.getState().findSelectedDatabase()?.isDatabaseShared();
const label = isShared ? "Settings" : "Scale & Settings";
items.push({

3
src/Explorer/Tabs/MongoShellTab/MongoShellTab.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import * as DataModels from "../../../Contracts/DataModels";
import type { TabOptions } from "../../../Contracts/ViewModels";
import { useTabs } from "../../../hooks/useTabs";
import Explorer from "../../Explorer";
import TabsBase from "../TabsBase";
import MongoShellTabComponent, { IMongoShellTabAccessor, IMongoShellTabComponentProps } from "./MongoShellTabComponent";
@ -33,7 +34,7 @@ export class NewMongoShellTab extends TabsBase {
}
public onTabClick(): void {
this.manager?.activateTab(this);
useTabs.getState().activateTab(this);
this.iMongoShellTabAccessor.onTabClickEvent();
}
}

5
src/Explorer/Tabs/QueryTab/QueryTab.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import * as DataModels from "../../../Contracts/DataModels";
import type { QueryTabOptions } from "../../../Contracts/ViewModels";
import { useTabs } from "../../../hooks/useTabs";
import Explorer from "../../Explorer";
import { IQueryTabComponentProps, ITabAccessor } from "../../Tabs/QueryTab/QueryTabComponent";
import TabsBase from "../TabsBase";
@ -40,12 +41,12 @@ export class NewQueryTab extends TabsBase {
}
public onTabClick(): void {
this.manager?.activateTab(this);
useTabs.getState().activateTab(this);
this.iTabAccessor.onTabClickEvent();
}
public onCloseTabButtonClick(): void {
this.manager?.closeTab(this);
useTabs.getState().closeTab(this);
if (this.iTabAccessor) {
this.iTabAccessor.onCloseClickEvent(true);
}

2
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@ -29,7 +29,6 @@ import { EditorReact } from "../../Controls/Editor/EditorReact";
import Explorer from "../../Explorer";
import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
import TabsBase from "../TabsBase";
import { TabsManager } from "../TabsManager";
import "./QueryTabComponent.less";
enum ToggleState {
@ -65,7 +64,6 @@ export interface IQueryTabComponentProps {
partitionKey: DataModels.PartitionKey;
container: Explorer;
activeTab?: TabsBase;
tabManager?: TabsManager;
onTabAccessor: (instance: ITabAccessor) => void;
isPreferredApiMongoDB?: boolean;
monacoEditorSetting?: string;

5
src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTab.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { ExecuteSprocResult } from "../../../Common/dataAccess/executeStoredProcedure";
import * as DataModels from "../../../Contracts/DataModels";
import * as ViewModels from "../../../Contracts/ViewModels";
import { useTabs } from "../../../hooks/useTabs";
import Explorer from "../../Explorer";
import StoredProcedure from "../../Tree/StoredProcedure";
import ScriptTabBase from "../ScriptTabBase";
@ -51,12 +52,12 @@ export class NewStoredProcedureTab extends ScriptTabBase {
}
public onTabClick(): void {
this.manager?.activateTab(this);
useTabs.getState().activateTab(this);
this.iStoreProcAccessor.onTabClickEvent();
}
public onCloseTabButtonClick(): void {
this.manager?.closeTab(this);
useTabs.getState().closeTab(this);
}
public onExecuteSprocsResult(result: ExecuteSprocResult): void {

9
src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx
View File

@ -10,6 +10,7 @@ import { ExecuteSprocResult } from "../../../Common/dataAccess/executeStoredProc
import { updateStoredProcedure } from "../../../Common/dataAccess/updateStoredProcedure";
import * as ViewModels from "../../../Contracts/ViewModels";
import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
import { useTabs } from "../../../hooks/useTabs";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
import { EditorReact } from "../../Controls/Editor/EditorReact";
import Explorer from "../../Explorer";
@ -144,7 +145,7 @@ export default class StoredProcedureTabComponent extends React.Component<
}
public onTabClick(): void {
if (this.props.container.tabsManager.openedTabs().length > 0) {
if (useTabs.getState().openedTabs.length > 0) {
useCommandBar.getState().setContextButtons(this.getTabsButtons());
}
}
@ -396,10 +397,8 @@ export default class StoredProcedureTabComponent extends React.Component<
editorModel && editorModel.setValue(createdResource.body as string);
this.props.scriptTabBaseInstance.editorContent.setBaseline(createdResource.body as string);
this.node = this.collection.createStoredProcedureNode(createdResource);
this.props.container.tabsManager.openedTabs()[
this.props.container.tabsManager.openedTabs().length - 1
].node = this.node;
this.props.scriptTabBaseInstance.node = this.node;
useTabs.getState().updateTab(this.props.scriptTabBaseInstance);
this.props.scriptTabBaseInstance.editorState(ViewModels.ScriptEditorState.exisitingNoEdits);
this.setState({

10
src/Explorer/Tabs/Tabs.tsx
View File

@ -3,28 +3,32 @@ import React, { useEffect, useRef, useState } from "react";
import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
import errorIcon from "../../../images/close-black.svg";
import { useObservable } from "../../hooks/useObservable";
import { useTabs } from "../../hooks/useTabs";
import TabsBase from "./TabsBase";
type Tab = TabsBase | (TabsBase & { render: () => JSX.Element });
export const Tabs = ({ tabs, activeTab }: { tabs: readonly Tab[]; activeTab: Tab }): JSX.Element => (
export const Tabs = (): JSX.Element => {
const { openedTabs, activeTab } = useTabs();
return (
<div className="tabsManagerContainer">
<div id="content" className="flexContainer hideOverflows">
<div className="nav-tabs-margin">
<ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
{tabs.map((tab) => (
{openedTabs.map((tab) => (
<TabNav key={tab.tabId} tab={tab} active={activeTab === tab} />
))}
</ul>
</div>
<div className="tabPanesContainer">
{tabs.map((tab) => (
{openedTabs.map((tab) => (
<TabPane key={tab.tabId} tab={tab} active={activeTab === tab} />
))}
</div>
</div>
</div>
);
};
function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
const [hovering, setHovering] = useState(false);

9
src/Explorer/Tabs/TabsBase.ts
View File

@ -4,6 +4,7 @@ import * as ThemeUtility from "../../Common/ThemeUtility";
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { useNotificationConsole } from "../../hooks/useNotificationConsole";
import { useTabs } from "../../hooks/useTabs";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
@ -11,7 +12,6 @@ import Explorer from "../Explorer";
import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
import { useSelectedNode } from "../useSelectedNode";
import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
import { TabsManager } from "./TabsManager";
// TODO: Use specific actions for logging telemetry data
export default class TabsBase extends WaitsForTemplateViewModel {
private static id = 0;
@ -28,7 +28,6 @@ export default class TabsBase extends WaitsForTemplateViewModel {
public isExecutionError = ko.observable(false);
public isExecuting = ko.observable(false);
public pendingNotification?: ko.Observable<DataModels.Notification>;
public manager?: TabsManager;
protected _theme: string;
public onLoadStartKey: number;
@ -60,7 +59,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
}
public onCloseTabButtonClick(): void {
this.manager?.closeTab(this);
useTabs.getState().closeTab(this);
TelemetryProcessor.trace(Action.Tab, ActionModifiers.Close, {
tabName: this.constructor.name,
dataExplorerArea: Constants.Areas.Tab,
@ -70,7 +69,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
}
public onTabClick(): void {
this.manager?.activateTab(this);
useTabs.getState().activateTab(this);
}
protected updateSelectedNode(): void {
@ -105,7 +104,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
/** @deprecated this is no longer observable, bind to comparisons with manager.activeTab() instead */
public isActive() {
return this === this.manager?.activeTab();
return this === useTabs.getState().activeTab;
}
public onActivate(): void {

54
src/Explorer/Tabs/TabsManager.ts
View File

@ -1,54 +0,0 @@
import * as ko from "knockout";
import * as ViewModels from "../../Contracts/ViewModels";
import TabsBase from "./TabsBase";
export class TabsManager {
public openedTabs = ko.observableArray<TabsBase>([]);
public activeTab = ko.observable<TabsBase>();
public activateNewTab(tab: TabsBase): void {
this.openedTabs.push(tab);
this.activateTab(tab);
}
public activateTab(tab: TabsBase): void {
if (this.openedTabs().includes(tab)) {
tab.manager = this;
this.activeTab(tab);
tab.onActivate();
}
}
public getTabs(tabKind: ViewModels.CollectionTabKind, comparator?: (tab: TabsBase) => boolean): TabsBase[] {
return this.openedTabs().filter((tab) => tab.tabKind === tabKind && (!comparator || comparator(tab)));
}
public refreshActiveTab(comparator: (tab: TabsBase) => boolean): void {
// ensures that the tab selects/highlights the right node based on resource tree expand/collapse state
this.activeTab() && comparator(this.activeTab()) && this.activeTab().onActivate();
}
public closeTabsByComparator(comparator: (tab: TabsBase) => boolean): void {
this.openedTabs()
.filter(comparator)
.forEach((tab) => tab.onCloseTabButtonClick());
}
public closeTab(tab: TabsBase): void {
const tabIndex = this.openedTabs().indexOf(tab);
if (tabIndex !== -1) {
this.openedTabs.remove(tab);
tab.manager = undefined;
if (this.openedTabs().length === 0) {
this.activeTab(undefined);
}
if (tab === this.activeTab()) {
const tabToTheRight = this.openedTabs()[tabIndex];
const lastOpenTab = this.openedTabs()[this.openedTabs().length - 1];
this.activateTab(tabToTheRight ?? lastOpenTab);
}
}
}
}

79
src/Explorer/Tabs/TabsManager.test.ts → src/Explorer/Tabs/useTabs.test.ts
View File

@ -1,23 +1,19 @@
import * as ko from "knockout";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { updateUserContext } from "../../UserContext";
import Explorer from "../Explorer";
import { container } from "../Controls/Settings/TestUtils";
import DocumentId from "../Tree/DocumentId";
import { container } from "./../Controls/Settings/TestUtils";
import DocumentsTab from "./DocumentsTab";
import { NewQueryTab } from "./QueryTab/QueryTab";
import { TabsManager } from "./TabsManager";
describe("Tabs manager tests", () => {
let tabsManager: TabsManager;
let explorer: Explorer;
describe("useTabs tests", () => {
let database: ViewModels.Database;
let collection: ViewModels.Collection;
let queryTab: NewQueryTab;
let documentsTab: DocumentsTab;
beforeEach(() => {
explorer = new Explorer();
updateUserContext({
databaseAccount: {
id: "test",
@ -30,7 +26,6 @@ describe("Tabs manager tests", () => {
});
database = {
container: explorer,
id: ko.observable<string>("test"),
isDatabaseShared: () => false,
} as ViewModels.Database;
@ -38,7 +33,6 @@ describe("Tabs manager tests", () => {
database.selectedSubnodeKind = ko.observable<ViewModels.CollectionTabKind>();
collection = {
container: explorer,
databaseId: "test",
id: ko.observable<string>("test"),
} as ViewModels.Collection;
@ -76,63 +70,70 @@ describe("Tabs manager tests", () => {
documentsTab.tabId = "2";
});
beforeEach(() => (tabsManager = new TabsManager()));
beforeEach(() => useTabs.setState({ openedTabs: [], activeTab: undefined }));
it("open new tabs", () => {
tabsManager.activateNewTab(queryTab);
expect(tabsManager.openedTabs().length).toBe(1);
expect(tabsManager.openedTabs()[0]).toEqual(queryTab);
expect(tabsManager.activeTab()).toEqual(queryTab);
const { activateNewTab } = useTabs.getState();
activateNewTab(queryTab);
let tabsState = useTabs.getState();
expect(tabsState.openedTabs.length).toBe(1);
expect(tabsState.openedTabs[0]).toEqual(queryTab);
expect(tabsState.activeTab).toEqual(queryTab);
expect(queryTab.isActive()).toBe(true);
tabsManager.activateNewTab(documentsTab);
expect(tabsManager.openedTabs().length).toBe(2);
expect(tabsManager.openedTabs()[1]).toEqual(documentsTab);
expect(tabsManager.activeTab()).toEqual(documentsTab);
activateNewTab(documentsTab);
tabsState = useTabs.getState();
expect(tabsState.openedTabs.length).toBe(2);
expect(tabsState.openedTabs[1]).toEqual(documentsTab);
expect(tabsState.activeTab).toEqual(documentsTab);
expect(queryTab.isActive()).toBe(false);
expect(documentsTab.isActive()).toBe(true);
});
it("open existing tabs", () => {
tabsManager.activateNewTab(queryTab);
tabsManager.activateNewTab(documentsTab);
tabsManager.activateTab(queryTab);
expect(tabsManager.openedTabs().length).toBe(2);
expect(tabsManager.activeTab()).toEqual(queryTab);
const { activateNewTab, activateTab } = useTabs.getState();
activateNewTab(queryTab);
activateNewTab(documentsTab);
activateTab(queryTab);
const { openedTabs, activeTab } = useTabs.getState();
expect(openedTabs.length).toBe(2);
expect(activeTab).toEqual(queryTab);
expect(queryTab.isActive()).toBe(true);
expect(documentsTab.isActive()).toBe(false);
});
it("get tabs", () => {
tabsManager.activateNewTab(queryTab);
tabsManager.activateNewTab(documentsTab);
const { activateNewTab, getTabs } = useTabs.getState();
activateNewTab(queryTab);
activateNewTab(documentsTab);
const queryTabs = tabsManager.getTabs(ViewModels.CollectionTabKind.Query);
const queryTabs = getTabs(ViewModels.CollectionTabKind.Query);
expect(queryTabs.length).toBe(1);
expect(queryTabs[0]).toEqual(queryTab);
const documentsTabs = tabsManager.getTabs(
ViewModels.CollectionTabKind.Documents,
(tab) => tab.tabId === documentsTab.tabId
);
const documentsTabs = getTabs(ViewModels.CollectionTabKind.Documents, (tab) => tab.tabId === documentsTab.tabId);
expect(documentsTabs.length).toBe(1);
expect(documentsTabs[0]).toEqual(documentsTab);
});
it("close tabs", () => {
tabsManager.activateNewTab(queryTab);
tabsManager.activateNewTab(documentsTab);
const { activateNewTab, closeTab, closeTabsByComparator } = useTabs.getState();
activateNewTab(queryTab);
activateNewTab(documentsTab);
closeTab(documentsTab);
tabsManager.closeTab(documentsTab);
expect(tabsManager.openedTabs().length).toBe(1);
expect(tabsManager.openedTabs()[0]).toEqual(queryTab);
expect(tabsManager.activeTab()).toEqual(queryTab);
let tabsState = useTabs.getState();
expect(tabsState.openedTabs.length).toBe(1);
expect(tabsState.openedTabs[0]).toEqual(queryTab);
expect(tabsState.activeTab).toEqual(queryTab);
expect(queryTab.isActive()).toBe(true);
expect(documentsTab.isActive()).toBe(false);
tabsManager.closeTabsByComparator((tab) => tab.tabId === queryTab.tabId);
expect(tabsManager.openedTabs().length).toBe(0);
expect(tabsManager.activeTab()).toEqual(undefined);
closeTabsByComparator((tab) => tab.tabId === queryTab.tabId);
tabsState = useTabs.getState();
expect(tabsState.openedTabs.length).toBe(0);
expect(tabsState.activeTab).toEqual(undefined);
expect(queryTab.isActive()).toBe(false);
});
});

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

@ -15,6 +15,7 @@ import { fetchPortalNotifications } from "../../Common/PortalNotifications";
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { UploadDetailsRecord } from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext";
@ -239,7 +240,9 @@ export default class Collection implements ViewModels.Collection {
this.expandCollection();
}
useCommandBar.getState().setContextButtons([]);
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
);
}
@ -288,14 +291,16 @@ export default class Collection implements ViewModels.Collection {
dataExplorerArea: Constants.Areas.ResourceTree,
});
const documentsTabs: DocumentsTab[] = this.container.tabsManager.getTabs(
const documentsTabs: DocumentsTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.Documents,
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
) as DocumentsTab[];
let documentsTab: DocumentsTab = documentsTabs && documentsTabs[0];
if (documentsTab) {
this.container.tabsManager.activateTab(documentsTab);
useTabs.getState().activateTab(documentsTab);
} else {
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
databaseName: this.databaseId,
@ -317,7 +322,7 @@ export default class Collection implements ViewModels.Collection {
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(documentsTab);
useTabs.getState().activateNewTab(documentsTab);
}
}
@ -333,14 +338,16 @@ export default class Collection implements ViewModels.Collection {
dataExplorerArea: Constants.Areas.ResourceTree,
});
const conflictsTabs: ConflictsTab[] = this.container.tabsManager.getTabs(
const conflictsTabs: ConflictsTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.Conflicts,
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
) as ConflictsTab[];
let conflictsTab: ConflictsTab = conflictsTabs && conflictsTabs[0];
if (conflictsTab) {
this.container.tabsManager.activateTab(conflictsTab);
useTabs.getState().activateTab(conflictsTab);
} else {
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
databaseName: this.databaseId,
@ -362,7 +369,7 @@ export default class Collection implements ViewModels.Collection {
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(conflictsTab);
useTabs.getState().activateNewTab(conflictsTab);
}
}
@ -384,14 +391,16 @@ export default class Collection implements ViewModels.Collection {
});
}
const queryTablesTabs: QueryTablesTab[] = this.container.tabsManager.getTabs(
const queryTablesTabs: QueryTablesTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.QueryTables,
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
) as QueryTablesTab[];
let queryTablesTab: QueryTablesTab = queryTablesTabs && queryTablesTabs[0];
if (queryTablesTab) {
this.container.tabsManager.activateTab(queryTablesTab);
useTabs.getState().activateTab(queryTablesTab);
} else {
this.documentIds([]);
let title = `Entities`;
@ -415,7 +424,7 @@ export default class Collection implements ViewModels.Collection {
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(queryTablesTab);
useTabs.getState().activateNewTab(queryTablesTab);
}
}
@ -431,14 +440,16 @@ export default class Collection implements ViewModels.Collection {
dataExplorerArea: Constants.Areas.ResourceTree,
});
const graphTabs: GraphTab[] = this.container.tabsManager.getTabs(
const graphTabs: GraphTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.Graph,
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
) as GraphTab[];
let graphTab: GraphTab = graphTabs && graphTabs[0];
if (graphTab) {
this.container.tabsManager.activateTab(graphTab);
useTabs.getState().activateTab(graphTab);
} else {
this.documentIds([]);
const title = "Graph";
@ -466,7 +477,7 @@ export default class Collection implements ViewModels.Collection {
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(graphTab);
useTabs.getState().activateNewTab(graphTab);
}
}
@ -482,14 +493,16 @@ export default class Collection implements ViewModels.Collection {
dataExplorerArea: Constants.Areas.ResourceTree,
});
const mongoDocumentsTabs: MongoDocumentsTab[] = this.container.tabsManager.getTabs(
const mongoDocumentsTabs: MongoDocumentsTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.Documents,
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
) as MongoDocumentsTab[];
let mongoDocumentsTab: MongoDocumentsTab = mongoDocumentsTabs && mongoDocumentsTabs[0];
if (mongoDocumentsTab) {
this.container.tabsManager.activateTab(mongoDocumentsTab);
useTabs.getState().activateTab(mongoDocumentsTab);
} else {
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
databaseName: this.databaseId,
@ -510,7 +523,7 @@ export default class Collection implements ViewModels.Collection {
node: this,
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(mongoDocumentsTab);
useTabs.getState().activateNewTab(mongoDocumentsTab);
}
};
@ -525,13 +538,13 @@ export default class Collection implements ViewModels.Collection {
dataExplorerArea: Constants.Areas.ResourceTree,
});
for (const tab of this.container.tabsManager.openedTabs()) {
for (const tab of useTabs.getState().openedTabs) {
if (
tab instanceof SchemaAnalyzerTab &&
tab.collection?.databaseId === this.databaseId &&
tab.collection?.id() === this.id()
) {
return this.container.tabsManager.activateTab(tab);
return useTabs.getState().activateTab(tab);
}
}
@ -542,7 +555,7 @@ export default class Collection implements ViewModels.Collection {
tabTitle: "Schema",
});
this.documentIds([]);
this.container.tabsManager.activateNewTab(
useTabs.getState().activateNewTab(
new SchemaAnalyzerTab({
account: userContext.databaseAccount,
masterKey: userContext.masterKey || "",
@ -571,12 +584,9 @@ export default class Collection implements ViewModels.Collection {
});
const tabTitle = !this.offer() ? "Settings" : "Scale & Settings";
const matchingTabs = this.container.tabsManager.getTabs(
ViewModels.CollectionTabKind.CollectionSettingsV2,
(tab) => {
const matchingTabs = useTabs.getState().getTabs(ViewModels.CollectionTabKind.CollectionSettingsV2, (tab) => {
return tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id();
}
);
});
const traceStartData = {
databaseName: this.databaseId,
@ -608,15 +618,15 @@ export default class Collection implements ViewModels.Collection {
settingsTabOptions.onLoadStartKey = startKey;
settingsTabOptions.tabKind = ViewModels.CollectionTabKind.CollectionSettingsV2;
settingsTabV2 = new CollectionSettingsTabV2(settingsTabOptions);
this.container.tabsManager.activateNewTab(settingsTabV2);
useTabs.getState().activateNewTab(settingsTabV2);
} else {
this.container.tabsManager.activateTab(settingsTabV2);
useTabs.getState().activateTab(settingsTabV2);
}
};
public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
const collection: ViewModels.Collection = source.collection || source;
const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;
const title = "Query " + id;
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
databaseName: this.databaseId,
@ -626,7 +636,7 @@ export default class Collection implements ViewModels.Collection {
tabTitle: title,
});
this.container.tabsManager.activateNewTab(
useTabs.getState().activateNewTab(
new NewQueryTab(
{
tabKind: ViewModels.CollectionTabKind.Query,
@ -645,7 +655,7 @@ export default class Collection implements ViewModels.Collection {
public onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string) {
const collection: ViewModels.Collection = source.collection || source;
const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;
const title = "Query " + id;
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
@ -672,11 +682,11 @@ export default class Collection implements ViewModels.Collection {
}
);
this.container.tabsManager.activateNewTab(newMongoQueryTab);
useTabs.getState().activateNewTab(newMongoQueryTab);
}
public onNewGraphClick() {
const id: number = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Graph).length + 1;
const id: number = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Graph).length + 1;
const title: string = "Graph Query " + id;
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
@ -702,13 +712,11 @@ export default class Collection implements ViewModels.Collection {
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(graphTab);
useTabs.getState().activateNewTab(graphTab);
}
public onNewMongoShellClick() {
const mongoShellTabs = this.container.tabsManager.getTabs(
ViewModels.CollectionTabKind.MongoShell
) as NewMongoShellTab[];
const mongoShellTabs = useTabs.getState().getTabs(ViewModels.CollectionTabKind.MongoShell) as NewMongoShellTab[];
let index = 1;
if (mongoShellTabs.length > 0) {
@ -729,7 +737,7 @@ export default class Collection implements ViewModels.Collection {
}
);
this.container.tabsManager.activateNewTab(mongoShellTab);
useTabs.getState().activateNewTab(mongoShellTab);
}
public onNewStoredProcedureClick(source: ViewModels.Collection, event: MouseEvent) {
@ -787,7 +795,9 @@ export default class Collection implements ViewModels.Collection {
} else {
this.expandStoredProcedures();
}
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
);
}
@ -846,7 +856,9 @@ export default class Collection implements ViewModels.Collection {
} else {
this.expandUserDefinedFunctions();
}
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
);
}
@ -905,7 +917,9 @@ export default class Collection implements ViewModels.Collection {
} else {
this.expandTriggers();
}
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
);
}

9
src/Explorer/Tree/Database.test.tsx
View File

@ -1,7 +1,7 @@
import * as ko from "knockout";
import { HttpStatusCodes } from "../../Common/Constants";
import * as DataModels from "../../Contracts/DataModels";
import { JunoClient } from "../../Juno/JunoClient";
import { Features } from "../../Platform/Hosted/extractFeatures";
import { updateUserContext, userContext } from "../../UserContext";
import Explorer from "../Explorer";
import Database from "./Database";
@ -35,7 +35,6 @@ describe("Add Schema", () => {
collection.analyticalStorageTtl = undefined;
const database = new Database(createMockContainer(), collection);
database.container = createMockContainer();
database.container.isSchemaEnabled = ko.computed<boolean>(() => false);
database.junoClient = new JunoClient();
database.junoClient.requestSchema = jest.fn();
@ -52,7 +51,11 @@ describe("Add Schema", () => {
const database = new Database(createMockContainer(), collection);
database.container = createMockContainer();
database.container.isSchemaEnabled = ko.computed<boolean>(() => true);
updateUserContext({
features: {
enableSchema: true,
} as Features,
});
database.junoClient = new JunoClient();
database.junoClient.requestSchema = jest.fn();

11
src/Explorer/Tree/Database.tsx
View File

@ -11,6 +11,7 @@ import { fetchPortalNotifications } from "../../Common/PortalNotifications";
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import { IJunoResponse, JunoClient } from "../../Juno/JunoClient";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@ -67,7 +68,7 @@ export default class Database implements ViewModels.Database {
const pendingNotificationsPromise: Promise<DataModels.Notification> = this.getPendingThroughputSplitNotification();
const tabKind = ViewModels.CollectionTabKind.DatabaseSettingsV2;
const matchingTabs = this.container.tabsManager.getTabs(tabKind, (tab) => tab.node?.id() === this.id());
const matchingTabs = useTabs.getState().getTabs(tabKind, (tab) => tab.node?.id() === this.id());
let settingsTab = matchingTabs?.[0] as DatabaseSettingsTabV2;
if (!settingsTab) {
@ -91,7 +92,7 @@ export default class Database implements ViewModels.Database {
};
settingsTab = new DatabaseSettingsTabV2(tabOptions);
settingsTab.pendingNotification(pendingNotification);
this.container.tabsManager.activateNewTab(settingsTab);
useTabs.getState().activateNewTab(settingsTab);
},
(error) => {
const errorMessage = getErrorMessage(error);
@ -116,11 +117,11 @@ export default class Database implements ViewModels.Database {
pendingNotificationsPromise.then(
(pendingNotification: DataModels.Notification) => {
settingsTab.pendingNotification(pendingNotification);
this.container.tabsManager.activateTab(settingsTab);
useTabs.getState().activateTab(settingsTab);
},
() => {
settingsTab.pendingNotification(undefined);
this.container.tabsManager.activateTab(settingsTab);
useTabs.getState().activateTab(settingsTab);
}
);
}
@ -312,7 +313,7 @@ export default class Database implements ViewModels.Database {
let checkForSchema: NodeJS.Timeout;
interval = interval || 5000;
if (collection.analyticalStorageTtl !== undefined && this.container.isSchemaEnabled()) {
if (collection.analyticalStorageTtl !== undefined && userContext.features.enableSchema) {
collection.requestSchema = () => {
this.junoClient.requestSchema({
id: undefined,

13
src/Explorer/Tree/ResourceTokenCollection.ts
View File

@ -2,6 +2,7 @@ import * as ko from "knockout";
import * as Constants from "../../Common/Constants";
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext";
@ -77,7 +78,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
const collection: ViewModels.Collection = source.collection || source;
const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Query).length + 1;
const title = "Query " + id;
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
databaseName: this.databaseId,
@ -87,7 +88,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
tabTitle: title,
});
this.container.tabsManager.activateNewTab(
useTabs.getState().activateNewTab(
new NewQueryTab(
{
tabKind: ViewModels.CollectionTabKind.Query,
@ -115,7 +116,9 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
dataExplorerArea: Constants.Areas.ResourceTree,
});
const documentsTabs: DocumentsTab[] = this.container.tabsManager.getTabs(
const documentsTabs: DocumentsTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.Documents,
(tab: TabsBase) =>
tab.collection?.id() === this.id() &&
@ -124,7 +127,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
let documentsTab: DocumentsTab = documentsTabs && documentsTabs[0];
if (documentsTab) {
this.container.tabsManager.activateTab(documentsTab);
useTabs.getState().activateTab(documentsTab);
} else {
const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
databaseName: this.databaseId,
@ -146,7 +149,7 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
onLoadStartKey: startKey,
});
this.container.tabsManager.activateNewTab(documentsTab);
useTabs.getState().activateNewTab(documentsTab);
}
}

30
src/Explorer/Tree/ResourceTreeAdapter.test.ts
View File

@ -1,28 +1,34 @@
import * as ko from "knockout";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import TabsBase from "../Tabs/TabsBase";
import { useSelectedNode } from "../useSelectedNode";
describe("useSelectedNode.getState()", () => {
describe("useSelectedNode", () => {
const mockTab = {
tabKind: ViewModels.CollectionTabKind.Documents,
} as TabsBase;
// TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths
describe("isDataNodeSelected", () => {
afterEach(() => useSelectedNode.getState().setSelectedNode(undefined));
afterEach(() => {
useSelectedNode.getState().setSelectedNode(undefined);
useTabs.setState({ activeTab: undefined });
});
it("it should not select if no selected node", () => {
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected(mockTab, "foo", "bar", undefined);
useTabs.setState({ activeTab: mockTab });
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("foo", "bar", undefined);
expect(isDataNodeSelected).toBeFalsy();
});
it("it should not select incorrect subnodekinds", () => {
useTabs.setState({ activeTab: mockTab });
useSelectedNode.getState().setSelectedNode({
nodeKind: "nodeKind",
rid: "rid",
id: ko.observable<string>("id"),
});
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected(mockTab, "foo", "bar", undefined);
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("foo", "bar", undefined);
expect(isDataNodeSelected).toBeFalsy();
});
@ -32,11 +38,12 @@ describe("useSelectedNode.getState()", () => {
rid: "rid",
id: ko.observable<string>("id"),
});
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected(undefined, "foo", "bar", undefined);
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("foo", "bar", undefined);
expect(isDataNodeSelected).toBeFalsy();
});
it("should select if correct database node regardless of subnodekinds", () => {
useTabs.setState({ activeTab: mockTab });
const subNodeKind = ViewModels.CollectionTabKind.Documents;
useSelectedNode.getState().setSelectedNode({
nodeKind: "Database",
@ -46,7 +53,7 @@ describe("useSelectedNode.getState()", () => {
} as ViewModels.TreeNode);
const isDataNodeSelected = useSelectedNode
.getState()
.isDataNodeSelected(mockTab, "dbid", undefined, [ViewModels.CollectionTabKind.Documents]);
.isDataNodeSelected("dbid", undefined, [ViewModels.CollectionTabKind.Documents]);
expect(isDataNodeSelected).toBeTruthy();
});
@ -55,6 +62,7 @@ describe("useSelectedNode.getState()", () => {
let activeTab = {
tabKind: subNodeKind,
} as TabsBase;
useTabs.setState({ activeTab });
useSelectedNode.getState().setSelectedNode({
nodeKind: "Collection",
rid: "collrid",
@ -62,15 +70,14 @@ describe("useSelectedNode.getState()", () => {
id: ko.observable<string>("collid"),
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
} as ViewModels.TreeNode);
let isDataNodeSelected = useSelectedNode
.getState()
.isDataNodeSelected(activeTab, "dbid", "collid", [subNodeKind]);
let isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("dbid", "collid", [subNodeKind]);
expect(isDataNodeSelected).toBeTruthy();
subNodeKind = ViewModels.CollectionTabKind.Graph;
activeTab = {
tabKind: subNodeKind,
} as TabsBase;
useTabs.setState({ activeTab });
useSelectedNode.getState().setSelectedNode({
nodeKind: "Collection",
rid: "collrid",
@ -78,7 +85,7 @@ describe("useSelectedNode.getState()", () => {
id: ko.observable<string>("collid"),
selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
} as ViewModels.TreeNode);
isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected(activeTab, "dbid", "collid", [subNodeKind]);
isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("dbid", "collid", [subNodeKind]);
expect(isDataNodeSelected).toBeTruthy();
});
@ -93,9 +100,10 @@ describe("useSelectedNode.getState()", () => {
const activeTab = {
tabKind: ViewModels.CollectionTabKind.Documents,
} as TabsBase;
useTabs.setState({ activeTab });
const isDataNodeSelected = useSelectedNode
.getState()
.isDataNodeSelected(activeTab, "dbid", "collid", [ViewModels.CollectionTabKind.Settings]);
.isDataNodeSelected("dbid", "collid", [ViewModels.CollectionTabKind.Settings]);
expect(isDataNodeSelected).toBeFalsy();
});
});

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

@ -16,6 +16,7 @@ import { Areas } from "../../Common/Constants";
import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { IPinnedRepo } from "../../Juno/JunoClient";
import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
@ -57,7 +58,10 @@ export class ResourceTreeAdapter implements ReactAdapter {
this.parameters = ko.observable(Date.now());
useSelectedNode.subscribe(() => this.triggerRender());
this.container.tabsManager.activeTab.subscribe((newValue: TabsBase) => this.triggerRender());
useTabs.subscribe(
() => this.triggerRender(),
(state) => state.activeTab
);
useNotebook.subscribe(
() => this.triggerRender(),
(state) => state.isNotebookEnabled
@ -188,8 +192,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isExpanded: false,
className: "databaseHeader",
children: [],
isSelected: () =>
useSelectedNode.getState().isDataNodeSelected(this.container.tabsManager.activeTab(), database.id()),
isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(this.container, database.id()),
onClick: async (isExpanded) => {
// Rewritten version of expandCollapseDatabase():
@ -204,7 +207,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
databaseNode.isLoading = false;
useSelectedNode.getState().setSelectedNode(database);
useCommandBar.getState().setContextButtons([]);
this.container.tabsManager.refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
useTabs.getState().refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
},
onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(database),
};
@ -215,9 +218,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), database.id(), undefined, [
ViewModels.CollectionTabKind.DatabaseSettings,
]),
.isDataNodeSelected(database.id(), undefined, [ViewModels.CollectionTabKind.DatabaseSettings]),
onClick: database.onSettingsClick.bind(database),
});
}
@ -265,7 +266,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
.isDataNodeSelected(collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.Documents,
ViewModels.CollectionTabKind.Graph,
]),
@ -283,9 +284,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.SchemaAnalyzer,
]),
.isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.SchemaAnalyzer]),
});
}
@ -296,9 +295,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.Settings,
]),
.isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Settings]),
});
}
@ -326,9 +323,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.Conflicts,
]),
.isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Conflicts]),
});
}
@ -343,7 +338,9 @@ export class ResourceTreeAdapter implements ReactAdapter {
// Rewritten version of expandCollapseCollection
useSelectedNode.getState().setSelectedNode(collection);
useCommandBar.getState().setContextButtons([]);
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab: TabsBase) =>
tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
);
@ -355,10 +352,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
collection.loadTriggers();
}
},
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id()),
isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
onContextMenuOpen: () => useSelectedNode.getState().setSelectedNode(collection),
};
}
@ -372,14 +366,16 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
.isDataNodeSelected(collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.StoredProcedures,
]),
contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(this.container, sp),
})),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.StoredProcedures);
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab: TabsBase) =>
tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
);
@ -396,7 +392,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
.isDataNodeSelected(collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.UserDefinedFunctions,
]),
contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(
@ -406,7 +402,9 @@ export class ResourceTreeAdapter implements ReactAdapter {
})),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.UserDefinedFunctions);
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab: TabsBase) =>
tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
);
@ -423,14 +421,14 @@ export class ResourceTreeAdapter implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.Triggers,
]),
.isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Triggers]),
contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(this.container, trigger),
})),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Triggers);
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab: TabsBase) =>
tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
);
@ -452,9 +450,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
children: this.getSchemaNodes(collection.schema.fields),
onClick: () => {
collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Schema);
this.container.tabsManager.refreshActiveTab(
(tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid
);
useTabs.getState().refreshActiveTab((tab: TabsBase) => tab.collection && tab.collection.rid === collection.rid);
},
};
}
@ -584,7 +580,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
className: "notebookHeader galleryHeader",
onClick: () => this.container.openGallery(),
isSelected: () => {
const activeTab = this.container.tabsManager.activeTab();
const activeTab = useTabs.getState().activeTab;
return activeTab && activeTab.tabKind === ViewModels.CollectionTabKind.Gallery;
},
};
@ -678,7 +674,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
className: "notebookHeader",
onClick: () => onFileClick(item),
isSelected: () => {
const activeTab = this.container.tabsManager.activeTab();
const activeTab = useTabs.getState().activeTab;
return (
activeTab &&
activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&
@ -833,7 +829,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
}
},
isSelected: () => {
const activeTab = this.container.tabsManager.activeTab();
const activeTab = useTabs.getState().activeTab;
return (
activeTab &&
activeTab.tabKind === ViewModels.CollectionTabKind.NotebookV2 &&

19
src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
View File

@ -3,6 +3,7 @@ import * as 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";
@ -24,7 +25,10 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
(state) => state.resourceTokenCollection
);
useSelectedNode.subscribe(() => this.triggerRender());
this.container.tabsManager && this.container.tabsManager.activeTab.subscribe(() => this.triggerRender());
useTabs.subscribe(
() => this.triggerRender(),
(state) => state.activeTab
);
this.triggerRender();
}
@ -55,9 +59,7 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id(), [
ViewModels.CollectionTabKind.Documents,
]),
.isDataNodeSelected(collection.databaseId, collection.id(), [ViewModels.CollectionTabKind.Documents]),
});
const collectionNode: TreeNode = {
@ -70,14 +72,13 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
// Rewritten version of expandCollapseCollection
useSelectedNode.getState().setSelectedNode(collection);
useCommandBar.getState().setContextButtons([]);
this.container.tabsManager.refreshActiveTab(
useTabs
.getState()
.refreshActiveTab(
(tab) => tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
);
},
isSelected: () =>
useSelectedNode
.getState()
.isDataNodeSelected(this.container.tabsManager.activeTab(), collection.databaseId, collection.id()),
isSelected: () => useSelectedNode.getState().isDataNodeSelected(collection.databaseId, collection.id()),
};
return {

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

@ -4,6 +4,7 @@ import * as Constants from "../../Common/Constants";
import { deleteStoredProcedure } from "../../Common/dataAccess/deleteStoredProcedure";
import { executeStoredProcedure } from "../../Common/dataAccess/executeStoredProcedure";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext";
@ -62,7 +63,7 @@ export default class StoredProcedure {
}
public static create(source: ViewModels.Collection, event: MouseEvent) {
const id = source.container.tabsManager.getTabs(ViewModels.CollectionTabKind.StoredProcedures).length + 1;
const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.StoredProcedures).length + 1;
const storedProcedure = <StoredProcedureDefinition>{
id: "",
body: sampleStoredProcedureBody,
@ -84,7 +85,7 @@ export default class StoredProcedure {
}
);
source.container.tabsManager.activateNewTab(storedProcedureTab);
useTabs.getState().activateNewTab(storedProcedureTab);
}
public select() {
@ -99,14 +100,16 @@ export default class StoredProcedure {
public open = () => {
this.select();
const storedProcedureTabs: NewStoredProcedureTab[] = this.container.tabsManager.getTabs(
const storedProcedureTabs: NewStoredProcedureTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.StoredProcedures,
(tab: TabsBase) => tab.node && tab.node.rid === this.rid
) as NewStoredProcedureTab[];
let storedProcedureTab: NewStoredProcedureTab = storedProcedureTabs && storedProcedureTabs[0];
if (storedProcedureTab) {
this.container.tabsManager.activateTab(storedProcedureTab);
useTabs.getState().activateTab(storedProcedureTab);
} else {
const storedProcedureData = <StoredProcedureDefinition>{
_rid: this.rid,
@ -131,7 +134,7 @@ export default class StoredProcedure {
}
);
this.container.tabsManager.activateNewTab(storedProcedureTab);
useTabs.getState().activateNewTab(storedProcedureTab);
}
};
public delete() {
@ -141,7 +144,7 @@ export default class StoredProcedure {
deleteStoredProcedure(this.collection.databaseId, this.collection.id(), this.id()).then(
() => {
this.container.tabsManager.closeTabsByComparator((tab: TabsBase) => tab.node && tab.node.rid === this.rid);
useTabs.getState().closeTabsByComparator((tab: TabsBase) => tab.node && tab.node.rid === this.rid);
this.collection.children.remove(this);
},
(reason) => {}
@ -149,7 +152,9 @@ export default class StoredProcedure {
}
public execute(params: string[], partitionKeyValue?: string): void {
const sprocTabs: NewStoredProcedureTab[] = this.container.tabsManager.getTabs(
const sprocTabs: NewStoredProcedureTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.StoredProcedures,
(tab: TabsBase) => tab.node && tab.node.rid === this.rid
) as NewStoredProcedureTab[];

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

@ -3,6 +3,7 @@ import * as ko from "knockout";
import * as Constants from "../../Common/Constants";
import { deleteTrigger } from "../../Common/dataAccess/deleteTrigger";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import Explorer from "../Explorer";
@ -42,7 +43,7 @@ export default class Trigger {
}
public static create(source: ViewModels.Collection, event: MouseEvent) {
const id = source.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Triggers).length + 1;
const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.Triggers).length + 1;
const trigger = <StoredProcedureDefinition>{
id: "",
body: "function trigger(){}",
@ -60,20 +61,19 @@ export default class Trigger {
node: source,
});
source.container.tabsManager.activateNewTab(triggerTab);
useTabs.getState().activateNewTab(triggerTab);
}
public open = () => {
this.select();
const triggerTabs: TriggerTab[] = this.container.tabsManager.getTabs(
ViewModels.CollectionTabKind.Triggers,
(tab) => tab.node && tab.node.rid === this.rid
) as TriggerTab[];
const triggerTabs: TriggerTab[] = useTabs
.getState()
.getTabs(ViewModels.CollectionTabKind.Triggers, (tab) => tab.node && tab.node.rid === this.rid) as TriggerTab[];
let triggerTab: TriggerTab = triggerTabs && triggerTabs[0];
if (triggerTab) {
this.container.tabsManager.activateTab(triggerTab);
useTabs.getState().activateTab(triggerTab);
} else {
const triggerData = <StoredProcedureDefinition>{
_rid: this.rid,
@ -94,7 +94,7 @@ export default class Trigger {
node: this,
});
this.container.tabsManager.activateNewTab(triggerTab);
useTabs.getState().activateNewTab(triggerTab);
}
};
@ -105,7 +105,7 @@ export default class Trigger {
deleteTrigger(this.collection.databaseId, this.collection.id(), this.id()).then(
() => {
this.container.tabsManager.closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
useTabs.getState().closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
this.collection.children.remove(this);
},
(reason) => {}

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

@ -3,6 +3,7 @@ import * as ko from "knockout";
import * as Constants from "../../Common/Constants";
import { deleteUserDefinedFunction } from "../../Common/dataAccess/deleteUserDefinedFunction";
import * as ViewModels from "../../Contracts/ViewModels";
import { useTabs } from "../../hooks/useTabs";
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import Explorer from "../Explorer";
@ -30,7 +31,7 @@ export default class UserDefinedFunction {
}
public static create(source: ViewModels.Collection, event: MouseEvent) {
const id = source.container.tabsManager.getTabs(ViewModels.CollectionTabKind.UserDefinedFunctions).length + 1;
const id = useTabs.getState().getTabs(ViewModels.CollectionTabKind.UserDefinedFunctions).length + 1;
const userDefinedFunction = {
id: "",
body: "function userDefinedFunction(){}",
@ -46,20 +47,22 @@ export default class UserDefinedFunction {
node: source,
});
source.container.tabsManager.activateNewTab(userDefinedFunctionTab);
useTabs.getState().activateNewTab(userDefinedFunctionTab);
}
public open = () => {
this.select();
const userDefinedFunctionTabs: UserDefinedFunctionTab[] = this.container.tabsManager.getTabs(
const userDefinedFunctionTabs: UserDefinedFunctionTab[] = useTabs
.getState()
.getTabs(
ViewModels.CollectionTabKind.UserDefinedFunctions,
(tab) => tab.node?.rid === this.rid
) as UserDefinedFunctionTab[];
let userDefinedFunctionTab: UserDefinedFunctionTab = userDefinedFunctionTabs && userDefinedFunctionTabs[0];
if (userDefinedFunctionTab) {
this.container.tabsManager.activateTab(userDefinedFunctionTab);
useTabs.getState().activateTab(userDefinedFunctionTab);
} else {
const userDefinedFunctionData = {
_rid: this.rid,
@ -78,7 +81,7 @@ export default class UserDefinedFunction {
node: this,
});
this.container.tabsManager.activateNewTab(userDefinedFunctionTab);
useTabs.getState().activateNewTab(userDefinedFunctionTab);
}
};
@ -98,7 +101,7 @@ export default class UserDefinedFunction {
deleteUserDefinedFunction(this.collection.databaseId, this.collection.id(), this.id()).then(
() => {
this.container.tabsManager.closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
useTabs.getState().closeTabsByComparator((tab) => tab.node && tab.node.rid === this.rid);
this.collection.children.remove(this);
},
(reason) => {}

17
src/Explorer/useDatabases.ts
View File

@ -2,6 +2,7 @@ import _ from "underscore";
import create, { UseStore } from "zustand";
import * as Constants from "../Common/Constants";
import * as ViewModels from "../Contracts/ViewModels";
import { useSelectedNode } from "./useSelectedNode";
interface DatabasesState {
databases: ViewModels.Database[];
@ -17,6 +18,7 @@ interface DatabasesState {
isLastCollection: () => boolean;
loadDatabaseOffers: () => Promise<void>;
isFirstResourceCreated: () => boolean;
findSelectedDatabase: () => ViewModels.Database;
}
export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
@ -112,4 +114,19 @@ export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
return false;
});
},
findSelectedDatabase: (): ViewModels.Database => {
const selectedNode = useSelectedNode.getState().selectedNode;
if (!selectedNode) {
return undefined;
}
if (selectedNode.nodeKind === "Database") {
return _.find(get().databases, (database: ViewModels.Database) => database.id() === selectedNode.id());
}
if (selectedNode.nodeKind === "Collection") {
return selectedNode.database;
}
return selectedNode.collection?.database;
},
}));

26
src/Explorer/useSelectedNode.ts
View File

@ -1,17 +1,13 @@
import _ from "underscore";
import create, { UseStore } from "zustand";
import * as ViewModels from "../Contracts/ViewModels";
import TabsBase from "./Tabs/TabsBase";
import { useDatabases } from "./useDatabases";
import { useTabs } from "../hooks/useTabs";
export interface SelectedNodeState {
selectedNode: ViewModels.TreeNode;
setSelectedNode: (node: ViewModels.TreeNode) => void;
isDatabaseNodeOrNoneSelected: () => boolean;
findSelectedDatabase: () => ViewModels.Database;
findSelectedCollection: () => ViewModels.Collection;
isDataNodeSelected: (
activeTab: TabsBase,
databaseId: string,
collectionId?: string,
subnodeKinds?: ViewModels.CollectionTabKind[]
@ -25,30 +21,11 @@ export const useSelectedNode: UseStore<SelectedNodeState> = create((set, get) =>
const selectedNode = get().selectedNode;
return !selectedNode || selectedNode.nodeKind === "Database";
},
findSelectedDatabase: (): ViewModels.Database => {
const selectedNode = get().selectedNode;
if (!selectedNode) {
return undefined;
}
if (selectedNode.nodeKind === "Database") {
return _.find(
useDatabases.getState().databases,
(database: ViewModels.Database) => database.id() === selectedNode.id()
);
}
if (selectedNode.nodeKind === "Collection") {
return selectedNode.database;
}
return selectedNode.collection?.database;
},
findSelectedCollection: (): ViewModels.Collection => {
const selectedNode = get().selectedNode;
return (selectedNode.nodeKind === "Collection" ? selectedNode : selectedNode.collection) as ViewModels.Collection;
},
isDataNodeSelected: (
activeTab: TabsBase,
databaseId: string,
collectionId?: string,
subnodeKinds?: ViewModels.CollectionTabKind[]
@ -70,6 +47,7 @@ export const useSelectedNode: UseStore<SelectedNodeState> = create((set, get) =>
return true;
}
const activeTab = useTabs.getState().activeTab;
const selectedSubnodeKind = collectionId
? (selectedNode as ViewModels.Collection).selectedSubnodeKind()
: (selectedNode as ViewModels.Database).selectedSubnodeKind();

13
src/Main.tsx
View File

@ -34,7 +34,6 @@ import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
import "./Explorer/Controls/TreeComponent/treeComponent.less";
import { ExplorerParams } from "./Explorer/Explorer";
import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
@ -56,14 +55,10 @@ initializeIcons();
const App: React.FunctionComponent = () => {
const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
const { tabs, activeTab, tabsManager } = useTabs();
const explorerParams: ExplorerParams = {
tabsManager,
};
const openedTabs = useTabs((state) => state.openedTabs);
const config = useConfig();
const explorer = useKnockoutExplorer(config?.platform, explorerParams);
const explorer = useKnockoutExplorer(config?.platform);
const toggleLeftPaneExpanded = () => {
setIsLeftPaneExpanded(!isLeftPaneExpanded);
@ -100,8 +95,8 @@ const App: React.FunctionComponent = () => {
</div>
</div>
{/* Collections Tree - End */}
{tabs.length === 0 && <SplashScreen explorer={explorer} />}
<Tabs tabs={tabs} activeTab={activeTab} />
{openedTabs.length === 0 && <SplashScreen explorer={explorer} />}
<Tabs />
</div>
{/* Collections Tree and Tabs - End */}
<div

46
src/hooks/useKnockoutExplorer.ts
View File

@ -8,7 +8,7 @@ import { configContext, Platform, updateConfigContext } from "../ConfigContext";
import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
import { MessageTypes } from "../Contracts/ExplorerContracts";
import { DataExplorerInputsFrame } from "../Contracts/ViewModels";
import Explorer, { ExplorerParams } from "../Explorer/Explorer";
import Explorer from "../Explorer/Explorer";
import { handleOpenAction } from "../Explorer/OpenActions/OpenActions";
import { useDatabases } from "../Explorer/useDatabases";
import {
@ -37,20 +37,20 @@ import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
// This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
// Please tread carefully :)
export function useKnockoutExplorer(platform: Platform, explorerParams: ExplorerParams): Explorer {
export function useKnockoutExplorer(platform: Platform): Explorer {
const [explorer, setExplorer] = useState<Explorer>();
useEffect(() => {
const effect = async () => {
if (platform) {
if (platform === Platform.Hosted) {
const explorer = await configureHosted(explorerParams);
const explorer = await configureHosted();
setExplorer(explorer);
} else if (platform === Platform.Emulator) {
const explorer = configureEmulator(explorerParams);
const explorer = configureEmulator();
setExplorer(explorer);
} else if (platform === Platform.Portal) {
const explorer = await configurePortal(explorerParams);
const explorer = await configurePortal();
setExplorer(explorer);
}
}
@ -67,21 +67,21 @@ export function useKnockoutExplorer(platform: Platform, explorerParams: Explorer
return explorer;
}
async function configureHosted(explorerParams: ExplorerParams): Promise<Explorer> {
async function configureHosted(): Promise<Explorer> {
const win = (window as unknown) as HostedExplorerChildFrame;
if (win.hostedConfig.authType === AuthType.EncryptedToken) {
return configureHostedWithEncryptedToken(win.hostedConfig, explorerParams);
return configureHostedWithEncryptedToken(win.hostedConfig);
} else if (win.hostedConfig.authType === AuthType.ResourceToken) {
return configureHostedWithResourceToken(win.hostedConfig, explorerParams);
return configureHostedWithResourceToken(win.hostedConfig);
} else if (win.hostedConfig.authType === AuthType.ConnectionString) {
return configureHostedWithConnectionString(win.hostedConfig, explorerParams);
return configureHostedWithConnectionString(win.hostedConfig);
} else if (win.hostedConfig.authType === AuthType.AAD) {
return configureHostedWithAAD(win.hostedConfig, explorerParams);
return configureHostedWithAAD(win.hostedConfig);
}
throw new Error(`Unknown hosted config: ${win.hostedConfig}`);
}
async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParams): Promise<Explorer> {
async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
// TODO: Refactor. updateUserContext needs to be called twice because listKeys below depends on userContext.authorizationToken
updateUserContext({
authType: AuthType.AAD,
@ -120,11 +120,11 @@ async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParam
databaseAccount: config.databaseAccount,
masterKey: keys.primaryMasterKey,
});
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
return explorer;
}
function configureHostedWithConnectionString(config: ConnectionString, explorerParams: ExplorerParams): Explorer {
function configureHostedWithConnectionString(config: ConnectionString): Explorer {
const apiExperience = DefaultExperienceUtility.getDefaultExperienceFromApiKind(config.encryptedTokenMetadata.apiKind);
const databaseAccount = {
id: "",
@ -142,11 +142,11 @@ function configureHostedWithConnectionString(config: ConnectionString, explorerP
databaseAccount,
masterKey: config.masterKey,
});
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
return explorer;
}
function configureHostedWithResourceToken(config: ResourceToken, explorerParams: ExplorerParams): Explorer {
function configureHostedWithResourceToken(config: ResourceToken): Explorer {
const parsedResourceToken = parseResourceTokenConnectionString(config.resourceToken);
const databaseAccount = {
id: "",
@ -167,11 +167,11 @@ function configureHostedWithResourceToken(config: ResourceToken, explorerParams:
partitionKey: parsedResourceToken.partitionKey,
},
});
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
return explorer;
}
function configureHostedWithEncryptedToken(config: EncryptedToken, explorerParams: ExplorerParams): Explorer {
function configureHostedWithEncryptedToken(config: EncryptedToken): Explorer {
const apiExperience = DefaultExperienceUtility.getDefaultExperienceFromApiKind(config.encryptedTokenMetadata.apiKind);
updateUserContext({
authType: AuthType.EncryptedToken,
@ -185,20 +185,20 @@ function configureHostedWithEncryptedToken(config: EncryptedToken, explorerParam
properties: getDatabaseAccountPropertiesFromMetadata(config.encryptedTokenMetadata),
},
});
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
return explorer;
}
function configureEmulator(explorerParams: ExplorerParams): Explorer {
function configureEmulator(): Explorer {
updateUserContext({
databaseAccount: emulatorAccount,
authType: AuthType.MasterKey,
});
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
return explorer;
}
async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer> {
async function configurePortal(): Promise<Explorer> {
updateUserContext({
authType: AuthType.AAD,
});
@ -214,7 +214,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
);
console.dir(message);
updateContextsFromPortalMessage(message);
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
// In development mode, save the iframe message from the portal in session storage.
// This allows webpack hot reload to funciton properly
if (process.env.NODE_ENV === "development") {
@ -250,7 +250,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
}
updateContextsFromPortalMessage(inputs);
const explorer = new Explorer(explorerParams);
const explorer = new Explorer();
resolve(explorer);
if (openAction) {
handleOpenAction(openAction, useDatabases.getState().databases, explorer);

87
src/hooks/useTabs.ts
View File

@ -1,18 +1,77 @@
import { useState } from "react";
import create, { UseStore } from "zustand";
import * as ViewModels from "../Contracts/ViewModels";
import TabsBase from "../Explorer/Tabs/TabsBase";
import { TabsManager } from "../Explorer/Tabs/TabsManager";
import { useObservable } from "./useObservable";
export type UseTabs = {
tabs: readonly TabsBase[];
interface TabsState {
openedTabs: TabsBase[];
activeTab: TabsBase;
tabsManager: TabsManager;
};
export function useTabs(): UseTabs {
const [tabsManager] = useState(() => new TabsManager());
const tabs = useObservable(tabsManager.openedTabs);
const activeTab = useObservable(tabsManager.activeTab);
return { tabs, activeTab, tabsManager };
activateTab: (tab: TabsBase) => void;
activateNewTab: (tab: TabsBase) => void;
updateTab: (tab: TabsBase) => void;
getTabs: (tabKind: ViewModels.CollectionTabKind, comparator?: (tab: TabsBase) => boolean) => TabsBase[];
refreshActiveTab: (comparator: (tab: TabsBase) => boolean) => void;
closeTabsByComparator: (comparator: (tab: TabsBase) => boolean) => void;
closeTab: (tab: TabsBase) => void;
}
export const useTabs: UseStore<TabsState> = create((set, get) => ({
openedTabs: [],
activeTab: undefined,
activateTab: (tab: TabsBase): void => {
if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
set({ activeTab: tab });
tab.onActivate();
}
},
activateNewTab: (tab: TabsBase): void => {
set((state) => ({ openedTabs: [...state.openedTabs, tab], activeTab: tab }));
tab.onActivate();
},
updateTab: (tab: TabsBase) => {
if (get().activeTab?.tabId === tab.tabId) {
set({ activeTab: tab });
}
set((state) => ({
openedTabs: state.openedTabs.map((openedTab) => {
if (openedTab.tabId === tab.tabId) {
return tab;
}
return openedTab;
}),
}));
},
getTabs: (tabKind: ViewModels.CollectionTabKind, comparator?: (tab: TabsBase) => boolean): TabsBase[] =>
get().openedTabs.filter((tab) => tab.tabKind === tabKind && (!comparator || comparator(tab))),
refreshActiveTab: (comparator: (tab: TabsBase) => boolean): void => {
// ensures that the tab selects/highlights the right node based on resource tree expand/collapse state
const activeTab = get().activeTab;
activeTab && comparator(activeTab) && activeTab.onActivate();
},
closeTabsByComparator: (comparator: (tab: TabsBase) => boolean): void =>
get()
.openedTabs.filter(comparator)
.forEach((tab) => tab.onCloseTabButtonClick()),
closeTab: (tab: TabsBase): void => {
let tabIndex: number;
const { activeTab, openedTabs } = get();
const updatedTabs = openedTabs.filter((openedTab, index) => {
if (tab.tabId === openedTab.tabId) {
tabIndex = index;
return false;
}
return true;
});
if (updatedTabs.length === 0) {
set({ activeTab: undefined });
}
if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
const tabToTheRight = updatedTabs[tabIndex];
const lastOpenTab = updatedTabs[updatedTabs.length - 1];
set({ activeTab: tabToTheRight || lastOpenTab });
}
set({ openedTabs: updatedTabs });
},
}));