Remove Pane Stubs (#102)

src/Contracts/ViewModels.ts

@@ -1,17 +1,12 @@
 import * as DataModels from "./DataModels";
-import * as Entities from "../Explorer/Tables/Entities";
 import * as monaco from "monaco-editor";
 import DocumentClientUtilityBase from "../Common/DocumentClientUtilityBase";
 import Q from "q";
-import QueryViewModel from "../Explorer/Tables/QueryBuilder/QueryViewModel";
-import TableEntityListViewModel from "../Explorer/Tables/DataTable/TableEntityListViewModel";
 import { AccessibleVerticalList } from "../Explorer/Tree/AccessibleVerticalList";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { ExecuteSprocParam } from "../Explorer/Panes/ExecuteSprocParamsPane";
 import { GitHubClient } from "../GitHub/GitHubClient";
-import { IColumnSetting } from "../Explorer/Panes/Tables/TableColumnOptionsPane";
 import { JunoClient, IGalleryItem } from "../Juno/JunoClient";
 import { NotebookContentItem } from "../Explorer/Notebook/NotebookContentItem";
 import { QueryMetrics } from "@azure/cosmos";
@@ -356,78 +351,6 @@ export interface AddCollectionPaneOptions extends PaneOptions {
   databaseSelfLink?: string;
 }
 
-export interface AddCollectionPane extends ContextualPane {
-  collectionIdTitle: ko.Observable<string>;
-  collectionWithThroughputInSharedTitle: ko.Observable<string>;
-  databaseId: ko.Observable<string>;
-  partitionKey: ko.Observable<string>;
-  storage: ko.Observable<string>;
-  throughputSinglePartition: ko.Observable<number>;
-  throughputMultiPartition: ko.Observable<number>;
-
-  open: (databaseId?: string) => void;
-  onStorageOptionsKeyDown(source: any, event: KeyboardEvent): boolean;
-  onRupmOptionsKeyDown(source: any, event: KeyboardEvent): void;
-  onEnableSynapseLinkButtonClicked: () => void;
-}
-
-export interface AddDatabasePane extends ContextualPane {}
-
-export interface DeleteDatabaseConfirmationPane extends ContextualPane {
-  databaseIdConfirmation: ko.Observable<string>;
-  databaseIdConfirmationText: ko.Observable<string>;
-  databaseDeleteFeedback: ko.Observable<string>;
-}
-
-export interface DeleteCollectionConfirmationPane extends ContextualPane {
-  collectionIdConfirmation: ko.Observable<string>;
-  collectionIdConfirmationText: ko.Observable<string>;
-  containerDeleteFeedback: ko.Observable<string>;
-  recordDeleteFeedback: ko.Observable<boolean>;
-}
-
-export interface SettingsPane extends ContextualPane {
-  pageOption: ko.Observable<string>;
-  customItemPerPage: ko.Observable<number>;
-  crossPartitionQueryEnabled: ko.Observable<boolean>;
-  maxDegreeOfParallelism: ko.Observable<number>;
-  shouldShowQueryPageOptions: ko.Computed<boolean>;
-
-  onCustomPageOptionsKeyDown(source: any, event: KeyboardEvent): boolean;
-  onUnlimitedPageOptionKeyDown(source: any, event: KeyboardEvent): boolean;
-  onJsonDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean;
-  onGraphDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean;
-}
-
-export interface ExecuteSprocParamsPane extends ContextualPane {
-  params: ko.ObservableArray<ExecuteSprocParam>;
-  partitionKeyValue: ko.Observable<string>;
-
-  addNewParam(): void;
-}
-
-export interface RenewAdHocAccessPane extends ContextualPane {
-  accessKey: ko.Observable<string>;
-}
-
-export interface UploadItemsPane extends ContextualPane {
-  selectedFilesTitle: ko.Observable<string>;
-  files: ko.Observable<FileList>;
-
-  updateSelectedFiles(element: any, event: any): void;
-}
-
-export interface LoadQueryPane extends ContextualPane {
-  selectedFilesTitle: ko.Observable<string>;
-  files: ko.Observable<FileList>;
-
-  loadQueryFromFile(file: File): Q.Promise<void>;
-}
-
-export interface BrowseQueriesPane extends ContextualPane {
-  loadSavedQuery: (savedQuery: DataModels.Query) => void;
-}
-
 export interface UploadFilePaneOpenOptions {
   paneTitle: string;
   selectFileInputLabel: string;
@@ -450,10 +373,6 @@ export interface StringInputPaneOpenOptions {
   defaultInput?: string;
 }
 
-export interface UploadFilePane extends ContextualPane {
-  openWithOptions: (options: UploadFilePaneOpenOptions) => void;
-}
-
 /**
  * Graph configuration
  */
@@ -498,41 +417,6 @@ export interface InputProperty {
   values: InputPropertyValue[];
 }
 
-export interface GraphStylingPane extends ContextualPane {
-  setData(graphConfigUIData: GraphConfigUiData): void;
-}
-
-export interface NewVertexPane extends ContextualPane {
-  setPartitionKeyProperty: (pKeyProp: string) => void;
-  subscribeOnSubmitCreate: (callback: (newVertexData: NewVertexData) => void) => void;
-}
-
-export interface AddTableEntityPane extends ContextualPane {
-  tableViewModel: TableEntityListViewModel;
-}
-
-export interface EditTableEntityPane extends ContextualPane {
-  originEntity: Entities.ITableEntity;
-  tableViewModel: TableEntityListViewModel;
-  originalNumberOfProperties: number;
-}
-
-export interface TableColumnOptionsPane extends ContextualPane {
-  tableViewModel: TableEntityListViewModel;
-  parameters: IColumnSetting;
-  setDisplayedColumns(columnNames: string[], order: number[], visible: boolean[]): void;
-}
-
-export interface QuerySelectPane extends ContextualPane {
-  queryViewModel: QueryViewModel;
-}
-
-export interface CassandraAddCollectionPane extends ContextualPane {
-  createTableQuery: ko.Observable<string>;
-  keyspaceId: ko.Observable<string>;
-  userTableQuery: ko.Observable<string>;
-}
-
 export interface Editable<T> extends ko.Observable<T> {
   setBaseline(baseline: T): void;
 

src/Explorer/Explorer.ts

@@ -164,25 +164,25 @@ export default class Explorer {
   public tabsManager: TabsManager;
 
   // Contextual panes
-  public addDatabasePane: ViewModels.AddDatabasePane;
-  public addCollectionPane: ViewModels.AddCollectionPane;
-  public deleteCollectionConfirmationPane: ViewModels.DeleteCollectionConfirmationPane;
-  public deleteDatabaseConfirmationPane: ViewModels.DeleteDatabaseConfirmationPane;
-  public graphStylingPane: ViewModels.GraphStylingPane;
-  public addTableEntityPane: ViewModels.AddTableEntityPane;
-  public editTableEntityPane: ViewModels.EditTableEntityPane;
+  public addDatabasePane: AddDatabasePane;
+  public addCollectionPane: AddCollectionPane;
+  public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
+  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
+  public graphStylingPane: GraphStylingPane;
+  public addTableEntityPane: AddTableEntityPane;
+  public editTableEntityPane: EditTableEntityPane;
   public tableColumnOptionsPane: TableColumnOptionsPane;
   public querySelectPane: QuerySelectPane;
-  public newVertexPane: ViewModels.NewVertexPane;
-  public cassandraAddCollectionPane: ViewModels.CassandraAddCollectionPane;
-  public settingsPane: ViewModels.SettingsPane;
-  public executeSprocParamsPane: ViewModels.ExecuteSprocParamsPane;
-  public renewAdHocAccessPane: ViewModels.RenewAdHocAccessPane;
-  public uploadItemsPane: ViewModels.UploadItemsPane;
+  public newVertexPane: NewVertexPane;
+  public cassandraAddCollectionPane: CassandraAddCollectionPane;
+  public settingsPane: SettingsPane;
+  public executeSprocParamsPane: ExecuteSprocParamsPane;
+  public renewAdHocAccessPane: RenewAdHocAccessPane;
+  public uploadItemsPane: UploadItemsPane;
   public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
-  public loadQueryPane: ViewModels.LoadQueryPane;
+  public loadQueryPane: LoadQueryPane;
   public saveQueryPane: ViewModels.ContextualPane;
-  public browseQueriesPane: ViewModels.BrowseQueriesPane;
+  public browseQueriesPane: BrowseQueriesPane;
   public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;

src/Explorer/OpenActions.test.ts

@@ -1,9 +1,11 @@
 import * as ko from "knockout";
 import { handleOpenAction } from "./OpenActions";
 import * as ViewModels from "../Contracts/ViewModels";
-import { DatabaseStub, CollectionStub, AddCollectionPaneStub, CassandraAddCollectionPane } from "./OpenActionsStubs";
+import { DatabaseStub, CollectionStub } from "./OpenActionsStubs";
 import { ActionContracts } from "../Contracts/ExplorerContracts";
 import Explorer from "./Explorer";
+import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
+import AddCollectionPane from "./Panes/AddCollectionPane";
 
 describe("OpenActions", () => {
   describe("handleOpenAction", () => {
@@ -19,13 +21,13 @@ describe("OpenActions", () => {
     let onGraphDocumentsClick: jasmine.Spy;
     let onNewQueryClick: jasmine.Spy;
     let onSettingsClick: jasmine.Spy;
-    let openAddCollectionPane: jasmine.Spy;
-    let openCassandraAddCollectionPane: jasmine.Spy;
 
     beforeEach(() => {
       explorer = {} as Explorer;
-      explorer.addCollectionPane = new AddCollectionPaneStub();
-      explorer.cassandraAddCollectionPane = new CassandraAddCollectionPane();
+      explorer.addCollectionPane = {} as AddCollectionPane;
+      explorer.addCollectionPane.open = jest.fn();
+      explorer.cassandraAddCollectionPane = {} as CassandraAddCollectionPane;
+      explorer.cassandraAddCollectionPane.open = jest.fn();
       explorer.closeAllPanes = () => {};
       explorer.isConnectExplorerVisible = () => false;
 
@@ -45,8 +47,6 @@ describe("OpenActions", () => {
       onGraphDocumentsClick = spyOn(collection, "onGraphDocumentsClick");
       onNewQueryClick = spyOn(collection, "onNewQueryClick");
       onSettingsClick = spyOn(collection, "onSettingsClick");
-      openAddCollectionPane = spyOn(explorer.addCollectionPane, "open");
-      openCassandraAddCollectionPane = spyOn(explorer.cassandraAddCollectionPane, "open");
     });
 
     describe("unknown action type", () => {
@@ -84,7 +84,7 @@ describe("OpenActions", () => {
           };
 
           const actionHandled = handleOpenAction(action, [], explorer);
-          expect(openCassandraAddCollectionPane).toHaveBeenCalled();
+          expect(explorer.cassandraAddCollectionPane.open).toHaveBeenCalled();
         });
 
         it("enum value should call cassandraAddCollectionPane.open", () => {
@@ -94,7 +94,7 @@ describe("OpenActions", () => {
           };
 
           const actionHandled = handleOpenAction(action, [], explorer);
-          expect(openCassandraAddCollectionPane).toHaveBeenCalled();
+          expect(explorer.cassandraAddCollectionPane.open).toHaveBeenCalled();
         });
       });
 
@@ -106,7 +106,7 @@ describe("OpenActions", () => {
           };
 
           const actionHandled = handleOpenAction(action, [], explorer);
-          expect(openAddCollectionPane).toHaveBeenCalled();
+          expect(explorer.addCollectionPane.open).toHaveBeenCalled();
         });
 
         it("enum value should call addCollectionPane.open", () => {
@@ -116,7 +116,7 @@ describe("OpenActions", () => {
           };
 
           const actionHandled = handleOpenAction(action, [], explorer);
-          expect(openAddCollectionPane).toHaveBeenCalled();
+          expect(explorer.addCollectionPane.open).toHaveBeenCalled();
         });
       });
     });

src/Explorer/OpenActionsStubs.ts

@@ -347,81 +347,3 @@ export class CollectionStub implements ViewModels.Collection {
     throw new Error("Not implemented");
   }
 }
-
-class ContextualPaneStub implements ViewModels.ContextualPane {
-  public documentClientUtility: DocumentClientUtilityBase;
-  public formErrors: ko.Observable<string>;
-  public formErrorsDetails: ko.Observable<string>;
-  public id: string;
-  public title: ko.Observable<string>;
-  public visible: ko.Observable<boolean>;
-  public firstFieldHasFocus: ko.Observable<boolean>;
-  public isExecuting: ko.Observable<boolean>;
-
-  public submit() {
-    throw new Error("Not implemented");
-  }
-
-  public cancel() {
-    throw new Error("Not implemented");
-  }
-
-  public open() {
-    throw new Error("Not implemented");
-  }
-
-  public close() {
-    throw new Error("Not implemented");
-  }
-
-  public hideErrorDetails() {
-    throw new Error("Not implemented");
-  }
-
-  public resetData() {
-    throw new Error("Not implemented");
-  }
-
-  public showErrorDetails() {
-    throw new Error("Not implemented");
-  }
-
-  public onCloseKeyPress(source: any, event: KeyboardEvent): void {
-    throw new Error("Not implemented");
-  }
-
-  public onPaneKeyDown(source: any, event: KeyboardEvent): boolean {
-    throw new Error("Not implemented");
-  }
-}
-
-export class AddCollectionPaneStub extends ContextualPaneStub implements ViewModels.AddCollectionPane {
-  public collectionIdTitle: ko.Observable<string>;
-  public databaseId: ko.Observable<string>;
-  public partitionKey: ko.Observable<string>;
-  public storage: ko.Observable<string>;
-  public throughputSinglePartition: ko.Observable<number>;
-  public throughputMultiPartition: ko.Observable<number>;
-  public collectionMaxSharedThroughputTitle: ko.Observable<string>;
-  public collectionWithThroughputInSharedTitle: ko.Observable<string>;
-
-  public onEnableSynapseLinkButtonClicked() {
-    throw new Error("Not implemented");
-  }
-
-  public onStorageOptionsKeyDown(source: any, event: KeyboardEvent): boolean {
-    throw new Error("Not implemented");
-  }
-
-  public onRupmOptionsKeyDown(source: any, event: KeyboardEvent): void {
-    throw new Error("Not implemented");
-  }
-}
-
-export class AddDatabasePaneStub extends ContextualPaneStub implements ViewModels.AddDatabasePane {}
-
-export class CassandraAddCollectionPane extends ContextualPaneStub implements ViewModels.CassandraAddCollectionPane {
-  public createTableQuery: ko.Observable<string>;
-  public keyspaceId: ko.Observable<string>;
-  public userTableQuery: ko.Observable<string>;
-}

src/Explorer/Panes/AddCollectionPane.ts

@@ -21,7 +21,7 @@ import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
 import { HashMap } from "../../Common/HashMap";
 import { PlatformType } from "../../PlatformType";
 
-export default class AddCollectionPane extends ContextualPaneBase implements ViewModels.AddCollectionPane {
+export default class AddCollectionPane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
   public databaseIds: ko.ObservableArray<string>;
   public collectionId: ko.Observable<string>;

src/Explorer/Panes/AddDatabasePane.ts

@@ -17,7 +17,7 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import { CosmosClient } from "../../Common/CosmosClient";
 import { PlatformType } from "../../PlatformType";
 
-export default class AddDatabasePane extends ContextualPaneBase implements ViewModels.AddDatabasePane {
+export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
   public databaseIdLabel: ko.Computed<string>;
   public databaseId: ko.Observable<string>;

src/Explorer/Panes/BrowseQueriesPane.ts

@@ -7,7 +7,7 @@ import * as Logger from "../../Common/Logger";
 import { QueriesGridComponentAdapter } from "../Controls/QueriesGridReactComponent/QueriesGridComponentAdapter";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 
-export class BrowseQueriesPane extends ContextualPaneBase implements ViewModels.BrowseQueriesPane {
+export class BrowseQueriesPane extends ContextualPaneBase {
   public queriesGridComponentAdapter: QueriesGridComponentAdapter;
   public canSaveQueries: ko.Computed<boolean>;
 

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -13,8 +13,7 @@ import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { HashMap } from "../../Common/HashMap";
 
-export default class CassandraAddCollectionPane extends ContextualPaneBase
-  implements ViewModels.CassandraAddCollectionPane {
+export default class CassandraAddCollectionPane extends ContextualPaneBase {
   public createTableQuery: ko.Observable<string>;
   public keyspaceId: ko.Observable<string>;
   public maxThroughputRU: ko.Observable<number>;

src/Explorer/Panes/ContextualPaneBase.ts

@@ -1,5 +1,4 @@
 import * as ko from "knockout";
-
 import * as ViewModels from "../../Contracts/ViewModels";
 import * as Constants from "../../Common/Constants";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts

@@ -9,7 +9,7 @@ import DeleteFeedback from "../../Common/DeleteFeedback";
 import DocumentClientUtilityBase from "../../Common/DocumentClientUtilityBase";
 import Explorer from "../Explorer";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { CollectionStub, DatabaseStub } from "../OpenActionsStubs";
+import { DatabaseStub } from "../OpenActionsStubs";
 import { TreeNode } from "../../Contracts/ViewModels";
 
 describe("Delete Collection Confirmation Pane", () => {
@@ -22,7 +22,7 @@ describe("Delete Collection Confirmation Pane", () => {
 
     it("should be true if 1 database and 1 collection", () => {
       let database: ViewModels.Database = new DatabaseStub({});
-      database.collections = ko.observableArray<ViewModels.Collection>([new CollectionStub({})]);
+      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
       explorer.databases = ko.observableArray<ViewModels.Database>([database]);
       expect(explorer.isLastCollection()).toBe(true);
     });
@@ -30,8 +30,8 @@ describe("Delete Collection Confirmation Pane", () => {
     it("should be false if if 1 database and 2 collection", () => {
       let database: ViewModels.Database = new DatabaseStub({});
       database.collections = ko.observableArray<ViewModels.Collection>([
-        new CollectionStub({}),
-        new CollectionStub({})
+        {} as ViewModels.Collection,
+        {} as ViewModels.Collection
       ]);
       explorer.databases = ko.observableArray<ViewModels.Database>([database]);
       expect(explorer.isLastCollection()).toBe(false);
@@ -39,9 +39,9 @@ describe("Delete Collection Confirmation Pane", () => {
 
     it("should be false if 2 database and 1 collection each", () => {
       let database: ViewModels.Database = new DatabaseStub({});
-      database.collections = ko.observableArray<ViewModels.Collection>([new CollectionStub({})]);
+      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
       let database2: ViewModels.Database = new DatabaseStub({});
-      database2.collections = ko.observableArray<ViewModels.Collection>([new CollectionStub({})]);
+      database2.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
       explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
       expect(explorer.isLastCollection()).toBe(false);
     });
@@ -100,11 +100,12 @@ describe("Delete Collection Confirmation Pane", () => {
       let fakeDocumentClientUtility = {} as DocumentClientUtilityBase;
       fakeDocumentClientUtility.deleteCollection = () => Q(null);
       let fakeExplorer = {} as Explorer;
-      fakeExplorer.findSelectedCollection = () =>
-        new CollectionStub({
+      fakeExplorer.findSelectedCollection = () => {
+        return {
           id: ko.observable<string>(selectedCollectionId),
           rid: "test"
-        });
+        } as ViewModels.Collection;
+      };
       fakeExplorer.isNotificationConsoleExpanded = ko.observable<boolean>(false);
       fakeExplorer.selectedCollectionId = ko.computed<string>(() => selectedCollectionId);
       fakeExplorer.isSelectedDatabaseShared = () => false;

src/Explorer/Panes/DeleteCollectionConfirmationPane.ts

@@ -12,8 +12,7 @@ import DeleteFeedback from "../../Common/DeleteFeedback";
 import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 
-export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
-  implements ViewModels.DeleteCollectionConfirmationPane {
+export default class DeleteCollectionConfirmationPane extends ContextualPaneBase {
   public collectionIdConfirmationText: ko.Observable<string>;
   public collectionIdConfirmation: ko.Observable<string>;
   public containerDeleteFeedback: ko.Observable<string>;

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -13,8 +13,7 @@ import DeleteFeedback from "../../Common/DeleteFeedback";
 import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 
-export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase
-  implements ViewModels.DeleteDatabaseConfirmationPane {
+export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
   public databaseIdConfirmationText: ko.Observable<string>;
   public databaseIdConfirmation: ko.Observable<string>;
   public databaseDeleteFeedback: ko.Observable<string>;

src/Explorer/Panes/ExecuteSprocParamsPane.ts

@@ -14,7 +14,7 @@ type UnwrappedExecuteSprocParam = {
   value: any;
 };
 
-export class ExecuteSprocParamsPane extends ContextualPaneBase implements ViewModels.ExecuteSprocParamsPane {
+export class ExecuteSprocParamsPane extends ContextualPaneBase {
   public params: ko.ObservableArray<ExecuteSprocParam>;
   public partitionKeyType: ko.Observable<string>;
   public partitionKeyValue: ko.Observable<string>;

src/Explorer/Panes/GraphStylingPane.ts

@@ -2,7 +2,7 @@ import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 
-export default class GraphStylingPane extends ContextualPaneBase implements ViewModels.GraphStylingPane {
+export default class GraphStylingPane extends ContextualPaneBase {
   public graphConfigUIData: ViewModels.GraphConfigUiData;
   private remoteConfig: ViewModels.GraphConfigUiData;
 

src/Explorer/Panes/LoadQueryPane.ts

@@ -7,7 +7,7 @@ import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsol
 import * as Logger from "../../Common/Logger";
 import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 
-export class LoadQueryPane extends ContextualPaneBase implements ViewModels.LoadQueryPane {
+export class LoadQueryPane extends ContextualPaneBase {
   public selectedFilesTitle: ko.Observable<string>;
   public files: ko.Observable<FileList>;
 

src/Explorer/Panes/NewVertexPane.ts

@@ -4,7 +4,7 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import { KeyCodes } from "../../Common/Constants";
 import Explorer from "../Explorer";
 
-export default class NewVertexPane extends ContextualPaneBase implements ViewModels.NewVertexPane {
+export default class NewVertexPane extends ContextualPaneBase {
   public container: Explorer;
   public visible: ko.Observable<boolean>;
   public formErrors: ko.Observable<string>;

src/Explorer/Panes/RenewAdHocAccessPane.ts

@@ -8,7 +8,7 @@ import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsol
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
 import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 
-export class RenewAdHocAccessPane extends ContextualPaneBase implements ViewModels.RenewAdHocAccessPane {
+export class RenewAdHocAccessPane extends ContextualPaneBase {
   public accessKey: ko.Observable<string>;
   public isHelperImageVisible: ko.Observable<boolean>;
 

src/Explorer/Panes/SettingsPane.ts

@@ -8,7 +8,7 @@ import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import { StringUtility } from "../../Shared/StringUtility";
 import { config } from "../../Config";
 
-export class SettingsPane extends ContextualPaneBase implements ViewModels.SettingsPane {
+export class SettingsPane extends ContextualPaneBase {
   public pageOption: ko.Observable<string>;
   public customItemPerPage: ko.Observable<number>;
   public crossPartitionQueryEnabled: ko.Observable<boolean>;

src/Explorer/Panes/Tables/AddTableEntityPane.ts

@@ -9,7 +9,7 @@ import * as Utilities from "../../Tables/Utilities";
 import EntityPropertyViewModel from "./EntityPropertyViewModel";
 import TableEntityPane from "./TableEntityPane";
 
-export default class AddTableEntityPane extends TableEntityPane implements ViewModels.AddTableEntityPane {
+export default class AddTableEntityPane extends TableEntityPane {
   private static _excludedFields: string[] = [TableConstants.EntityKeyNames.Timestamp];
 
   private static _readonlyFields: string[] = [

src/Explorer/Panes/Tables/EditTableEntityPane.ts

@@ -10,7 +10,7 @@ import EntityPropertyViewModel from "./EntityPropertyViewModel";
 import * as TableEntityProcessor from "../../Tables/TableEntityProcessor";
 import Explorer from "../../Explorer";
 
-export default class EditTableEntityPane extends TableEntityPane implements ViewModels.EditTableEntityPane {
+export default class EditTableEntityPane extends TableEntityPane {
   container: Explorer;
   visible: ko.Observable<boolean>;
 

src/Explorer/Panes/Tables/QuerySelectPane.ts

@@ -11,7 +11,7 @@ export interface ISelectColumn {
   editable: ko.Observable<boolean>;
 }
 
-export class QuerySelectPane extends ContextualPaneBase implements ViewModels.QuerySelectPane {
+export class QuerySelectPane extends ContextualPaneBase {
   public titleLabel: string = "Select Columns";
   public instructionLabel: string = "Select the columns that you want to query.";
   public availableColumnsTableQueryLabel: string = "Available Columns";

src/Explorer/Panes/Tables/TableColumnOptionsPane.ts

@@ -28,7 +28,7 @@ export interface IColumnSetting {
   order?: number[];
 }
 
-export class TableColumnOptionsPane extends ContextualPaneBase implements ViewModels.TableColumnOptionsPane {
+export class TableColumnOptionsPane extends ContextualPaneBase {
   public titleLabel: string = "Column Options";
   public instructionLabel: string = "Choose the columns and the order in which you want to display them in the table.";
   public availableColumnsLabel: string = "Available Columns";

src/Explorer/Panes/UploadFilePane.ts

@@ -5,7 +5,7 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 
-export class UploadFilePane extends ContextualPaneBase implements ViewModels.UploadFilePane {
+export class UploadFilePane extends ContextualPaneBase {
   public selectedFilesTitle: ko.Observable<string>;
   public files: ko.Observable<FileList>;
   private openOptions: ViewModels.UploadFilePaneOpenOptions;

src/Explorer/Tabs/GraphTab.ts

@@ -7,6 +7,8 @@ import { GraphExplorerAdapter } from "../Graph/GraphExplorerComponent/GraphExplo
 import { GraphAccessor, GraphExplorerError } from "../Graph/GraphExplorerComponent/GraphExplorer";
 import NewVertexIcon from "../../../images/NewVertex.svg";
 import StyleIcon from "../../../images/Style.svg";
+import GraphStylingPane from "../Panes/GraphStylingPane";
+import NewVertexPane from "../Panes/NewVertexPane";
 
 export interface GraphIconMap {
   [key: string]: { data: string; format: string };
@@ -41,8 +43,8 @@ export default class GraphTab extends TabsBase implements ViewModels.Tab {
   private graphConfigUiData: ViewModels.GraphConfigUiData;
   private isFilterQueryLoading: ko.Observable<boolean>;
   private isValidQuery: ko.Observable<boolean>;
-  private newVertexPane: ViewModels.NewVertexPane;
-  private graphStylingPane: ViewModels.GraphStylingPane;
+  private newVertexPane: NewVertexPane;
+  private graphStylingPane: GraphStylingPane;
   private collectionPartitionKeyProperty: string;
 
   constructor(options: ViewModels.GraphTabOptions) {