Skip to content

Commit

Permalink
fix: improve steps for demo guide variants topic (#3721)
Browse files Browse the repository at this point in the history 
https://linear.app/unleash/issue/2-1008/steps-improvement-adjust-variants

Step improvements for the "variants" topic.

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537
  • Loading branch information
@nunogois
nunogois committed May 9, 2023
1 parent a6aa34e commit 29857e2
Showing 1 changed file with 67 additions and 38 deletions.
105 changes: 67 additions & 38 deletions frontend/src/component/demo/demo-topics.tsx
View file
Expand Up @@ -395,45 +395,45 @@ export const TOPICS: ITutorialTopic[] = [
target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4"]`,
content: (
<Description>
First, let's open the feature toggle configuration for{' '}
<Badge as="span">demoApp.step4</Badge>
First, open the feature toggle configuration for{' '}
<Badge as="span">demoApp.step4</Badge> by using this
link.
</Description>
),
preventDefault: true,
},
{
href: `/projects/${PROJECT}/features/demoApp.step4`,
target: 'button[data-testid="TAB-Variants"]',
content: <Description>Select the variants tab.</Description>,
content: <Description>Select the "Variants" tab.</Description>,
},
{
target: 'button[data-testid="EDIT_VARIANTS_BUTTON"]',
content: <Description>Edit the existing variants.</Description>,
content: (
<Description>
Edit the existing variants by using this button.
</Description>
),
},
{
target: 'button[data-testid="MODAL_ADD_VARIANT_BUTTON"]',
content: (
<Description>Add a new variant to the list.</Description>
<Description>
Add a new variant to the list by using this button.
</Description>
),
backCloseModal: true,
},
{
target: 'div[data-testid="VARIANT"]:last-of-type div[data-testid="VARIANT_NAME_INPUT"]',
content: (
<>
<Description>Enter a new variant name.</Description>
<Description sx={{ mt: 1 }}>
We recommend choosing a{' '}
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color"
target="_blank"
>
color
</a>
.
</Description>
<Description>
Example: <Badge as="span">aqua</Badge>
Enter a unique name for your variant.
</Description>
<Description sx={{ mt: 1 }}>
When you're done, use the "Next" button in the
dialog.
</Description>
</>
),
Expand All @@ -444,31 +444,55 @@ export const TOPICS: ITutorialTopic[] = [
{
target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value',
content: (
<Description>
Enter the{' '}
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color"
target="_blank"
>
color
</a>{' '}
you chose on the previous step as the payload.
</Description>
<>
<Description>
Enter a{' '}
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color"
target="_blank"
>
color
</a>{' '}
as the payload. It will be passed along and used in
the demo website.
</Description>
<Description sx={{ mt: 1 }}>
It can be any color. For example, you can use one of
these: <Badge as="span">teal</Badge>,{' '}
<Badge as="span">orange</Badge> or{' '}
<Badge as="span">purple</Badge>
</Description>
<Description sx={{ mt: 1 }}>
When you're done, use the "Next" button in the
dialog.
</Description>
</>
),
nextButton: true,
focus: true,
},
{
target: 'div[data-testid="VARIANT"]:last-of-type button[data-testid="VARIANT_ADD_OVERRIDE_BUTTON"]',
content: (
<Description>
Let's also add an override for our user.
</Description>
<>
<Description>
By adding an override, we can specify that your user
will always get this variant.
</Description>
<Description sx={{ mt: 1 }}>
Let's add an override for your user by using this
button.
</Description>
</>
),
},
{
target: 'div[data-testid="VARIANT"]:last-of-type #override-context-name',
content: <Description>Choose a context field.</Description>,
content: (
<Description>
Select the context field by using this dropdown.
</Description>
),
anyClick: true,
backCloseModal: true,
},
Expand Down Expand Up @@ -496,6 +520,10 @@ export const TOPICS: ITutorialTopic[] = [
>
You can find your userId on the demo page.
</Badge>
<Description sx={{ mt: 1 }}>
When you're done, use the "Next" button in the
dialog.
</Description>
</>
),
nextButton: true,
Expand All @@ -504,21 +532,22 @@ export const TOPICS: ITutorialTopic[] = [
},
{
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
content: <Description>Save your variants.</Description>,
content: (
<Description>
Save your variants by using this button.
</Description>
),
},
{
href: `/projects/${PROJECT}?sort=name`,
target: `div[data-testid="TOGGLE-demoApp.step4-${ENVIRONMENT}"]`,
content: (
<>
<Description>
Finally, toggle{' '}
<Badge as="span">demoApp.step4</Badge>
Finally, enable or disable the feature with the new
variant by toggling the highlighted switch.
</Description>
<Badge
sx={{ marginTop: 2 }}
icon={<InfoOutlinedIcon />}
>
<Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
Look at the demo page to see your changes!
</Badge>
</>
Expand Down

0 comments on commit 29857e2

Please sign in to comment.