random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add password reset callout (#1332) 

* Add password reset callout

* Add create password text

* Add password reset callout
This commit is contained in:
sunghyunkang1111 2022-10-04 10:50:47 -05:00 committed by GitHub
parent a34d3bb000
commit 7c77ffda6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Contracts/ExplorerContracts.ts
View File

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

80
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@ -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 && (
<TeachingBubble
headline="New to Cosmos DB PGSQL?"
target={"#quickstartDescription"}
hasCloseButton
onDismiss={() => 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.
</TeachingBubble>
)}
{userContext.apiType === "Postgres" &&
usePostgres.getState().showPostgreTeachingBubble &&
!usePostgres.getState().showResetPasswordBubble && (
<TeachingBubble
headline="New to Cosmos DB PGSQL?"
target={"#mainButton-quickstartDescription"}
hasCloseButton
onDismiss={() => 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.
</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

7
src/UserContext.ts
View File

@ -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";
}

4
src/hooks/usePostgres.ts
View File

@ -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 }),
}));