chore: update project onboarding UI text (#8189)

Unleash · Sep 20, 2024 · 0587203 · 0587203
1 parent 35004fe
commit 0587203
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 23 deletions.
diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx
@@ -35,7 +35,7 @@ const ChooseEnvironment = ({
     return (
         <SingleSelectConfigButton
             tooltip={{ header: '' }}
-            description='Select the environment where API key will be created'
+            description='Select the environment where the API key will be created'
             options={environments.map((environment) => ({
                 label: environment,
                 value: environment,
@@ -137,7 +137,7 @@ const TokenExplanation = ({
                             ]}
                         >
                             <SecretExplanationDescription>
-                                The project this API key will retrieve feature
+                                The project this API key can retrieve feature
                                 flags from
                             </SecretExplanationDescription>
                         </ArcherElement>
@@ -152,7 +152,7 @@ const TokenExplanation = ({
                             ]}
                         >
                             <SecretExplanationDescription>
-                                The environment the API key will retrieve
+                                The environment this API key can retrieve
                                 feature flag configuration from
                             </SecretExplanationDescription>
                         </ArcherElement>
@@ -235,7 +235,7 @@ export const GenerateApiKey = ({
             <Box sx={{ mt: 2 }}>
                 <SectionHeader>Environment</SectionHeader>
                 <SectionDescription>
-                    The environment SDK will connect to in order to retrieve
+                    The environment the SDK connects to to retrieve
                     configuration.
                 </SectionDescription>
                 {environments.length > 0 ? (
@@ -258,9 +258,8 @@ export const GenerateApiKey = ({
                 ) : (
                     <SectionDescription>
                         You currently have no active API keys for this
-                        project/environment combination. You'll need to generate
-                        and API key in order to proceed with connecting your
-                        SDK.
+                        project/environment combination. Generate an API key to
+                        proceed with connecting your SDK.
                     </SectionDescription>
                 )}
                 {parsedToken ? (

diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx
@@ -142,7 +142,7 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
                     title='Copy snippet'
                     code={filledInitializeCodeSnippet}
                 />
-                <p>3. Check feature status</p>
+                <p>3. Check feature flag status</p>
                 <CopyBlock
                     title='Copy snippet'
                     code={filledCheckFlagCodeSnippet}

diff --git a/frontend/src/component/onboarding/UnleashConcepts.tsx b/frontend/src/component/onboarding/UnleashConcepts.tsx
@@ -47,8 +47,8 @@ export const GenerateApiKeyConcepts = () => (
             <Box>
                 <ConceptSummary>Flags live in projects</ConceptSummary>
                 <ConceptDetails>
-                    Projects are containers for feature flags. When you create a
-                    feature flag it will belong to the project you create it in.
+                    Projects are containers for feature flags. Each flag belongs
+                    to the project where you create it.
                 </ConceptDetails>
             </Box>
         </ConceptItem>
@@ -59,8 +59,8 @@ export const GenerateApiKeyConcepts = () => (
                     Flags have configuration in environments
                 </ConceptSummary>
                 <ConceptDetails>
-                    In Unleash you can have multiple environments. Each feature
-                    flag will have different configuration in every environment.
+                    You can have multiple environments, and each feature flag
+                    has a different configuration per environment.
                 </ConceptDetails>
             </Box>
         </ConceptItem>
@@ -71,9 +71,9 @@ export const GenerateApiKeyConcepts = () => (
                     SDKs connect to Unleash to retrieve configuration
                 </ConceptSummary>
                 <ConceptDetails>
-                    When you connect an SDK to Unleash it will use the API key
-                    to deduce which feature flags to retrieve and from which
-                    environment to retrieve configuration.
+                    When you connect an SDK to Unleash, it uses the API key to
+                    identify which feature flags and configuration to retrieve
+                    from each environment.
                 </ConceptDetails>
             </Box>
         </ConceptItem>
@@ -87,7 +87,7 @@ export const SelectSdkConcepts = () => (
             <Box>
                 <ConceptSummary>SDKs and Unleash</ConceptSummary>
                 <ConceptDetails>
-                    SDKs serve to bind your application to Unleash. The SDK will
+                    SDKs serve to bind your application to Unleash. The SDK can
                     connect to Unleash via HTTP and retrieve feature flag
                     configuration that is then cached in your application.
                     Making sure none of your application data ever leaves your

diff --git a/...roject/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.test.tsx b/...roject/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.test.tsx
@@ -29,7 +29,7 @@ test('Project can start onboarding', async () => {
             route: `/projects/${projectId}`,
         },
     );
-    await screen.findByText('The project currently holds no feature toggles.');
+    await screen.findByText('The project currently holds no feature flags.');
 });
 
 test('Project can connect SDK', async () => {
@@ -57,6 +57,6 @@ test('Project can connect SDK', async () => {
         },
     );
     await screen.findByText(
-        'Your project is not yet connected to any SDK. In order to start using your feature flag connect an SDK to the project.',
+        'Your project is not yet connected to any SDK. To start using your feature flag, connect an SDK to the project.',
     );
 });
diff --git a/...ent/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.tsx b/...ent/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.tsx
@@ -130,9 +130,8 @@ export const WelcomeToProject = ({
                         Connect an SDK
                     </TitleContainer>
                     <Typography>
-                        Your project is not yet connected to any SDK. In order
-                        to start using your feature flag connect an SDK to the
-                        project.
+                        Your project is not yet connected to any SDK. To start
+                        using your feature flag, connect an SDK to the project.
                     </Typography>
                     <ResponsiveButton
                         onClick={() => {
@@ -160,8 +159,8 @@ const CreateFlag = () => {
                 Create a feature flag
             </TitleContainer>
             <Typography>
-                <div>The project currently holds no feature toggles.</div>
-                <div>Create a feature flag to get started.</div>
+                <div>The project currently holds no feature flags.</div>
+                <div>Create one to get started.</div>
             </Typography>
             <FlagCreationButton text='Create flag' />
         </>