feat: improve onboarding flow (#8327)

1. Refetch features when creating the flag. It took a while for it to
appear before.
2. Fix NodeJS snippet and make texts more clear.

frontend/src/component/onboarding/dialog/SdkConnected.tsx

@@ -45,9 +45,10 @@ export const SdkConnected: FC<ISdkConnectedProps> = ({ sdk }) => {
                 <Box sx={{ mt: 2 }}>
                     <SectionHeader>Production settings</SectionHeader>
                     <Typography variant='body2'>
-                        In order to validate the connection, we changed some
+                        You have successfully connected your SDK. In the
-                        settings that you might want to revert. We recommend the
+                        previous code example, the settings were optimized for
-                        following default settings.
+                        development. We recommend the following setup for
+                        production.
                     </Typography>
                     <Markdown components={{ code: CodeRenderer }}>
                         {productionSnippet}

frontend/src/component/onboarding/dialog/snippets/nodejs.md

@@ -20,10 +20,6 @@ setInterval(() => {
 ```
 
 ---
-### Production settings
-
-In order to validate the connection, we changed some settings that you might want to revert. We recommend the following default settings.
-
 ```js
 const { initialize } = require('unleash-client');
 
@@ -35,10 +31,6 @@ const unleash = initialize({
 ```
 
 ---
-### Additional resources
-
-Now that we’ve validated the connection, you might want to look into more advanced use cases and examples:
-
 - [SDK repository with documentation](https://github.com/Unleash/unleash-client-node)
 - [Node.js SDK example with CodeSandbox](https://github.com/Unleash/unleash-sdk-examples/tree/main/NodeJS)
 - [Node.js SDK tutorial](https://dev.to/reeshee/how-to-implement-feature-flags-in-nodejs-using-unleash-3907)

frontend/src/component/onboarding/flow/ProjectOnboarding.test.tsx

@@ -22,6 +22,7 @@ test('Project can start onboarding', async () => {
                         projectId={projectId}
                         setConnectSdkOpen={() => {}}
                         setOnboardingFlow={() => {}}
+                        refetchFeatures={() => {}}
                     />
                 }
             />
@@ -50,6 +51,7 @@ test('Project can connect SDK', async () => {
                         projectId={projectId}
                         setConnectSdkOpen={() => {}}
                         setOnboardingFlow={() => {}}
+                        refetchFeatures={() => {}}
                     />
                 }
             />

frontend/src/component/onboarding/flow/ProjectOnboarding.tsx

@@ -14,10 +14,12 @@ interface IProjectOnboardingProps {
     projectId: string;
     setConnectSdkOpen: (open: boolean) => void;
     setOnboardingFlow: (status: 'visible' | 'closed') => void;
+    refetchFeatures: () => void;
 }
 
 interface ICreateFlagProps {
     projectId: string;
+    refetchFeatures: () => void;
 }
 
 const Container = styled('div')(({ theme }) => ({
@@ -101,6 +103,7 @@ export const ProjectOnboarding = ({
     projectId,
     setConnectSdkOpen,
     setOnboardingFlow,
+    refetchFeatures,
 }: IProjectOnboardingProps) => {
     const { project } = useProjectOverview(projectId);
     const isFirstFlagCreated =
@@ -133,7 +136,10 @@ export const ProjectOnboarding = ({
                     'first-flag-created' ? (
                         <ExistingFlag />
                     ) : (
-                        <CreateFlag projectId={projectId} />
+                        <CreateFlag
+                            projectId={projectId}
+                            refetchFeatures={refetchFeatures}
+                        />
                     )}
                 </ActionBox>
                 <ActionBox>
@@ -166,7 +172,7 @@ export const ProjectOnboarding = ({
     );
 };
 
-const CreateFlag = ({ projectId }: ICreateFlagProps) => {
+const CreateFlag = ({ projectId, refetchFeatures }: ICreateFlagProps) => {
     const { refetch } = useProjectOverview(projectId);
     return (
         <>
@@ -181,7 +187,10 @@ const CreateFlag = ({ projectId }: ICreateFlagProps) => {
             <FlagCreationButton
                 text='Create flag'
                 skipNavigationOnComplete={true}
-                onSuccess={refetch}
+                onSuccess={() => {
+                    refetch();
+                    refetchFeatures();
+                }}
             />
         </>
     );

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -426,6 +426,7 @@ export const ProjectFeatureToggles = ({
                         projectId={projectId}
                         setConnectSdkOpen={setConnectSdkOpen}
                         setOnboardingFlow={setOnboardingFlow}
+                        refetchFeatures={refetch}
                     />
                 }
             />