console: add neon dashboard links

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

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSources/CreateDataSource/Neon/components/Neon/NeonBanner.tsx

@@ -15,7 +15,7 @@ type Status =
   | {
       status: 'error';
       errorTitle: string;
-      errorDescription: string;
+      errorDescription: string | React.ReactNode;
     }
   | {
       status: 'default';
@@ -42,11 +42,13 @@ export function NeonBanner(props: Props) {
           Free
         </span>
       </div>
-      <img
-        src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/neon.jpg"
-        alt="neon_banner"
-        className="rounded"
-      />
+      <a href="https://neon.tech/" target="_blank" rel="noopener noreferrer">
+        <img
+          src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/cloud-console/assets/common/img/neon.jpg"
+          alt="neon_banner"
+          className="rounded"
+        />
+      </a>
       <div className="mt-sm mb-sm text-gray-700 text-lg">
         <b>Hasura</b> + <b>Neon</b> are partners now!
       </div>
@@ -79,7 +81,7 @@ export function NeonBanner(props: Props) {
       </div>
       {status.status === 'error' && (
         <IndicatorCard status="negative" headline={status.errorTitle} showIcon>
-          {status.errorDescription}
+          <div className="description">{status.errorDescription}</div>
         </IndicatorCard>
       )}
     </div>

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSources/CreateDataSource/Neon/useNeonDatabase.tsx

@@ -34,19 +34,29 @@ type NeonDBStatus =
     }
   | {
       status: 'error';
-      error: 'unauthorized' | string;
+      error: 'unauthorized' | string | React.ReactNode;
     }
   | {
       status: 'loading';
     };
 
+const neonDashboardLink = `https://console.${globals.neonRootDomain}/app/projects`;
+
 function getHumanReadableAPIError(err: string) {
   if (err.includes('limit exceeded')) {
-    return 'You have reached the free tier limit on Neon. Please delete a free tier project from Neon dashboard and try again.';
+    return (
+      <div>
+        You have reached the free tier limit on Neon. Please delete a free tier
+        project from{' '}
+        <a href={neonDashboardLink} target="_blank">
+          Neon dashboard
+        </a>{' '}
+        and try again.
+      </div>
+    );
   }
   return err;
 }
-
 export function useNeonDatabase() {
   const [state, setState] = React.useState<NeonDBStatus>({ status: 'idle' });
 

frontend/libs/console/legacy-ce/src/lib/components/Services/Data/DataSources/CreateDataSource/Neon/useNeonIntegration.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Dispatch } from '@/types';
 import { useNeonOAuth } from './useNeonOAuth';
 import { useNeonDatabase } from './useNeonDatabase';
@@ -38,7 +38,7 @@ type Error<Status, Payload> = {
   status: Status;
   payload: Payload;
   title: string;
-  description: string;
+  description: string | React.ReactNode;
   action: VoidFunction;
 };
 

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/components/NeonConnectBanner/NeonBanner.tsx

@@ -17,7 +17,7 @@ type Status =
   | {
       status: 'error';
       errorTitle: string;
-      errorDescription: string;
+      errorDescription: string | React.ReactNode;
     }
   | {
       status: 'default';
@@ -47,8 +47,15 @@ export function NeonBanner(props: Props) {
             </div>
           </div>
           <div className="text-md text-gray-700 ml-xs">
-            Need a new database? We&apos;ve partnered with Neon to help you get
-            started.
+            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>
         </div>
         <div className="flex w-1/4 justify-end">

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/components/EnvVarsForm/components/EnvVarsFormFields.tsx

@@ -21,8 +21,6 @@ export function EnvVarsFormFields(props: EnvVarsFormFieldsProps) {
     staticEnvVars,
   } = React.useMemo(() => getEnvVarFormSegments(envVars), [envVars]);
 
-  const neonDashboardLink = `https://console.${globals.neonRootDomain}/app/projects`;
-
   return (
     <>
       {databaseEnvVars.length > 0 ? (
@@ -37,10 +35,12 @@ export function EnvVarsFormFields(props: EnvVarsFormFieldsProps) {
                 <>
                   <div className="flex w-[325px]" />
                   <a
-                    href={neonDashboardLink}
+                    href="https://neon.tech/"
+                    onClick={e => {
+                      e.stopPropagation();
+                    }}
                     rel="noreferrer noopener"
                     target="_blank"
-                    onClick={e => e.stopPropagation()}
                   >
                     <div className="flex text-gray-600">
                       Database creation powered by{' '}

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/components/EnvVarsForm/components/PgDatabaseField/NeonButton.tsx

@@ -23,7 +23,7 @@ export function NeonButton(props: Props) {
   const { dbEnvVar, neonButtonProps } = props;
   const { formState } = useFormContext();
 
-  let errorMessage: string | undefined;
+  let errorMessage: string | undefined | React.ReactNode;
 
   if (formState.errors?.[dbEnvVar.Name]) {
     errorMessage = formState.errors?.[dbEnvVar.Name].message;
@@ -64,7 +64,7 @@ export function NeonButton(props: Props) {
               {errorMessage}
             </>
           }
-          ariaLabel={errorMessage ?? ''}
+          ariaLabel={errorMessage ? 'Neon Database creation failed' : ''}
           role="alert"
         />
       ) : (

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OneClickDeployment/components/EnvVarsForm/types.ts

@@ -1,4 +1,5 @@
 import { GraphQLError } from 'graphql';
+import React from 'react';
 import {
   GetTenantEnvQuery,
   UpdateTenantMutation,
@@ -11,7 +12,7 @@ type Status =
   | {
       status: 'error';
       errorTitle: string;
-      errorDescription: string;
+      errorDescription: string | React.ReactNode;
     }
   | {
       status: 'default';