Add condition for showing quick start carousel (#1278)

* Add condition for showing quick start carousel

* Show coach mark when carousel is closed

* Add condition for showing quick start carousel and other UI changes

* Fix compile error

* Fix issue with coach mark

* Fix test

* Add new sample data, fix link url, fix e2e tests

* Fix e2e tests
This commit is contained in:
victor-meng
2022-05-23 20:52:21 -07:00
committed by GitHub
parent d13b7a50ad
commit 46ca952955
24 changed files with 241 additions and 207 deletions

View File

@@ -97,6 +97,7 @@ export default class Collection implements ViewModels.Collection {
public storedProceduresFocused: ko.Observable<boolean>;
public userDefinedFunctionsFocused: ko.Observable<boolean>;
public triggersFocused: ko.Observable<boolean>;
public isSampleCollection: boolean;
private isOfferRead: boolean;
constructor(container: Explorer, databaseId: string, data: DataModels.Collection) {
@@ -216,6 +217,7 @@ export default class Collection implements ViewModels.Collection {
this.isStoredProceduresExpanded = ko.observable<boolean>(false);
this.isUserDefinedFunctionsExpanded = ko.observable<boolean>(false);
this.isTriggersExpanded = ko.observable<boolean>(false);
this.isSampleCollection = false;
this.isOfferRead = false;
}

View File

@@ -37,6 +37,7 @@ export default class Database implements ViewModels.Database {
public isDatabaseShared: ko.Computed<boolean>;
public selectedSubnodeKind: ko.Observable<ViewModels.CollectionTabKind>;
public junoClient: JunoClient;
public isSampleDB: boolean;
private isOfferRead: boolean;
constructor(container: Explorer, data: DataModels.Database) {
@@ -54,6 +55,7 @@ export default class Database implements ViewModels.Database {
return this.offer && !!this.offer();
});
this.junoClient = new JunoClient();
this.isSampleDB = false;
this.isOfferRead = false;
}

View File

@@ -1,5 +1,4 @@
import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
import { useTeachingBubble } from "hooks/useTeachingBubble";
import * as React from "react";
import shallow from "zustand/shallow";
import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
@@ -462,7 +461,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
if (database.isDatabaseShared()) {
databaseNode.children.push({
id: database.id() === "SampleDB" ? "sampleScaleSettings" : "",
id: database.isSampleDB ? "sampleScaleSettings" : "",
label: "Scale",
isSelected: () =>
useSelectedNode
@@ -499,7 +498,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
const children: TreeNode[] = [];
children.push({
label: collection.getLabel(),
id: collection.databaseId === "SampleDB" && collection.id() === "SampleContainer" ? "sampleItems" : "",
id: collection.isSampleCollection ? "sampleItems" : "",
onClick: () => {
collection.openTab();
// push to most recent
@@ -533,10 +532,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
if (userContext.apiType !== "Cassandra" || !isServerlessAccount()) {
children.push({
id:
collection.databaseId === "SampleDB" && collection.id() === "SampleContainer" && !database.isDatabaseShared()
? "sampleScaleSettings"
: "",
id: collection.isSampleCollection && !database.isDatabaseShared() ? "sampleScaleSettings" : "",
label: database.isDatabaseShared() || isServerlessAccount() ? "Settings" : "Scale & Settings",
onClick: collection.onSettingsClick.bind(collection),
isSelected: () =>
@@ -593,10 +589,6 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
);
},
onExpanded: () => {
// TODO: For testing purpose only, remove after
if (collection.databaseId === "SampleDB" && collection.id() === "SampleContainer") {
useTeachingBubble.getState().setIsSampleDBExpanded(true);
}
if (showScriptNodes) {
collection.loadStoredProcedures();
collection.loadUserDefinedFunctions();