diff --git a/src/Explorer/ComponentRegisterer.ts b/src/Explorer/ComponentRegisterer.ts index f7e4576c7..cc6856c04 100644 --- a/src/Explorer/ComponentRegisterer.ts +++ b/src/Explorer/ComponentRegisterer.ts @@ -56,6 +56,8 @@ ko.components.register("tabs-manager", { template: TabsManagerTemplate }); ].forEach(({ component: { name, template } }) => ko.components.register(name, { template })); // Panes + +ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent()); ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent()); ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent()); diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index a056ca735..5893cf231 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -50,6 +50,7 @@ import { NotebookUtil } from "./Notebook/NotebookUtil"; import AddCollectionPane from "./Panes/AddCollectionPane"; import { AddCollectionPanel } from "./Panes/AddCollectionPanel"; import AddDatabasePane from "./Panes/AddDatabasePane"; +import { AddDatabasePanel } from "./Panes/AddDatabasePanel/AddDatabasePanel"; import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel"; import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane"; import { ContextualPaneBase } from "./Panes/ContextualPaneBase"; @@ -2251,7 +2252,7 @@ export default class Explorer { public openAddDatabasePane(): void { this.openSidePanel( "Add Database", - + ); } diff --git a/src/Explorer/Panes/AddDatabasePane.html b/src/Explorer/Panes/AddDatabasePane.html new file mode 100644 index 000000000..94fbe95ba --- /dev/null +++ b/src/Explorer/Panes/AddDatabasePane.html @@ -0,0 +1,174 @@ +
+
+
+ +
+
+ +
+
+ + +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/src/Explorer/Panes/AddDatabasePane.test.ts b/src/Explorer/Panes/AddDatabasePane.test.ts new file mode 100644 index 000000000..97562fd66 --- /dev/null +++ b/src/Explorer/Panes/AddDatabasePane.test.ts @@ -0,0 +1,105 @@ +import * as Constants from "../../Common/Constants"; +import { DatabaseAccount } from "../../Contracts/DataModels"; +import { SubscriptionType } from "../../Contracts/SubscriptionType"; +import { updateUserContext } from "../../UserContext"; +import Explorer from "../Explorer"; +import AddDatabasePane from "./AddDatabasePane"; + +describe("Add Database Pane", () => { + describe("getSharedThroughputDefault()", () => { + let explorer: Explorer; + const mockDatabaseAccount: DatabaseAccount = { + id: "mock", + kind: "DocumentDB", + location: "", + name: "mock", + properties: { + documentEndpoint: "", + cassandraEndpoint: "", + gremlinEndpoint: "", + tableEndpoint: "", + enableFreeTier: false, + }, + type: undefined, + tags: [], + }; + + const mockFreeTierDatabaseAccount: DatabaseAccount = { + id: "mock", + kind: "DocumentDB", + location: "", + name: "mock", + properties: { + documentEndpoint: "", + cassandraEndpoint: "", + gremlinEndpoint: "", + tableEndpoint: "", + enableFreeTier: true, + }, + type: undefined, + tags: [], + }; + + beforeEach(() => { + explorer = new Explorer(); + }); + + it("should be true if subscription type is Benefits", () => { + updateUserContext({ + subscriptionType: SubscriptionType.Benefits, + }); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); + }); + + it("should be false if subscription type is EA", () => { + updateUserContext({ + subscriptionType: SubscriptionType.EA, + }); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.getSharedThroughputDefault()).toBe(false); + }); + + it("should be true if subscription type is Free", () => { + updateUserContext({ + subscriptionType: SubscriptionType.Free, + }); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); + }); + + it("should be true if subscription type is Internal", () => { + updateUserContext({ + subscriptionType: SubscriptionType.Internal, + }); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); + }); + + it("should be true if subscription type is PAYG", () => { + updateUserContext({ + subscriptionType: SubscriptionType.PAYG, + }); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.getSharedThroughputDefault()).toBe(true); + }); + + it("should display free tier text in upsell messaging", () => { + explorer.databaseAccount(mockFreeTierDatabaseAccount); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.isFreeTierAccount()).toBe(true); + expect(addDatabasePane.upsellMessage()).toContain("With free tier"); + expect(addDatabasePane.upsellAnchorUrl()).toBe(Constants.Urls.freeTierInformation); + expect(addDatabasePane.upsellAnchorText()).toBe("Learn more"); + }); + + it("should display standard texr in upsell messaging", () => { + explorer.databaseAccount(mockDatabaseAccount); + const addDatabasePane = explorer.addDatabasePane as AddDatabasePane; + expect(addDatabasePane.isFreeTierAccount()).toBe(false); + expect(addDatabasePane.upsellMessage()).toContain("Start at"); + expect(addDatabasePane.upsellAnchorUrl()).toBe(Constants.Urls.cosmosPricing); + expect(addDatabasePane.upsellAnchorText()).toBe("More details"); + }); + }); +}); \ No newline at end of file diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx index 45760b6cd..4206eb723 100644 --- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx +++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.test.tsx @@ -1,15 +1,17 @@ import { shallow } from "enzyme"; import React from "react"; import Explorer from "../../Explorer"; -import { AddDatabasePane } from "../AddDatabasePane"; +import { AddDatabasePanel } from "./AddDatabasePanel"; + const props = { explorer: new Explorer(), closePanel: (): void => undefined, openNotificationConsole: (): void => undefined, }; + describe("AddDatabasePane Pane", () => { it("should render Default properly", () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx index 56b53f940..b99b1846c 100644 --- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx +++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx @@ -24,7 +24,7 @@ export interface AddDatabasePaneProps { openNotificationConsole: () => void; } -export const AddDatabasePane: FunctionComponent = ({ +export const AddDatabasePanel: FunctionComponent = ({ explorer: container, closePanel, openNotificationConsole, diff --git a/src/Explorer/Panes/PaneComponents.ts b/src/Explorer/Panes/PaneComponents.ts index 8e819ab5d..31c2ece55 100644 --- a/src/Explorer/Panes/PaneComponents.ts +++ b/src/Explorer/Panes/PaneComponents.ts @@ -1,4 +1,5 @@ import AddCollectionPaneTemplate from "./AddCollectionPane.html"; +import AddDatabasePaneTemplate from "./AddDatabasePane.html"; import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html"; import GitHubReposPaneTemplate from "./GitHubReposPane.html"; import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html"; @@ -8,12 +9,21 @@ import StringInputPaneTemplate from "./StringInputPane.html"; import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html"; import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html"; + export class PaneComponent { constructor(data: any) { return data.data; } } +export class AddDatabasePaneComponent { + constructor() { + return { + viewModel: PaneComponent, + template: AddDatabasePaneTemplate, + }; + } +} export class AddCollectionPaneComponent { constructor() { return {