frontend: default to use case onboarding on console

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9253
Co-authored-by: Rishichandra Wawhal <27274869+wawhal@users.noreply.github.com>
GitOrigin-RevId: 08a7905acfc17d84ffcbb0f84867a5d44a999805

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/Root.stories.tsx

@@ -54,5 +54,6 @@ export const WithoutSurvey: StoryObj = {
       onboardingDataEmptyActivity,
       fetchAnsweredSurveysHandler,
     ],
+    chromatic: { disableSnapshot: true },
   },
 };

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/Root.test.tsx

@@ -93,11 +93,15 @@ describe('Check different configurations of Onboarding wizard depending on onboa
     );
   });
 
-  it('should show wizard as user activity is empty', async () => {
+  it('should not show wizard', async () => {
     server.use(onboardingDataEmptyActivity);
     render(<Root />, { wrapper });
 
-    await screen.findByText('Welcome to your new Hasura project!');
+    await waitFor(() =>
+      expect(
+        screen.queryByText('Welcome to your new Hasura project!')
+      ).not.toBeInTheDocument()
+    );
   });
 
   it('should hide wizard as onboarding skipped by user', async () => {

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Button } from '../../../../../new-components/Button';
-import { LS_KEYS, removeLSItem } from '../../../../../utils/localStorage';
 import { emitOnboardingEvent } from '../../utils';
 import {
   getUseCaseExperimentOnboardingVariables,
@@ -10,10 +9,7 @@ import { Analytics, trackCustomEvent } from '../../../../Analytics';
 import { Dispatch } from '../../../../../types';
 import _push from '../../../../../components/Services/Data/push';
 
-type UseCaseScreenProps = {
+type UseCaseScreenProps = { dismiss: () => void; dispatch: Dispatch };
-  dismiss: () => void;
-  dispatch: Dispatch;
-};
 
 export type UseCases =
   | 'data-api'
@@ -78,15 +74,16 @@ export const UseCaseScreen = (props: UseCaseScreenProps) => {
     return useCasesAssets.sort(() => Math.random() - 0.5);
   }, [useCasesAssets]);
 
-  const onSubmit = () => {
+  const useCase = useCasesAssets.find(
-    const useCase = useCasesAssets.filter(
+    useCase => useCase.id === selectedUseCase
-      useCase => useCase.id === selectedUseCase
+  );
-    )[0];
 
-    removeLSItem(LS_KEYS.useCaseExperimentOnboarding);
+  const onSubmit = () => {
-    props.dispatch(_push(useCase.consoleUrl));
+    if (useCase) {
-    window.open(useCase.docsUrl, '_blank', 'noreferrer,noopener');
+      props.dispatch(_push(useCase.consoleUrl));
-    emitOnboardingEvent(getUseCaseExperimentOnboardingVariables(useCase.id));
+      emitOnboardingEvent(getUseCaseExperimentOnboardingVariables(useCase.id));
+      props.dismiss();
+    }
   };
 
   return (
@@ -117,7 +114,7 @@ export const UseCaseScreen = (props: UseCaseScreenProps) => {
       </div>
       <div className="use-cases flex flex-wrap justify-around gap-y-15 gap-y-8">
         {randomUseCaseAssets.map((item, index) => (
-          <div className="flex relative h-[250px]">
+          <div className="flex relative h-[250px]" key={index}>
             <label
               key={index}
               htmlFor={item.id}
@@ -155,28 +152,33 @@ export const UseCaseScreen = (props: UseCaseScreenProps) => {
             className="ml-xs mr-4 text-secondary flex items-center cursor-pointer"
             onClick={() => {
               props.dismiss();
-              removeLSItem(LS_KEYS.useCaseExperimentOnboarding);
               emitOnboardingEvent(skippedUseCaseExperimentOnboarding);
             }}
           >
             Skip
           </div>
         </Analytics>
-        <Analytics
+        {useCase ? (
-          name={`use-case-onboarding-${selectedUseCase}`}
+          <Analytics name={`use-case-onboarding-${selectedUseCase}`}>
-          passHtmlAttributesToChildren
+            <a
-        >
+              href={useCase.docsUrl}
-          <Button
+              target="_blank"
-            mode="primary"
+              rel="noopener noreferrer"
-            disabled={selectedUseCase === null}
+              onClick={onSubmit}
-            onClick={() => {
+            >
-              props.dismiss();
+              <Button mode="primary">Continue</Button>
-              onSubmit();
+            </a>
-            }}
+          </Analytics>
+        ) : (
+          <Analytics
+            name={`use-case-onboarding-unselected`}
+            passHtmlAttributesToChildren
           >
-            Continue
+            <Button mode="primary" disabled>
-          </Button>
+              Continue
-        </Analytics>
+            </Button>
+          </Analytics>
+        )}
       </div>
     </div>
   );

frontend/libs/console/legacy-ce/src/lib/features/CloudOnboarding/OnboardingWizard/utils.ts

@@ -90,11 +90,8 @@ export function getWizardState(
   // transform the onboarding data if present, to a consumable format
   const transformedOnboardingData = onboardingDataTransformFn(onboardingData);
   if (shouldShowOnboarding(transformedOnboardingData)) {
-    if (getLSItem(LS_KEYS.useCaseExperimentOnboarding)) {
-      return 'use-case-onboarding';
-    }
     if (showFamiliaritySurvey) return 'familiarity-survey';
-    return 'landing-page';
+    return 'use-case-onboarding';
   }
   return 'hidden';
 }

frontend/libs/console/legacy-ce/src/lib/utils/localStorage.ts

@@ -125,7 +125,6 @@ export const LS_KEYS = {
   notificationsLastSeen: 'notifications:lastSeen',
   authState: 'AUTH_STATE',
   skipOnboarding: 'SKIP_CLOUD_ONBOARDING',
-  useCaseExperimentOnboarding: 'onboarding:useCaseExperiment',
   showUseCaseOverviewPopup: 'onboarding:showUseCaseOverviewPopup',
 };