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

fix: small fixes on variants push to env UI (#2991)

Browse Source 
https://linear.app/unleash/issue/2-652/slight-improvements-and-fixes-on-the-push-to-environment-feature

Includes:

- Hover effect on the items should cover the full width of the menu;
- Clicking anywhere on the item should toggle the check;
- Small refactoring


![image](https://user-images.githubusercontent.com/14320932/214592250-05ecc584-3b6b-49f4-93a5-4d3323cd9cde.png)
This commit is contained in:
Nuno Góis 2023-01-25 14:49:01 +00:00 committed by GitHub
parent 436849edf3
commit 7d814a623f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/PushVariantsButton/PushVariantsButton.tsx
View File

@ -2,7 +2,6 @@ import {
Button,
Checkbox,
Divider,
FormControlLabel,
Menu,
MenuItem,
styled,
@ -13,19 +12,22 @@ import { useState } from 'react';
import { useCheckProjectAccess } from 'hooks/useHasAccess';
const StyledMenu = styled(Menu)(({ theme }) => ({
'&>div>ul': {
'& > div > ul': {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: theme.spacing(2),
'&>li': {
padding: theme.spacing(0),
'& > li': {
padding: theme.spacing(0, 1),
},
},
}));
const StyledActions = styled('div')(({ theme }) => ({
margin: theme.spacing(1, 2),
}));
const StyledButton = styled(Button)(({ theme }) => ({
marginTop: theme.spacing(1),
marginTop: theme.spacing(2),
}));
interface IPushVariantsButtonProps {
@ -77,6 +79,16 @@ export const PushVariantsButton = ({
);
};
const toggleSelectedEnvironment = (
environment: IFeatureEnvironmentWithCrEnabled
) => {
if (selectedEnvironments.includes(environment)) {
removeSelectedEnvironment(environment);
} else {
addSelectedEnvironment(environment);
}
};
const cleanupState = () => {
setSelectedEnvironments([]);
setPushToAnchorEl(null);
@ -115,47 +127,39 @@ export const PushVariantsButton = ({
{environments
.filter(environment => environment.name !== current)
.map(otherEnvironment => (
<MenuItem key={otherEnvironment.name}>
<FormControlLabel
disabled={
!hasAccessTo[
otherEnvironment.name
] ?? false
}
control={
<Checkbox
onChange={event => {
if (event.target.checked) {
addSelectedEnvironment(
otherEnvironment
);
} else {
removeSelectedEnvironment(
otherEnvironment
);
}
}}
checked={selectedEnvironments.includes(
otherEnvironment
)}
value={otherEnvironment.name}
/>
}
label={otherEnvironment.name}
<MenuItem
key={otherEnvironment.name}
disabled={
!hasAccessTo[otherEnvironment.name] ??
false
}
onClick={() =>
toggleSelectedEnvironment(
otherEnvironment
)
}
>
<Checkbox
checked={selectedEnvironments.includes(
otherEnvironment
)}
/>
{otherEnvironment.name}
</MenuItem>
))}
<Divider />
<StyledButton
variant="outlined"
onClick={() => {
onSubmit(selectedEnvironments);
cleanupState();
}}
disabled={selectedEnvironments.length === 0}
>
Push to selected ({selectedEnvironments.length})
</StyledButton>
<StyledActions>
<Divider />
<StyledButton
variant="outlined"
onClick={() => {
onSubmit(selectedEnvironments);
cleanupState();
}}
disabled={selectedEnvironments.length === 0}
>
Push to selected ({selectedEnvironments.length})
</StyledButton>
</StyledActions>
</StyledMenu>
</>
}