mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-04 00:18:01 +01:00
fix: improve steps for demo guide variants topic (#3721)
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
This commit is contained in:
Nuno Góis
GitHub
parent
a6aa34ece5
commit
29857e2bc5
@ -395,8 +395,9 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4"]`,
|
target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4"]`,
|
||||||
content: (
|
content: (
|
||||||
<Description>
|
<Description>
|
||||||
First, let's open the feature toggle configuration for{' '}
|
First, open the feature toggle configuration for{' '}
|
||||||
<Badge as="span">demoApp.step4</Badge>
|
<Badge as="span">demoApp.step4</Badge> by using this
|
||||||
|
link.
|
||||||
</Description>
|
</Description>
|
||||||
),
|
),
|
||||||
preventDefault: true,
|
preventDefault: true,
|
||||||
@ -404,16 +405,22 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
{
|
{
|
||||||
href: `/projects/${PROJECT}/features/demoApp.step4`,
|
href: `/projects/${PROJECT}/features/demoApp.step4`,
|
||||||
target: 'button[data-testid="TAB-Variants"]',
|
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"]',
|
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"]',
|
target: 'button[data-testid="MODAL_ADD_VARIANT_BUTTON"]',
|
||||||
content: (
|
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,
|
backCloseModal: true,
|
||||||
},
|
},
|
||||||
@ -421,19 +428,12 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
target: 'div[data-testid="VARIANT"]:last-of-type div[data-testid="VARIANT_NAME_INPUT"]',
|
target: 'div[data-testid="VARIANT"]:last-of-type div[data-testid="VARIANT_NAME_INPUT"]',
|
||||||
content: (
|
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>
|
<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>
|
</Description>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
@ -444,16 +444,29 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
{
|
{
|
||||||
target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value',
|
target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value',
|
||||||
content: (
|
content: (
|
||||||
<Description>
|
<>
|
||||||
Enter the{' '}
|
<Description>
|
||||||
<a
|
Enter a{' '}
|
||||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color"
|
<a
|
||||||
target="_blank"
|
href="https://developer.mozilla.org/en-US/docs/Web/CSS/named-color"
|
||||||
>
|
target="_blank"
|
||||||
color
|
>
|
||||||
</a>{' '}
|
color
|
||||||
you chose on the previous step as the payload.
|
</a>{' '}
|
||||||
</Description>
|
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,
|
nextButton: true,
|
||||||
focus: true,
|
focus: true,
|
||||||
@ -461,14 +474,25 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
{
|
{
|
||||||
target: 'div[data-testid="VARIANT"]:last-of-type button[data-testid="VARIANT_ADD_OVERRIDE_BUTTON"]',
|
target: 'div[data-testid="VARIANT"]:last-of-type button[data-testid="VARIANT_ADD_OVERRIDE_BUTTON"]',
|
||||||
content: (
|
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',
|
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,
|
anyClick: true,
|
||||||
backCloseModal: true,
|
backCloseModal: true,
|
||||||
},
|
},
|
||||||
@ -496,6 +520,10 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
>
|
>
|
||||||
You can find your userId on the demo page.
|
You can find your userId on the demo page.
|
||||||
</Badge>
|
</Badge>
|
||||||
|
<Description sx={{ mt: 1 }}>
|
||||||
|
When you're done, use the "Next" button in the
|
||||||
|
dialog.
|
||||||
|
</Description>
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
nextButton: true,
|
nextButton: true,
|
||||||
@ -504,7 +532,11 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
|
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`,
|
href: `/projects/${PROJECT}?sort=name`,
|
||||||
@ -512,13 +544,10 @@ export const TOPICS: ITutorialTopic[] = [
|
|||||||
content: (
|
content: (
|
||||||
<>
|
<>
|
||||||
<Description>
|
<Description>
|
||||||
Finally, toggle{' '}
|
Finally, enable or disable the feature with the new
|
||||||
<Badge as="span">demoApp.step4</Badge>
|
variant by toggling the highlighted switch.
|
||||||
</Description>
|
</Description>
|
||||||
<Badge
|
<Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
|
||||||
sx={{ marginTop: 2 }}
|
|
||||||
icon={<InfoOutlinedIcon />}
|
|
||||||
>
|
|
||||||
Look at the demo page to see your changes!
|
Look at the demo page to see your changes!
|
||||||
</Badge>
|
</Badge>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user