diff --git a/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/NeonOnboarding.tsx b/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/NeonOnboarding.tsx index b38b63469c9..d96d4a866ba 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/NeonOnboarding.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/NeonOnboarding.tsx @@ -78,10 +78,10 @@ export function NeonOnboarding(props: { useEmitOnboardingEvents(neonIntegrationStatus, installingTemplate); // allow skipping only when an action is not in-progress - const allowSkipping = - neonIntegrationStatus.status === 'idle' || - neonIntegrationStatus.status === 'authentication-error' || - neonIntegrationStatus.status === 'neon-database-creation-error'; + const isActionInProgress = + neonIntegrationStatus.status !== 'idle' && + neonIntegrationStatus.status !== 'authentication-error' && + neonIntegrationStatus.status !== 'neon-database-creation-error'; const neonBannerProps = transformNeonIntegrationStatusToNeonBannerProps( neonIntegrationStatus @@ -95,17 +95,23 @@ export function NeonOnboarding(props: { return (
- +
{ - if (allowSkipping) { + if (!isActionInProgress) { onSkipHandler(); } }} diff --git a/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/OnboardingAnimation.tsx b/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/OnboardingAnimation.tsx index 9a6d7efeef6..2f2e3989cde 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/OnboardingAnimation.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/OnboardingAnimation.tsx @@ -8,8 +8,8 @@ export function OnboardingAnimation() {
- We recommend connecting a Postgres database to instantly explore your{' '} - Hasura GraphQL API + We recommend connecting a database to instantly explore the + auto-generated Hasura GraphQL API
); diff --git a/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner.tsx b/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner.tsx index b628a820ae1..581b20b31f0 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner.tsx @@ -5,6 +5,9 @@ import { IndicatorCard } from '../../../../../new-components/IndicatorCard'; import { HasuraLogoFull } from '../../../../../new-components/HasuraLogo'; import { Analytics } from '../../../../Analytics'; import { NeonIcon } from './NeonIcon'; +import _push from '../../../../../components/Services/Data/push'; +import { persistSkippedOnboarding } from '../../utils'; +import { Dispatch } from '../../../../../types'; const iconMap = { refresh: , @@ -29,12 +32,30 @@ export type Props = { buttonText: string; icon?: keyof typeof iconMap; setStepperIndex: (index: number) => void; + dispatch: Dispatch; + dismiss: VoidFunction; }; export function NeonBanner(props: Props) { - const { status, onClickConnect, buttonText, icon, setStepperIndex } = props; + const { + status, + onClickConnect, + buttonText, + icon, + setStepperIndex, + dispatch, + dismiss, + } = props; const isButtonDisabled = status.status === 'loading'; + /* This handles if a user wants to connect an existing DB or a non-postgres DB, + it registers that user skipped onboarding and take them directly to connect database page*/ + const onClickConnectOtherDB = () => { + dispatch(_push('/data/manage/connect')); + persistSkippedOnboarding(); + dismiss(); + }; + return (
@@ -43,19 +64,39 @@ export function NeonBanner(props: Props) {
+
- +
+ +
-
- Need a new database? We've partnered with{' '} - - Neon - {' '} - to help you get started. +
+
+ Need a new database? We've partnered with Neon to help you + get started with a free Postgres database. +
+
+ { + if (!isButtonDisabled) { + onClickConnectOtherDB(); + } + }} + > + Click here + {' '} + to connect any other database. +
diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/SelectDatabase.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/SelectDatabase.tsx index 82dcf16a854..8a795b7de2b 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/SelectDatabase.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/SelectDatabase.tsx @@ -1,4 +1,4 @@ -import { NeonBanner } from '../CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner'; +import { NeonBanner } from '../../components/Services/Data/DataSources/CreateDataSource/Neon/components/Neon/NeonBanner'; import { DatabaseKind } from './types'; import { Button } from '../../new-components/Button'; import React from 'react'; @@ -34,7 +34,6 @@ export const SelectDatabase: React.VFC = () => { } status={{ status: 'default' }} buttonText="Create a Neon Database" - setStepperIndex={() => {}} />
)} diff --git a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx index c11d42e5b2b..904aec9a107 100644 --- a/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/features/ConnectDBRedesign/components/SelectDatabase/SelectDatabase.tsx @@ -1,4 +1,4 @@ -import { NeonBanner } from '../../../CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner'; +import { NeonBanner } from '../../../../components/Services/Data/DataSources/CreateDataSource/Neon/components/Neon/NeonBanner'; import Globals from '../../../../Globals'; import { Button } from '../../../../new-components/Button'; import React from 'react'; @@ -60,7 +60,6 @@ export const SelectDatabase = ({ } status={{ status: 'default' }} buttonText="Create a Neon Database" - setStepperIndex={() => {}} />
)}