mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
697fb6aab5
https://linear.app/unleash/issue/2-961/update-demo-guide-steps-to-not-include-a-userids-strategy Updates the user-specific toggle topic to use a standard strategy with a constraint instead (deprecate UserID strategy). Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item: #3537 <img width="1282" alt="image" src="https://user-images.githubusercontent.com/14320932/233987506-380d89e3-bd5d-461d-a5dc-89e54ad21d88.png">
520 lines
20 KiB
TypeScript
520 lines
20 KiB
TypeScript
import { Typography, TypographyProps } from '@mui/material';
|
|
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
|
import { Badge } from 'component/common/Badge/Badge';
|
|
import { Step } from 'react-joyride';
|
|
import { gradualRollout, variants } from './demo-setup';
|
|
|
|
export interface ITutorialTopicStep extends Step {
|
|
href?: string;
|
|
nextButton?: boolean;
|
|
backCloseModal?: boolean;
|
|
backCollapseExpanded?: boolean;
|
|
preventDefault?: boolean;
|
|
anyClick?: boolean;
|
|
optional?: boolean;
|
|
}
|
|
|
|
export interface ITutorialTopic {
|
|
title: string;
|
|
setup?: () => Promise<void>;
|
|
steps: ITutorialTopicStep[];
|
|
}
|
|
|
|
const Description = (props: TypographyProps) => (
|
|
<Typography variant="body2" color="text.secondary" {...props} />
|
|
);
|
|
|
|
export const TOPICS: ITutorialTopic[] = [
|
|
{
|
|
title: 'Enable/disable a feature toggle',
|
|
steps: [
|
|
{
|
|
href: '/projects/default',
|
|
target: 'body',
|
|
placement: 'center',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
<a
|
|
href="https://docs.getunleash.io/reference/feature-toggles"
|
|
target="_blank"
|
|
>
|
|
Feature toggles
|
|
</a>{' '}
|
|
are the central concept of Unleash.
|
|
</Description>
|
|
<Description sx={{ mt: 1 }}>
|
|
Feature toggles are organized within{' '}
|
|
<a
|
|
href="https://docs.getunleash.io/reference/projects"
|
|
target="_blank"
|
|
>
|
|
projects
|
|
</a>
|
|
.
|
|
</Description>
|
|
</>
|
|
),
|
|
nextButton: true,
|
|
},
|
|
{
|
|
href: '/projects/default',
|
|
target: 'div[data-testid="TOGGLE-demoApp.step1-default"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
The simplest way to use a feature toggle is to
|
|
enable or disable it for everyone (on/off).
|
|
</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
Look at the demo page when toggling!
|
|
</Badge>
|
|
</>
|
|
),
|
|
nextButton: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Enable for a specific user',
|
|
steps: [
|
|
{
|
|
href: '/projects/default',
|
|
target: 'body',
|
|
placement: 'center',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
<a
|
|
href="https://docs.getunleash.io/reference/activation-strategies"
|
|
target="_blank"
|
|
>
|
|
Activation strategies
|
|
</a>{' '}
|
|
give you more control over when a feature should be
|
|
enabled.
|
|
</Description>
|
|
<Description sx={{ mt: 1 }}>
|
|
Let's try enabling a feature toggle only for a
|
|
specific user.
|
|
</Description>
|
|
</>
|
|
),
|
|
nextButton: true,
|
|
},
|
|
{
|
|
href: '/projects/default',
|
|
target: 'a[href="/projects/default/features/demoApp.step2"]',
|
|
content: (
|
|
<Description>
|
|
First, let's open the feature toggle configuration for{' '}
|
|
<Badge as="span">demoApp.step2</Badge>.
|
|
</Description>
|
|
),
|
|
preventDefault: true,
|
|
},
|
|
{
|
|
href: '/projects/default/features/demoApp.step2',
|
|
target: 'div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_default"] button',
|
|
content: (
|
|
<Description>
|
|
Add a new strategy to this environment by clicking this
|
|
button.
|
|
</Description>
|
|
),
|
|
},
|
|
{
|
|
target: 'a[href="/projects/default/features/demoApp.step2/strategies/create?environmentId=default&strategyName=default"]',
|
|
content: (
|
|
<Description>
|
|
Select the <Badge as="span">Standard</Badge> strategy
|
|
type.
|
|
</Description>
|
|
),
|
|
placement: 'right',
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'button[data-testid="ADD_CONSTRAINT_BUTTON"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
<a
|
|
href="https://docs.getunleash.io/reference/strategy-constraints"
|
|
target="_blank"
|
|
>
|
|
Strategy constraints
|
|
</a>{' '}
|
|
are conditions that must be satisfied for an{' '}
|
|
<a
|
|
href="https://docs.getunleash.io/reference/activation-strategies"
|
|
target="_blank"
|
|
>
|
|
activation strategy
|
|
</a>{' '}
|
|
to be evaluated for a feature toggle.
|
|
</Description>
|
|
<Description sx={{ mt: 1 }}>
|
|
Click this button to add a constraint.
|
|
</Description>
|
|
</>
|
|
),
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: '#context-field-select',
|
|
content: (
|
|
<Description>
|
|
<a
|
|
href="https://docs.getunleash.io/reference/unleash-context"
|
|
target="_blank"
|
|
>
|
|
Unleash context
|
|
</a>{' '}
|
|
contains information relating to the current feature
|
|
toggle request.
|
|
</Description>
|
|
),
|
|
backCloseModal: true,
|
|
anyClick: true,
|
|
},
|
|
{
|
|
target: 'li[data-testid="SELECT_ITEM_ID-userId"]',
|
|
content: (
|
|
<Description>
|
|
Select the <Badge as="span">userId</Badge> context
|
|
field.
|
|
</Description>
|
|
),
|
|
placement: 'right',
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'div[data-testid="CONSTRAINT_VALUES_INPUT"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
Enter your <Badge as="span">userId</Badge>.
|
|
</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
You can find your userId on the demo page.
|
|
</Badge>
|
|
</>
|
|
),
|
|
backCloseModal: true,
|
|
nextButton: true,
|
|
},
|
|
{
|
|
target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]',
|
|
content: <Description>Add the constraint value.</Description>,
|
|
},
|
|
{
|
|
target: 'button[data-testid="CONSTRAINT_SAVE_BUTTON"]',
|
|
content: <Description>Save the constraint.</Description>,
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
Save your strategy to apply it.
|
|
</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
Look at the demo page after saving!
|
|
</Badge>
|
|
</>
|
|
),
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
|
|
content: (
|
|
<>
|
|
<Description>Confirm your changes.</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
Look at the demo page after saving!
|
|
</Badge>
|
|
</>
|
|
),
|
|
optional: true,
|
|
backCloseModal: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Adjust gradual rollout',
|
|
setup: gradualRollout,
|
|
steps: [
|
|
{
|
|
href: '/projects/default',
|
|
target: 'body',
|
|
placement: 'center',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
<a
|
|
href="https://docs.getunleash.io/reference/activation-strategies#gradual-rollout"
|
|
target="_blank"
|
|
>
|
|
Gradual rollout
|
|
</a>{' '}
|
|
is one of the available{' '}
|
|
<a
|
|
href="https://docs.getunleash.io/reference/activation-strategies"
|
|
target="_blank"
|
|
>
|
|
activation strategies
|
|
</a>
|
|
.
|
|
</Description>
|
|
<Description sx={{ mt: 1 }}>
|
|
Let's try enabling a feature toggle only for a
|
|
certain percentage of users.
|
|
</Description>
|
|
</>
|
|
),
|
|
nextButton: true,
|
|
},
|
|
{
|
|
href: '/projects/default',
|
|
target: 'a[href="/projects/default/features/demoApp.step3"]',
|
|
content: (
|
|
<Description>
|
|
First, let's open the feature toggle configuration for{' '}
|
|
<Badge as="span">demoApp.step3</Badge>.
|
|
</Description>
|
|
),
|
|
preventDefault: true,
|
|
},
|
|
{
|
|
href: '/projects/default/features/demoApp.step3',
|
|
target: 'div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_default"] .MuiAccordionSummary-expandIconWrapper',
|
|
content: (
|
|
<Description>
|
|
Expand the environment card to see all the defined
|
|
strategies.
|
|
</Description>
|
|
),
|
|
},
|
|
{
|
|
target: 'div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_default"].Mui-expanded a[data-testid="STRATEGY_EDIT-flexibleRollout"]',
|
|
content: (
|
|
<Description>
|
|
Edit the existing gradual rollout strategy.
|
|
</Description>
|
|
),
|
|
backCollapseExpanded: true,
|
|
},
|
|
{
|
|
target: 'span[data-testid="ROLLOUT_SLIDER_ID"]',
|
|
content: (
|
|
<Description>Change the rollout percentage.</Description>
|
|
),
|
|
backCloseModal: true,
|
|
nextButton: true,
|
|
},
|
|
{
|
|
target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
Save your strategy to apply it.
|
|
</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
Look at the demo page after saving!
|
|
</Badge>
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
|
|
content: (
|
|
<>
|
|
<Description>Confirm your changes.</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
Look at the demo page after saving!
|
|
</Badge>
|
|
</>
|
|
),
|
|
optional: true,
|
|
backCloseModal: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Adjust variants',
|
|
setup: variants,
|
|
steps: [
|
|
{
|
|
href: '/projects/default',
|
|
target: 'body',
|
|
placement: 'center',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
<a
|
|
href="https://docs.getunleash.io/reference/feature-toggle-variants"
|
|
target="_blank"
|
|
>
|
|
Feature toggle variants
|
|
</a>{' '}
|
|
allow you to define different values for a feature
|
|
toggle. They can be used for A/B testing or
|
|
segmenting your users.
|
|
</Description>
|
|
<Description sx={{ mt: 1 }}>
|
|
Let's try adding a variant to a feature toggle,
|
|
along with an override so our user can see it.
|
|
</Description>
|
|
</>
|
|
),
|
|
nextButton: true,
|
|
},
|
|
{
|
|
href: '/projects/default',
|
|
target: 'a[href="/projects/default/features/demoApp.step4"]',
|
|
content: (
|
|
<Description>
|
|
First, let's open the feature toggle configuration for{' '}
|
|
<Badge as="span">demoApp.step4</Badge>.
|
|
</Description>
|
|
),
|
|
preventDefault: true,
|
|
},
|
|
{
|
|
href: '/projects/default/features/demoApp.step4',
|
|
target: 'button[data-testid="TAB-Variants"]',
|
|
content: <Description>Select the variants tab.</Description>,
|
|
},
|
|
{
|
|
target: 'button[data-testid="EDIT_VARIANTS_BUTTON"]',
|
|
content: <Description>Edit the existing variants.</Description>,
|
|
},
|
|
{
|
|
target: 'button[data-testid="MODAL_ADD_VARIANT_BUTTON"]',
|
|
content: (
|
|
<Description>Add a new variant to the list.</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>.
|
|
</Description>
|
|
</>
|
|
),
|
|
backCloseModal: true,
|
|
nextButton: true,
|
|
},
|
|
{
|
|
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>
|
|
),
|
|
nextButton: 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>
|
|
),
|
|
},
|
|
{
|
|
target: 'div[data-testid="VARIANT"]:last-of-type #override-context-name',
|
|
content: <Description>Choose a context field.</Description>,
|
|
anyClick: true,
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'li[data-testid="SELECT_ITEM_ID-userId"]',
|
|
content: (
|
|
<Description>
|
|
Select the <Badge as="span">userId</Badge> context
|
|
field.
|
|
</Description>
|
|
),
|
|
placement: 'right',
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'div[data-testid="VARIANT"]:last-of-type div[data-testid="OVERRIDE_VALUES"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
Enter your <Badge as="span">userId</Badge>.
|
|
</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
You can find your userId on the demo page.
|
|
</Badge>
|
|
</>
|
|
),
|
|
nextButton: true,
|
|
backCloseModal: true,
|
|
},
|
|
{
|
|
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
|
|
content: (
|
|
<>
|
|
<Description>
|
|
Save your variants to apply them.
|
|
</Description>
|
|
<Badge
|
|
sx={{ marginTop: 2 }}
|
|
icon={<InfoOutlinedIcon />}
|
|
>
|
|
Look at the demo page after saving!
|
|
</Badge>
|
|
</>
|
|
),
|
|
},
|
|
],
|
|
},
|
|
];
|