console: improving cloud onboarding for non-PG users

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8276
Co-authored-by: Rikin Kachhia <54616969+rikinsk@users.noreply.github.com>
GitOrigin-RevId: 2d4d9f8d0b4d905e59be4b58586cb7968f217f62

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 (
     <div className="w-full">
       <div className="w-full mb-sm">
-        <NeonBanner {...neonBannerProps} setStepperIndex={setStepperIndex} />
+        <NeonBanner
+          {...neonBannerProps}
+          setStepperIndex={setStepperIndex}
+          dispatch={dispatch}
+          dismiss={dismiss}
+        />
       </div>
       <div className="flex justify-start items-center w-full">
         <Analytics name="onboarding-skip-button">
           <a
+            id="onboarding-skip-button"
             className={`w-auto text-secondary text-sm hover:text-secondary-dark hover:no-underline ${
-              allowSkipping ? 'cursor-pointer' : 'cursor-not-allowed'
+              !isActionInProgress ? 'cursor-pointer' : 'cursor-not-allowed'
             }`}
-            title={!allowSkipping ? 'Please wait...' : undefined}
+            title={isActionInProgress ? 'Operation in progress...' : undefined}
             onClick={() => {
-              if (allowSkipping) {
+              if (!isActionInProgress) {
                 onSkipHandler();
               }
             }}

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/ConnectDBScreen/components/OnboardingAnimation.tsx

@@ -8,8 +8,8 @@ export function OnboardingAnimation() {
         <HasuraOnboarding />
       </div>
       <div className="font-normal text-sm text-gray-600 mt-md">
-        We recommend connecting a Postgres database to instantly explore your{' '}
-        <b>Hasura GraphQL API</b>
+        We recommend connecting a database to instantly explore the
+        auto-generated <b>Hasura GraphQL API</b>
       </div>
     </div>
   );

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: <MdRefresh />,
@@ -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 (
     <div className="border border-gray-300 border-l-4 border-l-[#297393] shadow-md rounded bg-white p-md">
       <div className="flex items-center">
@@ -43,19 +64,39 @@ export function NeonBanner(props: Props) {
             <div className="flex items-center">
               <HasuraLogoFull mode="brand" size="sm" />
               <div className="font-bold mx-xs">+</div>
-              <NeonIcon />
+              <a
+                href="https://neon.tech/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <NeonIcon />
+              </a>
             </div>
           </div>
-          <div className="text-md text-gray-700 ml-xs">
-            Need a new database? We&apos;ve partnered with{' '}
-            <a
-              href="https://neon.tech/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Neon
-            </a>{' '}
-            to help you get started.
+          <div className="flex flex-col w-3/4 ml-xs">
+            <div className="text-md text-gray-700 mb-xs">
+              Need a new database? We&apos;ve partnered with Neon to help you
+              get started with a free Postgres database.
+            </div>
+            <div className="text-md text-gray-700">
+              <a
+                id="onboarding-connect-other-database-link"
+                className={`w-auto text-secondary hover:text-secondary-dark  ${
+                  !isButtonDisabled ? 'cursor-pointer' : 'cursor-not-allowed'
+                }`}
+                title={
+                  isButtonDisabled ? 'Operation in progress...' : undefined
+                }
+                onClick={() => {
+                  if (!isButtonDisabled) {
+                    onClickConnectOtherDB();
+                  }
+                }}
+              >
+                Click here
+              </a>{' '}
+              to connect any other database.
+            </div>
           </div>
         </div>
         <div className="flex w-1/4 justify-end">

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={() => {}}
           />
         </div>
       )}

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={() => {}}
           />
         </div>
       )}