diff --git a/src/Contracts/ExplorerContracts.ts b/src/Contracts/ExplorerContracts.ts index 7fd127bec..c04db6cbd 100644 --- a/src/Contracts/ExplorerContracts.ts +++ b/src/Contracts/ExplorerContracts.ts @@ -35,6 +35,7 @@ export enum MessageTypes { RefreshDatabaseAccount, CloseTab, OpenQuickstartBlade, + OpenPostgreSQLPasswordReset, } export { Versions, ActionContracts, Diagnostics }; diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx index f99473fb0..b9c1286b2 100644 --- a/src/Explorer/SplashScreen/SplashScreen.tsx +++ b/src/Explorer/SplashScreen/SplashScreen.tsx @@ -11,6 +11,8 @@ import { TeachingBubbleContent, Text, } from "@fluentui/react"; +import { sendMessage } from "Common/MessageHandler"; +import { MessageTypes } from "Contracts/ExplorerContracts"; import { TerminalKind } from "Contracts/ViewModels"; import { useCarousel } from "hooks/useCarousel"; import { usePostgres } from "hooks/usePostgres"; @@ -91,6 +93,12 @@ export class SplashScreen extends React.Component { () => this.setState({}), (state) => state.showPostgreTeachingBubble ), + }, + { + dispose: usePostgres.subscribe( + () => this.setState({}), + (state) => state.showResetPasswordBubble + ), } ); } @@ -118,26 +126,36 @@ export class SplashScreen extends React.Component { : "Globally distributed, multi-model database service for any scale"}
- {userContext.apiType === "Postgres" && usePostgres.getState().showPostgreTeachingBubble && ( - usePostgres.getState().setShowPostgreTeachingBubble(false)} - primaryButtonProps={{ - text: "Get started", - onClick: () => { - useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart); - usePostgres.getState().setShowPostgreTeachingBubble(false); - }, - }} - > - Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you can - find sample data, query. - - )} + {userContext.apiType === "Postgres" && + usePostgres.getState().showPostgreTeachingBubble && + !usePostgres.getState().showResetPasswordBubble && ( + usePostgres.getState().setShowPostgreTeachingBubble(false)} + calloutProps={{ + directionalHint: DirectionalHint.rightCenter, + directionalHintFixed: true, + preventDismissOnLostFocus: true, + preventDismissOnResize: true, + preventDismissOnScroll: true, + }} + primaryButtonProps={{ + text: "Get started", + onClick: () => { + useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart); + usePostgres.getState().setShowPostgreTeachingBubble(false); + }, + }} + > + Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you + can find sample data, query. + + )} {mainItems.map((item) => ( {
))} + {userContext.apiType === "Postgres" && usePostgres.getState().showResetPasswordBubble && ( + usePostgres.getState().setShowResetPasswordBubble(false)} + calloutProps={{ + directionalHint: DirectionalHint.bottomRightEdge, + directionalHintFixed: true, + preventDismissOnLostFocus: true, + preventDismissOnResize: true, + preventDismissOnScroll: true, + }} + primaryButtonProps={{ + text: "Create", + onClick: () => { + sendMessage({ + type: MessageTypes.OpenQuickstartBlade, + }); + usePostgres.getState().setShowResetPasswordBubble(false); + }, + }} + > + This password will be used to connect to the database. + + )} {useCarousel.getState().showCoachMark && ( ): void { if (newContext.apiType === "Postgres") { usePostgres.getState().setShowPostgreTeachingBubble(true); localStorage.setItem(newContext.databaseAccount.id, "true"); - } else if (userContext.isTryCosmosDBSubscription || isNewAccount) { + } + if (userContext.isTryCosmosDBSubscription || isNewAccount) { useCarousel.getState().setShouldOpen(true); + usePostgres.getState().setShowResetPasswordBubble(true); localStorage.setItem(newContext.databaseAccount.id, "true"); traceOpen(Action.OpenCarousel); } @@ -130,6 +132,9 @@ function apiType(account: DatabaseAccount | undefined): ApiType { if (account.kind === "MongoDB" || account.kind === "Parse") { return "Mongo"; } + if (account.kind === "Postgres") { + return "Postgres"; + } return "SQL"; } diff --git a/src/hooks/usePostgres.ts b/src/hooks/usePostgres.ts index 222d163e7..5ab8c9dd3 100644 --- a/src/hooks/usePostgres.ts +++ b/src/hooks/usePostgres.ts @@ -2,10 +2,14 @@ import create, { UseStore } from "zustand"; interface TeachingBubbleState { showPostgreTeachingBubble: boolean; + showResetPasswordBubble: boolean; setShowPostgreTeachingBubble: (showPostgreTeachingBubble: boolean) => void; + setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => void; } export const usePostgres: UseStore = create((set) => ({ showPostgreTeachingBubble: false, + showResetPasswordBubble: false, setShowPostgreTeachingBubble: (showPostgreTeachingBubble: boolean) => set({ showPostgreTeachingBubble }), + setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => set({ showResetPasswordBubble }), }));