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

Merge branch 'main' into task/Add_strategy_information_to_playground_results

Browse Source
This commit is contained in:
andreas-unleash 2022-08-03 07:13:42 +03:00 committed by GitHub
commit 1a753a3bcb
6 changed files with 254 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx Normal file
View File

@ -0,0 +1,106 @@
import { MouseEvent, useContext, useState, VFC } from 'react';
import {
Button,
ListItemIcon,
ListItemText,
Menu,
MenuItem,
Tooltip,
} from '@mui/material';
import { Lock } from '@mui/icons-material';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { IFeatureEnvironment } from 'interfaces/featureToggle';
import AccessContext from 'contexts/AccessContext';
import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
interface ICopyButtonProps {
environmentId: IFeatureEnvironment['name'];
environments: IFeatureEnvironment['name'][];
onClick: (environmentId: string) => void;
}
export const CopyButton: VFC<ICopyButtonProps> = ({
environmentId,
environments,
onClick,
}) => {
const projectId = useRequiredPathParam('projectId');
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const { hasAccess } = useContext(AccessContext);
const enabled = environments.some(environment =>
hasAccess(CREATE_FEATURE_STRATEGY, projectId, environment)
);
return (
<div>
<Tooltip title={enabled ? '' : '(Access denied)'}>
<div>
<Button
id={`copy-all-strategies-${environmentId}`}
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={(event: MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
}}
disabled={!enabled}
variant="outlined"
>
Copy from another environment
</Button>
</div>
</Tooltip>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={() => {
setAnchorEl(null);
}}
MenuListProps={{
'aria-labelledby': `copy-all-strategies-${environmentId}`,
}}
>
{environments.map(environment => {
const access = hasAccess(
CREATE_FEATURE_STRATEGY,
projectId,
environment
);
return (
<Tooltip
title={
access
? ''
: "You don't have access to add a strategy to this environment"
}
key={environment}
>
<div>
<MenuItem
onClick={() => onClick(environment)}
disabled={!access}
>
<ConditionallyRender
condition={!access}
show={
<ListItemIcon>
<Lock fontSize="small" />
</ListItemIcon>
}
/>
<ListItemText>
Copy from {environment}
</ListItemText>
</MenuItem>
</div>
</Tooltip>
);
})}
</Menu>
</div>
);
};

83
frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
View File

@ -10,6 +10,8 @@ import { useStyles } from './FeatureStrategyEmpty.styles';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useFeatureImmutable } from 'hooks/api/getters/useFeature/useFeatureImmutable';
import { getFeatureStrategyIcon } from 'utils/strategyNames';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { CopyButton } from './CopyButton/CopyButton';
interface IFeatureStrategyEmptyProps {
projectId: string;
@ -30,18 +32,55 @@ export const FeatureStrategyEmpty = ({
projectId,
featureId
);
const { feature } = useFeature(projectId, featureId);
const otherAvailableEnvironments = feature?.environments.filter(
environment =>
environment.name !== environmentId &&
environment.strategies &&
environment.strategies.length > 0
);
const onAfterAddStrategy = () => {
const onAfterAddStrategy = (multiple = false) => {
refetchFeature();
refetchFeatureImmutable();
setToastData({
title: 'Strategy created',
text: 'Successfully created strategy',
title: multiple ? 'Strategies created' : 'Strategy created',
text: multiple
? 'Successfully copied from another environment'
: 'Successfully created strategy',
type: 'success',
});
};
const onCopyStrategies = async (fromEnvironmentName: string) => {
const strategies =
otherAvailableEnvironments?.find(
environment => environment.name === fromEnvironmentName
)?.strategies || [];
try {
await Promise.all(
strategies.map(strategy => {
const { id, ...strategyCopy } = {
...strategy,
environment: environmentId,
};
return addStrategyToFeature(
projectId,
featureId,
environmentId,
strategyCopy
);
})
);
onAfterAddStrategy(true);
} catch (error) {
setToastApiError(formatUnknownError(error));
}
};
const onAddSimpleStrategy = async () => {
try {
await addStrategyToFeature(projectId, featureId, environmentId, {
@ -82,12 +121,38 @@ export const FeatureStrategyEmpty = ({
<Link to="/admin/api">API key configured</Link> for this
environment.
</p>
<FeatureStrategyMenu
label="Add your first strategy"
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
/>
<Box
sx={{
w: '100%',
display: 'flex',
flexWrap: 'wrap',
gap: 2,
alignItems: 'center',
justifyContent: 'center',
}}
>
<FeatureStrategyMenu
label="Add your first strategy"
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
/>
<ConditionallyRender
condition={
otherAvailableEnvironments &&
otherAvailableEnvironments.length > 0
}
show={
<CopyButton
environmentId={environmentId}
environments={otherAvailableEnvironments.map(
environment => environment.name
)}
onClick={onCopyStrategies}
/>
}
/>
</Box>
<Box sx={{ width: '100%', mt: 3 }}>
<SectionSeparator>Or use a strategy template</SectionSeparator>
</Box>

21
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/CopyStrategyIconMenu/CopyStrategyIconMenu.tsx
View File

@ -40,10 +40,7 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
projectId,
featureId
);
const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
const onClose = () => {
setAnchorEl(null);
};
const { hasAccess } = useContext(AccessContext);
@ -70,7 +67,7 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
} catch (error) {
setToastApiError(formatUnknownError(error));
}
handleClose();
onClose();
};
const enabled = environments.some(environment =>
@ -87,11 +84,13 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
<div>
<IconButton
size="large"
id="basic-button"
id={`copy-strategy-icon-menu-${strategy.id}`}
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
onClick={(event: MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
}}
disabled={!enabled}
>
<CopyIcon />
@ -102,9 +101,9 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
onClose={onClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
'aria-labelledby': `copy-strategy-icon-menu-${strategy.id}`,
}}
>
{environments.map(environment => {
@ -136,7 +135,9 @@ export const CopyStrategyIconMenu: VFC<ICopyStrategyIconMenuProps> = ({
</ListItemIcon>
}
/>
<ListItemText>{environment}</ListItemText>
<ListItemText>
Copy to {environment}
</ListItemText>
</MenuItem>
</div>
</Tooltip>

12
frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
View File

@ -1,13 +1,15 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
container: {
display: 'grid',
gap: theme.spacing(4),
},
helpText: {
color: 'rgba(0, 0, 0, 0.54)',
color: theme.palette.text.secondary,
fontSize: theme.fontSizes.smallerBody,
lineHeight: '14px',
margin: '0.5rem 0',
},
generalSection: {
margin: '1rem 0',
margin: 0,
marginTop: theme.spacing(1),
},
}));

11
frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
View File

@ -53,14 +53,13 @@ const GeneralStrategy = ({
}
return (
<>
<div className={styles.container}>
{strategyDefinition.parameters.map(
({ name, type, description, required }) => {
if (type === 'percentage') {
const value = parseParameterNumber(parameters[name]);
return (
<div key={name}>
<br />
<RolloutSlider
name={name}
onChange={onChangePercentage.bind(
@ -103,7 +102,7 @@ const GeneralStrategy = ({
value.length > 0 ? !regex.test(value) : false;
return (
<div key={name} className={styles.generalSection}>
<div key={name}>
<TextField
error={error}
helperText={
@ -132,7 +131,7 @@ const GeneralStrategy = ({
} else if (type === 'boolean') {
const value = parseParameterString(parameters[name]);
return (
<div key={name} style={{ padding: '20px 0' }}>
<div key={name}>
<Tooltip
title={description}
placement="right-end"
@ -158,7 +157,7 @@ const GeneralStrategy = ({
} else {
const value = parseParameterString(parameters[name]);
return (
<div key={name} className={styles.generalSection}>
<div key={name}>
<TextField
rows={1}
placeholder=""
@ -185,7 +184,7 @@ const GeneralStrategy = ({
}
}
)}
</>
</div>
);
};

87
frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
View File

@ -1,5 +1,12 @@
import React, { ChangeEvent, useState } from 'react';
import { Button, Chip, TextField, Typography } from '@mui/material';
import {
Button,
Chip,
TextField,
Typography,
styled,
TextFieldProps,
} from '@mui/material';
import { Add } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
@ -12,6 +19,21 @@ interface IStrategyInputList {
disabled: boolean;
}
const Container = styled('div')(({ theme }) => ({
display: 'grid',
gap: theme.spacing(1),
}));
const ChipsList = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
}));
const InputContainer = styled('div')(({ theme }) => ({
display: 'flex',
gap: theme.spacing(1),
}));
const StrategyInputList = ({
name,
list,
@ -61,49 +83,42 @@ const StrategyInputList = ({
);
};
// @ts-expect-error
const onChange = e => {
setInput(e.currentTarget.value);
const onChange: TextFieldProps['onChange'] = event => {
setInput(event.currentTarget.value);
};
return (
<div>
<Container>
<Typography variant="subtitle2" component="h2">
List of {name}
</Typography>
<div
style={{
display: 'flex',
flexWrap: 'wrap',
margin: '10px 0',
}}
>
{list.map((entryValue, index) => (
<Chip
key={index + entryValue}
label={
<StringTruncator
maxWidth="300"
text={entryValue}
maxLength={50}
<ConditionallyRender
condition={list.length > 0}
show={
<ChipsList>
{list.map((entryValue, index) => (
<Chip
key={index + entryValue}
label={
<StringTruncator
maxWidth="300"
text={entryValue}
maxLength={50}
/>
}
onDelete={
disabled ? undefined : () => onClose(index)
}
title="Remove value"
/>
}
style={{ marginRight: '3px' }}
onDelete={disabled ? undefined : () => onClose(index)}
title="Remove value"
/>
))}
</div>
))}
</ChipsList>
}
/>
<ConditionallyRender
condition={!disabled}
show={
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '1rem',
}}
>
<InputContainer>
<TextField
name={`input_field`}
variant="outlined"
@ -128,10 +143,10 @@ const StrategyInputList = ({
>
Add
</Button>
</div>
</InputContainer>
}
/>
</div>
</Container>
);
};