console: ux fixes for sample database experiment

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4875
GitOrigin-RevId: c1aedc5fae78b74165d612534392808b86becb9a

console/src/components/Common/Onboarding/index.tsx

@@ -11,7 +11,6 @@ import { Dispatch, ReduxState } from '../../../types';
 import { getLSItem, LS_KEYS, setLSItem } from '../../../utils/localStorage';
 import hasuraDarkIcon from './hasura_icon_dark.svg';
 import styles from './Onboarding.scss';
-import { SampleDBBanner } from '../../Services/Data/DataSources/SampleDatabase';
 
 type PopupLinkProps = {
   title: string;
@@ -127,14 +126,12 @@ interface OnboardingProps {
   dispatch: Dispatch;
   console_opts: ReduxState['telemetry']['console_opts'];
   metadata: ReduxState['metadata']['metadataObject'];
-  isExploringSampleDB?: boolean;
 }
 
 const Onboarding: React.FC<OnboardingProps> = ({
   dispatch,
   console_opts,
   metadata,
-  isExploringSampleDB,
 }) => {
   const [visible, setVisible] = React.useState(true);
 
@@ -146,7 +143,7 @@ const Onboarding: React.FC<OnboardingProps> = ({
     if (!metadata) {
       return true;
     }
-    return isExploringSampleDB || (isMetadataEmpty(metadata) && !shown);
+    return isMetadataEmpty(metadata) && !shown;
   }, [metadata, console_opts]);
 
   React.useEffect(() => {
@@ -169,10 +166,6 @@ const Onboarding: React.FC<OnboardingProps> = ({
     return null;
   }
 
-  const onboardingListFiltered = onboardingList.filter(
-    o => !isExploringSampleDB || o.id !== 'getting-started-video'
-  );
-
   return (
     <>
       {!visible && (
@@ -194,15 +187,10 @@ const Onboarding: React.FC<OnboardingProps> = ({
           </div>
           <div className={styles.popup_body}>
             <ul>
-              {metadata && !hasSources(metadata) && !isExploringSampleDB ? (
+              {metadata && !hasSources(metadata) ? (
                 <PopupLink {...connectDatabaseHelper} index={0} />
               ) : null}
-              {isExploringSampleDB && (
-                <div className="p-sm">
-                  <SampleDBBanner show={isExploringSampleDB} />
-                </div>
-              )}
-              {onboardingListFiltered.map((item, i) => (
+              {onboardingList.map((item, i) => (
                 <PopupLink {...item} key={item.id} index={i + 1} />
               ))}
             </ul>

console/src/components/Services/Data/DataSources/ConnectDatabase.tsx

@@ -76,6 +76,20 @@ const ConnectDatabase: React.FC<ConnectDatabaseProps> = props => {
     source => source.name === editSourceName
   );
 
+  // initialise an instance of sample DB trial and pass it to the connect DB form
+  const sampleDBTrial = newSampleDBTrial({
+    consoleType: globals.consoleType,
+    hasuraCloudProjectId: globals.hasuraCloudProjectId || '',
+    cohortConfig: onboardingSampleDBCohortConfig,
+  });
+
+  // user landed on connect-db page
+  React.useEffect(() => {
+    if (!isEditState && sampleDBTrial && sampleDBTrial.isActive()) {
+      sampleDBTrial.track.landOnConnectDB();
+    }
+  }, [sampleDBTrial, isEditState]);
+
   useEffect(() => {
     if (isEditState && currentSourceInfo) {
       const connectionInfo = currentSourceInfo.configuration?.connection_info;
@@ -408,13 +422,6 @@ const ConnectDatabase: React.FC<ConnectDatabaseProps> = props => {
     });
   };
 
-  // initialise an instance of sample DB trial and pass it to the connect DB form
-  const sampleDBTrial = newSampleDBTrial({
-    consoleType: globals.consoleType,
-    hasuraCloudProjectId: globals.hasuraCloudProjectId || '',
-    cohortConfig: onboardingSampleDBCohortConfig,
-  });
-
   if (isEditState) {
     return (
       <EditDataSource>

console/src/components/Services/Data/DataSources/SampleDatabase/SampleDBButton.tsx

@@ -14,7 +14,7 @@ export const SampleDBButton: React.FC<Props> = ({ onClick }) => {
         onClick();
       }}
     >
-      Use a sample read-only database
+      Get credentials
     </button>
   );
 };

console/src/components/Services/Data/DataSources/SampleDatabase/SampleDBSection.tsx

@@ -3,39 +3,25 @@ import { SampleDBButton } from './SampleDBButton';
 
 type Props = { onTrySampleDB: VoidFunction };
 
-let timer: NodeJS.Timeout;
-
 export const SampleDBSection: React.FC<Props> = ({ onTrySampleDB }) => {
   const [showSuccess, setShowSuccess] = React.useState(false);
 
   const onButtonClick = () => {
-    if (timer) {
-      clearTimeout(timer);
-    }
     onTrySampleDB();
     setShowSuccess(true);
-    timer = setTimeout(() => {
-      setShowSuccess(false);
-    }, 5000);
   };
 
-  React.useEffect(() => {
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, []);
-
   return (
     <div className="flex flex-col w-full items-start">
       <div className="w-full flex justify-start items-center">
-        <p className="m-0 mr-sm">Don&apos;t have a database?</p>
+        <p className="m-0 mr-sm">
+          Don&apos;t have a database? Try a read-only sample database:
+        </p>
         <SampleDBButton onClick={onButtonClick} />
       </div>
       {showSuccess && (
         <i className="mt-xs text-green-800 text-sm">
-          The Database credentials have been populated in the form below. Please
+          The database credentials have been populated in the form below. Please
           click &apos;Connect Database&apos; button to continue.
         </i>
       )}

console/src/components/Services/Data/DataSources/SampleDatabase/serverIO.ts

@@ -190,3 +190,34 @@ export const trackAnotherDBConnection = (projectId: string) => {
       );
     });
 };
+
+export const trackLandingOnConnectDBForm = (projectId: string) => {
+  const query = `
+    mutation trackAnotherDBConnection($projectId: uuid!) {
+      trackOnboardingSampleDbCohortActivity (
+        error_message: "" 
+        event: "event_land_connect_db_form"
+        project_id: $projectId
+        status: ""
+      ) {
+        status
+      }
+    }
+  `;
+  return luxClient
+    .query(query, { projectId })
+    .then(r => {
+      if (r.errors) {
+        console.error(
+          'failed to track onboarding cohort activity: ',
+          r.errors[0]?.message || 'unexpected'
+        );
+      }
+    })
+    .catch(e => {
+      console.error(
+        'unexpectedly failed to track onboarding cohort activity: ',
+        e.message
+      );
+    });
+};

console/src/components/Services/Data/DataSources/SampleDatabase/service.ts

@@ -6,6 +6,7 @@ import {
   trackConnectButtonClickEvent,
   trackDBConnectionStatusEvent,
   trackAnotherDBConnection,
+  trackLandingOnConnectDBForm,
 } from './serverIO';
 
 export type SampleDBTrial = {
@@ -13,6 +14,7 @@ export type SampleDBTrial = {
   getDatabaseUrl: () => string;
   isExploringSampleDB: (getState: () => any) => boolean;
   track: {
+    landOnConnectDB: () => void;
     tryButton: () => void;
     connectButton: () => void;
     connectionStatus: (
@@ -86,6 +88,11 @@ export const newSampleDBTrial = (options: {
     isExploringSampleDB,
     hasAddedSampleDB,
     track: {
+      landOnConnectDB: () => {
+        if (isActive()) {
+          trackLandingOnConnectDBForm(options.hasuraCloudProjectId);
+        }
+      },
       tryButton: () => {
         if (isActive()) {
           trackTryButtonClickEvent(options.hasuraCloudProjectId);
@@ -160,7 +167,7 @@ export const checkNestedFieldValueInErrJson = (
   return false;
 };
 
-export const maskedErrorMessage = `You're currently connected to a read-only sample database, mutations and changes to data structure are not allowed. Please create or connect your own database to unlock all the features of Hasura.`;
+export const maskedErrorMessage = `You are currently connected to a read-only sample database that is shared by other users. Some features like writing to the table, event triggers and changing the database schema might not be available. Connect your own database to try all the features!`;
 export const maskPostgresError = (
   errorJson: any,
   getState: () => any,