Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

fix: improve steps for demo guide gradual rollout topic (#3723)

Browse Source 
https://linear.app/unleash/issue/2-1007/steps-improvement-adjust-gradual-rollout

Step improvements for the "gradual rollout" topic.

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537
This commit is contained in:
Nuno Góis 2023-05-09 16:24:28 +01:00 committed by GitHub
parent 72f7b66bf0
commit 0da0b13379
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/component/demo/demo-topics.tsx
View File

@ -72,10 +72,7 @@ export const TOPICS: ITutorialTopic[] = [
The simplest way to use a feature toggle is to The simplest way to use a feature toggle is to
enable or disable it for everyone (on/off). enable or disable it for everyone (on/off).
</Description> </Description>
<Badge <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
sx={{ marginTop: 2 }}
icon={<InfoOutlinedIcon />}
>
Look at the demo page when toggling! Look at the demo page when toggling!
</Badge> </Badge>
</> </>
@ -205,10 +202,7 @@ export const TOPICS: ITutorialTopic[] = [
<Description> <Description>
Enter your <Badge as="span">userId</Badge> Enter your <Badge as="span">userId</Badge>
</Description> </Description>
<Badge <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
sx={{ marginTop: 2 }}
icon={<InfoOutlinedIcon />}
>
You can find your userId on the demo page. You can find your userId on the demo page.
</Badge> </Badge>
</> </>
@ -244,10 +238,7 @@ export const TOPICS: ITutorialTopic[] = [
Finally, toggle{' '} Finally, toggle{' '}
<Badge as="span">demoApp.step2</Badge> <Badge as="span">demoApp.step2</Badge>
</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>
</> </>
@ -296,8 +287,9 @@ export const TOPICS: ITutorialTopic[] = [
target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step3"]`, target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step3"]`,
content: ( content: (
<Description> <Description>
First, let's open the feature toggle configuration for{' '} First, open the feature toggle configuration for{' '}
<Badge as="span">demoApp.step3</Badge> <Badge as="span">demoApp.step3</Badge> by using this
link.
</Description> </Description>
), ),
preventDefault: true, preventDefault: true,
@ -308,7 +300,7 @@ export const TOPICS: ITutorialTopic[] = [
content: ( content: (
<Description> <Description>
Expand the environment card to see all the defined Expand the environment card to see all the defined
strategies. strategies by using the arrow button.
</Description> </Description>
), ),
}, },
@ -316,7 +308,8 @@ export const TOPICS: ITutorialTopic[] = [
target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"].Mui-expanded a[data-testid="STRATEGY_EDIT-flexibleRollout"]`, target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"].Mui-expanded a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
content: ( content: (
<Description> <Description>
Edit the existing gradual rollout strategy. Edit the existing gradual rollout strategy by using the
"Edit" button.
</Description> </Description>
), ),
backCollapseExpanded: true, backCollapseExpanded: true,
@ -324,18 +317,35 @@ export const TOPICS: ITutorialTopic[] = [
{ {
target: 'span[data-testid="ROLLOUT_SLIDER_ID"]', target: 'span[data-testid="ROLLOUT_SLIDER_ID"]',
content: ( content: (
<Description>Change the rollout percentage.</Description> <>
<Description>
Change the rollout percentage by adjusting the
percentage slider.
</Description>
<Description sx={{ mt: 1 }}>
When you're done, use the "Next" button in the
dialog.
</Description>
</>
), ),
backCloseModal: true, backCloseModal: true,
nextButton: true, nextButton: true,
}, },
{ {
target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]', target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
content: <Description>Save your strategy.</Description>, content: (
<Description>
Save and apply your strategy by using this button.
</Description>
),
}, },
{ {
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]', target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
content: <Description>Confirm your changes.</Description>, content: (
<Description>
Confirm your changes by using this button.
</Description>
),
optional: true, optional: true,
backCloseModal: true, backCloseModal: true,
}, },
@ -345,13 +355,10 @@ export const TOPICS: ITutorialTopic[] = [
content: ( content: (
<> <>
<Description> <Description>
Finally, toggle{' '} Finally, enable or disable the feature with the new
<Badge as="span">demoApp.step3</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>
</> </>
@ -514,10 +521,7 @@ export const TOPICS: ITutorialTopic[] = [
<Description> <Description>
Enter your <Badge as="span">userId</Badge> Enter your <Badge as="span">userId</Badge>
</Description> </Description>
<Badge <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
sx={{ marginTop: 2 }}
icon={<InfoOutlinedIcon />}
>
You can find your userId on the demo page. You can find your userId on the demo page.
</Badge> </Badge>
<Description sx={{ mt: 1 }}> <Description sx={{ mt: 1 }}>