Add password reset callout (#1332)

* Add password reset callout

* Add create password text

* Add password reset callout

src/Contracts/ExplorerContracts.ts

@@ -35,6 +35,7 @@ export enum MessageTypes {
   RefreshDatabaseAccount,
   CloseTab,
   OpenQuickstartBlade,
+  OpenPostgreSQLPasswordReset,
 }
 
 export { Versions, ActionContracts, Diagnostics };

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<SplashScreenProps> {
           () => this.setState({}),
           (state) => state.showPostgreTeachingBubble
         ),
+      },
+      {
+        dispose: usePostgres.subscribe(
+          () => this.setState({}),
+          (state) => state.showResetPasswordBubble
+        ),
       }
     );
   }
@@ -118,26 +126,36 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                   : "Globally distributed, multi-model database service for any scale"}
               </div>
               <div className="mainButtonsContainer">
-                {userContext.apiType === "Postgres" && usePostgres.getState().showPostgreTeachingBubble && (
+                {userContext.apiType === "Postgres" &&
-                  <TeachingBubble
+                  usePostgres.getState().showPostgreTeachingBubble &&
-                    headline="New to Cosmos DB PGSQL?"
+                  !usePostgres.getState().showResetPasswordBubble && (
-                    target={"#quickstartDescription"}
+                    <TeachingBubble
-                    hasCloseButton
+                      headline="New to Cosmos DB PGSQL?"
-                    onDismiss={() => usePostgres.getState().setShowPostgreTeachingBubble(false)}
+                      target={"#mainButton-quickstartDescription"}
-                    primaryButtonProps={{
+                      hasCloseButton
-                      text: "Get started",
+                      onDismiss={() => usePostgres.getState().setShowPostgreTeachingBubble(false)}
-                      onClick: () => {
+                      calloutProps={{
-                        useTabs.getState().openAndActivateReactTab(ReactTabKind.Quickstart);
+                        directionalHint: DirectionalHint.rightCenter,
-                        usePostgres.getState().setShowPostgreTeachingBubble(false);
+                        directionalHintFixed: true,
-                      },
+                        preventDismissOnLostFocus: true,
-                    }}
+                        preventDismissOnResize: true,
-                  >
+                        preventDismissOnScroll: true,
-                    Welcome! If you are new to Cosmos DB PGSQL and need help with getting started, here is where you can
+                      }}
-                    find sample data, query.
+                      primaryButtonProps={{
-                  </TeachingBubble>
+                        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.
+                    </TeachingBubble>
+                  )}
                 {mainItems.map((item) => (
                   <Stack
+                    id={`mainButton-${item.id}`}
                     horizontal
                     className="mainButton focusable"
                     key={`${item.title}`}
@@ -161,6 +179,32 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                     </div>
                   </Stack>
                 ))}
+                {userContext.apiType === "Postgres" && usePostgres.getState().showResetPasswordBubble && (
+                  <TeachingBubble
+                    headline="Create your password"
+                    target={"#mainButton-quickstartDescription"}
+                    hasCloseButton
+                    onDismiss={() => 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.
+                  </TeachingBubble>
+                )}
               </div>
               {useCarousel.getState().showCoachMark && (
                 <Coachmark

src/UserContext.ts

@@ -97,8 +97,10 @@ function updateUserContext(newContext: Partial<UserContext>): 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";
 }
 

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<TeachingBubbleState> = create((set) => ({
   showPostgreTeachingBubble: false,
+  showResetPasswordBubble: false,
   setShowPostgreTeachingBubble: (showPostgreTeachingBubble: boolean) => set({ showPostgreTeachingBubble }),
+  setShowResetPasswordBubble: (showResetPasswordBubble: boolean) => set({ showResetPasswordBubble }),
 }));