From c1d4008895fcb504966f2e8919ed06eaa1846ea7 Mon Sep 17 00:00:00 2001 From: Jordi Bunster Date: Wed, 23 Jun 2021 22:07:10 -0700 Subject: [PATCH] Bypass ko<->React adapter in SettingsTab (#732) Co-authored-by: Steve Faulkner --- .../Controls/Settings/SettingsComponent.tsx | 36 +++++ .../Settings/SettingsComponentAdapter.tsx | 14 -- src/Explorer/Tabs/SettingsTabV2.tsx | 128 +----------------- 3 files changed, 42 insertions(+), 136 deletions(-) delete mode 100644 src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx index 0094806c6..cc7cc15ba 100644 --- a/src/Explorer/Controls/Settings/SettingsComponent.tsx +++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx @@ -16,6 +16,7 @@ import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/T import { userContext } from "../../../UserContext"; import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types"; import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils"; +import { logConsoleError } from "../../../Utils/NotificationConsoleUtils"; import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent"; import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter"; import { SettingsTabV2 } from "../../Tabs/SettingsTabV2"; @@ -109,6 +110,7 @@ export interface SettingsComponentState { initialNotification: DataModels.Notification; selectedTab: SettingsV2TabTypes; + offerLoaded: boolean; } export class SettingsComponent extends React.Component { @@ -193,6 +195,7 @@ export class SettingsComponent extends React.Component { let finalIndexes: MongoIndex[] = []; this.state.currentMongoIndexes?.map((mongoIndex: MongoIndex, index: number) => { @@ -905,6 +937,10 @@ export class SettingsComponent extends React.Component; + } + const subSettingsComponentProps: SubSettingsComponentProps = { collection: this.collection, isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled, diff --git a/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx b/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx deleted file mode 100644 index 6fd2cff07..000000000 --- a/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import ko from "knockout"; -import * as React from "react"; -import { ReactAdapter } from "../../../Bindings/ReactBindingHandler"; -import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent"; - -export class SettingsComponentAdapter implements ReactAdapter { - public parameters: ko.Computed; - - constructor(private props: SettingsComponentProps) {} - - public renderComponent(): JSX.Element { - return this.parameters() ? : <>; - } -} diff --git a/src/Explorer/Tabs/SettingsTabV2.tsx b/src/Explorer/Tabs/SettingsTabV2.tsx index 1221a53f7..e0f5358af 100644 --- a/src/Explorer/Tabs/SettingsTabV2.tsx +++ b/src/Explorer/Tabs/SettingsTabV2.tsx @@ -1,139 +1,23 @@ -import ko from "knockout"; -import * as Constants from "../../Common/Constants"; -import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"; -import * as DataModels from "../../Contracts/DataModels"; +import React from "react"; import * as ViewModels from "../../Contracts/ViewModels"; -import { Action } from "../../Shared/Telemetry/TelemetryConstants"; -import { traceFailure } from "../../Shared/Telemetry/TelemetryProcessor"; -import { logConsoleError } from "../../Utils/NotificationConsoleUtils"; -import { SettingsComponentProps } from "../Controls/Settings/SettingsComponent"; -import { SettingsComponentAdapter } from "../Controls/Settings/SettingsComponentAdapter"; +import { SettingsComponent } from "../Controls/Settings/SettingsComponent"; import TabsBase from "./TabsBase"; export class SettingsTabV2 extends TabsBase { - public readonly html = '
'; - public settingsComponentAdapter: SettingsComponentAdapter; - - constructor(options: ViewModels.TabOptions) { - super(options); - const props: SettingsComponentProps = { - settingsTab: this, - }; - this.settingsComponentAdapter = new SettingsComponentAdapter(props); + public render(): JSX.Element { + return ; } } export class CollectionSettingsTabV2 extends SettingsTabV2 { - private notificationRead: ko.Observable; - private notification: DataModels.Notification; - private offerRead: ko.Observable; - - constructor(options: ViewModels.TabOptions) { - super(options); - - this.tabId = "SettingsV2-" + this.tabId; - this.notificationRead = ko.observable(false); - this.offerRead = ko.observable(false); - this.settingsComponentAdapter.parameters = ko.computed(() => { - if (this.notificationRead() && this.offerRead()) { - this.pendingNotification(this.notification); - this.notification = undefined; - this.offerRead(false); - this.notificationRead(false); - return true; - } - return false; - }); - } - - public async onActivate(): Promise { - try { - this.isExecuting(true); - - const collection: ViewModels.Collection = this.collection as ViewModels.Collection; - await collection.loadOffer(); - // passed in options and set by parent as "Settings" by default - this.tabTitle(collection.offer() ? "Settings" : "Scale & Settings"); - - const data: DataModels.Notification = await collection.getPendingThroughputSplitNotification(); - this.notification = data; - this.notificationRead(true); - } catch (error) { - const errorMessage = getErrorMessage(error); - this.notification = undefined; - this.notificationRead(true); - traceFailure( - Action.Tab, - { - databaseName: this.collection.databaseId, - collectionName: this.collection.id(), - - dataExplorerArea: Constants.Areas.Tab, - tabTitle: this.tabTitle, - error: errorMessage, - errorStack: getErrorStack(error), - }, - this.onLoadStartKey - ); - logConsoleError(`Error while fetching container settings for container ${this.collection.id()}: ${errorMessage}`); - throw error; - } finally { - this.offerRead(true); - this.isExecuting(false); - } - + public onActivate(): void { super.onActivate(); this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.CollectionSettingsV2); } } export class DatabaseSettingsTabV2 extends SettingsTabV2 { - private notificationRead: ko.Observable; - private notification: DataModels.Notification; - - constructor(options: ViewModels.TabOptions) { - super(options); - this.tabId = "DatabaseSettingsV2-" + this.tabId; - this.notificationRead = ko.observable(false); - this.settingsComponentAdapter.parameters = ko.computed(() => { - if (this.notificationRead()) { - this.pendingNotification(this.notification); - this.notification = undefined; - this.notificationRead(false); - return true; - } - return false; - }); - } - - public async onActivate(): Promise { - try { - this.isExecuting(true); - - const data: DataModels.Notification = await this.database.getPendingThroughputSplitNotification(); - this.notification = data; - this.notificationRead(true); - } catch (error) { - const errorMessage = getErrorMessage(error); - this.notification = undefined; - this.notificationRead(true); - traceFailure( - Action.Tab, - { - databaseName: this.database.id(), - dataExplorerArea: Constants.Areas.Tab, - tabTitle: this.tabTitle, - error: errorMessage, - errorStack: getErrorStack(error), - }, - this.onLoadStartKey - ); - logConsoleError(`Error while fetching database settings for database ${this.database.id()}: ${errorMessage}`); - throw error; - } finally { - this.isExecuting(false); - } - + public onActivate(): void { super.onActivate(); this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettingsV2); }